reroute-js 0.0.13 → 0.1.0

package/README.md

@@ -12,7 +12,7 @@ A dead simple file-based routing framework for building fullstack React apps on
 - 📦 **Zero Config** - Works out of the box with sensible defaults
 
 ### 🛠️ CLI Tools
-- 🚀 **`reroute init`** - Scaffold new projects with templates (basic, blog)
+- 🚀 **`reroute init`** - Scaffold new projects with templates (basic, blog, store)
 - 🔨 **`reroute gen`** - Generate content registry and route artifacts
 
 ### 📄 Content Management
@@ -24,6 +24,7 @@ A dead simple file-based routing framework for building fullstack React apps on
 - 📦 **Collection Chunking** - Individual module bundles per content item
 
 ### ⚛️ React Integration
+- ⚡ **React 19** - Built with the latest React version for optimal performance
 - 🪝 **Router Hooks**:
   - `useNavigate()` - Programmatic navigation
   - `useParams()` - Access route parameters
@@ -39,9 +40,9 @@ A dead simple file-based routing framework for building fullstack React apps on
   - `<RouterProvider>` - Router context for the app
   - `<ContentProvider>` - Content system context
   - `<RerouteProvider>` - All-in-one provider wrapper
- - 🗂️ **SSR Data**:
-   - `useData()` - Read route-level SSR data without loaders
-   - `export const ssr = { data() {} }` - Route data function executed on server
+- 🗂️ **SSR Data**:
+  - `useData()` - Read route-level SSR data without loaders
+  - `export const ssr = { data() {} }` - Route data function executed on server
 
 ### 🚀 Performance Optimizations
 - 💾 **Smart Caching** - LRU cache for files and bundles
@@ -51,8 +52,15 @@ A dead simple file-based routing framework for building fullstack React apps on
 - 🎯 **SSR Module Seeding** - Pre-populate modules for instant hydration
 - 📊 **Collection Inlining** - Inline collection data for zero-latency rendering
 
+### 🎨 Styling & Theming
+- 🎨 **Tailwind CSS v4 Support** - Automatic detection and compilation with CSS-first configuration
+- ⚡ **Live CSS Reload** - Instant style updates in development mode
+- 🎯 **Modern CSS Features** - `@theme` and `@utility` directives support
+- 🚀 **Oxide Engine** - 5x faster builds with the new Tailwind compiler
+- 🔧 **Zero Config** - Works out of the box when `@tailwindcss/cli` is installed
+
 ### 🎨 Developer Experience
-- 📁 **Project Templates** - Quick start with `basic` or `blog` templates
+- 📁 **Project Templates** - Quick start with `basic`, `blog`, or `store` templates
 - 🔄 **Live Reload** - Server-Sent Events (SSE) for instant browser updates
 - 🎯 **TypeScript Support** - Full type safety throughout the stack
 - 🗂️ **File System Watcher** - Automatic rebuilds on source changes
@@ -85,17 +93,18 @@ A dead simple file-based routing framework for building fullstack React apps on
 - 🔧 **URL Prefix** - Deploy to subdirectories with custom prefixes
 - 🚫 **Ignore Patterns** - Exclude files from static serving
 - 🏷️ **Custom Headers** - Add headers to static file responses
