@fluixi/compiler 1.0.0-alpha.82 → 1.0.0-alpha.84

package/dist/lower/template.d.cts

@@ -0,0 +1,53 @@
+/**
+ * Lower a parsed Template AST (`@fluixi/template-parser`) into the host-agnostic IR.
+ *
+ * No parser in here: the `${…}` holes arrive already described as `TemplateHole`,
+ * since reading them means reading JavaScript and that belongs to a front-end.
+ *
+ * Pipeline:  pieces → parseTemplate → Template AST → lowerTemplate → IRNode
+ */
+import { type Piece } from '@fluixi/template-parser';
+import type { HolePosition, IRNode } from '../ir/nodes.cjs';
+/**
+ * One `${…}` slot, as the front-end describes it. Conclusions about the
+ * expression only — never a syntax tree, or the parser dependency creeps back.
+ */
+export interface TemplateHole {
+    /** The expression source, verbatim. Anything nested inside it is already compiled. */
+    code: string;
+    /** Whether it must be wired reactively (see analyze/reactive-expr.ts). */
+    reactive: boolean;
+    /**
+     * Set when the hole is a single-expression arrow — `${item => …}`. `each` turns
+     * that into `For`'s render function, so it needs the parameters and the body
+     * separately rather than the arrow as written.
+     */
+    arrow?: {
+        params: string[];
+        body: string;
+        bodyReactive: boolean;
+    };
+    /** Whether the hole is an object literal — `class=${{…}}` lowers to classList. */
+    object?: boolean;
+    /**
+     * Where the `${…}` was written. Only kept when the host asked for source locations.
+     *
+     * A template is emitted as one overwrite, so every hole in it traces back through the
+     * source map to the line the template opens at. Without this, every node a template makes
+     * reports that one position.
+     */
+    at?: HolePosition;
+}
+/**
+ * Lower a parsed template to IR. `pieces` are the static runs and hole slots as
+ * the parser wants them; `holes` describes each `${…}` in the same order. `used`
+ * collects the runtime symbols the emitted code imports.
+ */
+export declare function lowerTemplate(pieces: Piece[], holes: TemplateHole[], used: Set<string>, opts?: {
+    svg?: boolean;
+    sourceFile?: string;
+    positionAt?: (offset: number) => {
+        line: number;
+        column: number;
+    };
+}): IRNode;

package/dist/lower/template.d.ts

@@ -7,7 +7,7 @@
  * Pipeline:  pieces → parseTemplate → Template AST → lowerTemplate → IRNode
  */
 import { type Piece } from '@fluixi/template-parser';
-import type { IRNode } from '../ir/nodes.js';
+import type { HolePosition, IRNode } from '../ir/nodes.js';
 /**
  * One `${…}` slot, as the front-end describes it. Conclusions about the
  * expression only — never a syntax tree, or the parser dependency creeps back.
@@ -29,6 +29,14 @@ export interface TemplateHole {
     };
     /** Whether the hole is an object literal — `class=${{…}}` lowers to classList. */
     object?: boolean;
+    /**
+     * Where the `${…}` was written. Only kept when the host asked for source locations.
+     *
+     * A template is emitted as one overwrite, so every hole in it traces back through the
+     * source map to the line the template opens at. Without this, every node a template makes
+     * reports that one position.
+     */
+    at?: HolePosition;
 }
 /**
  * Lower a parsed template to IR. `pieces` are the static runs and hole slots as
@@ -37,5 +45,10 @@ export interface TemplateHole {
  */
 export declare function lowerTemplate(pieces: Piece[], holes: TemplateHole[], used: Set<string>, opts?: {
     svg?: boolean;
+    sourceFile?: string;
+    positionAt?: (offset: number) => {
+        line: number;
+        column: number;
+    };
 }): IRNode;
 //# sourceMappingURL=template.d.ts.map

package/dist/lower/template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/lower/template.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAML,KAAK,KAAK,EAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAKjE;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAClE,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA4bD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,KAAK,EAAE,EACf,KAAK,EAAE,YAAY,EAAE,EACrB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EACjB,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAA;CAAO,GAC3B,MAAM,CAGR"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/lower/template.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAML,KAAK,KAAK,EAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAM/E;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sFAAsF;IACtF,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,OAAO,CAAA;KAAE,CAAC;IAClE,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB;AAmhBD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,KAAK,EAAE,EACf,KAAK,EAAE,YAAY,EAAE,EACrB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,EACjB,IAAI,GAAE;IAAE,GAAG,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAAO,GACnH,MAAM,CAGR"}

package/dist/lower/template.js

