From dab183cc8a47827f9a922bf25a0765e3e54e6761 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 1 Apr 2021 14:10:49 +0100
Subject: [PATCH] Use server-provided client lib URL in iframe preview

---
 packages/builder/src/builderStore/store/frontend.js       | 4 +++-
 .../design/AppPreview/CurrentItemPreview.svelte           | 8 +++++++-
 .../src/components/design/AppPreview/iframeTemplate.js    | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index ff551751da..be553066b9 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -42,6 +42,7 @@ const INITIAL_FRONTEND_STATE = {
   libraries: null,
   appId: "",
   routes: {},
+  clientLibPath: "",
 }
 
 export const getFrontendStore = () => {
@@ -49,7 +50,7 @@ export const getFrontendStore = () => {
 
   store.actions = {
     initialise: async pkg => {
-      const { layouts, screens, application } = pkg
+      const { layouts, screens, application, clientLibPath } = pkg
       const components = await fetchComponentLibDefinitions(application._id)
       store.update(state => ({
         ...state,
@@ -63,6 +64,7 @@ export const getFrontendStore = () => {
         screens,
         hasAppPackage: true,
         appInstance: application.instance,
+        clientLibPath,
       }))
       await hostingStore.actions.fetch()
 
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 45607431e4..cb56877ae3 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -18,6 +18,12 @@
     .instanceName("Content Placeholder")
     .json()
 
+  // Construct iframe template
+  $: template = iframeTemplate.replace(
+    /\{\{ CLIENT_LIB_PATH }}/,
+    $store.clientLibPath
+  )
+
   // Extract data to pass to the iframe
   $: {
     if ($store.currentFrontEndType === FrontendTypes.LAYOUT) {
@@ -76,7 +82,7 @@
     style="height: 100%; width: 100%"
     title="componentPreview"
     bind:this={iframe}
-    srcdoc={iframeTemplate} />
+    srcdoc={template} />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index 9ebc37cfa9..f646516df0 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@@ -13,7 +13,7 @@ export default `
         box-sizing: border-box;
       }
     </style>
-    <script src='/assets/budibase-client.js'></script>
+    <script src='{{ CLIENT_LIB_PATH }}'></script>
     <script>
       function receiveMessage(event) { 
         if (!event.data) {