From 6259e945dc856f0d55947a4c6339b4e6c905a2a9 Mon Sep 17 00:00:00 2001
From: fupeng <fupenglxy@gmail.com>
Date: Sun, 22 May 2022 22:30:16 +0800
Subject: [PATCH] feat: support wp5

---
 README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 index.js  | 22 ++++++++++++++++++
 2 files changed, 89 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 055d866..cd70b19 100644
--- a/README.md
+++ b/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 `react-scripts@4.x` `react-scripts@5.x` version.
+
+## Features
+
+- Support `react-scripts@5.x` 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)
diff --git a/index.js b/index.js
index 505ca71..f584e5b 100644
--- a/index.js
+++ b/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;
     };
 }