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/backend-core/src/objectStore/objectStore.ts b/packages/backend-core/src/objectStore/objectStore.ts
index bdbab63767..064cc630d8 100644
--- a/packages/backend-core/src/objectStore/objectStore.ts
+++ b/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)
       })
diff --git a/packages/frontend-core/assets/covanta.png b/packages/frontend-core/assets/covanta.png
deleted file mode 100644
index 541075763e..0000000000
Binary files a/packages/frontend-core/assets/covanta.png and /dev/null differ
diff --git a/packages/frontend-core/assets/reworld.png b/packages/frontend-core/assets/reworld.png
new file mode 100644
index 0000000000..ef89da5588
Binary files /dev/null and b/packages/frontend-core/assets/reworld.png differ
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 @@
-<script>
+<script lang="ts">
   export let sideNav = false
   export let hideDevTools = false
   export let hideFooter = false
diff --git a/packages/frontend-core/src/components/Testimonial.svelte b/packages/frontend-core/src/components/Testimonial.svelte
index d65185d143..60cd7fef72 100644
--- 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,
     },
     {
diff --git a/packages/server/jest.config.ts b/packages/server/jest.config.ts
index 6341c8e5bd..6fadec6e29 100644
--- 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: {
diff --git a/packages/server/package.json b/packages/server/package.json
index fd448629e8..b73d3f5f99 100644
--- 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",
diff --git a/packages/server/scripts/svelteTransformer.js b/packages/server/scripts/svelteTransformer.js
deleted file mode 100644
index 6b67971581..0000000000
--- a/packages/server/scripts/svelteTransformer.js
+++ /dev/null
@@ -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 }
-  },
-}
diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index 8b5c61e875..97406d677d 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<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, {
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index b88b738f90..ccaaf22ad1 100644
--- 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 {
diff --git a/packages/server/src/automations/tests/steps/executeQuery.spec.ts b/packages/server/src/automations/tests/steps/executeQuery.spec.ts
index 64dd808b85..dff3580b7e 100644
--- a/packages/server/src/automations/tests/steps/executeQuery.spec.ts
+++ b/packages/server/src/automations/tests/steps/executeQuery.spec.ts
@@ -6,6 +6,7 @@ import {
 } from "../../../integrations/tests/utils"
 import { Knex } from "knex"
 import { generator } from "@budibase/backend-core/tests"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 
 const descriptions = datasourceDescribe({
   exclude: [DatabaseName.MONGODB, DatabaseName.SQS],
@@ -41,39 +42,34 @@ if (descriptions.length) {
       })
 
       it("should be able to execute a query", async () => {
-        let res = await setup.runStep(
-          config,
-          setup.actions.EXECUTE_QUERY.stepId,
-          {
-            query: { queryId: query._id },
-          }
-        )
-        expect(res.response).toEqual([{ a: "string", b: 1 }])
-        expect(res.success).toEqual(true)
+        const { steps } = await createAutomationBuilder(config)
+          .onAppAction()
+          .executeQuery({ query: { queryId: query._id! } })
+          .test({ fields: {} })
+
+        expect(steps[0].outputs.response).toEqual([{ a: "string", b: 1 }])
+        expect(steps[0].outputs.success).toEqual(true)
       })
 
       it("should handle a null query value", async () => {
-        let res = await setup.runStep(
-          config,
-          setup.actions.EXECUTE_QUERY.stepId,
-          {
-            query: null,
-          }
-        )
-        expect(res.response.message).toEqual("Invalid inputs")
-        expect(res.success).toEqual(false)
+        const { steps } = await createAutomationBuilder(config)
+          .onAppAction()
+          // @ts-expect-error - intentionally passing null
+          .executeQuery({ query: { queryId: null } })
+          .test({ fields: {} })
+
+        expect(steps[0].outputs.response).toStartWith("Error:")
+        expect(steps[0].outputs.success).toEqual(false)
       })
 
       it("should handle an error executing a query", async () => {
-        let res = await setup.runStep(
-          config,
-          setup.actions.EXECUTE_QUERY.stepId,
-          {
-            query: { queryId: "wrong_id" },
-          }
-        )
-        expect(res.response).toBeDefined()
-        expect(res.success).toEqual(false)
+        const { steps } = await createAutomationBuilder(config)
+          .onAppAction()
+          .executeQuery({ query: { queryId: "wrong_id" } })
+          .test({ fields: {} })
+
+        expect(steps[0].outputs.response).toStartWith("Error:")
+        expect(steps[0].outputs.success).toEqual(false)
       })
     }
   )
diff --git a/packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts b/packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts
index 6ab0f32b65..7452239dfa 100644
--- a/packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts
+++ b/packages/server/src/automations/tests/steps/sendSmtpEmail.spec.ts
@@ -19,7 +19,7 @@ function generateResponse(to: string, from: string) {
   }
 }
 
