diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 8d7129b812..8b83729fde 100644
--- a/packages/client/src/components/preview/SettingsPicker.svelte
+++ b/packages/client/src/components/preview/SettingsPicker.svelte
@@ -1,12 +1,12 @@
diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js
index a28a4cd9eb..2c2ead66c4 100644
--- a/packages/client/src/stores/app.js
+++ b/packages/client/src/stores/app.js
@@ -1,8 +1,14 @@
import { API } from "api"
import { get, writable } from "svelte/store"
+const initialState = {
+ appId: null,
+ isDevApp: false,
+ clientLoadTime: window.INIT_TIME ? Date.now() - window.INIT_TIME : null,
+}
+
const createAppStore = () => {
- const store = writable(null)
+ const store = writable(initialState)
// Fetches the app definition including screens, layouts and theme
const fetchAppDefinition = async () => {
@@ -13,11 +19,13 @@ const createAppStore = () => {
try {
const appDefinition = await API.fetchAppPackage(appId)
store.set({
+ ...initialState,
...appDefinition,
appId: appDefinition?.application?.appId,
+ isDevApp: appId.startsWith("app_dev"),
})
} catch (error) {
- store.set(null)
+ store.set(initialState)
}
}
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 27c8bbe2a2..6d57ce7762 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -1,7 +1,6 @@
-import { writable, derived, get } from "svelte/store"
-import Manifest from "manifest.json"
-import { findComponentById, findComponentPathById } from "../utils/components"
+import { writable, get } from "svelte/store"
import { API } from "api"
+import { devToolsStore } from "./devTools.js"
const dispatchEvent = (type, data = {}) => {
window.parent.postMessage({ type, data })
@@ -22,38 +21,18 @@ const createBuilderStore = () => {
previewDevice: "desktop",
isDragging: false,
}
- const writableStore = writable(initialState)
- const derivedStore = derived(writableStore, $state => {
- // Avoid any of this logic if we aren't in the builder preview
- if (!$state.inBuilder) {
- return $state
- }
-
- // Derive the selected component instance and definition
- const { layout, screen, previewType, selectedComponentId } = $state
- const asset = previewType === "layout" ? layout : screen
- const component = findComponentById(asset?.props, selectedComponentId)
- const prefix = "@budibase/standard-components/"
- const type = component?._component?.replace(prefix, "")
- const definition = type ? Manifest[type] : null
-
- // Derive the selected component path
- const path = findComponentPathById(asset.props, selectedComponentId) || []
-
- return {
- ...$state,
- selectedComponent: component,
- selectedComponentDefinition: definition,
- selectedComponentPath: path?.map(component => component._id),
- }
- })
-
+ const store = writable(initialState)
const actions = {
selectComponent: id => {
- if (id === get(writableStore).selectedComponentId) {
+ if (id === get(store).selectedComponentId) {
return
}
- writableStore.update(state => ({ ...state, editMode: false }))
+ store.update(state => ({
+ ...state,
+ editMode: false,
+ selectedComponentId: id,
+ }))
+ devToolsStore.actions.setAllowSelection(false)
dispatchEvent("select-component", { id })
},
updateProp: (prop, value) => {
@@ -76,7 +55,7 @@ const createBuilderStore = () => {
}
},
setSelectedPath: path => {
- writableStore.update(state => ({ ...state, selectedPath: path }))
+ store.update(state => ({ ...state, selectedPath: path }))
},
moveComponent: (componentId, destinationComponentId, mode) => {
dispatchEvent("move-component", {
@@ -86,22 +65,21 @@ const createBuilderStore = () => {
})
},
setDragging: dragging => {
- if (dragging === get(writableStore).isDragging) {
+ if (dragging === get(store).isDragging) {
return
}
- writableStore.update(state => ({ ...state, isDragging: dragging }))
+ store.update(state => ({ ...state, isDragging: dragging }))
},
setEditMode: enabled => {
- if (enabled === get(writableStore).editMode) {
+ if (enabled === get(store).editMode) {
return
}
- writableStore.update(state => ({ ...state, editMode: enabled }))
+ store.update(state => ({ ...state, editMode: enabled }))
},
}
return {
- ...writableStore,
- set: state => writableStore.set({ ...initialState, ...state }),
- subscribe: derivedStore.subscribe,
+ ...store,
+ set: state => store.set({ ...initialState, ...state }),
actions,
}
}
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
new file mode 100644
index 0000000000..4f972b23c7
--- /dev/null
+++ b/packages/client/src/stores/components.js
@@ -0,0 +1,81 @@
+import { get, writable, derived } from "svelte/store"
+import Manifest from "manifest.json"
+import { findComponentById, findComponentPathById } from "../utils/components"
+import { devToolsStore } from "./devTools"
+import { screenStore } from "./screens"
+import { builderStore } from "./builder"
+
+const createComponentStore = () => {
+ const store = writable({})
+
+ const derivedStore = derived(
+ [store, builderStore, devToolsStore, screenStore],
+ ([$store, $builderState, $devToolsState, $screenState]) => {
+ // Avoid any of this logic if we aren't in the builder preview
+ if (!$builderState.inBuilder && !$devToolsState.visible) {
+ return {}
+ }
+
+ // Derive the selected component instance and definition
+ let asset
+ const { layout, screen, previewType, selectedComponentId } = $builderState
+ if ($builderState.inBuilder) {
+ asset = previewType === "layout" ? layout : screen
+ } else {
+ asset = $screenState.activeScreen
+ }
+ const component = findComponentById(asset?.props, selectedComponentId)
+ const prefix = "@budibase/standard-components/"
+ const type = component?._component?.replace(prefix, "")
+ const definition = type ? Manifest[type] : null
+
+ // Derive the selected component path
+ const path =
+ findComponentPathById(asset?.props, selectedComponentId) || []
+
+ return {
+ selectedComponentInstance: $store[selectedComponentId],
+ selectedComponent: component,
+ selectedComponentDefinition: definition,
+ selectedComponentPath: path?.map(component => component._id),
+ mountedComponents: Object.keys($store).length,
+ currentAsset: asset,
+ }
+ }
+ )
+
+ const registerInstance = (id, instance) => {
+ store.update(state => ({
+ ...state,
+ [id]: instance,
+ }))
+ }
+
+ const unregisterInstance = id => {
+ store.update(state => {
+ delete state[id]
+ return state
+ })
+ }
+
+ const isComponentRegistered = id => {
+ return get(store)[id] != null
+ }
+
+ const getComponentById = id => {
+ const asset = get(derivedStore).currentAsset
+ return findComponentById(asset?.props, id)
+ }
+
+ return {
+ ...derivedStore,
+ actions: {
+ registerInstance,
+ unregisterInstance,
+ isComponentRegistered,
+ getComponentById,
+ },
+ }
+}
+
+export const componentStore = createComponentStore()
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
new file mode 100644
index 0000000000..6d631080ab
--- /dev/null
+++ b/packages/client/src/stores/devTools.js
@@ -0,0 +1,47 @@
+import { get } from "svelte/store"
+import { createLocalStorageStore } from "@budibase/frontend-core"
+import { appStore } from "./app"
+import { initialise } from "./initialise"
+import { authStore } from "./auth"
+
+const initialState = {
+ visible: false,
+ allowSelection: false,
+ role: null,
+}
+
+const createDevToolStore = () => {
+ const localStorageKey = `${get(appStore).appId}.devTools`
+ const store = createLocalStorageStore(localStorageKey, initialState)
+
+ const setVisible = visible => {
+ store.update(state => ({
+ ...state,
+ visible: visible,
+ }))
+ }
+
+ const setAllowSelection = allowSelection => {
+ store.update(state => ({
+ ...state,
+ allowSelection,
+ }))
+ }
+
+ const changeRole = async role => {
+ store.update(state => ({
+ ...state,
+ role: role === "self" ? null : role,
+ }))
+ // location.reload()
+ await authStore.actions.fetchUser()
+ await initialise()
+ }
+
+ return {
+ subscribe: store.subscribe,
+ actions: { setVisible, setAllowSelection, changeRole },
+ }
+}
+
+export const devToolsStore = createDevToolStore()
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index ddd052fb4e..280a32e069 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -9,6 +9,8 @@ export { confirmationStore } from "./confirmation"
export { peekStore } from "./peek"
export { stateStore } from "./state"
export { themeStore } from "./theme"
+export { devToolsStore } from "./devTools"
+export { componentStore } from "./components"
export { uploadStore } from "./uploads.js"
export { rowSelectionStore } from "./rowSelection.js"
// Context stores are layered and duplicated, so it is not a singleton
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 702f662f8a..9635f2b5a0 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -66,7 +66,6 @@ const createScreenStore = () => {
}
let children = []
findChildrenByType(component, type, children)
- console.log(children)
return children
},
}
diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js
index 14760252a9..38eaf77885 100644
--- a/packages/client/src/utils/componentProps.js
+++ b/packages/client/src/utils/componentProps.js
@@ -107,3 +107,21 @@ export const propsUseBinding = (props, bindingKey) => {
}
return false
}
+
+/**
+ * Gets the definition of this component's settings from the manifest
+ */
+export const getSettingsDefinition = definition => {
+ if (!definition) {
+ return []
+ }
+ let settings = []
+ definition.settings?.forEach(setting => {
+ if (setting.section) {
+ settings = settings.concat(setting.settings || [])
+ } else {
+ settings.push(setting)
+ }
+ })
+ return settings
+}
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 761e953ff7..35379ba6d8 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -78,6 +78,9 @@
app.
+