@fluixi/compiler 1.0.0-alpha.92 → 1.0.0-alpha.94

package/dist/lower/template.js

@@ -10,7 +10,9 @@ 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 { decodeEntities } from './entities.js';
 import { paren } from '../analyze/paren.js';
+import { markHole } from '../transform/source-locations.js';
 const DELEGATED = new Set([
     'click', 'dblclick', 'input', 'change', 'submit', 'focus', 'blur',
     'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup',
@@ -19,6 +21,8 @@ const DELEGATED = new Set([
 function escapeTemplate(s) {
     return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
 }
+/** The tag that carries directives and renders only its content. Never a custom element: no dash. */
+const CONTAINER = 'container';
 function capitalize(s) {
     return s.charAt(0).toUpperCase() + s.slice(1);
 }
@@ -88,10 +92,6 @@ class Lowerer {
                         i = elseIdx;
                     continue;
                 }
-                if (child.attributes.some((a) => a.kind === 'EachDirective')) {
-                    out.push(this.lowerEach(child));
-                    continue;
-                }
             }
             const node = this.lowerNode(child);
             if (node)
@@ -107,7 +107,8 @@ class Lowerer {
             case 'Text': {
                 if (node.raw)
                     return { kind: 'text', value: node.value };
-                const cleaned = cleanTemplateText(node.value);
+                // Decoded after cleaning, so an entity written as a space is kept as written.
+                const cleaned = decodeEntities(cleanTemplateText(node.value));
                 return cleaned ? { kind: 'text', value: cleaned } : null;
             }
             case 'Comment':
@@ -137,13 +138,19 @@ class Lowerer {
             node.props.unshift({ name: 'component', kind: 'attr', expr: `() => ${paren(this.hole(isAttr.value.hole).code, 'arrowBody')}` });
             return node;
         }
+        // `each` repeats the element's content, never the element: `<ul each>` is one list.
+        const each = this.lowerEach(el);
+        const children = each ? [each] : this.lowerChildren(el.children);
+        // A `<container>` is only what it holds. It carries the directives and is never rendered.
+        if (el.tag === CONTAINER)
+            return children.length === 1 ? children[0] : { kind: 'fragment', children };
         const at = this.tagAt(el);
         return {
             kind: 'element',
             tag: el.tag,
             svg: el.namespace === 'svg',
-            props: this.lowerAttributes(el.attributes),
-            children: this.lowerChildren(el.children),
+            props: this.lowerAttributes(el.attributes, true),
+            children,
             static: false,
             ...(at ? { at } : {}),
         };
@@ -233,11 +240,15 @@ class Lowerer {
         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>`. */
+    /**
+     * `<el each=${items} key?>${item => …}</el>` → `<el><For each>{item => …}</For></el>`: the
+     * content is repeated per item. Content that is not a `${item => …}` arrow is repeated as
+     * it is. Null when the element has no `each`.
+     */
     lowerEach(el) {
         const eachDir = el.attributes.find((a) => a.kind === 'EachDirective');
         if (!eachDir || eachDir.kind !== 'EachDirective')
-            return this.lowerNode(el);
+            return null;
         const each = this.hole(eachDir.hole);
         const props = [{ name: 'each', kind: 'attr', expr: each.code, reactive: each.reactive, ...(each.at ? { at: each.at } : {}) }];
         if (eachDir.key) {
@@ -248,17 +259,18 @@ class Lowerer {
                 : this.hole(eachDir.key.hole).code;
             props.push({ name: 'by', kind: 'attr', expr: by });
         }
-        // The element minus its each/key, repeated per item.
         const arrow = this.itemArrow(el);
         let childrenCode;
         if (arrow) {
-            const bodyIR = { kind: 'expr', code: arrow.body, reactive: arrow.bodyReactive };
-            const repeated = this.rebuildWithChildren(el, [bodyIR]);
-            childrenCode = `(${arrow.params.join(', ')}) => ${paren(this.emit(repeated), 'arrowBody')}`;
+            // A body that reads signals, `${(it) => it.label + count()}`, stays live: it is handed
+            // back as an accessor for the runtime to bind, as it was inside the repeated element.
+            const body = arrow.bodyReactive ? `() => ${paren(arrow.body, 'arrowBody')}` : paren(arrow.body, 'arrowBody');
+            childrenCode = `(${arrow.params.join(', ')}) => ${body}`;
         }
         else {
-            const repeated = this.stripAndLower(el, (a) => a.kind === 'EachDirective');
-            childrenCode = `() => ${paren(this.emit(repeated), 'arrowBody')}`;
+            const content = this.lowerChildren(el.children);
+            const ir = content.length === 1 ? content[0] : { kind: 'fragment', children: content };
+            childrenCode = `() => ${paren(this.emit(ir), 'arrowBody')}`;
         }
         const children = [{ kind: 'expr', code: childrenCode, reactive: false }];
         const at = this.tagAt(el);
@@ -276,31 +288,25 @@ class Lowerer {
         const clone = { ...el, attributes: el.attributes.filter((a) => !drop(a)) };
         return clone.kind === 'Element' ? this.lowerElement(clone) : this.lowerComponent(clone);
     }
-    /** Same element (minus each/key) but with explicit IR children. */
-    rebuildWithChildren(el, children) {
-        const props = this.lowerAttributes(el.attributes.filter((a) => a.kind !== 'EachDirective'));
-        if (el.kind === 'Element') {
-            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 };
-    }
     // --- attributes ---------------------------------------------------------
-    lowerAttributes(attrs) {
+    /**
+     * `element`: a DOM element, where each class:/style: value that moves is its own accessor.
+     * A component gets the object as before, rebuilt whole when any value moves.
+     */
+    lowerAttributes(attrs, element = false) {
+        let anyReactive = false;
+        const entry = (name, h) => {
+            anyReactive ||= h.reactive;
+            if (!element || !h.reactive)
+                return `${JSON.stringify(name)}: ${h.code}`;
+            const accessor = `() => ${paren(h.code, 'arrowBody')}`;
+            // Marked like any other binding hole when positions are on.
+            return `${JSON.stringify(name)}: ${h.at ? markHole(accessor, h.at.line, h.at.column) : accessor}`;
+        };
         const props = [];
         const classEntries = [];
-        let classReactive = false;
         let classAt;
         const styleEntries = [];
-        let styleReactive = false;
         let styleAt;
         const usePairs = [];
         for (const a of attrs) {
@@ -339,15 +345,13 @@ class Lowerer {
                     break;
                 case 'ClassDirective': {
                     const h = this.hole(a.hole);
-                    classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-                    classReactive = classReactive || h.reactive;
+                    classEntries.push(entry(a.name, h));
                     classAt ??= h.at;
                     break;
                 }
                 case 'StyleDirective': {
                     const h = this.hole(a.hole);
-                    styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
-                    styleReactive = styleReactive || h.reactive;
+                    styleEntries.push(entry(a.name, h));
                     styleAt ??= h.at;
                     break;
                 }
@@ -376,18 +380,22 @@ class Lowerer {
                 name: 'classList',
                 kind: 'attr',
                 expr: `{ ${classEntries.join(', ')} }`,
-                reactive: classReactive,
+                reactive: !element && anyReactive,
                 ...(classAt ? { at: classAt } : {}),
             });
         }
+        // Each entry that moves is its own accessor, so the runtime updates that key alone.
         if (styleEntries.length > 0) {
-            props.push({
-                name: 'style',
-                kind: 'attr',
-                expr: `{ ${styleEntries.join(', ')} }`,
-                reactive: styleReactive,
-                ...(styleAt ? { at: styleAt } : {}),
-            });
+            const entries = `{ ${styleEntries.join(', ')} }`;
+            // `style=${…}` as well: it goes first, the keys after it, applied in order.
+            const base = props.findIndex((p) => p.name === 'style');
+            if (base === -1)
+                props.push({ name: 'style', kind: 'attr', expr: entries, reactive: !element && anyReactive, ...(styleAt ? { at: styleAt } : {}) });
+            else {
+                const prop = props[base];
+                const value = prop.expr === undefined ? JSON.stringify(prop.literal) : prop.reactive ? `() => ${paren(prop.expr, 'arrowBody')}` : prop.expr;
+                props[base] = { name: 'style', kind: 'attr', expr: `[${value}, ${entries}]`, reactive: false, ...(prop.at ? { at: prop.at } : {}) };
+            }
         }
         // All use: directives normalize to one `use` prop = an array of [dir, accessor?] pairs.
         if (usePairs.length > 0) {
@@ -492,7 +500,7 @@ class Lowerer {
             return base;
         }
         if (v.kind === 'static') {
-            base.literal = v.value;
+            base.literal = decodeEntities(v.value);
             return base;
         }
         if (v.kind === 'hole') {
@@ -509,7 +517,7 @@ class Lowerer {
         const body = v.parts
             .map((p) => {
             if ('text' in p)
-                return escapeTemplate(p.text);
+                return escapeTemplate(decodeEntities(p.text));
             const h = this.hole(p.hole);
             reactive = reactive || h.reactive;
             at ??= h.at;