allow passing of persistance storage opt

packages/builder/src/stores/BudiStore.ts

@@ -1,7 +1,21 @@
 import { writable, Writable, Readable } from "svelte/store"
+import {
+  createLocalStorageStore,
+  createSessionStorageStore,
+} from "@budibase/frontend-core"
+
+export enum PersistenceType {
+  NONE = "none",
+  LOCAL = "local",
+  SESSION = "session",
+}
 
 interface BudiStoreOpts {
   debug?: boolean
+  persistence?: {
+    type: PersistenceType
+    key: string
+  }
 }
 
 export class BudiStore<T> {
@@ -11,7 +25,21 @@ export class BudiStore<T> {
   set: Writable<T>["set"]
 
   constructor(init: T, opts?: BudiStoreOpts) {
-    this.store = writable<T>(init)
+    if (opts?.persistence) {
+      switch (opts.persistence.type) {
+        case PersistenceType.LOCAL:
+          this.store = createLocalStorageStore(opts.persistence.key, init)
+          break
+        case PersistenceType.SESSION:
+          this.store = createSessionStorageStore(opts.persistence.key, init)
+          break
+        default:
+          this.store = writable<T>(init)
+      }
+    } else {
+      this.store = writable<T>(init)
+    }
+
     this.subscribe = this.store.subscribe
     this.update = this.store.update
     this.set = this.store.set

packages/builder/src/stores/builder/componentTreeNodes.ts

@@ -1,27 +1,25 @@
 import { get } from "svelte/store"
-import { createSessionStorageStore } from "@budibase/frontend-core"
 import { selectedScreen as selectedScreenStore } from "./screens"
 import { findComponentPath } from "helpers/components"
 import { Screen, Component } from "@budibase/types"
-import { BudiStore } from "stores/BudiStore"
+import { BudiStore, PersistenceType } from "stores/BudiStore"
 
 interface OpenNodesState {
   [key: string]: boolean
 }
 
 export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
-  private baseStore = createSessionStorageStore(
-    "openNodes",
-    {} as OpenNodesState
-  )
-
   constructor() {
-    super({})
+    super({} as OpenNodesState, {
-    this.subscribe = this.baseStore.subscribe
+      persistence: {
+        type: PersistenceType.SESSION,
+        key: "openNodes",
+      },
+    })
   }
 
   toggleNode(componentId: string) {
-    this.baseStore.update((openNodes: OpenNodesState) => {
+    this.update((openNodes: OpenNodesState) => {
       openNodes[`nodeOpen-${componentId}`] =
         !openNodes[`nodeOpen-${componentId}`]
 
@@ -30,7 +28,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
   }
 
   expandNodes(componentIds: string[]) {
-    this.baseStore.update((openNodes: OpenNodesState) => {
+    this.update((openNodes: OpenNodesState) => {
       const newNodes = Object.fromEntries(
         componentIds.map(id => [`nodeOpen-${id}`, true])
       )
@@ -40,7 +38,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
   }
 
   collapseNodes(componentIds: string[]) {
-    this.baseStore.update((openNodes: OpenNodesState) => {
+    this.update((openNodes: OpenNodesState) => {
       const newNodes = Object.fromEntries(
         componentIds.map(id => [`nodeOpen-${id}`, false])
       )
@@ -57,7 +55,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
 
     const componentIds = path.map((component: Component) => component._id)
 
-    this.baseStore.update((openNodes: OpenNodesState) => {
+    this.update((openNodes: OpenNodesState) => {
       const newNodes = Object.fromEntries(
         componentIds.map((id: string) => [`nodeOpen-${id}`, true])
       )
@@ -67,7 +65,7 @@ export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
   }
 
   isNodeExpanded(componentId: string): boolean {
-    const openNodes = get(this.baseStore)
+    const openNodes = get(this)
     return !!openNodes[`nodeOpen-${componentId}`]
   }
 }