feat: support react-router v5, v6

baozouai · Jun 17, 2023 · 0963453 · 0963453
1 parent e236a58
commit 0963453
Show file tree

Hide file tree

Showing 86 changed files with 1,967 additions and 249 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,14 @@
     "prepublishOnly": "npm run clean && npm run build",
     "release": "npm publish",
     "prepare": "husky install",
-    "demo": "nr -C playgrounds/react start"
+    "demo5:browser": "nr -C playgrounds/react-router-5 start:browser",
+    "demo5:hash": "nr -C playgrounds/react-router-5 start:hash",
+    "demo5:js:browser": "nr -C playgrounds/react-router-5-js start:browser",
+    "demo5:js:hash": "nr -C playgrounds/react-router-5-js start:hash",
+    "demo6:browser": "nr -C playgrounds/react-router-6 start:browser",
+    "demo6:hash": "nr -C playgrounds/react-router-6 start:hash",
+    "demo6:js:browser": "nr -C playgrounds/react-router-6-js start:browser",
+    "demo6:js:hash": "nr -C playgrounds/react-router-6-js start:hash"
   },
   "dependencies": {
     "glob": "7.2.0"
@@ -46,6 +53,7 @@
     "@types/glob": "7.2.0",
     "@types/node": "^18.15.13",
     "bumpp": "^9.1.0",
+    "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.35.0",
     "husky": "^8.0.3",

diff --git a/playgrounds/.eslintrc.js b/playgrounds/.eslintrc.js
@@ -2,6 +2,13 @@ module.exports = {
   extends: '../.eslintrc.js',
   rules: {
     '@typescript-eslint/no-unsafe-assignment': 'off',
-    '@typescript-eslint/no-unsafe-call': 'off'
-  }
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    'no-console': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off'
+  },
+  globals: {
+    HISTORY_MODE: "readonly"
+  },
 }