- - ⏰ **Cache Control** - Configurable max-age and cache directives for static files and `__reroute_data` JSON
+- ⏰ **Cache Control** - Configurable max-age and cache directives for static files and `__reroute_data` JSON
 - 🎨 **HTML Template** - Custom index.html with variable substitution
 
 ## 🚀 Quick Start
 
 ```bash
-# Create a new project
+# Create a new project (basic template)
 bunx reroute-js init my-app
 
-# Or with a template
+# Or with a specific template
 bunx reroute-js init my-blog --template blog
+bunx reroute-js init my-store --template store
 
 # Navigate to project
 cd my-app

package/_/blog/src/client/components/Counter.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export default function Counter() {
+	const [count, setCount] = useState(0);
+	const increase = () => setCount((c) => c + 1);
+
+	return (
+		<section>
+			<h2>Current count: {count}</h2>
+			{/* biome-ignore lint/a11y/useButtonType: shut up */}
+			<button onClick={increase}>Increase</button>
+		</section>
+	);
+}

package/_/blog/src/client/components/RecentPosts.tsx

@@ -0,0 +1,90 @@
+import { Link, useContent } from 'reroute-js/react';
+
+interface RecentPostsProps {
+	limit?: number;
+}
+
+function RecentPosts({ limit = 3 }: RecentPostsProps) {
+	const { items } = useContent({
+		collection: 'blog',
+		limit,
+	});
+
+	const recentPosts = items;
+
+	return (
+		<div style={{ marginTop: '2rem' }}>
+			<h2>Recent Blog Posts</h2>
+			<div
+				style={{
+					marginTop: '1rem',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '1rem',
+				}}
+			>
+				{recentPosts.map((post) => (
+					<article
+						key={post.slug}
+						style={{
+							padding: '1rem',
+							border: '1px solid #e0e0e0',
+							borderRadius: '8px',
+							background: '#fff',
+						}}
+					>
+						<h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.25rem' }}>
+							<Link
+								to={post.href}
+								style={{ textDecoration: 'none', color: '#0066cc' }}
+							>
+								{String(post.meta?.title || post.name)}
+							</Link>
+						</h3>
+						{post.meta?.date && (
+							<time style={{ fontSize: '0.875rem', color: '#666' }}>
+								{String(post.meta.date)}
+							</time>
+						)}
+						{post.meta?.excerpt && (
+							<p
+								style={{
+									marginTop: '0.5rem',
+									color: '#333',
+									fontSize: '0.9rem',
+								}}
+							>
+								{String(post.meta.excerpt)}
+							</p>
+						)}
+						<Link
+							to={post.href}
+							style={{
+								display: 'inline-block',
+								marginTop: '0.5rem',
+								color: '#0066cc',
+								textDecoration: 'none',
+								fontSize: '0.9rem',
+							}}
+						>
+							Read more →
+						</Link>
+					</article>
+				))}
+			</div>
+			<div style={{ marginTop: '1rem' }}>
+				<Link
+					to='/blog'
+					style={{
+						color: '#0066cc',
+						textDecoration: 'none',
+					}}
+				>
+					View all posts →
+				</Link>
+			</div>
+		</div>
+	);
+}
+
+export default RecentPosts;

package/_/blog/src/client/index.html

@@ -1,12 +1,13 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<title>{{PROJECT_NAME}}</title>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	</head>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="./index.tsx"></script>
-	</body>
+    <head>
+        <meta charset="UTF-8" />
+        <title>{{PROJECT_NAME}}</title>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./index.tsx"></script>
+    </body>
 </html>

package/_/blog/src/client/index.tsx

@@ -1,5 +1,5 @@
 import { hydrateRoot } from 'react-dom/client';
 import App from './App';
 
-// biome-ignore lint/style/noNonNullAssertion: root element required
+// biome-ignore lint/style/noNonNullAssertion: all good
 hydrateRoot(document.getElementById('root')!, <App />);

package/_/blog/src/client/routes/[404].tsx

@@ -1,18 +1,21 @@
-export default function NotFound() {
+const meta = {
+	title: '404',
+	description: 'Page not found',
+};
+
+function NotFound() {
 	return (
-		<div
-			style={{
-				padding: '2rem',
-				maxWidth: '800px',
-				margin: '0 auto',
-				textAlign: 'center',
-			}}
-		>
-			<h1>404 - Page Not Found</h1>
-			<p>The page you're looking for doesn't exist.</p>
+		<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+			<h1>404</h1>
+			<p>The page you are looking for does not exist.</p>
 			<nav style={{ marginTop: '2rem' }}>
-				<a href='/'>← Back to Home</a>
+				<a href='/' style={{ marginRight: '1rem' }}>
+					← Back to Home
+				</a>
 			</nav>
 		</div>
 	);
 }
+
+export default NotFound;
+export { meta };

package/_/blog/src/client/routes/about.tsx

@@ -1,17 +1,23 @@
+import RecentPosts from '../components/RecentPosts';
+
 const meta = {
-	title: 'About',
-	description: 'Learn more about our application',
+	title: 'About Us',
+	description:
+		'Learn more about our application built with custom file-based routing!',
 };
 
 function About() {
 	return (
 		<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
-			<h1>About</h1>
-			<p>Welcome to your Reroute application!</p>
+			<h1>About Us</h1>
+			<p>Welcome to our application built with custom file-based routing!</p>
 			<p>
 				This page demonstrates a simple static route that maps from{' '}
 				<code>routes/about.tsx</code> to <code>/about</code>.
 			</p>
+
+			<RecentPosts limit={1} />
+
 			<nav style={{ marginTop: '2rem' }}>
 				<a href='/' style={{ marginRight: '1rem' }}>
 					← Back to Home

package/_/blog/src/client/routes/blog/[404].tsx

@@ -1,11 +1,21 @@
-export default function BlogNotFound() {
+const meta = {
+	title: '404',
+	description: 'Page not found',
+};
+
+function NotFound() {
 	return (
-		<div style={{ padding: '2rem', textAlign: 'center' }}>
-			<h1>Post Not Found</h1>
-			<p>The blog post you're looking for doesn't exist.</p>
+		<div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+			<h1>404</h1>
+			<p>The blog content you are looking for does not exist.</p>
 			<nav style={{ marginTop: '2rem' }}>
-				<a href='/blog'>← Back to Blog</a>
+				<a href='/' style={{ marginRight: '1rem' }}>
+					← Back to Home
+				</a>
 			</nav>
 		</div>
 	);
 }
+
+export default NotFound;
+export { meta };

package/_/blog/src/client/routes/blog/[layout].tsx

@@ -77,7 +77,7 @@ export default function BlogLayout() {
 					background: '#fff',
 				}}
 			>
-				<p>© 2024 {{ PROJECT_NAME }}. Built with Reroute.</p>
+				<p>© 2024 Reroute Blog. Built with Bun, Elysia, and React.</p>
 			</footer>
 		</div>
 	);

package/_/blog/src/client/routes/blog/content/1-hello-world.tsx

@@ -0,0 +1,27 @@
+// Page metadata and optional SSR extras. Reroute SSR will use these
+// to generate <title>, <meta name="description"> and append any custom head.
+const meta = {
+	title: 'Hello World',
+	description: 'This is the first post using Reroute 🎉',
+	excerpt: 'This is a great post',
+	date: '2025-10-20',
+};
+
+const ssr = {
+	head: [
+		'<meta property="og:type" content="article" />',
+		'<meta name="twitter:card" content="summary_large_image" />',
+	],
+};
+
+function BlogPost() {
+	return (
+		<div>
+			<h1>Hello World</h1>
+			<p>Welcome to my blog!!</p>
+		</div>
+	);
+}
+
+export { meta, ssr };
+export default BlogPost;

package/_/blog/src/client/routes/blog/content/2-what-is-reroute.tsx

@@ -0,0 +1,31 @@
+const meta = {
+	title: 'What is Reroute?',
+	description:
+		'A dead simple file-based routing framework for building fullstack React apps on Bun and Elysia.',
+	date: '2025-10-22',
+};
+
+function BlogPost() {
+	return (
+		<div>
+			<h1>What is Reroute?</h1>
+			<p>
+				Reroute is a dead simple file-based routing framework for building
+				fullstack applications using React that runs on Bun and Elysia.
+			</p>
+			<p>
+				It features server-side rendering (SSR), automatic route generation from
+				your file structure, live reload in development, and zero configuration
+				needed to get started.
+			</p>
+			<p>
+				With built-in content collections, smart caching, and powerful React
+				hooks like useNavigate(), useData(), and useContent(), Reroute makes it
+				easy to build fast, SEO-friendly web applications with minimal setup.
+			</p>
+		</div>
+	);
+}
+
+export default BlogPost;
+export { meta };

package/_/blog/src/client/routes/blog/index.tsx

@@ -1,8 +1,9 @@
 import { Link, useContent } from 'reroute-js/react';
 
 const meta = {
-	title: 'Blog',
-	description: 'Read our latest posts',
+	title: 'Blog Example',
+	description:
+		'See how easy it is to build a blog with custom file-based routing!',
 };
 
 function BlogIndex() {

package/_/blog/src/client/routes/index.tsx

@@ -4,7 +4,7 @@ export default function HomePage() {
 	return (
 		<main style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
 			<h1>🏠 Welcome to Reroute!</h1>
-			<p>This is your new blog built with Reroute.</p>
+			<p>This is the home page of your custom file-based routing system.</p>
 
 			<section style={{ marginTop: '2rem' }}>
 				<h2>Navigation</h2>
@@ -38,17 +38,6 @@ export default function HomePage() {
 					>
 						Blog
 					</Link>
-					<Link
-						to='/blog/hello-world'
-						style={{
-							padding: '0.5rem 1rem',
-							background: '#eee',
-							textDecoration: 'none',
-							borderRadius: '4px',
-						}}
-					>
-						First Blog Post
-					</Link>
 				</nav>
 			</section>
 
@@ -62,12 +51,11 @@ export default function HomePage() {
 			>
 				<h3>✨ Features</h3>
 				<ul>
-					<li>File-based routing</li>
+					<li>Zero-dependency file-based routing</li>
 					<li>Client-side navigation (SPA)</li>
 					<li>Server-side rendering (SSR)</li>
 					<li>Type-safe route params</li>
 					<li>Automatic route generation</li>
-					<li>Content collections</li>
 				</ul>
 			</section>
 		</main>

package/_/blog/src/index.ts

@@ -12,9 +12,9 @@ const app = new Elysia()
 			minify: IS_PRODUCTION,
 		}),
 	)
-	.get('/api/message', () => ({ message: 'Hello from server' }))
+	.get('/message', () => ({ message: 'Hello from server' }))
 	.listen(Number(Bun.env.PORT || '3000'));
 
 console.log(
-	`🦊 Reroute is running at ${app.server?.hostname}:${app.server?.port}`,
+	`🦊 Elysia Reroute is running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,
 );

