From a38373a9392bb8a32e8b1277455d0baa821d6292 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:25:04 +0100
Subject: [PATCH 01/10] Attach correct content type to JS files when uploading
 to object store

---
 packages/backend-core/src/objectStore/index.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/backend-core/src/objectStore/index.ts b/packages/backend-core/src/objectStore/index.ts
index fe9be90659..774018b6df 100644
--- a/packages/backend-core/src/objectStore/index.ts
+++ b/packages/backend-core/src/objectStore/index.ts
@@ -178,6 +178,14 @@ export const streamUpload = async (
   const objectStore = ObjectStore(bucketName)
   await makeSureBucketExists(objectStore, bucketName)
 
+  // Set content type for certain known extensions
+  if (filename?.endsWith(".js")) {
+    extra = {
+      ...extra,
+      ContentType: "application/javascript",
+    }
+  }
+
   const params = {
     Bucket: sanitizeBucket(bucketName),
     Key: sanitizeKey(filename),

From 019b2181e808b8ad2ac96435438cafc0851b8ab8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:25:43 +0100
Subject: [PATCH 02/10] Remove static definition from store and properly handle
 custom components from API

---
 .../src/builderStore/store/frontend.js        | 35 ++++---------------
 1 file changed, 7 insertions(+), 28 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 7903210f53..16d16de8a2 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -90,36 +90,14 @@ export const getFrontendStore = () => {
 
       // Fetch component definitions.
       // Allow errors to propagate.
-      let components = await API.fetchComponentLibDefinitions(application.appId)
-
-      // Extend definitions with custom components
-      components["test"] = {
-        component: "test",
-        name: "Super cool component",
-        icon: "Text",
-        description: "A custom component",
-        showSettingsBar: false,
-        hasChildren: true,
-        settings: [
-          {
-            type: "text",
-            key: "text",
-            label: "Text",
-          },
-        ],
-        context: {
-          type: "static",
-          values: [
-            {
-              label: "Text prop",
-              key: "text",
-            },
-          ],
-        },
-      }
+      const components = await API.fetchComponentLibDefinitions(
+        application.appId
+      )
 
       // Filter out custom component keys so we can flag them
-      let customComponents = ["test"]
+      const customComponents = Object.keys(components).filter(name =>
+        name.startsWith("plugin/")
+      )
 
       // Reset store state
       store.update(state => ({
@@ -146,6 +124,7 @@ export const getFrontendStore = () => {
         version: application.version,
         revertableVersion: application.revertableVersion,
         navigation: application.navigation || {},
+        usedPlugins: application.usedPlugins || [],
       }))
 
       // Initialise backend stores

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 03/10] 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) {

From dff1cec9e0fbe08ce69bb797bb395a73ca432a4b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:27:51 +0100
Subject: [PATCH 04/10] Use full component names for custom components in
 client library

---
 packages/client/src/stores/components.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 2500ea2a41..a07c9da996 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -121,7 +121,8 @@ const createComponentStore = () => {
       if (!state.customComponentManifest) {
         state.customComponentManifest = {}
       }
-      state.customComponentManifest[schema.schema.name] = {
+      const componentName = `plugin/${schema.schema.name}/1.0.0`
+      state.customComponentManifest[componentName] = {
         schema,
         Component,
       }

From 66ab9dcc8b9ec0b33a2a1314fa10ea76c5a44eed Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:28:19 +0100
Subject: [PATCH 05/10] Add API endpoint to fetch list of plugins to core API

---
 packages/frontend-core/src/api/plugins.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/frontend-core/src/api/plugins.js b/packages/frontend-core/src/api/plugins.js
index 14b764d453..037ff5c2e7 100644
--- a/packages/frontend-core/src/api/plugins.js
+++ b/packages/frontend-core/src/api/plugins.js
@@ -10,4 +10,13 @@ export const buildPluginEndpoints = API => ({
       json: false,
     })
   },
+
+  /**
+   * Gets a list of all plugins
+   */
+  getPlugins: async () => {
+    return await API.get({
+      url: "/api/plugin",
+    })
+  },
 })

From 184936217c19bd4243980e5e21678bdc5983d65c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:28:59 +0100
Subject: [PATCH 06/10] SSR scripts for custom components into app HTML

---
 packages/server/src/api/controllers/static/index.ts   |  1 +
 .../controllers/static/templates/BudibaseApp.svelte   | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index b0e36b8943..18ac5e7837 100644
--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@@ -113,6 +113,7 @@ export const serveApp = async function (ctx: any) {
       production: env.isProd(),
       appId,
       clientLibPath: clientLibraryPath(appId, appInfo.version, ctx),
+      usedPlugins: appInfo.usedPlugins,
     })
 
     const appHbs = loadHandlebarsFile(`${__dirname}/templates/app.hbs`)
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 3a2aca45cb..4bf54f2c91 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -3,6 +3,7 @@
   export let favicon = ""
 
   export let clientLibPath
+  export let usedPlugins
 </script>
 
 <svelte:head>
@@ -85,9 +86,13 @@
   </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>
+  {#if usedPlugins?.length}
+    {#each usedPlugins as plugin}
+      <script
+        type="application/javascript"
+        src={`/plugins/${plugin.jsUrl}`}></script>
+    {/each}
+  {/if}
   <script type="application/javascript">
     if (window.loadBudibase) {
       window.loadBudibase()

From c9ab2c4fcbef6b0372a13b51ed3074d91ac29b5e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:29:51 +0100
Subject: [PATCH 07/10] Add fetch implementation for plugins and util for
 plugin params

---
 packages/server/src/api/controllers/plugin.ts | 12 ++++++++++--
 packages/server/src/db/utils.js               |  7 +++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/api/controllers/plugin.ts b/packages/server/src/api/controllers/plugin.ts
index f742c7f10c..f76d2871b0 100644
--- a/packages/server/src/api/controllers/plugin.ts
+++ b/packages/server/src/api/controllers/plugin.ts
@@ -1,7 +1,7 @@
 import { ObjectStoreBuckets } from "../../constants"
 import { extractPluginTarball } from "../../utilities/fileSystem"
 import { getGlobalDB } from "@budibase/backend-core/tenancy"
-import { generatePluginID } from "../../db/utils"
+import { generatePluginID, getPluginParams } from "../../db/utils"
 import { uploadDirectory } from "@budibase/backend-core/objectStore"
 
 export async function upload(ctx: any) {
@@ -67,6 +67,14 @@ export async function upload(ctx: any) {
   }
 }
 
-export async function fetch(ctx: any) {}
+export async function fetch(ctx: any) {
+  const db = getGlobalDB()
+  const response = await db.allDocs(
+    getPluginParams(null, {
+      include_docs: true,
+    })
+  )
+  ctx.body = response.rows.map((row: any) => row.doc)
+}
 
 export async function destroy(ctx: any) {}
diff --git a/packages/server/src/db/utils.js b/packages/server/src/db/utils.js
index ea3c0dadf2..ef40e05f7b 100644
--- a/packages/server/src/db/utils.js
+++ b/packages/server/src/db/utils.js
@@ -384,3 +384,10 @@ exports.getMultiIDParams = ids => {
     include_docs: true,
   }
 }
+
+/**
+ * Gets parameters for retrieving automations, this is a utility function for the getDocParams function.
+ */
+exports.getPluginParams = (pluginId = null, otherProps = {}) => {
+  return getDocParams(DocumentTypes.PLUGIN, pluginId, otherProps)
+}

From 6e668f32c67db09a179f3f90d712797775bd4dcf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:30:27 +0100
Subject: [PATCH 08/10] Export updateAppPackage function to be used elsewhere

---
 packages/server/src/api/controllers/application.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 57a18e7df3..fbc8e3ff98 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -547,7 +547,7 @@ export const sync = async (ctx: any, next: any) => {
   }
 }
 
-const updateAppPackage = async (appPackage: any, appId: any) => {
+export const updateAppPackage = async (appPackage: any, appId: any) => {
   return context.doInAppContext(appId, async () => {
     const db = context.getAppDB()
     const application = await db.get(DocumentTypes.APP_METADATA)

From ac6057480e64426774a9152a3fe9d52c659c9275 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:30:59 +0100
Subject: [PATCH 09/10] Enrich component definitions with custom components

---
 .../server/src/api/controllers/component.js   | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/server/src/api/controllers/component.js b/packages/server/src/api/controllers/component.js
index 2d0aaea23a..d43caf3fdd 100644
--- a/packages/server/src/api/controllers/component.js
+++ b/packages/server/src/api/controllers/component.js
@@ -1,6 +1,7 @@
-const { DocumentTypes } = require("../../db/utils")
+const { DocumentTypes, getPluginParams } = require("../../db/utils")
 const { getComponentLibraryManifest } = require("../../utilities/fileSystem")
 const { getAppDB } = require("@budibase/backend-core/context")
+const { getGlobalDB } = require("@budibase/backend-core/tenancy")
 
 exports.fetchAppComponentDefinitions = async function (ctx) {
   const db = getAppDB()
@@ -9,7 +10,6 @@ exports.fetchAppComponentDefinitions = async function (ctx) {
   let componentManifests = await Promise.all(
     app.componentLibraries.map(async library => {
       let manifest = await getComponentLibraryManifest(library)
-
       return {
         manifest,
         library,
@@ -30,5 +30,24 @@ exports.fetchAppComponentDefinitions = async function (ctx) {
       }
     }
   }
+
+  // Add custom components
+  const globalDB = getGlobalDB()
+  const response = await globalDB.allDocs(
+    getPluginParams(null, {
+      include_docs: true,
+    })
+  )
+  response.rows
+    .map(row => row.doc)
+    .filter(plugin => plugin.schema.type === "component")
+    .forEach(plugin => {
+      const fullComponentName = `plugin/${plugin.name}/${plugin.version}`
+      definitions[fullComponentName] = {
+        component: fullComponentName,
+        ...plugin.schema.schema,
+      }
+    })
+
   ctx.body = definitions
 }

From 301eecd2c3559d5813324f445a2824316a1b2340 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 11 Aug 2022 15:31:21 +0100
Subject: [PATCH 10/10] Detect custom component usages in screens and save
 metadata in app doc

---
 packages/server/src/api/controllers/screen.js | 66 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/screen.js b/packages/server/src/api/controllers/screen.js
index dd96493e5b..52a22f1073 100644
--- a/packages/server/src/api/controllers/screen.js
+++ b/packages/server/src/api/controllers/screen.js
@@ -1,7 +1,14 @@
-const { getScreenParams, generateScreenID } = require("../../db/utils")
+const {
+  getScreenParams,
+  generateScreenID,
+  getPluginParams,
+  DocumentTypes,
+} = require("../../db/utils")
 const { AccessController } = require("@budibase/backend-core/roles")
 const { getAppDB } = require("@budibase/backend-core/context")
 const { events } = require("@budibase/backend-core")
+const { getGlobalDB } = require("@budibase/backend-core/tenancy")
+import { updateAppPackage } from "./application"
 
 exports.fetch = async ctx => {
   const db = getAppDB()
@@ -32,6 +39,48 @@ exports.save = async ctx => {
 
   const response = await db.put(screen)
 
+  // Find any custom components being used
+  let pluginNames = []
+  findPlugins(screen.props, pluginNames)
+  if (pluginNames.length) {
+    const globalDB = getGlobalDB()
+    const pluginsResponse = await globalDB.allDocs(
+      getPluginParams(null, {
+        include_docs: true,
+      })
+    )
+    const requiredPlugins = pluginsResponse.rows
+      .map(row => row.doc)
+      .filter(plugin => {
+        return (
+          plugin.schema.type === "component" &&
+          pluginNames.includes(`plugin/${plugin.name}/${plugin.version}`)
+        )
+      })
+
+    // Update the app metadata
+    const application = await db.get(DocumentTypes.APP_METADATA)
+    let usedPlugins = application.usedPlugins || []
+
+    let pluginAdded = false
+    requiredPlugins.forEach(plugin => {
+      if (!usedPlugins.find(x => x._id === plugin._id)) {
+        pluginAdded = true
+        usedPlugins.push({
+          _id: plugin._id,
+          name: plugin.name,
+          version: plugin.version,
+          jsUrl: plugin.jsUrl,
+        })
+      }
+    })
+
+    if (pluginAdded) {
+      console.log("plugin added! new plugins", usedPlugins)
+      await updateAppPackage({ usedPlugins }, ctx.appId)
+    }
+  }
+
   if (eventFn) {
     await eventFn(screen)
   }
@@ -56,3 +105,18 @@ exports.destroy = async ctx => {
   }
   ctx.status = 200
 }
+
+const findPlugins = (component, foundPlugins) => {
+  if (!component) {
+    return
+  }
+  if (component._component.startsWith("plugin")) {
+    if (!foundPlugins.includes(component._component)) {
+      foundPlugins.push(component._component)
+    }
+  }
+  if (!component._children || !component._children.length) {
+    return
+  }
+  component._children.forEach(child => findPlugins(child, foundPlugins))
+}