htmv 0.0.31 → 0.0.33

package/README.md

@@ -109,4 +109,8 @@ bunx htmv@latest gen view MyCoolView --path cool_stuff/my_custom_views_folder
 ```
 
 # Hot reloading
-Having to restart the server every time you make a change can be quite tedious. HTMV takes care of this thanks to Bun. Just develop with `bun dev` and it should work out of the box! Note that this does not include hot reloading in the browser. As of now, you have to refresh the page to see new changes. It doesn't update in real time.
+Having to restart the server every time you make a change can be quite tedious. HTMV takes care of this thanks to Bun. Just develop with `bun dev` and it should work out of the box! Note that this does not include hot reloading in the browser. As of now, you have to refresh the page to see new changes. It doesn't update in real time.
+
+# Still have questions?
+How about asking the DeepWiki instead?
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/Fabrisdev/htmv)

package/dist/next-parser/parser.d.ts

@@ -0,0 +1,3 @@
+import type { RootNode } from "./renderer";
+import type { Token } from "./tokenizer";
+export declare function parse(tokens: Token[]): RootNode;

package/dist/next-parser/parser.js

@@ -0,0 +1,103 @@
+export function parse(tokens) {
+    let i = 0;
+    const root = {
+        type: "root",
+        children: parseChildren(),
+    };
+    return root;
+    function parseChildren(untilTag) {
+        const nodes = [];
+        while (i < tokens.length) {
+            const token = tokens[i];
+            if (untilTag &&
+                token?.type === "close" &&
+                token.tag.toLocaleLowerCase() === untilTag) {
+                i++;
+                break;
+            }
+            if (token?.type === "text") {
+                nodes.push({
+                    type: "text",
+                    text: token.text,
+                });
+                i++;
+                continue;
+            }
+            if (token?.type === "interpolation") {
+                nodes.push({
+                    type: "interpolation",
+                    value: token.value,
+                });
+                i++;
+                continue;
+            }
+            if (token?.type === "open") {
+                const tag = token.tag.toLowerCase();
+                i++;
+                if (tag === "for") {
+                    const nextToken = tokens[i]; //should be arguments token
+                    i++;
+                    if (nextToken?.type !== "arguments")
+                        throw new Error("Missing arguments in for");
+                    const [itemName, _in, listName] = nextToken.value;
+                    if (itemName === undefined ||
+                        _in === undefined ||
+                        listName === undefined)
+                        throw new Error("Incorrect amount of arguments in for. Expected 3 arguments");
+                    if (_in !== "in")
+                        throw new Error("Expected reserved word in.");
+                    const children = parseChildren(tag);
+                    nodes.push({
+                        type: "for",
+                        children,
+                        itemName,
+                        listName,
+                    });
+                    continue;
+                }
+                if (tag === "isset") {
+                    const nextToken = tokens[i]; //should be arguments token
+                    i++;
+                    if (nextToken?.type !== "arguments")
+                        throw new Error("Missing arguments in isset");
+                    const [itemName] = nextToken.value;
+                    if (itemName === undefined)
+                        throw new Error("Expected item name");
+                    const children = parseChildren(tag);
+                    nodes.push({
+                        type: "isset",
+                        children,
+                        itemName,
+                    });
+                    continue;
+                }
+                const nextToken = tokens[i]; //may be arguments token
+                if (nextToken?.type === "arguments") {
+                    const args = nextToken.value.join(" ");
+                    nodes.push({
+                        type: "text",
+                        text: `<${tag} ${args}>`,
+                    });
+                    i++;
+                    continue;
+                }
+                nodes.push({
+                    type: "text",
+                    text: `<${tag}>`,
+                });
+                continue;
+            }
+            if (token?.type === "close") {
+                if (token.tag === "for" || token.tag === "isset")
+                    continue;
+                const tag = token.tag;
+                nodes.push({
+                    type: "text",
+                    text: `</${tag}>`,
+                });
+                i++;
+            }
+        }
+        return nodes;
+    }
+}

package/dist/next-parser/renderer.d.ts

@@ -0,0 +1,26 @@
+export type Node = RootNode | TextNode | InterpolationNode | IssetNode | ForNode;
+export interface RootNode {
+    type: "root";
+    children: Node[];
+}
+interface TextNode {
+    type: "text";
+    text: string;
+}
+interface InterpolationNode {
+    type: "interpolation";
+    value: string;
+}
+interface IssetNode {
+    type: "isset";
+    itemName: string;
+    children: Node[];
+}
+interface ForNode {
+    type: "for";
+    listName: string;
+    itemName: string;
+    children: Node[];
+}
+export declare function render(node: Node, context: Record<string, unknown>): string;
+export {};

package/dist/next-parser/renderer.js

@@ -0,0 +1,29 @@
+export function render(node, context) {
+    if (node.type === "text") {
+        return node.text;
+    }
+    if (node.type === "for") {
+        const list = context[node.listName];
+        if (Array.isArray(list)) {
+            const output = list.map((item) => {
+                return node.children
+                    .map((childrenNode) => render(childrenNode, { ...context, [node.itemName]: item }))
+                    .join("");
+            });
+            return output.join("");
+        }
+        throw new Error("La lista pasada no es un array");
+    }
+    if (node.type === "interpolation") {
+        return String(context[node.value]);
+    }
+    if (node.type === "isset") {
+        if (context[node.itemName] !== undefined &&
+            context[node.itemName] !== null) {
+            return node.children.map((node) => render(node, context)).join("");
+        }
+        return "";
+    }
+    const output = node.children.map((node) => render(node, context));
+    return output.join("");
+}

package/dist/next-parser/tokenizer.d.ts

@@ -0,0 +1,23 @@
+export type Token = TextToken | InterpolationToken | OpenToken | CloseToken | ArgumentsToken;
+type TextToken = {
+    type: "text";
+    text: string;
+};
+type InterpolationToken = {
+    type: "interpolation";
+    value: string;
+};
+type OpenToken = {
+    type: "open";
+    tag: string;
+};
+type CloseToken = {
+    type: "close";
+    tag: string;
+};
+type ArgumentsToken = {
+    type: "arguments";
+    value: string[];
+};
+export declare function tokenize(input: string): Token[];
+export {};

package/dist/next-parser/tokenizer.js

@@ -0,0 +1,77 @@
+export function tokenize(input) {
+    const tokens = [];
+    let textBuffer = "";
+    for (let i = 0; i < input.length; i++) {
+        const char = input[i];
+        if (char === "{") {
+            pushTextBuffer();
+            const read = readTill("}", i, input);
+            if (!read.success)
+                throw new Error("Unable to find closing }");
+            const { value, finishingPosition } = read;
+            tokens.push({
+                type: "interpolation",
+                value,
+            });
+            i = finishingPosition;
+            continue;
+        }
+        if (char === "<") {
+            pushTextBuffer();
+            const read = readTill(">", i, input);
+            if (!read.success)
+                throw new Error("Unable to find closing '>'");
+            const { value, finishingPosition } = read;
+            const values = value.trim().split(/\s+/);
+            const tag = values[0];
+            if (tag === undefined)
+                throw new Error("Unable to find tag name");
+            if (tag[0] === "/") {
+                const tagName = tag.substring(1);
+                tokens.push({
+                    type: "close",
+                    tag: tagName,
+                });
+                i = finishingPosition;
+                continue;
+            }
+            const args = values.slice(1);
+            tokens.push({
+                type: "open",
+                tag,
+            });
+            if (args.length > 0) {
+                tokens.push({
+                    type: "arguments",
+                    value: args,
+                });
+            }
+            i = finishingPosition;
+            continue;
+        }
+        textBuffer += char;
+    }
+    pushTextBuffer();
+    return tokens;
+    function pushTextBuffer() {
+        if (textBuffer.length > 0) {
+            tokens.push({
+                type: "text",
+                text: textBuffer,
+            });
+            textBuffer = "";
+        }
+    }
+}
+function readTill(charToSearchFor, startingPosition, text) {
+    const finishingPosition = text.indexOf(charToSearchFor, startingPosition + 1);
+    if (finishingPosition === -1) {
+        return { success: false };
+    }
+    const substring = text.substring(startingPosition + 1, finishingPosition);
+    return {
+        success: true,
+        value: substring,
+        finishingPosition,
+    };
+}

package/dist/views.js

@@ -1,5 +1,8 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { parse } from "./next-parser/parser";
+import { render } from "./next-parser/renderer";
+import { tokenize } from "./next-parser/tokenizer";
 let viewsPath = "";
 export function setViewsPath(path) {
     viewsPath = path;
@@ -9,29 +12,10 @@ export async function view(view, props) {
         throw new Error("Views folder path not yet configured. Use `Htmv.setup` before rendering a view.");
     const filePath = path.join(viewsPath, `${view}.html`);
     const code = await fs.readFile(filePath, "utf-8");
-    const replacedCode = code
-        .replace(/<For\s+(\w+)\s+in\s+(\w+)>([\s\S]*?)<\/For>/g, (_, itemName, listName, innerContent) => {
-        const list = props[listName];
-        if (!Array.isArray(list))
-            throw new Error(`${listName} on view ${view} is not an array. If you wish for the For to not do anything pass an empty array instead.`);
-        return list
-            .map((item) => innerContent.replace(new RegExp(`{${itemName}}`, "g"), String(item)))
-            .join("");
-    })
-        .replace(/{(\w+)}/g, (_, propName) => {
-        return props[propName];
-    })
-        .replace(/<Isset\s+(!?\w+)>([\s\S]*?)<\/Isset>/g, (_, propNameWithPrefix, innerContent) => {
-        const isNegated = propNameWithPrefix.startsWith("!");
-        const propName = isNegated
-            ? propNameWithPrefix.slice(1)
-            : propNameWithPrefix;
-        const exists = props[propName] !== undefined && props[propName] !== null;
-        if (isNegated ? !exists : exists)
-            return innerContent;
-        return "";
-    });
-    return new Response(replacedCode, {
+    const tokens = tokenize(code);
+    const root = parse(tokens);
+    const rendered = render(root, props);
+    return new Response(rendered, {
         headers: { "Content-Type": "text/html; charset=utf-8" },
     });
 }

package/package.json

@@ -2,7 +2,7 @@
 	"name": "htmv",
 	"main": "dist/index.js",
 	"type": "module",
-	"version": "0.0.31",
+	"version": "0.0.33",
 	"devDependencies": {
 		"@biomejs/biome": "2.3.3",
 		"@types/bun": "latest"

package/src/next-parser/parser.ts

@@ -0,0 +1,113 @@
+import type { Node, RootNode } from "./renderer";
+import type { Token } from "./tokenizer";
+
+export function parse(tokens: Token[]) {
+	let i = 0;
+
+	const root: RootNode = {
+		type: "root",
+		children: parseChildren(),
+	};
+
+	return root;
+
+	function parseChildren(untilTag?: string): Node[] {
+		const nodes: Node[] = [];
+		while (i < tokens.length) {
+			const token = tokens[i];
+			if (
+				untilTag &&
+				token?.type === "close" &&
+				token.tag.toLocaleLowerCase() === untilTag
+			) {
+				i++;
+				break;
+			}
+			if (token?.type === "text") {
+				nodes.push({
+					type: "text",
+					text: token.text,
+				});
+				i++;
+				continue;
+			}
+			if (token?.type === "interpolation") {
+				nodes.push({
+					type: "interpolation",
+					value: token.value,
+				});
+				i++;
+				continue;
+			}
+			if (token?.type === "open") {
+				const tag = token.tag.toLowerCase();
+				i++;
+				if (tag === "for") {
+					const nextToken = tokens[i]; //should be arguments token
+					i++;
+					if (nextToken?.type !== "arguments")
+						throw new Error("Missing arguments in for");
+					const [itemName, _in, listName] = nextToken.value;
+					if (
+						itemName === undefined ||
+						_in === undefined ||
+						listName === undefined
+					)
+						throw new Error(
+							"Incorrect amount of arguments in for. Expected 3 arguments",
+						);
+					if (_in !== "in") throw new Error("Expected reserved word in.");
+
+					const children = parseChildren(tag);
+					nodes.push({
+						type: "for",
+						children,
+						itemName,
+						listName,
+					});
+					continue;
+				}
+				if (tag === "isset") {
+					const nextToken = tokens[i]; //should be arguments token
+					i++;
+					if (nextToken?.type !== "arguments")
+						throw new Error("Missing arguments in isset");
+					const [itemName] = nextToken.value;
+					if (itemName === undefined) throw new Error("Expected item name");
+					const children = parseChildren(tag);
+					nodes.push({
+						type: "isset",
+						children,
+						itemName,
+					});
+					continue;
+				}
+				const nextToken = tokens[i]; //may be arguments token
+				if (nextToken?.type === "arguments") {
+					const args = nextToken.value.join(" ");
+					nodes.push({
+						type: "text",
+						text: `<${tag} ${args}>`,
+					});
+					i++;
+					continue;
+				}
+				nodes.push({
+					type: "text",
+					text: `<${tag}>`,
+				});
+				continue;
+			}
+			if (token?.type === "close") {
+				if (token.tag === "for" || token.tag === "isset") continue;
+				const tag = token.tag;
+				nodes.push({
+					type: "text",
+					text: `</${tag}>`,
+				});
+				i++;
+			}
+		}
+		return nodes;
+	}
+}

package/src/next-parser/renderer.ts

@@ -0,0 +1,68 @@
+export type Node =
+	| RootNode
+	| TextNode
+	| InterpolationNode
+	| IssetNode
+	| ForNode;
+
+export interface RootNode {
+	type: "root";
+	children: Node[];
+}
+
+interface TextNode {
+	type: "text";
+	text: string;
+}
+
+interface InterpolationNode {
+	type: "interpolation";
+	value: string;
+}
+
+interface IssetNode {
+	type: "isset";
+	itemName: string;
+	children: Node[];
+}
+
+interface ForNode {
+	type: "for";
+	listName: string;
+	itemName: string;
+	children: Node[];
+}
+
+export function render(node: Node, context: Record<string, unknown>): string {
+	if (node.type === "text") {
+		return node.text;
+	}
+	if (node.type === "for") {
+		const list = context[node.listName];
+		if (Array.isArray(list)) {
+			const output = list.map((item) => {
+				return node.children
+					.map((childrenNode) =>
+						render(childrenNode, { ...context, [node.itemName]: item }),
+					)
+					.join("");
+			});
+			return output.join("");
+		}
+		throw new Error("La lista pasada no es un array");
+	}
+	if (node.type === "interpolation") {
+		return String(context[node.value]);
+	}
+	if (node.type === "isset") {
+		if (
+			context[node.itemName] !== undefined &&
+			context[node.itemName] !== null
+		) {
+			return node.children.map((node) => render(node, context)).join("");
+		}
+		return "";
+	}
+	const output = node.children.map((node) => render(node, context));
+	return output.join("");
+}

package/src/next-parser/tokenizer.ts

@@ -0,0 +1,123 @@
+export type Token =
+	| TextToken
+	| InterpolationToken
+	| OpenToken
+	| CloseToken
+	| ArgumentsToken;
+
+type TextToken = {
+	type: "text";
+	text: string;
+};
+
+type InterpolationToken = {
+	type: "interpolation";
+	value: string;
+};
+
+type OpenToken = {
+	type: "open";
+	tag: string;
+};
+
+type CloseToken = {
+	type: "close";
+	tag: string;
+};
+
+type ArgumentsToken = {
+	type: "arguments";
+	value: string[];
+};
+
+export function tokenize(input: string): Token[] {
+	const tokens: Token[] = [];
+	let textBuffer = "";
+	for (let i = 0; i < input.length; i++) {
+		const char = input[i];
+		if (char === "{") {
+			pushTextBuffer();
+			const read = readTill("}", i, input);
+			if (!read.success) throw new Error("Unable to find closing }");
+			const { value, finishingPosition } = read;
+			tokens.push({
+				type: "interpolation",
+				value,
+			});
+			i = finishingPosition;
+			continue;
+		}
+
+		if (char === "<") {
+			pushTextBuffer();
+			const read = readTill(">", i, input);
+			if (!read.success) throw new Error("Unable to find closing '>'");
+			const { value, finishingPosition } = read;
+			const values = value.trim().split(/\s+/);
+			const tag = values[0];
+			if (tag === undefined) throw new Error("Unable to find tag name");
+			if (tag[0] === "/") {
+				const tagName = tag.substring(1);
+				tokens.push({
+					type: "close",
+					tag: tagName,
+				});
+				i = finishingPosition;
+				continue;
+			}
+			const args = values.slice(1);
+			tokens.push({
+				type: "open",
+				tag,
+			});
+			if (args.length > 0) {
+				tokens.push({
+					type: "arguments",
+					value: args,
+				});
+			}
+
+			i = finishingPosition;
+			continue;
+		}
+
+		textBuffer += char;
+	}
+	pushTextBuffer();
+	return tokens;
+
+	function pushTextBuffer() {
+		if (textBuffer.length > 0) {
+			tokens.push({
+				type: "text",
+				text: textBuffer,
+			});
+			textBuffer = "";
+		}
+	}
+}
+
+function readTill(
+	charToSearchFor: string,
+	startingPosition: number,
+	text: string,
+):
+	| {
+			success: true;
+			value: string;
+			finishingPosition: number;
+	  }
+	| {
+			success: false;
+	  } {
+	const finishingPosition = text.indexOf(charToSearchFor, startingPosition + 1);
+	if (finishingPosition === -1) {
+		return { success: false };
+	}
+	const substring = text.substring(startingPosition + 1, finishingPosition);
+	return {
+		success: true,
+		value: substring,
+		finishingPosition,
+	};
+}

package/src/views.ts

@@ -1,5 +1,8 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { parse } from "./next-parser/parser";
+import { render } from "./next-parser/renderer";
+import { tokenize } from "./next-parser/tokenizer";
 
 let viewsPath = "";
 
@@ -14,44 +17,10 @@ export async function view(view: string, props: Record<string, unknown>) {
 		);
 	const filePath = path.join(viewsPath, `${view}.html`);
 	const code = await fs.readFile(filePath, "utf-8");
-	const replacedCode = code
-		.replace(
-			/<For\s+(\w+)\s+in\s+(\w+)>([\s\S]*?)<\/For>/g,
-			(_, itemName: string, listName: string, innerContent: string) => {
-				const list = props[listName];
-				if (!Array.isArray(list))
-					throw new Error(
-						`${listName} on view ${view} is not an array. If you wish for the For to not do anything pass an empty array instead.`,
-					);
-
-				return list
-					.map((item) =>
-						innerContent.replace(
-							new RegExp(`{${itemName}}`, "g"),
-							String(item),
-						),
-					)
-					.join("");
-			},
-		)
-		.replace(/{(\w+)}/g, (_, propName) => {
-			return props[propName] as string;
-		})
-		.replace(
-			/<Isset\s+(!?\w+)>([\s\S]*?)<\/Isset>/g,
-			(_, propNameWithPrefix: string, innerContent: string) => {
-				const isNegated = propNameWithPrefix.startsWith("!");
-				const propName = isNegated
-					? propNameWithPrefix.slice(1)
-					: propNameWithPrefix;
-				const exists =
-					props[propName] !== undefined && props[propName] !== null;
-
-				if (isNegated ? !exists : exists) return innerContent;
-				return "";
-			},
-		);
-	return new Response(replacedCode, {
+	const tokens = tokenize(code);
+	const root = parse(tokens);
+	const rendered = render(root, props);
+	return new Response(rendered, {
 		headers: { "Content-Type": "text/html; charset=utf-8" },
 	});
 }