reroute-js 0.2.2 → 0.3.0

package/README.md

@@ -44,6 +44,20 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
   - `useData()` - Read route-level SSR data without loaders
   - `export const ssr = { data() {} }` - Route data function executed on server
 
+### 🖼️ Image Optimization
+- 🎨 **Format Control** - Support for auto, AVIF, WebP, JPEG, and PNG formats
+- 📐 **Responsive Images** - Automatic srcset generation for multiple device sizes (640-3840px)
+- ⚡ **On-Demand Processing** - Server-side image transformation using Sharp
+- 💾 **Smart Caching** - In-memory and disk cache for optimized images (1-year cache headers)
+- 🔍 **Lazy Loading** - Native lazy loading with IntersectionObserver fallback for older browsers
+- ⏫ **Priority Loading** - Opt-in eager loading for above-the-fold images
+- 🌫️ **Blur Placeholder** - Optional blur-up effect with custom blur data URL support
+- 🎯 **Quality Control** - Configurable quality (1-100, default: 75)
+- 🔄 **Loading States** - Built-in spinner with customization (size, color, background, custom component)
+- 🎨 **Custom Loader** - Override default image URL generation
+- 📏 **Callbacks** - onLoad and onError event handlers
+- 📱 **Sizes Attribute** - Control responsive image selection with custom sizes
+
 ### 🚀 Performance Optimizations
 - 💾 **Smart Caching** - LRU cache for files and bundles
 - 🔗 **Link Prefetching** - Automatic content prefetching on hover/focus

package/_/README.md

@@ -0,0 +1,59 @@
+# Reroute CLI Templates
+
+This directory contains the scaffolding templates used by the `reroute init` command.
+
+## Structure
+
+Each subdirectory represents a template that users can choose from:
+
+- `basic/` - Minimal Reroute application with basic routing
+- `blog/` - Full-featured blog with content collections and layouts
+
+## How It Works
+
+When a user runs `reroute init my-app --template blog`, the CLI:
+
+1. Copies all files from the `blog/` directory to the new project directory
+2. Replaces template variables (e.g., `{{PROJECT_NAME}}`) with actual values
+3. Runs `bun install` to install dependencies
+
+## Template Variables
+
+Templates can use the following variables that will be replaced during scaffolding:
+
+- `{{PROJECT_NAME}}` - The name of the project being created
+
+## Adding a New Template
+
+To add a new template:
+
+1. Create a new directory (e.g., `docs/`)
+2. Add all necessary files with the complete project structure
+3. Use `{{PROJECT_NAME}}` where dynamic replacement is needed
+4. Update `init.ts` to include the new template in the template type union
+5. Update the CLI README to document the new template
+
+## File Organization
+
+Templates should follow the standard Reroute project structure:
+
+```
+template-name/
+├── package.json              # Use {{PROJECT_NAME}} for the name field
+├── .gitignore
+└── src/
+    ├── index.ts              # Server entry point
+    └── client/
+        ├── App.tsx
+        ├── index.tsx
+        ├── index.html        # Use {{PROJECT_NAME}} in the title
+        ├── routes/
+        └── components/
+```
+
+## Notes
+
+- TypeScript errors in template files are expected (e.g., missing imports) since they're isolated
+- These errors will resolve once the template is copied to an actual project
+- Keep templates minimal but functional - users can customize from there
+- Ensure templates follow the project's code style (Biome)

package/_/basic/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"description": "A Reroute application",
+	"version": "0.0.0",
+	"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"
+	},
+	"private": true,
+	"dependencies": {
+		"reroute-js": "latest",
+		"elysia": "^1.4.13",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"sharp": "^0.34.4"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"@types/react": "^19.2.2",
+		"@types/react-dom": "^19.2.2",
+		"typescript": "^5"
+	}
+}

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

@@ -0,0 +1,10 @@
+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/_/basic/src/client/components/Counter.tsx

@@ -0,0 +1,15 @@
+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>
+			<button type='button' onClick={increase}>
+				Increase
+			</button>
+		</section>
+	);
+}

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

@@ -0,0 +1,12 @@
+<!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>
+</html>

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

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

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

@@ -0,0 +1,18 @@
+export default 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>
+			<nav style={{ marginTop: '2rem' }}>
+				<a href='/'>← Back to Home</a>
+			</nav>
+		</div>
+	);
+}

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

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

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