@@ -10,6 +10,7 @@ import { parseTemplate, } from '@fluixi/template-parser';
 import { parseLoadDirective } from '../resolve/load-directive.js';
 import { imperativeBackend, inlineTemplates } from '../codegen/backends/imperative.js';
 import { cleanTemplateText } from './text.js';
+import { paren } from '../analyze/paren.js';
 const DELEGATED = new Set([
     'click', 'dblclick', 'input', 'change', 'submit', 'focus', 'blur',
     'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup',
@@ -24,9 +25,27 @@ function capitalize(s) {
 class Lowerer {
     holes;
     used;
-    constructor(holes, used) {
+    sourceFile;
+    positionAt;
+    constructor(holes, used, sourceFile, positionAt) {
         this.holes = holes;
         this.used = used;
+        this.sourceFile = sourceFile;
+        this.positionAt = positionAt;
+    }
+    /**
+     * Where a tag is written, for the mark a component node carries.
+     *
+     * The parser reports offsets, and they are offsets into the file: the pieces it was given
+     * carry the positions the front-end recorded. Only built when the host asked for source
+     * locations, which is the only time either of these is set.
+     */
+    tagAt(node) {
+        const start = node.loc?.start;
+        if (!this.sourceFile || !this.positionAt || start == null)
+            return undefined;
+        const { line, column } = this.positionAt(start);
+        return { file: this.sourceFile, line, column };
     }
     hole(i) {
         // -1 marks a recovered-from missing binding; emit a harmless undefined.
@@ -95,7 +114,7 @@ class Lowerer {
                 return null; // dropped, like JSX comments
             case 'Expression': {
                 const h = this.hole(node.hole);
-                return { kind: 'expr', code: h.code, reactive: h.reactive };
+                return { kind: 'expr', code: h.code, reactive: h.reactive, ...(h.at ? { at: h.at } : {}) };
             }
             case 'Fragment':
                 return { kind: 'fragment', children: this.lowerChildren(node.children) };
@@ -115,9 +134,10 @@ class Lowerer {
         if (el.tag === 'component' && isAttr && isAttr.value && isAttr.value.kind === 'hole') {
             const rest = el.attributes.filter((a) => a !== isAttr);
             const node = this.lowerComponent({ ...el, kind: 'Component', tag: 'Dynamic', tagHole: null, attributes: rest });
-            node.props.unshift({ name: 'component', kind: 'attr', expr: `() => (${this.hole(isAttr.value.hole).code})` });
+            node.props.unshift({ name: 'component', kind: 'attr', expr: `() => ${paren(this.hole(isAttr.value.hole).code, 'arrowBody')}` });
             return node;
         }
+        const at = this.tagAt(el);
         return {
             kind: 'element',
             tag: el.tag,
@@ -125,6 +145,7 @@ class Lowerer {
             props: this.lowerAttributes(el.attributes),
             children: this.lowerChildren(el.children),
             static: false,
+            ...(at ? { at } : {}),
         };
     }
     lowerComponent(el) {
@@ -160,11 +181,20 @@ class Lowerer {
         const load = loadAttr
             ? parseLoadDirective(`load:${loadAttr.strategy}`, loadAttr.modifier)
             : undefined;
+        // The parser's positions are relative to the template string, not the file, so the
+        // tag itself has none to give. The first hole is the closest thing that does, and for
+        // the control-flow components — `<Show when=${…}>`, `<For each=${…}>` — it is the
+        // expression driving the subtree anyway.
+        // A reactive one: a literal carries a position too now, and it drives nothing.
+        const bindAt = props.find((p) => p.at && p.reactive)?.at;
+        const at = this.tagAt(el);
         return {
             kind: 'component',
             name,
             props,
             children: this.lowerChildren(rest),
+            ...(at ? { at } : {}),
+            ...(bindAt ? { bindAt } : {}),
             ...(load ? { load } : {}),
         };
     }
@@ -193,14 +223,15 @@ class Lowerer {
     lowerIf(el, condHole, elseEl) {
         const cond = this.hole(condHole);
         const props = [
-            { name: 'when', kind: 'attr', expr: cond.code, reactive: cond.reactive },
+            { name: 'when', kind: 'attr', expr: cond.code, reactive: cond.reactive, ...(cond.at ? { at: cond.at } : {}) },
         ];
         if (elseEl) {
             const elseIR = this.stripAndLower(elseEl, (a) => a.kind === 'ElseDirective');
             props.push({ name: 'fallback', kind: 'attr', expr: this.emit(elseIR), jsxElement: true });
         }
         const child = this.stripAndLower(el, (a) => a.kind === 'IfDirective');
-        return { kind: 'component', name: 'Show', props, children: [child] };
+        const at = this.tagAt(el);
+        return { kind: 'component', name: 'Show', props, children: [child], ...(at ? { at } : {}), ...(cond.at ? { bindAt: cond.at } : {}) };
     }
     /** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
     lowerEach(el) {
@@ -208,7 +239,7 @@ class Lowerer {
         if (!eachDir || eachDir.kind !== 'EachDirective')
             return this.lowerNode(el);
         const each = this.hole(eachDir.hole);
-        const props = [{ name: 'each', kind: 'attr', expr: each.code, reactive: each.reactive }];
+        const props = [{ name: 'each', kind: 'attr', expr: each.code, reactive: each.reactive, ...(each.at ? { at: each.at } : {}) }];
         if (eachDir.key) {
             // `<For by>` wants a KEY FUNCTION, not a string. `key="id"` selects the
             // `id` field: `(item) => item["id"]`; `key=${fn}` passes the function.
@@ -223,14 +254,15 @@ class Lowerer {
         if (arrow) {
             const bodyIR = { kind: 'expr', code: arrow.body, reactive: arrow.bodyReactive };
             const repeated = this.rebuildWithChildren(el, [bodyIR]);
-            childrenCode = `(${arrow.params.join(', ')}) => (${this.emit(repeated)})`;
+            childrenCode = `(${arrow.params.join(', ')}) => ${paren(this.emit(repeated), 'arrowBody')}`;
         }
         else {
             const repeated = this.stripAndLower(el, (a) => a.kind === 'EachDirective');
-            childrenCode = `() => (${this.emit(repeated)})`;
+            childrenCode = `() => ${paren(this.emit(repeated), 'arrowBody')}`;
         }
         const children = [{ kind: 'expr', code: childrenCode, reactive: false }];
-        return { kind: 'component', name: 'For', props, children };
+        const at = this.tagAt(el);
+        return { kind: 'component', name: 'For', props, children, ...(at ? { at } : {}), ...(each.at ? { bindAt: each.at } : {}) };
     }
     /** The single `${item => expr}` child arrow, if that's the element's content. */
     itemArrow(el) {
@@ -248,7 +280,16 @@ class Lowerer {
     rebuildWithChildren(el, children) {
         const props = this.lowerAttributes(el.attributes.filter((a) => a.kind !== 'EachDirective'));
         if (el.kind === 'Element') {
-            return { kind: 'element', tag: el.tag, svg: el.namespace === 'svg', props, children, static: false };
+            const at = this.tagAt(el);
+            return {
+                kind: 'element',
+                tag: el.tag,
+                svg: el.namespace === 'svg',
+                props,
+                children,
+                static: false,
+                ...(at ? { at } : {}),
+            };
         }
         return { kind: 'component', name: el.tag, props, children };
     }
@@ -257,8 +298,10 @@ class Lowerer {
         const props = [];
         const classEntries = [];
         let classReactive = false;
+        let classAt;
         const styleEntries = [];
         let styleReactive = false;
+        let styleAt;
         const usePairs = [];
         for (const a of attrs) {
             switch (a.kind) {
@@ -270,13 +313,26 @@ class Lowerer {
                     props.push(this.plainAttr(a));
                     break;
                 case 'PropertyBinding':
-                    props.push({ name: a.name, kind: 'prop', expr: this.hole(a.hole).code, reactive: this.hole(a.hole).reactive });
+                    props.push({
+                        name: a.name,
+                        kind: 'prop',
+                        expr: this.hole(a.hole).code,
+                        reactive: this.hole(a.hole).reactive,
+                        ...(this.hole(a.hole).at ? { at: this.hole(a.hole).at } : {}),
+                    });
                     break;
                 case 'EventBinding':
                     props.push(this.eventProp(a));
                     break;
                 case 'RefBinding':
-                    props.push({ name: 'ref', kind: 'ref', expr: this.hole(a.hole).code, reactive: this.hole(a.hole).reactive });
+                    props.push({
+                        name: 'ref',
+                        kind: 'ref',
+                        expr: this.hole(a.hole).code,
+                        reactive: this.hole(a.hole).reactive,
+                        // Which variable ends up holding the element, and where it was written.
+                        ...(this.hole(a.hole).at ? { at: this.hole(a.hole).at } : {}),
+                    });
                     break;
                 case 'Spread':
                     props.push({ name: '', kind: 'spread', expr: this.hole(a.hole).code });
@@ -285,16 +341,18 @@ class Lowerer {
                     const h = this.hole(a.hole);
                     classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
                     classReactive = classReactive || h.reactive;
+                    classAt ??= h.at;
                     break;
                 }
                 case 'StyleDirective': {
                     const h = this.hole(a.hole);
                     styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
                     styleReactive = styleReactive || h.reactive;
+                    styleAt ??= h.at;
                     break;
                 }
                 case 'BindDirective':
-                    props.push(...this.bindProps(a.name, this.hole(a.hole).code));
+                    props.push(...this.bindProps(a.name, this.hole(a.hole)));
                     break;
                 case 'UseDirective': {
                     // `use=${dir}` → [dir]; `use:name` → [name]; `use:name=${opts}` →
@@ -303,18 +361,33 @@ class Lowerer {
                     if (!dir)
                         break;
                     // parens so an object literal opts isn't read as a block body
-                    usePairs.push(a.name != null && a.hole != null ? `[${dir}, () => (${this.hole(a.hole).code})]` : `[${dir}]`);
+                    usePairs.push(a.name != null && a.hole != null ? `[${dir}, () => ${paren(this.hole(a.hole).code, 'arrowBody')}]` : `[${dir}]`);
                     break;
                 }
             }
         }
         // Merge all class:/style: directives into one classList/style prop so they
         // don't collide as duplicate keys in the emitted props object.
+        // One prop covers every directive of its kind, so it carries the first hole's
+        // position — a real source line beats the stack fallback, which lands in the
+        // compiled file.
         if (classEntries.length > 0) {
-            props.push({ name: 'classList', kind: 'attr', expr: `{ ${classEntries.join(', ')} }`, reactive: classReactive });
+            props.push({
+                name: 'classList',
+                kind: 'attr',
+                expr: `{ ${classEntries.join(', ')} }`,
+                reactive: classReactive,
+                ...(classAt ? { at: classAt } : {}),
+            });
         }
         if (styleEntries.length > 0) {
-            props.push({ name: 'style', kind: 'attr', expr: `{ ${styleEntries.join(', ')} }`, reactive: styleReactive });
+            props.push({
+                name: 'style',
+                kind: 'attr',
+                expr: `{ ${styleEntries.join(', ')} }`,
+                reactive: styleReactive,
+                ...(styleAt ? { at: styleAt } : {}),
+            });
         }
         // All use: directives normalize to one `use` prop = an array of [dir, accessor?] pairs.
         if (usePairs.length > 0) {
@@ -369,7 +442,8 @@ class Lowerer {
         return opts.length ? `{ ${opts.join(', ')} }` : null;
     }
     /** `bind:value=${sig}` → `value={read()}` + `onInput={e => write(e…value)}`. */
-    bindProps(prop, sigCode) {
+    bindProps(prop, h) {
+        const sigCode = h.code;
         const checked = prop === 'checked';
         const evt = checked ? 'change' : 'input';
         const accessor = checked ? 'checked' : 'value';
@@ -380,7 +454,14 @@ class Lowerer {
         this.used.add('bindPair');
         const sig = `bindPair(${sigCode})`;
         return [
-            { name: prop, kind: 'attr', expr: `${sig}[0]()`, reactive: true },
+            {
+                name: prop,
+                kind: 'attr',
+                expr: `${sig}[0]()`,
+                reactive: true,
+                directive: `bind:${prop}`,
+                ...(h.at ? { at: h.at } : {}),
+            },
             {
                 name: 'on' + capitalize(evt),
                 kind: 'event',
@@ -418,21 +499,27 @@ class Lowerer {
             const h = this.hole(v.hole);
             base.expr = h.code;
             base.reactive = h.reactive;
+            if (h.at)
+                base.at = h.at;
             return base;
         }
         // mixed: template literal, reactive if any hole is
         let reactive = false;
+        let at;
         const body = v.parts
             .map((p) => {
             if ('text' in p)
                 return escapeTemplate(p.text);
             const h = this.hole(p.hole);
             reactive = reactive || h.reactive;
+            at ??= h.at;
             return '${' + h.code + '}';
         })
             .join('');
         base.expr = '`' + body + '`';
         base.reactive = reactive;
+        if (at)
+            base.at = at;
         return base;
     }
 }
@@ -443,5 +530,5 @@ class Lowerer {
  */
 export function lowerTemplate(pieces, holes, used, opts = {}) {
     const { root } = parseTemplate(pieces, { svg: opts.svg });
-    return new Lowerer(holes, used).lowerRoot(root.children);
+    return new Lowerer(holes, used, opts.sourceFile, opts.positionAt).lowerRoot(root.children);
 }