reroute-js 0.2.3 → 0.3.1

package/README.md

@@ -34,6 +34,7 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
   - `useContent()` - Load and manage content collections with sorting
 - 🧩 **Components**:
   - `<Link>` - Client-side navigation with automatic prefetching
+  - `<Image>` - Optimized images with automatic format negotiation and lazy loading
   - `<Outlet>` - Render nested route components
   - `<ContentRoute>` - Dynamic content rendering with metadata injection
 - 🎭 **Providers**:
@@ -44,6 +45,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
@@ -113,12 +128,7 @@ cd my-app
 bun dev
 ```
 
-## 📖 Learn More
-
-- [Examples](./examples) - Example projects to get started
-- [GitHub](https://github.com/stewones/reroute) - Source code and issues
-
-## 🔌 SSR Data: External Requests Without Loaders
+## 🔌 External Requests SSR
 
 Reroute can execute route-level data fetching on the server and inline the result for instant hydration. Define an optional `ssr.data` in a route module and read it with `useData()`:
 
@@ -144,10 +154,17 @@ export default function Page() {
 ```
 
 Notes:
-- Works with Bun + Elysia SSR, no client loaders needed for initial render
+- Works with Bun + Elysia, no client loaders needed for initial render
 - Data is injected as `window.__REROUTE_DATA__` and read during hydration
 - Use with existing content features (useContent); both can be seeded in the same page
 