@@ -0,0 +1,57 @@
+import { Link } from 'reroute-js/react';
+import Counter from '../components/Counter';
+
+export default function HomePage() {
+	return (
+		<main style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
+			<h1>🏠 Welcome to Reroute!</h1>
+			<p>This is your new Reroute application.</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>
+				</nav>
+			</section>
+
+			<section
+				style={{
+					marginTop: '2rem',
+					padding: '1rem',
+					background: '#f5f5f5',
+					borderRadius: '8px',
+				}}
+			>
+				<h3>✨ Features</h3>
+				<ul>
+					<li>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>
+
+			<section>
+				<Counter />
+			</section>
+		</main>
+	);
+}

package/_/basic/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('/api/message', () => ({ message: 'Hello from server' }))
+	.listen(Number(Bun.env.PORT || '3000'));
+
+console.log(
+	`🦊 Reroute is running at ${app.server?.hostname}:${app.server?.port}`,
+);

package/_/basic/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/_/blog/package.json

@@ -0,0 +1,24 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"description": "A Reroute application",
+	"version": "0.0.0",
+	"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"
+	},
+	"private": true,
+	"dependencies": {
+		"reroute-js": "latest",
+		"elysia": "^1.4.12",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"sharp": "^0.34.4"
+	},
+	"devDependencies": {
+		"@types/bun": "latest",
+		"@types/react": "^19.2.2",
+		"@types/react-dom": "^19.2.2",
+		"typescript": "^5"
+	}
+}

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

@@ -0,0 +1,10 @@
+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/_/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

@@ -0,0 +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>
+</html>

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

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

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

@@ -0,0 +1,21 @@
+const meta = {
+	title: '404',
+	description: 'Page not found',
+};
+
+function NotFound() {
+	return (
+		<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='/' style={{ marginRight: '1rem' }}>
+					← Back to Home
+				</a>
+			</nav>
+		</div>
+	);
+}
+
+export default NotFound;
+export { meta };

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

@@ -0,0 +1,31 @@
+import RecentPosts from '../components/RecentPosts';
+
+const meta = {
+	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 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
+				</a>
+			</nav>
+		</div>
+	);
+}
+
+export default About;
+export { meta };

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

@@ -0,0 +1,21 @@
+const meta = {
+	title: '404',
+	description: 'Page not found',
+};
+
+function NotFound() {
+	return (
+		<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='/' style={{ marginRight: '1rem' }}>
+					← Back to Home
+				</a>
+			</nav>
+		</div>
+	);
+}
+
+export default NotFound;
+export { meta };

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

@@ -0,0 +1,84 @@
+import { Link, Outlet } from 'reroute-js/react';
+
+export default function BlogLayout() {
+	return (
+		<div style={{ minHeight: '100vh', background: '#f9f9f9' }}>
+			{/* Blog Header */}
+			<header
+				style={{
+					background: '#fff',
+					borderBottom: '1px solid #e0e0e0',
+					padding: '1rem 2rem',
+				}}
+			>
+				<div style={{ maxWidth: '800px', margin: '0 auto' }}>
+					<nav
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'space-between',
+						}}
+					>
+						<Link
+							to='/blog'
+							style={{
+								fontSize: '1.5rem',
+								fontWeight: 'bold',
+								textDecoration: 'none',
+								color: '#333',
+							}}
+						>
+							📝 Blog
+						</Link>
+						<div
+							style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}
+						>
+							<Link
+								to='/'
+								style={{
+									textDecoration: 'none',
+									color: '#666',
+									fontSize: '0.875rem',
+								}}
+							>
+								Home
+							</Link>
+							<Link
+								to='/about'
+								style={{
+									textDecoration: 'none',
+									color: '#666',
+									fontSize: '0.875rem',
+								}}
+							>
+								About
+							</Link>
+						</div>
+					</nav>
+				</div>
+			</header>
+
+			{/* Blog Content */}
+			<main>
+				<div style={{ maxWidth: '800px', margin: '0 auto' }}>
+					<Outlet />
+				</div>
+			</main>
+
+			{/* Blog Footer */}
+			<footer
+				style={{
+					marginTop: '4rem',
+					padding: '2rem',
+					textAlign: 'center',
+					color: '#666',
+					fontSize: '0.875rem',
+					borderTop: '1px solid #e0e0e0',
+					background: '#fff',
+				}}
+			>
+				<p>© 2024 Reroute Blog. Built with Bun, Elysia, and React.</p>
+			</footer>
+		</div>
+	);
+}

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

@@ -0,0 +1,11 @@
+import { ContentRoute } from 'reroute-js/react';
+
+export default function BlogPost() {
+	return (
+		<article style={{ padding: '2rem' }}>
+			<section style={{ lineHeight: '1.6' }}>
+				<ContentRoute collection='blog' />
+			</section>
+		</article>
+	);
+}

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;