oedotme · DavidReinberger · Mar 31, 2025
diff --git a/examples/react-router-custom/vite.config.ts b/examples/react-router-custom/vite.config.ts
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 import generouted from '@generouted/react-router/plugin'
 
 export default defineConfig({
-  plugins: [react(), generouted()],
+  plugins: [react(), generouted.vite()],
   resolve: { alias: { '@': '/src' } },
 })
diff --git a/examples/react-router-mdx/readme.md b/examples/react-router-mdx/readme.md
@@ -12,7 +12,7 @@ import react from '@vitejs/plugin-react'
 import generouted from '@generouted/react-router/plugin'
 import mdx from '@mdx-js/rollup'
 
-export default defineConfig({ plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted()] })
+export default defineConfig({ plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted.vite()] })
 ```
 
 ## Adding pages

diff --git a/examples/react-router-mdx/src/pages/index.mdx b/examples/react-router-mdx/src/pages/index.mdx
@@ -16,7 +16,7 @@ import generouted from '@generouted/react-router/plugin'
 import mdx from '@mdx-js/rollup'
 
 export default defineConfig({
-  plugins: [{ enforce: 'pre', ...mdx() }, , react(), generouted()],
+  plugins: [{ enforce: 'pre', ...mdx() }, , react(), generouted.vite()],
   resolve: { alias: { '@': '/src' } },
 })
 ```

diff --git a/examples/react-router-mdx/vite.config.ts b/examples/react-router-mdx/vite.config.ts
@@ -4,6 +4,6 @@ import generouted from '@generouted/react-router/plugin'
 import mdx from '@mdx-js/rollup'
 
 export default defineConfig({
-  plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted()],
+  plugins: [{ enforce: 'pre', ...mdx() }, react(), generouted.vite()],
   resolve: { alias: { '@': '/src' } },
 })
diff --git a/examples/react-router-route-modals/vite.config.ts b/examples/react-router-route-modals/vite.config.ts
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 import generouted from '@generouted/react-router/plugin'
 
 export default defineConfig({
-  plugins: [react(), generouted()],
+  plugins: [react(), generouted.vite()],
   resolve: { alias: { '@': '/src' } },
 })
