[Vue] detect dependent plugins in vue UMDs and order plugins appropriately (#18337)

* detect dependent plugins in vue UMDs and order plugins appropriately

* Update buildvue.yml

1 files changed, 32 insertions, 5 deletions

diff --git a/vue.config.js b/vue.config.js
index 4755a75fff..a758b2378e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -26,7 +26,7 @@ if (!process.env.MATOMO_CURRENT_PLUGIN) {
 const publicPath = `plugins/${process.env.MATOMO_CURRENT_PLUGIN}/vue/dist/`;
 
 // hack to get publicPath working for lib build target (see https://github.com/vuejs/vue-cli/issues/4896#issuecomment-569001811)
-function PublicPathWebpackPlugin () {}
+function PublicPathWebpackPlugin() {}
 
 PublicPathWebpackPlugin.prototype.apply = function (compiler) {
   compiler.hooks.entryOption.tap('PublicPathWebpackPlugin', (context, entry) => {
@@ -45,13 +45,40 @@ PublicPathWebpackPlugin.prototype.apply = function (compiler) {
   });
 };
 
+const detectedDependentPlugins = [];
+
+function OutputDetectedDependentPluginsPlugin() {}
+OutputDetectedDependentPluginsPlugin.prototype.apply = function (compiler) {
+  compiler.hooks.afterCompile.tap('OutputDetectedDependentPluginsPlugin', (context, entry) => {
+    const metadataPath = path.join(__dirname, publicPath, 'umd.metadata.json');
+    const metadata = {
+      dependsOn: detectedDependentPlugins,
+    };
+    fs.mkdirSync(path.dirname(metadataPath), { recursive: true });
+    fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+  });
+};
+
 module.exports = {
   publicPath,
   chainWebpack: config => {
-    config.plugin().use(PublicPathWebpackPlugin);
-    config.externals({
-      'tslib': 'tslib',
-      ...pluginExternals,
+    config.plugin('output-detected-dependent-plugins').use(OutputDetectedDependentPluginsPlugin);
+    config.plugin('public-path-webpack').use(PublicPathWebpackPlugin);
+    config.externals(function (context, request, callback) {
+      if (request === 'tslib') {
+        callback(null, 'tslib');
+        return;
+      }
+
+      if (pluginExternals[request]) {
+        if (detectedDependentPlugins.indexOf(request) === -1) {
+          detectedDependentPlugins.push(request);
+        }
+        callback(null, pluginExternals[request]);
+        return;
+      }
+
+      callback();
     });
   },
 };