From 144dec50eaa56ccf1854020e6b81a49ef8b2998e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:27:09 +0100
Subject: [PATCH] Insert script tags for custom component bundles to app
 preview

---
 .../[screenId]/_components/AppPreview.svelte  | 22 +++++++++++++++----
 .../[screenId]/_components/iframeTemplate.js  |  4 +---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 3c99c90d49..cd86d2e87c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -41,10 +41,23 @@
   }
 
   // Construct iframe template
-  $: template = iframeTemplate.replace(
-    /\{\{ CLIENT_LIB_PATH }}/,
-    $store.clientLibPath
-  )
+  $: pluginLinks = generatePluginLinks($store.usedPlugins)
+  $: template = iframeTemplate
+    .replace(/\{\{ CLIENT_LIB_PATH }}/, $store.clientLibPath)
+    .replace(/\{\{ PLUGINS }}/, pluginLinks)
+
+  const generatePluginLinks = plugins => {
+    if (!plugins?.length) {
+      return ""
+    }
+    return plugins
+      .map(plugin => {
+        // Split up like this as otherwise parsing fails because the script
+        // tags confuse svelte
+        return `<` + `script src="/plugins/${plugin.jsUrl}"></` + `script>`
+      })
+      .join("")
+  }
 
   const placeholderScreen = new Screen()
     .name("Screen Placeholder")
@@ -92,6 +105,7 @@
         ? [$store.componentToPaste?._id]
         : [],
     isBudibaseEvent: true,
+    usedPlugins: $store.usedPlugins,
   }
 
   // Refresh the preview when required
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
index 64a05c7246..2b24ee4fa0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
@@ -37,9 +37,7 @@ export default `
       }
     </style>
     <script src='{{ CLIENT_LIB_PATH }}'></script>
-    <script
-      type="application/javascript"
-      src="https://cdn.kingston.dev/plugin.min.js"></script>
+    {{ PLUGINS }}
     <script>
       function receiveMessage(event) { 
         if (!event.data) {