chore: setting up dependency factories

manual/package.json

@@ -42,7 +42,7 @@
     "react-dom": "file:../node_modules/react-dom",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "webpack": "^4.29.6",
+    "webpack": "file:../node_modules/webpack",
     "webpack-dev-server": "^3.2.1",
     "webpack-merge": "^4.2.1"
   }

manual/webpack/webpack.dev.js

@@ -18,16 +18,14 @@ module.exports = commonPaths => ({
     ]
   },
   optimization: {
-    namedModules: true,
-    namedChunks: true,
     runtimeChunk: {
       name: "webpackRuntime"
     },
-    splitChunks: {
-      chunks: "all",
-      maxInitialRequests: Infinity,
-      minSize: 0,
-    }
+  //   splitChunks: {
+  //     chunks: "all",
+  //     maxInitialRequests: Infinity,
+  //     minSize: 0,
+  //   }
   },
   devServer: {
     contentBase: commonPaths.outputPath,

manual/webpack/webpack.prod.js

@@ -4,31 +4,17 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = commonPaths => ({
-  mode: "production",
+  mode: "development",
   entry: commonPaths.entry,
   output: {
-    filename: `${commonPaths.jsFolder}/[name].[hash].js`,
+    filename: `${commonPaths.jsFolder}/[name].[fullhash].js`,
     path: commonPaths.outputPath,
     chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`
   },
   optimization: {
-    mergeDuplicateChunks: true,
-    minimizer: [
-      new TerserPlugin({
-        // Use multi-process parallel running to improve the build speed
-        // Default number of concurrent runs: os.cpus().length - 1
-        parallel: true,
-        // Enable file caching
-        cache: true,
-        sourceMap: true
-      }),
-      new OptimizeCSSAssetsPlugin()
-    ],
+    mergeDuplicateChunks: false,
     // Keep the runtime chunk seperated to enable long term caching
     // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: {
-      name: "webpackRuntime"
-    }
   },
 
   module: {
@@ -49,6 +35,5 @@ module.exports = commonPaths => ({
       "Access-Control-Allow-Headers": "*"
     }
   },
-  plugins: [new WriteFilePlugin(), new CleanWebpackPlugin()],
   devtool: "inline-source-map"
 });

manual/webpack/webpackConfigFactory.js

@@ -4,9 +4,10 @@ const webpackMerge = require("webpack-merge");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
 const WriteFilePlugin = require("write-file-webpack-plugin");
+const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 const common = require("./webpack.common");
 const paths = require("./paths");
-const URLImportPlugin = require("../../webpack");
+const { ContainerPlugin } = require("../../");
 
 const envs = {
   development: "dev",
@@ -16,7 +17,6 @@ const envs = {
 /* eslint-disable global-require,import/no-dynamic-require */
 const env = envs[process.env.NODE_ENV || "development"];
 const envConfig = require(`./webpack.${env}.js`);
-const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
 
 module.exports = (siteId, options) => {
   const commonPaths = paths(siteId);
@@ -31,20 +31,16 @@ module.exports = (siteId, options) => {
     envConfig(commonPaths),
     {
       plugins: [
-        new WriteFilePlugin(),
-        new URLImportPlugin({
-          manifestName,
-          fileName: "importManifest.js",
-          basePath: ``,
-          publicPath: `//localhost:300${siteId}/`,
-          writeToFileEmit: false,
-          filter: null,
-          debug: true,
-        }),
-        new HtmlWebpackPlugin({
-          template: templatePath,
-          inject: true
+        new ContainerPlugin({
+          name: "remoteEntry",
+          expose: {
+            Title: "./src/components/Title/index.js"
+          }
         })
+        // new HtmlWebpackPlugin({
+        //   template: templatePath,
+        //   inject: true
+        // })
       ]
     },
     options

manual/website1/package.json

@@ -22,7 +22,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "8.0.6",
     "react-hot-loader": "4.12.18",
-    "webpack": "4.41.5",
+    "webpack": "^5.0.0-beta.13",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1",
     "write-file-webpack-plugin": "4.5.1"

manual/website2/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "manual:prod": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=production webpack && cp serve.json dist/serve.json && serve dist -l 3002",
     "manual:dev": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=development node  node_modules/webpack-dev-server/bin/webpack-dev-server.js",
-    "manual:debug": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=production node --inspect node_modules/webpack-dev-server/bin/webpack-dev-server.js"
+    "manual:debug": "cd ../../ && cd manual/website2 && cross-env NODE_ENV=development node --inspect node_modules/webpack-dev-server/bin/webpack-dev-server.js"
   },
   "interleave": {
     "src/components/Title/index.js": "TitleComponent",
@@ -32,7 +32,7 @@
     "serve": "11.3.0",
     "sass-loader": "8.0.2",
     "style-loader": "1.1.3",
-    "webpack": "4.41.5",
+    "webpack": "^5.0.0-beta.13",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1",
     "webpack-merge": "4.2.2",
@@ -58,6 +58,7 @@
     "scriptjs": "^2.5.9",
     "tiny-mobx-form": "^0.8.3",
     "webpack-external-import": "file:../../",
-    "wrapper-webpack-plugin": "^2.1.0"
+    "wrapper-webpack-plugin": "^2.1.0",
+    "webpack-virtual-modules": "^0.2.1"
   }
 }

