From 8047ff99c6a7685b84d432d82ee80ef5cd9b2468 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 2 Jan 2025 10:59:14 +0000 Subject: [PATCH 1/6] Flags / Layout / Preview stores to TS --- packages/builder/src/stores/builder/flags.js | 27 ------ packages/builder/src/stores/builder/flags.ts | 41 +++++++++ .../stores/builder/{layouts.js => layouts.ts} | 20 +++-- .../builder/src/stores/builder/preview.js | 80 ----------------- .../builder/src/stores/builder/preview.ts | 90 +++++++++++++++++++ 5 files changed, 144 insertions(+), 114 deletions(-) delete mode 100644 packages/builder/src/stores/builder/flags.js create mode 100644 packages/builder/src/stores/builder/flags.ts rename packages/builder/src/stores/builder/{layouts.js => layouts.ts} (77%) delete mode 100644 packages/builder/src/stores/builder/preview.js create mode 100644 packages/builder/src/stores/builder/preview.ts diff --git a/packages/builder/src/stores/builder/flags.js b/packages/builder/src/stores/builder/flags.js deleted file mode 100644 index 21236ffb01..0000000000 --- a/packages/builder/src/stores/builder/flags.js +++ /dev/null @@ -1,27 +0,0 @@ -import { writable } from "svelte/store" -import { API } from "@/api" - -export function createFlagsStore() { - const { subscribe, set } = writable({}) - - const actions = { - fetch: async () => { - const flags = await API.getFlags() - set(flags) - }, - updateFlag: async (flag, value) => { - await API.updateFlag(flag, value) - await actions.fetch() - }, - toggleUiFeature: async feature => { - await API.toggleUiFeature(feature) - }, - } - - return { - subscribe, - ...actions, - } -} - -export const flags = createFlagsStore() diff --git a/packages/builder/src/stores/builder/flags.ts b/packages/builder/src/stores/builder/flags.ts new file mode 100644 index 0000000000..cff3ac4d12 --- /dev/null +++ b/packages/builder/src/stores/builder/flags.ts @@ -0,0 +1,41 @@ +import { get } from "svelte/store" +import { API } from "@/api" +import { GetUserFlagsResponse } from "@budibase/types" +import { BudiStore } from "../BudiStore" + +interface FlagsState { + flags: GetUserFlagsResponse +} + +const INITIAL_FLAGS_STATE: FlagsState = { + flags: {}, +} + +export class FlagsStore extends BudiStore { + constructor() { + super(INITIAL_FLAGS_STATE) + + this.fetch = this.fetch.bind(this) + this.updateFlag = this.updateFlag.bind(this) + this.toggleUiFeature = this.toggleUiFeature.bind(this) + } + + async fetch() { + const flags = await API.getFlags() + this.update(state => ({ + ...state, + flags, + })) + } + + async updateFlag(flag: string, value: any) { + await API.updateFlag(flag, value) + await this.fetch() + } + + async toggleUiFeature(feature: string) { + await API.toggleUiFeature(feature) + } +} + +export const flags = new FlagsStore() diff --git a/packages/builder/src/stores/builder/layouts.js b/packages/builder/src/stores/builder/layouts.ts similarity index 77% rename from packages/builder/src/stores/builder/layouts.js rename to packages/builder/src/stores/builder/layouts.ts index 7617e203f0..0fd8efc8c0 100644 --- a/packages/builder/src/stores/builder/layouts.js +++ b/packages/builder/src/stores/builder/layouts.ts @@ -2,13 +2,19 @@ import { derived, get } from "svelte/store" import { componentStore } from "@/stores/builder" import { API } from "@/api" import { BudiStore } from "../BudiStore" +import { Layout } from "@budibase/types" -export const INITIAL_LAYOUT_STATE = { +interface LayoutState { + layouts: Layout[] + selectedLayoutId: string | null +} + +export const INITIAL_LAYOUT_STATE: LayoutState = { layouts: [], selectedLayoutId: null, } -export class LayoutStore extends BudiStore { +export class LayoutStore extends BudiStore { constructor() { super(INITIAL_LAYOUT_STATE) @@ -22,14 +28,14 @@ export class LayoutStore extends BudiStore { this.store.set({ ...INITIAL_LAYOUT_STATE }) } - syncAppLayouts(pkg) { + syncAppLayouts(pkg: { layouts: Layout[] }) { this.update(state => ({ ...state, layouts: [...pkg.layouts], })) } - select(layoutId) { + select(layoutId: string) { // Check this layout exists const state = get(this.store) const componentState = get(componentStore) @@ -48,18 +54,18 @@ export class LayoutStore extends BudiStore { // Select new layout this.update(state => { - state.selectedLayoutId = layout._id + state.selectedLayoutId = layout._id! return state }) componentStore.select(layout.props?._id) } - async deleteLayout(layout) { + async deleteLayout(layout: Layout) { if (!layout?._id) { return } - await API.deleteLayout(layout._id, layout._rev) + await API.deleteLayout(layout._id, layout._rev!) this.update(state => { state.layouts = state.layouts.filter(x => x._id !== layout._id) return state diff --git a/packages/builder/src/stores/builder/preview.js b/packages/builder/src/stores/builder/preview.js deleted file mode 100644 index 4923185ee7..0000000000 --- a/packages/builder/src/stores/builder/preview.js +++ /dev/null @@ -1,80 +0,0 @@ -import { writable, get } from "svelte/store" - -const INITIAL_PREVIEW_STATE = { - previewDevice: "desktop", - previewEventHandler: null, - showPreview: false, - selectedComponentContext: null, -} - -export const createPreviewStore = () => { - const store = writable({ - ...INITIAL_PREVIEW_STATE, - }) - - const setDevice = device => { - store.update(state => { - state.previewDevice = device - return state - }) - } - - // Potential evt names "eject-block", "dragging-new-component" - const sendEvent = (name, payload) => { - const { previewEventHandler } = get(store) - previewEventHandler?.(name, payload) - } - - const registerEventHandler = handler => { - store.update(state => { - state.previewEventHandler = handler - return state - }) - } - - const startDrag = component => { - sendEvent("dragging-new-component", { - dragging: true, - component, - }) - } - - const stopDrag = () => { - sendEvent("dragging-new-component", { - dragging: false, - }) - } - - //load preview? - const showPreview = isVisible => { - store.update(state => { - state.showPreview = isVisible - return state - }) - } - - const setSelectedComponentContext = context => { - store.update(state => { - state.selectedComponentContext = context - return state - }) - } - - const requestComponentContext = () => { - sendEvent("request-context") - } - - return { - subscribe: store.subscribe, - setDevice, - sendEvent, //may not be required - registerEventHandler, - startDrag, - stopDrag, - showPreview, - setSelectedComponentContext, - requestComponentContext, - } -} - -export const previewStore = createPreviewStore() diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts new file mode 100644 index 0000000000..fe14c02535 --- /dev/null +++ b/packages/builder/src/stores/builder/preview.ts @@ -0,0 +1,90 @@ +import { get } from "svelte/store" +import { BudiStore } from "../BudiStore" + +type PreviewDevice = "desktop" | "tablet" | "mobile" +type PreviewEventHandler = (name: string, payload?: any) => void +type ComponentContext = Record + +interface PreviewState { + previewDevice: PreviewDevice + previewEventHandler: PreviewEventHandler | null + showPreview: boolean + selectedComponentContext: ComponentContext | null +} + +const INITIAL_PREVIEW_STATE: PreviewState = { + previewDevice: "desktop", + previewEventHandler: null, + showPreview: false, + selectedComponentContext: null, +} + +export class PreviewStore extends BudiStore { + constructor() { + super(INITIAL_PREVIEW_STATE) + + this.setDevice = this.setDevice.bind(this) + this.sendEvent = this.sendEvent.bind(this) + this.registerEventHandler = this.registerEventHandler.bind(this) + this.startDrag = this.startDrag.bind(this) + this.stopDrag = this.stopDrag.bind(this) + this.showPreview = this.showPreview.bind(this) + this.setSelectedComponentContext = + this.setSelectedComponentContext.bind(this) + this.requestComponentContext = this.requestComponentContext.bind(this) + } + + setDevice(device: PreviewDevice) { + this.update(state => ({ + ...state, + previewDevice: device, + })) + } + + // Potential evt names "eject-block", "dragging-new-component" + sendEvent(name: string, payload?: any) { + const { previewEventHandler } = get(this.store) + previewEventHandler?.(name, payload) + } + + registerEventHandler(handler: PreviewEventHandler) { + this.update(state => ({ + ...state, + previewEventHandler: handler, + })) + } + + startDrag(component: any) { + this.sendEvent("dragging-new-component", { + dragging: true, + component, + }) + } + + stopDrag() { + this.sendEvent("dragging-new-component", { + dragging: false, + }) + } + + //load preview? + showPreview(isVisible: boolean) { + this.update(state => ({ + ...state, + showPreview: isVisible, + })) + } + + setSelectedComponentContext(context: ComponentContext) { + this.update(state => ({ + ...state, + selectedComponentContext: context, + })) + } + + requestComponentContext() { + this.sendEvent("request-context") + } +} + +export const previewStore = new PreviewStore() From 7c36d8dac56a64f7b612f99af016f862d346daac Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 2 Jan 2025 11:04:30 +0000 Subject: [PATCH 2/6] convert selectedLayout derived store --- .../builder/src/stores/builder/layouts.ts | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/stores/builder/layouts.ts b/packages/builder/src/stores/builder/layouts.ts index 0fd8efc8c0..41e61e3611 100644 --- a/packages/builder/src/stores/builder/layouts.ts +++ b/packages/builder/src/stores/builder/layouts.ts @@ -1,7 +1,7 @@ import { derived, get } from "svelte/store" import { componentStore } from "@/stores/builder" import { API } from "@/api" -import { BudiStore } from "../BudiStore" +import { BudiStore, DerivedBudiStore } from "../BudiStore" import { Layout } from "@budibase/types" interface LayoutState { @@ -9,6 +9,10 @@ interface LayoutState { selectedLayoutId: string | null } +interface DerivedLayoutState extends LayoutState { + selectedLayout: Layout | null +} + export const INITIAL_LAYOUT_STATE: LayoutState = { layouts: [], selectedLayoutId: null, @@ -62,10 +66,10 @@ export class LayoutStore extends BudiStore { } async deleteLayout(layout: Layout) { - if (!layout?._id) { + if (!layout?._id || !layout?._rev) { return } - await API.deleteLayout(layout._id, layout._rev!) + await API.deleteLayout(layout._id, layout._rev) this.update(state => { state.layouts = state.layouts.filter(x => x._id !== layout._id) return state @@ -75,6 +79,24 @@ export class LayoutStore extends BudiStore { export const layoutStore = new LayoutStore() -export const selectedLayout = derived(layoutStore, $store => { - return $store.layouts?.find(layout => layout._id === $store.selectedLayoutId) -}) +export class SelectedLayoutStore extends DerivedBudiStore< + LayoutState, + DerivedLayoutState +> { + constructor(layoutStore: LayoutStore) { + const makeDerivedStore = () => { + return derived(layoutStore, $store => { + return { + ...$store, + selectedLayout: + $store.layouts?.find( + layout => layout._id === $store.selectedLayoutId + ) || null, + } + }) + } + super(INITIAL_LAYOUT_STATE, makeDerivedStore) + } +} + +export const selectedLayout = new SelectedLayoutStore(layoutStore) From 11e55bfbd72d653adea51e3ba3ed4026b0922c5f Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 2 Jan 2025 11:19:20 +0000 Subject: [PATCH 3/6] move types --- packages/builder/src/stores/builder/preview.ts | 2 +- packages/types/src/ui/stores/index.ts | 1 + packages/types/src/ui/stores/preview.ts | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 packages/types/src/ui/stores/preview.ts diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts index fe14c02535..0ec2811e15 100644 --- a/packages/builder/src/stores/builder/preview.ts +++ b/packages/builder/src/stores/builder/preview.ts @@ -1,7 +1,7 @@ import { get } from "svelte/store" import { BudiStore } from "../BudiStore" +import { PreviewDevice } from "@budibase/types" -type PreviewDevice = "desktop" | "tablet" | "mobile" type PreviewEventHandler = (name: string, payload?: any) => void type ComponentContext = Record diff --git a/packages/types/src/ui/stores/index.ts b/packages/types/src/ui/stores/index.ts index 8dae68862e..1b82a06388 100644 --- a/packages/types/src/ui/stores/index.ts +++ b/packages/types/src/ui/stores/index.ts @@ -1,3 +1,4 @@ export * from "./integration" export * from "./automations" export * from "./grid" +export * from "./preview" diff --git a/packages/types/src/ui/stores/preview.ts b/packages/types/src/ui/stores/preview.ts new file mode 100644 index 0000000000..4d09366ff5 --- /dev/null +++ b/packages/types/src/ui/stores/preview.ts @@ -0,0 +1 @@ +export type PreviewDevice = "desktop" | "tablet" | "mobile" From 2f1b7811c3eebb265f3717be94350106fff37277 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 2 Jan 2025 11:25:22 +0000 Subject: [PATCH 4/6] unused import --- packages/builder/src/stores/builder/flags.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/stores/builder/flags.ts b/packages/builder/src/stores/builder/flags.ts index cff3ac4d12..6d2150f49b 100644 --- a/packages/builder/src/stores/builder/flags.ts +++ b/packages/builder/src/stores/builder/flags.ts @@ -1,4 +1,3 @@ -import { get } from "svelte/store" import { API } from "@/api" import { GetUserFlagsResponse } from "@budibase/types" import { BudiStore } from "../BudiStore" From 4ee99f807c47ff442cccfddac2d784a8bccd85cb Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 2 Jan 2025 12:22:46 +0000 Subject: [PATCH 5/6] revert derivedstore implementation --- packages/builder/src/stores/builder/flags.ts | 1 + .../builder/src/stores/builder/layouts.ts | 30 +++---------------- .../builder/src/stores/builder/preview.ts | 2 +- 3 files changed, 6 insertions(+), 27 deletions(-) diff --git a/packages/builder/src/stores/builder/flags.ts b/packages/builder/src/stores/builder/flags.ts index 6d2150f49b..cff3ac4d12 100644 --- a/packages/builder/src/stores/builder/flags.ts +++ b/packages/builder/src/stores/builder/flags.ts @@ -1,3 +1,4 @@ +import { get } from "svelte/store" import { API } from "@/api" import { GetUserFlagsResponse } from "@budibase/types" import { BudiStore } from "../BudiStore" diff --git a/packages/builder/src/stores/builder/layouts.ts b/packages/builder/src/stores/builder/layouts.ts index 41e61e3611..af7b17fcc7 100644 --- a/packages/builder/src/stores/builder/layouts.ts +++ b/packages/builder/src/stores/builder/layouts.ts @@ -1,7 +1,7 @@ import { derived, get } from "svelte/store" import { componentStore } from "@/stores/builder" import { API } from "@/api" -import { BudiStore, DerivedBudiStore } from "../BudiStore" +import { BudiStore } from "../BudiStore" import { Layout } from "@budibase/types" interface LayoutState { @@ -9,10 +9,6 @@ interface LayoutState { selectedLayoutId: string | null } -interface DerivedLayoutState extends LayoutState { - selectedLayout: Layout | null -} - export const INITIAL_LAYOUT_STATE: LayoutState = { layouts: [], selectedLayoutId: null, @@ -79,24 +75,6 @@ export class LayoutStore extends BudiStore { export const layoutStore = new LayoutStore() -export class SelectedLayoutStore extends DerivedBudiStore< - LayoutState, - DerivedLayoutState -> { - constructor(layoutStore: LayoutStore) { - const makeDerivedStore = () => { - return derived(layoutStore, $store => { - return { - ...$store, - selectedLayout: - $store.layouts?.find( - layout => layout._id === $store.selectedLayoutId - ) || null, - } - }) - } - super(INITIAL_LAYOUT_STATE, makeDerivedStore) - } -} - -export const selectedLayout = new SelectedLayoutStore(layoutStore) +export const selectedLayout = derived(layoutStore, $store => { + return $store.layouts?.find(layout => layout._id === $store.selectedLayoutId) +}) diff --git a/packages/builder/src/stores/builder/preview.ts b/packages/builder/src/stores/builder/preview.ts index 0ec2811e15..fe14c02535 100644 --- a/packages/builder/src/stores/builder/preview.ts +++ b/packages/builder/src/stores/builder/preview.ts @@ -1,7 +1,7 @@ import { get } from "svelte/store" import { BudiStore } from "../BudiStore" -import { PreviewDevice } from "@budibase/types" +type PreviewDevice = "desktop" | "tablet" | "mobile" type PreviewEventHandler = (name: string, payload?: any) => void type ComponentContext = Record From 6d95076d28373dbfe5a79a36a7ba5940771647fd Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Thu, 2 Jan 2025 12:59:25 +0000 Subject: [PATCH 6/6] lint --- packages/builder/src/stores/builder/flags.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/stores/builder/flags.ts b/packages/builder/src/stores/builder/flags.ts index cff3ac4d12..6d2150f49b 100644 --- a/packages/builder/src/stores/builder/flags.ts +++ b/packages/builder/src/stores/builder/flags.ts @@ -1,4 +1,3 @@ -import { get } from "svelte/store" import { API } from "@/api" import { GetUserFlagsResponse } from "@budibase/types" import { BudiStore } from "../BudiStore"