From f0a1ea6f7e9f9b7908e9a6d497a0be2d3819e8ec Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Tue, 11 Feb 2025 22:20:35 +0000 Subject: [PATCH 1/6] Some work to fix plugins, attempting to type the server rendered file. --- .../src/api/controllers/static/index.ts | 22 ++++++++++--------- packages/types/src/ui/BudibaseApp.ts | 17 ++++++++++++++ packages/types/src/ui/index.ts | 1 + 3 files changed, 30 insertions(+), 10 deletions(-) create mode 100644 packages/types/src/ui/BudibaseApp.ts diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts index 8b5c61e875..25692c0df2 100644 --- a/packages/server/src/api/controllers/static/index.ts +++ b/packages/server/src/api/controllers/static/index.ts @@ -25,6 +25,7 @@ import sdk from "../../../sdk" import * as pro from "@budibase/pro" import { App, + BudibaseAppProps, Ctx, DocumentType, Feature, @@ -191,9 +192,14 @@ export const serveApp = async function (ctx: UserCtx) { const themeVariables = getThemeVariables(appInfo?.theme) if (!env.isJest()) { - const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins) - - const { head, html, css } = AppComponent.render({ + const plugins = await objectStore.enrichPluginURLs(appInfo.usedPlugins) + /* + * Server rendering in svelte sadly does not support type checking, the .render function + * always will just expect "any" when typing - so it is pointless for us to type the + * BudibaseApp.svelte file as we can never detect if the types are correct. To get around this + * I've created a type which expects what the app will expect to receive. + */ + const appProps: BudibaseAppProps = { title: branding?.platformTitle || `${appInfo.name}`, showSkeletonLoader: appInfo.features?.skeletonLoader ?? false, hideDevTools, @@ -205,21 +211,17 @@ export const serveApp = async function (ctx: UserCtx) { metaDescription: branding?.metaDescription || "", metaTitle: branding?.metaTitle || `${appInfo.name} - built with Budibase`, - production: env.isProd(), - appId, clientLibPath: objectStore.clientLibraryUrl(appId!, appInfo.version), usedPlugins: plugins, favicon: branding.faviconUrl !== "" ? await objectStore.getGlobalFileUrl("settings", "faviconUrl") : "", - logo: - config?.logoUrl !== "" - ? await objectStore.getGlobalFileUrl("settings", "logoUrl") - : "", appMigrating: needMigrations, nonce: ctx.state.nonce, - }) + } + + const { head, html, css } = AppComponent.render(appProps) const appHbs = loadHandlebarsFile(appHbsPath) ctx.body = await processString(appHbs, { head, diff --git a/packages/types/src/ui/BudibaseApp.ts b/packages/types/src/ui/BudibaseApp.ts new file mode 100644 index 0000000000..e0c01106ae --- /dev/null +++ b/packages/types/src/ui/BudibaseApp.ts @@ -0,0 +1,17 @@ +import { Plugin } from "../" + +export interface BudibaseAppProps { + title: string + favicon: string + metaImage: string + metaTitle: string + metaDescription: string + clientLibPath: string | undefined + usedPlugins: Plugin[] + appMigrating: boolean + showSkeletonLoader: boolean + hideDevTools: boolean + sideNav: boolean + hideFooter: boolean + nonce: string | undefined +} diff --git a/packages/types/src/ui/index.ts b/packages/types/src/ui/index.ts index 9c4ba93058..0b219f54fb 100644 --- a/packages/types/src/ui/index.ts +++ b/packages/types/src/ui/index.ts @@ -4,3 +4,4 @@ export * from "./components" export * from "./dataFetch" export * from "./datasource" export * from "./common" +export * from "./BudibaseApp" From 270e1e15eef37d817883ac99439ed14f99a0ce5e Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Tue, 11 Feb 2025 22:38:59 +0000 Subject: [PATCH 2/6] Updating BudibaseApp to use the new props type instead of parts being passed in individually. --- package.json | 1 + .../src/components/ClientAppSkeleton.svelte | 2 +- .../src/api/controllers/static/index.ts | 2 +- .../static/templates/BudibaseApp.svelte | 69 ++++++++----------- scripts/build.js | 12 +++- yarn.lock | 42 +++++++++-- 6 files changed, 78 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index c0b295728e..1475abadf9 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "eslint-plugin-jest": "28.9.0", "eslint-plugin-local-rules": "3.0.2", "eslint-plugin-svelte": "2.46.1", + "svelte-preprocess": "^6.0.3", "husky": "^8.0.3", "kill-port": "^1.6.1", "lerna": "7.4.2", diff --git a/packages/frontend-core/src/components/ClientAppSkeleton.svelte b/packages/frontend-core/src/components/ClientAppSkeleton.svelte index f867fccddb..0590ce7862 100644 --- a/packages/frontend-core/src/components/ClientAppSkeleton.svelte +++ b/packages/frontend-core/src/components/ClientAppSkeleton.svelte @@ -1,4 +1,4 @@ - @@ -28,27 +13,27 @@ /> - - + + - - + + - + - - - - + + + + - {title} - {#if favicon !== ""} - + {props.title} + {#if props.favicon !== ""} + {:else} {/if} @@ -105,11 +90,15 @@ - {#if showSkeletonLoader} - + {#if props.showSkeletonLoader} + {/if}
- {#if clientLibPath} + {#if props.clientLibPath}

There was an error loading your app

The Budibase client library could not be loaded. Try republishing your @@ -120,24 +109,24 @@

{/if}

- - {#if appMigrating} - {/if} - - {#if usedPlugins?.length} - {#each usedPlugins as plugin} + {#if props.usedPlugins?.length} + {#each props.usedPlugins as plugin} {/each} {/if} -