Major overhaul (#9)

.gitignore

@@ -3,4 +3,5 @@ node_modules
 npm-debug.log
 .idea
 /test/bundle.test.js
-/federated/dist/
+dist/
+dist-test/

federated-cross-test/App.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Form from "./form";
+
+const App = () => {
+  return (
+    <div>
+      <p>hello world</p>
+      <Form/>
+    </div>
+)
+}
+
+export default App

federated-cross-test/bootstrap.js

@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from  "react-dom"
+import App from './App'
+ReactDOM.render(<App/>, document.getElementById('app'))

federated-cross-test/form.js

@@ -0,0 +1,15 @@
+import React from "react";
+import lazy from 'react-lazy-ssr';
+const Button = lazy(()=>import('federated/Button'),{chunkId:"federated/Button"})
+// const Button = process.env.NODE_ENV === 'test' ? require('federated/Button').default : React.lazy(()=>import('federated/Button'))
+// const Suspense = process.env.NODE_ENV === 'test' ? ({children})=>children : React.Suspense
+const Suspense = React.Suspense
+const Form = () =>(
+  <form>
+    <input type="text"/>
+    <Suspense fallback={"failed"} loading={"loading"}>
+      <Button/>
+    </Suspense>
+  </form>
+)
+export default Form

federated-cross-test/index.js

@@ -0,0 +1 @@
+import("./bootstrap")

federated-cross-test/webpack.build.config.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const glob = require('glob');
+const webpack = require("webpack")
+const {ModuleFederationPlugin} = webpack.container
+const HTMLPlugin = require('html-webpack-plugin')
+const deps = require('../package.json')
+module.exports = {
+  entry: require.resolve('./index.js'),
+  output: {
+    path: path.resolve(__dirname, "./dist"),
+    publicPath: "auto"
+  },
+  cache:false,
+  target: "web",
+  resolve: {
+    fallback: {
+      path: false
+    }
+  },
+  mode: "none",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'fed_consumer',
+      filename:"remoteEntry.js",
+      remotes: {
+        "federated": "federated@http://localhost:3001/remoteEntry.js"
+      },
+      shared: {
+        react: deps.devDependencies.react,
+        "react-dom": deps.devDependencies["react-dom"]
+      }
+    }),
+    new HTMLPlugin({
+      templateContent:'<div id="app"></div>'
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || "development"),
+    })
+]
+};

federated-cross-test/webpack.test.config.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const glob = require('glob');
+const webpack = require("webpack")
+const {ModuleFederationPlugin} = webpack.container
+const HTMLPlugin = require('html-webpack-plugin')
+const deps = require('../package.json')
+const reunited = require('../index')
+module.exports = {
+  entry: require.resolve('./index.js'),
+  output: {
+    path: path.resolve(__dirname, "./dist-test"),
+  },
+  target: "node",
+  resolve: {
+    fallback: {
+      path: false
+    }
+  },
+  mode: "none",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'fed_consumer',
+      filename: "remoteEntry.js",
+      library: {type: "commonjs-module", name: "fed_consumer"},
+      remotes: {
+        "federated": reunited(path.resolve(__dirname, '../federated-test/dist-test/remoteEntry.js'), "federated")
+      },
+      exposes: {
+        "./Form": "./federated-cross-test/form.js"
+      },
+      shared: {
+        react: deps.devDependencies.react,
+        "react-dom": deps.devDependencies["react-dom"]
+      }
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || "test"),
+    })
+  ]
+};

federated-test/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+  ]
+}

federated-test/Button.js

@@ -0,0 +1,3 @@
+import React from "react";
+const Button =()=> (<button>I am button</button>)
+export default Button

federated/webpack.build.config.js → federated-test/webpack.build.config.js

@@ -1,12 +1,16 @@
 const path = require('path');
-const glob = require('glob');
-const {ModuleFederationPlugin} = require("webpack").container
+const webpack = require("webpack")
+const {ModuleFederationPlugin} = webpack.container
+const deps = require('../package.json')
+
 module.exports = {
   entry: require.resolve('./index.js'),
   output: {
     path: path.resolve(__dirname, "./dist"),
+    publicPath: "auto"
   },
-  target: "node",
+  cache:false,
+  target: "web",
   resolve: {
     fallback: {
       path: false
@@ -26,10 +30,16 @@ module.exports = {
     new ModuleFederationPlugin({
       name: 'federated',
       filename:"remoteEntry.js",
-      library: {type: "commonjs", name: "federated"},
       exposes: {
-        "./Button": "./federated/Button.js"
+        "./Button": "./federated-test/Button.js"
+      },
+      shared: {
+        react: deps.devDependencies.react,
+        "react-dom": deps.devDependencies["react-dom"]
       }
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || "development"),
     })
   ]
 };

federated-test/webpack.test.config.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const glob = require('glob');
+const webpack = require('webpack')
+const {ModuleFederationPlugin} = webpack.container
+const deps = require('../package.json')
+
+module.exports = {
+  entry: require.resolve('./index.js'),
+  output: {
+    path: path.resolve(__dirname, "./dist-test"),
+  },
+  target: "node",
+  resolve: {
+    fallback: {
+      path: false
+    }
+  },
+  mode: "none",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+    ]
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'federated',
+      filename: "remoteEntry.js",
+      library: {type: "commonjs-module", name: "federated"},
+      exposes: {
+        "./Button": "./federated-test/Button.js"
+      },
+      shared: {
+        react: deps.devDependencies.react,
+        "react-dom": deps.devDependencies["react-dom"]
+      }
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || "test"),
+    })
+  ]
+};

