Simplify derived screenComponentErrors

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -11,7 +11,7 @@
     selectedScreen,
     hoverStore,
     componentTreeNodesStore,
-    screenComponentStore,
+    screenComponentErrors,
     snippets,
   } from "@/stores/builder"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
@@ -69,7 +69,7 @@
       port: window.location.port,
     },
     snippets: $snippets,
-    componentErrors: $screenComponentStore.errors,
+    componentErrors: $screenComponentErrors,
   }
 
   // Refresh the preview when required

packages/builder/src/stores/builder/index.js

@@ -16,7 +16,7 @@ import { userStore, userSelectedResourceMap, isOnlyUser } from "./users.js"
 import { deploymentStore } from "./deployments.js"
 import { contextMenuStore } from "./contextMenu.js"
 import { snippets } from "./snippets"
-import { screenComponentStore } from "./screenComponent"
+import { screenComponentErrors } from "./screenComponent"
 
 // Backend
 import { tables } from "./tables"
@@ -68,7 +68,7 @@ export {
   snippets,
   rowActions,
   appPublished,
-  screenComponentStore,
+  screenComponentErrors,
 }
 
 export const reset = () => {

packages/builder/src/stores/builder/screenComponent.ts

@@ -2,79 +2,57 @@ import { derived } from "svelte/store"
 import { tables } from "./tables"
 import { selectedScreen } from "./screens"
 import { viewsV2 } from "./viewsV2"
-import { DerivedBudiStore } from "../BudiStore"
 import { findComponentsBySettingsType } from "@/helpers/screen"
 import { Screen, Table, ViewV2 } from "@budibase/types"
 
-interface BuilderScreenComponentStore {}
+export const screenComponentErrors = derived(
+  [selectedScreen, tables, viewsV2],
+  ([$selectedScreen, $tables, $viewsV2]): Record<string, string[]> => {
+    function flattenTablesAndViews(tables: Table[], views: ViewV2[]) {
+      return {
+        ...tables.reduce(
+          (list, table) => ({
+            ...list,
+            [table._id!]: table,
+          }),
+          {}
+        ),
+        ...views.reduce(
+          (list, view) => ({
+            ...list,
+            [view.id]: view,
+          }),
+          {}
+        ),
+      }
+    }
 
-interface DerivedScreenComponentStore extends BuilderScreenComponentStore {
+    function getInvalidDatasources(
-  errors: Record<string, string[]>
+      screen: Screen,
-}
+      datasources: Record<string, any>
+    ) {
+      const friendlyNameByType = {
+        table: "table",
+        view: "view",
+        viewV2: "view",
+      }
 
-export class ScreenComponentStore extends DerivedBudiStore<
+      const result: Record<string, string[]> = {}
-  BuilderScreenComponentStore,
+      for (const component of findComponentsBySettingsType(screen, "table")) {
-  DerivedScreenComponentStore
+        const { resourceId, type, label } = component.dataSource
-> {
+        if (!datasources[resourceId]) {
-  constructor() {
+          const friendlyTypeName =
-    const makeDerivedStore = () => {
+            friendlyNameByType[type as keyof typeof friendlyNameByType]
-      return derived(
+          result[component._id!] = [
-        [selectedScreen, tables, viewsV2],
+            `The ${friendlyTypeName} named "${label}" does not exist`,
-        ([$selectedScreen, $tables, $viewsV2]): DerivedScreenComponentStore => {
+          ]
-          const datasources = flattenTablesAndViews($tables.list, $viewsV2.list)
-          return {
-            errors: getInvalidDatasources($selectedScreen, datasources),
-          }
         }
-      )
+      }
+
+      return result
     }
 
-    super({}, makeDerivedStore)
+    const datasources = flattenTablesAndViews($tables.list, $viewsV2.list)
+    return getInvalidDatasources($selectedScreen, datasources)
   }
-}
+)
-
-export const screenComponentStore = new ScreenComponentStore()
-
-function flattenTablesAndViews(tables: Table[], views: ViewV2[]) {
-  return {
-    ...tables.reduce(
-      (list, table) => ({
-        ...list,
-        [table._id!]: table,
-      }),
-      {}
-    ),
-    ...views.reduce(
-      (list, view) => ({
-        ...list,
-        [view.id]: view,
-      }),
-      {}
-    ),
-  }
-}
-
-function getInvalidDatasources(
-  screen: Screen,
-  datasources: Record<string, any>
-) {
-  const friendlyNameByType = {
-    table: "table",
-    view: "view",
-    viewV2: "view",
-  }
-
-  const result: Record<string, string[]> = {}
-  for (const component of findComponentsBySettingsType(screen, "table")) {
-    const { resourceId, type, label } = component.dataSource
-    if (!datasources[resourceId]) {
-      const friendlyTypeName =
-        friendlyNameByType[type as keyof typeof friendlyNameByType]
-      result[component._id!] = [
-        `The ${friendlyTypeName} named "${label}" does not exist`,
-      ]
-    }
-  }
-
-  return result
-}