feat: react-router-config support

klarkc · May 4, 2021 · 0c86290 · 0c86290
1 parent 9f47510
commit 0c86290
Show file tree

Hide file tree

Showing 31 changed files with 871 additions and 260 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,7 @@
 {
   "extends": "@antfu/eslint-config",
-  "ignorePatterns": ["dist", "**/__*__/**"]
+  "ignorePatterns": ["dist", "**/__*__/**"],
+  "rules": {
+    "no-use-before-define": "off"
+  }
 }
diff --git a/client.d.ts b/client.d.ts
@@ -1,13 +1,17 @@
 declare module 'pages-generated' {
   // eslint-disable-next-line import/no-duplicates
   import { RouteRecordRaw } from 'vue-router'
-  const routes: RouteRecordRaw[]
+  // eslint-disable-next-line import/no-duplicates
+  import { RouteConfig } from 'react-router-config'
+  const routes: RouteRecordRaw[] | RouteConfig[]
   export default routes
 }
 
 declare module 'virtual:generated-pages' {
   // eslint-disable-next-line import/no-duplicates
   import { RouteRecordRaw } from 'vue-router'
-  const routes: RouteRecordRaw[]
+  // eslint-disable-next-line import/no-duplicates
+  import { RouteConfig } from 'react-router-config'
+  const routes: RouteRecordRaw[] | RouteConfig[]
   export default routes
 }
diff --git a/examples/nuxt-style/package.json b/examples/nuxt-style/package.json
@@ -15,7 +15,7 @@
     "cross-env": "^7.0.3",
     "nodemon": "^2.0.7",
     "typescript": "^4.2.4",
-    "vite": "^2.2.2",
+    "vite": "^2.2.4",
     "vite-plugin-md": "^0.6.3",
     "vite-plugin-pages": "workspace:*",
     "vite-plugin-restart": "^0.0.2"

diff --git a/examples/react/.gitignore b/examples/react/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/index.html b/examples/react/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "react",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "nodemon --watch ../../dist/*.js -x 'cross-env DEBUG=vite-plugin-pages:* vite'",
+    "build": "cross-env DEBUG=vite-plugin-pages vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router": "^5.2.0",
+    "react-router-config": "^5.1.1",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.4",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-router-config": "^5.0.2",
+    "@vitejs/plugin-react-refresh": "^1.3.3",
+    "cross-env": "^7.0.3",
+    "nodemon": "^2.0.7",
+    "typescript": "^4.2.4",
+    "vite": "^2.2.4",
+    "vite-plugin-pages": "workspace:*"
+  }
+}
diff --git a/examples/react/src/favicon.svg b/examples/react/src/favicon.svg
diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/examples/react/src/logo.svg b/examples/react/src/logo.svg
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {
+  BrowserRouter as Router,
+} from 'react-router-dom'
+import { renderRoutes } from 'react-router-config'
+import './index.css'
+import routes from 'virtual:generated-pages'
+
+console.log(routes)
+
+ReactDOM.render(
+  <Router>
+    {/* kick it all off with the root route */}
+    {renderRoutes(routes)}
+  </Router>,
+  document.getElementById('root'),
+)
+
+export {
+  routes,
+}
diff --git a/examples/react/src/pages/[...all].tsx b/examples/react/src/pages/[...all].tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const all: React.FC = () => {
+  return (
+    <p>...all route</p>
+  )
+}
+
+export default all
diff --git a/examples/react/src/pages/[sensor]/current.tsx b/examples/react/src/pages/[sensor]/current.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const current: React.FC = () => {
+  return (
+    <p>/[sensor]/current.vue</p>
+  )
+}
+
+export default current
diff --git a/examples/react/src/pages/__test__/index.tsx b/examples/react/src/pages/__test__/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const index: React.FC = () => {
+  return (
+    <p>test default exclude</p>
+  )
+}
+
+export default index
diff --git a/examples/react/src/pages/about.tsx b/examples/react/src/pages/about.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { renderRoutes, RouteConfigComponentProps } from 'react-router-config'
+
+const component: React.FC<RouteConfigComponentProps> = ({ route }) => {
+  return (
+    <>
+      <p>nested about view:</p>
+      {renderRoutes(route?.routes)}
+      {console.log(route)}
+    </>
+  )
+}
+
+export default component
diff --git a/examples/react/src/pages/about/index.tsx b/examples/react/src/pages/about/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const index: React.FC = () => {
+  return (
+    <p>about/index.vue</p>
+  )
+}
+
+export default index
diff --git a/examples/react/src/pages/blog/[id].tsx b/examples/react/src/pages/blog/[id].tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { matchRoutes, RouteConfigComponentProps } from 'react-router-config'
+import routes from 'virtual:generated-pages'
+
+const components: React.FC<RouteConfigComponentProps> = ({ location }) => {
+  return (
+    <>
+      <p>blog/[id].vue: { matchRoutes<{ id: string }>(routes, location.pathname)[0].match.params.id }</p>
+    </>
+  )
+}
+
+export default components
diff --git a/examples/react/src/pages/blog/index.tsx b/examples/react/src/pages/blog/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const components: React.FC = () => {
+  return (
+    <>
+      <p>blog/index.vue</p>
+      <Link to="/blog/1b234bk12b3">
+        id: 1b234bk12b3
+      </Link> |
+      <Link to="/blog/today">
+        today
+      </Link>
+    </>
+  )
+}
+
+export default components
diff --git a/examples/react/src/pages/blog/today/index.tsx b/examples/react/src/pages/blog/today/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const index: React.FC = () => {
+  return (
+    <p>blog/today/index.vue</p>
+  )
+}
+
+export default index
diff --git a/examples/react/src/pages/components.tsx b/examples/react/src/pages/components.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const components: React.FC = () => {
+  return (
+    <h1>Test Components name</h1>
+  )
+}
+
+export default components
diff --git a/examples/react/src/pages/index.tsx b/examples/react/src/pages/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const index: React.FC = () => {
+  return (
+    <div>
+      <p>index.vue</p>
+      <Link to="/blog">
+        blog
+      </Link> |
+      <Link to="/about">
+        about
+      </Link> |
+      <Link to="/components">
+        components
+      </Link> |
+      <Link to="/markdown">
+        markdown
+      </Link> |
+      <Link to="/xxx">
+        not exits
+      </Link>
+    </div>
+  )
+}
+
+export default index
diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["./src"]
+}
diff --git a/examples/react/vite.config.ts b/examples/react/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import Pages from 'vite-plugin-pages'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    reactRefresh(),
+    Pages({
+      pagesDir: [
+        { dir: 'src/pages', baseRoute: '' },
+        { dir: 'src/features/admin/pages', baseRoute: 'admin' },
+      ],
+      extensions: ['tsx'],
+      syncIndex: false,
+      importMode: 'sync',
+      replaceSquareBrackets: true,
+      react: true,
+    }),
+  ],
+})
diff --git a/examples/spa/package.json b/examples/spa/package.json
@@ -15,7 +15,7 @@
     "cross-env": "^7.0.3",
     "nodemon": "^2.0.7",
     "typescript": "^4.2.4",
