cut over to new frontend store

packages/builder/src/builderStore/index.js

@@ -1,12 +1,12 @@
-import { getStore } from "./store"
-// import { getFrontendStore } from "./store/frontend"
+// import { getStore } from "./store"
+import { getFrontendStore } from "./store/frontend"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation/"
 import { getThemeStore } from "./store/theme"
 import analytics from "analytics"
 
-export const store = getStore()
-// export const store = getFrontendStore()
+// export const store = getStore()
+export const store = getFrontendStore()
 export const backendUiStore = getBackendUiStore()
 export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()

packages/builder/src/builderStore/store/frontend.js

@@ -82,33 +82,31 @@ export const getFrontendStore = () => {
             screens: page._screens,
           })
         }
-        pkg.justCreated = false
-
-        const components = await fetchComponentLibDefinitions(
-          pkg.application._id
-        )
-
-        store.update(state => ({
-          ...state,
-          libraries: pkg.application.componentLibraries,
-          components,
-          name: pkg.application.name,
-          description: pkg.application.description,
-          appId: pkg.application._id,
-          pages: pkg.pages,
-          hasAppPackage: true,
-          screens: [
-            ...Object.values(mainScreens),
-            ...Object.values(unauthScreens),
-          ],
-          builtins: [getBuiltin("##builtin/screenslot")],
-          appInstance: pkg.application.instance,
-        }))
-
-        await backendUiStore.actions.database.select(pkg.application.instance)
       }
+
+      pkg.justCreated = false
+
+      const components = await fetchComponentLibDefinitions(pkg.application._id)
+
+      store.update(state => ({
+        ...state,
+        libraries: pkg.application.componentLibraries,
+        components,
+        name: pkg.application.name,
+        description: pkg.application.description,
+        appId: pkg.application._id,
+        pages: pkg.pages,
+        hasAppPackage: true,
+        screens: [
+          ...Object.values(mainScreens),
+          ...Object.values(unauthScreens),
+        ],
+        builtins: [getBuiltin("##builtin/screenslot")],
+        appInstance: pkg.application.instance,
+      }))
+
+      await backendUiStore.actions.database.select(pkg.application.instance)
     },