diff --git a/playgrounds/react/tsconfig.json → playgrounds/react-router-5-js/jsconfig.json b/playgrounds/react/tsconfig.json → playgrounds/react-router-5-js/jsconfig.json
diff --git a/playgrounds/react-router-5-js/package.json b/playgrounds/react-router-5-js/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-router-5-js",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start:browser": "cross-env HISTORY_MODE=browser webpack serve --mode development",
+    "start:hash": "cross-env HISTORY_MODE=hash webpack serve --mode development"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "history": "^4.9.0",
+    "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "5.3.4",
+    "react-router-dom": "5.3.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@types/react-router": "5.1.20",
+    "@types/react-router-dom": "5.3.3",
+    "html-webpack-plugin": "^5.5.3",
+    "ts-loader": "^9.4.3",
+    "typescript": "^4.9.5",
+    "webpack": "^5.87.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}
diff --git a/playgrounds/react-router-5-js/public/index.html b/playgrounds/react-router-5-js/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>这是react-router-5-js</title>
+</head>
+<body>
+  <h1>这是react-router-5-js</h1>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/playgrounds/react-router-5-js/src/app.jsx b/playgrounds/react-router-5-js/src/app.jsx
@@ -0,0 +1,150 @@
+import React from 'react'
+
+import {
+  Route,
+  Switch,
+} from 'react-router-dom'
+import history, { Router } from '~history'
+const context = require.context('@/pages', true, /index\.page\./)
+
+const routePaths = context.keys().map((path) => {
+  const Component = context(path)
+  // 对于pages/index.page.js，认为是首页
+  path = path.replace(/\.(.*?)\/index\.page\.jsx?$/, '$1') || '/'
+  return {
+    path,
+    Component,
+  }
+})
+
+const commonLiStyle = { marginRight: 10, color: 'blue', cursor: 'pointer' }
+function Layout() {
+  return (
+    <>
+      <button onClick={() => { location.href = '/' }}>回到首页</button>
+      <ul>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.OPEN_ORDER({
+            /** 这里因为order下面又index.params.ts定义了传参类型，所以有参数类型提示，点击对应参数会跳到对应文件 */
+            order_id: '123',
+            enter_order_type: 'OPEN',
+            customer_names: ['name1', 'name2'],
+          })}
+        >
+          OPEN_ORDER
+        </li>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.TO_ORDER({
+            /** 这里因为order下面又index.params.ts定义了传参类型，所以有参数类型提示，点击对应参数会跳到对应文件 */
+            order_id: '123',
+            enter_order_type: 'OPEN',
+            customer_names: ['name1', 'name2'],
+          })}
+        >
+          TO_ORDER
+        </li>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.REPLACE_ORDER({
+            order_id: '123',
+            enter_order_type: 'REPLACE',
+            customer_names: ['name1', 'name2'],
+          })}
+        >
+          REPLACE_ORDER
+        </li>
+      </ul>
+
+      <ul>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.OPEN_ORDER_DETAIL()}
+        >
+          OPEN_ORDER_DETAIL
+        </li>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.TO_ORDER_DETAIL()}
+        >
+          TO_ORDER_DETAIL
+        </li>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.REPLACE_ORDER_DETAIL()}
+        >
+          REPLACE_ORDER_DETAIL
+        </li>
+      </ul>
+
+      <ul>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.OPEN_MY()}
+        >
+          OPEN_MY
+        </li>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.TO_MY()}
+        >
+          TO_MY
+        </li>
+        <li
+          style={commonLiStyle}
+          onClick={() => history.OPEN_MY()}
+        >
+          REPLACE_MY
+        </li>
+      </ul>
+    <hr />
+
+    {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      routePaths.filter(({ path }) => !['/order', '/order/detail', '/my'].includes(path)).map(({ path }) => {
+        const name = path.slice(1).toUpperCase().replace(/\//g, '_') || '$INDEX'
+        return (
+          <ul key={name}>
+        <li
+          style={commonLiStyle}
+          onClick={() => { history[`OPEN_${name}`]() }}
+        >
+          OPEN_{name}
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => { history[`TO_${name}`]() }}
+        >
+          TO_{name}
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => { history[`OPEN_${name}`]() }}
+        >
+          REPLACE_{name}
+        </li>
+      </ul>
+        )
+      })
+    }
+    <hr />
+
+    </>
+  )
+}
+
+function App() {
+  return (
+    <Router>
+      <Layout/>
+      <Switch>
+          {routePaths.map(({ path, Component }) => {
+            return <Route path={path} exact component={Component.default} key={path} />
+          })}
+      </Switch>
+    </Router>
+  )
+}
+
+export default App
diff --git a/playgrounds/react-router-5-js/src/browser_history.js b/playgrounds/react-router-5-js/src/browser_history.js
@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history'
+
+export default createBrowserHistory()
diff --git a/playgrounds/react/src/global.d.ts → ...grounds/react-router-5-js/src/global.d.ts b/playgrounds/react/src/global.d.ts → ...grounds/react-router-5-js/src/global.d.ts
@@ -8,3 +8,5 @@ declare const require: {
     <T>(id: string): T;
   };
 };