+
+## 📖 Learn More
+
+- [Examples](./examples) - Example projects to get started
+- [Packages](./packages) - Reroute entrypoints
+- [GitHub](https://github.com/stewones/reroute) - Source code and issues
+
 ## 📝 License
 
 MIT

package/_/basic/package.json

@@ -12,7 +12,8 @@
 		"reroute-js": "latest",
 		"elysia": "^1.4.13",
 		"react": "^19.2.0",
-		"react-dom": "^19.2.0"
+		"react-dom": "^19.2.0",
+		"sharp": "^0.34.4"
 	},
 	"devDependencies": {
 		"@types/bun": "latest",

package/_/blog/package.json

@@ -12,7 +12,8 @@
 		"reroute-js": "latest",
 		"elysia": "^1.4.12",
 		"react": "^19.2.0",
-		"react-dom": "^19.2.0"
+		"react-dom": "^19.2.0",
+		"sharp": "^0.34.4"
 	},
 	"devDependencies": {
 		"@types/bun": "latest",

package/_/store/package.json

@@ -12,7 +12,8 @@
 		"reroute-js": "latest",
 		"elysia": "^1.4.12",
 		"react": "^19.2.0",
-		"react-dom": "^19.2.0"
+		"react-dom": "^19.2.0",
+		"sharp": "^0.34.4"
 	},
 	"devDependencies": {
 		"@types/bun": "latest",

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

@@ -1,5 +1,5 @@
 /** biome-ignore-all lint/a11y/noStaticElementInteractions: who cares, this is just an example */
-import { Link } from 'reroute-js/react';
+import { Image, Link } from 'reroute-js/react';
 import type { Product } from '../lib/api';
 
 interface ProductCardProps {
@@ -14,11 +14,14 @@ export default function ProductCard({ product }: ProductCardProps) {
 				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
+					<Image
 						src={product.image}
 						alt={product.title}
+						width={180}
+						height={180}
+						quality={75}
+						sizes='(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 180px'
 						className='max-w-full max-h-full object-contain'
-						loading='lazy'
 						style={{ viewTransitionName: `product-image-${product.id}` }}
 					/>
 				</div>

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

@@ -3,6 +3,15 @@
 
 const API_BASE_URL = 'https://fakestoreapi.com';
 
+// In-memory cache for API responses
+interface CacheEntry<T> {
+	data: T;
+	timestamp: number;
+}
+
+const cache = new Map<string, CacheEntry<unknown>>();
+const CACHE_TTL = 60000; // 1 minute cache
+
 interface Product {
 	id: number;
 	title: string;
@@ -65,11 +74,67 @@ function ensureSerializable<T>(data: T): T {
 	return JSON.parse(JSON.stringify(data));
 }
 
-// Generic fetch wrapper with error handling
+// Cache helper functions
+function getCached<T>(key: string): T | null {
+	const entry = cache.get(key) as CacheEntry<T> | undefined;
+	if (!entry) return null;
+
+	const isExpired = Date.now() - entry.timestamp > CACHE_TTL;
+	if (isExpired) {
+		cache.delete(key);
+		return null;
+	}
+
+	return entry.data;
+}
+
+function setCache<T>(key: string, data: T): void {
+	cache.set(key, {
+		data,
+		timestamp: Date.now(),
+	});
+}
+
+// Generic fetch wrapper with error handling and caching
 async function apiFetch<T>(
 	endpoint: string,
 	options?: RequestInit,
 ): Promise<T> {
+	// Check cache first (only for GET requests)
+	if (!options || !options.method || options.method === 'GET') {
+		const cacheKey = `${endpoint}:${JSON.stringify(options || {})}`;
+		const cached = getCached<T>(cacheKey);
+		if (cached) {
+			return cached;
+		}
+
+		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();
+			const serialized = ensureSerializable(data);
+
+			// Cache the result
+			setCache(cacheKey, serialized);
+
+			return serialized;
+		} catch (error) {
+			console.error(`API request failed: ${endpoint}`, error);
+			throw error;
+		}
+	}
+
+	// Non-GET requests - no caching
 	try {
 		const response = await fetch(`${API_BASE_URL}${endpoint}`, {
 			...options,

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

@@ -80,8 +80,8 @@ function HomePage() {
 							Lightning Fast
 						</h3>
 						<p className='text-gray-600 leading-relaxed'>
-							Built on Bun for blazing fast performance and server-side
-							rendering
+							Built on Bun for blazing fast performance, server-side rendering
+							and image caching
 						</p>
 					</div>
 
@@ -102,7 +102,7 @@ function HomePage() {
 							SSR Support
 						</h3>
 						<p className='text-gray-600 leading-relaxed'>
-							SEO-friendly server-side rendering with automatic hydration
+							SEO-friendly with automatic hydration
 						</p>
 					</div>
 

package/_/store/src/client/routes/products/[id].tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Link, useData, useParams } from 'reroute-js/react';
+import { Image, Link, useData, useParams } from 'reroute-js/react';
 import Header from '../../components/Header';
 import ProductCard from '../../components/ProductCard';
 import { getProduct, getProductsByCategory, type Product } from '../../lib/api';
@@ -141,9 +141,14 @@ function ProductDetailPage() {
 				<div className='grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16'>
 					{/* Product Image */}
 					<div className='card flex items-center justify-center p-8 min-h-[500px]'>
-						<img
+						<Image
 							src={product.image}
 							alt={product.title}
+							width={350}
+							height={350}
+							quality={85}
+							sizes='(max-width: 1024px) 90vw, 350px'
+							priority
 							className='max-w-full max-h-[500px] object-contain'
 							style={{ viewTransitionName: `product-image-${product.id}` }}
 						/>

package/_/store/src/index.ts

@@ -10,6 +10,7 @@ const app = new Elysia()
 		reroute({
 			app: createElement(App),
 			minify: IS_PRODUCTION,
+			imageAllowedDomains: ['fakestoreapi.com'],
 		}),
 	)
 	.listen(Number(Bun.env.PORT || '3001'));

package/cli/bin.d.ts

@@ -1,3 +1,11 @@
-#!/usr/bin/env bun
+/**
+ * reroute-js v0.2.2
+ *
+ * @license MIT
+ * @copyright 2025 stewones <hi@stewan.io>
+ * @see https://github.com/stewones/reroute
+ *
+ * Built with Bun <3
+ */
 export * from './src/cli';
 //# sourceMappingURL=bin.d.ts.map

package/cli/bin.js

@@ -1,5 +1,14 @@
 #!/usr/bin/env bun
 // @bun
+/**
+ * reroute-js v0.2.2
+ *
+ * @license MIT
+ * @copyright 2025 stewones <hi@stewan.io>
+ * @see https://github.com/stewones/reroute
+ *
+ * Built with Bun <3
+ */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -288,21 +297,17 @@ async function buildTailwind(cwd) {
     });
   });
 }
-function initTailwind(cwd) {
-  if (!isTailwindAvailable(cwd)) {
-    return null;
-  }
-  if (!hasTailwindInput(cwd)) {
-    console.log('[reroute/tailwind] theme.css not found or missing @import "tailwindcss", skipping...');
-    return null;
+async function buildTailwindIfConfigured(cwd) {
+  try {
+    if (isTailwindAvailable(cwd) && hasTailwindInput(cwd)) {
+      await buildTailwind(cwd);
+      return true;
+    }
+    return false;
+  } catch (e) {
+    console.warn("[reroute/tailwind] build failed:", e);
+    return true;
   }
-  console.log("[reroute/tailwind] Detected Tailwind CSS v4");
-  buildTailwind(cwd).then(() => {
-    console.log("[reroute/tailwind] Built successfully");
-  }).catch((error) => {
-    console.error("[reroute/tailwind] Build failed:", error);
-  });
-  return null;
 }
 var init_tailwind = () => {};
 
@@ -719,14 +724,14 @@ async function gen(args) {
   const watchMode = args.includes("--watch") || args.includes("-w");
   if (!watchMode) {
     await generate(cwd);
-    initTailwind(cwd);
+    await buildTailwindIfConfigured(cwd);
     return;
   }
   console.log("[reroute/gen] Watch mode enabled");
   console.log("[reroute/gen] Initial generation...");
   await generate(cwd);
   try {
-    await buildTailwind(cwd);
+    await buildTailwindIfConfigured(cwd);
   } catch {}
   const notifyReload = async (reason) => {
     const ports = [
@@ -757,7 +762,7 @@ async function gen(args) {
       console.log("[reroute/gen] Change detected, regenerating...");
       try {
         await generate(cwd);
-        await buildTailwind(cwd);
+        await buildTailwindIfConfigured(cwd);
         await notifyReload("routes change");
       } catch (e) {
         console.error("[reroute/gen] Error during regeneration:", e);
@@ -781,7 +786,7 @@ async function gen(args) {
       clearTimeout(twDebounce);
     twDebounce = setTimeout(async () => {
       try {
-        await buildTailwind(cwd);
+        await buildTailwindIfConfigured(cwd);
         await notifyReload("client change");
       } catch {}
     }, 150);
@@ -819,14 +824,14 @@ async function main() {
     process.exit(0);
   }
   if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
-    printHelp2();
+    await printHelp2();
     process.exit(0);
   }
   const command = args[0];
   if (!commands[command]) {
     console.error(`Unknown command: ${command}`);
     console.error("");
-    printHelp2();
+    await printHelp2();
     process.exit(1);
   }
   try {
@@ -837,8 +842,8 @@ async function main() {
     process.exit(1);
   }
 }
-function printHelp2() {
-  console.log("Reroute CLI - File-based routing framework");
+async function printHelp2() {
+  console.log(`Reroute v${await getVersion()}`);
   console.log("");
   console.log("Usage:");
   console.log("  reroute <command> [options]");
@@ -875,4 +880,4 @@ async function getVersion() {
 }
 main();
 
-//# debugId=6AFDAF7BCD23E07864756E2164756E21
+//# debugId=2E434D31D2F3337264756E2164756E21