Add nested components example (module-federation#15)

mizx · web-flow · commit 21ed1a4713ad · 2020-04-16T19:41:12.000-07:00
* add nested components example

* remove duplicate nested readme
diff --git a/README.md b/README.md
@@ -16,11 +16,10 @@ This repository is to showcase examples on Webpack 5's new Module Federation can
 - [x] [Dynamic System Host](./dynamic-system-host/README.md) &mdash; Swap between remotes at runtime.
 - [x] [Redux Reducer Injection](./redux-reducer-injection.md) &mdash; Dynamically inject reducers to host store at runtime.
 - [x] [Shared Routes](./shared-routes2) &mdash; Compose federated routes for a seamless user experience.
-- [ ] Nested Interleaved Components
+- [x] [Nested Components](./nested/README.md) &mdash; Nested remote components.
 - [x] [Share Context Provider](./shared-context/README.md) &mdash; App1 and App2 with shared Context Provider.
 - [ ] Non-UI Module
 - [x] Routing
-- [ ] Nested
 - [x] [Version Discrepancy](./version-discrepancy/README.md) &mdash; Federated apps depending on different versions of a dependency without side-effects.
 - [x] [TypeScript](./typescript/README.md) &mdash; Simple host/remote example using TypeScript.
 - [ ] NextJS
diff --git a/nested/README.md b/nested/README.md
@@ -0,0 +1,15 @@
+# Nested Example
+
+This example demos loading nested remote components.
+
+- `app1` is the host application and async loads `ButtonContainer` from `app2`.
+- `app2` is a standalone application that exposes `ButtonContainer` component which async loads `Button`.
+- `app3` is a standalone application that exposes `Button` component.
+
+# Running Demo
+
+Run `yarn start`. This will build and serve both `app1`, `app2`, and `app3` on ports 3001, 3002, and 3003 respectively.
+
+- [localhost:3001](http://localhost:3001/) (HOST)
+- [localhost:3002](http://localhost:3002/) (STANDALONE REMOTE)
+- [localhost:3003](http://localhost:3003/) (STANDALONE REMOTE)
diff --git a/nested/app1/package.json b/nested/app1/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@nested/app1",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "babel-loader": "^8.1.0",
+    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
+    "serve": "^11.3.0",
+    "webpack": "git://github.com/webpack/webpack.git#dev-1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3001"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
diff --git a/nested/app1/public/index.html b/nested/app1/public/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <script src="http://localhost:3002/remoteEntry.js"></script>
+    <script src="http://localhost:3003/remoteEntry.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/nested/app1/src/App.js b/nested/app1/src/App.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const RemoteButtonContainer = React.lazy(() => import("app2/ButtonContainer"));
+
+const App = () => (
+  <div>
+    <h1>Nested</h1>
+    <h2>App 1</h2>
+    <p>app 1 body</p>
+    <React.Suspense fallback="Loading Button Container">
+      <RemoteButtonContainer />
+    </React.Suspense>
+  </div>
+);
+
+export default App;
diff --git a/nested/app1/src/bootstrap.js b/nested/app1/src/bootstrap.js
@@ -0,0 +1,5 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/nested/app1/src/index.js b/nested/app1/src/index.js
@@ -0,0 +1 @@
+import("./bootstrap");
diff --git a/nested/app1/webpack.config.js b/nested/app1/webpack.config.js
@@ -0,0 +1,40 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const path = require("path");
+
+module.exports = {
+  entry: "./src/index",
+  mode: "development",
+  devServer: {
+    contentBase: path.join(__dirname, "dist"),
+    port: 3001
+  },
+  output: {
+    publicPath: "http://localhost:3001/"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-react"]
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app1",
+      library: { type: "var", name: "app1" },
+      remotes: {
+        app2: "app2",
+        app3: "app3"
+      },
+      shared: ["react", "react-dom"]
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html"
+    })
+  ]
+};
diff --git a/nested/app2/package.json b/nested/app2/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@nested/app2",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "babel-loader": "^8.1.0",
+    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
+    "serve": "^11.3.0",
+    "webpack": "git://github.com/webpack/webpack.git#dev-1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3001"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
diff --git a/nested/app2/public/index.html b/nested/app2/public/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="http://localhost:3003/remoteEntry.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/nested/app2/src/App.js b/nested/app2/src/App.js
@@ -0,0 +1,12 @@
+import ButtonContainer from "./ButtonContainer";
+import React from "react";
+
+const App = () => (
+  <div>
+    <h1>Nested</h1>
+    <h2>App 2</h2>
+    <ButtonContainer />
+  </div>
+);
+
+export default App;
diff --git a/nested/app2/src/ButtonContainer.js b/nested/app2/src/ButtonContainer.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+const RemoteButton = React.lazy(() => import("app3/Button"));
+
+const style = {
+  padding: 12,
+  backgroundColor: "#cccccc"
+};
+
+const ButtonContainer = () => (
+  <div style={style}>
+    App 2 Container
+    <br />
+    <br />
+    <React.Suspense fallback="Loading Button">
+      <RemoteButton />
+    </React.Suspense>
+  </div>
+);
+
+export default ButtonContainer;
diff --git a/nested/app2/src/bootstrap.js b/nested/app2/src/bootstrap.js
@@ -0,0 +1,5 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/nested/app2/src/index.js b/nested/app2/src/index.js
@@ -0,0 +1 @@
+import("./bootstrap");
diff --git a/nested/app2/webpack.config.js b/nested/app2/webpack.config.js
@@ -0,0 +1,43 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const path = require("path");
+
+module.exports = {
+  entry: "./src/index",
+  mode: "development",
+  devServer: {
+    contentBase: path.join(__dirname, "dist"),
+    port: 3002
+  },
+  output: {
+    publicPath: "http://localhost:3002/"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-react"]
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app2",
+      library: { type: "var", name: "app2" },
+      filename: "remoteEntry.js",
+      exposes: {
+        ButtonContainer: "./src/ButtonContainer"
+      },
+      remotes: {
+        app3: "app3"
+      },
+      shared: ["react", "react-dom"]
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html"
+    })
+  ]
+};
diff --git a/nested/app3/package.json b/nested/app3/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "@nested/app3",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-react": "^7.9.1",
+    "babel-loader": "^8.1.0",
+    "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
+    "serve": "^11.3.0",
+    "webpack": "git://github.com/webpack/webpack.git#dev-1",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack --mode production",
+    "serve": "serve dist -p 3002"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
diff --git a/nested/app3/public/index.html b/nested/app3/public/index.html
@@ -0,0 +1,5 @@
+<html>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/nested/app3/src/App.js b/nested/app3/src/App.js
@@ -0,0 +1,12 @@
+import LocalButton from "./Button";
+import React from "react";
+
+const App = () => (
+  <div>
+    <h1>Nested</h1>
+    <h2>App 3</h2>
+    <LocalButton />
+  </div>
+);
+
+export default App;
diff --git a/nested/app3/src/Button.js b/nested/app3/src/Button.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const style = {
+  padding: 12,
+  backgroundColor: "aquamarine"
+};
+
+const Button = () => <button style={style}>App 3 Button</button>;
+
+export default Button;
diff --git a/nested/app3/src/bootstrap.js b/nested/app3/src/bootstrap.js
@@ -0,0 +1,5 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/nested/app3/src/index.js b/nested/app3/src/index.js
@@ -0,0 +1 @@
+import("./bootstrap");
diff --git a/nested/app3/webpack.config.js b/nested/app3/webpack.config.js
@@ -0,0 +1,40 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const path = require("path");
+
+module.exports = {
+  entry: "./src/index",
+  mode: "development",
+  devServer: {
+    contentBase: path.join(__dirname, "dist"),
+    port: 3003
+  },
+  output: {
+    publicPath: "http://localhost:3003/"
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-react"]
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: "app3",
+      library: { type: "var", name: "app3" },
+      filename: "remoteEntry.js",
+      exposes: {
+        Button: "./src/Button"
+      },
+      shared: ["react", "react-dom"]
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html"
+    })
+  ]
+};
diff --git a/nested/package.json b/nested/package.json
@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "lerna run --scope @nested/* --parallel start",
+    "build": "lerna run --scope @nested/* build",
+    "serve": "lerna run --scope @nested/* --parallel serve"
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,8 @@ @@
 +<html>
 +  <head>
 +    <script src="http://localhost:3003/remoteEntry.js"></script>
 +  </head>
 +  <body>
 +    <div id="root"></div>
 +  </body>
 +</html>