feat: support wp5

Author: fupengl

README.md

@@ -2,7 +2,14 @@
 
 Use `single-spa` `systemjs` in your `create-react-app`.
 
-> Quickly adapt cra as a submodule of single-spa !!!
+> Quickly adapt `react-scripts` as a submodule of single-spa !!!   
+> Support `[email protected]` `[email protected]` version.
+
+## Features
+
+- Support `[email protected]` compatible with common configuration migrations 
+- Output `systemjs` library auto add `SystemJSPublicPathPlugin`
+- Support `ReactFastRefresh` hot refresh
 
 ## Installation
 
@@ -35,11 +42,69 @@ module.exports = {
 const { override, overrideDevServer } = require("customize-cra");
 
 module.exports = {
-  webpack: override(rewiredSingleSpa()),
+  webpack: override(
+    rewiredSingleSpa({
+      orgName: "you",
+      projectName: "test",
+      reactPackagesAsExternal: true,
+      peerDepsAsExternal: true,
+      orgPackagesAsExternal: true,
+    })
+  ),
   devServer: overrideDevServer(rewiredSingleSpaDevServer()),
 };
 ```
 
+## Options
+
+### orgName
+Type: `string`   
+The name of the organization this application is written for.
+
+### projectName
+Type: `string`   
+The name of the current project. This usually matches the git repo's name.
+
+### entry
+Type: `string`   
+Default: `src/{orgName}-{projectName}.{js|jsx|ts|tsx}` `src/index.{js|jsx|ts|tsx}`   
+The entry file.
+
+### outputFilename
+Type: `string`   
+Default:    
+    - development `{orgName}-{projectName}.[contenthash:8].js`   
+    - production `{orgName}-{projectName}.js`
+
+### rootDirectoryLevel
+Type: `number`   
+This is the rootDirectoryLevel that is passed to https://github.com/joeldenning/systemjs-webpack-interop.
+
+### reactPackagesAsExternal
+Type: `boolean`
+This will `react` `react-dom` as webpack externals or not.
+
+### orgPackagesAsExternal
+Type: `boolean`   
+This changes whether package names that start with @your-org-name are treated as webpack externals or not.
+
+### peerDepsAsExternal
+Type: `boolean`
+This will package.json `peerDependencies` as webpack externals or not.
+
+## FQA
+
+### FastRefresh invalid
+- If `react` `react-dom` is external, `react-dev-tool` must be installed to refresh automatically. 
+For details, please see https://github.com/facebook/react/issues/17552
+- Check whether the ws connection is normal, you can set in `.env` file
+  - `WDS_SOCKET_PORT` "2002"
+  - `WDS_SOCKET_HOST` "localhost"
+  - `WDS_SOCKET_PATH` "/projectName" **Please start with "/"**
+  > The default hotreload client uses the relative website protocol, 
+  which is the protocol of the main base. It can use the localhost 
+  protocol and the local development port.
+
 ## License
 
 MIT © [fupengl](https://github.com/fupengl)

index.js

@@ -150,6 +150,28 @@ function rewiredSingleSpa({
 
         disableCSSExtraction(config);
 
+        // for wp5
+        // https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5
+        if (webpackMajorVersion == 5) {
+            config.plugins.push(
+                new webpack.ProvidePlugin({
+                    process: "process/browser.js",
+                    Buffer: ["buffer", "Buffer"],
+                })
+            );
+            config.resolve.fallback = Object.assign(config.resolve.fallback || {}, {
+                url: require.resolve("url"),
+                fs: require.resolve("fs"),
+                assert: require.resolve("assert"),
+                crypto: require.resolve("crypto-browserify"),
+                http: require.resolve("stream-http"),
+                https: require.resolve("https-browserify"),
+                os: require.resolve("os-browserify/browser"),
+                buffer: require.resolve("buffer"),
+                stream: require.resolve("stream-browserify"),
+            });
+        }
+
         return config;
     };
 }