[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, 21 insertions, 1 deletions

diff --git a/package.json b/package.json
index 7a449d74dc..31a7a6deb4 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,8 @@
     "angular-mocks": "^1.8.2",
     "angular-sanitize": "^1.8.2",
     "chroma-js": "^0.6.3",
+    "core-js": "^3.16.3",
+    "css-loader": "^6.2.0",
     "iframe-resizer": "^4.2.11",
     "jquery": "^2.2.4",
     "jquery-mousewheel": "^3.1.13",
@@ -44,6 +46,24 @@
     "ng-dialog": "^1.4.0",
     "qrcodejs2": "0.0.2",
     "sprintf-js": "^1.1.2",
-    "visibilityjs": "^2.0.2"
+    "visibilityjs": "^2.0.2",
+    "vue": "^3.2.6"
+  },
+  "devDependencies": {
+    "@types/angular": "^1.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-typescript": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.2.6",
+    "@vue/eslint-config-airbnb": "^5.3.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-vue": "^7.16.0",
+    "typescript": "^4.3.5"
   }
 }