Description:

This PR introduces Vue 3 + all the tools required to build and use Vue 3 components within the context of Matomo.

Documentation on the Vue build system integration can be seen here: matomo-org/developer-documentation#541 (as well as some documentation on Matomo's asset pipeline). It is recommended to read this new documentation first to understand how the integration is achieved.

To see how vue components are coded, take a look at the ExampleVue plugin in this PR. Or take a look at the proof of concept conversion of the activity indicator directive in CoreHome.

Getting started with vue locally

To test this PR out or just code with Vue, you should just need to checkout this PR's branch and run npm install. After that the vue:build command should work. If not, you may need to run npm install -g @vue/cli (but it shouldn't be necessary I think). Note: I am using the latest major version of node locally, v16.7.0.

Notes:

• npm updated my package-lock.json dependencies everywhere for some reason. I've kept the updates for now.
• This PR uses eslint instead of tslint. tslint appears to be deprecated in the Vue CLI tool, and eslint is generally a more flexible tool.
• Vue 3 does not support IE11. So with this PR we dropping support for IE11 (at least for new Vue related code). This isn't really possible to work around. The compiled Vue JavaScript library distributed on npm directly uses some ES features (like const/let and JS proxies) that will not work in IE11, so even if we compile our JavaScript to work with IE11, Vue will not load properly.
• There is a demonstration here in the ExampleVue plugin for Vue's async component feature. It should be noted that this feature does not load templates via AJAX like angularjs. It loades the entire component's JavaScript file over the network dynamically. This is sort of how Angular does it via routing. A description for how exactly this works is in the linked documentation PR.
• Merged asset sizes for 4.x-dev + this branch are listed below. These metrics will be included in every [Vue] PR so we can monitor the change in asset size over time. There is a new command in this PR that is used to compute it.
• Originally I used the class component API but noticed when reading through Vue docs and rfcs for 3.0, it doesn't appear to be as supported as the composition API. So I switched to the composition API. We could use the class component API, but would have to include extra code and we'd still use the composition API for some things in the adapter layer.

AngularJS/Vue communication & backwards compatibility

Every new Vue component has an angularjs directive adapter that initializes it. This is done for backwards compatibility and as a formal layer for AngularJS to communicate with Vue.

Examples for this are in the ExampleVue and CoreHome plugins.

From AngularJS => Vue, we use watches on scopes to change data. Conversely from Vue => AngularJS, events within Vue will be used.

Vue code will never embed or integrate AngularJS code. This is how we keep the layers separate and slowly hollow out the AngularJS code.

Merged asset sizes

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed