From 3745cf6b465ff5e8b30ba370187613dff07a446a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 10 Aug 2022 12:04:58 +0100
Subject: [PATCH] Add PoC of using a custom component inside client library

---
 packages/client/src/components/ClientApp.svelte        | 10 ++++++++++
 packages/client/src/index.js                           |  6 ++++++
 .../controllers/static/templates/BudibaseApp.svelte    |  5 +++++
 3 files changed, 21 insertions(+)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 64b1712b89..c883dd4206 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/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"
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index b582dab4d3..c88afe59ba 100644
--- a/packages/client/src/index.js
+++ b/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()
 
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 35379ba6d8..3a2aca45cb 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/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()