[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>

6 files changed, 70 insertions, 3 deletions

diff --git a/core/Application/Kernel/PluginList.php b/core/Application/Kernel/PluginList.php
index ecc9111562..02593a6279 100644
--- a/core/Application/Kernel/PluginList.php
+++ b/core/Application/Kernel/PluginList.php
@@ -43,6 +43,7 @@ class PluginList
         'ExampleLogTables',
         'ExampleReport',
         'ExampleAPI',
+        'ExampleVue',
         'MobileAppMeasurable',
         'TagManager'
     );
diff --git a/core/AssetManager/UIAssetFetcher.php b/core/AssetManager/UIAssetFetcher.php
index 7055992780..e1e3889977 100644
--- a/core/AssetManager/UIAssetFetcher.php
+++ b/core/AssetManager/UIAssetFetcher.php
@@ -160,7 +160,7 @@ abstract class UIAssetFetcher
         "libs/bower_components/angular-animate/angular-animate.min.js" => "node_modules/angular-animate/angular-animate.min.js",
         "libs/bower_components/angular-cookies/angular-cookies.min.js" => "node_modules/angular-cookies/angular-cookies.min.js",
         "libs/bower_components/ngDialog/js/ngDialog.min.js" => "node_modules/ng-dialog/js/ngDialog.min.js",
-        "libs/bower_components/jQuery.dotdotdot/src/js/jquery.dotdotdot.min.js" => "node_modules/jquery.dotdotdot/src/jquery.dotdotdot.min.js",
+        "libs/bower_components/jQuery.dotdotdot/src/js/jquery.dotdotdot.min.js" => "node_modules/jquery.dotdotdot/dist/jquery.dotdotdot.js",
         "libs/bower_components/visibilityjs/lib/visibility.core.js" => "node_modules/visibilityjs/lib/visibility.core.js",
         "libs/bower_components/iframe-resizer/js/iframeResizer.min.js" => "node_modules/iframe-resizer/js/iframeResizer.min.js",
         "libs/bower_components/qrcode.js/qrcode.js" => "node_modules/qrcodejs2/qrcode.min.js",
diff --git a/core/AssetManager/UIAssetFetcher/JScriptUIAssetFetcher.php b/core/AssetManager/UIAssetFetcher/JScriptUIAssetFetcher.php
index 6c00e593cb..768297028f 100644
--- a/core/AssetManager/UIAssetFetcher/JScriptUIAssetFetcher.php
+++ b/core/AssetManager/UIAssetFetcher/JScriptUIAssetFetcher.php
@@ -9,6 +9,7 @@
 namespace Piwik\AssetManager\UIAssetFetcher;
 
 use Piwik\AssetManager\UIAssetFetcher;
+use Piwik\Development;
 use Piwik\Piwik;
 
 class JScriptUIAssetFetcher extends UIAssetFetcher
@@ -43,6 +44,8 @@ class JScriptUIAssetFetcher extends UIAssetFetcher
              * @param string[] $jsFiles The JavaScript files to load.
              */
              Piwik::postEvent('AssetManager.getJavaScriptFiles', array(&$this->fileLocations), null, $this->plugins);
+
+             $this->addUmdFilesIfDetected($this->plugins);
         }
 
         $this->addThemeFiles();
@@ -78,6 +81,7 @@ class JScriptUIAssetFetcher extends UIAssetFetcher
             'node_modules/',
             'libs/',
             'js/',
+            'plugins/CoreVue/polyfills/dist/MatomoPolyfills',
             'piwik.js',
             'matomo.js',
             'plugins/CoreHome/javascripts/require.js',
@@ -90,4 +94,18 @@ class JScriptUIAssetFetcher extends UIAssetFetcher
             'tests/',
         );
     }
+
+    private function addUmdFilesIfDetected($plugins)
+    {
+        foreach ($plugins as $plugin) {
+            $devUmd = "plugins/$plugin/vue/dist/$plugin.umd.js";
+            $minifiedUmd = "plugins/$plugin/vue/dist/$plugin.umd.min.js";
+
+            if (Development::isEnabled() && is_file(PIWIK_INCLUDE_PATH . '/' . $devUmd)) {
+                $this->fileLocations[] = $devUmd;
+            } else if (is_file(PIWIK_INCLUDE_PATH . '/' . $minifiedUmd)) {
+                $this->fileLocations[] = $minifiedUmd;
+            }
+        }
+    }
 }
diff --git a/core/ProxyHttp.php b/core/ProxyHttp.php
index 82f7aaba85..f8a99dd34f 100644
--- a/core/ProxyHttp.php
+++ b/core/ProxyHttp.php
@@ -283,7 +283,7 @@ class ProxyHttp
         if ($compressionEncoding == 'deflate') {
             $data = gzdeflate($data, 9);
         } elseif ($compressionEncoding == 'gzip' || $compressionEncoding == 'x-gzip') {
-            $data = gzencode($data, 9);
+            $data = self::gzencode($data);
         }
 
         if (false === $data) {
@@ -292,4 +292,9 @@ class ProxyHttp
 
         file_put_contents($compressedFilePath, $data);
     }
+
+    public static function gzencode($data)
+    {
+        return gzencode($data, 9);
+    }
 }
diff --git a/core/Updates/4.6.0-b1.php b/core/Updates/4.6.0-b1.php
new file mode 100644
index 0000000000..557ed9b953
--- /dev/null
+++ b/core/Updates/4.6.0-b1.php
@@ -0,0 +1,43 @@
+<?php
+/**
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+
+namespace Piwik\Updates;
+
+use Piwik\Updater;
+use Piwik\Updates as PiwikUpdates;
+use Piwik\Updater\Migration;
+use Piwik\Updater\Migration\Factory as MigrationFactory;
+
+class Updates_4_6_0_b1 extends PiwikUpdates
+{
+
+    /**
+     * @var MigrationFactory
+     */
+    private $migration;
+
+    public function __construct(MigrationFactory $factory)
+    {
+        $this->migration = $factory;
+    }
+
+    public function getMigrations(Updater $updater)
+    {
+        $migration1 = $this->migration->plugin->activate('CoreVue');
+
+        return [
+            $migration1,
+        ];
+    }
+
+    public function doUpdate(Updater $updater)
+    {
+        $updater->executeMigrations(__FILE__, $this->getMigrations($updater));
+    }
+}
diff --git a/core/Version.php b/core/Version.php
index 481ab27fdd..4a3f94a9e6 100644
--- a/core/Version.php
+++ b/core/Version.php
@@ -20,7 +20,7 @@ final class Version
      * The current Matomo version.
      * @var string
      */
-    const VERSION = '4.5.0-rc1';
+    const VERSION = '4.6.0-b1';
 
     const MAJOR_VERSION = 4;