Merge branch 'master' into fix-yarn-manifest

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",

packages/backend-core/src/objectStore/objectStore.ts

@@ -424,7 +424,7 @@ export async function retrieveDirectory(bucketName: string, path: string) {
     stream.pipe(writeStream)
     writePromises.push(
       new Promise((resolve, reject) => {
-        stream.on("finish", resolve)
+        writeStream.on("finish", resolve)
         stream.on("error", reject)
         writeStream.on("error", reject)
       })

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

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,
     },
     {

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: {

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",

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 }
-  },
-}

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, {

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 {

packages/server/src/automations/tests/triggers/appAction.spec.ts

@@ -0,0 +1,45 @@
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import { captureAutomationResults } from "../utilities"
+import { Automation } from "@budibase/types"
+
+describe("app action trigger", () => {
+  const config = new TestConfiguration()
+  let automation: Automation
+
+  beforeAll(async () => {
+    await config.init()
+    automation = await createAutomationBuilder(config)
+      .onAppAction()
+      .serverLog({
+        text: "App action triggered",
+      })
+      .save()
+      .then(({ automation }) => automation)
+
+    await config.api.application.publish()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  it("should trigger when the app action is performed", async () => {
+    const jobs = await captureAutomationResults(automation, async () => {
+      await config.withProdApp(async () => {
+        await config.api.automation.trigger(automation._id!, {
+          fields: {},
+          timeout: 1000,
+        })
+      })
+    })
+
+    expect(jobs).toHaveLength(1)
+    expect(jobs[0].data.event).toEqual(
+      expect.objectContaining({
+        fields: {},
+        timeout: 1000,
+      })
+    )
+  })
+})

packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts

@@ -15,6 +15,8 @@ import {
   isDidNotTriggerResponse,
   SearchFilters,
   TestAutomationRequest,
+  TriggerAutomationRequest,
+  TriggerAutomationResponse,
 } from "@budibase/types"
 import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 import { automations } from "@budibase/shared-core"
@@ -207,6 +209,15 @@ class AutomationRunner<TStep extends AutomationTriggerStepId> {
 
     return response
   }
+
+  async trigger(
+    request: TriggerAutomationRequest
+  ): Promise<TriggerAutomationResponse> {
+    return await this.config.api.automation.trigger(
+      this.automation._id!,
+      request
+    )
+  }
 }
 
 export function createAutomationBuilder(config: TestConfiguration) {

packages/server/svelte.config.js

@@ -0,0 +1,5 @@
+const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte")
+
+module.exports = {
+  preprocess: vitePreprocess(),
+}

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
+}

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"

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

yarn.lock

@@ -13744,6 +13744,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"
@@ -20091,6 +20096,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"