manual/website2/src/App.jsx

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import { hot } from "react-hot-loader";
-import Title from "./components/Title";
 
 class App extends Component {
   constructor(props) {

manual/website2/src/components/hello-world/index.jsx

@@ -1,12 +1,10 @@
 import React, { Component } from "react";
-import Title from "../Title";
 
 const Test = props => <div>{props.title}</div>;
 
 const TestTwo = (props, state, actions) => <div>{state.title}</div>;
 
 export const externalFunction = () => {
-  console.log(Title.constructor);
   window.wasExternalFunctionCalled = true;
   console.log("some function thats externalized");
 };

manual/website2/webpack.config.js

@@ -1,10 +1,7 @@
-const webpack = require("webpack");
 const configFactory = require("../webpack/webpackConfigFactory");
 
 const siteId = 2;
 module.exports = configFactory(siteId, {
   plugins: [
-
   ]
 });
-

manual/website3/package.json

@@ -34,7 +34,7 @@
     "sass-loader": "8.0.2",
     "style-loader": "1.1.3",
     "serve": "11.3.0",
-    "webpack": "4.41.5",
+    "webpack": "^5.0.0-beta.13",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1",
     "webpack-merge": "4.2.2",

manual/website3/webpack.config.js

@@ -1,4 +1,4 @@
-const ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
+// const ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
 const configFactory = require("../webpack/webpackConfigFactory");
 
 const siteId = 3;
@@ -8,14 +8,17 @@ module.exports = configFactory(siteId, {
     rules: [
       {
         test: /\.css$/i,
-        use: [ExtractCssChunks.loader, "css-loader"]
+        use: [
+          // ExtractCssChunks.loader,
+          "css-loader"
+        ]
       }
     ]
   },
   plugins: [
-    new ExtractCssChunks({
-      filename: "[name].css",
-      chunkFilename: "[name].css"
-    })
+    // new ExtractCssChunks({
+    //   filename: "[name].css",
+    //   chunkFilename: "[name].css"
+    // })
   ]
 });

package.json

@@ -33,19 +33,19 @@
     "lint": "eslint --ext .js,.ts,.tsx src --fix",
     "kill-ports": "lsof -ti:3001 | xargs kill -9; lsof -ti:3002 | xargs kill -9; lsof -ti:3003 | xargs kill -9",
     "demo:one": "cd manual/website1; yarn manual:dev",
-    "demo:one:prod": "cd manual/website1; yarn && yarn manual:prod",
-    "demo:one:debug": "cd manual/website1; yarn && yarn manual:debug",
+    "demo:one:prod": "cd manual/website1; yarn manual:prod",
+    "demo:one:debug": "cd manual/website1; yarn manual:debug",
     "demo:two": "cd manual/website2; yarn manual:dev",
-    "demo:two:prod": "cd manual/website2; yarn && yarn manual:prod",
-    "demo:two:debug": "cd manual/website2; yarn && yarn manual:debug",
+    "demo:two:prod": "cd manual/website2; yarn manual:prod",
+    "demo:two:debug": "cd manual/website2; yarn manual:debug",
     "demo:three": "cd manual/website3; yarn manual:dev",
     "demo:three:debug": "cd manual/website3; yarn && yarn manual:debug",
     "demo:three:prod": "cd manual/website3; yarn && yarn manual:prod",
     "demo": "cd manual; yarn && cd ../; concurrently \"yarn compile\"  \"yarn demo:one\"  \"yarn demo:two\"  \"yarn demo:three\"",
     "demo:prod": "cd manual; yarn && cd ../; concurrently \"yarn kill-ports\" \"yarn compile\" \"yarn demo:one:prod\" \"yarn demo:two:prod\" \"yarn demo:three:prod \"",
     "demo:debug": "cd manual; yarn && cd ../; concurrently \"yarn kill-ports\" \"yarn compile\" \"yarn demo:one\" \"yarn demo:two:debug\" \"yarn demo:three\"",
     "demo:fast": "yarn compile && yarn demo:one:fast | yarn demo:two:fast",
-    "prepare": "BABEL_ENV=production yarn compile",
+    "prepare": "cross-env BABEL_ENV=production yarn compile",
     "semantic-release": "semantic-release",
     "commit": "npx git-cz"
   },
@@ -55,11 +55,11 @@
     "@babel/core": "7.8.4",
     "@babel/helper-module-imports": "7.8.3",
     "@babel/plugin-proposal-class-properties": "7.8.3",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
     "@babel/plugin-proposal-optional-chaining": "7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-react-jsx": "7.8.3",
     "@babel/plugin-transform-runtime": "7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
     "@babel/preset-env": "7.8.4",
     "@babel/preset-react": "7.8.3",
     "@babel/traverse": "7.8.4",
@@ -70,7 +70,7 @@
     "babel-watch": "7.0.0",
     "commitizen": "4.0.3",
     "concurrently": "5.1.0",
-    "cross-env": "7.0.0",
+    "cross-env": "^7.0.0",
     "cz-conventional-changelog": "3.1.0",
     "eslint": "6.8.0",
     "eslint-config-airbnb": "18.0.1",
@@ -99,16 +99,23 @@
     "semantic-release": "17.0.1",
     "source-map": "0.7.3",
     "travis-github-status": "1.6.3",
-    "webpack": "4.41.5",
+    "webpack": "^5.0.0-beta.13",
     "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.10.1"
   },
   "peerDependencies": {
-    "webpack": "^4.40.2"
+    "webpack": "^5.0.0-beta.13"
   },
   "babel": {
     "presets": [
-      "@babel/preset-env",
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "node": true
+          }
+        }
+      ],
       "@babel/preset-react"
     ],
     "plugins": [

src/index.js

@@ -1,8 +1,8 @@
 import corsImport from "./corsImport";
 import ExternalComponent from "./react";
 
-import ContainerPlugin from "./ContainerPlugin";
-import ContainerReferencePlugin from "./ContainerReferencePlugin";
+import ContainerPlugin from "./webpack-core/ContainerPlugin";
+import ContainerReferencePlugin from "./webpack-core/ContainerReferencePlugin";
 
 export {
   corsImport,