[LEOP-287]Apply all customize features to CRA5-Part2

packages/react-scripts/CHANGELOG.md

@@ -1,5 +1,10 @@
 # `backpack-react-scripts` Change Log
 
+## 10.0.1
+
+- Extract the existing custom features from the BRS fork branch
+  - Extract custom `ssr` features into backpack-addons folder
+
 ## 10.0.0
 
 ### Features

packages/react-scripts/README.md

@@ -1,7 +1,35 @@
-# react-scripts
+# backpack-react-scripts
 
-This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
-Please refer to its documentation:
+### **Important:** The currently supported version of **CRA** by `backpack-react-scripts` is up to `v5+`. Versions above this may not work.
 
-- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
-- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
+This package is a fork of [Create React App](https://github.com/facebookincubator/create-react-app) (specifically the
+`react-scripts` package). It's intended to be used in conjuction with `create-react-app` like so:
+
+```sh
+npx create-react-app my-app --scripts-version=@skyscanner/backpack-react-scripts --template @skyscanner/backpack --use-npm
+
+# start your app development like you normally would with `create-react-app`
+cd my-app
+npm start
+```
+
+## What is different in our fork?
+
+- Compilation of uncompiled Backpack components (specifically JSX).
+- Skyscanner specific template with Backpack components integrated out of the box. Published as `@skyscanner/cra-template-backpack`
+- CSS Modules enabled by default for all `.css` & `.scss` files.
+- Ability to create a bundle for server side rending.
+- Automatic chunking is disabled by default.
+- **`css.html` & `js.html`**: New files in the `build/` output folder. These are html partials that include `<script />` and `<link />` references to the various static assets output by webpack. Useful if automatic chunking is turned on and you don't want to worry about order.
+- A bunch of configuration options via `"backpack-react-scripts"` field in `package.json`:
+  - `crossOriginLoading`: Modify the default behaviour, see [docs](https://webpack.js.org/configuration/output/#output-crossoriginloading).
+  - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation. Includes `["@skyscanner/bpk-", "bpk-", "saddlebag-"]` by default.
+  - `enableAutomaticChunking`: Boolean, opt in to automatic chunking of vendor, common and app code.
+  - `vendorsChunkRegex`: String, Regex for picking what goes into the `vendors` chunk. See `cacheGroups` in webpack docs. Dependent on `enableAutomaticChunking` being enabled
+  - `amdExcludes`: Array of module names to exclude from AMD parsing. Incldues `["lodash"]` by default.
+  - `externals`: exposing the Webpack config to modify externals, see [docs](https://webpack.js.org/configuration/externals/).
+  - `ssrExternals`: Similar to above, but for `ssr.js` only.
+  - `cssModules`: Boolean, true by default.
+  - `sriEnabled`: Sets if SRI is to be used during build to add integrity hash for files, see [docs](https://github.com/waysact/webpack-subresource-integrity/blob/master/README.md).
+    - **Note** if this is enabled, `crossOriginLoading` value is overriden with `anonymous` in order for it to output with the integrity value.
+  - `ignoreCssWarnings`: Boolean, false by default. Allows the ability to supress CSS ordering issues when its safe to allow mixed order when it has not effect on output, see [docs](https://github.com/webpack-contrib/mini-css-extract-plugin#remove-order-warnings). False by default

packages/react-scripts/bin/react-scripts.js

@@ -19,16 +19,28 @@ const spawn = require('react-dev-utils/crossSpawn');
 const args = process.argv.slice(2);
 
 const scriptIndex = args.findIndex(
-  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
+  x =>
+    x === 'build' ||
+    x === 'build-ssr' ||
+    x === 'eject' ||
+    x === 'start' ||
+    x === 'start-ssr' ||
+    x === 'test'
 );
 const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
 const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 
-if (['build', 'eject', 'start', 'test'].includes(script)) {
+if (
+  ['build', 'build-ssr', 'eject', 'start', 'start-ssr', 'test'].includes(script)
+) {
   const result = spawn.sync(
     process.execPath,
     nodeArgs
-      .concat(require.resolve('../scripts/' + script))
+      .concat(
+        require.resolve(
+          `../scripts/${script === 'build-ssr' ? 'build' : script}`
+        )
+      )
       .concat(args.slice(scriptIndex + 1)),
     { stdio: 'inherit' }
   );

packages/react-scripts/config/css.html

@@ -3,4 +3,3 @@
     href="<%= file %>"
   />
   <% }); %>
-

packages/react-scripts/config/js.html

@@ -1,4 +1,3 @@
 <% _.each(htmlWebpackPlugin.files.js, file => { %>
     <script src="<%= file %>"></script>
     <% }); %>
-

packages/react-scripts/config/paths.js

@@ -63,6 +63,8 @@ module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
   appBuild: resolveApp(buildPath),
+  appBuildWeb: resolveApp('build/web'), // #backpack-addons
+  appBuildSsr: resolveApp('build/ssr'), // #backpack-addons
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -78,6 +80,7 @@ module.exports = {
   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
+  appSsrJs: resolveApp('src/ssr.js'), // #backpack-addons
 };
 
 // @remove-on-eject-begin
@@ -89,6 +92,8 @@ module.exports = {
   appPath: resolveApp('.'),
   appBuild: resolveApp(buildPath),
   appPublic: resolveApp('public'),
+  appBuildWeb: resolveApp('build/web'), // #backpack-addons
+  appBuildSsr: resolveApp('build/ssr'), // #backpack-addons
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
   appPackageJson: resolveApp('package.json'),
@@ -103,6 +108,7 @@ module.exports = {
   appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
+  appSsrJs: resolveApp('src/ssr.js'), // #backpack-addons
   // These properties only exist before ejecting:
   ownPath: resolveOwn('.'),
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
@@ -125,7 +131,9 @@ if (
   module.exports = {
     dotenv: resolveOwn(`${templatePath}/.env`),
     appPath: resolveApp('.'),
-    appBuild: resolveOwn(path.join('../..', buildPath)),
+    appBuild: resolveOwn(`../../${buildPath}`),
+    appBuildWeb: resolveOwn('../../build/web'), // #backpack-addons
+    appBuildSsr: resolveOwn('../../build/ssr'), // #backpack-addons
     appPublic: resolveOwn(`${templatePath}/public`),
     appHtml: resolveOwn(`${templatePath}/public/index.html`),
     appIndexJs: resolveModule(resolveOwn, `${templatePath}/src/index`),
@@ -141,6 +149,7 @@ if (
     appTsBuildInfoFile: resolveOwn('node_modules/.cache/tsconfig.tsbuildinfo'),
     swSrc: resolveModule(resolveOwn, `${templatePath}/src/service-worker`),
     publicUrlOrPath,
+    appSsrJs: resolveOwn(`${templatePath}/src/ssr.js`), // #backpack-addons
     // These properties only exist before ejecting:
     ownPath: resolveOwn('.'),
     ownNodeModules: resolveOwn('node_modules'),