diff --git a/examples/react-router-rspack/.gitignore b/examples/react-router-rspack/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/examples/react-router-rspack/index.html b/examples/react-router-rspack/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/react-router-rspack/package.json b/examples/react-router-rspack/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@examples/react-router-webpack",
+  "private": true,
+  "description": "Generated file-based routes for React Router and Webpack example",
+  "author": "Omar Elhawary <oedotme@gmail.com> (https://omarelhawary.me)",
+  "license": "MIT",
+  "scripts": {
+    "dev": "rspack serve --config rspack.config.js",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@generouted/react-router": "^1.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.5"
+  },
+  "devDependencies": {
+    "@rspack/cli": "^1.3.0",
+    "@rspack/core": "^1.3.0",
+    "@rspack/plugin-react-refresh": "^1.0.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "html-webpack-plugin": "^5.6.0",
+    "prettier": "^3.4.2",
+    "react-refresh": "^0.17.0",
+    "ts-loader": "^9.5.1",
+    "tsconfig-paths-webpack-plugin": "^3.0.2",
+    "typescript": "^5.7.3"
+  }
+}
diff --git a/examples/react-router-rspack/readme.md b/examples/react-router-rspack/readme.md
@@ -0,0 +1,7 @@
+# Generouted + React Router Example
+
+## Preview
+
+Run this example online via [StackBlitz](https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/oedotme/generouted/tree/main/examples/react-router)
diff --git a/examples/react-router-rspack/rspack.config.js b/examples/react-router-rspack/rspack.config.js
@@ -0,0 +1,83 @@
+const path = require('path');
+const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');
+const rspack = require('@rspack/core');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const generouted = require('@generouted/react-router/plugin').default;
+
+const isDev = process.env.NODE_ENV === 'development';
+
+module.exports = { 
+  mode: isDev ? 'development' : 'production',
+  entry: './src/main.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[contenthash].js',
+    publicPath: '/',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    tsConfig: {
+      configFile: path.resolve(__dirname, 'tsconfig.json'),
+    }
+  },
+  module: {
+    // parser: {
+    //   javascript: {
+    //     importMetaContext: true,
+    //   },
+    // },
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: [/node_modules/],
+        loader: 'builtin:swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
+      {
+        test: /\.tsx$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            sourceMap: true,
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                  development: isDev,
+                  refresh: isDev,
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html',
+    }),generouted.webpack(),
+    isDev && new ReactRefreshPlugin(),
+    isDev && new rspack.HotModuleReplacementPlugin(),
+  ],
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'dist'),
+    },
+    historyApiFallback: true,
+    port: 3001,
+    hot: true,
+  },
+}; 
diff --git a/examples/react-router-rspack/src/main.tsx b/examples/react-router-rspack/src/main.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import { Routes } from '@generouted/react-router';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+
+root.render(<Routes />);
diff --git a/examples/react-router-rspack/src/pages/(auth)/_layout.tsx b/examples/react-router-rspack/src/pages/(auth)/_layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router'
+
+export default function Layout() {
+  return (
+    <div>
+      <h1>Auth Layout</h1>
+      <Outlet />
+    </div>
+  )
+}
diff --git a/examples/react-router-rspack/src/pages/(auth)/login.tsx b/examples/react-router-rspack/src/pages/(auth)/login.tsx
@@ -0,0 +1,3 @@
+export default function Login() {
+  return <h1>Login</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/(auth)/register.tsx b/examples/react-router-rspack/src/pages/(auth)/register.tsx
@@ -0,0 +1,3 @@
+export default function Register() {
+  return <h1>Register</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/+modal.tsx b/examples/react-router-rspack/src/pages/+modal.tsx
@@ -0,0 +1,25 @@
+import { useLocation } from 'react-router'
+
+import { useModals } from '@/router'
+
+export default function Welcome() {
+  const location = useLocation()
+  const modals = useModals()
+
+  const handleClose = () => modals.close()
+
+  return (
+    <div
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.25)', display: 'grid', placeContent: 'center' }}
+    >
+      <div style={{ position: 'absolute', inset: 0, zIndex: -1 }} onClick={handleClose} />
+      <div style={{ background: 'white', padding: 40, height: 300, width: 600 }}>
+        <h2>Global Modal!</h2>
+        <p>Current pathname: {location.pathname}</p>
+
+        <button onClick={() => modals.close()}>Close</button>
+        <button onClick={() => modals.close({ at: '/login' })}>Close and redirect to /login</button>
+      </div>
+    </div>
+  )
+}
diff --git a/examples/react-router-rspack/src/pages/404.tsx b/examples/react-router-rspack/src/pages/404.tsx
@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <h1>404</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/_app.tsx b/examples/react-router-rspack/src/pages/_app.tsx
@@ -0,0 +1,44 @@
+import { Outlet } from 'react-router'
+
+import { Link, useModals, useNavigate, useParams } from '../router'
+
+export const Catch = () => {
+  return <div>Something went wrong... Caught at _app error boundary</div>
+}
+
+export const Pending = () => <div>Loading from _app...</div>
+
+export default function App() {
+  const navigate = useNavigate()
+  const modals = useModals()
+  const { id, pid } = useParams('/posts/:id/:pid?')
+
+  const a = () => navigate('/posts/:id', { params: { id: 'a' } })
+  const b = () => navigate('/posts/:id', { params: { id: '' } })
+  const c = () => navigate(-1)
+  const d = () => navigate('/posts/:id/deep', { params: { id: 'd' } })
+  const e = () => navigate('/posts/:id/deep', { params: { id: 'e' } })
+
+  return (
+    <section style={{ margin: 24 }}>
+      <header style={{ display: 'flex', gap: 24 }}>
+        <Link to="/">Home</Link>
+        <Link to={{ pathname: '/about' }}>About</Link>
+        <Link to="/posts">Posts</Link>
+        <Link to="/posts/:id/:pid?" params={{ id: '1', pid: '2' }}>
+          Posts by id/pid
+        </Link>
+        <Link to="/posts/:id" params={{ id: 'id' }}>
+          Posts by id
+        </Link>
+        <button onClick={() => modals.open('/modal')}>Global modal at current route</button>
+        <button onClick={() => modals.open('/modal', { at: '/about' })}>Global modal at /about</button>
+        <button onClick={e}>navigate to</button>
+      </header>
+
+      <main>
+        <Outlet />
+      </main>
+    </section>
+  )
+}
diff --git a/examples/react-router-rspack/src/pages/about.tsx b/examples/react-router-rspack/src/pages/about.tsx
@@ -0,0 +1,3 @@
+export default function About() {
+  return <h1>About - Basic</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/index.tsx b/examples/react-router-rspack/src/pages/index.tsx
@@ -0,0 +1,9 @@
+export const Loader = () => 'Route loader'
+export const Action = () => 'Route action'
+export const Catch = () => <div>Something went wrong...</div>
+
+export const Pending = () => <div>Loading...</div>
+
+export default function Home() {
+  return <h1>Home - Basic</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/posts/[id]/-[pid].tsx b/examples/react-router-rspack/src/pages/posts/[id]/-[pid].tsx
@@ -0,0 +1,3 @@
+export default function IdPid() {
+  return <h1>IdPid</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/posts/[id]/deep.tsx b/examples/react-router-rspack/src/pages/posts/[id]/deep.tsx
@@ -0,0 +1,3 @@
+export default function IdDeep() {
+  return <h1>IdDeep</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/posts/[id]/index.tsx b/examples/react-router-rspack/src/pages/posts/[id]/index.tsx
@@ -0,0 +1,11 @@
+import { useMatch } from 'react-router'
+
+import { useParams } from '@/router'
+
+export default function Id() {
+  // const { params } = useMatch('/posts/$id')
+  const { id } = useParams('/posts/:id')
+  const match = useMatch('/posts/:id')
+
+  return <h1>Id</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/posts/_layout.tsx b/examples/react-router-rspack/src/pages/posts/_layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router'
+
+export default function About() {
+  return (
+    <div>
+      <h1>Posts Layout</h1>
+      <Outlet />
+    </div>
+  )
+}
diff --git a/examples/react-router-rspack/src/pages/posts/index.tsx b/examples/react-router-rspack/src/pages/posts/index.tsx
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <h1>Index</h1>
+}
diff --git a/examples/react-router-rspack/src/pages/splat/[...all].tsx b/examples/react-router-rspack/src/pages/splat/[...all].tsx
@@ -0,0 +1,3 @@
+export default function SplatAll() {
+  return <h1>All</h1>
+}
diff --git a/examples/react-router-rspack/src/router.ts b/examples/react-router-rspack/src/router.ts
@@ -0,0 +1,17 @@
+// Generouted, changes to this file will be overridden
+/* eslint-disable */
+
+import { components, hooks, utils } from '@generouted/react-router/client'
+
+export type Path =
+  | ``
+
+export type Params = {
+
+}
+
+export type ModalPath = never
+
+export const { Link, Navigate } = components<Path, Params>()
+export const { useModals, useNavigate, useParams } = hooks<Path, Params, ModalPath>()
+export const { redirect } = utils<Path, Params>()
diff --git a/examples/react-router-rspack/tsconfig.json b/examples/react-router-rspack/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "paths": { "@/*": ["src/*"] },
+    "types": []
+  },
+  "include": ["./src"]
+}
diff --git a/examples/react-router/vite.config.ts b/examples/react-router/vite.config.ts
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 import generouted from '@generouted/react-router/plugin'
 
 export default defineConfig({
-  plugins: [react(), generouted()],
+  plugins: [react(), generouted.vite()],
   resolve: { alias: { '@': '/src' } },
 })
diff --git a/examples/solid-router/vite.config.ts b/examples/solid-router/vite.config.ts
@@ -3,6 +3,6 @@ import solid from 'vite-plugin-solid'
 import generouted from '@generouted/solid-router/plugin'
 
 export default defineConfig({
-  plugins: [solid(), generouted()],
+  plugins: [solid(), generouted.vite()],
   resolve: { alias: { '@': '/src' } },
 })