[Vue] Introduce Vue + Workflow commands (#17940)

* adding vue

* adding webpack config + example vue library project

* forgot to add base tsconfig.json

* Add build command that allows building all plugins + watching for changes.

* autodetect umd bundles

* initial externals detection

* integrate vue CLI

* add externals config via vue config

* explain regenerator issue

* remove ie11

* Build polyfills in separate library.

* add command to quickly compute total asset size (minified + gzipped)

* output tweak for --exclude-angular

* Explicitly disable support for ie11 since Vue 3 does not support it.

* rebuild and add option to clear webpack cache to build commands

* Add example vue component that compiles w/ vue 3.

* get example vue component to display

* include tslib via polyfills so it is not compiled in each library

* get async component loading to work

* some tweaks and tests

* Add generate vue component command and run to generate activity indicator template.

* switch to using composition api since that is apparently better supported, and get activity indicator adapter to bind data properly

* remove vue-class-component npm package

* eslint changes

* rever tracking JS change

* tweak

* Remove CoreVue vue dir which was just there for testing.

* Update vue.config.js

* apply some review feedback

* add plugin to compute js asset size command

* use local script to build

* update changelog and apply review feedback

* fix bower component mapping

* update expected screenshots

* update screenshot

* Update and rename 4.5.0-b2.php to 4.6.0-b1.php

* Update Version.php

* update expected screenshot

* updates expected UI test files

Co-authored-by: sgiehl <stefan@matomo.org>

1 files changed, 1 insertions, 0 deletions

diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js.map b/plugins/CoreHome/vue/dist/CoreHome.umd.js.map
new file mode 100644
index 0000000000..00186cc2e2
--- /dev/null
+++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://CoreHome/webpack/universalModuleDefinition","webpack://CoreHome/webpack/bootstrap","webpack://CoreHome/external {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://CoreHome/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://CoreHome/./plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue","webpack://CoreHome/./plugins/CoreHome/vue/src/translate.ts","webpack://CoreHome/./plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue?0bf6","webpack://CoreHome/./plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue?f42e","webpack://CoreHome/./plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.vue?6f80","webpack://CoreHome/./plugins/CoreHome/vue/src/ActivityIndicator/ActivityIndicator.adapter.ts","webpack://CoreHome/./plugins/CoreHome/vue/src/index.ts","webpack://CoreHome/./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js"],"names":[],"mappings":"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","file":"CoreHome.umd.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"CoreHome\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"CoreHome\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__8bbf__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"fae3\");\n","module.exports = __WEBPACK_EXTERNAL_MODULE__8bbf__;","// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","<template>\n  <div v-show=\"loading\" class=\"loadingPiwik\">\n    <img src=\"plugins/Morpheus/images/loading-blue.gif\" alt=\"\"/>\n    <span>{{ loadingMessage }}</span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport translate from '../translate';\n\nexport default defineComponent({\n  props: {\n    loading: {\n      type: Boolean,\n      required: true,\n      default: false,\n    },\n    loadingMessage: {\n      type: String,\n      required: false,\n      default: translate('General_LoadingData'),\n    },\n  },\n});\n</script>\n","export default function translate(translationStringId: string, values: string[] = []): string {\n  return window._pk_translate(translationStringId, values); // eslint-disable-line\n}\n","\nimport { defineComponent } from 'vue';\nimport translate from '../translate';\n\nexport default defineComponent({\n  props: {\n    loading: {\n      type: Boolean,\n      required: true,\n      default: false,\n    },\n    loadingMessage: {\n      type: String,\n      required: false,\n      default: translate('General_LoadingData'),\n    },\n  },\n});\n","export { default } from \"-!../../../../../node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!../../../../../node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader/index.js??ref--14-3!../../../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./ActivityIndicator.vue?vue&type=script&lang=ts\"; export * from \"-!../../../../../node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!../../../../../node_modules/@vue/cli-plugin-typescript/node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader/index.js??ref--14-3!../../../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./ActivityIndicator.vue?vue&type=script&lang=ts\"","import { render } from \"./ActivityIndicator.vue?vue&type=template&id=c109d738\"\nimport script from \"./ActivityIndicator.vue?vue&type=script&lang=ts\"\nexport * from \"./ActivityIndicator.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","import { createApp } from 'vue';\nimport ActivityIndicator from './ActivityIndicator.vue';\nimport translate from '../translate';\n\ninterface ActivityIndicatorAdapterScope extends ng.IScope {\n  loading: boolean;\n  loadingMessage: string;\n}\n\nexport default function activityIndicatorAdapter(): ng.IDirective {\n  return {\n    restrict: 'A',\n    scope: {\n      loading: '<',\n      loadingMessage: '<',\n    },\n    template: '',\n    link: function activityIndicatorAdapterLink(\n      scope: ActivityIndicatorAdapterScope,\n      element: ng.IAugmentedJQuery,\n    ) {\n      const app = createApp({\n        template: '<activity-indicator :loading=\"loading\" :loadingMessage=\"loadingMessage\"/>',\n        data() {\n          return {\n            loading: scope.loading,\n            loadingMessage: scope.loadingMessage,\n          };\n        },\n      });\n      app.component('activity-indicator', ActivityIndicator);\n      const vm = app.mount(element[0]);\n\n      scope.$watch('loading', (newValue: boolean) => {\n        vm.loading = newValue;\n      });\n\n      scope.$watch('loadingMessage', (newValue: string) => {\n        vm.loadingMessage = newValue || translate('General_LoadingData');\n      });\n    },\n  };\n}\n\nactivityIndicatorAdapter.$inject = [];\n\nangular.module('piwikApp').directive('piwikActivityIndicator', activityIndicatorAdapter);\n","export { default as activityIndicatorAdapter } from './ActivityIndicator/ActivityIndicator.adapter';\nexport { default as ActivityIndicator } from './ActivityIndicator/ActivityIndicator.vue';\nexport { default as translate } from './translate';\n","import './setPublicPath'\nexport * from '~entry'\n"],"sourceRoot":""}
\ No newline at end of file