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}">` + }) + .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 }}