diff --git a/packages/client/src/components/preview/SettingsPicker.svelte b/packages/client/src/components/preview/SettingsPicker.svelte
index 8d7129b81..8b83729fd 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 0cabaec4a..b2dcfca26 100644
--- a/packages/client/src/stores/app.js
+++ b/packages/client/src/stores/app.js
@@ -1,8 +1,14 @@
import * as API from "../api"
import { get, writable } from "svelte/store"
+const initialState = {
+ appId: null,
+ isDevApp: false,
+ clientLoadTime: Date.now() - window.INIT_TIME,
+}
+
const createAppStore = () => {
- const store = writable({})
+ const store = writable(initialState)
// Fetches the app definition including screens, layouts and theme
const fetchAppDefinition = async () => {
@@ -12,8 +18,10 @@ const createAppStore = () => {
}
const appDefinition = await API.fetchAppPackage(appId)
store.set({
+ ...initialState,
...appDefinition,
appId: appDefinition?.application?.appId,
+ isDevApp: appId.startsWith("app_dev"),
})
}
diff --git a/packages/client/src/stores/auth.js b/packages/client/src/stores/auth.js
index 1fa4ae17b..2395b5153 100644
--- a/packages/client/src/stores/auth.js
+++ b/packages/client/src/stores/auth.js
@@ -1,5 +1,7 @@
import * as API from "../api"
import { writable } from "svelte/store"
+import { devToolsStore } from "./devTools"
+import { get } from "svelte/store"
const createAuthStore = () => {
const store = writable(null)
@@ -7,12 +9,16 @@ const createAuthStore = () => {
// Fetches the user object if someone is logged in and has reloaded the page
const fetchUser = async () => {
const user = await API.fetchSelf()
- store.set(user)
+ store.set({
+ ...user,
+ roleId: get(devToolsStore).role || user.roleId,
+ })
}
const logOut = async () => {
- window.document.cookie = `budibase:auth=; budibase:currentapp=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
- window.location = "/builder/auth/login"
+ console.log("LOG OUT")
+ // window.document.cookie = `budibase:auth=; budibase:currentapp=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`
+ // window.location = "/builder/auth/login"
}
return {
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 35fb3edae..a02888b5b 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 { pingEndUser } from "../api"
+import { devToolsStore } from "./devTools"
const dispatchEvent = (type, data = {}) => {
window.parent.postMessage({ type, data })
@@ -22,38 +21,19 @@ 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) => {
@@ -69,7 +49,7 @@ const createBuilderStore = () => {
pingEndUser()
},
setSelectedPath: path => {
- writableStore.update(state => ({ ...state, selectedPath: path }))
+ store.update(state => ({ ...state, selectedPath: path }))
},
moveComponent: (componentId, destinationComponentId, mode) => {
dispatchEvent("move-component", {
@@ -79,22 +59,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 000000000..af7aa5f0c
--- /dev/null
+++ b/packages/client/src/stores/components.js
@@ -0,0 +1,65 @@
+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(
+ [builderStore, devToolsStore, screenStore],
+ ([$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: get(store)[selectedComponentId],
+ selectedComponent: component,
+ selectedComponentDefinition: definition,
+ selectedComponentPath: path?.map(component => component._id),
+ }
+ }
+ )
+
+ const registerInstance = (id, instance) => {
+ store.update(state => ({
+ ...state,
+ [id]: instance,
+ }))
+ }
+
+ const unregisterInstance = id => {
+ store.update(state => {
+ delete state[id]
+ return state
+ })
+ }
+
+ return {
+ ...derivedStore,
+ actions: { registerInstance, unregisterInstance },
+ }
+}
+
+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 000000000..74d8c406d
--- /dev/null
+++ b/packages/client/src/stores/devTools.js
@@ -0,0 +1,47 @@
+import { get } from "svelte/store"
+import { localStorageStore } from "builder/src/builderStore/store/localStorage"
+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 = localStorageStore(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 02c848120..487d25ffb 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"
// Context stores are layered and duplicated, so it is not a singleton
export { createContextStore } from "./context"
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 702f662f8..9635f2b5a 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/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 761e953ff..35379ba6d 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.
+