[Vue] utility function for creating angularjs adapters (#18146)4.6.0-b1

* incomplete conversion

* get ajax helper migration to work

* delete old periods.spec.js

* remove global-ajax-queue.js file

* migrate piwik service and test (w/ hacks to get it the test to work)

* rebuild and remove old files + get tests to pass

* unfinished commit

* return jqxhr object so promise api can be used

* move hasBlockedContent and deprecate piwikApi service

* remove alert files

* convert piwikHelper.spec.js

* in new vue code, use "Matomo" everywhere possible instead of "piwik" and rebuild vue files

* add another needed export line in command

* include polyfills after vue so we can add to vue engine

* Add HTML sanitizer for use w/ migrating ng-bind-html uses.

* fix broken merge, rebuild js, fix issue in build command

* add sanitize to other components for consistency (will be replaced by utility function eventually)

* migrate matomo-dialog, fix issue where vue:build --watch did not correctly watch all plugin files, fix path issue in webpack externals, add vue matomo dialog use example to ExampleVue

* update expected screenshot

* create initial createAngularJsAdapter generic function and use for AcitivityIndicator

* fix webpack chunk loading issue that occurs only on production (since the chunk is not stored in the same directory as the merged asset JS)

* use adapter utility for Alert

* use adapter function for matomo-dialog (even though the mapping becomes more complex)

* fix unit tests

1 files changed, 12 insertions, 51 deletions

diff --git a/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts b/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts
index 5cecb97a81..c100116645 100644
--- a/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts
+++ b/plugins/CoreHome/vue/src/Alert/Alert.adapter.ts
@@ -5,56 +5,17 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-import { createApp, ref } from 'vue';
 import Alert from './Alert.vue';
-
-interface AlertAdapterScope extends ng.IScope {
-  severity: string;
-}
-
-export default function alertAdapter(): ng.IDirective {
-  return {
-    restrict: 'A',
-    transclude: true,
-    scope: {
-      severity: '@piwikAlert',
-    },
-    template: '<div ng-transclude/>',
-    compile: function alertAdapterCompile() {
-      return {
-        post: function alertAdapterPostLink(
-          scope: AlertAdapterScope,
-          element: ng.IAugmentedJQuery,
-        ) {
-          const clone = element.find('[ng-transclude]');
-
-          const app = createApp({
-            template: '<alert :severity="severity"><div ref="transcludeTarget"/></alert>',
-            data() {
-              return { severity: scope.severity };
-            },
-            setup() {
-              const transcludeTarget = ref(null);
-              return {
-                transcludeTarget,
-              };
-            },
-          });
-          app.config.globalProperties.$sanitize = window.vueSanitize;
-          app.component('alert', Alert);
-          const vm = app.mount(element[0]);
-
-          scope.$watch('severity', (newValue: string) => {
-            vm.severity = newValue;
-          });
-
-          $(vm.transcludeTarget).append(clone);
-        },
-      };
+import createAngularJsAdapter from '../createAngularJsAdapter';
+
+export default createAngularJsAdapter({
+  component: Alert,
+  scope: {
+    severity: {
+      vue: 'severity',
+      angularJsBind: '@piwikAlert',
     },
-  };
-}
-
-alertAdapter.$inject = [];
-
-angular.module('piwikApp').directive('piwikAlert', alertAdapter);
+  },
+  directiveName: 'piwikAlert',
+  transclude: true,
+});