Add PoC of using a custom component inside client library

packages/client/src/components/ClientApp.svelte

@@ -85,8 +85,18 @@
       builderStore.actions.notifyLoaded()
     }
   })
+
+  // TODO: remove. this is a test to render the first custom component
+  console.log(window["##BUDIBASE_CUSTOM_COMPONENTS##"]?.[0])
+  const custom = window["##BUDIBASE_CUSTOM_COMPONENTS##"]?.[0]?.Component
 </script>
 
+{#if custom}
+  <div style="padding: 20px;">
+    <svelte:component this={custom} />
+  </div>
+{/if}
+
 {#if dataLoaded}
   <div
     id="spectrum-root"

packages/client/src/index.js

@@ -3,6 +3,12 @@ import { builderStore, appStore, devToolsStore } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
 
+// Provide svelte and svelte/internal as globals for custom components
+import * as svelte from "svelte"
+import * as internal from "svelte/internal"
+window.svelte_internal = internal
+window.svelte = svelte
+
 // Initialise spectrum icons
 loadSpectrumIcons()
 

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -83,6 +83,11 @@
   </script>
   <script type="application/javascript" src={clientLibPath}>
   </script>
+  <!-- Custom components need inserted after the core client library -->
+  <!-- But before loadBudibase is called -->
+  <script
+    type="application/javascript"
+    src="https://cdn.kingston.dev/plugin.min.js"></script>
   <script type="application/javascript">
     if (window.loadBudibase) {
       window.loadBudibase()