Update example 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;

advanced-api/dynamic-remotes-synchronous-imports/app3/package-lock.json renamed to advanced-api/dynamic-remotes-synchronous-imports/app1/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@dynamic-remotes/app3",
+  "name": "@dynamic-remotes/app2",
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
@@ -15,14 +15,12 @@
   "scripts": {
     "start": "webpack-cli serve",
     "build": "webpack --mode production",
-    "serve": "serve dist -p 3003",
+    "serve": "serve dist -p 3002",
     "clean": "rm -rf dist"
   },
   "dependencies": {
     "moment": "^2.24.0",
     "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-redux": "^7.2.0",
-    "redux": "^4.0.5"
+    "react-dom": "^16.13.0"
   }
 }

advanced-api/dynamic-remotes-synchronous-imports/app3/package.json renamed to advanced-api/dynamic-remotes-synchronous-imports/app1/package.json

@@ -0,0 +1,16 @@
+import Widget from "./Widget";
+import React, { Suspense } from "react";
+import WidgetRemote from "app2/Widget";
+
+const App = () => (
+  <div>
+    <h1>Dynamic System Host</h1>
+    <h2>App 1</h2>
+    <Widget />
+    <Suspense fallback="Loading widget">
+      <WidgetRemote />
+    </Suspense>
+  </div>
+);
+
+export default App;

advanced-api/dynamic-remotes-synchronous-imports/app3/public/index.html renamed to advanced-api/dynamic-remotes-synchronous-imports/app1/public/index.html

@@ -7,15 +7,15 @@ export default function Widget() {
       style={{
         borderRadius: "4px",
         padding: "2em",
-        backgroundColor: "purple",
+        backgroundColor: "red",
         color: "white",
       }}
     >
-      <h2>App 3 Widget</h2>
+      <h2>App 1 Widget</h2>
       <p>
-        Using <strong>momentjs</strong> to format the date
+        Moment shouldn't download twice, the host has no moment.js <br />{" "}
+        {moment().format("MMMM Do YYYY, h:mm:ss a")}
       </p>
-      <p>{moment().format("MMMM Do YYYY, h:mm:ss a")}</p>
     </div>
   );
 }

advanced-api/dynamic-remotes-synchronous-imports/app1/src/App.js

@@ -0,0 +1,5 @@
+import { app2Module } from "../../moduleConfig";
+
+window[app2Module.urlGlobalVariable] = app2Module.url;
+
+import("./bootstrap");