package/_/store/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"version": "0.0.0",
+	"description": "A Reroute store application with Tailwind CSS v4",
+	"private": true,
+	"scripts": {
+		"start": "reroute gen && bun src/index.ts",
+		"dev": "reroute gen --watch & bun --watch src/index.ts",
+		"build": "reroute gen && bun build src/index.ts --target bun --compile --outfile ./dist/app"
+	},
+	"dependencies": {
+		"reroute-js": "latest",
+		"elysia": "^1.4.12",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"@types/react": "^19.2.2",
+		"@types/react-dom": "^19.2.2",
+		"@tailwindcss/cli": "^4.1.16",
+		"tailwindcss": "^4.1.16",
+		"typescript": "^5"
+	}
+}

package/_/store/src/client/App.tsx

@@ -0,0 +1,17 @@
+import { RerouteProvider } from 'reroute-js/react';
+import { artifacts } from '../../.reroute';
+
+interface AppProps {
+	pathname?: string;
+}
+
+export default function App({ pathname }: AppProps = {}) {
+	return (
+		<RerouteProvider
+			from={{
+				pathname,
+				...artifacts,
+			}}
+		/>
+	);
+}

package/_/store/src/client/components/Header.tsx

@@ -0,0 +1,40 @@
+import { Link } from 'reroute-js/react';
+
+export default function Header() {
+	return (
+		<header className='sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm'>
+			<div className='container-custom'>
+				<div className='flex items-center justify-between h-16'>
+					<Link
+						to='/'
+						className='flex items-center gap-2 text-2xl font-bold text-primary-600 hover:text-primary-700 transition-colors'
+					>
+						<span className='text-3xl'>🛒</span>
+						<span>Reroute Store</span>
+					</Link>
+
+					<nav className='flex items-center gap-8'>
+						<Link
+							to='/'
+							className='link-muted font-medium hover:text-primary-600'
+						>
+							Home
+						</Link>
+						<Link
+							to='/products'
+							className='link-muted font-medium hover:text-primary-600'
+						>
+							Products
+						</Link>
+						<Link
+							to='/categories'
+							className='link-muted font-medium hover:text-primary-600'
+						>
+							Categories
+						</Link>
+					</nav>
+				</div>
+			</div>
+		</header>
+	);
+}

