replace react-router using wouter

Author: xiaoxinghu

.changeset/slick-goats-find.md

@@ -0,0 +1,5 @@
+---
+'orga-build': patch
+---
+
+replace react-router with wouter

docs/_layout.tsx

@@ -59,9 +59,9 @@ export default function Layout({ children }: LayoutProps) {
 								viewBox="0 0 24 24"
 								fill="none"
 								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
 							>
 								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 								<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />

packages/orga-build/lib/app.jsx

@@ -1,8 +1,7 @@
-import { createElement } from 'react'
 import pages from '@orga-build/pages'
 import layouts from '@orga-build/layouts'
 import * as components from '@orga-build/components'
-import { Link, useRoutes } from 'react-router'
+import { Route, Switch, Link } from 'wouter'
 
 export function App() {
 	const _pages = Object.entries(pages).map(([path, page]) => {
@@ -16,19 +15,13 @@ export function App() {
 		const layoutIds = Object.keys(layouts)
 			.filter((key) => path.startsWith(key))
 			.sort((a, b) => -a.localeCompare(b))
-		let element = createElement(page.default, {
-			components: { ...components, Link }
-		})
+		let element = <page.default components={{ ...components, Link, a: Link }} />
 		for (const layoutId of layoutIds) {
-			element = createElement(
-				layouts[layoutId],
-				{
-					title: page.title,
-					slug: path,
-					...page,
-					pages: _pages
-				},
-				element
+			const Layout = layouts[layoutId]
+			element = (
+				<Layout title={page.title} slug={path} pages={_pages} {...page}>
+					{element}
+				</Layout>
 			)
 		}
 		return {
@@ -37,5 +30,15 @@ export function App() {
 		}
 	})
 
-	return useRoutes(pageRoutes)
+	return (
+		<Switch>
+			{pageRoutes.map((route) => {
+				return (
+					<Route key={`r-${route.path}`} path={route.path}>
+						{route.element}
+					</Route>
+				)
+			})}
+		</Switch>
+	)
 }

packages/orga-build/lib/client.jsx

@@ -1,18 +1,12 @@
 import { hydrateRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router'
+import { Router } from 'wouter'
 import { App } from './app.jsx'
 
 const ssr = window._ssr
 
-hydrate()
-
-function hydrate() {
-	const container = document.getElementById('root')
-	// const page = pages[ssr.routePath]
-	hydrateRoot(
-		container,
-		<BrowserRouter basename="/">
-			<App />
-		</BrowserRouter>
-	)
-}
+hydrateRoot(
+	document.getElementById('root'),
+	<Router>
+		<App />
+	</Router>
+)

packages/orga-build/lib/csr.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './app.jsx'
-import { BrowserRouter } from 'react-router'
+import { Router } from 'wouter'
 
 const container = document.getElementById('root')
 const root = createRoot(container)
 root.render(
-	<BrowserRouter basename="/">
+	<Router>
 		<App />
-	</BrowserRouter>
+	</Router>
 )

packages/orga-build/lib/ssr.jsx

@@ -1,7 +1,7 @@
 import pages from '@orga-build/pages'
 import { renderToString } from 'react-dom/server'
-import { StaticRouter } from 'react-router'
 import { App } from './app.jsx'
+import { Router } from 'wouter'
 
 export { pages }
 
@@ -14,13 +14,11 @@ export function render(url) {
 		console.log(`no page found for ${url}`)
 		return
 	}
-	return renderToString(<SSRContent url={url} />)
-}
-
-function SSRContent({ url }) {
-	return (
-		<StaticRouter location={url}>
+	const ssrContext = {}
+	console.log(`rendering ${url}`)
+	return renderToString(
+		<Router ssrPath={url} ssrContext={ssrContext}>
 			<App />
-		</StaticRouter>
+		</Router>
 	)
 }

packages/orga-build/package.json

@@ -7,27 +7,15 @@
 		"orga-build": "./cli.js"
 	},
 	"scripts": {},
-	"files": [
-		"lib/",
-		"cli.js",
-		"index.js",
-		"index.d.ts",
-		"index.d.ts.map"
-	],
+	"files": ["lib/", "cli.js", "index.js", "index.d.ts", "index.d.ts.map"],
 	"exports": {
 		".": {
 			"types": "./index.d.ts",
 			"import": "./index.js"
 		},
 		"./csr.jsx": "./lib/csr.jsx"
 	},
-	"keywords": [
-		"orgajs",
-		"org-mode",
-		"build",
-		"website",
-		"react"
-	],
+	"keywords": ["orgajs", "org-mode", "build", "website", "react"],
 	"author": "Xiaoxing Hu <[email protected]>",
 	"license": "MIT",
 	"dependencies": {
@@ -40,11 +28,10 @@
 		"globby": "^14.1.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"react-router": "^7.5.1",
 		"rehype-katex": "^7.0.1",
-		"serve-handler": "^6.1.6",
 		"unist-util-visit-parents": "^6.0.1",
-		"vite": "6.3.2"
+		"vite": "6.3.2",
+		"wouter": "^3.7.0"
 	},
 	"devDependencies": {
 		"@orgajs/orgx": "workspace:^",
@@ -53,7 +40,6 @@
 		"@types/node": "^22.13.1",
 		"@types/react": "^19.0.8",
 		"@types/react-dom": "^19.0.3",
-		"@types/serve-handler": "^6.1.4",
 		"orga": "workspace:^"
 	}
 }