reroute-js 0.2.2 → 0.2.3

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

@@ -0,0 +1,70 @@
+import { Link, useContent } from 'reroute-js/react';
+
+const meta = {
+	title: 'Blog Example',
+	description:
+		'See how easy it is to build a blog with custom file-based routing!',
+};
+
+function BlogIndex() {
+	const { items } = useContent({
+		collection: 'blog',
+	});
+
+	return (
+		<div style={{ padding: '2rem' }}>
+			<h1>Latest Posts</h1>
+			<p>Welcome to our blog! Here are our latest posts:</p>
+
+			<div
+				style={{
+					marginTop: '2rem',
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '1.5rem',
+				}}
+			>
+				{items.map((post) => (
+					<article
+						key={post.slug}
+						style={{
+							padding: '1.5rem',
+							border: '1px solid #e0e0e0',
+							borderRadius: '8px',
+							background: '#fff',
+						}}
+					>
+						<h2 style={{ margin: '0 0 0.5rem 0' }}>
+							<Link
+								to={post.href}
+								style={{ textDecoration: 'none', color: '#0066cc' }}
+							>
+								{String(post.meta?.title || post.name)}
+							</Link>
+						</h2>
+						<time style={{ fontSize: '0.875rem', color: '#666' }}>
+							{post.meta?.date ? String(post.meta.date) : ''}
+						</time>
+						<p style={{ marginTop: '0.75rem', color: '#333' }}>
+							{String(post.meta?.excerpt || '')}
+						</p>
+						<Link
+							to={post.href}
+							style={{
+								display: 'inline-block',
+								marginTop: '0.5rem',
+								color: '#0066cc',
+								textDecoration: 'none',
+							}}
+						>
+							Read more →
+						</Link>
+					</article>
+				))}
+			</div>
+		</div>
+	);
+}
+
+export default BlogIndex;
+export { meta };

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

@@ -0,0 +1,63 @@
+import { Link } from 'reroute-js/react';
+
+export default function HomePage() {
+	return (
+		<main style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
+			<h1>🏠 Welcome to Reroute!</h1>
+			<p>This is the home page of your custom file-based routing system.</p>
+
+			<section style={{ marginTop: '2rem' }}>
+				<h2>Navigation</h2>
+				<nav
+					style={{
+						display: 'flex',
+						gap: '1rem',
+						flexDirection: 'column',
+						maxWidth: '300px',
+					}}
+				>
+					<Link
+						to='/about'
+						style={{
+							padding: '0.5rem 1rem',
+							background: '#eee',
+							textDecoration: 'none',
+							borderRadius: '4px',
+						}}
+					>
+						About
+					</Link>
+					<Link
+						to='/blog'
+						style={{
+							padding: '0.5rem 1rem',
+							background: '#eee',
+							textDecoration: 'none',
+							borderRadius: '4px',
+						}}
+					>
+						Blog
+					</Link>
+				</nav>
+			</section>
+
+			<section
+				style={{
+					marginTop: '2rem',
+					padding: '1rem',
+					background: '#f5f5f5',
+					borderRadius: '8px',
+				}}
+			>
+				<h3>✨ Features</h3>
+				<ul>
+					<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>
+				</ul>
+			</section>
+		</main>
+	);
+}

package/_/blog/src/index.ts

