Patch from original environment

packages/builder/package.json

@@ -23,7 +23,7 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/fileMock.js",
       "\\.(css|less|sass|scss)$": "identity-obj-proxy",
       "components(.*)$": "<rootDir>/src/components$1",
-      "builderStore(.*)$": "<rootDir>/src/builderStore$1",
+      "builder(.*)$": "<rootDir>/src/builder$1",
       "stores(.*)$": "<rootDir>/src/stores$1",
       "analytics(.*)$": "<rootDir>/src/analytics$1",
       "constants/backend": "<rootDir>/src/constants/backend/index.js"

packages/builder/src/api.js

@@ -3,14 +3,14 @@ import {
   CookieUtils,
   Constants,
 } from "@budibase/frontend-core"
-import { store } from "./builderStore"
+import { appStore } from "./stores/frontend"
 import { get } from "svelte/store"
 import { auth } from "./stores/portal"
 
 export const API = createAPIClient({
   attachHeaders: headers => {
     // Attach app ID header from store
-    let appId = get(store).appId
+    let appId = get(appStore).appId
     if (appId) {
       headers["x-budibase-app-id"] = appId
     }

packages/builder/src/builder/dataBinding.js

@@ -5,8 +5,13 @@ import {
   findComponent,
   findComponentPath,
   getComponentSettings,
-} from "./componentUtils"
+} from "stores/frontend/components/utils"
-import { store, currentAsset } from "builderStore"
+import {
+  currentAsset,
+  componentStore,
+  screenStore,
+  appStore,
+} from "stores/frontend"
 import {
   queries as queriesStores,
   tables as tablesStore,
@@ -178,7 +183,7 @@ export const getComponentBindableProperties = (asset, componentId) => {
 
   // Ensure that the component exists and exposes context
   const component = findComponent(asset.props, componentId)
-  const def = store.actions.components.getDefinition(component?._component)
+  const def = componentStore.getDefinition(component?._component)
   if (!def?.context) {
     return []
   }
@@ -209,7 +214,7 @@ export const getContextProviderComponents = (
 
   // Filter by only data provider components
   return path.filter(component => {
-    const def = store.actions.components.getDefinition(component._component)
+    const def = componentStore.getDefinition(component._component)
     if (!def?.context) {
       return false
     }
@@ -240,7 +245,7 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
 
   // Filter by only data provider components
   return path.filter(component => {
-    const def = store.actions.components.getDefinition(component._component)
+    const def = componentStore.getDefinition(component._component)
     return def?.actions?.includes(actionType)
   })
 }
@@ -312,7 +317,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
   // Create bindings for each data provider
   let bindings = []
   dataProviders.forEach(component => {
-    const def = store.actions.components.getDefinition(component._component)
+    const def = componentStore.getDefinition(component._component)
     const contexts = Array.isArray(def.context) ? def.context : [def.context]
 
     // Create bindings for each context block provided by this data provider
@@ -502,7 +507,7 @@ export const getUserBindings = () => {
  */
 const getDeviceBindings = () => {
   let bindings = []
-  if (get(store).clientFeatures?.deviceAwareness) {
+  if (get(appStore).clientFeatures?.deviceAwareness) {
     const safeDevice = makePropSafe("device")
 
     bindings = [
@@ -540,7 +545,7 @@ const getDeviceBindings = () => {
  */
 const getSelectedRowsBindings = asset => {
   let bindings = []
-  if (get(store).clientFeatures?.rowSelection) {
+  if (get(appStore).clientFeatures?.rowSelection) {
     // Add bindings for table components
     let tables = findAllMatchingComponents(asset?.props, component =>
       component._component.endsWith("table")
@@ -595,7 +600,7 @@ export const makeStateBinding = key => {
  */
 const getStateBindings = () => {
   let bindings = []
-  if (get(store).clientFeatures?.state) {
+  if (get(appStore).clientFeatures?.state) {
     bindings = getAllStateVariables().map(makeStateBinding)
   }
   return bindings
@@ -671,8 +676,7 @@ export const getEventContextBindings = ({
   }
 
   const definition =
-    componentDefinition ??
+    componentDefinition ?? componentStore.getDefinition(component?._component)
-    store.actions.components.getDefinition(component?._component)
 
   const settings = getComponentSettings(component?._component)
   const eventSetting = settings.find(setting => setting.key === settingKey)
@@ -1015,7 +1019,7 @@ export const getAllStateVariables = () => {
   })
 
   // Add on load settings from screens
-  get(store).screens.forEach(screen => {
+  get(screenStore).screens.forEach(screen => {
     if (screen.onLoad) {
       eventSettings.push(screen.onLoad)
     }
@@ -1044,8 +1048,8 @@ export const getAllStateVariables = () => {
 export const getAllAssets = () => {
   // Get all component containing assets
   let allAssets = []
-  allAssets = allAssets.concat(get(store).layouts || [])
+  allAssets = allAssets.concat(get(appStore).layouts || [])
-  allAssets = allAssets.concat(get(store).screens || [])
+  allAssets = allAssets.concat(get(screenStore).screens || [])
 
   return allAssets
 }

packages/builder/src/builder/store/screenTemplates/utils/Screen.js

@@ -33,6 +33,11 @@ export class Screen extends BaseStructure {
     }
   }
 
+  role(role) {
+    this._json.routing.roleId = role
+    return this
+  }
+
   normalStyle(styling) {
     this._json.props._styles.normal = styling
     return this

packages/builder/src/builderStore/index.js

@@ -1,151 +0,0 @@
-import { getFrontendStore } from "./store/frontend"
-import { getAutomationStore } from "./store/automation"
-import { getTemporalStore } from "./store/temporal"
-import { getThemeStore } from "./store/theme"
-import { getUserStore } from "./store/users"
-import { getDeploymentStore } from "./store/deployments"
-import { derived, writable } from "svelte/store"
-import { findComponent, findComponentPath } from "./componentUtils"
-import { RoleUtils } from "@budibase/frontend-core"
-import { createHistoryStore } from "builderStore/store/history"
-import { get } from "svelte/store"
-
-export const store = getFrontendStore()
-export const automationStore = getAutomationStore()
-export const themeStore = getThemeStore()
-export const temporalStore = getTemporalStore()
-export const userStore = getUserStore()
-export const deploymentStore = getDeploymentStore()
-
-// Setup history for screens
-export const screenHistoryStore = createHistoryStore({
-  getDoc: id => get(store).screens?.find(screen => screen._id === id),
-  selectDoc: store.actions.screens.select,
-  afterAction: () => {
-    // Ensure a valid component is selected
-    if (!get(selectedComponent)) {
-      store.update(state => ({
-        ...state,
-        selectedComponentId: get(selectedScreen)?.props._id,
-      }))
-    }
-  },
-})
-store.actions.screens.save = screenHistoryStore.wrapSaveDoc(
-  store.actions.screens.save
-)
-store.actions.screens.delete = screenHistoryStore.wrapDeleteDoc(
-  store.actions.screens.delete
-)
-
-// Setup history for automations
-export const automationHistoryStore = createHistoryStore({
-  getDoc: automationStore.actions.getDefinition,
-  selectDoc: automationStore.actions.select,
-})
-automationStore.actions.save = automationHistoryStore.wrapSaveDoc(
-  automationStore.actions.save
-)
-automationStore.actions.delete = automationHistoryStore.wrapDeleteDoc(
-  automationStore.actions.delete
-)
-
-export const selectedScreen = derived(store, $store => {
-  return $store.screens.find(screen => screen._id === $store.selectedScreenId)
-})
-
-export const selectedLayout = derived(store, $store => {
-  return $store.layouts?.find(layout => layout._id === $store.selectedLayoutId)
-})
-
-export const selectedComponent = derived(
-  [store, selectedScreen],
-  ([$store, $selectedScreen]) => {
-    if (
-      $selectedScreen &&
-      $store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
-    ) {
-      return $selectedScreen?.props
-    }
-    if (!$selectedScreen || !$store.selectedComponentId) {
-      return null
-    }
-    return findComponent($selectedScreen?.props, $store.selectedComponentId)
-  }
-)
-
-// For legacy compatibility only, but with the new design UI this is just
-// the selected screen
-export const currentAsset = selectedScreen
-
-export const sortedScreens = derived(store, $store => {
-  return $store.screens.slice().sort((a, b) => {
-    // Sort by role first
-    const roleA = RoleUtils.getRolePriority(a.routing.roleId)
-    const roleB = RoleUtils.getRolePriority(b.routing.roleId)
-    if (roleA !== roleB) {
-      return roleA > roleB ? -1 : 1
-    }
-    // Then put home screens first
-    const homeA = !!a.routing.homeScreen
-    const homeB = !!b.routing.homeScreen
-    if (homeA !== homeB) {
-      return homeA ? -1 : 1
-    }
-    // Then sort alphabetically by each URL param
-    const aParams = a.routing.route.split("/")
-    const bParams = b.routing.route.split("/")
-    let minParams = Math.min(aParams.length, bParams.length)
-    for (let i = 0; i < minParams; i++) {
-      if (aParams[i] === bParams[i]) {
-        continue
-      }
-      return aParams[i] < bParams[i] ? -1 : 1
-    }
-    // Then sort by the fewest amount of URL params
-    return aParams.length < bParams.length ? -1 : 1
-  })
-})
-
-export const selectedComponentPath = derived(
-  [store, selectedScreen],
-  ([$store, $selectedScreen]) => {
-    return findComponentPath(
-      $selectedScreen?.props,
-      $store.selectedComponentId
-    ).map(component => component._id)
-  }
-)
-
-// Derived automation state
-export const selectedAutomation = derived(automationStore, $automationStore => {
-  if (!$automationStore.selectedAutomationId) {
-    return null
-  }
-  return $automationStore.automations?.find(
-    x => x._id === $automationStore.selectedAutomationId
-  )
-})
-
-// Derive map of resource IDs to other users.
-// We only ever care about a single user in each resource, so if multiple users
-// share the same datasource we can just overwrite them.
-export const userSelectedResourceMap = derived(userStore, $userStore => {
-  let map = {}
-  $userStore.forEach(user => {
-    const resource = user.builderMetadata?.selectedResourceId
-    if (resource) {
-      if (!map[resource]) {
-        map[resource] = []
-      }
-      map[resource].push(user)
-    }
-  })
-  return map
-})
-
-export const isOnlyUser = derived(userStore, $userStore => {
-  return $userStore.length < 2
-})
-
-export const screensHeight = writable("210px")

packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { selectedAutomation } from "builderStore"
+  import { selectedAutomation } from "stores/frontend"
   import Flowchart from "./FlowChart/FlowChart.svelte"
 </script>
 

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -9,11 +9,11 @@
     Tags,
     Tag,
   } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "builderStore"
+  import { automationStore, selectedAutomation } from "stores/frontend"
   import { admin, licensing } from "stores/portal"
   import { externalActions } from "./ExternalActions"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
-  import { checkForCollectStep } from "builderStore/utils"
+  import { checkForCollectStep } from "builder/utils"
 
   export let blockIdx
   export let lastStep

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -1,5 +1,9 @@
 <script>
-  import { automationStore, selectedAutomation } from "builderStore"
+  import {
+    automationStore,
+    selectedAutomation,
+    automationHistoryStore,
+  } from "stores/frontend"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import FlowItem from "./FlowItem.svelte"
   import TestDataModal from "./TestDataModal.svelte"
@@ -14,7 +18,6 @@
   } from "@budibase/bbui"
   import { ActionStepID } from "constants/backend/automations"
   import UndoRedoControl from "components/common/UndoRedoControl.svelte"
-  import { automationHistoryStore } from "builderStore"
 
   export let automation
 

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { automationStore, selectedAutomation } from "builderStore"
+  import { automationStore, selectedAutomation } from "stores/frontend"
   import {
     Icon,
     Divider,

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
   import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
   import { externalActions } from "./ExternalActions"
   import { createEventDispatcher } from "svelte"

packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte

@@ -7,7 +7,7 @@
     Label,
     notifications,
   } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "builderStore"
+  import { automationStore, selectedAutomation } from "stores/frontend"
   import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import { cloneDeep } from "lodash/fp"
 

packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Icon, Divider } from "@budibase/bbui"
   import TestDisplay from "./TestDisplay.svelte"
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
 
   export let automation
 </script>

packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte

@@ -4,7 +4,7 @@
     automationStore,
     selectedAutomation,
     userSelectedResourceMap,
-  } from "builderStore"
+  } from "stores/frontend"
   import NavItem from "components/common/NavItem.svelte"
   import EditAutomationPopover from "./EditAutomationPopover.svelte"
   import { notifications } from "@budibase/bbui"

packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
   import { notifications } from "@budibase/bbui"
   import {
     Input,

packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
   import { ActionMenu, MenuItem, notifications, Icon } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import UpdateAutomationModal from "components/automation/AutomationPanel/UpdateAutomationModal.svelte"

packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
   import { notifications } from "@budibase/bbui"
   import { Icon, Input, ModalContent, Modal } from "@budibase/bbui"
 

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -18,7 +18,7 @@
     Detail,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import { automationStore, selectedAutomation } from "builderStore"
+  import { automationStore, selectedAutomation } from "stores/frontend"
   import { tables } from "stores/backend"
   import { environment, licensing } from "stores/portal"
   import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
@@ -42,7 +42,7 @@
   import {
     getSchemaForDatasourcePlus,
     getEnvironmentBindings,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import { Utils } from "@budibase/frontend-core"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
   import { onMount } from "svelte"

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon, notifications } from "@budibase/bbui"
-  import { automationStore, selectedAutomation } from "builderStore"
+  import { automationStore, selectedAutomation } from "stores/frontend"
   import WebhookDisplay from "./WebhookDisplay.svelte"
   import { ModalContent } from "@budibase/bbui"
   import { onMount, onDestroy } from "svelte"

packages/builder/src/components/backend/DataTable/TableDataTable.svelte

@@ -4,7 +4,7 @@
   import { TableNames } from "constants"
   import { Grid } from "@budibase/frontend-core"
   import { API } from "api"
-  import { store } from "builderStore"
+  import { appStore } from "stores/frontend"
   import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte"
   import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte"
   import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte"
@@ -61,14 +61,14 @@
     datasource={gridDatasource}
     canAddRows={!isUsersTable}
     canDeleteRows={!isUsersTable}
-    canEditRows={!isUsersTable || !$store.features.disableUserMetadata}
+    canEditRows={!isUsersTable || !$appStore.features.disableUserMetadata}
-    canEditColumns={!isUsersTable || !$store.features.disableUserMetadata}
+    canEditColumns={!isUsersTable || !$appStore.features.disableUserMetadata}
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
     showAvatars={false}
     on:updatedatasource={handleGridTableUpdate}
   >
     <svelte:fragment slot="filter">
-      {#if isUsersTable && $store.features.disableUserMetadata}
+      {#if isUsersTable && $appStore.features.disableUserMetadata}
         <GridUsersTableButton />
       {/if}
       <GridFilterButton />

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -27,7 +27,7 @@
     SWITCHABLE_TYPES,
     PrettyRelationshipDefinitions,
   } from "constants/backend"
-  import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils"
+  import { getAutoColumnInformation, buildAutoColumn } from "builder/utils"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import { getBindings } from "components/backend/DataTable/formula"

packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte

@@ -13,7 +13,7 @@
   } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
   import { FIELDS } from "constants/backend"
-  import { generate } from "builderStore/schemaGenerator"
+  import { generate } from "builder/schemaGenerator"
 
   export let schema = {}
   export let json

packages/builder/src/components/backend/DataTable/modals/grid/GridUsersTableButton.svelte

@@ -1,15 +1,12 @@
 <script>
   import { ActionButton, Popover, Heading, Body, Button } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { builderStore } from "stores/frontend"
 
   let anchor
   let open = false
 
   const openSidePanel = () => {
-    store.update(state => ({
+    builderStore.showBuilderSidePanel()
-      ...state,
-      builderSidePanel: true,
-    }))
     open = false
   }
 </script>

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -1,14 +1,7 @@
 <script>
   import { goto, isActive, params } from "@roxi/routify"
   import { BUDIBASE_INTERNAL_DB_ID } from "constants/backend"
-  import {
+  import { datasources, queries, tables, views, viewsV2 } from "stores/backend"
-    database,
-    datasources,
-    queries,
-    tables,
-    views,
-    viewsV2,
-  } from "stores/backend"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
   import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -20,7 +13,7 @@
   } from "helpers/data/utils"
   import IntegrationIcon from "./IntegrationIcon.svelte"
   import { TableNames } from "constants"
-  import { userSelectedResourceMap } from "builderStore"
+  import { userSelectedResourceMap, database } from "stores/frontend"
 
   let openDataSources = []
 

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

@@ -1,11 +1,12 @@
 <script>
-  import { tables, views, viewsV2, database } from "stores/backend"
+  import { tables, views, viewsV2 } from "stores/backend"
   import { TableNames } from "constants"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { goto, isActive } from "@roxi/routify"
-  import { userSelectedResourceMap } from "builderStore"
+  import { userSelectedResourceMap } from "stores/frontend"
+  import { database } from "stores/frontend/database"
 
   export let sourceId
   export let selectTable

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

@@ -1,8 +1,8 @@
 <script>
   import { goto, params } from "@roxi/routify"
-  import { store } from "builderStore"
   import { cloneDeep } from "lodash/fp"
   import { tables, datasources } from "stores/backend"
+  import { screenStore } from "stores/frontend"
   import {
     ActionMenu,
     Icon,
@@ -31,7 +31,7 @@
   $: allowDeletion = !external || table?.created
 
   function showDeleteModal() {
-    templateScreens = $store.screens.filter(
+    templateScreens = $screenStore.screens.filter(
       screen => screen.autoTableId === table._id
     )
     willBeDeleted = ["All table data"].concat(
@@ -46,7 +46,7 @@
       await tables.delete(table)
       // Screens need deleted one at a time because of undo/redo
       for (let screen of templateScreens) {
-        await store.actions.screens.delete(screen)
+        await screenStore.delete(screen)
       }
       if (table.type === "external") {
         await datasources.fetch()

packages/builder/src/components/commandPalette/CommandPalette.svelte

@@ -10,11 +10,13 @@
   import { API } from "api"
   import { goto } from "@roxi/routify"
   import {
-    store,
-    sortedScreens,
     automationStore,
-    themeStore,
+    previewStore,
-  } from "builderStore"
+    builderStore,
+    sortedScreens,
+    appStore,
+  } from "stores/frontend"
+  import { themeStore } from "stores/portal"
   import { datasources, queries, tables, views } from "stores/backend"
   import { getContext } from "svelte"
   import { Constants } from "@budibase/frontend-core"
@@ -26,8 +28,7 @@
       name: "Invite users and manage app access",
       description: "",
       icon: "User",
-      action: () =>
+      action: () => builderStore.showBuilderSidePanel(),
-        store.update(state => ({ ...state, builderSidePanel: true })),
     },
     {
       type: "Navigate",
@@ -69,13 +70,13 @@
       name: "App",
       description: "",
       icon: "Play",
-      action: () => store.update(state => ({ ...state, showPreview: true })),
+      action: () => previewStore.showPreview(true),
     },
     {
       type: "Preview",
       name: "Published App",
       icon: "Play",
-      action: () => window.open(`/app${$store.url}`),
+      action: () => window.open(`/app${$appStore.url}`),
     },
     {
       type: "Support",
@@ -216,7 +217,7 @@
 
   async function deployApp() {
     try {
-      await API.publishAppChanges($store.appId)
+      await API.publishAppChanges($appStore.appId)
       notifications.success("App published successfully")
     } catch (error) {
       notifications.error("Error publishing app")

packages/builder/src/components/common/CodeEditor/CodeEditor.svelte

@@ -43,7 +43,7 @@
   import { Compartment } from "@codemirror/state"
   import { javascript } from "@codemirror/lang-javascript"
   import { EditorModes, getDefaultTheme } from "./"
-  import { themeStore } from "builderStore"
+  import { themeStore } from "stores/portal"
 
   export let label
   export let completions = []

packages/builder/src/components/common/CodeMirrorEditor.svelte

@@ -27,7 +27,7 @@
 <script>
   import { Label } from "@budibase/bbui"
   import CodeMirror from "components/integration/codemirror"
-  import { themeStore } from "builderStore"
+  import { themeStore } from "stores/portal"
   import { createEventDispatcher, onMount } from "svelte"
 
   export let mode = EditorModes.JS

packages/builder/src/components/common/bindings/BindableCombobox.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -18,7 +18,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
 
   import { convertToJS } from "@budibase/string-templates"
   import { admin } from "stores/portal"

packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"

packages/builder/src/components/common/bindings/DrawerBindableInput.svelte

@@ -3,11 +3,12 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
 
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
+  import { builderStore } from "stores/frontend"
 
   export let panel = ClientBindingPanel
   export let value = ""
@@ -21,6 +22,7 @@
   export let allowHelpers = true
   export let updateOnChange = true
   export let drawerLeft
+  export let key
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -34,6 +36,7 @@
   const saveBinding = () => {
     onChange(tempValue)
     onBlur()
+    builderStore.propertyFocus()
     bindingDrawer.hide()
   }
 
@@ -49,6 +52,11 @@
   const onBlur = () => {
     dispatch("blur", currentVal)
   }
+
+  const onDrawerHide = e => {
+    builderStore.propertyFocus()
+    dispatch("drawerHide", e.detail)
+  }
 </script>
 
 <div class="control" class:disabled>
@@ -66,6 +74,7 @@
     <div
       class="icon"
       on:click={() => {
+        builderStore.propertyFocus(key)
         bindingDrawer.show()
       }}
     >
@@ -74,7 +83,7 @@
   {/if}
 </div>
 <Drawer
-  on:drawerHide
+  on:drawerHide={onDrawerHide}
   on:drawerShow
   {fillWidth}
   bind:this={bindingDrawer}

packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
 
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
   import { createEventDispatcher, setContext } from "svelte"

packages/builder/src/components/common/bindings/ModalBindableInput.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
   import { createEventDispatcher } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"

packages/builder/src/components/deploy/AppActions.svelte

@@ -20,7 +20,14 @@
   import analytics, { Events, EventSource } from "analytics"
   import { API } from "api"
   import { apps } from "stores/portal"
-  import { deploymentStore, store, isOnlyUser } from "builderStore"
+  import {
+    previewStore,
+    builderStore,
+    isOnlyUser,
+    appStore,
+    deploymentStore,
+    initialise,
+  } from "stores/frontend"
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import { TOUR_STEP_KEYS } from "components/portal/onboarding/tours.js"
   import { goto } from "@roxi/routify"
@@ -45,15 +52,15 @@
   $: isPublished =
     selectedApp?.status === "published" && latestDeployments?.length > 0
   $: updateAvailable =
-    $store.upgradableVersion &&
+    $appStore.upgradableVersion &&
-    $store.version &&
+    $appStore.version &&
-    $store.upgradableVersion !== $store.version
+    $appStore.upgradableVersion !== $appStore.version
   $: canPublish = !publishing && loaded
   $: lastDeployed = getLastDeployedString($deploymentStore)
 
   const initialiseApp = async () => {
-    const applicationPkg = await API.fetchAppPackage($store.devId)
+    const applicationPkg = await API.fetchAppPackage($appStore.devId)
-    await store.actions.initialise(applicationPkg)
+    await initialise(applicationPkg)
   }
 
   const getLastDeployedString = deployments => {
@@ -66,10 +73,7 @@
   }
 
   const previewApp = () => {
-    store.update(state => ({
+    previewStore.showPreview(true)
-      ...state,
-      showPreview: true,
-    }))
   }
 
   const viewApp = () => {
@@ -87,7 +91,7 @@
   async function publishApp() {
     try {
       publishing = true
-      await API.publishAppChanges($store.appId)
+      await API.publishAppChanges($appStore.appId)
       notifications.send("App published successfully", {
         type: "success",
         icon: "GlobeCheck",
@@ -131,7 +135,7 @@
   const completePublish = async () => {
     try {
       await apps.load()
-      await deploymentStore.actions.load()
+      await deploymentStore.load()
     } catch (err) {
       notifications.error("Error refreshing app")
     }
@@ -151,7 +155,7 @@
       </div>
     {/if}
     <TourWrap
-      tourStepKey={$store.onboarding
+      tourStepKey={$builderStore.onboarding
         ? TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT
         : TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT}
     >
@@ -161,10 +165,7 @@
             quiet
             icon="UserGroup"
             on:click={() => {
-              store.update(state => {
+              builderStore.showBuilderSidePanel()
-                state.builderSidePanel = true
-                return state
-              })
             }}
           >
             Users
@@ -232,7 +233,7 @@
                   }
                 }}
               >
-                {$store.url}
+                {$appStore.url}
                 {#if isPublished}
                   <Icon size="S" name="LinkOut" />
                 {:else}
@@ -313,10 +314,10 @@
 <Modal bind:this={updateAppModal} padding={false} width="600px">
   <UpdateAppModal
     app={{
-      name: $store.name,
+      name: $appStore.name,
-      url: $store.url,
+      url: $appStore.url,
-      icon: $store.icon,
+      icon: $appStore.icon,
-      appId: $store.appId,
+      appId: $appStore.appId,
     }}
     onUpdateComplete={async () => {
       await initialiseApp()

packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
   import { ModalContent } from "@budibase/bbui"
   import { onMount } from "svelte"
   import WebhookDisplay from "../automation/Shared/WebhookDisplay.svelte"

packages/builder/src/components/deploy/DeleteModal.svelte

@@ -1,9 +1,9 @@
 <script>
   import { Input, notifications } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
-  import { store } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { apps } from "stores/portal"
+  import { appStore } from "stores/frontend"
   import { API } from "api"
 
   export const show = () => {
@@ -19,7 +19,7 @@
 
   const deleteApp = async () => {
     try {
-      await API.deleteApp($store.appId)
+      await API.deleteApp($appStore.appId)
       apps.load()
       notifications.success("App deleted successfully")
       $goto("/builder")
@@ -35,11 +35,14 @@
   okText="Delete"
   onOk={deleteApp}
   onCancel={() => (deletionConfirmationAppName = null)}
-  disabled={deletionConfirmationAppName !== $store.name}
+  disabled={deletionConfirmationAppName !== $appStore.name}
 >
-  Are you sure you want to delete <b>{$store.name}</b>?
+  Are you sure you want to delete <b>{$appStore.name}</b>?
   <br />
   Please enter the app name below to confirm.
   <br /><br />
-  <Input bind:value={deletionConfirmationAppName} placeholder={$store.name} />
+  <Input
+    bind:value={deletionConfirmationAppName}
+    placeholder={$appStore.name}
+  />
 </ConfirmDialog>

packages/builder/src/components/deploy/RevertModal.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Input, Modal, notifications, ModalContent } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { appStore, initialise } from "stores/frontend"
   import { API } from "api"
 
   export let onComplete = () => {}
@@ -8,7 +8,7 @@
   let revertModal
   let appName
 
-  $: appId = $store.appId
+  $: appId = $appStore.appId
 
   const revert = async () => {
     try {
@@ -16,7 +16,7 @@
 
       // Reset frontend state after revert
       const applicationPkg = await API.fetchAppPackage(appId)
-      await store.actions.initialise(applicationPkg)
+      await initialise(applicationPkg)
       notifications.info("Changes reverted successfully")
       onComplete()
     } catch (error) {
@@ -38,7 +38,7 @@
     title="Revert Changes"
     confirmText="Revert"
     onConfirm={revert}
-    disabled={appName !== $store.name}
+    disabled={appName !== $appStore.name}
   >
     <span
       >The changes you have made will be deleted and the application reverted

packages/builder/src/components/deploy/VersionModal.svelte

@@ -7,7 +7,7 @@
     Button,
     StatusLight,
   } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { appStore, initialise } from "stores/frontend"
   import { API } from "api"
 
   export function show() {
@@ -23,17 +23,17 @@
 
   let updateModal
 
-  $: appId = $store.appId
+  $: appId = $appStore.appId
   $: updateAvailable =
-    $store.upgradableVersion &&
+    $appStore.upgradableVersion &&
-    $store.version &&
+    $appStore.version &&
-    $store.upgradableVersion !== $store.version
+    $appStore.upgradableVersion !== $appStore.version
-  $: revertAvailable = $store.revertableVersion != null
+  $: revertAvailable = $appStore.revertableVersion != null
 
   const refreshAppPackage = async () => {
     try {
       const pkg = await API.fetchAppPackage(appId)
-      await store.actions.initialise(pkg)
+      await initialise(pkg)
     } catch (error) {
       notifications.error("Error fetching app package")
     }
@@ -46,7 +46,7 @@
       // Don't wait for the async refresh, since this causes modal flashing
       refreshAppPackage()
       notifications.success(
-        `App updated successfully to version ${$store.upgradableVersion}`
+        `App updated successfully to version ${$appStore.upgradableVersion}`
       )
       onComplete()
     } catch (err) {
@@ -62,7 +62,7 @@
       // Don't wait for the async refresh, since this causes modal flashing
       refreshAppPackage()
       notifications.success(
-        `App reverted successfully to version ${$store.revertableVersion}`
+        `App reverted successfully to version ${$appStore.revertableVersion}`
       )
     } catch (err) {
       notifications.error(`Error reverting app: ${err}`)
@@ -89,20 +89,21 @@
     </div>
     {#if updateAvailable}
       <Body size="S">
-        This app is currently using version <b>{$store.version}</b>, but version
+        This app is currently using version <b>{$appStore.version}</b>, but
-        <b>{$store.upgradableVersion}</b> is available. Updates can contain new features,
+        version
-        performance improvements and bug fixes.
+        <b>{$appStore.upgradableVersion}</b> is available. Updates can contain new
+        features, performance improvements and bug fixes.
       </Body>
     {:else}
       <Body size="S">
-        This app is currently using version <b>{$store.version}</b> which is the
+        This app is currently using version <b>{$appStore.version}</b> which is the
         latest version available.
       </Body>
     {/if}
     {#if revertAvailable}
       <Body size="S">
         You can revert this app to version
-        <b>{$store.revertableVersion}</b>
+        <b>{$appStore.revertableVersion}</b>
         if you're experiencing issues with the current version.
       </Body>
     {/if}

packages/builder/src/components/design/ScreenDetailsModal.svelte

@@ -1,8 +1,8 @@
 <script>
   import { ModalContent, Input } from "@budibase/bbui"
-  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import sanitizeUrl from "builder/store/screenTemplates/utils/sanitizeUrl"
   import { get } from "svelte/store"
-  import { store } from "builderStore"
+  import { screenStore } from "stores/frontend"
 
   export let onConfirm
   export let onCancel
@@ -35,7 +35,7 @@
     if (!screenRole) {
       return false
     }
-    return get(store).screens.some(
+    return get(screenStore).screens.some(
       screen =>
         screen.routing.route.toLowerCase() === url.toLowerCase() &&
         screen.routing.roleId === screenRole

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte

@@ -15,7 +15,7 @@
     getEventContextBindings,
     getActionBindings,
     makeStateBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import { cloneDeep } from "lodash/fp"
 
   const flipDurationMs = 150

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ChangeFormStep.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviderComponents } from "builder/dataBinding"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
@@ -10,7 +10,7 @@
 
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "ChangeFormStep"
   )
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearForm.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviderComponents } from "builder/dataBinding"
 
   export let parameters
 
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "ClearForm"
   )
 </script>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte

@@ -1,11 +1,11 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
   import { tables, viewsV2 } from "stores/backend"
   import {
     getContextProviderComponents,
     getSchemaForDatasourcePlus,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import SaveFields from "./SaveFields.svelte"
 
   export let parameters
@@ -13,12 +13,12 @@
 
   $: formComponents = getContextProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "form"
   )
   $: schemaComponents = getContextProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "schema"
   )
   $: providerOptions = getProviderOptions(formComponents, schemaComponents)
@@ -35,7 +35,7 @@
 
   // Gets a context definition of a certain type from a component definition
   const extractComponentContext = (component, contextType) => {
-    const def = store.actions.components.getDefinition(component?._component)
+    const def = componentStore.getDefinition(component?._component)
     if (!def) {
       return null
     }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ExportData.svelte

@@ -3,13 +3,13 @@
   import {
     findAllMatchingComponents,
     findComponent,
-  } from "builderStore/componentUtils"
+  } from "stores/frontend/components/utils"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { onMount } from "svelte"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
 
   export let parameters
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/NavigateTo.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { store } from "builderStore"
+  import { screenStore } from "stores/frontend"
   import { onMount } from "svelte"
   import { Label, Checkbox, Select } from "@budibase/bbui"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
@@ -8,7 +8,7 @@
   export let parameters
   export let bindings = []
 
-  $: urlOptions = $store.screens
+  $: urlOptions = $screenStore.screens
     .map(screen => screen.routing?.route)
     .filter(x => x != null)
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { selectedScreen } from "builderStore"
+  import { selectedScreen } from "stores/frontend"
-  import { findAllMatchingComponents } from "builderStore/componentUtils"
+  import { findAllMatchingComponents } from "stores/frontend/components/utils"
 
   export let parameters
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/RefreshDataProvider.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviderComponents } from "builder/dataBinding"
 
   export let parameters
 
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "RefreshDatasource"
   )
 </script>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/S3Upload.svelte

@@ -1,7 +1,7 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
-  import { findAllMatchingComponents } from "builderStore/componentUtils"
+  import { findAllMatchingComponents } from "stores/frontend/components/utils"
 
   export let parameters
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte

@@ -1,11 +1,11 @@
 <script>
   import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
   import { tables, viewsV2 } from "stores/backend"
   import {
     getContextProviderComponents,
     getSchemaForDatasourcePlus,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import SaveFields from "./SaveFields.svelte"
 
   export let parameters
@@ -14,13 +14,13 @@
 
   $: formComponents = getContextProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "form",
     { includeSelf: nested }
   )
   $: schemaComponents = getContextProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "schema"
   )
   $: providerOptions = getProviderOptions(formComponents, schemaComponents)
@@ -37,7 +37,9 @@
 
   // Gets a context definition of a certain type from a component definition
   const extractComponentContext = (component, contextType) => {
-    const def = store.actions.components.getDefinition(component?._component)
+    const def = componentStore.getDefinition.getDefinition(
+      component?._component
+    )
     if (!def) {
       return null
     }

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ScrollTo.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
   import { Label, Combobox, Select } from "@budibase/bbui"
   import {
     getActionProviderComponents,
     buildFormSchema,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { findComponent } from "builderStore/componentUtils"
+  import { findComponent } from "stores/frontend/components/utils"
 
   export let parameters
 
@@ -14,7 +14,7 @@
   $: fieldOptions = Object.keys(formSchema || {})
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "ScrollTo"
   )
 </script>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Select, Label, Input, Checkbox, Icon, Body } from "@budibase/bbui"
-  import { automationStore } from "builderStore"
+  import { automationStore } from "stores/frontend"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateFieldValue.svelte

@@ -2,12 +2,12 @@
   import { Select, Label, Combobox } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
   import {
     getActionProviderComponents,
     buildFormSchema,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { findComponent } from "builderStore/componentUtils"
+  import { findComponent } from "stores/frontend/components/utils"
 
   export let parameters
   export let bindings = []
@@ -28,7 +28,7 @@
   $: fieldOptions = Object.keys(formSchema || {})
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "ValidateForm"
   )
 

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateState.svelte

@@ -2,7 +2,7 @@
   import { Select, Label, Combobox, Checkbox, Body } from "@budibase/bbui"
   import { onMount } from "svelte"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
-  import { getAllStateVariables } from "builderStore/dataBinding"
+  import { getAllStateVariables } from "builder/dataBinding"
 
   export let parameters
   export let bindings = []

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ValidateForm.svelte

@@ -1,13 +1,13 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
-  import { getActionProviderComponents } from "builderStore/dataBinding"
+  import { getActionProviderComponents } from "builder/dataBinding"
 
   export let parameters
 
   $: actionProviders = getActionProviderComponents(
     $currentAsset,
-    $store.selectedComponentId,
+    $componentStore.selectedComponentId,
     "ValidateForm"
   )
 </script>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js

@@ -1,6 +1,6 @@
 import * as ActionComponents from "./actions"
 import { get } from "svelte/store"
-import { store } from "builderStore"
+import { appStore } from "stores/frontend"
 // @ts-ignore
 import ActionDefinitions from "./manifest.json"
 
@@ -18,7 +18,7 @@ export const getAvailableActions = (getAllActions = false) => {
       if (getAllActions || !action.dependsOnFeature) {
         return true
       }
-      return get(store).clientFeatures?.[action.dependsOnFeature] === true
+      return get(appStore).clientFeatures?.[action.dependsOnFeature] === true
     })
     .map(action => {
       // Then enrich the actions with real components

packages/builder/src/components/design/settings/controls/ColorPicker.svelte

@@ -1,8 +1,8 @@
 <script>
   import { ColorPicker } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { themeStore } from "stores/frontend"
 
   export let value
 </script>
 
-<ColorPicker {value} on:change spectrumTheme={$store.theme} />
+<ColorPicker {value} on:change spectrumTheme={$themeStore.theme} />

packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte

@@ -7,7 +7,7 @@
     Layout,
     Label,
   } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { themeStore } from "stores/frontend"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let column
@@ -42,7 +42,7 @@
         <ColorPicker
           value={column.background}
           on:change={e => (column.background = e.detail)}
-          spectrumTheme={$store.theme}
+          spectrumTheme={$themeStore.theme}
         />
       </Layout>
       <Layout noPadding gap="XS">
@@ -50,7 +50,7 @@
         <ColorPicker
           value={column.color}
           on:change={e => (column.color = e.detail)}
-          spectrumTheme={$store.theme}
+          spectrumTheme={$themeStore.theme}
         />
       </Layout>
     </Layout>

packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte

@@ -6,8 +6,8 @@
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { getFields } from "helpers/searchFields"
 
   export let componentInstance

packages/builder/src/components/design/settings/controls/DataProviderSelect.svelte

@@ -1,14 +1,17 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { makePropSafe } from "@budibase/string-templates"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
-  import { findComponentPath } from "builderStore/componentUtils"
+  import { findComponentPath } from "stores/frontend/components/utils"
 
   export let value
 
   const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
 
-  $: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
+  $: path = findComponentPath(
+    $currentAsset?.props,
+    $componentStore.selectedComponentId
+  )
   $: providers = path.filter(c => c._component?.endsWith("/dataprovider"))
 </script>
 

packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte

@@ -3,7 +3,7 @@
     getContextProviderComponents,
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import {
     Button,
     Popover,
@@ -20,7 +20,7 @@
     notifications,
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store, currentAsset } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
   import {
     tables as tablesStore,
     queries as queriesStore,
@@ -77,7 +77,7 @@
     }))
   $: contextProviders = getContextProviderComponents(
     $currentAsset,
-    $store.selectedComponentId
+    $componentStore.selectedComponentId
   )
   $: dataProviders = contextProviders
     .filter(component => component._component?.endsWith("/dataprovider"))

packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Icon, Popover, Layout } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { componentStore } from "stores/frontend"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher } from "svelte"
   import ComponentSettingsSection from "../../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
@@ -26,7 +26,7 @@
   $: if (field) {
     pseudoComponentInstance = field
   }
-  $: componentDef = store.actions.components.getDefinition(
+  $: componentDef = componentStore.getDefinition(
     pseudoComponentInstance._component
   )
   $: parsedComponentDef = processComponentDefinitionSettings(componentDef)
@@ -48,10 +48,7 @@
   const updateSetting = async (setting, value) => {
     const nestedComponentInstance = cloneDeep(pseudoComponentInstance)
 
-    const patchFn = store.actions.components.updateComponentSetting(
+    const patchFn = componentStore.updateComponentSetting(setting.key, value)
-      setting.key,
-      value
-    )
     patchFn(nestedComponentInstance)
 
     const update = {

packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte

@@ -5,11 +5,10 @@
     getSchemaForDatasource,
     getBindableProperties,
     getComponentBindableProperties,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { currentAsset } from "builderStore"
   import DraggableList from "../DraggableList.svelte"
   import { createEventDispatcher } from "svelte"
-  import { store, selectedScreen } from "builderStore"
+  import { selectedScreen, currentAsset, componentStore } from "stores/frontend"
   import FieldSetting from "./FieldSetting.svelte"
   import { convertOldFieldFormat, getComponentForField } from "./utils"
 
@@ -114,7 +113,7 @@
     }
     instance._component = `@budibase/standard-components/${type}`
 
-    const pseudoComponentInstance = store.actions.components.createInstance(
+    const pseudoComponentInstance = componentStore.createInstance(
       instance._component,
       {
         _instanceName: instance.field,

packages/builder/src/components/design/settings/controls/FieldSelect.svelte

@@ -3,8 +3,8 @@
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { createEventDispatcher } from "svelte"
 
   export let componentInstance = {}

packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte

@@ -4,9 +4,9 @@
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import FilterDrawer from "./FilterDrawer.svelte"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
 
   const dispatch = createEventDispatcher()
 

packages/builder/src/components/design/settings/controls/FormFieldSelect.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Combobox } from "@budibase/bbui"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { getComponentFieldOptions } from "helpers/formFields"
 
   export let componentInstance

packages/builder/src/components/design/settings/controls/LayoutSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { store } from "builderStore"
+  import { layoutStore } from "stores/frontend"
   import { Select } from "@budibase/bbui"
 
   export let value
@@ -8,7 +8,7 @@
 <Select
   bind:value
   on:change
-  options={$store.layouts}
+  options={$layoutStore.layouts}
   getOptionLabel={layout => layout.name}
   getOptionValue={layout => layout._id}
 />

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -3,8 +3,8 @@
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { createEventDispatcher } from "svelte"
 
   export let componentInstance = {}

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -3,8 +3,8 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { store } from "builderStore"
+  import { builderStore } from "stores/frontend"
   import { onDestroy } from "svelte"
 
   export let label = ""
@@ -70,7 +70,7 @@
 
   onDestroy(() => {
     if (highlighted) {
-      store.actions.settings.highlight(null)
+      builderStore.highlightSetting(null)
     }
   })
 </script>

packages/builder/src/components/design/settings/controls/RelationshipFilterEditor.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
-  import { findClosestMatchingComponent } from "builderStore/componentUtils"
+  import { findClosestMatchingComponent } from "stores/frontend/components/utils"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import { tables } from "stores/backend"
   import FilterEditor from "./FilterEditor/FilterEditor.svelte"
 

packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte

@@ -1,8 +1,8 @@
 <script>
   import { ActionButton, notifications } from "@budibase/bbui"
-  import { currentAsset, store } from "builderStore"
+  import { currentAsset, componentStore } from "stores/frontend"
-  import { findClosestMatchingComponent } from "builderStore/componentUtils"
+  import { findClosestMatchingComponent } from "stores/frontend/components/utils"
-  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
+  import { makeDatasourceFormComponents } from "builder/store/screenTemplates/utils/commonComponents"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let componentInstance
@@ -18,7 +18,7 @@
     const dataSource = form?.dataSource
     const fields = makeDatasourceFormComponents(dataSource)
     try {
-      await store.actions.components.updateSetting(
+      await componentStore.updateSetting(
         "_children",
         fields.map(field => field.json())
       )

packages/builder/src/components/design/settings/controls/SearchFieldSelect.svelte

@@ -3,8 +3,8 @@
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { tables } from "stores/backend"
   import { createEventDispatcher } from "svelte"
   import { getFields } from "helpers/searchFields"

packages/builder/src/components/design/settings/controls/SortableFieldSelect.svelte

@@ -3,8 +3,8 @@
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
-  import { currentAsset } from "builderStore"
+  import { currentAsset } from "stores/frontend"
   import { createEventDispatcher } from "svelte"
   import { canBeSortColumn } from "@budibase/shared-core"
 

packages/builder/src/components/design/settings/controls/URLSelect.svelte

@@ -1,12 +1,12 @@
 <script>
-  import { store } from "builderStore"
+  import { screenStore } from "stores/frontend"
   import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
 
   export let value
   export let bindings
   export let placeholder
 
-  $: urlOptions = $store.screens
+  $: urlOptions = $screenStore.screens
     .map(screen => screen.routing?.route)
     .filter(x => x != null)
 </script>

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -10,9 +10,9 @@
     Input,
     DatePicker,
   } from "@budibase/bbui"
-  import { currentAsset, selectedComponent } from "builderStore"
+  import { currentAsset, selectedComponent } from "stores/frontend"
-  import { findClosestMatchingComponent } from "builderStore/componentUtils"
+  import { findClosestMatchingComponent } from "stores/frontend/components/utils"
-  import { getSchemaForDatasource } from "builderStore/dataBinding"
+  import { getSchemaForDatasource } from "builder/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { generate } from "shortid"
 

packages/builder/src/components/integration/QueryBindingBuilder.svelte

@@ -3,7 +3,7 @@
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { createEventDispatcher } from "svelte"
 

packages/builder/src/components/integration/QueryEditor.svelte

@@ -2,7 +2,7 @@
   import CodeMirror from "./codemirror"
   import { Label } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
-  import { themeStore } from "builderStore"
+  import { themeStore } from "stores/portal"
 
   const dispatch = createEventDispatcher()
 

packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte

@@ -1,9 +1,7 @@
 <script>
   import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
-  import { getUserBindings } from "builderStore/dataBinding"
+  import { getUserBindings } from "builder/dataBinding"
-  export let bindable = true
   export let queryBindings = []
-  export let hideHeading = false
 
   const userBindings = getUserBindings()
 

packages/builder/src/components/integration/RestQueryViewer.svelte

@@ -48,7 +48,7 @@
     runtimeToReadableBinding,
     runtimeToReadableMap,
     toBindingsArray,
-  } from "builderStore/dataBinding"
+  } from "builder/dataBinding"
 
   export let queryId
 

packages/builder/src/components/portal/licensing/LicensingOverlays.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { licensing, auth } from "stores/portal"
+  import { licensing, auth, temporalStore } from "stores/portal"
-  import { temporalStore } from "builderStore"
   import { onMount } from "svelte"
   import DayPassWarningModal from "./DayPassWarningModal.svelte"
   import PaymentFailedModal from "./PaymentFailedModal.svelte"

packages/builder/src/components/portal/licensing/licensingBanners.js

@@ -1,6 +1,5 @@
 import { ExpiringKeys } from "./constants"
-import { temporalStore } from "builderStore"
+import { admin, auth, licensing, temporalStore } from "stores/portal"
-import { admin, auth, licensing } from "stores/portal"
 import { get } from "svelte/store"
 import { BANNER_TYPES } from "@budibase/bbui"
 

packages/builder/src/components/portal/onboarding/TourPopover.svelte

@@ -1,8 +1,8 @@
 <script>
   import { Popover, Layout, Heading, Body, Button, Link } from "@budibase/bbui"
-  import { store } from "builderStore"
   import { TOURS } from "./tours.js"
   import { goto, layout, isActive } from "@roxi/routify"
+  import { builderStore } from "stores/frontend"
 
   let popoverAnchor
   let popover
@@ -12,9 +12,9 @@
   let lastStep
   let skipping = false
 
-  $: tourNodes = { ...$store.tourNodes }
+  $: tourNodes = { ...$builderStore.tourNodes }
-  $: tourKey = $store.tourKey
+  $: tourKey = $builderStore.tourKey
-  $: tourStepKey = $store.tourStepKey
+  $: tourStepKey = $builderStore.tourStepKey
   $: tour = TOURS[tourKey]
   $: tourOnSkip = tour?.onSkip
 
@@ -47,12 +47,11 @@
     if (step.route) {
       const activeNav = $layout.children.find(c => $isActive(c.path))
       if (activeNav) {
-        store.update(state => {
+        builderStore.setPreviousTopNavPath(
-          if (!state.previousTopNavPath) state.previousTopNavPath = {}
+          activeNav.path,
-          state.previousTopNavPath[activeNav.path] = window.location.pathname
+          window.location.pathname
-          $goto(state.previousTopNavPath[step.route] || step.route)
+        )
-          return state
+        $goto($builderStore.previousTopNavPath[step.route] || step.route)
-        })
       }
     }
   }
@@ -61,7 +60,7 @@
     if (!lastStep === true) {
       let target = tourSteps[tourStepIdx + 1]
       if (target) {
-        store.update(state => ({
+        builderStore.update(state => ({
           ...state,
           tourStepKey: target.id,
         }))

packages/builder/src/components/portal/onboarding/TourWrap.svelte

@@ -2,7 +2,7 @@
   import { tourHandler } from "./tourHandler"
   import { TOURS } from "./tours"
   import { onMount, onDestroy } from "svelte"
-  import { store } from "builderStore"
+  import { builderStore } from "stores/frontend"
 
   export let tourStepKey
 
@@ -23,7 +23,7 @@
     }
   }
 
-  $: tourKeyWatch = $store.tourKey
+  $: tourKeyWatch = $builderStore.tourKey
   $: registerTourNode(tourKeyWatch, tourStepKey, ready)
 
   onMount(() => {

packages/builder/src/components/portal/onboarding/tourHandler.js

@@ -1,4 +1,4 @@
-import { store } from "builderStore/index"
+import { builderStore } from "stores/frontend"
 import { get } from "svelte/store"
 
 const registerNode = async (node, tourStepKey) => {
@@ -6,12 +6,12 @@ const registerNode = async (node, tourStepKey) => {
     console.log("Tour Handler - an anchor node is required")
   }
 
-  if (!get(store).tourKey) {
+  if (!get(builderStore).tourKey) {
     console.log("Tour Handler - No active tour ", tourStepKey, node)
     return
   }
 
-  store.update(state => {
+  builderStore.update(state => {
     const update = {
       ...state,
       tourNodes: {
@@ -29,10 +29,10 @@ export function tourHandler(node, tourStepKey) {
   }
   return {
     destroy: () => {
-      const updatedTourNodes = get(store).tourNodes
+      const updatedTourNodes = get(builderStore).tourNodes
       if (updatedTourNodes && updatedTourNodes[tourStepKey]) {
         delete updatedTourNodes[tourStepKey]
-        store.update(state => {
+        builderStore.update(state => {
           const update = {
             ...state,
             tourNodes: {

packages/builder/src/components/portal/onboarding/tours.js

@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { store } from "builderStore"
+import { builderStore } from "stores/frontend"
 import { auth } from "stores/portal"
 import analytics from "analytics"
 import { OnboardingData, OnboardingDesign, OnboardingPublish } from "./steps"
@@ -37,11 +37,11 @@ const endUserOnboarding = async ({ skipped = false } = {}) => {
       // Update the cached user
       await auth.getSelf()
 
-      store.update(state => ({
+      builderStore.update(state => ({
         ...state,
-        tourNodes: undefined,
+        tourNodes: null,
-        tourKey: undefined,
+        tourKey: null,
-        tourKeyStep: undefined,
+        tourStepKey: null,
         onboarding: false,
       }))
     } catch (e) {

packages/builder/src/components/settings/ThemeModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import { ModalContent } from "@budibase/bbui"
   import { Select } from "@budibase/bbui"
-  import { themeStore } from "builderStore"
+  import { themeStore } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
 </script>
 

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

@@ -7,7 +7,8 @@
     ModalContent,
     Dropzone,
   } from "@budibase/bbui"
-  import { store, automationStore } from "builderStore"
+  import { initialise as initialiseFrontend } from "stores/frontend"
+  import { initialise as initialiseBackend } from "stores/backend"
   import { API } from "api"
   import { apps, admin, auth } from "stores/portal"
   import { onMount } from "svelte"
@@ -132,8 +133,10 @@
 
       // Select Correct Application/DB in prep for creating user
       const pkg = await API.fetchAppPackage(createdApp.instance._id)
-      await store.actions.initialise(pkg)
+
-      await automationStore.actions.fetch()
+      await initialiseFrontend(pkg)
+      await initialiseBackend(pkg)
+
       // Update checklist - in case first app
       await admin.init()
 

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

@@ -9,7 +9,7 @@
     Body,
   } from "@budibase/bbui"
   import { API } from "api"
-  import { automationStore, store } from "../../builderStore"
+  import { initialise } from "stores/frontend"
 
   export let app
 
@@ -28,8 +28,8 @@
       const appId = app.devId
       await API.updateAppFromExport(appId, data)
       const pkg = await API.fetchAppPackage(appId)
-      await store.actions.initialise(pkg)
+      await initialise(pkg)
-      await automationStore.actions.fetch()
+
       notifications.success("App updated successfully")
     } catch (err) {
       notifications.error(`Failed to update app - ${err.message || err}`)

packages/builder/src/helpers/formFields.js

@@ -1,8 +1,8 @@
-import { findClosestMatchingComponent } from "builderStore/componentUtils"
+import { findClosestMatchingComponent } from "stores/frontend/components/utils"
 import {
   getDatasourceForProvider,
   getSchemaForDatasource,
-} from "builderStore/dataBinding"
+} from "builder/dataBinding"
 
 export const getComponentFieldOptions = (asset, id, type, loose = true) => {
   const form = findClosestMatchingComponent(

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -14,7 +14,7 @@
     Button,
     FancySelect,
   } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { builderStore, appStore } from "stores/frontend"
   import { groups, licensing, apps, users, auth, admin } from "stores/portal"
   import {
     fetchData,
@@ -55,7 +55,7 @@
 
   let inviteFailureResponse = ""
   $: validEmail = emailValidator(email) === true
-  $: prodAppId = apps.getProdAppID($store.appId)
+  $: prodAppId = apps.getProdAppID($appStore.appId)
   $: promptInvite = showInvite(
     filteredInvites,
     filteredUsers,
@@ -182,7 +182,7 @@
   const debouncedUpdateFetch = Utils.debounce(searchUsers, 250)
   $: debouncedUpdateFetch(
     query,
-    $store.builderSidePanel,
+    $builderStore.builderSidePanel,
     loaded,
     filterByAppAccess
   )
@@ -200,7 +200,7 @@
         [prodAppId]: role,
       },
     })
-    await searchUsers(query, $store.builderSidePanel, loaded)
+    await searchUsers(query, $builderStore.builderSidePanel, loaded)
   }
 
   const onUpdateUser = async (user, role) => {
@@ -486,7 +486,7 @@
     loaded = true
   }
 
-  $: initSidePanel($store.builderSidePanel)
+  $: initSidePanel($builderStore.builderSidePanel)
 
   function handleKeyDown(evt) {
     if (evt.key === "Enter" && validEmail && !inviting) {
@@ -523,12 +523,7 @@
 <div
   transition:fly={{ x: 400, duration: 260 }}
   id="builder-side-panel-container"
-  use:clickOutside={() => {
+  use:clickOutside={builderStore.hideBuilderSidePanel}
-    store.update(state => {
-      state.builderSidePanel = false
-      return state
-    })
-  }}
 >
   <div class="builder-side-panel-header">
     <div
@@ -551,10 +546,7 @@
         name="RailRightClose"
         hoverable
         on:click={() => {
-          store.update(state => {
+          builderStore.hideBuilderSidePanel()
-            state.builderSidePanel = false
-            return state
-          })
         }}
       />
     </div>