From 48677aeaabc9d2fe9b9b0ce4d31191855d3bcd21 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 5 Feb 2024 11:26:47 +0000
Subject: [PATCH] Move derived component stores out of main component store

---
 .../builder/src/stores/builder/components.js  | 68 +++++++++----------
 1 file changed, 32 insertions(+), 36 deletions(-)

diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index a01eadd38f..2fa0620f05 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -72,39 +72,6 @@ export class ComponentStore extends BudiStore {
     this.isCached = this.isCached.bind(this)
     this.cacheSettings = this.cacheSettings.bind(this)
     this.getComponentSettings = this.getComponentSettings.bind(this)
-
-    this.selected = derived(
-      [this.store, selectedScreen],
-      ([$store, $selectedScreen]) => {
-        if (
-          $selectedScreen &&
-          $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
-        ) {
-          return $selectedScreen?.props
-        }
-        if (!$selectedScreen || !$store.selectedComponentId) {
-          return null
-        }
-        const selected = findComponent(
-          $selectedScreen?.props,
-          $store.selectedComponentId
-        )
-
-        const clone = selected ? cloneDeep(selected) : selected
-        this.migrateSettings(clone)
-        return clone
-      }
-    )
-
-    this.selectedComponentPath = derived(
-      [this.store, selectedScreen],
-      ([$store, $selectedScreen]) => {
-        return findComponentPath(
-          $selectedScreen?.props,
-          $store.selectedComponentId
-        ).map(component => component._id)
-      }
-    )
   }
 
   /**
@@ -202,7 +169,7 @@ export class ComponentStore extends BudiStore {
     const componentPrefix = "@budibase/standard-components"
     let migrated = false
 
-    if (enrichedComponent?._component == `${componentPrefix}/formblock`) {
+    if (enrichedComponent?._component === `${componentPrefix}/formblock`) {
       // Use default config if the 'buttons' prop has never been initialised
       if (!("buttons" in enrichedComponent)) {
         enrichedComponent["buttons"] =
@@ -1149,6 +1116,35 @@ export class ComponentStore extends BudiStore {
 
 export const componentStore = new ComponentStore()
 
-export const selectedComponent = componentStore.selected
+export const selectedComponent = derived(
+  [componentStore, selectedScreen],
+  ([$store, $selectedScreen]) => {
+    if (
+      $selectedScreen &&
+      $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
+    ) {
+      return $selectedScreen?.props
+    }
+    if (!$selectedScreen || !$store.selectedComponentId) {
+      return null
+    }
+    const selected = findComponent(
+      $selectedScreen?.props,
+      $store.selectedComponentId
+    )
 
-export const selectedComponentPath = componentStore.selectedComponentPath
+    const clone = selected ? cloneDeep(selected) : selected
+    componentStore.migrateSettings(clone)
+    return clone
+  }
+)
+
+export const selectedComponentPath = derived(
+  [componentStore, selectedScreen],
+  ([$store, $selectedScreen]) => {
+    return findComponentPath(
+      $selectedScreen?.props,
+      $store.selectedComponentId
+    ).map(component => component._id)
+  }
+)