fix: fail to get params type path

baozouai · Jun 16, 2023 · 4afbab0 · 4afbab0
1 parent 8e8119d
commit 4afbab0
Show file tree

Hide file tree

Showing 27 changed files with 1,889 additions and 70 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 *.md
 test
-vitest.config.ts
+vitest.config.ts
+.eslintrc.js
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,5 +6,5 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/prefer-ts-expect-error': 'off',
     'unicorn/prefer-node-protocol': 'off',
-  },
+  }
 }
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -36,6 +36,16 @@ yarn add genetate-history-method-webpack-plugin -D
 # or
 npm i genetate-history-method-webpack-plugin -D
 ```
+
+确保你的依赖有`qs`，否则请安装
+
+```sh
+pnpm add qs -D
+# or
+yarn add qs -D
+# or
+npm i qs -D
+```
 ## ⚙️ 参数
 
 ```ts

diff --git a/README.md b/README.md
@@ -37,6 +37,17 @@ yarn add genetate-history-method-webpack-plugin -D
 npm i genetate-history-method-webpack-plugin -D
 ```
 
+make sure your dependencies have `qs`，otherwise please install
+
+```sh
+pnpm add qs -D
+# or
+yarn add qs -D
+# or
+npm i qs -D
+```
+
+
 
 ## ⚙️ Options
 

diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "tag": "bumpp",
     "prepublishOnly": "npm run clean && npm run build",
     "release": "npm publish",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "demo": "nr -C playgrounds/react start"
   },
   "dependencies": {
     "glob": "7.2.0"

diff --git a/playgrounds/.eslintrc.js b/playgrounds/.eslintrc.js
@@ -0,0 +1,7 @@
+module.exports = {
+  extends: '../.eslintrc.js',
+  rules: {
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off'
+  }
+}
diff --git a/playgrounds/react/package.json b/playgrounds/react/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve --mode development"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "history": "^5.3.0",
+    "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "6.1.0",
+    "react-router-dom": "6.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "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/public/index.html b/playgrounds/react/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>React App</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
diff --git a/playgrounds/react/src/global.d.ts b/playgrounds/react/src/global.d.ts
@@ -0,0 +1,10 @@
+declare const require: {
+  context(
+    directory: string,
+    useSubdirectories: boolean,
+    regExp: RegExp,
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
diff --git a/playgrounds/react/src/history.ts b/playgrounds/react/src/history.ts
@@ -0,0 +1,5 @@
+import type { BrowserHistory } from 'history'
+import { createBrowserHistory } from 'history'
+
+export type { BrowserHistory }
+export default createBrowserHistory()
diff --git a/playgrounds/react/src/index.tsx b/playgrounds/react/src/index.tsx
@@ -0,0 +1,159 @@
+import ReactDOM from 'react-dom'
+import type { BrowserRouterProps } from 'react-router-dom'
+import {
+  Outlet,
+  Route,
+  Router,
+  Routes,
+} from 'react-router-dom'
+import history from '~history'
+import { useLayoutEffect, useRef, useState } from 'react'
+import type { BrowserHistory } from './history'
+import originHistory from './history'
+
+const context = require.context('@/pages', true, /index\.page\./)
+
+const routePaths = (context.keys()).map((path: string) => {
+  const Component = context<{ default: () => JSX.Element }>(path)
+  path = path.replace(/\.(.*?)\/index\.page\.tsx$/, '$1')
+  return {
+    path,
+    Component,
+  }
+})
+
+/** 自己改造下BrowserRouter */
+function BrowserRouter({ children }: BrowserRouterProps) {
+  const historyRef = useRef<BrowserHistory>()
+  if (historyRef.current == null) {
+    // 如果为空，则创建
+    historyRef.current = originHistory
+  }
+
+  const history = historyRef.current
+  const [state, setState] = useState({
+    action: history.action,
+    location: history.location,
+  })
+
+  useLayoutEffect(() => {
+    /**
+     * popstate、push、replace时如果没有blokcers的话，会调用applyTx(nextAction)触发这里的setState
+     * function applyTx(nextAction: Action) {
+     *   action = nextAction;
+     * //  获取当前index和location
+     *   [index, location] = getIndexAndLocation();
+     *   listeners.call({ action, location });
+     * }
+     */
+    history.listen(setState)
+  }, [history])
+  // 一般变化的就是action和location
+  return (
+    <Router
+      children={children}
+      navigationType={state.action}
+      location={state.location}
+      navigator={history}
+    />
+  )
+}
+
+function Layout() {
+  return (
+    <>
+     <button onClick={() => originHistory.push('/')}>回到首页</button>
+
+      <ul>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.OPEN_ORDER({
+            /** 这里因为order下面又index.params.ts定义了传参类型，所以有参数类型提示，点击对应参数会跳到对应文件 */
+            order_id: '123',
+            enter_order_type: 'OPEN',
+          })}
+        >
+          OPEN ORDER
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.TO_ORDER({
+            order_id: '123',
+            enter_order_type: 'TO',
+          })}
+        >
+          TO ORDER
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.REPLACE_ORDER({
+            order_id: '123',
+            enter_order_type: 'REPLACE',
+          })}
+        >
+          REPLACE ORDER
+        </li>
+      </ul>
+
+      <ul>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.OPEN_ORDER_DETAIL()}
+        >
+          OPEN ORDER_DETAIL
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.TO_ORDER_DETAIL()}
+        >
+          TO ORDER_DETAIL
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.REPLACE_ORDER_DETAIL()}
+        >
+          REPLACE ORDER_DETAIL
+        </li>
+      </ul>
+
+      <ul>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.OPEN_MY()}
+        >
+          OPEN MY
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.TO_MY()}
+        >
+          TO MY
+        </li>
+        <li
+          style={{ marginRight: 10, color: 'blue', cursor: 'pointer' }}
+          onClick={() => history.OPEN_MY()}
+        >
+          REPLACE MY
+        </li>
+      </ul>
+    <hr />
+      <Outlet />
+    </>
+  )
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+          <Route path='/' element={<Layout/>}>
+            {routePaths.map(({ path, Component }) => {
+              return <Route path={path} element={<Component.default />} key={path} />
+            })}
+          </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/playgrounds/react/src/pages/my/index.page.tsx b/playgrounds/react/src/pages/my/index.page.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>这是我的页</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/my/setting/detail/index.page.tsx b/playgrounds/react/src/pages/my/setting/detail/index.page.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>这是我的设置详情页页</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/my/setting/index.page.tsx b/playgrounds/react/src/pages/my/setting/index.page.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>这是我的设置页</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/my/setting/info/index.page.tsx b/playgrounds/react/src/pages/my/setting/info/index.page.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>这是我的设置Info页</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/my/setting/info/index.params.ts b/playgrounds/react/src/pages/my/setting/info/index.params.ts
@@ -0,0 +1,6 @@
+export default interface Params {
+  /** 这是订单id */
+  order_id: string
+  /** 随便写的订单类型 */
+  order_type: 'CREATE' | 'UPDATE' | 'DELETE'
+}
diff --git a/playgrounds/react/src/pages/order/detail/index.page.tsx b/playgrounds/react/src/pages/order/detail/index.page.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>这是订单详情页</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/order/index.page.tsx b/playgrounds/react/src/pages/order/index.page.tsx
@@ -0,0 +1,10 @@
+import { useParams } from 'react-router'
+import ParamsType from './index.params'
+export default () => {
+  const params = useParams()
+  console.log(params);
+
+  return (
+    <div>这是order</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/order/index.params.ts b/playgrounds/react/src/pages/order/index.params.ts
@@ -0,0 +1,6 @@
+export default interface Params {
+  /** 这是订单id */
+  order_id: string
+  /** 随便写的订单类型 */
+  enter_order_type: 'OPEN' | 'TO' | 'REPLACE'
+}
diff --git a/playgrounds/react/src/pages/order/xxx/index.page.tsx b/playgrounds/react/src/pages/order/xxx/index.page.tsx
@@ -0,0 +1,9 @@
+import { useParams } from 'react-router'
+export default () => {
+  const params = useParams()
+  console.log(params)
+
+  return (
+    <div>这是order 的xxx</div>
+  )
+}
diff --git a/playgrounds/react/src/pages/order/xxx/index.params.ts b/playgrounds/react/src/pages/order/xxx/index.params.ts
@@ -0,0 +1,6 @@
+export default interface Params {
+  /** 这是XXX id */
+  xxx_id: string
+  /** 随便写的XXX类型 */
+  xxx_type: 'XXX_OPEN' | 'XXX_TO' | 'XXX_REPLACE'
+}
diff --git a/playgrounds/react/tsconfig.json b/playgrounds/react/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false,
+    "strictPropertyInitialization": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "moduleResolution": "Node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+  },
+  "include": ["src", "./webpack.config.js"]
+}