@ijo-elaja/rev.js 0.4.0 → 0.5.1

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.5.1",
 	"publishConfig": {
 		"access": "public"
 	},

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