reroute-js 0.10.1 → 0.11.0

package/README.md

@@ -123,6 +123,7 @@ Reroute is a dead-simple file-based routing framework for building full-stack Re
 - 🏷️ **Custom Headers** - Add headers to static file responses
 - ⏰ **Cache Control** - Configurable max-age and cache directives for static files and `__reroute_data` JSON
 - 🎨 **HTML Template** - Custom index.html with variable substitution
+- 🔐 **Environment Variables** - Share REROUTE_ prefixed env vars between server and browser
 
 ## 🚀 Quick Start
 
@@ -171,6 +172,94 @@ Notes:
 - 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
 
+## 🔐 Environment Variables
+
+Reroute supports sharing environment variables between server and browser code using a `REROUTE_` prefix convention (similar to how Vite uses `VITE_`).
+
+### Usage
+
+Create a `.env` file in your project root:
+
+```bash
+# .env
+
+# Server-only variables (not exposed to browser)
+DATABASE_URL=postgresql://localhost:5432/mydb
+SECRET_KEY=my-secret-key
+
+# Public variables (exposed to browser)
+REROUTE_API_URL=https://api.example.com
+REROUTE_ANALYTICS_ID=G-XXXXXXXXXX
+REROUTE_FEATURE_FLAG=true
+```
+
+### Accessing Variables
+
+**In Server Code:**
+All variables are available via `process.env` or `Bun.env`:
+
+```typescript
+// src/index.ts
+const dbUrl = process.env.DATABASE_URL;
+const apiUrl = process.env.REROUTE_API_URL;
+```
+
+**In Client/Browser Code:**
+Only `REROUTE_` prefixed variables are available:
+
+```tsx
+// src/client/routes/index.tsx
+export default function Home() {
+  // ✅ Available - prefixed with REROUTE_
+  const apiUrl = import.meta.env.REROUTE_API_URL;
+  const analyticsId = process.env.REROUTE_ANALYTICS_ID; // Also works
+
+  // ❌ Not available - no REROUTE_ prefix
+  const dbUrl = process.env.DATABASE_URL; // undefined in browser
+
+  return <div>API: {apiUrl}</div>;
+}
+```
+
+### Environment Files
+
+Reroute supports multiple environment files with priority:
+
+- `.env` - Base environment variables
+- `.env.production` - Production-specific variables
+- `.env.local` - Local overrides (gitignored)
+- `.env.production.local` - Local production overrides (gitignored)
+
+Files are loaded in order, with later files overriding earlier ones.
+
+**Hot Reload:** Changes to any `.env` file automatically rebuild the bundle and reload your browser in watch mode - no server restart needed!
+
+### Security
+
+**Important:** Only variables prefixed with `REROUTE_` are bundled into the client code. This prevents accidentally exposing sensitive credentials like database URLs, API keys, or secrets to the browser.
+
+- ✅ `REROUTE_API_URL` - Safe to expose
+- ✅ `REROUTE_FEATURE_FLAG` - Safe to expose
+- ❌ `DATABASE_URL` - Server-only
+- ❌ `SECRET_KEY` - Server-only
+
+### TypeScript Support
+
+For type safety, create a `env.d.ts` file:
+
+```typescript
+// env.d.ts
+interface ImportMetaEnv {
+  readonly REROUTE_API_URL: string;
+  readonly REROUTE_ANALYTICS_ID: string;
+  readonly REROUTE_FEATURE_FLAG: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+```
+
 ## 📝 Markdown Routes
 
 Reroute supports native markdown and MDX files as routes with frontmatter support and syntax highlighting.

package/_/README.md

@@ -8,6 +8,9 @@ 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
+- `redirects/` - Example of redirect configurations
+- `store/` - Example of a simple e-commerce store
+- `streaming/` - Example of a streaming application
 
 ## How It Works
 

package/_/basic/reroute.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+	options: {
+		app: './src/client/App',
+		maxAge: 3600,
+		compression: true
+	},
+	streaming: {
+		enabled: true,
+	},
+});

package/_/basic/tsconfig.json

@@ -1,26 +1,25 @@
 {
-	"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"]
+  "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"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
 }

package/_/blog/reroute.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+	options: {
+		app: './src/client/App',
+		maxAge: 3600,
+		compression: true
+	},
+	streaming: {
+		enabled: true,
+	},
+});

package/_/blog/tsconfig.json

