Invert some client store dependencies to improve performance and prevent dependency cycles

packages/client/manifest.json

@@ -85,6 +85,10 @@
     "icon": "Selection",
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 200
+    },
     "styles": [
       "padding",
       "size",

packages/client/src/components/Component.svelte

@@ -21,14 +21,14 @@
     devToolsStore,
     componentStore,
     appStore,
-    isDragging,
+    dndIsDragging,
+    dndComponentPath,
   } from "stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
-  import { DNDPlaceholderID } from "constants"
 
   export let instance = {}
   export let isLayout = false
@@ -105,7 +105,7 @@
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
   $: inDragPath = inSelectedPath && $builderStore.editMode
-  $: inDndPath = $componentStore.dndPath?.includes(id)
+  $: inDndPath = $dndComponentPath?.includes(id)
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
@@ -162,7 +162,7 @@
   // nested layers. Only reset this when dragging stops.
   let pad = false
   $: pad = pad || (interactive && hasChildren && inDndPath)
-  $: $isDragging, (pad = false)
+  $: $dndIsDragging, (pad = false)
 
   // Update component context
   $: store.set({
@@ -471,7 +471,6 @@
     class:pad
     class:parent={hasChildren}
     class:block={isBlock}
-    class:placeholder={id === DNDPlaceholderID}
     data-id={id}
     data-name={name}
     data-icon={icon}
@@ -502,7 +501,7 @@
     display: contents;
   }
   .component :global(> *) {
-    transition: padding 260ms ease-in, border 260ms ease-in;
+    transition: padding 260ms ease-out, border 260ms ease-out;
   }
   .component.pad :global(> *) {
     padding: 12px !important;

packages/client/src/components/preview/DNDHandler.svelte

@@ -4,14 +4,15 @@
   import IndicatorSet from "./IndicatorSet.svelte"
   import {
     builderStore,
-    componentStore,
+    screenStore,
     dndStore,
     dndParent,
-    isDragging,
+    dndIsDragging,
   } from "stores"
   import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
+  import { DNDPlaceholderID } from "constants"
 
   const ThrottleRate = 130
 
@@ -69,13 +70,13 @@
     const id = component.dataset.id
     const parentId = component.dataset.parent
     const parent = findComponentById(
-      get(componentStore).currentAsset.props,
+      get(screenStore).activeScreen?.props,
       parentId
     )
     const index = parent._children.findIndex(
       x => x._id === component.dataset.id
     )
-    dndStore.actions.startDragging({
+    dndStore.actions.startDraggingExistingComponent({
       id,
       bounds: component.children[0].getBoundingClientRect(),
       parent: parentId,
@@ -127,7 +128,7 @@
     let ephemeralDiv
     if (node.children.length === 1) {
       ephemeralDiv = document.createElement("div")
-      ephemeralDiv.classList.add("placeholder")
+      ephemeralDiv.dataset.id = DNDPlaceholderID
       node.appendChild(ephemeralDiv)
     }
 
@@ -138,7 +139,7 @@
       const child = node.children?.[0] || node
       const bounds = child.getBoundingClientRect()
       return {
-        placeholder: node.classList.contains("placeholder"),
+        placeholder: node.dataset.id === DNDPlaceholderID,
         centerX: bounds.left + bounds.width / 2,
         centerY: bounds.top + bounds.height / 2,
         left: bounds.left,
@@ -249,7 +250,7 @@
     // Convert parent + index into target + mode
     let legacyDropTarget, legacyDropMode
     const parent = findComponentById(
-      get(componentStore).currentAsset?.props,
+      get(screenStore).activeScreen?.props,
       drop.parent
     )
     if (!parent) {
@@ -263,7 +264,7 @@
 
     // Filter out source component and placeholder from consideration
     const children = parent._children?.filter(
-      x => x._id !== "placeholder" && x._id !== source.id
+      x => x._id !== DNDPlaceholderID && x._id !== source.id
     )
 
     // Use inside if no existing children
@@ -316,6 +317,6 @@
   prefix="Inside"
 />
 
-{#if $isDragging}
+{#if $dndIsDragging}
   <DNDPlaceholderOverlay />
 {/if}

packages/client/src/components/preview/HoverIndicator.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, isDragging } from "stores"
+  import { builderStore, dndIsDragging } from "stores"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$isDragging ? null : componentId}
+  componentId={$dndIsDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}

packages/client/src/components/preview/SelectionIndicator.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { builderStore, isDragging } from "stores"
+  import { builderStore, dndIsDragging } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode
@@ -8,7 +8,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$isDragging ? null : $builderStore.selectedComponentId}
+  componentId={$dndIsDragging ? null : $builderStore.selectedComponentId}
   {color}
   zIndex="910"
   transition

packages/client/src/components/preview/SettingsBar.svelte

@@ -3,7 +3,7 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore, isDragging } from "stores"
+  import { builderStore, componentStore, dndIsDragging } from "stores"
   import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 36
@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $componentStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar && !$isDragging
+  $: showBar = definition?.showSettingsBar && !$dndIsDragging
   $: settings = getBarSettings(definition)
 
   const getBarSettings = definition => {

packages/client/src/index.js

@@ -64,20 +64,11 @@ const loadBudibase = async () => {
     } else if (name === "dragging-new-component") {
       const { dragging, component } = payload
       if (dragging) {
-        dndStore.actions.startDragging({
-          id: null,
-          parent: null,
-          bounds: {
-            height: 64,
-            width: 128,
-          },
-          index: null,
-          newComponentType: component,
-        })
-        builderStore.actions.setDraggingNewComponent(true)
+        const definition =
+          componentStore.actions.getComponentDefinition(component)
+        dndStore.actions.startDraggingNewComponent({ component, definition })
       } else {
         dndStore.actions.reset()
-        builderStore.actions.setDraggingNewComponent(false)
       }
     }
   }

packages/client/src/stores/builder.js

@@ -16,7 +16,6 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    draggingNewComponent: false,
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
@@ -68,19 +67,12 @@ const createBuilderStore = () => {
       })
     },
     dropNewComponent: (component, parent, index) => {
-      console.log("dispatch", component, parent, index)
       dispatchEvent("drop-new-component", {
         component,
         parent,
         index,
       })
     },
-    setDraggingNewComponent: draggingNewComponent => {
-      if (draggingNewComponent === get(store).draggingNewComponent) {
-        return
-      }
-      store.update(state => ({ ...state, draggingNewComponent }))
-    },
     setEditMode: enabled => {
       if (enabled === get(store).editMode) {
         return

packages/client/src/stores/components.js

@@ -4,7 +4,6 @@ import { findComponentById, findComponentPathById } from "../utils/components"
 import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
-import { dndParent } from "./dnd.js"
 import Router from "../components/Router.svelte"
 import DNDPlaceholder from "../components/preview/DNDPlaceholder.svelte"
 import * as AppComponents from "../components/app/index.js"
@@ -20,28 +19,22 @@ const createComponentStore = () => {
   })
 
   const derivedStore = derived(
-    [store, builderStore, devToolsStore, screenStore, dndParent],
-    ([$store, $builderState, $devToolsState, $screenState, $dndParent]) => {
+    [store, builderStore, devToolsStore, screenStore],
+    ([$store, $builderStore, $devToolsStore, $screenStore]) => {
+      const { inBuilder, selectedComponentId } = $builderStore
+
       // Avoid any of this logic if we aren't in the builder preview
-      if (!$builderState.inBuilder && !$devToolsState.visible) {
+      if (!inBuilder && !$devToolsStore.visible) {
         return {}
       }
 
-      // Derive the selected component instance and definition
-      let asset
-      const { screen, selectedComponentId } = $builderState
-      if ($builderState.inBuilder) {
-        asset = screen
-      } else {
-        asset = $screenState.activeScreen
-      }
-      const component = findComponentById(asset?.props, selectedComponentId)
+      const root = $screenStore.activeScreen?.props
+      const component = findComponentById(root, selectedComponentId)
       const definition = getComponentDefinition(component?._component)
 
       // Derive the selected component path
       const selectedPath =
-        findComponentPathById(asset?.props, selectedComponentId) || []
-      const dndPath = findComponentPathById(asset?.props, $dndParent) || []
+        findComponentPathById(root, selectedComponentId) || []
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -51,9 +44,6 @@ const createComponentStore = () => {
         selectedComponentDefinition: definition,
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
-        currentAsset: asset,
-        dndPath: dndPath?.map(component => component._id),
-        dndDepth: dndPath?.length || 0,
       }
     }
   )
@@ -101,8 +91,8 @@ const createComponentStore = () => {
   }
 
   const getComponentById = id => {
-    const asset = get(derivedStore).currentAsset
-    return findComponentById(asset?.props, id)
+    const root = get(screenStore).activeScreen?.props
+    return findComponentById(root, id)
   }
 
   const getComponentDefinition = type => {

packages/client/src/stores/derived/dndComponentPath.js

@@ -0,0 +1,13 @@
+import { derived } from "svelte/store"
+import { findComponentPathById } from "utils/components.js"
+import { dndParent } from "../dnd.js"
+import { screenStore } from "../screens.js"
+
+export const dndComponentPath = derived(
+  [dndParent, screenStore],
+  ([$dndParent, $screenStore]) => {
+    const root = $screenStore.activeScreen?.props
+    const path = findComponentPathById(root, $dndParent) || []
+    return path?.map(component => component._id)
+  }
+)

packages/client/src/stores/derived/index.js

@@ -1,2 +1,5 @@
-export { isDragging } from "./isDragging.js"
+// These derived stores are pulled out from their parent stores to avoid
+// dependency loops. By inverting store dependencies and extracting them
+// separately we can keep our actual stores lean and performant.
 export { currentRole } from "./currentRole.js"
+export { dndComponentPath } from "./dndComponentPath.js"

packages/client/src/stores/derived/isDragging.js

@@ -1,10 +0,0 @@
-import { derived } from "svelte/store"
-import { dndStore } from "../dnd"
-import { builderStore } from "../builder.js"
-
-// Derive whether we are dragging or not
-export const isDragging = derived(
-  [dndStore, builderStore],
-  ([$dndStore, $builderStore]) =>
-    $dndStore.source != null || $builderStore.draggingNewComponent
-)

packages/client/src/stores/dnd.js

@@ -2,6 +2,10 @@ import { writable, derived } from "svelte/store"
 
 const createDndStore = () => {
   const initialState = {
+    // Flags for whether we are inserting a new component or not
+    isNewComponent: false,
+    newComponentType: null,
+
     // Info about the dragged component
     source: null,
 
@@ -13,12 +17,32 @@ const createDndStore = () => {
   }
   const store = writable(initialState)
 
-  // newComponentType is an optional field to signify we are creating a new
-  // component rather than moving an existing one
-  const startDragging = ({ id, parent, bounds, index, newComponentType }) => {
+  const startDraggingExistingComponent = ({ id, parent, bounds, index }) => {
     store.set({
       ...initialState,
-      source: { id, parent, bounds, index, newComponentType },
+      source: { id, parent, bounds, index },
+    })
+  }
+
+  const startDraggingNewComponent = ({ type, definition }) => {
+    if (!type || !definition) {
+      return
+    }
+
+    // Get size of new component so we can show a properly sized placeholder
+    const width = definition.size?.width || 128
+    const height = definition.size?.height || 64
+
+    store.set({
+      ...initialState,
+      isNewComponent: true,
+      newComponentType: type,
+      source: {
+        id: null,
+        parent: null,
+        bounds: { height, width },
+        index: null,
+      },
     })
   }
 
@@ -43,7 +67,8 @@ const createDndStore = () => {
   return {
     subscribe: store.subscribe,
     actions: {
-      startDragging,
+      startDraggingExistingComponent,
+      startDraggingNewComponent,
       updateTarget,
       updateDrop,
       reset,
@@ -52,9 +77,19 @@ const createDndStore = () => {
 }
 
 export const dndStore = createDndStore()
+
+// The DND store is updated extremely frequently, so we can greatly improve
+// performance by deriving any state that needs to be externally observed.
+// By doing this and using primitives, we can avoid invalidating other stores
+// or components which depend on DND state unless values actually change.
+export const dndIsDragging = derived(dndStore, $dndStore => !!$dndStore.source)
 export const dndParent = derived(dndStore, $dndStore => $dndStore.drop?.parent)
 export const dndIndex = derived(dndStore, $dndStore => $dndStore.drop?.index)
 export const dndBounds = derived(
   dndStore,
   $dndStore => $dndStore.source?.bounds
 )
+export const dndIsNewComponent = derived(
+  dndStore,
+  $dndStore => $dndStore.isNewComponent
+)

packages/client/src/stores/index.js

@@ -15,7 +15,14 @@ export { uploadStore } from "./uploads.js"
 export { rowSelectionStore } from "./rowSelection.js"
 export { blockStore } from "./blocks.js"
 export { environmentStore } from "./environment"
-export { dndStore, dndIndex, dndParent, dndBounds } from "./dnd"
+export {
+  dndStore,
+  dndIndex,
+  dndParent,
+  dndBounds,
+  dndIsNewComponent,
+  dndIsDragging,
+} from "./dnd"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"

packages/client/src/stores/screens.js

@@ -2,7 +2,7 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
-import { dndIndex, dndParent } from "./dnd.js"
+import { dndIndex, dndParent, dndIsNewComponent } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
@@ -10,8 +10,22 @@ import { DNDPlaceholderID, DNDPlaceholderType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
-    [appStore, routeStore, builderStore, dndParent, dndIndex],
-    ([$appStore, $routeStore, $builderStore, $dndParent, $dndIndex]) => {
+    [
+      appStore,
+      routeStore,
+      builderStore,
+      dndParent,
+      dndIndex,
+      dndIsNewComponent,
+    ],
+    ([
+      $appStore,
+      $routeStore,
+      $builderStore,
+      $dndParent,
+      $dndIndex,
+      $dndIsNewComponent,
+    ]) => {
       let activeLayout, activeScreen
       let screens
 
@@ -50,8 +64,8 @@ const createScreenStore = () => {
       if (activeScreen && $dndParent && $dndIndex != null) {
         // Remove selected component from tree if we are moving an existing
         // component
-        const { selectedComponentId, draggingNewComponent } = $builderStore
-        if (!draggingNewComponent) {
+        const { selectedComponentId } = $builderStore
+        if (!$dndIsNewComponent) {
           let selectedParent = findComponentParent(
             activeScreen.props,
             selectedComponentId