ventojs 2.0.0-canary.1 → 2.0.0-canary.3

package/CHANGELOG.md

@@ -13,6 +13,8 @@ Vento 2.0 is now dependency-free and compatible with browsers without a build st
 - Support for precompiled templates.
 - 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`.
@@ -47,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/environment.js

@@ -1,6 +1,6 @@
 import iterateTopLevel from "./js.js";
 import tokenize from "./tokenizer.js";
-import { createError, TokenError } from "./errors.js";
+import { createError, SourceError } from "./errors.js";
 export class Environment {
     cache = new Map();
     options;
@@ -20,8 +20,8 @@ export class Environment {
     use(plugin) {
         plugin(this);
     }
-    async run(file, data, from) {
-        const template = await this.load(file, from);
+    async run(file, data, from, position) {
+        const template = await this.load(file, from, position);
         return await template(data);
     }
     async runString(source, data, file) {
@@ -41,25 +41,21 @@ export class Environment {
         if (typeof source !== "string") {
             throw new TypeError(`The source code of "${path}" must be a string. Got ${typeof source}`);
         }
-        const allTokens = this.tokenize(source, path);
-        const tokens = [...allTokens];
+        const tokens = this.tokenize(source, path);
         const lastToken = tokens.at(-1);
         if (lastToken[0] != "string") {
-            throw new TokenError("Unclosed tag", lastToken, source, path);
+            throw new SourceError("Unclosed tag", lastToken[2], path, source);
         }
         let code = "";
         try {
             code = this.compileTokens(tokens).join("\n");
         }
         catch (error) {
-            if (!(error instanceof Error))
-                throw error;
-            throw createError(error, {
-                source,
-                code,
-                tokens: allTokens,
-                path,
-            });
+            if (error instanceof SourceError) {
+                error.file ??= path;
+                error.source ??= source;
+            }
+            throw error;
         }
         const { dataVarname, autoDataVarname } = this.options;
         if (autoDataVarname) {
@@ -77,32 +73,32 @@ export class Environment {
         }
         try {
             const constructor = new Function("__env", `return async function __template(${dataVarname}) {
+          let __pos=0;
           try {
             ${dataVarname} = Object.assign({}, __template.defaults, ${dataVarname});
             const __exports = { content: "" };
             ${code}
             return __exports;
           } catch (error) {
-            throw __env.utils.createError(error, __template);
+            throw __env.utils.createError(error, __template, __pos);
           }
         }`);
             const template = constructor(this);
             template.path = path;
             template.code = constructor.toString();
             template.source = source;
-            template.tokens = allTokens;
             template.defaults = defaults || {};
             return template;
         }
         catch (error) {
-            if (!(error instanceof Error))
-                throw error;
-            throw createError(error, {
-                source,
-                code,
-                tokens: allTokens,
-                path,
-            });
+            if (error instanceof SyntaxError) {
+                throw createError(error, { source, code, path });
+            }
+            if (error instanceof SourceError) {
+                error.file ??= path;
+                error.source ??= source;
+            }
+            throw error;
         }
     }
     tokenize(source, path) {
@@ -115,7 +111,15 @@ export class Environment {
         }
         return tokens;
     }
-    async load(file, from) {
+    async load(file, from, position) {
+        if (!file) {
+            throw position !== undefined
+                ? new SourceError(`Invalid template (${typeof file})`, position, from)
+                : new Error(`Invalid template (${typeof file})`);
+        }
+        if (typeof file !== "string") {
+            throw new TypeError(`The template filename must be a string. Got ${typeof file}`);
+        }
         const path = this.options.loader.resolve(from || "", file);
         let cached = this.cache.get(path);
         if (cached) {
@@ -126,6 +130,11 @@ export class Environment {
             .split("?")[0]
             .split("#")[0];
         cached = this.options.loader.load(cleanPath)
+            .catch((error) => {
+            throw position !== undefined
+                ? new SourceError(`Error loading template: ${error.message}`, position, from)
+                : error;
+        })
             .then((result) => {
             if (typeof result === "function") {
                 return result(this);
@@ -141,7 +150,7 @@ export class Environment {
         let openToken;
         tokens: while (tokens.length > 0) {
             const token = tokens.shift();
-            const [type, code, pos] = token;
+            const [type, code, position] = token;
             openToken ??= token;
             // We found the closing tag, so we stop compiling
             if (closeToken && type === "tag" && closeToken === code) {
@@ -157,7 +166,7 @@ export class Environment {
                 continue;
             }
             if (type === "tag") {
-                compiled.push(`/*__pos:${pos}*/`);
+                compiled.push(`__pos=${position};`);
                 for (const tag of this.tags) {
                     const compiledTag = tag(this, token, outputVar, tokens);
                     if (typeof compiledTag === "string") {
@@ -170,11 +179,11 @@ export class Environment {
                 compiled.push(`${outputVar} += (${expression}) ?? "";`);
                 continue;
             }
-            throw new TokenError(`Unknown token type "${type}"`, token);
+            throw new SourceError(`Unknown token type "${type}"`, position);
         }
         // If we reach here, it means we have an open token that wasn't closed
         if (closeToken) {
-            throw new TokenError(`Missing closing tag ("${closeToken}" tag is expected)`, openToken);
+            throw new SourceError(`Missing closing tag ("${closeToken}" tag is expected)`, openToken[2]);
         }
         return compiled;
     }
@@ -185,7 +194,7 @@ export class Environment {
             const [, code, position] = token;
             const match = code.match(/^(await\s+)?([\w.]+)(?:\((.*)\))?$/);
             if (!match) {
-                throw new TokenError(`Invalid filter: ${code}`, token);
+                throw new SourceError(`Invalid filter: ${code}`, position);
             }
             const [_, isAsync, name, args] = match;
             if (!Object.hasOwn(this.filters, name)) {
@@ -235,7 +244,7 @@ thisObject, method, ...args) {
     if (typeof thisObject[method] === "function") {
         return thisObject[method](...args);
     }
-    throw new TokenError(`Method "${method}" is not a function of ${typeof thisObject} variable`, position);
+    throw new SourceError(`Method "${method}" is not a function of ${typeof thisObject} variable`, position);
 }
 function checkAsync(fn) {
     return fn.constructor?.name === "AsyncFunction";

package/core/errors.js

@@ -1,182 +1,265 @@
 export class VentoError extends Error {
 }
-export class TokenError extends VentoError {
-    token;
-    source;
+export class SourceError extends VentoError {
+    position;
     file;
-    constructor(message, token, source, file) {
+    source;
+    constructor(message, position, file, source) {
         super(message);
-        this.name = "TokenError";
-        this.token = token;
-        this.source = source;
+        this.name = "SourceError";
+        this.position = position;
         this.file = file;
+        this.source = source;
     }
     getContext() {
-        if (!this.source || this.token === undefined) {
-            return;
-        }
         return {
             type: this.name,
             message: this.message,
-            source: this.source,
-            position: typeof this.token === "number" ? this.token : this.token[2],
+            position: this.position,
             file: this.file,
+            source: this.source,
         };
     }
 }
 export class RuntimeError extends VentoError {
-    context;
-    constructor(error, context) {
+    #context;
+    position;
+    constructor(error, context, position) {
         super(error.message);
         this.name = error.name || "JavaScriptError";
-        this.context = context;
+        this.#context = context;
         this.cause = error;
+        this.position = position;
     }
-    getContext() {
-        if (this.cause instanceof SyntaxError) {
-            return parseSyntaxError(this.cause, this.context);
+    async getContext() {
+        const { code, source, path } = this.#context;
+        // If we don't have the position, we cannot provide a context
+        // Try to get the context from a SyntaxError
+        if (this.position === undefined) {
+            try {
+                return (await getSyntaxErrorContext(this.cause, this.#context)) ??
+                    {
+                        type: this.name || "JavaScriptError",
+                        message: this.message,
+                        source,
+                        code,
+                        file: path,
+                    };
+            }
+            catch {
+                return {
+                    type: this.name || "JavaScriptError",
+                    message: this.message,
+                    source,
+                    code,
+                    file: path,
+                };
+            }
         }
-        if (this.cause instanceof Error) {
-            return parseError(this.cause, this.context);
+        // Capture the exact position of the error in the compiled code
+        for (const frame of getStackFrames(this.cause)) {
+            if (frame.file !== "<anonymous>" &&
+                path &&
+                ![path + ".js", path + ".mjs"].some((p) => frame.file.endsWith(p))) {
+                continue;
+            }
+            return {
+                type: this.name || "JavaScriptError",
+                message: this.message,
+                source,
+                position: this.position,
+                code,
+                line: frame.line,
+                column: frame.column,
+                file: path,
+            };
         }
+        // As a fallback, return the error with the available context
+        return {
+            type: this.name || "JavaScriptError",
+            message: this.message,
+            source,
+            position: this.position,
+            code,
+            file: path,
+        };
     }
 }
-export function createError(error, context) {
+/** Create or complete VentoError with extra info from the template */
+export function createError(error, context, position) {
     if (error instanceof RuntimeError)
         return error;
-    // If the error is a TokenError, we can enhance it with the context information
-    if (error instanceof TokenError) {
+    // If the error is a SourceError, we can fill the missing context information
+    if (error instanceof SourceError) {
         error.file ??= context.path;
         error.source ??= context.source;
+        error.position ??= position;
         return error;
     }
     // JavaScript syntax errors can be parsed to get accurate position
-    return new RuntimeError(error, context);
+    return new RuntimeError(error, context, position);
 }
-export async function printError(error) {
+const colors = {
+    number: (n) => `\x1b[33m${n}\x1b[39m`,
+    dim: (line) => `\x1b[2m${line}\x1b[22m`,
+    error: (msg) => `\x1b[31m${msg}\x1b[39m`,
+};
+const plain = {
+    number: (n) => n,
+    dim: (line) => line,
+    error: (msg) => msg,
+};
+const formats = {
+    colors,
+    plain,
+};
+/** Prints an error to the console in a formatted way. */
+export async function printError(error, format = plain) {
     if (error instanceof VentoError) {
         const context = await error.getContext();
+        const fmt = typeof format === "string" ? formats[format] || plain : format;
         if (context) {
-            console.error(stringifyContext(context));
+            console.error(stringifyError(context, fmt));
             return;
         }
     }
     console.error(error);
 }
-function parseError(error, context) {
-    const stackMatch = error.stack?.match(/<anonymous>:(\d+):(\d+)/);
-    if (!stackMatch)
-        return;
-    const row = Number(stackMatch[1]) - 1;
-    const col = Number(stackMatch[2]);
-    const position = getAccurateErrorPosition(row, col, context);
-    if (position == -1)
-        return;
-    return {
-        type: error.name || "JavaScriptError",
-        message: error.message,
-        source: context.source,
-        position,
-        file: context.path,
-    };
-}
-async function parseSyntaxError(error, context) {
-    const code = `()=>{${context.code}}`;
-    const dataUrl = "data:application/javascript;base64," + btoa(code);
-    const stack = await import(dataUrl).catch(({ stack }) => stack);
-    if (!stack)
-        return;
-    const stackMatch = stack?.match(/:(\d+):(\d+)$/m);
-    if (!stackMatch)
-        return;
-    const row = Number(stackMatch[1]) - 1;
-    const col = Number(stackMatch[2]);
-    const position = getAccurateErrorPosition(row, col, context);
-    if (position == -1)
-        return;
-    return {
-        type: "SyntaxError",
-        message: error.message,
-        source: context.source,
-        position,
-        file: context.path,
-    };
-}
-function getAccurateErrorPosition(row, col, context) {
-    const { code, tokens, source } = context;
-    if (!tokens)
-        return -1;
-    const linesAndDelims = code.split(/(\r\n?|[\n\u2028\u2029])/);
-    const linesAndDelimsUntilIssue = linesAndDelims.slice(0, row * 2);
-    const issueIndex = linesAndDelimsUntilIssue.join("").length + col;
-    const posLine = linesAndDelimsUntilIssue.findLast((line) => {
-        return /^\/\*__pos:(\d+)\*\/$/.test(line);
-    });
-    if (!posLine)
-        return -1;
-    const position = Number(posLine.slice(8, -2));
-    const token = tokens.findLast((token) => {
-        if (token[2] == undefined)
-            return false;
-        return token[2] <= position;
-    });
-    if (!token)
-        return -1;
-    const isJS = token[1].startsWith(">");
-    const tag = isJS ? token[1].slice(1).trimStart() : token[1];
-    const issueStartIndex = code.lastIndexOf(tag, issueIndex);
-    if (issueStartIndex == -1)
-        return -1;
-    const sourceIssueStartIndex = source.indexOf(tag, position);
-    return sourceIssueStartIndex + issueIndex - issueStartIndex - 1;
-}
-const terminal = {
-    number: (n) => `\x1b[33m${n}\x1b[39m`,
-    dim: (line) => `\x1b[2m${line}\x1b[22m`,
-    error: (msg) => `\x1b[31m${msg}\x1b[39m`,
-};
-const LINE_TERMINATOR = /\r\n?|[\n\u2028\u2029]/;
-export function stringifyContext(context, format = terminal) {
-    const { type, message, source, position, file } = context;
-    const sourceAfterIssue = source.slice(position);
-    const newlineMatch = sourceAfterIssue.match(LINE_TERMINATOR);
-    const endIndex = position + (newlineMatch?.index ?? sourceAfterIssue.length);
-    const lines = source.slice(0, endIndex).split(LINE_TERMINATOR);
-    const displayedLineEntries = [...lines.entries()].slice(-3);
-    const endLineIndex = lines.at(-1).length + position - endIndex;
-    const numberLength = (displayedLineEntries.at(-1)[0] + 1).toString().length;
-    const displayedCode = displayedLineEntries.map(([index, line]) => {
-        const number = `${index + 1}`.padStart(numberLength);
-        const sidebar = ` ${format.number(number)} ${format.dim("|")} `;
-        return sidebar + line;
-    }).join("\n");
-    const sidebarWidth = numberLength + 4;
-    const tooltipIndex = sidebarWidth + endLineIndex;
-    const tooltipIndent = " ".repeat(tooltipIndex);
-    const tooltip = tooltipIndent + format.error(`^ ${message}`);
+/** Converts an error context into a formatted string representation. */
+export function stringifyError(context, format = plain) {
+    const { type, message, source, position, code, line, column, file } = context;
     const output = [];
+    // Print error type and message
     output.push(`${format.error(type)}: ${message}`);
+    // If we don't know the position, we cannot print the source code
+    if (position === undefined || source === undefined) {
+        if (file) {
+            output.push(format.dim(file));
+        }
+        return output.join("\n");
+    }
+    const sourceLines = codeToLines(source);
+    const [sourceLine, sourceColumn] = getSourceLineColumn(sourceLines, position);
+    // Print file location if available
     if (file) {
-        output.push(format.dim(getLocation(file, source, position)), "");
+        output.push(format.dim(`${file}:${sourceLine}:${sourceColumn}`));
     }
-    output.push(displayedCode, tooltip);
+    const pad = sourceLine.toString().length;
+    // Print the latest lines of the source code before the error
+    for (let line = Math.max(sourceLine - 3, 1); line <= sourceLine; line++) {
+        const sidebar = ` ${format.number(`${line}`.padStart(pad))} ${format.dim("|")} `;
+        output.push(sidebar + sourceLines[line - 1].trimEnd());
+    }
+    // If we don't have the compiled code, return the tag position
+    const indent = ` ${" ".repeat(pad)} ${format.dim("|")}`;
+    // If we don't have the compiled code, print the tag position
+    if (!code || line === undefined || column === undefined) {
+        output.push(`${indent} ${" ".repeat(sourceColumn - 1)}${format.error(`^ ${message}`)}`);
+        return output.join("\n");
+    }
+    // Print the compiled code with the error position
+    const codeLines = codeToLines(code);
+    output.push(`${indent} ${" ".repeat(sourceColumn - 1)}${format.error("^")}`);
+    output.push(`${indent} ${format.dim(codeLines[line - 1]?.trimEnd() || "")}`);
+    output.push(`${indent} ${" ".repeat(column)} ${format.error(`^ ${message}`)}`);
     return output.join("\n");
 }
-function getLocation(file, source, position) {
-    let line = 1;
-    let column = 1;
-    for (let index = 0; index < position; index++) {
-        if (source[index] === "\n" ||
-            (source[index] === "\r" && source[index + 1] === "\n")) {
-            line++;
-            column = 1;
-            if (source[index] === "\r") {
-                index++;
-            }
+/**
+ * Extracts the context from a SyntaxError
+ * It does not work on Node.js and Bun due to the lack of position information
+ * in the stack trace of a dynamic import error.
+ */
+async function getSyntaxErrorContext(error, context) {
+    const { source, code } = context;
+    const url = URL.createObjectURL(new Blob([code], { type: "application/javascript" }));
+    const err = await import(url).catch((e) => e);
+    URL.revokeObjectURL(url);
+    for (const frame of getStackFrames(err)) {
+        if (!frame.file.startsWith("blob:")) {
+            continue;
+        }
+        return {
+            type: "SyntaxError",
+            message: error.message,
+            source,
+            position: searchPosition(frame, code) ?? 0,
+            code,
+            line: frame.line,
+            column: frame.column,
+            file: context.path,
+        };
+    }
+}
+const LINE_TERMINATOR = /(\r\n?|[\n\u2028\u2029])/;
+/** Convert the source code into an array of lines */
+function codeToLines(code) {
+    const doubleLines = code.split(LINE_TERMINATOR);
+    const lines = [];
+    for (let i = 0; i < doubleLines.length; i += 2) {
+        lines.push(`${doubleLines[i]}${doubleLines[i + 1] ?? ""}`);
+    }
+    return lines;
+}
+const POSITION_VARIABLE = /^__pos=(\d+);$/;
+/** Search the closest token to an error */
+function searchPosition(frame, code) {
+    const posLine = codeToLines(code)
+        .slice(0, frame.line - 1)
+        .findLast((line) => POSITION_VARIABLE.test(line.trim()));
+    if (posLine) {
+        return Number(posLine.trim().slice(6, -1));
+    }
+}
+/** Get the line and column number of a position in the code */
+function getSourceLineColumn(lines, position) {
+    if (position < 0) {
+        return [1, 1]; // Position is before the start of the source
+    }
+    let index = 0;
+    for (const [line, content] of lines.entries()) {
+        const length = content.length;
+        if (position < index + length) {
+            return [line + 1, position - index + 1];
         }
-        else {
-            column++;
+        index += content.length;
+    }
+    throw new Error(`Position ${position} is out of bounds for the provided source lines.`);
+}
+/** Returns every combination of file, line and column of an error stack */
+// deno-lint-ignore no-explicit-any
+function* getStackFrames(error) {
+    // Firefox specific
+    const { columnNumber, lineNumber, fileName } = error;
+    if (columnNumber !== undefined && lineNumber !== undefined && fileName) {
+        yield {
+            file: normalizeFile(fileName),
+            line: lineNumber,
+            column: columnNumber,
+        };
+    }
+    const { stack } = error;
+    if (!stack) {
+        return;
+    }
+    const matches = stack.matchAll(/([^(\s,]+):(\d+):(\d+)/g);
+    for (const match of matches) {
+        const [_, file, line, column] = match;
+        // Skip Node, Bun & Deno internal stack frames
+        if (file.startsWith("node:") || file.startsWith("ext:") || file === "native") {
+            continue;
         }
+        yield {
+            file: normalizeFile(file),
+            line: Number(line),
+            column: Number(column),
+        };
     }
-    return `${file}:${line}:${column}`;
+}
+function normalizeFile(file) {
+    if (!file)
+        return "<anonymous>";
+    // Firefox may return "Function" for anonymous functions
+    if (file === "Function")
+        return "<anonymous>";
+    return file;
 }

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,33 +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)};
+    ${source
+            ? `__template.path = ${JSON.stringify(template.path)};
         __template.code = ${JSON.stringify(template.code)};
         __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.1",
+  "version": "2.0.0-canary.3",
   "description": "🌬 A minimal but powerful template engine",
   "type": "module",
   "repository": {

package/plugins/export.js

@@ -1,4 +1,4 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 export default function () {
     return (env) => {
         env.tags.push(exportTag);
@@ -10,7 +10,7 @@ const INLINE_NAMED_EXPORT = /^([a-zA-Z_]\w*)\s*=([^]*)$/;
 const NAMED_EXPORTS = /^{[^]*?}$/;
 const AS = /\s+\bas\b\s+/;
 function exportTag(env, token, _output, tokens) {
-    const [, code] = token;
+    const [, code, position] = token;
     const exportStart = code.match(EXPORT_START);
     if (!exportStart) {
         return;
@@ -58,7 +58,7 @@ function exportTag(env, token, _output, tokens) {
                 compiled.push(`__exports["${rename}"] = ${value};`);
             }
             else {
-                throw new TokenError("Invalid export", token);
+                throw new SourceError("Invalid export", position);
             }
         }
         return compiled.join("\n");

package/plugins/for.js

@@ -1,4 +1,4 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 import iterateTopLevel from "../core/js.js";
 export default function () {
     return (env) => {
@@ -7,7 +7,7 @@ export default function () {
     };
 }
 function forTag(env, token, output, tokens) {
-    const [, code] = token;
+    const [, code, position] = token;
     if (code === "break" || code === "continue") {
         return `${code};`;
     }
@@ -17,7 +17,7 @@ function forTag(env, token, output, tokens) {
     const compiled = [];
     const match = code.match(/^for\s+(await\s+)?([\s\S]*)$/);
     if (!match) {
-        throw new TokenError("Invalid for loop", token);
+        throw new SourceError("Invalid for loop", position);
     }
     let [, aw, tagCode] = match;
     let var1;
@@ -29,7 +29,7 @@ function forTag(env, token, output, tokens) {
     else {
         const parts = tagCode.match(/(^[^\s,]+)([\s|\S]+)$/);
         if (!parts) {
-            throw new TokenError(`Invalid for loop variable: ${tagCode}`, token);
+            throw new SourceError("Invalid for loop", position);
         }
         var1 = parts[1].trim();
         tagCode = parts[2].trim();
@@ -43,7 +43,7 @@ function forTag(env, token, output, tokens) {
         else {
             const parts = tagCode.match(/^([\w]+)\s+of\s+([\s|\S]+)$/);
             if (!parts) {
-                throw new TokenError(`Invalid for loop variable: ${tagCode}`, token);
+                throw new SourceError("Invalid for loop", position);
             }
             var2 = parts[1].trim();
             collection = parts[2].trim();
@@ -52,6 +52,9 @@ function forTag(env, token, output, tokens) {
     else if (tagCode.startsWith("of ")) {
         collection = tagCode.slice(3).trim();
     }
+    else {
+        throw new SourceError("Invalid for loop", position);
+    }
     if (var2) {
         compiled.push(`for ${aw || ""}(let [${var1}, ${var2}] of __env.utils.toIterator(${env.compileFilters(tokens, collection)}, true)) {`);
     }

package/plugins/function.js

@@ -1,17 +1,17 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 export default function () {
     return (env) => {
         env.tags.push(functionTag);
     };
 }
 function functionTag(env, token, _output, tokens) {
-    const [, code] = token;
+    const [, code, position] = token;
     if (!code.match(/^(export\s+)?(async\s+)?function\s/)) {
         return;
     }
-    const match = code.match(/^(export\s+)?(async\s+)?function\s+(\w+)\s*(\([^)]+\))?$/);
+    const match = code.match(/^(export\s+)?(async\s+)?function\s+(\w+)\s*(\([^]*\))?$/);
     if (!match) {
-        throw new TokenError("Invalid function tag", token);
+        throw new SourceError("Invalid function tag", position);
     }
     const [_, exp, as, name, args] = match;
     const compiled = [];

package/plugins/if.js

@@ -1,4 +1,4 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 export default function () {
     return (env) => {
         env.tags.push(ifTag);
@@ -18,13 +18,13 @@ function ifTag(env, [, code], output, tokens) {
     return compiled.join("\n");
 }
 function elseTag(_env, token) {
-    const [, code] = token;
+    const [, code, position] = token;
     if (!code.startsWith("else ") && code !== "else") {
         return;
     }
     const match = code.match(/^else(\s+if\s+(.*))?$/);
     if (!match) {
-        throw new TokenError("Invalid else tag", token);
+        throw new SourceError("Invalid else tag", position);
     }
     const [_, ifTag, condition] = match;
     if (ifTag) {

package/plugins/import.js

@@ -1,4 +1,4 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 export default function () {
     return (env) => {
         env.tags.push(importTag);
@@ -9,13 +9,13 @@ const DEFAULT_IMPORT = /^\b[a-zA-Z_]\w*\b$/i;
 const NAMED_IMPORTS = /^{[^]*?}$/;
 const AS = /\s+\bas\b\s+/;
 function importTag(env, token) {
-    const [, code] = token;
+    const [, code, position] = token;
     if (!code.startsWith("import ")) {
         return;
     }
     const match = code.match(IMPORT_STATEMENT);
     if (!match) {
-        throw new TokenError("Invalid import tag", token);
+        throw new SourceError("Invalid import tag", position);
     }
     const compiled = [];
     const variables = [];
@@ -43,18 +43,18 @@ function importTag(env, token) {
                     return `${name}: ${rename}`;
                 }
                 else {
-                    throw new TokenError("Invalid named import", token);
+                    throw new SourceError("Invalid named import", position);
                 }
             });
             compiled.push(`({${chunks.join(",")}} = __tmp);`);
         }
         else {
-            throw new TokenError("Invalid import tag", token);
+            throw new SourceError("Invalid import tag", position);
         }
     }
     const { dataVarname } = env.options;
     return `let ${variables.join(",")}; {
-    let __tmp = await __env.run(${specifier}, {...${dataVarname}}, __template.path);
+    let __tmp = await __env.run(${specifier}, {...${dataVarname}}, __template.path, ${position});
     ${compiled.join("\n")}
   }`;
 }

package/plugins/include.js

@@ -1,4 +1,4 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 import iterateTopLevel from "../core/js.js";
 export default function () {
     return (env) => {
@@ -6,7 +6,7 @@ export default function () {
     };
 }
 function includeTag(env, token, output, tokens) {
-    const [, code] = token;
+    const [, code, position] = token;
     if (!code.startsWith("include ")) {
         return;
     }
@@ -21,7 +21,7 @@ function includeTag(env, token, output, tokens) {
                 bracketIndex = index;
         }
         if (bracketIndex == -1) {
-            throw new TokenError("Invalid include tag", token);
+            throw new SourceError("Invalid include tag", position);
         }
         file = tagCode.slice(0, bracketIndex).trim();
         data = tagCode.slice(bracketIndex).trim();
@@ -30,7 +30,8 @@ function includeTag(env, token, output, tokens) {
     return `{
     const __tmp = await __env.run(${file},
       {...${dataVarname}${data ? `, ...${data}` : ""}},
-      __template.path
+      __template.path,
+      ${position}
     );
     ${output} += ${env.compileFilters(tokens, "__tmp.content")};
   }`;

package/plugins/layout.js

@@ -1,34 +1,50 @@
-import { TokenError } from "../core/errors.js";
+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] = token;
+    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 TokenError("Invalid layout tag", token);
+        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} = ${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
-    );
-    ${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/plugins/set.js

@@ -1,11 +1,11 @@
-import { TokenError } from "../core/errors.js";
+import { SourceError } from "../core/errors.js";
 export default function () {
     return (env) => {
         env.tags.push(setTag);
     };
 }
 function setTag(env, token, _output, tokens) {
-    const [, code] = token;
+    const [, code, position] = token;
     if (!code.startsWith("set ")) {
         return;
     }
@@ -15,7 +15,7 @@ function setTag(env, token, _output, tokens) {
     if (expression.includes("=")) {
         const match = code.match(/^set\s+([\w]+)\s*=\s*([\s\S]+)$/);
         if (!match) {
-            throw new TokenError("Invalid set tag", token);
+            throw new SourceError("Invalid set tag", position);
         }
         const [, variable, value] = match;
         const val = env.compileFilters(tokens, value);

package/types/core/environment.d.ts

@@ -8,7 +8,6 @@ export interface TemplateContext {
     code: string;
     path?: string;
     defaults?: Record<string, unknown>;
-    tokens?: Token[];
 }
 export interface Template extends TemplateContext {
     (data?: Record<string, unknown>): Promise<TemplateResult>;
@@ -45,11 +44,11 @@ export declare class Environment {
     utils: Record<string, unknown>;
     constructor(options: Options);
     use(plugin: Plugin): void;
-    run(file: string, data?: Record<string, unknown>, from?: string): Promise<TemplateResult>;
+    run(file: string, data?: Record<string, unknown>, from?: string, position?: number): Promise<TemplateResult>;
     runString(source: string, data?: Record<string, unknown>, file?: string): Promise<TemplateResult>;
     compile(source: string, path?: string, defaults?: Record<string, unknown>): Template;
     tokenize(source: string, path?: string): Token[];
-    load(file: string, from?: string): Promise<Template>;
+    load(file: string, from?: string, position?: number): Promise<Template>;
     compileTokens(tokens: Token[], outputVar?: string, closeToken?: string): string[];
     compileFilters(tokens: Token[], output: string, autoescape?: boolean): string;
 }

package/types/core/errors.d.ts

@@ -1,38 +1,46 @@
-import type { Token } from "./tokenizer.d.ts";
 import type { TemplateContext } from "./environment.d.ts";
 export interface ErrorContext {
     type: string;
     message: string;
-    source: string;
-    position: number;
+    source?: string;
+    position?: number;
+    code?: string;
+    line?: number;
+    column?: number;
     file?: string;
 }
 export declare abstract class VentoError extends Error {
-    abstract getContext(): ErrorContext | undefined | Promise<ErrorContext | undefined>;
+    abstract getContext(): ErrorContext | Promise<ErrorContext>;
 }
-export declare class TokenError extends VentoError {
-    token: Token | number;
-    source?: string;
+export declare class SourceError extends VentoError {
+    position?: number;
     file?: string;
-    constructor(message: string, token: Token | number, source?: string, file?: string);
+    source?: string;
+    constructor(message: string, position?: number, file?: string, source?: string);
     getContext(): {
         type: string;
         message: string;
-        source: string;
         position: number;
         file: string;
+        source: string;
     };
 }
 export declare class RuntimeError extends VentoError {
-    context: TemplateContext;
-    constructor(error: Error, context: TemplateContext);
-    getContext(): ErrorContext | Promise<ErrorContext>;
+    #private;
+    position?: number;
+    constructor(error: Error, context: TemplateContext, position?: number);
+    getContext(): Promise<ErrorContext>;
 }
-export declare function createError(error: Error, context: TemplateContext): Error;
-export declare function printError(error: unknown): Promise<void>;
+/** Create or complete VentoError with extra info from the template */
+export declare function createError(error: Error, context: TemplateContext, position?: number): VentoError;
 export interface ErrorFormat {
     number: (n: string) => string;
     dim: (line: string) => string;
     error: (msg: string) => string;
 }
-export declare function stringifyContext(context: ErrorContext, format?: ErrorFormat): string;
+declare const formats: Record<string, ErrorFormat>;
+/** Prints an error to the console in a formatted way. */
+export declare function printError(error: unknown, format?: ErrorFormat | keyof typeof formats): Promise<void>;
+/** Converts an error context into a formatted string representation. */
+export declare function stringifyError(context: ErrorContext, format?: ErrorFormat): string;
+export {};

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;