reroute-js 0.20.0 → 0.20.2

package/_/basic/package.json

@@ -4,12 +4,12 @@
 	"version": "0.0.0",
 	"scripts": {
 	"types": "tsc --noEmit",
-	"gen": "reroute gen",
-	"start": "reroute start --prod",
-	"dev": "reroute dev",
-	"build": "reroute build",
-	"kill": "bunx kill-port 3000",
-	"analyze": "reroute analyze --prod --open"
+		"gen": "reroute gen",
+		"start": "reroute start --prod",
+		"dev": "reroute dev",
+		"build": "reroute build",
+		"kill": "bunx kill-port 3000",
+		"analyze": "reroute analyze --prod --open"
 	},
 	"private": true,
 	"dependencies": {

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

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

package/_/basic/src/index.ts

@@ -9,6 +9,6 @@ const app = new Elysia()
 	console.log('[api] log from my api')
 	return { message: 'Hello from server' }
 	})
-	.listen(Number(Bun.env.PORT || '3000'));
+	.listen(Bun.env.PORT || '3000');
 
 console.log(`[app] Running at ${app.server?.hostname}:${app.server?.port}`);

package/_/blog/package.json

@@ -3,13 +3,13 @@
 	"description": "A Reroute application",
 	"version": "0.0.0",
 	"scripts": {
-	"types": "tsc --noEmit",
-	"gen": "reroute gen",
-	"start": "PORT=3001 reroute start --prod",
-	"dev": "PORT=3001 reroute dev",
-	"build": "reroute build",
-	"kill": "bunx kill-port 3001",
-	"analyze": "reroute analyze --prod --open"
+		"types": "tsc --noEmit",
+		"gen": "reroute gen",
+		"start": "PORT=3001 reroute start --prod",
+		"dev": "PORT=3001 reroute dev",
+		"build": "reroute build",
+		"kill": "bunx kill-port 3001",
+		"analyze": "reroute analyze --prod --open"
 	},
 	"private": true,
 	"dependencies": {

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

@@ -1,11 +1,11 @@
 import { RerouteProvider } from 'reroute-js/react';
-import { artifacts } from '../../.reroute';
+import { bundle } from '../../.reroute';
 
 interface AppProps {
 	pathname?: string;
 }
 
 export default function App({ pathname }: AppProps = {}) {
-	console.log('[app] app mounted');
-	return <RerouteProvider from={{ pathname, ...artifacts }} />;
+	console.log('[app] blog mounted');
+	return <RerouteProvider pathname={pathname} {...bundle} />;
 }

package/_/blog/src/index.ts

@@ -9,7 +9,7 @@ const app = new Elysia()
 		console.log('[api] log from my api');
 		return { message: 'Hello from server' };
 	})
