feat(kkt): Update dependency react-scripts to v5. #198

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
           node-version: 14
 
       - name: Look Changelog
-        uses: jaywcjlove/[email protected].6
+        uses: jaywcjlove/[email protected].8
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           filter-author: (小弟调调™|Renovate Bot)

core/README.md

@@ -256,7 +256,8 @@ KKT uses the `homepage` field to determine the root URL in the built HTML file.
 Runs the project in development mode.  
 
 ```bash
-npm run bootstrap
+# npm run bootstrap
+npm run hoist
 npm run build
 
 npm run lib:watch

core/package.json

@@ -6,6 +6,8 @@
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
+    "build": "tsbb build --file-names src/bin/kkt.ts --file-names src/scripts/build.ts --file-names src/overrides/config.ts --file-names src/scripts/start.ts --file-names src/scripts/testk.ts --no-esm",
+    "watch": "tsbb watch --file-names src/bin/kkt.ts --file-names src/scripts/build.ts --file-names src/overrides/config.ts --file-names src/scripts/start.ts --file-names src/scripts/testk.ts --no-esm",
     "test": "tsbb test",
     "coverage": "tsbb test --coverage"
   },
@@ -35,24 +37,25 @@
   },
   "dependencies": {
     "@babel/register": "7.16.5",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.7.3",
-    "@tsbb/babel-preset-tsbb": "1.14.2",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@tsbb/babel-preset-tsbb": "1.15.0",
     "@types/fs-extra": "9.0.13",
     "@types/minimist": "1.2.2",
+    "@types/mini-css-extract-plugin": "2.4.0",
+    "@types/react-dev-utils": "9.0.9",
     "@types/semver": "7.3.8",
-    "@types/webpack": "4.41.27",
-    "@types/webpack-dev-server": "3.11.3",
+    "@types/webpack": "5.28.0",
     "fs-extra": "10.0.0",
     "minimist": "1.2.5",
-    "mocker-api": "2.9.2",
-    "react-scripts": "4.0.3",
-    "request": "2.88.2",
-    "sass": "1.42.1",
+    "mini-css-extract-plugin": "2.4.5",
+    "mocker-api": "2.9.4",
+    "react-scripts": "5.0.0",
+    "sass": "^1.45.1",
     "semver": "7.3.5",
-    "ts-node": "10.0.0",
+    "ts-node": "10.4.0",
     "typescript": "4.3.5",
-    "webpack": "4.44.2"
+    "webpack": "^5.65.0"
   }
 }

core/src/scripts/start.ts

@@ -1,7 +1,11 @@
 process.env.NODE_ENV = 'development';
 
+import fs from 'fs';
 import webpack, { Configuration } from 'webpack';
-import WebpackDevServer, { ProxyConfigArrayItem } from 'webpack-dev-server';
+import WebpackDevServer from 'webpack-dev-server';
+import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
+import redirectServedPath from 'react-dev-utils/redirectServedPathMiddleware';
+import noopServiceWorkerMiddleware from 'react-dev-utils/noopServiceWorkerMiddleware';
 import { KKTRC, DevServerConfigFunction } from '../utils/loaderConf';
 import { reactScripts, isWebpackFactory, proxySetup } from '../utils/path';
 import { overridePaths } from '../overrides/paths';
@@ -55,7 +59,7 @@ export default async function start(argvs: StartArgs) {
         /**
          * Modify Client Server Port
          */
-        await overridesChoosePort(overrideWebpackConf.devServer.port);
+        await overridesChoosePort(Number(overrideWebpackConf.devServer.port));
         (Object.keys(overrideWebpackConf.devServer) as Array<keyof typeof overrideWebpackConf.devServer>).forEach(
           (keyName) => {
             (overrideDevServerConfig as any)[keyName] = overrideWebpackConf.devServer[keyName];
@@ -71,7 +75,7 @@ export default async function start(argvs: StartArgs) {
 
     // override config in memory
     require.cache[require.resolve(devServerConfigPath)].exports = (
-      proxy: ProxyConfigArrayItem[],
+      proxy: WebpackDevServer.ProxyArray,
       allowedHost: string,
     ) => {
       let serverConf = createDevServerConfig(proxy, allowedHost);
@@ -80,6 +84,35 @@ export default async function start(argvs: StartArgs) {
       } else {
         serverConf = { ...overrideDevServerConfig, ...serverConf };
       }
+      /**
+       * [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
+       * (Use `node --trace-deprecation ...` to show where the warning was created)
+       * [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
+       */
+      delete serverConf.onAfterSetupMiddleware;
+      delete serverConf.onBeforeSetupMiddleware;
+      serverConf.setupMiddlewares = (middlewares, devServer) => {
+        // Keep `evalSourceMapMiddleware`
+        // middlewares before `redirectServedPath` otherwise will not have any effect
+        // This lets us fetch source contents from webpack for the error overlay
+        devServer.app.use(evalSourceMapMiddleware(devServer));
+
+        if (fs.existsSync(paths.proxySetup)) {
+          // This registers user provided middleware for proxy reasons
+          require(paths.proxySetup)(devServer.app);
+        }
+
+        // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+        devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
+
+        // This service worker file is effectively a 'no-op' that will reset any
+        // previous service worker registered for the same host:port combination.
+        // We do this in development to avoid hitting the production cache if
+        // it used the same host and port.
+        // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+        devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+        return middlewares;
+      };
       return serverConf;
     };
     // For real-time output of JS, For Chrome Plugin

core/src/utils/getStyleLoaders.ts

@@ -1,21 +1,57 @@
-import webpack, { RuleSetUseItem } from 'webpack';
+import { RuleSetUseItem, LoaderContext } from 'webpack';
 import postcssNormalize from 'postcss-normalize';
+// @ts-ignore
+import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
 import { ParsedArgs } from 'minimist';
 import { paths } from './path';
 
+/** https://github.com/webpack-contrib/css-loader/blob/master/test/validate-options.test.js */
 export interface CssOptions {
   importLoaders?: number;
+  import?:
+    | boolean
+    | {
+        filter: (url: string, media: unknown, resourcePath: string) => boolean;
+      };
   sourceMap?: boolean;
+  esModule?: boolean;
+  exportType?: 'array' | 'string' | 'css-style-sheet';
+  url?:
+    | boolean
+    | {
+        filter: (url: string, resourcePath: string) => boolean;
+      };
   modules?:
     | boolean
-    | string
+    | 'global'
+    | 'local'
+    | 'pure'
+    | 'icss'
     | {
+        mode?: 'global' | 'local' | 'pure' | 'icss' | (() => 'local');
         localIdentName?: string;
+        localIdentContext?: string;
+        localIdentHashSalt?: string;
+        localIdentHashFunction?: string;
+        localIdentHashDigest?: string;
+        localIdentHashDigestLength?: string;
+        localIdentRegExp?: string | RegExp;
+        exportGlobals?: boolean;
+        namedExport?: boolean;
+        exportOnlyLocals?: boolean;
+        exportLocalsConvention?:
+          | 'asIs'
+          | 'camelCase'
+          | 'camelCaseOnly'
+          | 'dashes'
+          | 'dashesOnly'
+          | ((localName: string) => string);
+        auto?: boolean | RegExp | (() => boolean);
         getLocalIdent?: (
-          context: webpack.loader.LoaderContext,
+          loaderContext: LoaderContext<unknown>,
+          // context: webpack.loader.LoaderContext,
           localIdentName: string,
           localName: string,
-          options: object,
         ) => string;
       };
 }
@@ -29,10 +65,7 @@ export type StyleLoadersOptions<T> = ParsedArgs & {
 
 /**
  * 方法来源
- * https://github.com/facebook/create-react-app/blob/39689239c18a1d77fb303e285b26beb1a4b650c0/packages/react-scripts/config/webpack.config.js#L107-L166
- * @param cssOptions
- * @param options
- * @param preProcessor
+ * https://github.com/facebook/create-react-app/blob/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/webpack.config.js#L118-L197
  */
 export const getStyleLoaders = <T>(
   cssOptions: CssOptions,
@@ -66,6 +99,7 @@ export const getStyleLoaders = <T>(
       // Necessary for external CSS imports to work
       // https://github.com/facebook/create-react-app/issues/2677
       ident: 'postcss',
+      config: false,
       plugins: () => [
         require('postcss-flexbugs-fixes'),
         require('postcss-preset-env')({
@@ -89,12 +123,12 @@ export const getStyleLoaders = <T>(
       options: {
         sourceMap: options.isEnvProduction ? options.shouldUseSourceMap : options.isEnvDevelopment,
         root: paths.appSrc,
-      } as any,
+      },
     });
     loaders.push({
       loader: require.resolve(preProcessor),
       options: {
-        sourceMap: options.isEnvProduction ? options.shouldUseSourceMap : options.isEnvDevelopment,
+        sourceMap: true,
         ...options.preProcessorOptions,
       },
     });

core/src/utils/loaderConf.ts

@@ -36,7 +36,7 @@ export type LoaderConfOptions = ParsedArgs & {
 };
 
 export type DevServerConfigFunction = (
-  proxy: WebpackDevServer.ProxyConfigArrayItem[],
+  proxy: WebpackDevServer.ProxyArray,
   allowedHost: string,
 ) => WebpackDevServer.Configuration;
 

core/tsconfig.json

@@ -10,10 +10,7 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "outDir": "lib",
-    "baseUrl": ".",
-    "paths": {
-      "*": ["node_modules/*", "src/type/*"]
-    }
+    "baseUrl": "."
   },
-  "include": ["src/**/*", "src/type/global.d.ts"]
+  "include": ["src/**/*", "src/*", "src/global.d.ts"]
 }

example/basic/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "react-app",
+    "react-app/jest"
+  ]
+}

example/basic/package.json

@@ -24,12 +24,6 @@
   "devDependencies": {
     "kkt": "6.11.0"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

example/basic/src/App.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import logo from './logo.svg';
 import styles from './App.module.css';
 import './App.css';

example/basic/src/App.test.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
 });

example/less/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "react-app",
+    "react-app/jest"
+  ]
+}