Fetch and use app theme in real client apps

packages/client/src/api/app.js

@@ -3,8 +3,8 @@ import API from "./api"
 /**
  * Fetches screen definition for an app.
  */
-export const fetchAppDefinition = async appId => {
+export const fetchAppPackage = async appId => {
   return await API.get({
-    url: `/api/applications/${appId}/definition`,
+    url: `/api/applications/${appId}/appPackage`,
   })
 }

packages/client/src/components/ClientApp.svelte

@@ -13,6 +13,7 @@
     authStore,
     routeStore,
     builderStore,
+    appStore,
   } from "../store"
   import { TableNames, ActionTypes } from "../constants"
   import SettingsBar from "./preview/SettingsBar.svelte"
@@ -59,7 +60,8 @@
     }
   }
 
-  $: themeClass = $builderStore.theme || "spectrum--light"
+  $: themeClass =
+    $builderStore.theme || $appStore.application?.theme || "spectrum--light"
 </script>
 
 {#if dataLoaded && $screenStore.activeLayout}

packages/client/src/index.js

@@ -1,5 +1,5 @@
 import ClientApp from "./components/ClientApp.svelte"
-import { builderStore } from "./store"
+import { builderStore, appStore } from "./store"
 
 let app
 
@@ -7,7 +7,6 @@ const loadBudibase = () => {
   // Update builder store with any builder flags
   builderStore.set({
     inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
-    appId: window["##BUDIBASE_APP_ID##"],
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
@@ -16,6 +15,10 @@ const loadBudibase = () => {
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
   })
 
+  // Set app ID - this window flag is set by both the preview and the real
+  // server rendered app HTML
+  appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"])
+
   // Create app if one hasn't been created yet
   if (!app) {
     app = new ClientApp({

packages/client/src/store/app.js

@@ -0,0 +1,27 @@
+import * as API from "../api"
+import { get, writable } from "svelte/store"
+
+const createAppStore = () => {
+  const store = writable({})
+
+  // Fetches the app definition including screens, layouts and theme
+  const fetchAppDefinition = async () => {
+    const appDefinition = await API.fetchAppPackage(get(store).appId)
+    store.set(appDefinition)
+  }
+
+  // Sets the initial app ID
+  const setAppID = id => {
+    store.update(state => {
+      state.appId = id
+      return state
+    })
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: { setAppID, fetchAppDefinition },
+  }
+}
+
+export const appStore = createAppStore()

packages/client/src/store/index.js

@@ -1,4 +1,5 @@
 export { authStore } from "./auth"
+export { appStore } from "./app"
 export { notificationStore } from "./notification"
 export { routeStore } from "./routes"
 export { screenStore } from "./screens"

packages/client/src/store/initialise.js

@@ -1,7 +1,7 @@
 import { routeStore } from "./routes"
-import { screenStore } from "./screens"
+import { appStore } from "./app"
 
 export async function initialise() {
   await routeStore.actions.fetchRoutes()
-  await screenStore.actions.fetchScreens()
+  await appStore.actions.fetchAppDefinition()
 }

packages/client/src/store/screens.js

@@ -1,16 +1,12 @@
-import { writable, derived, get } from "svelte/store"
+import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
-import * as API from "../api"
+import { appStore } from "./app"
 
 const createScreenStore = () => {
-  const config = writable({
-    screens: [],
-    layouts: [],
-  })
   const store = derived(
-    [config, routeStore, builderStore],
-    ([$config, $routeStore, $builderStore]) => {
+    [appStore, routeStore, builderStore],
+    ([$appStore, $routeStore, $builderStore]) => {
       let activeLayout
       let activeScreen
       if ($builderStore.inBuilder) {
@@ -21,7 +17,7 @@ const createScreenStore = () => {
         activeLayout = { props: { _component: "screenslot" } }
 
         // Find the correct screen by matching the current route
-        const { screens, layouts } = $config
+        const { screens, layouts } = $appStore
         if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
@@ -37,17 +33,8 @@ const createScreenStore = () => {
     }
   )
 
-  const fetchScreens = async () => {
-    const appDefinition = await API.fetchAppDefinition(get(builderStore).appId)
-    config.set({
-      screens: appDefinition.screens,
-      layouts: appDefinition.layouts,
-    })
-  }
-
   return {
     subscribe: store.subscribe,
-    actions: { fetchScreens },
   }
 }