Added support for loading extension Web Components

package-lock.json

@@ -8586,14 +8586,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -8613,8 +8611,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -8762,7 +8759,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -16021,6 +16017,12 @@
         }
       }
     },
+    "vue-plugin-load-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-plugin-load-script/-/vue-plugin-load-script-1.2.0.tgz",
+      "integrity": "sha512-QbWjZSFRToSP6S0nZFsH618PsTlZgSg8m8Xv602vezznLTHYd0wAXEw0jlYND7L6BMe0KcA7cvUwLROyfBlQ4w==",
+      "dev": true
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -52,6 +52,7 @@
     "mdns-js": "^1.0.3",
     "uikit": "^3.3.3",
     "vue": "^2.6.11",
+    "vue-plugin-load-script": "^1.2.0",
     "vue-template-compiler": "^2.6.11",
     "vuex": "^3.1.2"
   },

src/components/panelLeft.vue

@@ -118,23 +118,12 @@
         :require-connection="plugin.requiresConnection"
         :current-tab="currentTab"
       >
-        <div
-          v-for="form in plugin.forms"
-          :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
-          class="uk-height-1-1 uk-width-1-1"
-        >
-          <extensionContent
-            :name="form.name"
-            :route="form.route"
-            :is-task="form.isTask"
-            :submit-label="form.submitLabel"
-            :schema="form.schema"
-            :emit-on-response="form.emitOnResponse"
-            :view-panel="form.viewPanel"
-            @reloadForms="updatePlugins()"
-          />
-          <hr />
-        </div>
+        <extensionContent
+          :forms="plugin.forms"
+          :web-component="plugin.wc"
+          :view-panel="plugin.viewPanel"
+          @reloadForms="updatePlugins()"
+        />
       </tabContent>
     </div>
   </div>

src/components/pluginComponents/WebComponentLoader.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div v-if="error" class="uk-padding-small uk-text-danger">
+      <b>{{ error }}</b>
+    </div>
+    <component
+      :is="componentName"
+      v-if="ready"
+      :component-base-u-r-l="ApiRootURL"
+    ></component>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WebComponentLoader",
+
+  props: {
+    componentURL: {
+      type: String,
+      required: true
+    },
+    componentName: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      ready: false,
+      error: null
+    };
+  },
+
+  computed: {
+    ApiRootURL: function() {
+      return `${this.$store.getters.baseUri}/api/v2`;
+    }
+  },
+
+  mounted() {
+    // Method 2
+    this.$loadScript(this.componentURL)
+      .then(() => {
+        const el = customElements.get(this.componentName);
+        if (el) {
+          this.ready = true;
+        } else {
+          this.error = `Error: No component ${this.componentName} found.`;
+        }
+        this.ready = true;
+      })
+      .catch(() => {
+        this.ready = false;
+      });
+  }
+};
+</script>
+
+<style scoped></style>

src/components/tabContentComponents/extensionContent.vue

@@ -2,7 +2,28 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component">
-      <JsonForm v-bind="$props" v-on="$listeners" />
+      <div v-if="webComponent">
+        <WebComponentLoader
+          :component-u-r-l="webComponent.href"
+          :component-name="webComponent.name"
+        />
+      </div>
+      <!-- Handle OpenFlexure eV Forms -->
+      <div
+        v-for="form in forms"
+        :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
+        class="uk-height-1-1 uk-width-1-1"
+      >
+        <JsonForm
+          :name="form.name"
+          :route="form.route"
+          :is-task="form.isTask"
+          :submit-label="form.submitLabel"
+          :schema="form.schema"
+          :emit-on-response="form.emitOnResponse"
+          v-on="$listeners"
+        />
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <galleryDisplay v-if="viewPanel == 'gallery'" />
@@ -14,6 +35,7 @@
 
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
+import WebComponentLoader from "../pluginComponents/WebComponentLoader";
 import streamDisplay from "../viewComponents/streamDisplay.vue";
 import galleryDisplay from "../viewComponents/galleryDisplay.vue";
 import settingsDisplay from "../viewComponents/settingsDisplay.vue";
@@ -23,37 +45,20 @@ export default {
 
   components: {
     JsonForm,
+    WebComponentLoader,
     streamDisplay,
     galleryDisplay,
     settingsDisplay
   },
 
   props: {
-    name: {
-      type: String,
-      required: false,
-      default: "Plugin"
-    },
-    schema: {
+    forms: {
       type: Array,
-      required: true
-    },
-    route: {
-      type: String,
-      required: true
-    },
-    isTask: {
-      type: Boolean,
       required: false,
-      default: false
+      default: () => []
     },
-    submitLabel: {
-      type: String,
-      required: false,
-      default: "Submit"
-    },
-    emitOnResponse: {
-      type: String,
+    webComponent: {
+      type: Object,
       required: false,
       default: null
     },

src/main.js

@@ -7,6 +7,10 @@ import UIkit from "uikit";
 // Import MD icons
 import "material-design-icons/iconfont/material-icons.css";
 
+// Import load-script module
+import LoadScript from "vue-plugin-load-script";
+Vue.use(LoadScript);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({