@@ -1,26 +1,25 @@
 {
-	"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"]
+  "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"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
 }

package/_/redirects/README.md

@@ -0,0 +1,63 @@
+# Reroute Redirects Example
+
+Comprehensive example demonstrating all redirect features in reroute.
+
+## Features Demonstrated
+
+### 1. Static Redirects
+- Permanent redirects (301)
+- Temporary redirects (302)
+
+### 2. Regex Redirects
+- Single capture groups
+- Multiple capture groups
+- Regex strings with flags
+
+### 3. Dynamic Redirects
+- Query parameter based
+- Hostname based
+- URL inspection
+
+### 4. Conditional Redirects
+- Return `null` to skip redirect
+- Continue to normal route handling
+
+### 5. Async Redirects
+- Database lookups
+- API calls
+- Delayed operations
+
+### 6. Error Handling
+- Graceful error handling
+- Automatic fallback to routes
+- Console logging
+
+### 7. Special Cases
+- External redirects
+- Trailing slash removal
+- API versioning
+- Method preservation (308)
+
+## Running the Example
+
+```bash
+# From the redirects directory
+bun dev
+
+# Or from the root
+cd examples/redirects
+bun dev
+```
+
+Visit http://localhost:3000 to test all redirect scenarios.
+
+## Testing Redirects
+
+1. Click each link in the index page
+2. Observe the URL changes in your browser
+3. Check server console for error messages (error-test example)
+4. Test with browser dev tools to see redirect status codes
+
+## Configuration
+
+See `reroute.config.ts` for all redirect configurations with detailed comments.

package/_/redirects/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"version": "0.0.0",
+	"description": "A Reroute application",
+	"private": true,
+	"scripts": {
+		"types": "tsc --noEmit",
+		"gen": "reroute gen",
+		"start": "reroute start",
+		"dev": "reroute dev",
+		"build": "reroute build",
+		"analyze": "reroute analyze --prod --open"
+	},
+	"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/_/redirects/reroute.config.ts

@@ -0,0 +1,131 @@
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+	options: {
+		app: './src/client/App',
+		maxAge: 3600,
+		compression: true,
+	},
+
+	// Comprehensive redirect examples
+	redirects: [
+		// 1. Basic static redirect (permanent)
+		{
+			source: '/old-home',
+			destination: '/home',
+			status: 301,
+		},
+
+		// 2. Temporary redirect (default status)
+		{
+			source: '/temp',
+			destination: '/home',
+		},
+
+		// 3. Regex with single capture group
+		{
+			source: /^\/blog\/(\d+)$/,
+			destination: '/posts/$1',
+			status: 301,
+		},
+
+		// 4. Regex with multiple capture groups
+		{
+			source: /^\/archive\/(\d{4})\/(\d{2})\/(.+)$/,
+			destination: '/posts/$1/$2?slug=$3',
+			status: 301,
+		},
+
+		// 5. Regex string with regex flag
+		{
+			source: '^/products/(.*)$',
+			destination: '/shop/$1',
+			regex: true,
+			status: 301,
+		},
+
+		// 6. Dynamic redirect based on query params
+		{
+			source: '/language',
+			destination: (url: URL) => {
+				const lang = url.searchParams.get('lang') || 'en';
+				return `/${lang}/home`;
+			},
+			status: 302,
+		},
+
+		// 7. Conditional redirect (returns null to skip)
+		{
+			source: '/conditional',
+			destination: (url: URL) => {
+				const redirect = url.searchParams.get('redirect');
+				if (redirect === 'true') {
+					return '/redirected';
+				}
+				return null; // Skip redirect, continue to normal route
+			},
+		},
+
+		// 8. Async redirect (simulates database lookup)
+		{
+			source: '/async-lookup',
+			destination: async (url: URL) => {
+				const id = url.searchParams.get('id') || '1';
+				// Simulate async operation
+				await new Promise((resolve) => setTimeout(resolve, 10));
+				return `/item/${id}`;
+			},
+		},
+
+		// 9. Error handling test (will fail gracefully)
+		{
+			source: '/error-test',
+			destination: (url: URL) => {
+				const shouldError = url.searchParams.get('error') === 'true';
+				if (shouldError) {
+					throw new Error('Intentional error for testing');
+				}
+				return '/success';
+			},
+		},
+
+		// 10. External redirect
+		{
+			source: '/github',
+			destination: 'https://github.com',
+			status: 301,
+		},
+
+		// 11. Trailing slash removal
+		{
+			source: /^\/(.+)\/$/,
+			destination: '/$1',
+			status: 301,
+		},
+
+		// 12. API versioning
+		{
+			source: /^\/api\/v(\d+)\/(.+)$/,
+			destination: '/api/$2?version=$1',
+			status: 301,
+		},
+
+		// 13. Complex pattern with hostname check
+		{
+			source: '/smart',
+			destination: (url: URL) => {
+				const isLocalhost = url.hostname === 'localhost';
+				const query = url.searchParams.get('q') || 'default';
+				return `/search?q=${query}&env=${isLocalhost ? 'dev' : 'prod'}`;
+			},
+		},
+
+		// 14. Preserve POST method (308)
+		{
+			source: '/old-api',
+			destination: '/new-api',
+			status: 308,
+		},
+	],
+});
+