-    "vite": "^2.2.2",
+    "vite": "^2.2.4",
     "vite-plugin-md": "^0.6.3",
     "vite-plugin-pages": "workspace:*",
     "vite-plugin-restart": "^0.0.2"

diff --git a/examples/ssr/package.json b/examples/ssr/package.json
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/compression": "^1.7.0",
     "@types/express": "^4.17.11",
-    "@types/node": "^14.14.41",
+    "@types/node": "^14.14.43",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vue/compiler-sfc": "^3.0.11",
     "@vue/server-renderer": "^3.0.11",
@@ -29,7 +29,7 @@
     "nodemon": "^2.0.7",
     "serve-static": "^1.14.1",
     "typescript": "^4.2.4",
-    "vite": "^2.2.2",
+    "vite": "^2.2.4",
     "vite-plugin-pages": "workspace:*",
     "vite-plugin-restart": "^0.0.2"
   }

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "deep-equal": "^2.0.5",
     "fast-glob": "^3.2.5",
     "json5": "^2.2.0",
+    "react-router-dom": "^5.2.0",
     "yaml": "^2.0.0-5"
   },
   "peerDependencies": {
@@ -48,17 +49,18 @@
     "@types/debug": "^4.1.5",
     "@types/deep-equal": "^1.0.1",
     "@types/glob-to-regexp": "^0.4.0",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^14.14.41",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^14.14.43",
+    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "eslint": "^7.25.0",
     "jest": "^26.6.3",
     "jest-esbuild": "^0.1.6",
-    "rollup": "^2.45.2",
+    "rollup": "^2.47.0",
     "ts-node": "^9.1.1",
-    "tsup": "^4.9.2",
+    "tsup": "^4.10.1",
     "typescript": "^4.2.4",
-    "vite": "^2.2.2",
+    "vite": "^2.2.4",
     "vue-router": "^4.0.6"
   }
 }