@ijo-elaja/rev.js 0.4.0 → 0.6.0

package/README.md

@@ -23,6 +23,7 @@ A highly opionionated, lightweight, frontend<sup>1</sup> only solution.
 - Slugs (dynamic data based routing)
 - Components
 - Inline JavaScript
+- Client-Side Conditional Rendering
 
 ### Planned/Unplanned
 
@@ -92,7 +93,9 @@ new Rev({
  // this is 100% optional, but can be useful
  // when you want more functionality than just
  // what rev.js provides by default
- elysia: (app) => app
+ // note that typescript will complain without
+ // the `as any` if you actually make changes
+ elysia: (app) => app as any
 });
 ```
 

package/index.ts

@@ -109,12 +109,19 @@ 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 {
@@ -124,6 +131,100 @@ interface EvalsElement {
 	isJs: boolean;
 }
 
+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;
+		}
+
+		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 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(""),
+			};
+		}
+
+		branchContent += remaining[0];
+		currentPos++;
+	}
+
+	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"; }`;
+		}
+	}
+
+	html += `<script>
+(function() {
+	let __EVAL_STATE__ = ${JSON.stringify(state)};
+	${conditionScript}
+})();
+</script>`;
+
+	return html;
+};
+
 const evaluate = async (
 	str: string,
 	initialState?: Record<string, any>,
@@ -131,11 +232,12 @@ const evaluate = async (
 ): Promise<string> => {
 	let processedPageContent = str;
 	const evalst: EvalstElement[] = [];
+	let __EVAL_STATE__ = initialState || {};
+
 	const regex = /{{ ?(.*?)? ?}}/gims;
 	let m;
-	let __EVAL_STATE__ = initialState || {};
 
-	while ((m = regex.exec(str)) !== null) {
+	while ((m = regex.exec(processedPageContent)) !== null) {
 		if (m.index === regex.lastIndex) {
 			regex.lastIndex++;
 		}
@@ -195,7 +297,7 @@ const evaluate = async (
 			const code = `let __EVAL_STATE__=${JSON.stringify(
 				__EVAL_STATE__,
 			)};${toEval}`;
-			const data = await Bun.$`bun -e '${code}'`.json();
+			const data = await Bun.$`bun -e ${code}`.json();
 			// copy result into __EVAL_STATE__
 			Object.assign(__EVAL_STATE__, data);
 			evalst.push({
@@ -239,6 +341,30 @@ const evaluate = async (
 		);
 	});
 
+	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;
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@ijo-elaja/rev.js",
 	"module": "index.ts",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"publishConfig": {
 		"access": "public"
 	},

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/test/live/components/Head.html

@@ -1,3 +0,0 @@
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Title</title>

package/test/live/live.test.ts

@@ -1,9 +0,0 @@
-// actually just a basic rev.js app
-
-import Rev from "../..";
-
-new Rev({
-	port: 8080,
-	showDebug: true,
-	rootDir: __dirname,
-});

package/test/live/pages/404.html

@@ -1 +0,0 @@
-<i style="color: red !important">404 Not Found</i>

package/test/live/pages/_layout.html

@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<!-- this is a component (very useful for sharing heads between pages) -->
-		{{ %Head% }}
-	</head>
-	<body>
-		<header>
-			<section>
-				<h1><a href="/">test site</a></h1>
-				<small class="muted">subheadings are a thing</small>
-			</section>
-		</header>
-		<!-- this is a built-in component -->
-		<main>{{ %Outlet% }}</main>
-	</body>
-</html>

package/test/live/pages/_page.html

@@ -1,3 +0,0 @@
-content would go here
-<br />
-<a href="/whatever/wow!">oh boy, i wonder where this goes?</a>

package/test/live/pages/whatever/.slug

@@ -1 +0,0 @@
-[slug]

package/test/live/pages/whatever/[slug]/_page.html

@@ -1,16 +0,0 @@
-rev.js supports slugs!
-
-<br />
-<br />
-
-<b>{{ < decodeURIComponent(~.slug) > }}</b>
-
-<br />
-<br />
-
-<a href="./{{ < ~.slug + ' ' + ~.slug > }}">click me (trust)</a>
-
-<br />
-<br />
-
-only one per folder in the fs for now