htmv 0.0.30 → 0.0.32

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/views.js

@@ -10,6 +10,14 @@ export async function view(view, props) {
     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];
     })
@@ -18,7 +26,7 @@ export async function view(view, props) {
         const propName = isNegated
             ? propNameWithPrefix.slice(1)
             : propNameWithPrefix;
-        const exists = props[propName] !== undefined && props[propName] !== null;
+        const exists = isset(props[propName]);
         if (isNegated ? !exists : exists)
             return innerContent;
         return "";
@@ -27,3 +35,9 @@ export async function view(view, props) {
         headers: { "Content-Type": "text/html; charset=utf-8" },
     });
 }
+function isset(prop) {
+    if (Array.isArray(prop)) {
+        return prop.length > 0;
+    }
+    return prop !== undefined && prop !== null;
+}

package/package.json

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

package/src/views.ts

@@ -15,6 +15,25 @@ 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;
 		})
@@ -25,8 +44,7 @@ export async function view(view: string, props: Record<string, unknown>) {
 				const propName = isNegated
 					? propNameWithPrefix.slice(1)
 					: propNameWithPrefix;
-				const exists =
-					props[propName] !== undefined && props[propName] !== null;
+				const exists = isset(props[propName]);
 
 				if (isNegated ? !exists : exists) return innerContent;
 				return "";
@@ -36,3 +54,10 @@ export async function view(view: string, props: Record<string, unknown>) {
 		headers: { "Content-Type": "text/html; charset=utf-8" },
 	});
 }
+
+function isset(prop: unknown) {
+	if (Array.isArray(prop)) {
+		return prop.length > 0;
+	}
+	return prop !== undefined && prop !== null;
+}