-	.listen(Number(Bun.env.PORT || '3001'));
+	.listen(Bun.env.PORT || '3001');
 
 console.log(
 	`[app] Blog running at ${app.server?.hostname}:${app.server?.port} on ${Bun.env.NODE_ENV || 'development'}`,

package/_/redirects/package.json

@@ -4,13 +4,13 @@
 	"description": "A Reroute application",
 	"private": true,
 	"scripts": {
-	"types": "tsc --noEmit",
-	"gen": "reroute gen",
-	"start": "PORT=3002 reroute start --prod",
-	"dev": "PORT=3002 reroute dev",
-	"build": "reroute build",
-	"kill": "bunx kill-port 3002",
-	"analyze": "reroute analyze --prod --open"
+		"types": "tsc --noEmit",
+		"gen": "reroute gen",
+		"start": "PORT=3002 reroute start --prod",
+		"dev": "PORT=3002 reroute dev",
+		"build": "reroute build",
+		"kill": "bunx kill-port 3002",
+		"analyze": "reroute analyze --prod --open"
 	},
 	"dependencies": {
 		"reroute-js": "latest",

package/_/rss/package.json

@@ -4,13 +4,13 @@
 	"description": "A Reroute application",
 	"private": true,
 	"scripts": {
-	"types": "tsc --noEmit",
-	"gen": "reroute gen",
-	"start": "PORT=3003 reroute start --prod",
-	"dev": "PORT=3003 reroute dev",
-	"build": "reroute build",
-	"kill": "bunx kill-port 3003",
-	"analyze": "reroute analyze --prod --open"
+		"types": "tsc --noEmit",
+		"gen": "reroute gen",
+		"start": "PORT=3003 reroute start --prod",
+		"dev": "PORT=3003 reroute dev",
+		"build": "reroute build",
+		"kill": "bunx kill-port 3003",
+		"analyze": "reroute analyze --prod --open"
 	},
 	"dependencies": {
 		"reroute-js": "latest",

package/_/search/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "reroute-search-example",
+	"description": "Search functionality example with content indexing",
+	"version": "0.0.0",
+	"scripts": {
+		"types": "tsc --noEmit",
+		"gen": "reroute gen",
+		"start": "PORT=3004 reroute start --prod",
+		"dev": "PORT=3004 reroute dev",
+		"build": "reroute build",
+		"kill": "bunx kill-port 3004"
+	},
+	"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/_/search/reroute.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+	options: {
+		app: './src/client/App',
+		maxAge: 3600,
+		compression: true,
+	},
+	markdown: {
+		components: './src/client/lib/markdown-components',
+		enableGfm: true,
+		theme: 'github-dark',
+	},
+	// 🔍 Search configuration
+	search: {
+		// Enable search index generation
+		enabled: true,
+
+		// Index specific collections (or omit to index all)
+		collections: ['blog', 'docs'],
+
+		// Include full content text in search (default: false)
+		// Set to false for lightweight index with only headings + metadata
+		includeContent: true,
+
+		// Maximum content length to index (if includeContent is true)
+		contentLimit: 5000,
+
+		// Meta fields to index from frontmatter
+		metaFields: ['title', 'description', 'excerpt', 'tags', 'category'],
+
+		// Heading level range to extract
+		minHeadingLevel: 1,
+		maxHeadingLevel: 6,
+	},
+});
+

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

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

package/_/search/src/client/components/SearchBox.tsx