@@ -0,0 +1,20 @@
+import { Elysia } from 'elysia';
+import { createElement } from 'react';
+import { reroute } from 'reroute-js/elysia';
+import App from './client/App';
+
+const IS_PRODUCTION = Bun.env.NODE_ENV === 'production';
+
+const app = new Elysia()
+	.use(
+		reroute({
+			app: createElement(App),
+			minify: IS_PRODUCTION,
+		}),
+	)
+	.get('/message', () => ({ message: 'Hello from server' }))
+	.listen(Number(Bun.env.PORT || '3000'));
+
+console.log(
+	`🦊 Elysia Reroute is running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,
+);

package/_/blog/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+		"moduleResolution": "bundler",
+		"isolatedModules": true,
+		"baseUrl": ".",
+		"rootDir": ".",
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "dist/types",
+		"emitDeclarationOnly": true,
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"jsx": "react-jsx",
+		"types": ["bun", "node"],
+		"paths": {}
+	},
+	"include": ["packages/**/*.ts", "packages/**/*.tsx", "test/**/*.d.ts"],
+	"exclude": ["node_modules", "dist", "test"]
+}

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 />);

package/_/store/src/client/lib/api.ts

@@ -0,0 +1,153 @@
+// API client for FakeStoreAPI with SSR support
+// All responses are plain JSON objects to ensure serialization compatibility
+
+const API_BASE_URL = 'https://fakestoreapi.com';
+
+interface Product {
+	id: number;
+	title: string;
+	price: number;
+	description: string;
+	category: string;
+	image: string;
+	rating?: {
+		rate: number;
+		count: number;
+	};
+}
+
+interface CartProduct {
+	productId: number;
+	quantity: number;
+}
+
+interface Cart {
+	id: number;
+	userId: number;
+	date: string;
+	products: CartProduct[];
+}
+
+interface User {
+	id: number;
+	email: string;
+	username: string;
+	password: string;
+	name: {
+		firstname: string;
+		lastname: string;
+	};
+	address: {
+		city: string;
+		street: string;
+		number: number;
+		zipcode: string;
+		geolocation: {
+			lat: string;
+			long: string;
+		};
+	};
+	phone: string;
+}
+
+interface LoginCredentials {
+	username: string;
+	password: string;
+}
+
+interface LoginResponse {
+	token: string;
+}
+
+// Helper to ensure responses are serializable
+function ensureSerializable<T>(data: T): T {
+	// Deep clone to break any circular references
+	return JSON.parse(JSON.stringify(data));
+}
+
+// Generic fetch wrapper with error handling
+async function apiFetch<T>(
+	endpoint: string,
+	options?: RequestInit,
+): Promise<T> {
+	try {
+		const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+			...options,
+			headers: {
+				'Content-Type': 'application/json',
+				...options?.headers,
+			},
+		});
+
+		if (!response.ok) {
+			throw new Error(`API error: ${response.status} ${response.statusText}`);
+		}
+
+		const data = await response.json();
+		return ensureSerializable(data);
+	} catch (error) {
+		console.error(`API request failed: ${endpoint}`, error);
+		throw error;
+	}
+}
+
+// Products API
+export async function getAllProducts(): Promise<Product[]> {
+	return apiFetch<Product[]>('/products');
+}
+
+export async function getProduct(id: number): Promise<Product> {
+	return apiFetch<Product>(`/products/${id}`);
+}
+
+export async function getProductsByCategory(
+	category: string,
+): Promise<Product[]> {
+	return apiFetch<Product[]>(`/products/category/${category}`);
+}
+
+export async function getCategories(): Promise<string[]> {
+	return apiFetch<string[]>('/products/categories');
+}
+
+// Carts API
+export async function getAllCarts(): Promise<Cart[]> {
+	return apiFetch<Cart[]>('/carts');
+}
+
+export async function getCart(id: number): Promise<Cart> {
+	return apiFetch<Cart>(`/carts/${id}`);
+}
+
+export async function getUserCarts(userId: number): Promise<Cart[]> {
+	return apiFetch<Cart[]>(`/carts/user/${userId}`);
+}
+
+// Users API
+export async function getAllUsers(): Promise<User[]> {
+	return apiFetch<User[]>('/users');
+}
+
+export async function getUser(id: number): Promise<User> {
+	return apiFetch<User>(`/users/${id}`);
+}
+
+// Auth API
+export async function login(
+	credentials: LoginCredentials,
+): Promise<LoginResponse> {
+	return apiFetch<LoginResponse>('/auth/login', {
+		method: 'POST',
+		body: JSON.stringify(credentials),
+	});
+}
+
+// Export types
+export type {
+	Cart,
+	CartProduct,
+	LoginCredentials,
+	LoginResponse,
+	Product,
+	User,
+};

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

@@ -0,0 +1,63 @@
+import { Link } from 'reroute-js/react';
+import Header from '../components/Header';
+
+export default function NotFoundPage() {
+	return (
+		<>
+			<Header />
+
+			<main className='container-custom py-16'>
+				<div className='max-w-2xl mx-auto text-center'>
+					<div className='mb-8 animate-slide-up'>
+						<div className='text-9xl font-bold text-primary-600 mb-4'>404</div>
+						<h1 className='text-4xl font-bold text-gray-900 mb-4'>
+							Page Not Found
+						</h1>
+						<p className='text-xl text-gray-600 mb-8'>
+							Oops! The page you're looking for doesn't exist. It might have
+							been moved or deleted.
+						</p>
+					</div>
+
+					<div className='flex flex-col sm:flex-row gap-4 justify-center mb-12 animate-in'>
+						<Link to='/' className='btn-primary btn-lg'>
+							🏠 Go Home
+						</Link>
+						<Link to='/products' className='btn-secondary btn-lg'>
+							🛍️ Browse Products
+						</Link>
+					</div>
+
+					<div className='grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 animate-scale'>
+						<Link
+							to='/categories'
+							className='card card-hover p-6 no-underline text-gray-900'
+						>
+							<div className='text-4xl mb-3'>🏷️</div>
+							<h3 className='font-semibold mb-2'>Categories</h3>
+							<p className='text-sm text-gray-600'>Browse by category</p>
+						</Link>
+
+						<Link
+							to='/products'
+							className='card card-hover p-6 no-underline text-gray-900'
+						>
+							<div className='text-4xl mb-3'>📦</div>
+							<h3 className='font-semibold mb-2'>All Products</h3>
+							<p className='text-sm text-gray-600'>View our catalog</p>
+						</Link>
+
+						<Link
+							to='/'
+							className='card card-hover p-6 no-underline text-gray-900'
+						>
+							<div className='text-4xl mb-3'>⚡</div>
+							<h3 className='font-semibold mb-2'>Featured</h3>
+							<p className='text-sm text-gray-600'>See what's popular</p>
+						</Link>
+					</div>
+				</div>
+			</main>
+		</>
+	);
+}