index.js

@@ -0,0 +1,30 @@
+module.exports = function(remotePath,name) {
+  return `promise new Promise(res => {
+          let remote
+          const remotePath = "${remotePath}"
+          try {
+          remote = require(remotePath)['${name}']
+          } catch (e) {
+          delete require.cache[remotePath]
+          remote = require(remotePath)['${name}']
+          }
+          
+          if(!remote || !remote.get) {
+            return new Promise(function(delayResolve){
+              var interval = setInterval(function(){
+                 delete require.cache[remotePath]
+                 remote = require(remotePath);
+                if(require(remotePath)) {
+                  delayResolve(require(remotePath)['${name}']);
+                  clearInterval(interval);
+                }
+              }, 100)
+            }).then(function(){
+              setTimeout(function(){res(remote)},0)
+            })
+          }
+         
+          const proxy = {get:(request)=> remote.get(request),init:(arg)=>{try {return remote.init(arg)} catch(e){console.log('remote container already initialized')}}}
+          res(proxy)
+          })`
+}

jest.config.js

@@ -0,0 +1,25 @@
+process.env.TZ = 'UTC';
+
+module.exports = {
+  moduleNameMapper: {
+    // moduleNameMapper: {
+    //   '^react-dom$': compat,
+    //   '^react$': compat,
+    // },
+    '\\.(css|scss|png|ico)$': 'identity-obj-proxy',
+    '\\.(svg|jpg|png)': '<rootDir>/jest /file-mock.js',
+  },
+  testPathIgnorePatterns: ['/node_modules/'],
+  transformIgnorePatterns: [
+  ],
+  setupFiles: [
+    './jest/jestSetup.js',
+  ],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  // Used to run Garbage Collection after each describe block
+  // This will reduce our memory used in CI
+  // https://dev.to/pustovalov_p/reducing-jest-memory-usage-1ina
+  setupFilesAfterEnv: [
+    './jest/force-gc.js',
+  ],
+};

jest/file-mock.js

@@ -0,0 +1 @@
+export default "";

jest/force-gc.js

@@ -0,0 +1,16 @@
+
+global.testRuns = 0;
+
+// Used to run Garbage Collection after each describe block
+// This will reduce our memory used in CI
+// We limit it to run after every 10 decribe blocks to
+// maintain the speed of testing all test files
+// https://dev.to/pustovalov_p/reducing-jest-memory-usage-1ina
+afterEach(() => {
+  global.testRuns++;
+
+  if (global.testRuns < 10) return null;
+  if (global.gc) global.gc();
+
+  global.testRuns = 0;
+});

jest/jestSetup.js

@@ -0,0 +1,6 @@
+import Enzyme, { shallow, render, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() });
+

package.json

@@ -4,21 +4,37 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "build": "webpack --config federated/webpack.build.config.js",
-    "webpack:test": "webpack --config test/webpack.test.config.js",
-    "jest": "jest test/bundle.test.js",
-    "test": "yarn webpack:test && yarn jest"
+    "build": "webpack --config federated-test/webpack.test.config.js && webpack --config federated-cross-test/webpack.test.config.js",
+    "webpack:test": "yarn build && webpack --config test/webpack.test.config.js",
+    "jest": "jest test/bundle.test.js -u",
+    "test": "yarn webpack:test && yarn jest",
+    "build:demo": "cd federated-test && webpack --config ./webpack.build.config",
+    "serve": "webpack --config federated-cross-test/webpack.build.config.js && webpack --config federated-test/webpack.build.config.js && concurrently \"PORT=3000 serve ./federated-cross-test/dist\" \"PORT=3001 serve ./federated-test/dist\" "
   },
   "devDependencies": {
-    "jest": "26.6.3",
-    "react": "17.0.2",
-    "webpack-cli": "4.6.0"
+    "jest": "^26.6.3",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "synchronous-promise": "^2.0.15",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
+    "@webpack-cli/serve": "^1.3.1",
     "babel-loader": "^8.2.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.2",
+    "html-webpack-plugin": "^5.3.1",
+    "react-async-ssr": "^0.7.2",
+    "react-lazy-ssr": "^0.2.4",
+    "react-ssr-prepass": "^1.4.0",
+    "serve": "^11.3.2",
     "webpack": "^5.33.2",
-    "webpack-node-externals": "^2.5.2"
+    "webpack-node-externals": "^2.5.2",
+    "webpack-virtual-modules": "^0.4.2",
+    "workerpool": "^6.1.4"
   }
 }