@@ -0,0 +1,325 @@
+
+import { useNavigate, useRouter, useSearch } from 'reroute-js/react';
+import { useEffect, useState } from 'react';
+import SearchResults from './SearchResults';
+
+interface SearchBoxProps {
+	initialQuery?: string;
+}
+
+function SearchBox({ initialQuery = '' }: SearchBoxProps = {}) {
+	const router = useRouter();
+	
+	// Initialize from URL search params (works on both server and client)
+	const urlQuery = router.searchParams.get('q') || initialQuery || '';
+	const [query, setQuery] = useState(urlQuery);
+	const [selectedCollections, setSelectedCollections] = useState<string[]>([]);
+	const [page, setPage] = useState(1);
+	const navigate = useNavigate();
+	const [mounted, setMounted] = useState(false);
+
+	// Mark as mounted after first render
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	// Sync search query to URL as user types (client-side only, no history entries)
+	useEffect(() => {
+		if (!mounted || typeof window === 'undefined') {
+			return;
+		}
+		
+		const url = new URL(window.location.href);
+		const currentQ = url.searchParams.get('q') || '';
+		
+		// Only update if different to avoid loops
+		if (currentQ !== query) {
+			if (query) {
+				url.searchParams.set('q', query);
+			} else {
+				url.searchParams.delete('q');
+			}
+			window.history.replaceState({}, '', url.toString());
+		}
+	}, [query, mounted]);
+
+	const { results, isLoading, error, total, totalPages, pageSize } = useSearch({
+		query,
+		page,
+		pageSize: 10,
+		collections: selectedCollections.length > 0 ? selectedCollections : undefined,
+		debounce: 400,
+	});
+
+	const toggleCollection = (collection: string) => {
+		setSelectedCollections((prev) =>
+			prev.includes(collection)
+				? prev.filter((c) => c !== collection)
+				: [...prev, collection],
+		);
+		setPage(1); // Reset to first page when filters change
+	};
+
+	return (
+		<div
+			style={{
+				background: '#fff',
+				padding: '2rem',
+				borderRadius: '12px',
+				boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+			}}
+		>
+			{/* Search Input */}
+			<div style={{ marginBottom: '1.5rem' }}>
+				<label
+					htmlFor="search-input"
+					style={{
+						display: 'block',
+						marginBottom: '0.5rem',
+						fontWeight: 600,
+						fontSize: '1.125rem',
+					}}
+				>
+					Search Content
+				</label>
+			<input
+				id="search-input"
+				type="search"
+				value={query}
+				onChange={(e) => {
+					setQuery(e.target.value);
+					setPage(1); // Reset to first page on new search
+				}}
+				onKeyDown={(e) => {
+					if (e.key === 'Enter' && query.trim()) {
+						const params = new URLSearchParams();
+						params.set('q', query);
+						if (selectedCollections.length > 0) {
+							params.set('collections', selectedCollections.join(','));
+						}
+						navigate(`/search?${params.toString()}`);
+					}
+				}}
+				placeholder="Type to search articles, docs, and more..."
+				style={{
+					width: '100%',
+					padding: '0.875rem 1rem',
+					fontSize: '1rem',
+					border: '2px solid #e0e0e0',
+					borderRadius: '8px',
+					outline: 'none',
+					transition: 'border-color 0.2s',
+				}}
+				onFocus={(e) => {
+					e.currentTarget.style.borderColor = '#0066cc';
+				}}
+				onBlur={(e) => {
+					e.currentTarget.style.borderColor = '#e0e0e0';
+				}}
+				data-testid="search-input"
+			/>
+			</div>
+
+			{/* Collection Filters */}
+			<div style={{ marginBottom: '1.5rem' }}>
+				<label
+					style={{
+						display: 'block',
+						marginBottom: '0.5rem',
+						fontWeight: 600,
+						fontSize: '0.875rem',
+						color: '#666',
+					}}
+				>
+					Filter by Collection
+				</label>
+				<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+					<button
+						type="button"
+						onClick={() => toggleCollection('blog')}
+						style={{
+							padding: '0.5rem 1rem',
+							border: selectedCollections.includes('blog')
+								? '2px solid #0066cc'
+								: '2px solid #e0e0e0',
+							background: selectedCollections.includes('blog')
+								? '#e6f2ff'
+								: '#fff',
+							color: selectedCollections.includes('blog') ? '#0066cc' : '#666',
+							borderRadius: '20px',
+							cursor: 'pointer',
+							fontSize: '0.875rem',
+							fontWeight: 500,
+							transition: 'all 0.2s',
+						}}
+					>
+						{selectedCollections.includes('blog') ? '✓ ' : ''}Blog
+					</button>
+					<button
+						type="button"
+						onClick={() => toggleCollection('docs')}
+						style={{
+							padding: '0.5rem 1rem',
+							border: selectedCollections.includes('docs')
+								? '2px solid #0066cc'
+								: '2px solid #e0e0e0',
+							background: selectedCollections.includes('docs')
+								? '#e6f2ff'
+								: '#fff',
+							color: selectedCollections.includes('docs') ? '#0066cc' : '#666',
+							borderRadius: '20px',
+							cursor: 'pointer',
+							fontSize: '0.875rem',
+							fontWeight: 500,
+							transition: 'all 0.2s',
+						}}
+					>
+						{selectedCollections.includes('docs') ? '✓ ' : ''}Docs
+					</button>
+				</div>
+			</div>
+
+		{/* Search Status */}
+		{isLoading && (
+			<div
+				style={{
+					padding: '1rem',
+					background: '#f0f9ff',
+					border: '1px solid #bae6fd',
+					borderRadius: '8px',
+					color: '#0369a1',
+				}}
+				data-testid="search-loading"
+			>
+				🔍 Searching...
+			</div>
+		)}
+
+		{error && (
+			<div
+				style={{
+					padding: '1rem',
+					background: '#fef2f2',
+					border: '1px solid #fecaca',
+					borderRadius: '8px',
+					color: '#dc2626',
+				}}
+				data-testid="search-error"
+			>
+				❌ Error: {error.message}
+			</div>
+		)}
+
+		{/* Results Count */}
+		{!isLoading && query && !error && (
+			<div
+				style={{
+					padding: '0.75rem 0',
+					marginBottom: '1rem',
+					borderBottom: '1px solid #e0e0e0',
+					fontSize: '0.875rem',
+					color: '#666',
+				}}
+				data-testid={total > 0 ? 'search-results-count' : 'search-no-results'}
+			>
+				{total > 0 ? (
+					<span>
+						Found <strong>{total}</strong> result{total !== 1 ? 's' : ''}{' '}
+						for <strong>"{query}"</strong>
+						{totalPages > 1 && (
+							<span style={{ marginLeft: '0.5rem', color: '#999' }}>
+								(Page {page} of {totalPages})
+							</span>
+						)}
+					</span>
+				) : (
+					<span>
+						No results found for <strong>"{query}"</strong>
+					</span>
+				)}
+			</div>
+		)}
+
+			{/* Results */}
+			{!isLoading && results.length > 0 && (
+				<>
+					<SearchResults results={results} />
+					
+					{/* Pagination Controls */}
+					{totalPages > 1 && (
+						<div
+							style={{
+								marginTop: '2rem',
+								padding: '1rem 0',
+								borderTop: '1px solid #e0e0e0',
+								display: 'flex',
+								justifyContent: 'center',
+								alignItems: 'center',
+								gap: '1rem',
+							}}
+						>
+							<button
+								type="button"
+								onClick={() => setPage((p) => Math.max(1, p - 1))}
+								disabled={page === 1}
+								style={{
+									padding: '0.5rem 1rem',
+									border: '2px solid #e0e0e0',
+									background: page === 1 ? '#f5f5f5' : '#fff',
+									color: page === 1 ? '#999' : '#333',
+									borderRadius: '6px',
+									cursor: page === 1 ? 'not-allowed' : 'pointer',
+									fontSize: '0.875rem',
+									fontWeight: 500,
+									transition: 'all 0.2s',
+								}}
+							>
+								← Previous
+							</button>
+							<span style={{ fontSize: '0.875rem', color: '#666' }}>
+								Page <strong>{page}</strong> of <strong>{totalPages}</strong>
+							</span>
+							<button
+								type="button"
+								onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+								disabled={page === totalPages}
+								style={{
+									padding: '0.5rem 1rem',
+									border: '2px solid #e0e0e0',
+									background: page === totalPages ? '#f5f5f5' : '#fff',
+									color: page === totalPages ? '#999' : '#333',
+									borderRadius: '6px',
+									cursor: page === totalPages ? 'not-allowed' : 'pointer',
+									fontSize: '0.875rem',
+									fontWeight: 500,
+									transition: 'all 0.2s',
+								}}
+							>
+								Next →
+							</button>
+						</div>
+					)}
+				</>
+			)}
+
+			{/* Empty State */}
+			{!isLoading && !query && (
+				<div
+					style={{
+						padding: '3rem 1rem',
+						textAlign: 'center',
+						color: '#999',
+					}}
+				>
+					<div style={{ fontSize: '3rem', marginBottom: '1rem' }}>🔍</div>
+					<p style={{ fontSize: '1.125rem' }}>
+						Start typing to search through blog posts and documentation
+					</p>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default SearchBox;
+

package/_/search/src/client/components/SearchResults.tsx

@@ -0,0 +1,114 @@
+import { Link, type SearchResultEntry } from 'reroute-js/react';
+
+interface SearchResultsProps {
+	results: SearchResultEntry[];
+}
+
+function SearchResults({ results }: SearchResultsProps) {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }} data-testid="search-results-list">
+			{results.map((result) => (
+				<article
+					key={result.id}
+					style={{
+						padding: '1.5rem',
+						background: '#fafafa',
+						border: '1px solid #e0e0e0',
+						borderRadius: '8px',
+						transition: 'all 0.2s',
+					}}
+					onMouseEnter={(e) => {
+						e.currentTarget.style.background = '#f5f5f5';
+						e.currentTarget.style.borderColor = '#0066cc';
+					}}
+					onMouseLeave={(e) => {
+						e.currentTarget.style.background = '#fafafa';
+						e.currentTarget.style.borderColor = '#e0e0e0';
+					}}
+					data-testid={`search-result-${result.id}`}
+				>
+					{/* Collection Badge */}
+					<div style={{ marginBottom: '0.5rem' }}>
+						<span
+							style={{
+								display: 'inline-block',
+								padding: '0.25rem 0.75rem',
+								background: result.collection === 'blog' ? '#dbeafe' : '#dcfce7',
+								color: result.collection === 'blog' ? '#1e40af' : '#15803d',
+								borderRadius: '12px',
+								fontSize: '0.75rem',
+								fontWeight: 600,
+								textTransform: 'uppercase',
+								letterSpacing: '0.5px',
+							}}
+						>
+							{result.collection}
+						</span>
+					</div>
+
+					{/* Title */}
+					<h3 style={{ marginBottom: '0.75rem' }}>
+						<Link
+							to={`/${result.collection}/${result.slug}`}
+							style={{
+								fontSize: '1.5rem',
+								fontWeight: 600,
+								color: '#0066cc',
+								textDecoration: 'none',
+							}}
+							onMouseEnter={(e) => {
+								e.currentTarget.style.textDecoration = 'underline';
+							}}
+							onMouseLeave={(e) => {
+								e.currentTarget.style.textDecoration = 'none';
+							}}
+						>
+							{result.title}
+						</Link>
+					</h3>
+
+					{/* Excerpt */}
+					{result.excerpt && (
+						<p
+							style={{
+								marginBottom: '1rem',
+								color: '#666',
+								fontSize: '0.9375rem',
+								lineHeight: 1.6,
+							}}
+						>
+							{result.excerpt}
+						</p>
+					)}
+
+				{/* Read More Link */}
+				<div style={{ marginTop: '1rem', paddingTop: '1rem', borderTop: '1px solid #e0e0e0' }}>
+					<Link
+						to={`/${result.collection}/${result.slug}`}
+						style={{
+							color: '#0066cc',
+							textDecoration: 'none',
+							fontSize: '0.875rem',
+							fontWeight: 600,
+							display: 'inline-flex',
+							alignItems: 'center',
+							gap: '0.25rem',
+						}}
+						onMouseEnter={(e) => {
+							e.currentTarget.style.textDecoration = 'underline';
+						}}
+						onMouseLeave={(e) => {
+							e.currentTarget.style.textDecoration = 'none';
+						}}
+					>
+						Read full article →
+					</Link>
+				</div>
+				</article>
+			))}
+		</div>
+	);
+}
+
+export default SearchResults;
+

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

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Search Example - Reroute</title>
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+				box-sizing: border-box;
+			}
+			body {
+				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+					'Helvetica Neue', Arial, sans-serif;
+				line-height: 1.6;
+				color: #333;
+				background: #f5f5f5;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/index.tsx"></script>
+	</body>
+</html>
+

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

@@ -0,0 +1,8 @@
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+
+const root = document.getElementById('root');
+if (root) {
+	hydrateRoot(root, <App />);
+}
+