@fluixi/compiler 1.0.0-alpha.83 → 1.0.0-alpha.85

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

@@ -10,7 +10,7 @@ import { type Piece } from '@fluixi/template-parser';
 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.
+ * 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. */
@@ -18,7 +18,7 @@ export interface TemplateHole {
     /** 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
+     * 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.
      */
@@ -27,7 +27,7 @@ export interface TemplateHole {
         body: string;
         bodyReactive: boolean;
     };
-    /** Whether the hole is an object literal — `class=${{…}}` lowers to classList. */
+    /** 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.

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,YAAY,EAAE,MAAM,EAAsB,MAAM,gBAAgB,CAAC;AAK/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"}
+{"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,iFAAiF;IACjF,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',
@@ -133,7 +134,7 @@ 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);
@@ -148,13 +149,13 @@ class Lowerer {
         };
     }
     lowerComponent(el) {
-        // `<${Comp} />`: the tag is an interpolated expression — use the hole's code
+        // `<${Comp} />`: the tag is an interpolated expression, use the hole's code
         // as the component identity, so `createComponent(<expr>, …)` is emitted.
         const name = el.tagHole != null ? this.hole(el.tagHole).code : el.tag;
         const props = this.lowerAttributes(el.attributes);
         // Named slots: a child with `slot="header"` becomes `props.header` (a lazy
         // getter, like `children`); the rest stay the default `children`. This is the
-        // Solid convention — the component reads `props.header` / `props.children`.
+        // Solid convention: the component reads `props.header` / `props.children`.
         const { slots, rest } = this.partitionSlots(el.children);
         for (const [slotName, nodes] of slots) {
             const ir = nodes.length === 1 ? nodes[0] : { kind: 'fragment', children: nodes };
@@ -165,7 +166,7 @@ class Lowerer {
                 jsxElement: true,
             };
             // A slot replaces a same-named attribute rather than joining it. `<Card header>`
-            // alongside `<span slot="header">` otherwise emits the key twice — valid JS where
+            // alongside `<span slot="header">` otherwise emits the key twice, valid JS where
             // the last wins, but the first is dead code and esbuild warns on it. Content is
             // the more specific intent, so the slot is what survives.
             const clash = props.findIndex((p) => p.name === slotName);
@@ -182,7 +183,7 @@ class Lowerer {
             : 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
+        // 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;
@@ -253,11 +254,11 @@ 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 }];
         const at = this.tagAt(el);
@@ -360,7 +361,7 @@ 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;
                 }
             }
@@ -368,7 +369,7 @@ class Lowerer {
         // 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
+        // position: a real source line beats the stack fallback, which lands in the
         // compiled file.
         if (classEntries.length > 0) {
             props.push({
@@ -470,11 +471,11 @@ class Lowerer {
             },
         ];
     }
-    /** A plain attribute (incl. lit `?bool`, mixed values) — old `mkProp` behavior. */
+    /** A plain attribute (incl. lit `?bool`, mixed values), old `mkProp` behavior. */
     plainAttr(a) {
         const v = a.value;
         // `class=${{...}}` (object literal) -> classList (Solid convention), so it
-        // doesn't collide with a static `class="box"` (which stays className) — both
+        // doesn't collide with a static `class="box"` (which stays className), both
         // apply. `class` -> className; `style=${{...}}` stays `style` (runtime merges).
         // `html=${x}` is the raw-HTML escape hatch -> innerHTML.
         let name = a.name;