Convert portal theme store to TS

packages/builder/src/stores/portal/theme.js

@@ -1,37 +0,0 @@
-import { createLocalStorageStore } from "@budibase/frontend-core"
-import { derived } from "svelte/store"
-import {
-  DefaultBuilderTheme,
-  ensureValidTheme,
-  getThemeClassNames,
-  ThemeOptions,
-  ThemeClassPrefix,
-} from "@budibase/shared-core"
-
-export const getThemeStore = () => {
-  const themeElement = document.documentElement
-  const initialValue = {
-    theme: DefaultBuilderTheme,
-  }
-  const store = createLocalStorageStore("bb-theme", initialValue)
-  const derivedStore = derived(store, $store => ({
-    ...$store,
-    theme: ensureValidTheme($store.theme, DefaultBuilderTheme),
-  }))
-
-  // Update theme class when store changes
-  derivedStore.subscribe(({ theme }) => {
-    const classNames = getThemeClassNames(theme).split(" ")
-    ThemeOptions.forEach(option => {
-      const className = `${ThemeClassPrefix}${option.id}`
-      themeElement.classList.toggle(className, classNames.includes(className))
-    })
-  })
-
-  return {
-    ...store,
-    subscribe: derivedStore.subscribe,
-  }
-}
-
-export const themeStore = getThemeStore()

packages/builder/src/stores/portal/theme.ts

@@ -0,0 +1,45 @@
+import { derived, Writable } from "svelte/store"
+import {
+  DefaultBuilderTheme,
+  ensureValidTheme,
+  getThemeClassNames,
+  ThemeOptions,
+  ThemeClassPrefix,
+} from "@budibase/shared-core"
+import { Theme } from "@budibase/types"
+import { DerivedBudiStore, PersistenceType } from "../BudiStore"
+
+interface ThemeState {
+  theme: Theme
+}
+
+class ThemeStore extends DerivedBudiStore<ThemeState, ThemeState> {
+  constructor() {
+    const makeDerivedStore = (store: Writable<ThemeState>) => {
+      return derived(store, $store => ({
+        ...$store,
+        theme: ensureValidTheme($store.theme, DefaultBuilderTheme),
+      }))
+    }
+    super({ theme: DefaultBuilderTheme }, makeDerivedStore, {
+      persistence: {
+        key: "bb-theme",
+        type: PersistenceType.LOCAL,
+      },
+    })
+
+    // Update theme class when store changes
+    this.subscribe(({ theme }) => {
+      const classNames = getThemeClassNames(theme).split(" ")
+      ThemeOptions.forEach(option => {
+        const className = `${ThemeClassPrefix}${option.id}`
+        document.documentElement.classList.toggle(
+          className,
+          classNames.includes(className)
+        )
+      })
+    })
+  }
+}
+
+export const themeStore = new ThemeStore()