Federated Modules: Dynamic Remotes with synchronous imports (#557)

Utilizing plugin from: #566

Author: ksrb

advanced-api/dynamic-remotes-synchronous-imports/README.md

@@ -0,0 +1,16 @@
+# Dynamic Remote with Vendor Sharing and Synchronous imports Example
+
+This example demos a basic host application loading remote component and sharing vendor code dynamically between unknown remotes
+
+- `app1` standalone application which exposes `Widget` component.
+- `app2` standalone application which exposes `Widget` component that requires
+  `momentjs`.
+
+# Running Demo
+
+Run `yarn start`. This will build and serve both `app1` and `app2` on ports
+`3001` and `3002` respectively.
+
+- [localhost:3001](http://localhost:3001/) (HOST)
+- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
+  <img src="https://ssl.google-analytics.com/collect?v=1&t=event&ec=email&ea=open&t=event&tid=UA-120967034-1&z=1589682154&cid=ae045149-9d17-0367-bbb0-11c41d92b411&dt=ModuleFederationExamples&dp=/email/advanced-api/dynamic-remotes">

advanced-api/dynamic-remotes-synchronous-imports/app1/ExternalTemplateRemotesPlugin.js

@@ -0,0 +1,74 @@
+// From: https://github.com/module-federation/module-federation-examples/issues/566
+const extractUrlAndGlobal = require('webpack/lib/util/extractUrlAndGlobal');
+const { RawSource } = require('webpack-sources');
+
+const PLUGIN_NAME = 'ExternalTemplateRemotesPlugin';
+
+class ExternalTemplateRemotesPlugin {
+  apply(compiler) {
+    compiler.hooks.make.tap(PLUGIN_NAME, compilation => {
+      const scriptExternalModules = [];
+
+      compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+        if (module.constructor.name === 'ExternalModule' && module.externalType === 'script') {
+          scriptExternalModules.push(module);
+        }
+      });
+
+      compilation.hooks.afterCodeGeneration.tap(PLUGIN_NAME, function() {
+        scriptExternalModules.map(module => {
+          const urlTemplate = extractUrlAndGlobal(module.request)[0];
+          const urlExpression = toExpression(urlTemplate);
+          const sourceMap = compilation.codeGenerationResults.get(module).sources;
+          const rawSource = sourceMap.get('javascript');
+          sourceMap.set(
+            'javascript',
+            new RawSource(rawSource.source().replace(`"${urlTemplate}"`, urlExpression))
+          );
+        });
+      });
+    });
+  }
+}
+
+function toExpression(templateUrl) {
+  const result = [];
+  const current = [];
+  let isExpression = false;
+  let invalid = false;
+  for (const c of templateUrl) {
+    if (c === '[') {
+      if (isExpression) {
+        invalid = true;
+        break;
+      }
+      isExpression = true;
+      if (current.length) {
+        result.push(`"${current.join('')}"`);
+        current.length = 0;
+      }
+    } else if (c === ']') {
+      if (!isExpression) {
+        invalid = true;
+        break;
+      }
+      isExpression = false;
+      if (current.length) {
+        result.push(`${current.join('')}`);
+        current.length = 0;
+      }
+      current.length = 0;
+    } else {
+      current.push(c);
+    }
+  }
+  if (isExpression || invalid) {
+    throw new Error(`Invalid template URL "${templateUrl}"`);
+  }
+  if (current.length) {
+    result.push(`"${current.join('')}"`);
+  }
+  return result.join(' + ');
+}
+
+module.exports = ExternalTemplateRemotesPlugin;