Add function that initializes marked vue components outside of angularjs. (#18804)

1 files changed, 68 insertions, 0 deletions

diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index e14d6c1985..f59fa6c497 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -150,6 +150,68 @@ window.piwikHelper = {
         return angular.element(document).injector().get(dependency);
     },
 
+    // initial call for 'body' later in this file
+    compileVueEntryComponents: function (selector) {
+      function toKebabCase(arg) {
+        return arg.substring(0, 1).toLowerCase() + arg.substring(1)
+          .replace(/[A-Z]/g, function (s) { return '-' + s.toLowerCase(); });
+      }
+
+      $('[vue-entry]', selector).each(function () {
+        var entry = $(this).attr('vue-entry');
+
+        var parts = entry.split('.');
+        if (parts.length !== 2) {
+          throw new Error('Expects vue-entry to have format Plugin.Component, where Component is exported Vue component. Got: ' + entry);
+        }
+
+        var createVNode = Vue.createVNode;
+        var createVueApp = CoreHome.createVueApp;
+        var plugin = window[parts[0]];
+        if (!plugin) {
+          throw new Error('Unknown plugin in vue-entry: ' + plugin);
+        }
+
+        var component = plugin[parts[1]];
+        if (!component) {
+          throw new Error('Unknown component in vue-entry: ' + entry);
+        }
+
+        var componentParams = {};
+        $.each(this.attributes, function () {
+          if (this.name === 'vue-entry') {
+            return;
+          }
+
+          var value = this.value;
+          try {
+            value = JSON.parse(this.value);
+          } catch (e) {
+            // pass
+          }
+
+          componentParams[toKebabCase(this.name)] = value;
+        });
+
+        var app = createVueApp({
+          render: function () {
+            return createVNode(component, componentParams);
+          },
+        });
+        app.mount(this);
+
+        this.addEventListener('matomoVueDestroy', function () {
+          app.unmount();
+        });
+      });
+    },
+
+    destroyVueComponent: function (selector) {
+      $('[vue-entry]', selector).each(function () {
+        this.dispatchEvent(new CustomEvent('matomoVueDestroy'));
+      });
+    },
+
     /**
      * As we still have a lot of old jQuery code and copy html from node to node we sometimes have to trigger the
      * compiling of angular components manually.
@@ -648,3 +710,9 @@ try {
 
 } catch (e) {}
 }(jQuery));
+
+(function ($) {
+  $(function () {
+    piwikHelper.compileVueEntryComponents('body');
+  });
+}(jQuery))