package/_/store/src/client/components/ProductCard.tsx

@@ -0,0 +1,51 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: who cares, this is just an example */
+import { Link } from 'reroute-js/react';
+import type { Product } from '../lib/api';
+
+interface ProductCardProps {
+	product: Product;
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+	return (
+		<div className='card card-hover group'>
+			<Link
+				to={`/products/${product.id}`}
+				className='block h-full no-underline text-inherit'
+			>
+				<div className='w-full h-60 bg-gray-50 flex items-center justify-center p-4'>
+					<img
+						src={product.image}
+						alt={product.title}
+						className='max-w-full max-h-full object-contain'
+						loading='lazy'
+						style={{ viewTransitionName: `product-image-${product.id}` }}
+					/>
+				</div>
+
+				<div className='p-4 flex flex-col gap-2 flex-1'>
+					<div className='badge-primary'>{product.category}</div>
+
+					<h3 className='text-base font-semibold text-gray-900 leading-normal line-clamp-2 min-h-[3em] group-hover:text-primary-600 transition-colors'>
+						{product.title}
+					</h3>
+
+					<div className='flex justify-between items-center mt-auto pt-2'>
+						<span className='text-xl font-bold text-primary-600'>
+							${product.price.toFixed(2)}
+						</span>
+
+						{product.rating && (
+							<div className='flex items-center gap-1 text-sm text-gray-600'>
+								<span>⭐</span>
+								<span>
+									{product.rating.rate} ({product.rating.count})
+								</span>
+							</div>
+						)}
+					</div>
+				</div>
+			</Link>
+		</div>
+	);
+}

package/_/store/src/client/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>{{PROJECT_NAME}}</title>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="E-commerce store built with Reroute and FakeStoreAPI"
+        />
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./index.tsx"></script>
+    </body>
+</html>

package/_/store/src/client/index.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+
+// biome-ignore lint/style/noNonNullAssertion: All good
+hydrateRoot(rootElement!, <App />);