[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, 19 insertions, 0 deletions

diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000000..7740908849
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  presets: [
+    ['@vue/cli-plugin-babel/preset', {
+      useBuiltIns: false,
+      // NOTE: we are disabling generator and async/await use due to
+      // https://github.com/vuejs/vue-cli/blob/aad72cfa7880a0e327be06b3b9c3ac3d3b3c9abc/packages/%40vue/babel-preset-app/index.js#L250
+      // which hardcodes the use of an inlined regenerator runtime polyfill. Using it means we have to include
+      // 6kb extra minified code in every plugin's UMD file. We could use a shared, global runtime for regenerator,
+      // but @vue/babel-preset-app won't allow us to only set the linked `regenerator` property to false while
+      // keeping the rest of the settings the same.
+      // TODO: create an issue in vue for this ^? Or maybe the final gzipped asset's size will not be affected?
+      exclude: [
+        'transform-async-to-generator',
+        'transform-regenerator',
+        'proposal-async-generator-functions',
+      ]
+    }],
+  ],
+};