-    // store.setScreenType
     selectPageOrScreen: type => {
       store.update(state => {
         state.currentFrontEndType = type
@@ -241,243 +239,250 @@ export const getFrontendStore = () => {
           ? store.actions.pages.save()
           : store.actions.screens.save(state.currentPreviewItem)
       },
-      pages: {
-        select: pageName => {
-          store.update(state => {
-            const current_screens = state.pages[pageName]._screens
-
-            const currentPage = state.pages[pageName]
-
-            state.currentFrontEndType = "page"
-            state.currentView = "detail"
-            state.currentPageName = pageName
-            state.screens = Array.isArray(current_screens)
-              ? current_screens
-              : Object.values(current_screens)
-            const safeProps = makePropsSafe(
-              state.components[currentPage.props._component],
-              currentPage.props
-            )
-            state.currentComponentInfo = safeProps
-            currentPage.props = safeProps
-            state.currentPreviewItem = state.pages[pageName]
-            store.actions.screens.regenerateCssForCurrentScreen()
+    },
+    pages: {
+      select: pageName => {
+        store.update(state => {
+          const current_screens = state.pages[pageName]._screens
 
-            for (let screen of state.screens) {
-              screen._css = generate_screen_css([screen.props])
-            }
+          const currentPage = state.pages[pageName]
 
-            return state
-          })
-        },
-        save: async page => {
-          const storeContents = get(store)
-          const pageName = storeContents.currentPageName || "main"
-          const pageToSave = page || storeContents.pages[pageName]
-
-          // TODO: revisit. This sends down a very weird payload
-          const response = await api
-            .post(`/api/pages/${pageToSave._id}`, {
-              page: {
-                componentLibraries: storeContents.pages.componentLibraries,
-                ...pageToSave,
-              },
-              screens: pageToSave._screens,
-            })
-            .then(response => response.json())
-
-          store.update(state => {
-            state.pages[pageName]._rev = response.rev
-            return state
-          })
-        },
+          state.currentFrontEndType = "page"
+          state.currentView = "detail"
+          state.currentPageName = pageName
+          state.screens = Array.isArray(current_screens)
+            ? current_screens
+            : Object.values(current_screens)
+
+          // This is the root of many problems.
+          // Uncaught (in promise) TypeError: Cannot read property '_component' of undefined
+          // it appears that the currentPage sometimes has _props instead of props
+          // why
+          const safeProps = makePropsSafe(
+            state.components[currentPage.props._component],
+            currentPage.props
+          )
+          state.currentComponentInfo = safeProps
+          currentPage.props = safeProps
+          state.currentPreviewItem = state.pages[pageName]
+          store.actions.screens.regenerateCssForCurrentScreen()
+
+          for (let screen of state.screens) {
+            screen._css = generate_screen_css([screen.props])
+          }
+
+          return state
+        })
       },
-      components: {
-        select: component => {
-          store.update(state => {
-            const componentDef = component._component.startsWith("##")
-              ? component
-              : state.components[component._component]
-            state.currentComponentInfo = makePropsSafe(componentDef, component)
-            state.currentView = "component"
-            return state
+      save: async page => {
+        const storeContents = get(store)
+        const pageName = storeContents.currentPageName || "main"
+        const pageToSave = page || storeContents.pages[pageName]
+
+        // TODO: revisit. This sends down a very weird payload
+        const response = await api
+          .post(`/api/pages/${pageToSave._id}`, {
+            page: {
+              componentLibraries: storeContents.pages.componentLibraries,
+              ...pageToSave,
+            },
+            screens: pageToSave._screens,
           })
-        },
-        // addChildComponent
-        create: (componentToAdd, presetProps) => {
-          store.update(state => {
-            function findSlot(component_array) {
-              for (let i = 0; i < component_array.length; i += 1) {
-                if (component_array[i]._component === "##builtin/screenslot") {
-                  return true
-                }
-
-                if (component_array[i]._children) findSlot(component_array[i])
-              }
+          .then(response => response.json())
 
-              return false
-            }
+        store.update(state => {
+          state.pages[pageName]._rev = response.rev
+          return state
+        })
+      },
+    },
+    components: {
+      select: component => {
+        store.update(state => {
+          const componentDef = component._component.startsWith("##")
+            ? component
+            : state.components[component._component]
+          state.currentComponentInfo = makePropsSafe(componentDef, component)
+          state.currentView = "component"
+          return state
+        })
+      },
+      // addChildComponent
+      create: (componentToAdd, presetProps) => {
+        store.update(state => {
+          function findSlot(component_array) {
+            for (let i = 0; i < component_array.length; i += 1) {
+              if (component_array[i]._component === "##builtin/screenslot") {
+                return true
+              }
 
-            if (
-              componentToAdd.startsWith("##") &&
-              findSlot(state.pages[state.currentPageName].props._children)
-            ) {
-              return state
+              if (component_array[i]._children) findSlot(component_array[i])
             }
 
-            const component = getComponentDefinition(state, componentToAdd)
-
-            const instanceId = get(backendUiStore).selectedDatabase._id
-            const instanceName = getNewComponentName(component, state)
-
-            const newComponent = createProps(
-              component,
-              {
-                ...presetProps,
-                _instanceId: instanceId,
-                _instanceName: instanceName,
-              },
-              state
-            )
+            return false
+          }
 
-            const currentComponent =
-              state.components[state.currentComponentInfo._component]
+          if (
+            componentToAdd.startsWith("##") &&
+            findSlot(state.pages[state.currentPageName].props._children)
+          ) {
+            return state
+          }
 
-            const targetParent = currentComponent.children
-              ? state.currentComponentInfo
-              : getParent(
-                  state.currentPreviewItem.props,
-                  state.currentComponentInfo
-                )
+          const component = getComponentDefinition(state, componentToAdd)
 
-            // Don't continue if there's no parent
-            if (!targetParent) {
-              return state
-            }
+          const instanceId = get(backendUiStore).selectedDatabase._id
+          const instanceName = getNewComponentName(component, state)
 
-            targetParent._children = targetParent._children.concat(
-              newComponent.props
-            )
+          const newComponent = createProps(
+            component,
+            {
+              ...presetProps,
+              _instanceId: instanceId,
+              _instanceName: instanceName,
+            },
+            state
+          )
 
-            store.actions.preview.saveSelected()
+          const currentComponent =
+            state.components[state.currentComponentInfo._component]
 
-            state.currentView = "component"
-            state.currentComponentInfo = newComponent.props
-            analytics.captureEvent("Added Component", {
-              name: newComponent.props._component,
-            })
-            return state
-          })
-        },
-        copy: (component, cut = false) => {
-          store.update(state => {
-            const copiedComponent = cloneDeep(component)
-            state.componentToPaste = copiedComponent
-            state.componentToPaste.isCut = cut
-            if (cut) {
-              const parent = getParent(
+          const targetParent = currentComponent.children
+            ? state.currentComponentInfo
+            : getParent(
                 state.currentPreviewItem.props,
-                component._id
-              )
-              parent._children = parent._children.filter(
-                c => c._id !== component._id
+                state.currentComponentInfo
               )
-              store.actions.components.select(parent)
-            }
 
+          // Don't continue if there's no parent
+          if (!targetParent) {
             return state
-          })
-        },
-        paste: (targetComponent, mode) => {
-          store.update(state => {
-            if (!state.componentToPaste) return state
-
-            const componentToPaste = cloneDeep(state.componentToPaste)
-            // retain the same ids as things may be referencing this component
-            if (componentToPaste.isCut) {
-              // in case we paste a second time
-              state.componentToPaste.isCut = false
-            } else {
-              generateNewIdsForComponent(componentToPaste, state)
-            }
-            delete componentToPaste.isCut
+          }
 
-            if (mode === "inside") {
-              targetComponent._children.push(componentToPaste)
-              return state
-            }
+          targetParent._children = targetParent._children.concat(
+            newComponent.props
+          )
 
+          store.actions.preview.saveSelected()
+
+          state.currentView = "component"
+          state.currentComponentInfo = newComponent.props
+          analytics.captureEvent("Added Component", {
+            name: newComponent.props._component,
+          })
+          return state
+        })
+      },
+      copy: (component, cut = false) => {
+        store.update(state => {
+          const copiedComponent = cloneDeep(component)
+          state.componentToPaste = copiedComponent
+          state.componentToPaste.isCut = cut
+          if (cut) {
             const parent = getParent(
               state.currentPreviewItem.props,
-              targetComponent
+              component._id
             )
+            parent._children = parent._children.filter(
+              c => c._id !== component._id
+            )
+            store.actions.components.select(parent)
+          }
 
-            const targetIndex = parent._children.indexOf(targetComponent)
-            const index = mode === "above" ? targetIndex : targetIndex + 1
-            parent._children.splice(index, 0, cloneDeep(componentToPaste))
-
-            store.actions.screens.regenerateCssForCurrentScreen()
-            store.actions.preview.saveSelected()
-            store.actions.components.select(componentToPaste)
+          return state
+        })
+      },
+      paste: (targetComponent, mode) => {
+        store.update(state => {
+          if (!state.componentToPaste) return state
+
+          const componentToPaste = cloneDeep(state.componentToPaste)
+          // retain the same ids as things may be referencing this component
+          if (componentToPaste.isCut) {
+            // in case we paste a second time
+            state.componentToPaste.isCut = false
+          } else {
+            generateNewIdsForComponent(componentToPaste, state)
+          }
+          delete componentToPaste.isCut
 
+          if (mode === "inside") {
+            targetComponent._children.push(componentToPaste)
             return state
-          })
-        },
-        updateStyle: (type, name, value) => {
-          store.update(state => {
-            if (!state.currentComponentInfo._styles) {
-              state.currentComponentInfo._styles = {}
-            }
-            state.currentComponentInfo._styles[type][name] = value
+          }
+
+          const parent = getParent(
+            state.currentPreviewItem.props,
+            targetComponent
+          )
 
-            store.actions.screens.regenerateCssForCurrentScreen()
+          const targetIndex = parent._children.indexOf(targetComponent)
+          const index = mode === "above" ? targetIndex : targetIndex + 1
+          parent._children.splice(index, 0, cloneDeep(componentToPaste))
 
-            // save without messing with the store
-            store.actions.preview.saveSelected()
-            return state
-          })
-        },
-        updateProp: (name, value) => {
-          store.update(state => {
-            let current_component = state.currentComponentInfo
-            current_component[name] = value
+          store.actions.screens.regenerateCssForCurrentScreen()
+          store.actions.preview.saveSelected()
+          store.actions.components.select(componentToPaste)
 
-            state.currentComponentInfo = current_component
-            store.actions.preview.saveSelected()
-            return state
-          })
-        },
-        findRoute: component => {
-          // Gets all the components to needed to construct a path.
-          const tempStore = get(store)
-          let pathComponents = []
-          let parent = component
-          let root = false
-          while (!root) {
-            parent = getParent(tempStore.currentPreviewItem.props, parent)
-            if (!parent) {
-              root = true
-            } else {
-              pathComponents.push(parent)
-            }
+          return state
+        })
+      },
+      updateStyle: (type, name, value) => {
+        store.update(state => {
+          if (!state.currentComponentInfo._styles) {
+            state.currentComponentInfo._styles = {}
+          }
+          state.currentComponentInfo._styles[type][name] = value
+
+          store.actions.screens.regenerateCssForCurrentScreen()
+
+          // save without messing with the store
+          store.actions.preview.saveSelected()
+          return state
+        })
+      },
+      updateProp: (name, value) => {
+        store.update(state => {
+          let current_component = state.currentComponentInfo
+          current_component[name] = value
+
+          state.currentComponentInfo = current_component
+          store.actions.preview.saveSelected()
+          return state
+        })
+      },
+      findRoute: component => {
+        // Gets all the components to needed to construct a path.
+        const tempStore = get(store)
+        let pathComponents = []
+        let parent = component
+        let root = false
+        while (!root) {
+          parent = getParent(tempStore.currentPreviewItem.props, parent)
+          if (!parent) {
+            root = true
+          } else {
+            pathComponents.push(parent)
           }
+        }
 
-          // Remove root entry since it's the screen or page layout.
-          // Reverse array since we need the correct order of the IDs
-          const reversedComponents = pathComponents.reverse().slice(1)
+        // Remove root entry since it's the screen or page layout.
+        // Reverse array since we need the correct order of the IDs
+        const reversedComponents = pathComponents.reverse().slice(1)
 
-          // Add component
-          const allComponents = [...reversedComponents, component]
+        // Add component
+        const allComponents = [...reversedComponents, component]
 
-          // Map IDs
-          const IdList = allComponents.map(c => c._id)
+        // Map IDs
+        const IdList = allComponents.map(c => c._id)
 
-          // Construct ID Path:
-          const path = IdList.join("/")
+        // Construct ID Path:
+        const path = IdList.join("/")
 
-          return path
-        },
+        return path
       },
     },
   }
+
+  return store
 }

packages/builder/src/builderStore/store/index.js

@@ -53,21 +53,21 @@ export const getStore = () => {
   store.setPackage = setPackage(store, initial)
 
   store.saveScreen = saveScreen(store)
-  store.setCurrentScreen = setCurrentScreen(store)
-  store.deleteScreens = deleteScreens(store)
-  store.setCurrentPage = setCurrentPage(store)
+  store.actions.screens.select = setCurrentScreen(store)
+  store.store.actions.screens.delete = store.actions.screens.delete(store)
+  store.actions.pages.select = setCurrentPage(store)
   store.createLink = createLink(store)
   store.createScreen = createScreen(store)
   // store.savePage = savePage(store)
   store.addChildComponent = addChildComponent(store)
-  store.selectComponent = selectComponent(store)
+  store.actions.components.select = selectComponent(store)
   store.setComponentProp = setComponentProp(store)
   store.setPageOrScreenProp = setPageOrScreenProp(store)
-  store.setComponentStyle = setComponentStyle(store)
-  store.setScreenType = setScreenType(store)
-  store.getPathToComponent = getPathToComponent(store)
-  store.pasteComponent = pasteComponent(store)
-  store.storeComponentForCopy = storeComponentForCopy(store)
+  store.actions.components.updateStyle = setComponentStyle(store)
+  store.actions.selectPageOrScreen = setScreenType(store)
+  store.actions.components.findRoute = getPathToComponent(store)
+  store.actions.components.paste = pasteComponent(store)
+  store.actions.components.copy = storeComponentForCopy(store)
   return store
 }
 
@@ -251,7 +251,7 @@ const setCurrentScreen = store => screenName => {
   })
 }
 
-const deleteScreens = store => (screens, pageName = null) => {
+const store.actions.screens.delete = store => (screens, pageName = null) => {
   if (!(screens instanceof Array)) {
     screens = [screens]
   }

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -39,7 +39,7 @@
 
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
-    store.deleteScreens(templateScreens)
+    store.store.actions.screens.delete(templateScreens)
     await backendUiStore.actions.tables.fetch()
     notifier.success("Table deleted")
     hideEditor()

packages/builder/src/components/start/CreateAppModal.svelte

@@ -154,7 +154,7 @@
       if (applicationPkg.ok) {
         backendUiStore.actions.reset()
         pkg.justCreated = true
-        await store.setPackage(pkg)
+        await store.actions.initialise(pkg)
         automationStore.actions.fetch()
       } else {
         throw new Error(pkg)

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -25,8 +25,8 @@
   }
 
   const selectComponent = component => {
-    store.selectComponent(component)
-    const path = store.getPathToComponent(component)
+    store.actions.components.select(component)
+    const path = store.actions.components.findRoute(component)
     $goto(`./:page/:screen/${path}`)
   }
 
@@ -89,17 +89,19 @@
 
   const storeComponentForCopy = (cut = false) => {
     // lives in store - also used by drag drop
-    store.storeComponentForCopy(component, cut)
+    store.actions.components.copy(component, cut)
   }
 
   const pasteComponent = mode => {
     // lives in store - also used by drag drop
-    store.pasteComponent(component, mode)
+    store.actions.components.paste(component, mode)
   }
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
+  <div class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
   <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
     <DropdownContainer on:click={hideDropdown}>
       <DropdownItem

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -27,7 +27,7 @@
     componentPropDefinition.properties &&
     componentPropDefinition.properties[selectedCategory.value]
 
-  const onStyleChanged = store.setComponentStyle
+  const onStyleChanged = store.actions.components.updateStyle
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -81,7 +81,7 @@
       {componentDefinition}
       {panelDefinition}
       displayNameField={displayName}
-      onChange={store.setComponentProp}
+      onChange={store.actions.components.updateProp}
       onScreenPropChange={store.setPageOrScreenProp}
       screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
   {/if}

packages/builder/src/components/userInterface/ComponentSelectionList.svelte

@@ -25,8 +25,8 @@
   }
 
   const onComponentChosen = component => {
-    store.addChildComponent(component._component, component.presetProps)
-    const path = store.getPathToComponent($store.currentComponentInfo)
+    store.actions.components.create(component._component, component.presetProps)
+    const path = store.actions.components.findRoute($store.currentComponentInfo)
     $goto(`./:page/:screen/${path}`)
     close()
   }
@@ -39,9 +39,13 @@
       class="category"
       on:click={() => onCategoryChosen(category, idx)}
       class:active={idx === selectedIndex}>
-      {#if category.icon}<i class={category.icon} />{/if}
+      {#if category.icon}
+        <i class={category.icon} />
+      {/if}
       <span>{category.name}</span>
-      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+      {#if category.isCategory}
+        <i class="ri-arrow-down-s-line arrow" />
+      {/if}
     </div>
   {/each}
 </div>

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -24,15 +24,18 @@
   let componentToDelete = ""
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const changeScreen = screen => {
-    store.setCurrentScreen(screen.props._instanceName)
+    store.actions.screens.select(screen.props._instanceName)
     $goto(`./:page/${screen.props._instanceName}`)
   }
 </script>

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -35,15 +35,19 @@
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
   const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
     // Set current component
-    store.selectComponent(component)
+    store.actions.components.select(component)
 
     // Get ID path
-    const path = store.getPathToComponent(component)
+    const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
@@ -96,8 +100,8 @@
 
   const drop = () => {
     if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
-      store.storeComponentForCopy($dragDropStore.componentToDrop, true)
-      store.pasteComponent(
+      store.actions.components.copy($dragDropStore.componentToDrop, true)
+      store.actions.components.paste(
         $dragDropStore.targetComponent,
         $dragDropStore.dropPosition
       )

packages/builder/src/components/userInterface/PageLayout.svelte

@@ -22,7 +22,7 @@
   }
 
   const setCurrentScreenToLayout = () => {
-    store.setScreenType("page")
+    store.actions.selectPageOrScreen("page")
     $goto("./:page/page-layout")
   }
 </script>

packages/builder/src/components/userInterface/PagesList.svelte

@@ -2,8 +2,8 @@
   import { params, goto } from "@sveltech/routify"
   import { store } from "builderStore"
 
-  const getPage = (s, name) => {
-    const props = s.pages[name]
+  const getPage = (state, name) => {
+    const props = state.pages[name]
     return { name, props }
   }
 
@@ -18,11 +18,12 @@
     },
   ]
 
+  console.log(store)
   if (!$store.currentPageName)
-    store.setCurrentPage($params.page ? $params.page : "main")
+    store.actions.pages.select($params.page ? $params.page : "main")
 
   const changePage = id => {
-    store.setCurrentPage(id)
+    store.actions.pages.select(id)
     $goto(`./${id}/page-layout`)
   }
 </script>

packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

@@ -13,11 +13,11 @@
   let anchor
 
   const deleteScreen = () => {
-    store.deleteScreens(screen, $store.currentPageName)
+    store.actions.screens.delete(screen, $store.currentPageName)
     // update the page if required
     store.update(state => {
       if (state.currentPreviewItem.name === screen.name) {
-        store.setCurrentPage($store.currentPageName)
+        store.actions.pages.select($store.currentPageName)
         notifier.success(`Screen ${screen.name} deleted successfully.`)
         $goto(`./:page/page-layout`)
       }

packages/builder/src/components/userInterface/pagesParsing/createProps.js

@@ -59,6 +59,11 @@ export const createProps = (componentDefinition, derivedFromProps) => {
 }
 
 export const makePropsSafe = (componentDefinition, props) => {
+  if (!componentDefinition) {
+    console.error(
+      "No component definition passed to makePropsSafe. Please check the component definition is being passed correctly."
+    )
+  }
   const safeProps = createProps(componentDefinition, props).props
   for (let propName in safeProps) {
     props[propName] = safeProps[propName]

packages/builder/src/components/userInterface/pagesParsing/searchComponents.js

@@ -29,10 +29,9 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(comp => {
-    const { props, _instanceName } = comp
-    return name === isScreen ? props._instanceName : _instanceName
-  })
+  return components.find(comp =>
+    isScreen ? comp.props._instanceName === name : comp._instanceName === name
+  )
 }
 
 export const getAncestorProps = (components, name, found = []) => {

packages/builder/src/constants/index.js

@@ -1,19 +1,15 @@
 export const DEFAULT_PAGES_OBJECT = {
   main: {
-    _props: {},
-    _screens: {},
-    index: {
-      _component: "./components/indexHtml",
+    props: {
+      _component: "@budibase/standard-components/container",
     },
-    appBody: "bbapp.main.json",
+    _screens: {},
   },
   unauthenticated: {
-    _props: {},
-    _screens: {},
-    index: {
-      _component: "./components/indexHtml",
+    props: {
+      _component: "@budibase/standard-components/container",
     },
-    appBody: "bbapp.unauthenticated.json",
+    _screens: {},
   },
   componentLibraries: [],
   stylesheets: [],

packages/builder/src/pages/[application]/_reset.svelte

@@ -18,7 +18,7 @@
 
     if (res.ok) {
       backendUiStore.actions.reset()
-      await store.setPackage(pkg)
+      await store.actions.initialise(pkg)
       await automationStore.actions.fetch()
       return pkg
     } else {

packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte

@@ -1,4 +1,4 @@
 <script>
   import { params } from "@sveltech/routify"
-  store.setCurrentPage($params.page)
+  store.actions.pages.select($params.page)
 </script>

packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte

@@ -16,11 +16,11 @@
 
     if (!validScreen) {
       // Go to main layout if URL set to invalid screen
-      store.setCurrentPage("main")
+      store.actions.pages.select("main")
       $goto("../../main")
     } else {
       // Otherwise proceed to set screen
-      store.setCurrentScreen(currentScreenName)
+      store.actions.screens.select(currentScreenName)
 
       // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
       if ($leftover) {
@@ -35,7 +35,7 @@
     }
   } else {
     // It's a page, so set the screentype to page.
-    store.setScreenType("page")
+    store.actions.selectPageOrScreen("page")
 
     // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
     if ($leftover) {
@@ -64,7 +64,7 @@
     })
 
     // Select Component!
-    if (componentToSelect) store.selectComponent(componentToSelect)
+    if (componentToSelect) store.actions.components.select(componentToSelect)
   }
 </script>
 

packages/builder/src/pages/[application]/design/[page]/_layout.svelte

@@ -2,7 +2,7 @@
   import { params } from "@sveltech/routify"
   import { store } from "builderStore"
 
-  store.setCurrentPage($params.page)
+  store.actions.pages.select($params.page)
 </script>
 
 <slot />

packages/server/src/api/routes/pages.old.js

@@ -6,7 +6,6 @@ const {
   listScreens,
   saveScreen,
   buildPage,
-  renameScreen,
   deleteScreen,
 } = require("../../utilities/builder")
 const authorized = require("../../middleware/authorized")

packages/server/src/utilities/builder/listScreens.js

@@ -3,46 +3,46 @@ const { join } = require("../centralPath")
 const { keyBy } = require("lodash/fp")
 const { budibaseAppsDir } = require("../budibaseDir")
 
-module.exports = async (appId, pagename) => {
-  const appPath = join(budibaseAppsDir(), appId)
-  return keyBy("name")(await fetchscreens(appPath, pagename))
-}
+// module.exports = async (appId, pagename) => {
+//   const appPath = join(budibaseAppsDir(), appId)
+//   return keyBy("name")(await fetchscreens(appPath, pagename))
+// }
 
-const fetchscreens = async (appPath, pagename, relativePath = "") => {
-  const currentDir = join(appPath, "pages", pagename, "screens", relativePath)
+// const fetchscreens = async (appPath, pagename, relativePath = "") => {
+//   const currentDir = join(appPath, "pages", pagename, "screens", relativePath)
 
-  const contents = await readdir(currentDir)
+//   const contents = await readdir(currentDir)
 
-  const screens = []
+//   const screens = []
 
-  for (let item of contents) {
-    const itemRelativePath = join(relativePath, item)
-    const itemFullPath = join(currentDir, item)
-    const stats = await stat(itemFullPath)
+//   for (let item of contents) {
+//     const itemRelativePath = join(relativePath, item)
+//     const itemFullPath = join(currentDir, item)
+//     const stats = await stat(itemFullPath)
 
-    if (stats.isFile()) {
-      if (!item.endsWith(".json")) continue
+//     if (stats.isFile()) {
+//       if (!item.endsWith(".json")) continue
 
-      const component = await readJSON(itemFullPath)
+//       const component = await readJSON(itemFullPath)
 
-      component.name = itemRelativePath
-        .substring(0, itemRelativePath.length - 5)
-        .replace(/\\/g, "/")
+//       component.name = itemRelativePath
+//         .substring(0, itemRelativePath.length - 5)
+//         .replace(/\\/g, "/")
 
-      component.props = component.props || {}
+//       component.props = component.props || {}
 
-      screens.push(component)
-    } else {
-      const childComponents = await fetchscreens(
-        appPath,
-        join(relativePath, item)
-      )
+//       screens.push(component)
+//     } else {
+//       const childComponents = await fetchscreens(
+//         appPath,
+//         join(relativePath, item)
+//       )
 
-      for (let c of childComponents) {
-        screens.push(c)
-      }
-    }
-  }
+//       for (let c of childComponents) {
+//         screens.push(c)
+//       }
+//     }
+//   }
 
-  return screens
-}
+//   return screens
+// }