@ijo-elaja/rev.js 0.5.1 → 0.6.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Elia Perry
+Copyright (c) 2026 Elia Perry
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,147 +1,197 @@
 # Rev.js
 
-A highly opionionated, lightweight, frontend<sup>1</sup> only solution.
+A lightweight, **pure SSR** JSX/TSX framework using **Preact** and **TypeScript**.
 
 ## Table of Contents
 
-- [Table of Contents](#table-of-contents)
 - [Features](#features)
-  - [Current](#current)
-  - [Planned/Unplanned](#plannedunplanned)
-  - [Won't Do](#wont-do)
-- [Usage](#usage)
-- [Contributing](#contributing)
+- [Quick Start](#quick-start)
+- [File-Based Routing](#file-based-routing)
+- [Async Components](#async-components)
+- [Authentication](#authentication)
+- [API Integration](#api-integration)
 - [License](#license)
 
-<sup>1</sup> As of v0.3.0 you *can* write "backend" code by extending the `Elysia` object through the config.
-
 ## Features
 
-### Current
-
-- Filesystem Based Router
-- Slugs (dynamic data based routing)
-- Components
-- Inline JavaScript
-- Client-Side Conditional Rendering
-
-### Planned/Unplanned
-
-- Template
-- Static Site Building
-- Component Props (think react but less bad)
-- Documentation(?)
-
-### Won't Do
-
-I will not *specifically* support non-Bun JavaScript runtimes. Bun has support for Windows, Mac, and Linux, and is faster than node/npm, yarn, or pnpm.
+- **JSX/TSX Components** - Write components in TSX, render on server
+- **File-Based Routing** - Pages organized by folder structure (`pages/about/_page.tsx` → `/about`)
+- **Dynamic Routes** - Support for `[slug]`, `[id]`, and `[...catch-all]` patterns
+- **Nested Layouts** - Automatic layout composition at each directory level
+- **Async Components** - Fetch data server-side, render with complete HTML
+- **httpOnly Cookie Auth** - Built-in support for secure token-based authentication
+- **Zero Client JS** - All rendering happens on the server
+- **Bun Runtime** - TypeScript-native, no build step needed
+- **Global Types** - Type-safe props with `PageContext` and `PageProps`
 
-If you don't want Bun, you don't want this package.
+## Quick Start
 
-## Usage
-
-First, you can install the package like so:
+Install:
 
 ```bash
 bun install @ijo-elaja/rev.js
 ```
 
-Next, make sure you have this directory structure:
-
-```directory
-| index.ts
-| pages/
-|   _page.html
-|   _layout.html
-|   404.html
-| public/
-|   (public files such
-|        as a favicon.ico)
-```
+Create your project structure:
 
-You can also have a components directory at the root level:
-
-```directory
-| index.ts
-| pages/
-|   _page.html
-|   _layout.html
-|   404.html
-| components/
-|   SomeComponent.html
-| public/
-|   (public files such
-|        as a favicon.ico)
+```tree
+index.ts
+pages/
+  _layout.tsx
+  _page.tsx
+public/
+  (whatever public
+    files you might need)
 ```
 
-In your `index.ts` file, all you need is:
+In `index.ts`:
 
-```ts
+```typescript
 import Rev from "@ijo-elaja/rev.js";
 
 new Rev({
- port: 8080,
-
- // debug info isn't too important most of the time
- // but it can be useful if you did something stupid
- showDebug: false,
-
- // im working to fix this, but no promises
- // for now, it needs to be an "absolute" path
- rootDir: __dirname,
-
- // this is 100% optional, but can be useful
- // when you want more functionality than just
- // what rev.js provides by default
- // note that typescript will complain without
- // the `as any` if you actually make changes
- elysia: (app) => app as any
+  port: 3000,
+  rootDir: __dirname,
+  showDebug: true,
+  elysia: (app) => app, // Optional: add custom routes
 });
 ```
 
-In your `pages/_layout.html` file, is your (you guessed it) main layout. Any `pages/**/_page.html` will go in the `Outlet` built-in component.
+## File-Based Routing
+
+Pages are TypeScript components in the `pages/` directory:
+
+- `pages/_page.tsx` → `/`
+- `pages/about/_page.tsx` → `/about`
+- `pages/blog/[slug]/_page.tsx` → `/blog/getting-started`, `/blog/my-post`, etc.
+- `pages/docs/[...slug]/_page.tsx` → `/docs/foo/bar/baz` (catch-all)
+- `pages/404.tsx` → Custom 404 page
+
+## Async Components
+
+Fetch data server-side and render complete pages:
 
-Here's the absolute *bare minimum* `pages/_layout.html`:
+```typescript
+// you'll probably want to set under
+// "compilationOptions" in your tsconfig.json:
+// "jsx": "react-jsx",
+// "jsxImportSource": "preact",
+// instead of doing these
 
-```ts
-{{ %Outlet% }}
+/** @jsx h */
+/** @jsxFrag Fragment */
+
+import { h } from "preact";
+
+interface Post {
+  id: number;
+  title: string;
+  body: string;
+}
+
+export default async function BlogPost({ context }: PageProps<{ slug: string }>) {
+  // This runs on the server only
+  const response = await fetch(`https://api.example.com/posts/${context.params.slug}`);
+  const post = await response.json();
+
+  // Rendered as HTML before sending to browser
+  return (
+    <>
+      <h1>{post.title}</h1>
+      <p>{post.body}</p>
+    </>
+  );
+}
 ```
 
-Of course, this might not look very nice, but it will work.
-
-However, if you do want the basics, here's a more "complete" example:
-
-```html
-<!doctype html>
-<html lang="en">
- <head>
-  <!-- this is a component (very useful for sharing heads between pages) -->
-  {{ %Head% }}
- </head>
- <body>
-  <header>
-   <h1>Header</h1>
-  </header>
-  <!-- this is a built-in component -->
-  <main>{{ %Outlet% }}</main>
-  <footer>Footer</footer>
- </body>
-</html>
+Benefits:
+
+- Data is fetched server-side = faster initial load
+- Complete HTML sent to browser
+- No loading states or spinners needed
+- Better for SEO
+- Zero client JavaScript
+
+## Authentication
+
+Rev.js supports run-of-the-mill httpOnly cookie-based authentication:
+
+```typescript
+export default async function Dashboard({ context }: PageProps) {
+  let user = null;
+
+  try {
+    // Get cookies from the browser's request
+    const cookies = context?.request?.headers.get("cookie") || "";
+
+    // Make authenticated request to your API
+    const response = await fetch("http://localhost:3000/api/user", {
+      headers: { cookie: cookies },
+    });
+
+    if (response.ok) {
+      user = await response.json();
+    }
+  } catch (err) {
+    // Handle error
+  }
+
+  return (
+    <>
+      {user ? (
+        <h1>Welcome {user.name}!</h1>
+      ) : (
+        <p>Not authenticated</p>
+      )}
+    </>
+  );
+}
 ```
 
-The `Head` component is **not** built-in. But its not very hard to implement:
+How it works:
+
+1. User logs in → server sets httpOnly cookies
+2. Browser sends cookies on every request automatically
+3. Component reads cookies from `context.request.headers`
+4. Component fetches authenticated data
+5. Page renders with data already loaded
+
+## API Integration
 
-In `components/Head.html`:
+Add custom API routes using the `elysia` option:
 
-```html
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Title</title>
+```typescript
+new Rev({
+  port: 3000,
+  rootDir: __dirname,
+  elysia: (app) => {
+    return app
+      .post("/api/login", ({ body }) => {
+        // Validate credentials, set cookies
+        return { success: true };
+      })
+      .get("/api/user", ({ request }) => {
+        // Validate cookies, return user data
+        return { id: 1, name: "John" };
+      });
+  },
+});
 ```
 
+## Why Bun?
+
+Rev.js uses Bun for its:
+
+- TypeScript support without build step
+- Fast runtime (probably 3x faster than Node.js)
+- Native file I/O and HTTP
+- Cross-platform support (Windows, Mac, Linux)
+
+If you prefer Node.js, this framework really isn't for you.
+
 ## Contributing
 
-This repository is not currently accepting contributions.
+Rev.js is early stage and may change significantly. Contributions are not currently accepted.
 
 ## License
 

package/global.d.ts

@@ -0,0 +1,30 @@
+// Global type definitions for Rev.js applications
+import type { VNode } from "preact";
+
+declare global {
+	namespace JSX {
+		interface Element extends VNode {}
+		interface ElementClass {
+			render(): any;
+		}
+		interface ElementAttributesProperty {
+			props: any;
+		}
+		interface IntrinsicElements {
+			[elem: string]: any;
+		}
+	}
+
+	type PageContext = {
+		params: Record<string, string>;
+		query: Record<string, string>;
+		request?: Request;
+	};
+
+	type PageProps<T extends Record<string, string> = {}> = {
+		context?: PageContext & { params: T };
+		children?: VNode;
+	};
+}
+
+export {};

package/index.d.ts

@@ -1,10 +1,21 @@
 import Elysia from "elysia";
+import { VNode, Fragment } from "preact";
 
 declare const log: (...args: any[]) => void;
 declare const debug: (...args: any[]) => void;
 declare const warn: (...args: any[]) => void;
 declare const error: (...args: any[]) => void;
 
+/**
+ * Context object passed to page and layout components
+ */
+declare interface PageContext {
+	/** Dynamic route parameters (e.g., [slug] becomes params.slug) */
+	params: Record<string, string>;
+	/** Query string parameters */
+	query: Record<string, string>;
+}
+
 declare interface RevConfig {
 	port?: number;
 	showDebug?: boolean;
@@ -12,6 +23,25 @@ declare interface RevConfig {
 	elysia?: (app: Elysia) => Elysia;
 }
 
+/**
+ * Rev - A JSX/TSX-based SSR framework
+ * 
+ * File structure:
+ * - pages/_layout.tsx - Root layout (receives children and context)
+ * - pages/_page.tsx - Home page
+ * - pages/about/_page.tsx - About page with its own layout (optional)
+ * - pages/blog/[slug]/_page.tsx - Dynamic route
+ * - components/Header.tsx - Reusable component
+ * 
+ * Component signature:
+ * export default function Page({ context, children }: { context?: PageContext; children?: VNode }) {
+ *   return <div>{children}</div>;
+ * }
+ */
 declare class Rev {
 	constructor(config: RevConfig);
 }
+
+export { Rev as default, Fragment };
+export type { RevConfig, PageContext };
+

package/index.ts

@@ -37,380 +37,262 @@ export const error = (...args: any[]) => _errorf("revjs.log", ...args);
 
 //#endregion
 
-//#region custom ssr
+/** @jsx h */
+/** @jsxFrag Fragment */
 
+//#region JSX SSR
+
+import { h, Fragment, type VNode } from "preact";
+import { render } from "preact-render-to-string";
 import prettier from "prettier";
 import path from "node:path";
 
 const FILENAMES = {
-	LAYOUT: "/_layout.html",
-	PAGE: "/_page.html",
+	LAYOUT: "/_layout",
+	PAGE: "/_page",
 	SLUG: "/.slug",
-	NOT_FOUND: "/404.html",
+	NOT_FOUND: "/404",
 };
 
 let PAGES_DIR = "/pages";
 let COMPONENTS_DIR = "/components/";
 
-const localFetch = async (path: string): Promise<string> =>
-	await Bun.file(path).text();
-
-const localExists = async (path: string): Promise<boolean> =>
-	await Bun.file(path).exists();
+const localFetch = async (filePath: string): Promise<string> =>
+	await Bun.file(filePath).text();
+
+const localExists = async (filePath: string): Promise<boolean> =>
+	await Bun.file(filePath).exists();
+
+/**
+ * Dynamically imports a TSX/TS component file
+ * Supports both default exports and named exports
+ */
+const loadComponent = async (
+	componentPath: string,
+): Promise<(props?: any) => any> => {
+	try {
+		const module = await import(componentPath);
+		// Support both default export and named export
+		const component = module.default || Object.values(module)[0];
+
+		if (typeof component !== "function") {
+			throw new Error(`${componentPath} does not export a valid component`);
+		}
 
-const urlToBasePath = (url: URL): string => {
-	if (url.pathname == "/") return PAGES_DIR;
-	switch (url.searchParams.get("type")) {
-		default:
-			return PAGES_DIR + url.pathname;
+		return component;
+	} catch (e) {
+		error(`Failed to load component at ${componentPath}: ${e}`);
+		throw e;
 	}
 };
 
-const getComponent = async (name: string): Promise<string> => {
-	const component = await localFetch(COMPONENTS_DIR + name + ".html");
-	return component;
-};
-
-const removeFirst = function (str: string): string {
-	return str.slice(1);
-};
-
-const removeLast = function (str: string): string {
-	return str.slice(0, -1);
-};
-
-const removeFirstN = function (str: string, n: number): string {
-	return str.slice(n);
+const urlToBasePath = (url: URL): string => {
+	if (url.pathname == "/") return PAGES_DIR;
+	return PAGES_DIR + url.pathname;
 };
 
-const removeLastN = function (str: string, n: number): string {
-	return str.slice(0, -n);
-};
+/**
+ * Creates a context object for passing data to layout/page components
+ */
+interface PageContext {
+	params: Record<string, string>;
+	query: Record<string, string>;
+	request?: Request;
+}
 
-const removeFirstNIf = function (
-	str: string,
-	n: number,
-	predicate: () => boolean,
-): string {
-	if (predicate()) return str.slice(n);
-	else return str.toString();
+/**
+ * Lists directory entries (cross-platform)
+ */
+const listDirEntries = async (dirPath: string): Promise<string[]> => {
+	try {
+		// Use fs.promises for directory reading
+		const { readdir } = await import("node:fs/promises");
+		const entries = await readdir(dirPath);
+		return entries;
+	} catch {
+		return [];
+	}
 };
 
-const removeLastNIf = function (
-	str: string,
-	n: number,
-	predicate: () => boolean,
-): string {
-	if (predicate()) return str.slice(0, -n);
-	return str.toString();
+/**
+ * Finds [param] and [...catch] style route segments
+ */
+const findRouteSegments = (entries: string[]): { [key: string]: string } => {
+	const segments: { [key: string]: string } = {};
+	for (const entry of entries) {
+		if (entry.startsWith("[") && entry.endsWith("]")) {
+			const param = entry.slice(1, -1);
+			segments[entry] = param;
+		}
+	}
+	return segments;
 };
 
-enum EvalstMode {
-	LAYOUT,
-	PAGE,
-	SCRIPT,
-	CLIENT_CONDITIONAL,
-}
-
-interface ConditionalBranch {
-	condition: string | null;
-	content: string;
-}
-
-interface EvalstElement {
-	match: string;
-	mode: EvalstMode;
-	content: string;
-	branches?: ConditionalBranch[];
-}
-
-interface EvalsElement {
-	selector: string;
-	evaluation: string;
-	content: string;
-	isJs: boolean;
-}
+/**
+ * Resolves a URL path to a page component and collects layouts
+ */
+const resolvePath = async (
+	urlSegments: string[],
+	currentPath: string = PAGES_DIR,
+	params: Record<string, string> = {},
+	layouts: Array<{ path: string; component?: any }> = [],
+): Promise<{
+	pagePath: string | null;
+	params: Record<string, string>;
+	layouts: Array<{ path: string }>;
+} | null> => {
+	// Check for layout at current level
+	const layoutPath = currentPath + FILENAMES.LAYOUT + ".tsx";
+	if (await localExists(layoutPath)) {
+		layouts.push({ path: layoutPath });
+	}
 
-const parseConditionalBlock = (
-	content: string,
-	startPos: number,
-): { branches: ConditionalBranch[]; endPos: number; match: string } => {
-	const ifMatch = content
-		.slice(startPos)
-		.match(/^\{\{#\s*if\s+(.+?)\s*#\}\}/);
-	if (!ifMatch) throw new Error("Expected {{# if condition #}}");
-
-	const branches: ConditionalBranch[] = [];
-	const fullMatch = [ifMatch[0]];
-	let condition: string | null = ifMatch[1].replaceAll("~", "__EVAL_STATE__");
-	let currentPos = startPos + ifMatch[0].length;
-	let branchContent = "";
-
-	while (currentPos < content.length) {
-		const remaining = content.slice(currentPos);
-
-		const elseIfMatch = remaining.match(
-			/^\{\{#\s*else\s+if\s+(.+?)\s*#\}\}/,
-		);
-		if (elseIfMatch) {
-			branches.push({ condition, content: branchContent });
-			fullMatch.push(elseIfMatch[0]);
-			condition = elseIfMatch[1].replaceAll("~", "__EVAL_STATE__");
-			currentPos += elseIfMatch[0].length;
-			branchContent = "";
-			continue;
+	// Base case: no more segments
+	if (urlSegments.length === 0) {
+		const pagePath = currentPath + FILENAMES.PAGE + ".tsx";
+		if (await localExists(pagePath)) {
+			return { pagePath, params, layouts };
 		}
+		return null;
+	}
 
-		const elseMatch = remaining.match(/^\{\{#\s*else\s*#\}\}/);
-		if (elseMatch) {
-			branches.push({ condition, content: branchContent });
-			fullMatch.push(elseMatch[0]);
-			condition = null;
-			currentPos += elseMatch[0].length;
-			branchContent = "";
-			continue;
-		}
+	const [nextSegment, ...restSegments] = urlSegments;
 
-		const endifMatch = remaining.match(/^\{\{#\s*endif\s*#\}\}/);
-		if (endifMatch) {
-			branches.push({ condition, content: branchContent });
-			fullMatch.push(endifMatch[0]);
-			currentPos += endifMatch[0].length;
-			return {
-				branches,
-				endPos: currentPos,
-				match: fullMatch.join(""),
-			};
-		}
+	// Try static match first
+	const staticPath = path.join(currentPath, nextSegment);
+	const entries = await listDirEntries(staticPath);
 
-		branchContent += remaining[0];
-		currentPos++;
+	if (entries.length > 0) {
+		const result = await resolvePath(restSegments, staticPath, params, layouts);
+		if (result) return result;
 	}
 
-	throw new Error("Unclosed {{# if #}} block");
-};
-
-const generateConditionalHTML = (
-	branches: ConditionalBranch[],
-	containerId: string,
-	state: Record<string, any>,
-): string => {
-	let html = `<div id="${containerId}">`;
-
-	branches.forEach((branch, idx) => {
-		html += `<div data-conditional-branch="${idx}" data-condition="${branch.condition || "else"}" style="display: none;">${branch.content}</div>`;
-	});
-
-	html += `</div>`;
-
-	let conditionScript = "";
-	for (let i = 0; i < branches.length; i++) {
-		const branch = branches[i];
-		if (i === 0) {
-			conditionScript += `if (${branch.condition}) { document.querySelector('[data-conditional-branch="${i}"]').style.display = "block"; }`;
-		} else if (branch.condition !== null) {
-			conditionScript += ` else if (${branch.condition}) { document.querySelector('[data-conditional-branch="${i}"]').style.display = "block"; }`;
-		} else {
-			conditionScript += ` else { document.querySelector('[data-conditional-branch="${i}"]').style.display = "block"; }`;
+	// Try dynamic matches
+	const parentEntries = await listDirEntries(currentPath);
+	const dynamicSegments = findRouteSegments(parentEntries);
+
+	for (const [dirName, paramName] of Object.entries(dynamicSegments)) {
+		const dynamicPath = path.join(currentPath, dirName);
+		const newParams = { ...params, [paramName]: nextSegment };
+
+		// Check for catch-all [...]
+		if (paramName.startsWith("...")) {
+			const catchAllParam = paramName.slice(3);
+			newParams[catchAllParam] = [nextSegment, ...restSegments].join("/");
+			const pagePath = dynamicPath + FILENAMES.PAGE + ".tsx";
+			if (await localExists(pagePath)) {
+				// Check for layout at this dynamic level
+				const dynamicLayout = dynamicPath + FILENAMES.LAYOUT + ".tsx";
+				if (await localExists(dynamicLayout)) {
+					layouts.push({ path: dynamicLayout });
+				}
+				return { pagePath, params: newParams, layouts };
+			}
+			return null;
 		}
-	}
 
-	html += `<script>
-(function() {
-	let __EVAL_STATE__ = ${JSON.stringify(state)};
-	${conditionScript}
-})();
-</script>`;
+		// Regular dynamic segment
+		const result = await resolvePath(restSegments, dynamicPath, newParams, layouts);
+		if (result) return result;
+	}
 
-	return html;
+	return null;
 };
 
-const evaluate = async (
-	str: string,
-	initialState?: Record<string, any>,
-	outletContent?: string,
+/**
+ * Load and render layout with page content
+ */
+const loadLayout = async (
+	urlPath: string,
+	context: PageContext,
+	isDebug: boolean,
 ): Promise<string> => {
-	let processedPageContent = str;
-	const evalst: EvalstElement[] = [];
-	let __EVAL_STATE__ = initialState || {};
-
-	const regex = /{{ ?(.*?)? ?}}/gims;
-	let m;
-
-	while ((m = regex.exec(processedPageContent)) !== null) {
-		if (m.index === regex.lastIndex) {
-			regex.lastIndex++;
-		}
-
-		const match = m[1];
-		let toEval = match.trim();
-		if (toEval.startsWith("%") && toEval.endsWith("%")) {
-			toEval = removeLast(removeFirst(toEval.trim())).trim();
-			if (toEval == "Outlet" && outletContent) {
-				evalst.push({
-					match: m[0],
-					mode: EvalstMode.LAYOUT,
-					content: outletContent,
-				});
-			} else if (toEval == "Outlet" && !outletContent) {
-				// str is an error!
-				// we place some default 404 content here
-				error(`Missing outlet content for ${toEval}`);
-				evalst.push({
-					match: m[0],
-					mode: EvalstMode.LAYOUT,
-					content: "404 Not Found (Missing Outlet Content)",
-				});
+	try {
+		// Parse URL into segments
+		const urlSegments = urlPath
+			.split("/")
+			.filter(Boolean);
+
+		// Resolve the route
+		const routeInfo = await resolvePath(urlSegments, PAGES_DIR, {}, []);
+
+		let pageContent: any = h(Fragment, null);
+		let layouts: Array<{ path: string }> = [];
+
+		if (routeInfo) {
+			// Update context with resolved params
+			context.params = routeInfo.params;
+			layouts = routeInfo.layouts;
+
+			// Load the page component
+			const PageComponent = await loadComponent(routeInfo.pagePath!);
+			// Support both sync and async component functions
+			const componentResult = PageComponent({ context });
+			pageContent = componentResult instanceof Promise ? await componentResult : componentResult;
+		} else {
+			// Log 404 in debug mode
+			if (isDebug) debug(`404: Route not resolved for ${urlPath}`);
+
+			// Try 404 page
+			const notFoundPath = PAGES_DIR + FILENAMES.NOT_FOUND + ".tsx";
+			if (await localExists(notFoundPath)) {
+				const NotFoundComponent = await loadComponent(notFoundPath);
+				// Support both sync and async component functions
+				const componentResult = NotFoundComponent({ context });
+				pageContent = componentResult instanceof Promise ? await componentResult : componentResult;
 			} else {
-				try {
-					evalst.push({
-						match: m[0],
-						mode: EvalstMode.LAYOUT,
-						content: await evaluate(await getComponent(toEval)),
-					});
-				} catch (e) {
-					error(`Failed to load component ${toEval}`);
-					evalst.push({
-						match: m[0],
-						mode: EvalstMode.LAYOUT,
-						content:
-							'<i style="color: red !important">404 Not Found (Missing Component)</i>',
-					});
-				}
+				pageContent = h("html", null,
+					h("body", null,
+						h("h1", null, "404 - Not Found"),
+						h("p", null, "The requested page could not be found.")
+					)
+				);
 			}
-		} else if (toEval.startsWith("<") && toEval.endsWith(">")) {
-			toEval = removeLast(removeFirst(toEval.trim()))
-				.trim()
-				.replaceAll("~", "__EVAL_STATE__");
-			evalst.push({
-				match: m[0],
-				mode: EvalstMode.PAGE,
-				content: toEval,
-			});
-		} else if (toEval.startsWith("/") && toEval.endsWith("/")) {
-			// script mode!
-			toEval = removeLast(removeFirst(toEval)).replaceAll(
-				"~",
-				"__EVAL_STATE__",
-			);
 
-			const code = `let __EVAL_STATE__=${JSON.stringify(
-				__EVAL_STATE__,
-			)};${toEval}`;
-			const data = await Bun.$`bun -e ${code}`.json();
-			// copy result into __EVAL_STATE__
-			Object.assign(__EVAL_STATE__, data);
-			evalst.push({
-				match: m[0],
-				mode: EvalstMode.SCRIPT,
-				content: "",
-			});
-		} else {
-			evalst.push({
-				match: m[0],
-				mode: EvalstMode.PAGE,
-				content: toEval,
-			});
+			// Add root layout if it exists
+			const rootLayout = PAGES_DIR + FILENAMES.LAYOUT + ".tsx";
+			if (await localExists(rootLayout)) {
+				layouts.push({ path: rootLayout });
+			}
 		}
-	}
-
-	const evals: EvalsElement[] = [];
 
-	evalst.forEach(async (element) => {
-		if (element.mode == EvalstMode.PAGE) {
-			evals.push({
-				selector: element.match,
-				evaluation: eval(element.content),
-				content: element.content,
-				isJs: true,
-			});
-		} else {
-			evals.push({
-				selector: element.match,
-				evaluation: element.content,
-				content: element.content,
-				isJs: false,
-			});
+		// Render with all layouts applied (from root outward)
+		let rendered = pageContent;
+		for (let i = layouts.length - 1; i >= 0; i--) {
+			const LayoutComponent = await loadComponent(layouts[i].path);
+			// Support both sync and async layout functions
+			const layoutResult = LayoutComponent({ context, children: rendered });
+			rendered = layoutResult instanceof Promise ? await layoutResult : layoutResult;
 		}
-	});
-
-	evals.forEach((element) => {
-		processedPageContent = processedPageContent.replace(
-			element.selector,
-			element.evaluation,
-		);
-	});
-
-	let conditionalIndex = 0;
-	let pos = 0;
-	while (pos < processedPageContent.length) {
-		const ifMatch = processedPageContent.slice(pos).match(/\{\{#\s*if\s+/);
-		if (!ifMatch || ifMatch.index === undefined) break;
-
-		const ifPos = pos + ifMatch.index;
-		const parsed = parseConditionalBlock(processedPageContent, ifPos);
-
-		const conditionalHTML = generateConditionalHTML(
-			parsed.branches,
-			`cond-${conditionalIndex}`,
-			__EVAL_STATE__,
-		);
-
-		processedPageContent = processedPageContent.replace(
-			parsed.match,
-			conditionalHTML,
-		);
-
-		pos = ifPos + conditionalHTML.length;
-		conditionalIndex++;
-	}
 
-	return processedPageContent;
-};
+		let html = render(rendered);
 
-const loadLayout = async (basePath: string): Promise<string> => {
-	const layout = (await localExists(basePath + FILENAMES.LAYOUT))
-		? await localFetch(basePath + FILENAMES.LAYOUT)
-		: await localFetch(PAGES_DIR + FILENAMES.LAYOUT);
-
-	let pageContent: string;
-	let initialState: Record<string, any> = {};
-
-	if (await localExists(basePath + FILENAMES.PAGE)) {
-		pageContent = await localFetch(basePath + FILENAMES.PAGE);
-	} else if (await localExists(path.join(basePath, "../") + FILENAMES.SLUG)) {
-		const slug = await localFetch(
-			path.join(basePath, "../", FILENAMES.SLUG),
-		);
-		let slugName = removeLast(removeFirst(slug));
-		initialState[slugName] = path.basename(basePath);
-		pageContent = await localFetch(
-			path.join(basePath, "../", slug, FILENAMES.PAGE),
-		);
-	} else {
-		pageContent = await localFetch(PAGES_DIR + FILENAMES.NOT_FOUND);
-	}
+		// Add DOCTYPE
+		html = "<!DOCTYPE html>\n" + html;
 
-	const processedPageContent = await evaluate(pageContent, initialState);
-	const processedLayout = await evaluate(
-		layout,
-		initialState,
-		processedPageContent,
-	);
+		// Prettify for development only
+		if (isDebug) {
+			html = await prettier.format(html, { parser: "html" });
+		}
 
-	return processedLayout;
+		return html;
+	} catch (err) {
+		error(`Error loading layout: ${err}`);
+		throw err;
+	}
 };
 
-const loadPage = async (request: Request): Promise<string> => {
+const loadPage = async (request: Request, isDebug: boolean): Promise<string> => {
 	const url = new URL(request.url);
 	log(`Loading ${url.pathname}`);
 
-	const basePath = urlToBasePath(url);
-	let page = await loadLayout(basePath);
-
-	// prettify for devtools
-	page = await prettier.format(page, { parser: "html" });
+	const context: PageContext = {
+		params: {},
+		query: Object.fromEntries(url.searchParams),
+		request,
+	};
 
+	const page = await loadLayout(url.pathname, context, isDebug);
 	return page;
 };
 
@@ -448,7 +330,7 @@ class Rev {
 			.get("*", async ({ request }) => {
 				try {
 					// custom ssr anyone?
-					return new Response(await loadPage(request), {
+					return new Response(await loadPage(request, config.showDebug || false), {
 						status: 200,
 						headers: {
 							"Content-Type": "text/html",
@@ -458,8 +340,8 @@ class Rev {
 					error(
 						`Error on GET ${new URL(request.url).pathname}: ${err}`,
 					);
-					if (config.showDebug) debug();
-					return "Internal Server Error";
+					if (config.showDebug) debug(`${err}`);
+					return new Response("Internal Server Error", { status: 500 });
 				}
 			})
 			.get("/public/*", async ({ request }) =>
@@ -493,6 +375,7 @@ class Rev {
 }
 
 export default Rev;
-export type { RevConfig };
+export type { RevConfig, PageContext };
+export { Fragment, h } from "preact";
 
 //#endregion

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@ijo-elaja/rev.js",
 	"module": "index.ts",
-	"version": "0.5.1",
+	"version": "0.6.1",
 	"publishConfig": {
 		"access": "public"
 	},
 	"type": "module",
+	"license": "MIT",
 	"scripts": {
 		"live": "bun run test/live/live.test.ts",
 		"livedev": "bun run --watch test/live/live.test.ts"
@@ -19,6 +20,8 @@
 	"dependencies": {
 		"@ijo-elaja/log4js": "^1.2.0",
 		"elysia": "^1.2.10",
-		"prettier": "^3.4.2"
+		"preact": "^10.28.2",
+		"preact-render-to-string": "^6.6.5",
+		"prettier": "^3.8.1"
 	}
 }

package/revjs.log

@@ -0,0 +1,135 @@
+[main/INFO] Thu Jan 22 2026 22:46:38 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 22:46:38 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 22:46:40 Loading / 
+[main/ERROR] Thu Jan 22 2026 22:46:40 Error on GET /: ShellError: Failed with exit code 1 
+[main/DEBUG] Thu Jan 22 2026 22:46:40 
+[main/INFO] Thu Jan 22 2026 22:56:22 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 22:56:22 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 22:56:23 Loading / 
+[main/INFO] Thu Jan 22 2026 22:56:26 Loading /blog/getting-started 
+[main/ERROR] Thu Jan 22 2026 22:56:26 Error loading layout: ShellError: Failed with exit code 1 
+[main/ERROR] Thu Jan 22 2026 22:56:26 Error on GET /blog/getting-started: ShellError: Failed with exit code 1 
+[main/DEBUG] Thu Jan 22 2026 22:56:26 
+[main/INFO] Thu Jan 22 2026 22:56:31 Loading /about 
+[main/INFO] Thu Jan 22 2026 22:56:34 Loading / 
+[main/INFO] Thu Jan 22 2026 22:58:09 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 22:58:09 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 22:58:11 Loading / 
+[main/INFO] Thu Jan 22 2026 22:58:11 Loading /about 
+[main/INFO] Thu Jan 22 2026 22:58:12 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 22:58:12 Loading / 
+[main/INFO] Thu Jan 22 2026 22:58:13 Loading /about 
+[main/INFO] Thu Jan 22 2026 22:58:13 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 22:58:48 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 22:58:48 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 22:58:49 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 22:58:51 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 22:58:51 Loading /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 22:58:52 Loading /blog/components 
+[main/INFO] Thu Jan 22 2026 22:58:52 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 23:00:13 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:00:13 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:01:00 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:01:00 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:01:01 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 23:01:02 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 23:01:08 Loading / 
+[main/INFO] Thu Jan 22 2026 23:07:04 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:07:04 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:07:05 Loading / 
+[main/INFO] Thu Jan 22 2026 23:07:06 Loading / 
+[main/INFO] Thu Jan 22 2026 23:07:07 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 23:07:07 Loading /about 
+[main/INFO] Thu Jan 22 2026 23:09:33 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:09:33 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:09:34 Loading /about 
+[main/INFO] Thu Jan 22 2026 23:09:37 Loading / 
+[main/INFO] Thu Jan 22 2026 23:09:38 Loading /blog/getting-started 
+[main/INFO] Thu Jan 22 2026 23:09:39 Loading /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:11:11 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:11:11 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:11:11 Loading /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:13:40 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:13:40 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:13:40 Loading /blog/file-based-routing 
+[main/DEBUG] Thu Jan 22 2026 23:13:40 404: Route not resolved for /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:14:11 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:14:11 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:14:12 Loading /blog/file-based-routing 
+[main/DEBUG] Thu Jan 22 2026 23:14:12   resolvePath: segments=[blog/file-based-routing] currentPath=/home/elia/dev/rev.js/test/live/pages 
+[main/DEBUG] Thu Jan 22 2026 23:14:12   ✗ No matching route found 
+[main/DEBUG] Thu Jan 22 2026 23:14:12 404: Route not resolved for /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:14:39 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:14:39 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:14:41 Loading /blog/file-based-routing 
+[main/DEBUG] Thu Jan 22 2026 23:14:41   resolvePath: segments=[blog/file-based-routing] currentPath=/home/elia/dev/rev.js/test/live/pages 
+[main/DEBUG] Thu Jan 22 2026 23:14:41   Checking static path: /home/elia/dev/rev.js/test/live/pages/blog - found 0 entries 
+[main/DEBUG] Thu Jan 22 2026 23:14:41   Parent entries at /home/elia/dev/rev.js/test/live/pages: _layout.tsx, _page.tsx, 404.tsx 
+[main/DEBUG] Thu Jan 22 2026 23:14:41   ✗ No matching route found 
+[main/DEBUG] Thu Jan 22 2026 23:14:41 404: Route not resolved for /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:14:57 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:14:57 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:14:59 Loading /blog/file-based-routing 
+[main/DEBUG] Thu Jan 22 2026 23:14:59   resolvePath: segments=[blog/file-based-routing] currentPath=/home/elia/dev/rev.js/test/live/pages 
+[main/DEBUG] Thu Jan 22 2026 23:14:59   Checking static path: /home/elia/dev/rev.js/test/live/pages/blog - found 0 entries 
+[main/DEBUG] Thu Jan 22 2026 23:14:59   Parent entries at /home/elia/dev/rev.js/test/live/pages:  
+[main/DEBUG] Thu Jan 22 2026 23:14:59   ✗ No matching route found 
+[main/DEBUG] Thu Jan 22 2026 23:14:59 404: Route not resolved for /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:15:10 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:15:10 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:15:11 Loading /blog/file-based-routing 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   resolvePath: segments=[blog/file-based-routing] currentPath=/home/elia/dev/rev.js/test/live/pages 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   Checking static path: /home/elia/dev/rev.js/test/live/pages/blog - found 1 entries 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   → Trying static path: /home/elia/dev/rev.js/test/live/pages/blog 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   resolvePath: segments=[file-based-routing] currentPath=/home/elia/dev/rev.js/test/live/pages/blog 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   Checking static path: /home/elia/dev/rev.js/test/live/pages/blog/file-based-routing - found 0 entries 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   Parent entries at /home/elia/dev/rev.js/test/live/pages/blog: [slug] 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   Found dynamic segments: [slug]→slug 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   → Trying dynamic path: /home/elia/dev/rev.js/test/live/pages/blog/[slug] (slug=file-based-routing) 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   resolvePath: segments=[] currentPath=/home/elia/dev/rev.js/test/live/pages/blog/[slug] 
+[main/DEBUG] Thu Jan 22 2026 23:15:11   ✓ Found page at /home/elia/dev/rev.js/test/live/pages/blog/[slug]/_page.tsx 
+[main/INFO] Thu Jan 22 2026 23:15:36 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:15:36 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:15:37 Loading /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:16:00 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:16:00 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:16:00 Loading /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:19:15 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:19:15 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:19:17 Loading /blog/file-based-routing 
+[main/INFO] Thu Jan 22 2026 23:19:19 Loading / 
+[main/INFO] Thu Jan 22 2026 23:23:35 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:23:35 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:23:36 Loading / 
+[main/INFO] Thu Jan 22 2026 23:23:58 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:23:58 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:23:58 Loading / 
+[main/INFO] Thu Jan 22 2026 23:24:02 Loading /about 
+[main/INFO] Thu Jan 22 2026 23:25:55 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:25:55 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:35:09 Starting web app at http://localhost:8080 
+[main/DEBUG] Thu Jan 22 2026 23:35:09 PAGES_DIR = /home/elia/dev/rev.js/test/live/pages
+COMPONENTS_DIR = /home/elia/dev/rev.js/test/live/components/ 
+[main/INFO] Thu Jan 22 2026 23:35:12 Loading / 
+[main/INFO] Thu Jan 22 2026 23:35:24 Loading /how-it-works 
+[main/INFO] Thu Jan 22 2026 23:36:03 Loading /dashboard 

package/tsconfig.json

@@ -1,27 +1,28 @@
 {
-  "compilerOptions": {
-    // Enable latest features
-    "lib": ["ESNext", "DOM"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "allowJs": true,
-
-    // Bundler mode
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    // Best practices
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-
-    // Some stricter flags (disabled by default)
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
-  }
-}
+	"compilerOptions": {
+		// Enable latest features
+		"lib": [
+			"ESNext",
+			"DOM"
+		],
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"allowJs": true,
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+		// Best practices
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false
+	},
+}