Merge branch 'master' into fix-automation-loop-test-output

2025-02-12 15:14:44 +00:00 · 2025-02-12 15:14:44 +00:00 · 8656e9a5d0
parent 62f38b3202 e80db7b492
commit 8656e9a5d0
15 changed files with 142 additions and 78 deletions
--- 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",
--- a/packages/frontend-core/assets/covanta.png
+++ b/packages/frontend-core/assets/covanta.png
--- a/packages/frontend-core/assets/reworld.png
+++ b/packages/frontend-core/assets/reworld.png
--- a/packages/frontend-core/src/components/ClientAppSkeleton.svelte
+++ b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  export let sideNav = false
  export let hideDevTools = false
  export let hideFooter = false
--- a/packages/frontend-core/src/components/Testimonial.svelte
+++ b/packages/frontend-core/src/components/Testimonial.svelte
@ -1,15 +1,15 @@
 <script>
  import { Layout } from "@budibase/bbui"
  import Bulgaria from "../../assets/bulgaria.png"
-  import Covanta from "../../assets/covanta.png"
+  import Reworld from "../../assets/reworld.png"
  import Schnellecke from "../../assets/schnellecke.png"

  const testimonials = [
    {
-      text: "Budibase was the only solution that checked all the boxes for Covanta. Covanta expects to realize $3.2MM in savings due to the elimination of redundant data entry.",
+      text: "Budibase was the only solution that checked all the boxes for Reworld. Reworld expects to realize $3.2MM in savings due to the elimination of redundant data entry.",
      name: "Charles Link",
      role: "Senior Director, Data and Analytics",
-      image: Covanta,
+      image: Reworld,
      imageSize: 105,
    },
    {
--- a/packages/server/jest.config.ts
+++ b/packages/server/jest.config.ts
@ -21,7 +21,20 @@ const baseConfig: Config.InitialProjectOptions = {
  transform: {
    "^.+\\.ts?$": "@swc/jest",
    "^.+\\.js?$": "@swc/jest",
-    "^.+\\.svelte?$": "<rootDir>/scripts/svelteTransformer.js",
+    "^.+\\.svelte$": [
+      "jest-chain-transform", // https://github.com/svelteness/svelte-jester/issues/166
+      {
+        transformers: [
+          [
+            "svelte-jester",
+            {
+              preprocess: true,
+            },
+          ],
+          "@swc/jest",
+        ],
+      },
+    ],
  },
  transformIgnorePatterns: ["/node_modules/(?!svelte/).*"],
  moduleNameMapper: {
--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -139,6 +139,7 @@
    "@babel/core": "^7.22.5",
    "@babel/preset-env": "7.16.11",
    "@jest/types": "^29.6.3",
+    "@sveltejs/vite-plugin-svelte": "1.4.0",
    "@swc/core": "1.3.71",
    "@swc/jest": "0.2.27",
    "@types/archiver": "6.0.2",
@ -164,6 +165,7 @@
    "docker-compose": "0.23.17",
    "ioredis-mock": "8.9.0",
    "jest": "29.7.0",
+    "jest-chain-transform": "^0.0.8",
    "jest-extended": "^4.0.2",
    "jest-openapi": "0.14.2",
    "nock": "13.5.4",
--- a/packages/server/scripts/svelteTransformer.js
+++ b/packages/server/scripts/svelteTransformer.js
@ -1,11 +0,0 @@
-const { compile } = require("svelte/compiler")
-const { transformSync } = require("@babel/core")
-
-module.exports = {
-  process(sourceText) {
-    const { js } = compile(sourceText, { css: "injected", generate: "ssr" })
-    const { code } = transformSync(js.code, { babelrc: true })
-
-    return { code: code }
-  },
-}
--- 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<void, ServeAppResponse>) {
    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 props: BudibaseAppProps = {
        title: branding?.platformTitle || `${appInfo.name}`,
        showSkeletonLoader: appInfo.features?.skeletonLoader ?? false,
        hideDevTools,
@ -205,21 +211,17 @@ export const serveApp = async function (ctx: UserCtx<void, ServeAppResponse>) {
        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({ props })
      const appHbs = loadHandlebarsFile(appHbsPath)
      ctx.body = await processString(appHbs, {
        head,
@ -235,9 +237,10 @@ export const serveApp = async function (ctx: UserCtx<void, ServeAppResponse>) {
    }
  } catch (error) {
    if (!env.isJest()) {
-      const { head, html, css } = AppComponent.render({
-        title: branding?.metaTitle,
-        metaTitle: branding?.metaTitle,
+      const props: BudibaseAppProps = {
+        usedPlugins: [],
+        title: branding?.metaTitle || "",
+        metaTitle: branding?.metaTitle || "",
        metaImage:
          branding?.metaImageUrl ||
          "https://res.cloudinary.com/daog6scxm/image/upload/v1698759482/meta-images/plain-branded-meta-image-coral_ocxmgu.png",
@ -246,7 +249,8 @@ export const serveApp = async function (ctx: UserCtx<void, ServeAppResponse>) {
          branding.faviconUrl !== ""
            ? await objectStore.getGlobalFileUrl("settings", "faviconUrl")
            : "",
-      })
+      }
+      const { head, html, css } = AppComponent.render({ props })

      const appHbs = loadHandlebarsFile(appHbsPath)
      ctx.body = await processString(appHbs, {
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@ -1,23 +1,8 @@
-<script>
+<script lang="ts">
  import ClientAppSkeleton from "@budibase/frontend-core/src/components/ClientAppSkeleton.svelte"
+  import type { BudibaseAppProps } from "@budibase/types"

-  export let title = ""
-  export let favicon = ""
-
-  export let metaImage = ""
-  export let metaTitle = ""
-  export let metaDescription = ""
-
-  export let clientLibPath
-  export let usedPlugins
-  export let appMigrating
-
-  export let showSkeletonLoader = false
-  export let hideDevTools
-  export let sideNav
-  export let hideFooter
-
-  export let nonce
+  export let props: BudibaseAppProps
 </script>

 <svelte:head>
@ -28,27 +13,27 @@
  />

  <!-- Primary Meta Tags -->
-  <meta name="title" content={metaTitle} />
-  <meta name="description" content={metaDescription} />
+  <meta name="title" content={props.metaTitle} />
+  <meta name="description" content={props.metaDescription} />

  <!-- Opengraph Meta Tags -->
  <meta property="og:site_name" content="Budibase" />
-  <meta property="og:title" content={metaTitle} />
-  <meta property="og:description" content={metaDescription} />
+  <meta property="og:title" content={props.metaTitle} />
+  <meta property="og:description" content={props.metaDescription} />
  <meta property="og:type" content="website" />
-  <meta property="og:image" content={metaImage} />
+  <meta property="og:image" content={props.metaImage} />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:site" content="@budibase" />
-  <meta property="twitter:image" content={metaImage} />
-  <meta property="twitter:image:alt" content={metaTitle} />
-  <meta property="twitter:title" content={metaTitle} />
-  <meta property="twitter:description" content={metaDescription} />
+  <meta property="twitter:image" content={props.metaImage} />
+  <meta property="twitter:image:alt" content={props.metaTitle} />
+  <meta property="twitter:title" content={props.metaTitle} />
+  <meta property="twitter:description" content={props.metaDescription} />

-  <title>{title}</title>
-  {#if favicon !== ""}
-    <link rel="icon" type="image/png" href={favicon} />
+  <title>{props.title}</title>
+  {#if props.favicon !== ""}
+    <link rel="icon" type="image/png" href={props.favicon} />
  {:else}
    <link rel="icon" type="image/png" href="/builder/bblogo.png" />
  {/if}
@ -105,11 +90,15 @@
 </svelte:head>

 <body id="app">
-  {#if showSkeletonLoader}
-    <ClientAppSkeleton {hideDevTools} {sideNav} {hideFooter} />
+  {#if props.showSkeletonLoader}
+    <ClientAppSkeleton
+      hideDevTools={props.hideDevTools}
+      sideNav={props.sideNav}
+      hideFooter={props.hideFooter}
+    />
  {/if}
  <div id="error">
-    {#if clientLibPath}
+    {#if props.clientLibPath}
      <h1>There was an error loading your app</h1>
      <h2>
        The Budibase client library could not be loaded. Try republishing your
@ -120,24 +109,24 @@
      <p />
    {/if}
  </div>
-  <script type="application/javascript" {nonce}>
+  <script type="application/javascript" nonce={props.nonce}>
    window.INIT_TIME = Date.now()
  </script>
-  {#if appMigrating}
-    <script type="application/javascript" {nonce}>
+  {#if props.appMigrating}
+    <script type="application/javascript" nonce={props.nonce}>
      window.MIGRATING_APP = true
    </script>
  {/if}
-  <script type="application/javascript" src={clientLibPath}>
+  <script type="application/javascript" src={props.clientLibPath}>
  </script>
  <!-- Custom components need inserted after the core client library -->
  <!-- But before loadBudibase is called -->
-  {#if usedPlugins?.length}
-    {#each usedPlugins as plugin}
+  {#if props.usedPlugins?.length}
+    {#each props.usedPlugins as plugin}
      <script type="application/javascript" src={plugin.jsUrl}></script>
    {/each}
  {/if}
-  <script type="application/javascript" {nonce}>
+  <script type="application/javascript" nonce={props.nonce}>
    if (window.loadBudibase) {
      window.loadBudibase()
    } else {
--- a/packages/server/svelte.config.js
+++ b/packages/server/svelte.config.js
@ -0,0 +1,5 @@
+const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte")
+
+module.exports = {
+  preprocess: vitePreprocess(),
+}
--- a/packages/types/src/ui/BudibaseApp.ts
+++ 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
+  usedPlugins: Plugin[]
+  appMigrating?: boolean
+  showSkeletonLoader?: boolean
+  hideDevTools?: boolean
+  sideNav?: boolean
+  hideFooter?: boolean
+  nonce?: string
+}
--- 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"
--- a/scripts/build.js
+++ b/scripts/build.js
@ -7,7 +7,8 @@ const { cp, readdir, copyFile, mkdir } = require("node:fs/promises")
 const path = require("path")

 const { build } = require("esbuild")
-const { compile } = require("svelte/compiler")
+const { compile, preprocess } = require("svelte/compiler")
+const sveltePreprocess = require("svelte-preprocess")
 const { loadTsConfig } = require("load-tsconfig")

 const {
@ -25,7 +26,14 @@ const svelteCompilePlugin = {
      const dir = path.dirname(args.path)

      try {
-        const { js } = compile(source, { css: "injected", generate: "ssr" })
+        const preprocessed = await preprocess(
+          source,
+          sveltePreprocess({ filename: args.path })
+        )
+        const { js } = compile(preprocessed.code, {
+          css: "injected",
+          generate: "ssr",
+        })

        return {
          // The code placed in the generated file
--- a/yarn.lock
+++ b/yarn.lock
@ -2778,9 +2778,9 @@
    through2 "^2.0.0"

 "@budibase/pro@npm:@budibase/pro@latest":
-  version "3.2.47"
-  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-3.2.47.tgz#150d7b16b14932d03c84bdb0e6d570d490c28a5c"
-  integrity sha512-UeTIq7yzMUK6w/akUsRafoD/Kif6PXv4d7K1arn8GTMjwFm9QYu2hg1YkQ+duNdwyZ/GEPlEAV5SYK+NDgtpdA==
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/@budibase/pro/-/pro-3.4.6.tgz#62b6ee13a015b98d4768dc7821f468f8177da3e9"
+  integrity sha512-MC3P5SMokmqbjejZMlNM6z7NB9o5H6hZ++yVvbyThniBPYfuDc2ssa1HNwwcuNE3uRLhcxcKe8CY/0SbFgn51g==
  dependencies:
    "@anthropic-ai/sdk" "^0.27.3"
    "@budibase/backend-core" "*"
@ -13739,6 +13739,11 @@ jake@^10.8.5:
    filelist "^1.0.1"
    minimatch "^3.0.4"

+jest-chain-transform@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/jest-chain-transform/-/jest-chain-transform-0.0.8.tgz#cbb4d3aef8d02678b1852968a9b0c861f75eef5a"
+  integrity sha512-AELTTzYJ34WrmQKAbxUGT+xqnAHu0/XJZhahYNGvBVUhnAayjm1QmT45DQjwEbQPQp7gn6CXzu6rZA03riwBuw==
+
 jest-changed-files@^29.7.0:
  version "29.7.0"
  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.7.0.tgz#1c06d07e77c78e1585d020424dedc10d6e17ac3a"
@ -19730,7 +19735,16 @@ string-length@^4.0.1:
    char-regex "^1.0.2"
    strip-ansi "^6.0.0"

-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -19822,7 +19836,7 @@ stringify-object@^3.2.1:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -19836,6 +19850,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
  dependencies:
    ansi-regex "^4.1.0"

+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@ -20070,6 +20091,11 @@ svelte-portal@^2.2.1:
  resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-2.2.1.tgz#b1d7bed78e56318db245996beb5483d8de6b9740"
  integrity sha512-uF7is5sM4aq5iN7QF/67XLnTUvQCf2iiG/B1BHTqLwYVY1dsVmTeXZ/LeEyU6dLjApOQdbEG9lkqHzxiQtOLEQ==

+svelte-preprocess@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz#fdc1f9dc41b6f22bf8b1f059e9f21eaaae181eeb"
+  integrity sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==
+
 svelte-spa-router@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz#720ef0cc9a4af33b155812496545c7999483878c"
@ -21583,7 +21609,7 @@ worker-farm@1.7.0:
  dependencies:
    errno "~0.1.7"

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -21601,6 +21627,15 @@ wrap-ansi@^5.1.0:
    string-width "^3.0.0"
    strip-ansi "^5.0.0"

+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"