Client bundle as esm

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

@@ -8,7 +8,7 @@ import * as objectStore from "../objectStore"
 
 export async function clientLibraryPath(appId: string) {
   const oldClient = `${objectStore.sanitizeKey(appId)}/budibase-client.js`
-  const newClient = `${objectStore.sanitizeKey(appId)}/budibase-client.new.js`
+  const newClient = `${objectStore.sanitizeKey(appId)}/budibase-client.esm.js`
   if (!(await features.isEnabled(FeatureFlag.USE_DYNAMIC_LOADING))) {
     return oldClient
   } else {
@@ -20,7 +20,7 @@ export async function clientLibraryPath(appId: string) {
   }
 }
 export function client3rdPartyLibrary(appId: string, file: string) {
-  return `${objectStore.sanitizeKey(appId)}/_dependencies/${file}`
+  return `${objectStore.sanitizeKey(appId)}/${file}`
 }
 
 /**
@@ -43,11 +43,11 @@ export async function clientLibraryCDNUrl(appId: string, version: string) {
   }
 }
 
-export async function clientLibraryUrl(appId: string, version: string) {
-  return `/api/assets/client?${await getClientCacheKey(appId, version)}`
+export async function clientLibraryUrl(workspaceId: string, version: string) {
+  return `/api/assets/${workspaceId}/client?${await getClientCacheKey(workspaceId, version)}`
 }
 
-export async function getClientCacheKey(appId: string, version: string) {
+export async function getClientCacheKey(workspaceId: string, version: string) {
   let tenantId,
     qsParams: {
       appId: string
@@ -59,7 +59,7 @@ export async function getClientCacheKey(appId: string, version: string) {
     tenantId = getTenantId()
   } finally {
     qsParams = {
-      appId,
+      appId: workspaceId,
       version,
     }
   }

packages/backend-core/src/objectStore/buckets/tests/clientLibraryPath.spec.ts

@@ -51,13 +51,13 @@ describe("clientLibraryPath", () => {
 
       const result = await clientLibraryPath("app_123")
 
-      expect(result).toBe("app_123/budibase-client.new.js")
+      expect(result).toBe("app_123/budibase-client.esm.js")
       expect(mockIsEnabled).toHaveBeenCalledWith(
         FeatureFlag.USE_DYNAMIC_LOADING
       )
       expect(mockObjectExists).toHaveBeenCalledWith(
         "prod-budi-app-assets",
-        "app_123/budibase-client.new.js"
+        "app_123/budibase-client.esm.js"
       )
     })
 
@@ -72,7 +72,7 @@ describe("clientLibraryPath", () => {
       )
       expect(mockObjectExists).toHaveBeenCalledWith(
         "prod-budi-app-assets",
-        "app_123/budibase-client.new.js"
+        "app_123/budibase-client.esm.js"
       )
     })
   })

packages/bbui/src/Markdown/SpectrumMDE.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import EasyMDE from "easymde"
+  import type EasyMDE from "easymde"
   import "easymde/dist/easymde.min.css"
-  import { onMount } from "svelte"
+  import { onDestroy, onMount } from "svelte"
 
   export let height: string | null = null
   export let scroll: boolean = true
@@ -13,8 +13,9 @@
 
   let element: HTMLTextAreaElement | undefined = undefined
 
-  onMount(() => {
+  onMount(async () => {
     height = height || "200px"
+    const { default: EasyMDE } = await import("easymde")
     mde = new EasyMDE({
       element,
       spellChecker: false,
@@ -24,11 +25,10 @@
       minHeight: scroll ? undefined : height,
       ...easyMDEOptions,
     })
+  })
 
-    // Revert the editor when we unmount
-    return () => {
-      mde?.toTextArea()
-    }
+  onDestroy(() => {
+    mde?.toTextArea()
   })
 
   $: styleString = getStyleString(fullScreenOffset)

packages/client/package.json

@@ -53,9 +53,7 @@
         "dependsOn": [
           {
             "projects": [
-              "@budibase/shared-core",
-              "@budibase/string-templates",
-              "@budibase/types"
+              "@budibase/string-templates"
             ],
             "target": "build"
           }
@@ -65,8 +63,7 @@
         "dependsOn": [
           {
             "projects": [
-              "@budibase/string-templates",
-              "@budibase/types"
+              "@budibase/string-templates"
             ],
             "target": "build"
           }

packages/client/scripts/build.mjs

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 
-import { libDependencies } from "@budibase/types"
 import { rmSync } from "fs"
 import { build } from "vite"
 
@@ -21,55 +20,24 @@ async function buildAll() {
     mode: isDev ? "development" : "production",
   }
 
-  for (const dep of Object.values(libDependencies)) {
-    console.log(`Building ${dep.sourceFile} dependency...`)
-    await build({
-      ...config,
-      configFile: false,
-      build: {
-        ...config.build,
-        lib: {
-          entry: `./src/dependencies/${dep.sourceFile}`,
-          formats: ["iife"],
-          name: dep.globalProperty,
-          fileName: () => dep.outFile,
-        },
-        rollupOptions: {
-          context: "window",
-        },
-        outDir: "dist/",
-        emptyOutDir: false,
-      },
-    })
-  }
-
   console.log("Building new client...")
-  process.env.BUNDLE_VERSION = "new"
+  process.env.BUNDLE_VERSION = "esm"
   await build({
     ...config,
-    define: {
-      ...config.define,
-      __USE_DYNAMIC_LOADING__: true,
-    },
-
     build: {
       ...config.build,
       lib: {
         ...config.build.lib,
-        fileName: () => "budibase-client.new.js",
+        fileName: () => "budibase-client.esm.js",
       },
     },
     configFile: "./vite.config.mjs",
   })
 
   console.log("Building old client...")
-  process.env.BUNDLE_VERSION = "old"
+  process.env.BUNDLE_VERSION = "iife"
   await build({
     ...config,
-    define: {
-      ...config.define,
-      __USE_DYNAMIC_LOADING__: false,
-    },
     configFile: "./vite.config.mjs",
   })
 }

packages/client/src/components/Component.svelte

@@ -264,7 +264,28 @@
 
     // Pull definition and constructor
     const component = instance._component
-    constructor = componentStore.actions.getComponentConstructor(component)
+    const result = componentStore.actions.getComponentConstructor(component)
+    const isPromise = value => typeof value?.then === "function"
+    if (isPromise(result)) {
+      constructor = null
+      const currentInstanceKey = instanceKey
+      result
+        .then(ResolvedComponent => {
+          if (currentInstanceKey !== lastInstanceKey) {
+            return
+          }
+          constructor = ResolvedComponent
+        })
+        .catch(error => {
+          if (currentInstanceKey !== lastInstanceKey) {
+            return
+          }
+          console.error("Failed to resolve component constructor", error)
+          constructor = null
+        })
+    } else {
+      constructor = result
+    }
     definition = componentStore.actions.getComponentDefinition(component)
     if (!definition) {
       return

packages/client/src/components/app/charts/ApexChart.svelte

@@ -1,7 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
   import { getContext } from "svelte"
-  import { loadCharts } from "../../../utils/dependencies"
   import { cloneDeep } from "./utils"
 
   const { styleable, builderStore } = getContext("sdk")
@@ -31,7 +30,7 @@
     try {
       await chart?.destroy()
 
-      const ApexCharts = await loadCharts()
+      const { default: ApexCharts } = await import("apexcharts")
 
       chart = new ApexCharts(newChartElement, optionsCopy)
       currentType = optionsCopy?.xaxis?.type

packages/client/src/components/app/componentLoaders.js

@@ -0,0 +1,86 @@
+const componentLoaders = {
+  placeholder: () => import("./Placeholder.svelte"),
+  container: () => import("./container/Container.svelte"),
+  dataprovider: () => import("./DataProvider.svelte"),
+  divider: () => import("./Divider.svelte"),
+  screenslot: () => import("./ScreenSlot.svelte"),
+  button: () => import("./Button.svelte"),
+  buttongroup: () => import("./ButtonGroup.svelte"),
+  repeater: () => import("./Repeater.svelte"),
+  layout: () => import("./Layout.svelte"),
+  link: () => import("./Link.svelte"),
+  image: () => import("./Image.svelte"),
+  embed: () => import("./Embed.svelte"),
+  icon: () => import("./Icon.svelte"),
+  iconphosphor: () => import("./IconV2.svelte"),
+  backgroundimage: () => import("./BackgroundImage.svelte"),
+  daterangepicker: () => import("./DateRangePicker.svelte"),
+  cardstat: () => import("./CardStat.svelte"),
+  spectrumcard: () => import("./SpectrumCard.svelte"),
+  tag: () => import("./Tag.svelte"),
+  embeddedmap: () => import("./embedded-map/EmbeddedMap.svelte"),
+  sidepanel: () => import("./SidePanel.svelte"),
+  modal: () => import("./Modal.svelte"),
+  gridblock: () => import("./GridBlock.svelte"),
+  textv2: () => import("./Text.svelte"),
+  filter: () => import("./filter/Filter.svelte"),
+  accordion: () => import("./Accordion.svelte"),
+  singlerowprovider: () => import("./SingleRowProvider.svelte"),
+  codegenerator: () => import("./CodeGenerator.svelte"),
+  // Charts
+  bar: () => import("./charts/BarChart.svelte"),
+  line: () => import("./charts/LineChart.svelte"),
+  pie: () => import("./charts/PieChart.svelte"),
+  donut: () => import("./charts/DonutChart.svelte"),
+  area: () => import("./charts/AreaChart.svelte"),
+  candlestick: () => import("./charts/CandleStickChart.svelte"),
+  histogram: () => import("./charts/HistogramChart.svelte"),
+  // Forms
+  form: () => import("./forms/Form.svelte"),
+  fieldgroup: () => import("./forms/FieldGroup.svelte"),
+  stringfield: () => import("./forms/StringField.svelte"),
+  numberfield: () => import("./forms/NumberField.svelte"),
+  bigintfield: () => import("./forms/BigIntField.svelte"),
+  optionsfield: () => import("./forms/OptionsField.svelte"),
+  multifieldselect: () => import("./forms/MultiFieldSelect.svelte"),
+  booleanfield: () => import("./forms/BooleanField.svelte"),
+  longformfield: () => import("./forms/LongFormField.svelte"),
+  datetimefield: () => import("./forms/DateTimeField.svelte"),
+  attachmentfield: () => import("./forms/AttachmentField.svelte"),
+  attachmentsinglefield: () => import("./forms/AttachmentSingleField.svelte"),
+  relationshipfield: () => import("./forms/RelationshipField.svelte"),
+  passwordfield: () => import("./forms/PasswordField.svelte"),
+  formstep: () => import("./forms/FormStep.svelte"),
+  jsonfield: () => import("./forms/JSONField.svelte"),
+  s3upload: () => import("./forms/S3Upload.svelte"),
+  codescanner: () => import("./forms/CodeScannerField.svelte"),
+  signaturesinglefield: () => import("./forms/SignatureField.svelte"),
+  bbreferencefield: () => import("./forms/BBReferenceField.svelte"),
+  bbreferencesinglefield: () => import("./forms/BBReferenceSingleField.svelte"),
+  ratingfield: () => import("./forms/RatingField.svelte"),
+  // Blocks
+  cardsblock: () => import("./blocks/CardsBlock.svelte"),
+  repeaterblock: () => import("./blocks/RepeaterBlock.svelte"),
+  formblock: () => import("./blocks/form/FormBlock.svelte"),
+  chartblock: () => import("./blocks/ChartBlock.svelte"),
+  rowexplorer: () => import("./blocks/RowExplorer.svelte"),
+  multistepformblock: () => import("./blocks/MultiStepFormblock.svelte"),
+  // Dynamic filter
+  dynamicfilter: () => import("./dynamic-filter/DynamicFilter.svelte"),
+  // PDF
+  pdf: () => import("./pdf/PDF.svelte"),
+  pdftable: () => import("./pdf/PDFTable.svelte"),
+  // Deprecated
+  table: () => import("./deprecated/table/Table.svelte"),
+  tableblock: () => import("./deprecated/TableBlock.svelte"),
+  navigation: () => import("./deprecated/Navigation.svelte"),
+  cardhorizontal: () => import("./deprecated/CardHorizontal.svelte"),
+  stackedlist: () => import("./deprecated/StackedList.svelte"),
+  card: () => import("./deprecated/Card.svelte"),
+  section: () => import("./deprecated/Section.svelte"),
+  text: () => import("./deprecated/Text.svelte"),
+  heading: () => import("./deprecated/Heading.svelte"),
+  markdownviewer: () => import("./deprecated/MarkdownViewer.svelte"),
+}
+
+export default componentLoaders

packages/client/src/components/app/forms/CodeScanner.svelte

@@ -1,14 +1,13 @@
 <script>
   import {
-    ModalContent,
-    Modal,
-    Icon,
     ActionButton,
-    Input,
     Button,
+    Icon,
+    Input,
+    Modal,
+    ModalContent,
     StatusLight,
   } from "@budibase/bbui"
-  import { loadQRCode } from "../../../utils/dependencies"
   import { createEventDispatcher } from "svelte"
 
   export let value
@@ -55,7 +54,7 @@
       html5QrCode.stop()
     }
 
-    const Html5Qrcode = await loadQRCode()
+    const { Html5Qrcode } = await import("html5-qrcode")
     html5QrCode = new Html5Qrcode("reader")
 
     return new Promise(resolve => {
@@ -80,7 +79,7 @@
   }
 
   const checkCamera = async () => {
-    const Html5Qrcode = await loadQRCode()
+    const { Html5Qrcode } = await import("html5-qrcode")
 
     return new Promise(resolve => {
       Html5Qrcode.getCameras()