ventojs 2.0.0-canary.2 → 2.0.0-canary.3

package/CHANGELOG.md

@@ -14,6 +14,7 @@ Vento 2.0 is now dependency-free and compatible with browsers without a build st
 - New filesystem loader to use File System API.
 - Better errors reporting [#131], [#137]
 - `core/errors.ts` module to format errors.
+- New `{{ slot }}` tag to pass extra variables to `{{ layout }}` [#140]
 
 ### Changed
 - Renamed `src` directory to `core`.
@@ -48,3 +49,4 @@ Vento 2.0 is now dependency-free and compatible with browsers without a build st
 [#131]: https://github.com/ventojs/vento/issues/131
 [#134]: https://github.com/ventojs/vento/issues/134
 [#137]: https://github.com/ventojs/vento/issues/137
+[#140]: https://github.com/ventojs/vento/issues/140

package/core/errors.js

@@ -58,7 +58,9 @@ export class RuntimeError extends VentoError {
         }
         // Capture the exact position of the error in the compiled code
         for (const frame of getStackFrames(this.cause)) {
-            if (frame.file !== "<anonymous>") {
+            if (frame.file !== "<anonymous>" &&
+                path &&
+                ![path + ".js", path + ".mjs"].some((p) => frame.file.endsWith(p))) {
                 continue;
             }
             return {

package/core/js.js

@@ -30,8 +30,10 @@ export default function* iterateTopLevel(source, start = 0) {
         const [stop, variable] = match;
         if (variable) {
             cursor += variable.length;
-            if (!reserved.has(variable))
+            // Words used internally by Vento start with two underscores
+            if (!reserved.has(variable) && !variable.startsWith("__")) {
                 variables.add(variable);
+            }
             continue;
         }
         // Check the type of the stopping point.

package/core/reserved.js

@@ -1,14 +1,4 @@
 const variables = new Set([
-    // Words reserved by Vento, used internally. In general, don't use variable
-    // names starting with two underscores to be future-proof and avoid clashes.
-    "__file",
-    "__template",
-    "__env",
-    "__defaults",
-    "__err",
-    "__exports",
-    "__pos",
-    "__tmp",
     // JS reserved words, and some "dangerous" words like `let`, `async`, `of` or
     // `undefined`, which aren't technically reserved but don't name your
     // variables that.

package/loaders/module.js

@@ -4,11 +4,13 @@
  */
 export class ModuleLoader {
     #root;
-    constructor(root) {
+    #extension;
+    constructor(root, extension = ".js") {
         this.#root = root;
+        this.#extension = extension;
     }
     async load(file) {
-        const url = new URL(join(this.#root.pathname, file + ".js"), this.#root);
+        const url = new URL(join(this.#root.pathname, file + this.#extension), this.#root);
         const module = await import(url.toString());
         return module.default;
     }
@@ -18,34 +20,38 @@ export class ModuleLoader {
         }
         return join("/", file);
     }
-}
-function join(...parts) {
-    return parts.join("/").replace(/\/+/g, "/");
-}
-function dirname(path) {
-    const lastSlash = path.lastIndexOf("/");
-    return lastSlash === -1 ? "." : path.slice(0, lastSlash);
-}
-/**
- * Exports a template as a string that can be used in an ES module.
- * This is useful for precompiled templates.
- */
-export function exportTemplate(template, options) {
-    if (!template.source) {
-        throw new Error("Template source is not defined");
-    }
-    const exportCode = `export default function (__env) {
+    /**
+     * Outputs a template as a string that can be used in an ES module.
+     * This is useful for precompiled templates.
+     * @returns A tuple with the path and the content of the module.
+     */
+    output(template, source = false) {
+        if (!template.source) {
+            throw new Error("Template source is not defined");
+        }
+        if (!template.path) {
+            throw new Error("Template path is not defined");
+        }
+        const content = `export default function (__env
+    ) {
     ${template.toString()};
 
-    ${options?.source
-        ? `__template.path = ${JSON.stringify(template.path ? template.path + ".js" : undefined)};
+    ${source
+            ? `__template.path = ${JSON.stringify(template.path)};
         __template.code = ${JSON.stringify(template.code)};
-        __template.source = ${JSON.stringify(template.source)};
-        __template.tokens = ${JSON.stringify(template.tokens)};`
-        : ""}
+        __template.source = ${JSON.stringify(template.source)};`
+            : ""}
     __template.defaults = ${JSON.stringify(template.defaults || {})};
 
     return __template;
   }`;
-    return exportCode;
+        return [`${template.path}${this.#extension}`, content];
+    }
+}
+function join(...parts) {
+    return parts.join("/").replace(/\/+/g, "/");
+}
+function dirname(path) {
+    const lastSlash = path.lastIndexOf("/");
+    return lastSlash === -1 ? "." : path.slice(0, lastSlash);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ventojs",
-  "version": "2.0.0-canary.2",
+  "version": "2.0.0-canary.3",
   "description": "🌬 A minimal but powerful template engine",
   "type": "module",
   "repository": {

package/plugins/layout.js

@@ -2,34 +2,49 @@ import { SourceError } from "../core/errors.js";
 export default function () {
     return (env) => {
         env.tags.push(layoutTag);
+        env.tags.push(slotTag);
     };
 }
+const LAYOUT_TAG = /^layout\s+([^{]+|`[^`]+`)+(?:\{([^]*)\})?$/;
+const SLOT_NAME = /^[a-z_]\w*$/i;
 function layoutTag(env, token, output, tokens) {
     const [, code, position] = token;
     if (!code.startsWith("layout ")) {
         return;
     }
-    const match = code?.match(/^layout\s+([^{]+|`[^`]+`)+(?:\{([\s|\S]*)\})?$/);
+    const match = code?.match(LAYOUT_TAG);
     if (!match) {
         throw new SourceError("Invalid layout tag", position);
     }
     const [_, file, data] = match;
-    const varname = output.startsWith("__layout")
-        ? output + "_layout"
-        : "__layout";
-    const compiled = [];
-    const compiledFilters = env.compileFilters(tokens, varname);
-    compiled.push("{");
-    compiled.push(`let ${varname} = "";`);
-    compiled.push(...env.compileTokens(tokens, varname, "/layout"));
-    compiled.push(`${varname} = __env.utils.safeString(${compiledFilters});`);
+    const compiledFilters = env.compileFilters(tokens, "__slots.content");
     const { dataVarname } = env.options;
-    compiled.push(`const __tmp = await __env.run(${file},
-      {...${dataVarname}${data ? `, ${data}` : ""}, content: ${env.compileFilters(tokens, varname)}},
-      __template.path,
-      ${position}
-    );
-    ${output} += __tmp.content;`);
-    compiled.push("}");
-    return compiled.join("\n");
+    return `${output} += (await (async () => {
+    const __slots = { content: "" };
+    ${env.compileTokens(tokens, "__slots.content", "/layout").join("\n")}
+    __slots.content = __env.utils.safeString(${compiledFilters});
+    return __env.run(${file}, {
+      ...${dataVarname},
+      ...__slots,
+      ${data ?? ""}
+    }, __template.path, ${position});
+  })()).content;`;
+}
+function slotTag(env, token, _output, tokens) {
+    const [, code, position] = token;
+    if (!code.startsWith("slot ")) {
+        return;
+    }
+    const name = code.slice(4).trim();
+    if (!SLOT_NAME.test(name)) {
+        throw new SourceError(`Invalid slot name "${name}"`, position);
+    }
+    const compiledFilters = env.compileFilters(tokens, "__tmp");
+    return `{
+    let __tmp = '';
+    ${env.compileTokens(tokens, "__tmp", "/slot").join("\n")}
+    __slots.${name} ??= '';
+    __slots.${name} += ${compiledFilters};
+    __slots.${name} = __env.utils.safeString(__slots.${name});
+  }`;
 }

package/types/loaders/module.d.ts

@@ -5,15 +5,13 @@ import type { Loader, PrecompiledTemplate, Template } from "../core/environment.
  */
 export declare class ModuleLoader implements Loader {
     #private;
-    constructor(root: URL);
+    constructor(root: URL, extension?: string);
     load(file: string): Promise<PrecompiledTemplate>;
     resolve(from: string, file: string): string;
+    /**
+     * Outputs a template as a string that can be used in an ES module.
+     * This is useful for precompiled templates.
+     * @returns A tuple with the path and the content of the module.
+     */
+    output(template: Template, source?: boolean): [string, string];
 }
-export interface ExportOptions {
-    source?: boolean;
-}
-/**
- * Exports a template as a string that can be used in an ES module.
- * This is useful for precompiled templates.
- */
-export declare function exportTemplate(template: Template, options?: ExportOptions): string;