feat: solid js support (#151)

* add solid support * quick solid example and docs * pnpm lock file * solid test + example (vue copy) * solid test fix - removed markdown - removed other example - removed invalid jsx * solid generate spec * fix: removed '$' from readme * revert: route types change * chore: remove test asset react type Co-authored-by: hanlee <me@hanlee.co>
hannoeru · Feb 18, 2022 · 15d7fc8 · 15d7fc8
1 parent 9bba42d
commit 15d7fc8
Show file tree

Hide file tree

Showing 41 changed files with 888 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -29,7 +29,16 @@ Install:
 
 ```bash
 npm install -D vite-plugin-pages
-npm install react-router react-router-dom react-router-config
+npm install react-router react-router-dom 
+```
+
+### Solid
+
+Install:
+
+```bash
+npm install -D vite-plugin-pages
+npm install solid-app-router
 ```
 
 ### Vite config
@@ -105,6 +114,34 @@ ReactDOM.render(
 /// <reference types="vite-plugin-pages/client-react" />
 ```
 
+### Solid
+
+**experimental**
+
+```js
+import { render } from 'solid-js/web'
+import { Router, useRoutes } from 'solid-app-router'
+import routes from '~solid-pages'
+
+const Routes = useRoutes(routes)
+
+render(
+  () => (
+    <Router>
+      <Routes />
+    </Router>
+  ),
+  document.getElementById('root') as HTMLElement,
+)
+```
+
+**Type**
+
+```ts
+// vite-env.d.ts
+/// <reference types="vite-plugin-pages/client-solid" />
+```
+
 ## Configuration
 
 To use custom configuration, pass your options to Pages when instantiating the
@@ -178,6 +215,7 @@ export default {
 - **Default:**
   - Vue: `['vue', 'ts', 'js']`
   - React: `['tsx', 'jsx']`
+  - Solid: `['tsx', 'jsx', 'ts', 'js']`
 
 An array of valid file extensions for pages.
 

diff --git a/client-solid.d.ts b/client-solid.d.ts
@@ -0,0 +1,5 @@
+declare module '~solid-pages' {
+  import type { RouteDefinition } from 'solid-app-router'
+  const routes: RouteDefinition[]
+  export default routes
+}
diff --git a/examples/solid/.gitignore b/examples/solid/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/examples/solid/index.html b/examples/solid/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <title>Solid App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+
+  <script src="/src/index.tsx" type="module"></script>
+</body>
+
+</html>
diff --git a/examples/solid/package.json b/examples/solid/package.json
@@ -0,0 +1,20 @@
+{
+  "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": {
+    "solid-app-router": "^0.2.1",
+    "solid-js": "^1.3.3"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "nodemon": "^2.0.15",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.11",
+    "vite-plugin-pages": "workspace:*",
+    "vite-plugin-solid": "^2.2.4"
+  }
+}
diff --git a/examples/solid/src/admin/pages/index.tsx b/examples/solid/src/admin/pages/index.tsx
@@ -0,0 +1,6 @@
+export default function Index() {
+  return <>
+    <p>/admin/index.tsx</p>
+    <p>located in features /admin/pages folder</p>
+  </>
+}
diff --git a/examples/solid/src/features/admin/pages/admin.tsx b/examples/solid/src/features/admin/pages/admin.tsx
@@ -0,0 +1,6 @@
+export default function Admin() {
+  return <>
+    <p>features/admin/pages/admin.tsx</p>
+    <p>located in features/admin/pages folder</p>
+  </>
+}
diff --git a/examples/solid/src/features/dashboard/pages/dashboard.tsx b/examples/solid/src/features/dashboard/pages/dashboard.tsx
@@ -0,0 +1,6 @@
+export default function Dashboard() {
+  return <>
+    <p>features/dashboard/pages/dashboard.tsx</p>
+    <p>located in features/dashboard/pages folder</p>
+  </>
+}
diff --git a/examples/solid/src/features/dashboard/pages/welcome.tsx b/examples/solid/src/features/dashboard/pages/welcome.tsx
@@ -0,0 +1,6 @@
+export default function Welcome() {
+  return <>
+    <p>features/dashboard/pages/welcome.tsx</p>
+    <p>located in features/dashboard/pages folder</p>
+  </>
+}
diff --git a/examples/solid/src/index.tsx b/examples/solid/src/index.tsx
@@ -0,0 +1,14 @@
+import { render } from 'solid-js/web'
+import { Router, useRoutes } from 'solid-app-router'
+import routes from '~solid-pages'
+
+const Routes = useRoutes(routes)
+
+render(
+  () => (
+    <Router>
+      <Routes />
+    </Router>
+  ),
+  document.getElementById('root') as HTMLElement,
+)
diff --git a/examples/solid/src/pages/[...all].tsx b/examples/solid/src/pages/[...all].tsx
@@ -0,0 +1,5 @@
+export default function All() {
+  return <>
+    <div>...all route</div>
+  </>
+}
diff --git a/examples/solid/src/pages/[sensor].tsx b/examples/solid/src/pages/[sensor].tsx
@@ -0,0 +1,8 @@
+import { Outlet } from 'solid-app-router'
+
+export default function SensorLayout() {
+  return <>
+    nested dynamic view:
+    <Outlet />
+  </>
+}
diff --git a/examples/solid/src/pages/[sensor]/current.tsx b/examples/solid/src/pages/[sensor]/current.tsx
@@ -0,0 +1,8 @@
+import { useParams } from 'solid-app-router'
+
+export default function Current() {
+  const { sensor } = useParams < {sensor: string}>()
+  return <>
+    <p>/{ sensor}/current.tsx</p>
+  </>
+}
diff --git a/examples/solid/src/pages/__test__/index.tsx b/examples/solid/src/pages/__test__/index.tsx
@@ -0,0 +1,5 @@
+export default function Index() {
+  return <>
+      test default exclude
+  </>
+}
diff --git a/examples/solid/src/pages/about.tsx b/examples/solid/src/pages/about.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'solid-app-router'
+
+export default function AboutLayout() {
+  return <>
+    <div>
+    nested about view:
+      <Outlet />
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/about/[id].tsx b/examples/solid/src/pages/about/[id].tsx
@@ -0,0 +1,16 @@
+import { Link, Outlet, useParams } from 'solid-app-router'
+
+export default function IdLayout() {
+  const { id } = useParams<{id: string}>()
+  return <>
+    <div>
+      <div>
+      about/[id].tsx: { id }
+      </div>
+      <Link href="/about/1b234bk12b3/more">
+        more deep
+      </Link>
+      <Outlet />
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/about/[id]/more.tsx b/examples/solid/src/pages/about/[id]/more.tsx
@@ -0,0 +1,7 @@
+export default function More() {
+  return <>
+    <div class="deep-more">
+    deep nested: about/[id]/more.tsx
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/about/[id]/nested.tsx b/examples/solid/src/pages/about/[id]/nested.tsx
@@ -0,0 +1,7 @@
+export default function Nested() {
+  return <>
+    <div class="deep-nested">
+    deep nested: about/[id]/nested.tsx
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/about/index.tsx b/examples/solid/src/pages/about/index.tsx
@@ -0,0 +1,12 @@
+import { Link } from 'solid-app-router'
+
+export default function Index() {
+  return <>
+    <div>
+    about/index.tsx
+      <Link href="/about/1b234bk12b3">
+      id: 1b234bk12b3
+      </Link>
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/blog/[id].tsx b/examples/solid/src/pages/blog/[id].tsx
@@ -0,0 +1,13 @@
+import { useParams } from 'solid-app-router'
+
+export default function Id() {
+  const { id } = useParams<{id: string}>()
+  return <>
+    <div>
+      <p>blog/[id].tsx: { id }</p>
+      <p>
+        {/* {{ $route }} */}
+      </p>
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/blog/index.tsx b/examples/solid/src/pages/blog/index.tsx
@@ -0,0 +1,18 @@
+import { Link } from 'solid-app-router'
+
+export default function Index() {
+  return <>
+    <div>
+    blog/index.tsx
+      <Link href="/blog/1b234bk12b3">
+      id: 1b234bk12b3
+      </Link> |
+      <Link href="/blog/today">
+      today
+      </Link> |
+      <Link href="/blog/today/xxx">
+      child - not found
+      </Link>
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/blog/today/[...all].tsx b/examples/solid/src/pages/blog/today/[...all].tsx
@@ -0,0 +1,5 @@
+export default function All() {
+  return <>
+    <div>blog/today ...all route</div>
+  </>
+}
diff --git a/examples/solid/src/pages/blog/today/index.tsx b/examples/solid/src/pages/blog/today/index.tsx
@@ -0,0 +1,7 @@
+export default function Index() {
+  return <>
+    <div>
+    blog/today/index.tsx
+    </div>
+  </>
+}
diff --git a/examples/solid/src/pages/components.tsx b/examples/solid/src/pages/components.tsx
@@ -0,0 +1,5 @@
+export default function Components() {
+  return <>
+    <h1>Test Components name</h1>
+  </>
+}
diff --git a/examples/solid/src/pages/index.tsx b/examples/solid/src/pages/index.tsx
@@ -0,0 +1,30 @@
+import { Link } from 'solid-app-router'
+
+export default function Index() {
+  return <>
+    <div>
+      <p>index.tsx</p>
+      <Link href="/blog">
+      blog
+      </Link> |
+      <Link href="/about">
+      about
+      </Link> |
+      <Link href="/components">
+      components
+      </Link> |
+      <Link href="/xxx/xxx">
+      not exits
+      </Link> |
+      <Link href="/features/dashboard">
+      features:dashboard
+      </Link> |
+      <Link href="/features/admin">
+      features:admin
+      </Link> |
+      <Link href="/admin">
+      admin
+      </Link>
+    </div>
+  </>
+}
diff --git a/examples/solid/tsconfig.json b/examples/solid/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client", "vite-plugin-pages/client-solid"]
+  }
+}
diff --git a/examples/solid/vite.config.ts b/examples/solid/vite.config.ts
@@ -0,0 +1,22 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import pages from 'vite-plugin-pages'
+
+export default defineConfig({
+  plugins: [
+    solid(),
+    pages({
+      dirs: [
+        { dir: resolve(__dirname, './src/pages'), baseRoute: '' },
+        { dir: 'src/features/**/pages', baseRoute: 'features' },
+        { dir: 'src/admin/pages', baseRoute: 'admin' },
+      ],
+      extensions: ['tsx', 'md'],
+    }),
+  ],
+  build: {
+    target: 'esnext',
+    polyfillDynamicImport: false,
+  },
+})
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "esno": "^0.14.1",
     "playwright": "^1.19.1",
     "react-router": "^6.2.1",
+    "solid-app-router": "^0.2.1",
     "tsup": "^5.11.13",
     "typescript": "^4.5.5",
     "vite": "^2.8.4",