feat: add remix style routing (hannoeru#169)

* feat: add remix style routing example * chore!: renamed nuxtStyle to routeStyle to support different naming conventions * fix: deps issue
tauzN · Feb 18, 2022 · 6dfd002 · 6dfd002
1 parent 3c025bf
commit 6dfd002
Show file tree

Hide file tree

Showing 41 changed files with 842 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -245,15 +245,16 @@ export default {
 
 Default SFC route block parser.
 
-### nuxtStyle
+### routeStyle
 
-- **Type:** `boolean`
-- **Default:** `false`
+- **Type:** `'next' | 'nuxt' | 'remix'`
+- **Default:** `next`
 
-Use Nuxt.js style dynamic routing
+Use file system dynamic routing supporting: 
 
-More details:
-[File System Routing](https://nuxtjs.org/docs/2.x/features/file-system-routing)
+- [Nextjs Routing](https://nextjs.org/docs/routing/introduction)
+- [Nuxtjs Routing](https://nuxtjs.org/docs/2.x/features/file-system-routing)
+- [Remix Routing](https://remix.run/docs/en/v1/guides/routing)
 
 ### resolver
 

diff --git a/...-style/src/features/admin/pages/index.vue → ...ples/nuxt-style/src/admin/pages/index.vue b/...-style/src/features/admin/pages/index.vue → ...ples/nuxt-style/src/admin/pages/index.vue
diff --git a/examples/nuxt-style/src/features/admin/pages/admin.vue b/examples/nuxt-style/src/features/admin/pages/admin.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>features/admin/pages/admin.vue</p>
+  <p>located in features/admin/pages folder</p>
+</template>
+
+<route>
+{
+  meta: {
+    requiresAuth: false
+  }
+}
+</route>
diff --git a/examples/nuxt-style/src/features/dashboard/pages/dashboard.vue b/examples/nuxt-style/src/features/dashboard/pages/dashboard.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>features/dashboard/pages/dashboard.vue</p>
+  <p>located in features/dashboard/pages folder</p>
+</template>
+
+<route>
+{
+  meta: {
+    requiresAuth: true
+  }
+}
+</route>
diff --git a/examples/nuxt-style/src/features/dashboard/pages/welcome.vue b/examples/nuxt-style/src/features/dashboard/pages/welcome.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>features/dashboard/pages/welcome.vue</p>
+  <p>located in features/dashboard/pages folder</p>
+</template>
+
+<route>
+{
+  meta: {
+    requiresAuth: true
+  }
+}
+</route>
diff --git a/examples/nuxt-style/src/pages/index.vue b/examples/nuxt-style/src/pages/index.vue
@@ -14,7 +14,7 @@
       markdown
     </router-link> |
     <router-link to="/xxx">
-      not exits
+      not exists
     </router-link> |
     <router-link to="/features/dashboard">
       features:dashboard

diff --git a/examples/nuxt-style/vite.config.ts b/examples/nuxt-style/vite.config.ts
@@ -11,11 +11,12 @@ const config = defineConfig({
     Pages({
       dirs: [
         { dir: 'src/pages', baseRoute: '' },
-        { dir: 'src/features/admin/pages', baseRoute: 'admin' },
+        { dir: 'src/features/**/pages', baseRoute: 'features' },
+        { dir: 'src/admin/pages', baseRoute: 'admin' },
       ],
       extensions: ['vue', 'md'],
       syncIndex: false,
-      nuxtStyle: true,
+      routeStyle: 'nuxt',
     }),
     Markdown(),
   ],

diff --git a/examples/react/src/pages/index.tsx b/examples/react/src/pages/index.tsx
@@ -15,7 +15,7 @@ const index: React.FC = () => {
         components
       </Link> |
       <Link to="/xxx">
-        not exits
+        not exists
       </Link>
     </div>
   )

diff --git a/examples/remix-style/.gitignore b/examples/remix-style/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/remix-style/index.html b/examples/remix-style/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/remix-style/package.json b/examples/remix-style/package.json
@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "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-dom": "^6.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-router-config": "^5.0.6",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^1.2.0",
+    "cross-env": "^7.0.3",
+    "nodemon": "^2.0.15",
+    "typescript": "^4.5.5",
+    "vite": "^2.8.2",
+    "vite-plugin-pages": "workspace:*"
+  }
+}
diff --git a/examples/remix-style/src/favicon.svg b/examples/remix-style/src/favicon.svg
diff --git a/examples/remix-style/src/index.css b/examples/remix-style/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/remix-style/src/logo.svg b/examples/remix-style/src/logo.svg
diff --git a/examples/remix-style/src/main.tsx b/examples/remix-style/src/main.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {
+  useRoutes,
+  BrowserRouter as Router,
+} from 'react-router-dom'
+
+import './index.css'
+
+import routes from '~react-pages'
+
+// eslint-disable-next-line no-console
+console.log(routes)
+
+function App() {
+  return useRoutes(routes)
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
diff --git a/examples/remix-style/src/pages/$.tsx b/examples/remix-style/src/pages/$.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/remix-style/src/pages/[sitemap.xml].tsx b/examples/remix-style/src/pages/[sitemap.xml].tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Component: React.FC = () => {
+  return (
+    <div>
+      <p>[sitemap.xml].tsx</p>
+    </div>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/__marketing.tsx b/examples/remix-style/src/pages/__marketing.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+
+const Component: React.FC = () => {
+  return (
+    <div>
+      <p>pathless layout route</p>
+      <Outlet />
+    </div>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/__marketing/product.tsx b/examples/remix-style/src/pages/__marketing/product.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Component: React.FC = () => {
+  return (
+    <div>
+        <p>__marketing/product.tsx</p>
+    </div>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/__test__/index.tsx b/examples/remix-style/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/remix-style/src/pages/about.tsx b/examples/remix-style/src/pages/about.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+
+const Component: React.FC = () => {
+  return (
+    <div>
+      <p>about layout route</p>
+      <Outlet />
+    </div>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/about/index.tsx b/examples/remix-style/src/pages/about/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const index: React.FC = () => {
+  return (
+    <p>about/index.tsx</p>
+  )
+}
+
+export default index
diff --git a/examples/remix-style/src/pages/blog.authors.tsx b/examples/remix-style/src/pages/blog.authors.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Component: React.FC = () => {
+  return (
+    <p>blog.authors.tsx</p>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/blog.tsx b/examples/remix-style/src/pages/blog.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Link, Outlet } from 'react-router-dom'
+
+const Blog: React.FC = () => {
+  return (
+    <div>
+      <p>blog.tsx</p>
+      <Link to="/blog/1b234bk12b3">
+        id: 1b234bk12b3
+      </Link> |
+      <Link to="/blog/today">
+        today
+      </Link> |
+      <Link to="/blog/today/xxx">
+        not exists
+      </Link>
+      <Outlet />
+    </div>
+  )
+}
+
+export default Blog
diff --git a/examples/remix-style/src/pages/blog/$.tsx b/examples/remix-style/src/pages/blog/$.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const all: React.FC = () => {
+  return (
+    <p>blog ...all route</p>
+  )
+}
+
+export default all
diff --git a/examples/remix-style/src/pages/blog/$id.tsx b/examples/remix-style/src/pages/blog/$id.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+
+const Component: React.FC = () => {
+  const { id } = useParams()
+  return (
+    <>
+      <p>blog/$id.tsx: { id }</p>
+    </>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/blog/index.tsx b/examples/remix-style/src/pages/blog/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Component: React.FC = () => {
+  return (
+    <>
+      <p>blog/index.tsx</p>
+    </>
+  )
+}
+
+export default Component
diff --git a/examples/remix-style/src/pages/blog/today/index.tsx b/examples/remix-style/src/pages/blog/today/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const index: React.FC = () => {
+  return (
+    <p>blog/today/index.tsx</p>
+  )
+}
+
+export default index
diff --git a/examples/remix-style/src/pages/index.tsx b/examples/remix-style/src/pages/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const index: React.FC = () => {
+  return (
+    <div>
+      <p>index.tsx</p>
+      <Link to="/blog">
+        blog
+      </Link> |
+      <Link to="/blog/authors">
+        blog authors
+      </Link> |
+      <Link to="/about">
+        about
+      </Link> |
+      <Link to="/product">
+        product
+      </Link> |
+      <Link to="/sitemap.xml">
+        sitemap.xml
+      </Link> |
+      <Link to="/xxx">
+        not exists
+      </Link>
+    </div>
+  )
+}
+
+export default index