+
+declare const HISTORY_MODE: 'hash' | 'browser'
diff --git a/playgrounds/react-router-5-js/src/hash_history.js b/playgrounds/react-router-5-js/src/hash_history.js
@@ -0,0 +1,2 @@
+import { createHashHistory } from 'history'
+export default createHashHistory()
diff --git a/playgrounds/react-router-5-js/src/index.jsx b/playgrounds/react-router-5-js/src/index.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+import ReactDOM from 'react-dom/client'
+import App from './app'
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)
diff --git a/playgrounds/react-router-5-js/src/pages/index.page.js b/playgrounds/react-router-5-js/src/pages/index.page.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default () => {
+  return (<div>这是首页</div>)
+}
diff --git a/playgrounds/react-router-5-js/src/pages/my/index.page.jsx b/playgrounds/react-router-5-js/src/pages/my/index.page.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default () => {
+  return (
+    <div>这是我的页</div>
+  )
+}
diff --git a/playgrounds/react-router-5-js/src/pages/my/setting/detail/index.page.jsx b/playgrounds/react-router-5-js/src/pages/my/setting/detail/index.page.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default () => {
+  return (
+    <div>这是我的设置详情页</div>
+  )
+}
diff --git a/...react/src/pages/my/setting/index.page.tsx → ...r-5-js/src/pages/my/setting/index.page.js b/...react/src/pages/my/setting/index.page.tsx → ...r-5-js/src/pages/my/setting/index.page.js
diff --git a/playgrounds/react-router-5-js/src/pages/my/setting/info/index.page.jsx b/playgrounds/react-router-5-js/src/pages/my/setting/info/index.page.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default () => {
+  return (
+    <div>这是我的设置Info页</div>
+  )
+}
diff --git a/...src/pages/my/setting/info/index.params.ts → ...src/pages/my/setting/info/index.params.ts b/...src/pages/my/setting/info/index.params.ts → ...src/pages/my/setting/info/index.params.ts
diff --git a/playgrounds/react-router-5-js/src/pages/order/detail/index.page.jsx b/playgrounds/react-router-5-js/src/pages/order/detail/index.page.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { useLocation } from 'react-router'
+import qs from 'qs'
+export default () => {
+  const { search } = useLocation()
+  console.log(qs.parse(search))
+  return (
+    <div>这是订单详情页</div>
+  )
+}
diff --git a/playgrounds/react-router-5-js/src/pages/order/index.page.js b/playgrounds/react-router-5-js/src/pages/order/index.page.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { useSearchParams } from '~history'
+
+export default () => {
+  const params = useSearchParams()
+  console.log(params, params.customer_names)
+  return (
+    <div>这是order</div>
+  )
+}
diff --git a/...nds/react/src/pages/order/index.params.ts → ...uter-5-js/src/pages/order/index.params.ts b/...nds/react/src/pages/order/index.params.ts → ...uter-5-js/src/pages/order/index.params.ts
@@ -3,4 +3,5 @@ export default interface Params {
   order_id: string
   /** 随便写的订单类型 */
   enter_order_type: 'OPEN' | 'TO' | 'REPLACE'
-}
+  customer_names: string[]
+}
diff --git a/playgrounds/react-router-5-js/src/pages/order/xxx/index.page.jsx b/playgrounds/react-router-5-js/src/pages/order/xxx/index.page.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { useParams } from 'react-router'
+export default () => {
+  const params = useParams()
+  console.log(params)
+
+  return (
+    <div>这是order 的xxx</div>
+  )
+}
diff --git a/...react/src/pages/order/xxx/index.params.ts → ...-5-js/src/pages/order/xxx/index.params.ts b/...react/src/pages/order/xxx/index.params.ts → ...-5-js/src/pages/order/xxx/index.params.ts
diff --git a/playgrounds/react-router-5-js/webpack.config.js b/playgrounds/react-router-5-js/webpack.config.js
@@ -0,0 +1,64 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { DefinePlugin } = require('webpack')
+const GenerateHistoryMethodWebpackPlugin = require('../../dist/genetate-history-method-webpack-plugin.cjs')
+const isHash = process.env.HISTORY_MODE === 'hash'
+module.exports = {
+  entry: './src/index.jsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/', // 重要，否则会报错
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(t|j)sx?$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-react'],
+          },
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          }],
+      },
+    ],
+  },
+  plugins: [
+    new DefinePlugin({
+      HISTORY_MODE: JSON.stringify(process.env.HISTORY_MODE),
+    }),
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+    }),
+    new GenerateHistoryMethodWebpackPlugin({
+      pagesRootPath: path.resolve(__dirname, 'src/pages'),
+      originHistoryModuleName: isHash ? '@/hash_history' : '@/browser_history',
+      mode: process.env.HISTORY_MODE,
+      reactRouterVersion: 5,
+    }),
+    // ...其他插件
+  ],
+  devServer: {
+    historyApiFallback: true,
+    port: 3000,
+  },
+  ignoreWarnings: [
+    /was not found in '~history/,
+  ],
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createBrowserHistory } from 'history'

		export default createBrowserHistory()
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,3 +8,5 @@ declare const require: { @@
         <T>(id: string): T;
       };
     };
+    declare const HISTORY_MODE: 'hash' | 'browser'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { createHashHistory } from 'history'
		export default createHashHistory()