@chilts/weave 0.7.0 → 0.8.0

package/dist/parser/index.js

@@ -59,6 +59,11 @@ class Parser {
     loc(tok) {
         return { line: tok.line, col: tok.col };
     }
+    // A captured value starts where its token does, unless the lexer recorded
+    // its lines (a params group, whose token is anchored on the '(').
+    valueLoc(tok) {
+        return tok.starts ?? [this.loc(tok)];
+    }
     // --- Core parsing ---
     parseDocument() {
         const startTok = this.peek();
@@ -94,6 +99,7 @@ class Parser {
             case 'INTERPOLATION':
                 return this.parseText();
             case 'IF':
+            case 'UNLESS':
                 return this.parseConditional();
             case 'FOR':
                 return this.parseIteration();
@@ -107,11 +113,13 @@ class Parser {
                 return this.parseExtends();
             case 'INCLUDE':
                 return this.parseInclude();
-            // Standalone else if / else are errors — they must follow an if
+            // Standalone else if / else are errors — they must follow an if (or a for)
             case 'ELSE_IF':
             case 'ELSE': {
                 const tok = this.peek();
-                throw new ParserError(`Unexpected ${tok.value || type} without preceding if`, tok.line, tok.col);
+                throw new ParserError(type === 'ELSE'
+                    ? 'Unexpected else without preceding if or for'
+                    : 'Unexpected else if without preceding if', tok.line, tok.col);
             }
             default: {
                 const tok = this.peek();
@@ -158,10 +166,15 @@ class Parser {
     }
     // --- Control flow parsers ---
     parseConditional() {
-        const startTok = this.expect('IF');
+        const startTok = this.advance(); // IF or UNLESS
         const conditionTok = this.expect('BUFFERED_CODE');
         this.skip('NEWLINE');
         const consequent = this.parseBlock();
+        // 'unless' is a guard only: an else after it reads as a double negative.
+        if (startTok.type === 'UNLESS' && (this.peekType() === 'ELSE' || this.peekType() === 'ELSE_IF')) {
+            const tok = this.peek();
+            throw new ParserError(`Unexpected ${tok.value} after unless — 'unless' takes no else; write 'if' with the branches swapped`, tok.line, tok.col);
+        }
         const alternates = [];
         while (this.peekType() === 'ELSE_IF') {
             this.advance(); // consume ELSE_IF
@@ -169,6 +182,7 @@ class Parser {
             this.skip('NEWLINE');
             alternates.push({
                 condition: altCondTok.value,
+                conditionLoc: this.valueLoc(altCondTok),
                 body: this.parseBlock(),
             });
         }
@@ -181,6 +195,8 @@ class Parser {
         return {
             type: 'Conditional',
             condition: conditionTok.value,
+            conditionLoc: this.valueLoc(conditionTok),
+            ...(startTok.type === 'UNLESS' && { negated: true }),
             consequent,
             alternates,
             fallback,
@@ -192,10 +208,22 @@ class Parser {
         const paramsTok = this.expect('PARAMS');
         this.skip('NEWLINE');
         const body = this.parseBlock();
+        if (this.peekType() === 'ELSE_IF') {
+            const tok = this.peek();
+            throw new ParserError('Unexpected else if after for — only a plain else (rendered when the collection is empty) may follow a for', tok.line, tok.col);
+        }
+        let fallback = null;
+        if (this.peekType() === 'ELSE') {
+            this.advance(); // consume ELSE
+            this.skip('NEWLINE');
+            fallback = this.parseBlock();
+        }
         return {
             type: 'Iteration',
             params: paramsTok.value,
+            paramsLoc: this.valueLoc(paramsTok),
             body,
+            fallback,
             loc: this.loc(startTok),
         };
     }
@@ -210,6 +238,7 @@ class Parser {
             type: 'Template',
             name: nameTok.value,
             params: paramsTok.value,
+            paramsLoc: this.valueLoc(paramsTok),
             body,
             loc: this.loc(startTok),
         };
@@ -225,6 +254,7 @@ class Parser {
             type: 'MixinDefinition',
             name: nameTok.value,
             params: paramsTok.value,
+            paramsLoc: this.valueLoc(paramsTok),
             body,
             loc: this.loc(startTok),
         };
@@ -232,8 +262,11 @@ class Parser {
     parseMixinCall() {
         const startTok = this.expect('MIXIN_CALL');
         let args = '';
+        let argsLoc;
         if (this.peekType() === 'PARAMS') {
-            args = this.advance().value;
+            const argsTok = this.advance();
+            args = argsTok.value;
+            argsLoc = this.valueLoc(argsTok);
         }
         const attrs = [];
         if (this.peekType() === 'ATTR_START') {
@@ -241,12 +274,38 @@ class Parser {
             attrs.push(...this.parseAttributes());
             this.expect('ATTR_END');
         }
+        // One line of call-site content on the call's own line, as for an
+        // element: '+btn("x") Save' or '+btn("x")= label'.
+        let inline = null;
+        if (this.peekType() === 'BUFFERED_CODE') {
+            const codeTok = this.advance();
+            inline = {
+                type: 'BufferedCode',
+                expression: codeTok.value,
+                expressionLoc: this.valueLoc(codeTok),
+                loc: this.loc(codeTok),
+            };
+        }
+        else if (this.peekType() === 'TEXT' || this.peekType() === 'INTERPOLATION') {
+            inline = this.parseTextSegments();
+        }
         this.skip('NEWLINE');
-        const block = this.parseBlock();
+        // The content is a single callback, so it comes from one place or the
+        // other. An element can mix the two because its children are a list.
+        let block = this.parseBlock();
+        if (inline !== null) {
+            const content = block.find(n => n.type !== 'Comment' && n.type !== 'PassthroughComment');
+            if (content) {
+                throw new ParserError(`Mixin call '+${startTok.value}' has inline content, so it can't also have indented content; ` +
+                    'move the inline content onto its own indented line', content.loc.line, content.loc.col);
+            }
+            block = [inline, ...block];
+        }
         return {
             type: 'MixinCall',
             name: startTok.value,
             args,
+            ...(argsLoc ? { argsLoc } : {}),
             attrs,
             block,
             loc: this.loc(startTok),
@@ -286,6 +345,7 @@ class Parser {
             type: 'Extends',
             target: targetTok.value,
             args: argsTok.value,
+            argsLoc: this.valueLoc(argsTok),
             blocks,
             loc: this.loc(startTok),
         };
@@ -324,6 +384,7 @@ class Parser {
             children.push({
                 type: 'BufferedCode',
                 expression: codeTok.value,
+                expressionLoc: this.valueLoc(codeTok),
                 loc: this.loc(codeTok),
             });
         }
@@ -392,8 +453,8 @@ class Parser {
                     }
                     throw new ParserError(`Attribute '${name}' has no value.` + hint, nameTok.line, nameTok.col);
                 }
-                const value = this.advance().value;
-                attrs.push({ name: nameTok.value, value, spread: false });
+                const valueTok = this.advance();
+                attrs.push({ name: nameTok.value, value: valueTok.value, valueLoc: this.valueLoc(valueTok), spread: false });
             }
             else {
                 const tok = this.peek();
@@ -412,11 +473,15 @@ class Parser {
                 segments.push({ type: 'text', value: tok.value });
             }
             else {
-                segments.push({ type: 'interpolation', expression: tok.value });
+                segments.push({ type: 'interpolation', expression: tok.value, loc: this.interpolationLoc(tok) });
             }
         }
         return { type: 'Text', segments, loc: this.loc(startTok) };
     }
+    // An INTERPOLATION token is anchored on its '#{'.
+    interpolationLoc(tok) {
+        return { line: tok.line, col: tok.col + 2 };
+    }
     parsePipe() {
         const startTok = this.expect('PIPE');
         const segments = [];
@@ -426,7 +491,7 @@ class Parser {
                 segments.push({ type: 'text', value: tok.value });
             }
             else {
-                segments.push({ type: 'interpolation', expression: tok.value });
+                segments.push({ type: 'interpolation', expression: tok.value, loc: this.interpolationLoc(tok) });
             }
         }
         this.skip('NEWLINE');

package/dist/parser/types.d.ts

@@ -2,20 +2,24 @@ export interface SourceLocation {
     line: number;
     col: number;
 }
+export type ValueLoc = SourceLocation[];
 export type TextSegment = {
     type: 'text';
     value: string;
 } | {
     type: 'interpolation';
     expression: string;
+    loc?: SourceLocation;
 };
 export interface AttributeNode {
     name: string;
     value: string | null;
+    valueLoc?: ValueLoc;
     spread: boolean;
 }
 export interface ConditionalBranch {
     condition: string;
+    conditionLoc?: ValueLoc;
     body: AstNode[];
 }
 export interface DocumentNode {
@@ -27,6 +31,7 @@ export interface TemplateNode {
     type: 'Template';
     name: string;
     params: string;
+    paramsLoc?: ValueLoc;
     body: AstNode[];
     loc: SourceLocation;
 }
@@ -34,6 +39,7 @@ export interface MixinDefinitionNode {
     type: 'MixinDefinition';
     name: string;
     params: string;
+    paramsLoc?: ValueLoc;
     body: AstNode[];
     loc: SourceLocation;
 }
@@ -41,6 +47,7 @@ export interface MixinCallNode {
     type: 'MixinCall';
     name: string;
     args: string;
+    argsLoc?: ValueLoc;
     attrs: AttributeNode[];
     block: AstNode[];
     loc: SourceLocation;
@@ -64,11 +71,14 @@ export interface TextNode {
 export interface BufferedCodeNode {
     type: 'BufferedCode';
     expression: string;
+    expressionLoc?: ValueLoc;
     loc: SourceLocation;
 }
 export interface ConditionalNode {
     type: 'Conditional';
     condition: string;
+    conditionLoc?: ValueLoc;
+    negated?: boolean;
     consequent: AstNode[];
     alternates: ConditionalBranch[];
     fallback: AstNode[] | null;
@@ -77,7 +87,9 @@ export interface ConditionalNode {
 export interface IterationNode {
     type: 'Iteration';
     params: string;
+    paramsLoc?: ValueLoc;
     body: AstNode[];
+    fallback: AstNode[] | null;
     loc: SourceLocation;
 }
 export interface BlockNode {
@@ -90,6 +102,7 @@ export interface ExtendsNode {
     type: 'Extends';
     target: string;
     args: string;
+    argsLoc?: ValueLoc;
     blocks: BlockNode[];
     loc: SourceLocation;
 }

package/dist/runtime/index.d.ts

@@ -1,4 +1,27 @@
-export type Attrs = Record<string, string | number | boolean | undefined>;
+export type AttrValue = string | number | boolean | null | undefined;
+/**
+ * A `class=` value: a string, an array of class values (nested, falsy entries
+ * dropped), or an object whose keys are kept when their value is truthy —
+ * `class=['btn', { active: isActive }]`.
+ */
+export type ClassValue = AttrValue | readonly ClassValue[] | {
+    readonly [name: string]: unknown;
+};
+/**
+ * A `style=` value: a string, or an object of properties whose `null`,
+ * `undefined`, `false` and `""` values are dropped. camelCase keys become
+ * kebab-case (`backgroundColor` → `background-color`); `--custom` properties
+ * are kept as written.
+ */
+export type StyleValue = string | null | undefined | false | StyleObject;
+type StyleObject = {
+    readonly [property: string]: string | number | null | undefined | false;
+};
+export type Attrs = {
+    class?: ClassValue;
+    style?: StyleValue;
+    [name: string]: AttrValue | ClassValue | StyleValue;
+};
 export declare const Fragment: unique symbol;
 declare const RAW: unique symbol;
 export declare class SafeHtml {
@@ -13,9 +36,24 @@ export declare function raw(html: string): SafeHtml;
  * Merge shorthand classes (`.btn`) with an explicit `class=` value that is only
  * known at render time. A value that means "absent" — undefined, null, a
  * boolean, or "" — adds nothing, so the shorthand classes always survive.
+ * Arrays and objects are flattened as for `class=` itself.
  */
-export declare function mergeClass(prefix: string, value: string | number | boolean | null | undefined): string;
+export declare function mergeClass(prefix: string, value: ClassValue): string;
 export declare function doctype(): SafeHtml;
+/**
+ * Tag for text with `#{}` interpolations, which compiles to
+ * interpolate`Hi ${name}!`. A plain template literal would stringify each
+ * value before the runtime saw it, so `raw()` and mixin output were escaped
+ * and `undefined` printed as "undefined". Each value renders exactly as an
+ * element child does instead, and the literal text is escaped.
+ */
+export declare function interpolate(strings: TemplateStringsArray, ...values: unknown[]): SafeHtml;
+/**
+ * Render `fn` for each item of any iterable — an array, Set, Map, generator or
+ * iterator — or `otherwise()` when it yields nothing. This is what `for` and
+ * `for ... else` compile to. The iterable is consumed exactly once.
+ */
+export declare function each<T>(items: Iterable<T>, fn: (item: T) => unknown, otherwise?: () => unknown): SafeHtml;
 export declare function h(tag: string | symbol, attrs: Attrs, ...children: unknown[]): SafeHtml;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/runtime/index.js

@@ -28,15 +28,40 @@ export function escape(val) {
 export function raw(html) {
     return new SafeHtml(html);
 }
+/**
+ * Flatten a class value to a space-separated list. A value that means
+ * "absent" — undefined, null, a boolean, or "" — yields "".
+ */
+function classList(value) {
+    if (value == null || typeof value === 'boolean')
+        return '';
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number')
+        return String(value);
+    if (Array.isArray(value))
+        return value.map(classList).filter(c => c !== '').join(' ');
+    return Object.keys(value).filter(name => value[name]).join(' ');
+}
+function styleString(value) {
+    const decls = [];
+    for (const [prop, val] of Object.entries(value)) {
+        if (val == null || val === false || val === '')
+            continue;
+        const name = prop.startsWith('--') ? prop : prop.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`);
+        decls.push(`${name}:${val}`);
+    }
+    return decls.join(';');
+}
 /**
  * Merge shorthand classes (`.btn`) with an explicit `class=` value that is only
  * known at render time. A value that means "absent" — undefined, null, a
  * boolean, or "" — adds nothing, so the shorthand classes always survive.
+ * Arrays and objects are flattened as for `class=` itself.
  */
 export function mergeClass(prefix, value) {
-    if (value == null || typeof value === 'boolean' || value === '')
-        return prefix;
-    return `${prefix} ${value}`;
+    const classes = classList(value);
+    return classes === '' ? prefix : `${prefix} ${classes}`;
 }
 export function doctype() {
     return new SafeHtml('<!DOCTYPE html>');
@@ -64,9 +89,39 @@ function renderChildren(children) {
     }
     return out;
 }
+/**
+ * Tag for text with `#{}` interpolations, which compiles to
+ * interpolate`Hi ${name}!`. A plain template literal would stringify each
+ * value before the runtime saw it, so `raw()` and mixin output were escaped
+ * and `undefined` printed as "undefined". Each value renders exactly as an
+ * element child does instead, and the literal text is escaped.
+ */
+export function interpolate(strings, ...values) {
+    let out = escape(strings[0]);
+    for (let i = 0; i < values.length; i++) {
+        out += renderChildren([values[i]]) + escape(strings[i + 1]);
+    }
+    return new SafeHtml(out);
+}
+/**
+ * Render `fn` for each item of any iterable — an array, Set, Map, generator or
+ * iterator — or `otherwise()` when it yields nothing. This is what `for` and
+ * `for ... else` compile to. The iterable is consumed exactly once.
+ */
+export function each(items, fn, otherwise) {
+    const rendered = Array.from(items, item => fn(item));
+    if (rendered.length === 0 && otherwise)
+        return new SafeHtml(renderChildren([otherwise()]));
+    return new SafeHtml(renderChildren(rendered));
+}
 function renderAttrs(attrs) {
     let out = '';
-    for (const [key, val] of Object.entries(attrs)) {
+    for (let [key, val] of Object.entries(attrs)) {
+        if (val !== null && typeof val === 'object' && (key === 'class' || key === 'style')) {
+            val = key === 'class' ? classList(val) : styleString(val);
+            if (val === '')
+                continue;
+        }
         if (val == null || val === false)
             continue;
         if (val === true) {

package/package.json

@@ -2,7 +2,7 @@
     "name": "@chilts/weave",
     "title": "Weave",
     "description": "A Pug-inspired templating engine that compiles to TypeScript.",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "type": "module",
     "main": "./dist/index.js",
     "bin": {
@@ -27,17 +27,31 @@
     },
     "scripts": {
         "build": "tsc",
-        "test": "vitest run",
+        "test": "npm run lint && npm run typecheck && vitest run",
         "test:watch": "vitest",
-        "lint": "tsc --noEmit",
+        "lint": "eslint .",
+        "typecheck": "tsc -p tsconfig.test.json",
         "prepublishOnly": "npm run build"
     },
     "engines": {
         "node": ">=20"
     },
+    "peerDependencies": {
+        "typescript": ">=5"
+    },
+    "peerDependenciesMeta": {
+        "typescript": {
+            "optional": true
+        }
+    },
     "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "@stylistic/eslint-plugin": "^5.10.0",
         "@types/node": "^22.0.0",
+        "eslint": "^10.13.0",
+        "globals": "^17.13.0",
         "typescript": "^5.9.3",
+        "typescript-eslint": "^8.72.0",
         "vitest": "^4.0.0"
     },
     "homepage": "https://weave.chilts.org",