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 `
}
-
+ {{ PLUGINS }}