package/_/redirects/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/_/store/reroute.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+	options: {
+		app: './src/client/App',
+		maxAge: 3600,
+		compression: true,
+		imageAllowedDomains: ['fakestoreapi.com'],
+	},
+	streaming: {
+		enabled: true,
+	},
+});

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

@@ -12,6 +12,5 @@
     </head>
     <body>
         <div id="root"></div>
-        <script type="module" src="./index.tsx"></script>
     </body>
 </html>

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

@@ -1,7 +1,9 @@
 // API client for FakeStoreAPI with SSR support
 // All responses are plain JSON objects to ensure serialization compatibility
 
-const API_BASE_URL = 'https://fakestoreapi.com';
+// Configuration from environment variables (defaults for development)
+const API_BASE_URL = import.meta.env.REROUTE_API_BASE_URL || 'https://fakestoreapi.com';
+const CACHE_TTL = Number(import.meta.env.REROUTE_API_CACHE_TTL) || 60000; // Default: 1 minute
 
 // In-memory cache for API responses
 interface CacheEntry<T> {
@@ -10,7 +12,6 @@ interface CacheEntry<T> {
 }
 
 const cache = new Map<string, CacheEntry<unknown>>();
-const CACHE_TTL = 60000; // 1 minute cache
 
 interface Product {
 	id: number;

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

@@ -34,11 +34,10 @@ function HomePage() {
 				{/* Hero Section */}
 				<section className='text-center py-12 mb-12 animate-slide-up'>
 					<h1 className='text-5xl md:text-6xl font-bold text-gray-900 mb-4 leading-tight'>
-						Welcome to Reroute Store
+						Welcome to {import.meta.env.REROUTE_SITE_NAME || 'Reroute Store'}
 					</h1>
 					<p className='text-xl text-gray-600 mb-8 max-w-2xl mx-auto'>
-						A modern e-commerce demo built with Reroute, showcasing file-based
-						routing, SSR, and seamless API integration with FakeStoreAPI
+						{import.meta.env.REROUTE_SITE_DESCRIPTION || 'A modern e-commerce demo built with Reroute, showcasing file-based routing, SSR, and seamless API integration with FakeStoreAPI'}
 					</p>
 					<div className='flex gap-4 justify-center flex-wrap'>
 						<Link to='/products' className='btn-primary btn-lg'>

package/_/store/tsconfig.json

@@ -1,26 +1,25 @@
 {
-	"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"]
+  "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"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
 }

package/_/streaming/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "{{PROJECT_NAME}}",
+	"version": "0.0.0",
+	"description": "A Reroute application",
+	"private": true,
+	"scripts": {
+		"types": "tsc --noEmit",
+		"gen": "reroute gen",
+		"start": "reroute start",
+		"dev": "reroute dev",
+		"build": "reroute build",
+		"analyze": "reroute analyze --prod --open"
+	},
+	"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/_/streaming/reroute.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'reroute-js/core';
+
+export default defineConfig({
+	options: {
+		app: './src/client/App',
+		maxAge: 0,
+		compression: false,
+	},
+	streaming: {
+		enabled: true,
+		defaultSkeleton: './src/client/components/DefaultRouteSkeleton',
+		defaultLayoutSkeleton: './src/client/components/DefaultLayoutSkeleton',
+	},
+});

package/_/streaming/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.10.1
+ * reroute-js v0.11.0
  *
  * @license MIT
  * @copyright 2025 stewones <hi@stewan.io>