-import * as setup from "../utilities"
+import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 
 describe("test the outgoing webhook action", () => {
   const config = new TestConfiguration()
@@ -60,13 +60,14 @@ describe("test the outgoing webhook action", () => {
       ...invite,
     }
     let resp = generateResponse(inputs.to, inputs.from)
-    const res = await setup.runStep(
-      config,
-      setup.actions.SEND_EMAIL_SMTP.stepId,
-      inputs
-    )
-    expect(res.response).toEqual(resp)
-    expect(res.success).toEqual(true)
+
+    const { steps } = await createAutomationBuilder(config)
+      .onAppAction()
+      .sendSmtpEmail(inputs)
+      .test({ fields: {} })
+
+    expect(steps[0].outputs.response).toEqual(resp)
+    expect(steps[0].outputs.success).toEqual(true)
     expect(workerRequests.sendSmtpEmail).toHaveBeenCalledTimes(1)
     expect(workerRequests.sendSmtpEmail).toHaveBeenCalledWith({
       to: "user1@example.com",
@@ -75,7 +76,11 @@ describe("test the outgoing webhook action", () => {
       contents: "testing",
       cc: "cc",
       bcc: "bcc",
-      invite,
+      invite: {
+        ...invite,
+        startTime: invite.startTime.toISOString(),
+        endTime: invite.endTime.toISOString(),
+      },
       automation: true,
       attachments: [
         { url: "attachment1", filename: "attachment1.txt" },
diff --git a/packages/server/src/automations/tests/triggers/appAction.spec.ts b/packages/server/src/automations/tests/triggers/appAction.spec.ts
new file mode 100644
index 0000000000..ab258434db
--- /dev/null
+++ b/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,
+      })
+    )
+  })
+})
diff --git a/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts b/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
index 835a177ea8..78fb05cf7e 100644
--- a/packages/server/src/automations/tests/utilities/AutomationTestBuilder.ts
+++ b/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) {
diff --git a/packages/server/src/automations/tests/utilities/index.ts b/packages/server/src/automations/tests/utilities/index.ts
index 400713dcbc..44f6d3b8ca 100644
--- a/packages/server/src/automations/tests/utilities/index.ts
+++ b/packages/server/src/automations/tests/utilities/index.ts
@@ -1,14 +1,7 @@
 import TestConfiguration from "../../../tests/utilities/TestConfiguration"
-import { context } from "@budibase/backend-core"
-import { BUILTIN_ACTION_DEFINITIONS, getAction } from "../../actions"
-import emitter from "../../../events/index"
+import { BUILTIN_ACTION_DEFINITIONS } from "../../actions"
 import env from "../../../environment"
-import {
-  Automation,
-  AutomationActionStepId,
-  AutomationData,
-  Datasource,
-} from "@budibase/types"
+import { Automation, AutomationData, Datasource } from "@budibase/types"
 import { Knex } from "knex"
 import { getQueue } from "../.."
 import { Job } from "bull"
@@ -41,36 +34,6 @@ export async function runInProd(fn: any) {
   }
 }
 
-export async function runStep(
-  config: TestConfiguration,
-  stepId: string,
-  inputs: any,
-  stepContext?: any
-) {
-  async function run() {
-    let step = await getAction(stepId as AutomationActionStepId)
-    expect(step).toBeDefined()
-    if (!step) {
-      throw new Error("No step found")
-    }
-    return step({
-      context: stepContext || {},
-      inputs,
-      appId: config ? config.getAppId() : "",
-      // don't really need an API key, mocked out usage quota, not being tested here
-      apiKey,
-      emitter,
-    })
-  }
-  if (config.appId) {
-    return context.doInContext(config?.appId, async () => {
-      return run()
-    })
-  } else {
-    return run()
-  }
-}
-
 /**
  * Capture all automation runs that occur during the execution of a function.
  * This function will wait for all messages to be processed before returning.
diff --git a/packages/server/svelte.config.js b/packages/server/svelte.config.js
new file mode 100644
index 0000000000..77aeada229
--- /dev/null
+++ b/packages/server/svelte.config.js
@@ -0,0 +1,5 @@
+const { vitePreprocess } = require("@sveltejs/vite-plugin-svelte")
+
+module.exports = {
+  preprocess: vitePreprocess(),
+}
diff --git a/packages/types/src/ui/BudibaseApp.ts b/packages/types/src/ui/BudibaseApp.ts
new file mode 100644
index 0000000000..3a2925bf20
--- /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
+  usedPlugins: Plugin[]
+  appMigrating?: boolean
+  showSkeletonLoader?: boolean
+  hideDevTools?: boolean
+  sideNav?: boolean
+  hideFooter?: boolean
+  nonce?: string
+}
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"
diff --git a/scripts/build.js b/scripts/build.js
index 0106421fe7..98fc7f1887 100755
--- 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
diff --git a/yarn.lock b/yarn.lock
index e0fd90c10a..b2ca6a0568 100644
--- 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"