htmv 0.0.55 → 0.0.56

package/dist/compiler/parser.js

@@ -74,6 +74,34 @@ export function parse(tokens) {
                     });
                     continue;
                 }
+                const pathName = token.tag.split("/").at(-1);
+                if (pathName !== undefined && startsWithUppercase(pathName)) {
+                    // component
+                    const rawArgs = [];
+                    let nextToken = tokens[i];
+                    while (nextToken?.type === "arguments") {
+                        rawArgs.push(nextToken.value);
+                        i++;
+                        nextToken = tokens[i];
+                    }
+                    if (rawArgs.at(-1) === "/") {
+                        // is self closing
+                        nodes.push({
+                            type: "component",
+                            path: token.tag,
+                            props: rawArgsToProps(rawArgs),
+                            children: [],
+                        });
+                        continue;
+                    }
+                    nodes.push({
+                        type: "component",
+                        path: token.tag,
+                        props: rawArgsToProps(rawArgs.slice(0, -1)),
+                        children: parseChildren(tag),
+                    });
+                    continue;
+                }
                 nodes.push({
                     type: "text",
                     text: `<${tag} `,
@@ -155,3 +183,27 @@ export function parse(tokens) {
         }
     }
 }
+function startsWithUppercase(text) {
+    return text[0] === text[0]?.toUpperCase();
+}
+function rawArgsToProps(rawArgs) {
+    const props = {};
+    for (const arg of rawArgs) {
+        if (arg === "/")
+            continue;
+        const eqIndex = arg.indexOf("=");
+        if (eqIndex === -1) {
+            // boolean prop
+            props[arg] = true;
+            continue;
+        }
+        const key = arg.slice(0, eqIndex);
+        let value = arg.slice(eqIndex + 1);
+        if ((value.startsWith('"') && value.endsWith('"')) ||
+            (value.startsWith("'") && value.endsWith("'"))) {
+            value = value.slice(1, -1);
+        }
+        props[key] = value;
+    }
+    return props;
+}

package/dist/compiler/renderer.d.ts

@@ -1,4 +1,10 @@
-export type Node = RootNode | TextNode | InterpolationNode | IssetNode | ForNode | AttributeBindingNode;
+export type Node = RootNode | TextNode | InterpolationNode | IssetNode | ForNode | AttributeBindingNode | ComponentNode;
+export interface ComponentNode {
+    type: "component";
+    path: string;
+    props: Record<string, unknown>;
+    children: Node[];
+}
 export interface RootNode {
     type: "root";
     children: Node[];

package/dist/compiler/renderer.js

@@ -1,3 +1,4 @@
+import { view } from "../views";
 export function render(node, context) {
     if (node.type === "attr-binding") {
         const prop = resolvePropertyPath(node.expr);
@@ -32,6 +33,14 @@ export function render(node, context) {
         }
         return "";
     }
+    if (node.type === "component") {
+        const renderedView = view(node.path, {
+            ...node.props,
+            children: node.children.map((node) => render(node, context)).join(""),
+            ...context,
+        }).body;
+        return renderedView ?? "";
+    }
     const output = node.children.map((node) => render(node, context));
     return output.join("");
     function resolvePropertyPath(path) {

package/dist/index.js

@@ -1,9 +1,11 @@
 import { createApp } from "./app";
 import { registerRoutes } from "./routing/routing";
 import { setViewsPath } from "./views";
+import { registerViews } from "./views-registry";
 export { view } from "./views";
 export async function setup(paths) {
     setViewsPath(paths.views);
+    await registerViews();
     const app = createApp(paths.public);
     await registerRoutes(app, paths.routes);
     app.listen(paths.port);

package/dist/views-registry.d.ts

@@ -0,0 +1,3 @@
+export declare const viewRegistry: Record<string, string>;
+export declare function addToViewRegistry(name: string, code: string): void;
+export declare function registerViews(): Promise<void>;

package/dist/views-registry.js

@@ -0,0 +1,31 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { viewsPath } from "./views";
+export const viewRegistry = {};
+export function addToViewRegistry(name, code) {
+    viewRegistry[name] = code;
+}
+export async function registerViews() {
+    const files = await deepReadDir(viewsPath);
+    for (const file of files) {
+        if (file.endsWith(".html")) {
+            const name = file.slice(0, -".html".length);
+            const code = await fs.readFile(name, "utf-8");
+            addToViewRegistry(name, code);
+        }
+    }
+}
+async function deepReadDir(dir) {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    const files = [];
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            files.push(...(await deepReadDir(fullPath)));
+        }
+        else if (entry.isFile()) {
+            files.push(fullPath);
+        }
+    }
+    return files;
+}

package/dist/views.d.ts

@@ -1,3 +1,4 @@
 import type { HttpResponse } from "./http/response";
+export declare let viewsPath: string;
 export declare function setViewsPath(path: string): void;
-export declare function view(view: string, props?: Record<string, unknown>): Promise<HttpResponse>;
+export declare function view(view: string, props?: Record<string, unknown>): HttpResponse;

package/dist/views.js

@@ -3,15 +3,17 @@ import path from "node:path";
 import { parse } from "./compiler/parser";
 import { render } from "./compiler/renderer";
 import { tokenize } from "./compiler/tokenizer";
-let viewsPath = "";
+import { viewRegistry } from "./views-registry";
+export let viewsPath = "";
 export function setViewsPath(path) {
     viewsPath = path;
 }
-export async function view(view, props) {
+export function view(view, props) {
     if (viewsPath === "")
         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 code = viewRegistry[view];
+    if (code === undefined)
+        throw new Error(`View ${view} not found. Did you use the correct name?`);
     const tokens = tokenize(code);
     const root = parse(tokens);
     const rendered = render(root, props ? props : {});

package/package.json

@@ -2,7 +2,7 @@
 	"name": "htmv",
 	"main": "dist/index.js",
 	"type": "module",
-	"version": "0.0.55",
+	"version": "0.0.56",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",