@fluixi/compiler 1.0.0-alpha.55 → 1.0.0-alpha.56

package/dist/frontend/babel/lower-template.js

@@ -0,0 +1,447 @@
+/**
+ * Lower a parsed Template AST (`@fluixi/template-parser`) into the compiler's
+ * host-agnostic IR. This is the Babel-aware half the parser deliberately is not:
+ * it binds each opaque hole slot to its Babel `${…}` expression (via `genExpr`,
+ * which also compiles any JSX/`` html`` `` nested inside the hole) and reproduces
+ * the exact IR the old single-pass `build-ir-lit` scanner produced — the byte-
+ * identity gate — while adding the new directive lowerings on top.
+ *
+ * Pipeline:  pieces → parseTemplate → Template AST → lowerTemplate → IRNode
+ */
+import { types as t } from '@babel/core';
+import _generate from '@babel/generator';
+import { parseTemplate, } from '@fluixi/template-parser';
+import { imperativeBackend } from '../../codegen/backends/imperative.js';
+import { cleanJSXText, genExpr, isReactiveExpr } from './build-ir.js';
+const generate = _generate.default ?? _generate;
+function gen(node) {
+    return generate(node, { concise: true }).code;
+}
+const DELEGATED = new Set([
+    'click', 'dblclick', 'input', 'change', 'submit', 'focus', 'blur',
+    'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup',
+]);
+/** Escape a static text run for embedding in a template literal. */
+function escapeTemplate(s) {
+    return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+function capitalize(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+class Lowerer {
+    holes;
+    used;
+    constructor(holes, used) {
+        this.holes = holes;
+        this.used = used;
+    }
+    hole(i) {
+        // -1 marks a recovered-from missing binding; emit a harmless undefined.
+        return this.holes[i] ?? { node: t.identifier('undefined'), code: 'undefined', reactive: false };
+    }
+    /** Emit a nested IR subtree to code (for `Show` fallback / `For` children). */
+    emit(node) {
+        const { code, imports } = imperativeBackend.emit(node, {});
+        for (const s of imports)
+            this.used.add(s);
+        return code;
+    }
+    // --- content ------------------------------------------------------------
+    lowerRoot(children) {
+        const nodes = this.lowerChildren(children);
+        if (nodes.length === 1)
+            return nodes[0];
+        return { kind: 'fragment', children: nodes };
+    }
+    /** Lower a sibling list, handling text-drop and if/else/each restructuring. */
+    lowerChildren(children) {
+        const out = [];
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child.kind === 'Element' || child.kind === 'Component') {
+                const ifDir = child.attributes.find((a) => a.kind === 'IfDirective');
+                if (ifDir && ifDir.kind === 'IfDirective') {
+                    // Pair with a following `else` sibling (skipping a whitespace-only text).
+                    let elseIdx = i + 1;
+                    if (elseIdx < children.length && this.isBlankText(children[elseIdx]))
+                        elseIdx++;
+                    const elseNode = children[elseIdx];
+                    const hasElse = elseNode &&
+                        (elseNode.kind === 'Element' || elseNode.kind === 'Component') &&
+                        elseNode.attributes.some((a) => a.kind === 'ElseDirective');
+                    out.push(this.lowerIf(child, ifDir.hole, hasElse ? elseNode : null));
+                    if (hasElse)
+                        i = elseIdx;
+                    continue;
+                }
+                if (child.attributes.some((a) => a.kind === 'EachDirective')) {
+                    out.push(this.lowerEach(child));
+                    continue;
+                }
+            }
+            const node = this.lowerNode(child);
+            if (node)
+                out.push(node);
+        }
+        return out;
+    }
+    isBlankText(n) {
+        return n.kind === 'Text' && !n.raw && cleanJSXText(n.value) === '';
+    }
+    lowerNode(node) {
+        switch (node.kind) {
+            case 'Text': {
+                if (node.raw)
+                    return { kind: 'text', value: node.value };
+                const cleaned = cleanJSXText(node.value);
+                return cleaned ? { kind: 'text', value: cleaned } : null;
+            }
+            case 'Comment':
+                return null; // dropped, like JSX comments
+            case 'Expression': {
+                const h = this.hole(node.hole);
+                return { kind: 'expr', code: h.code, reactive: h.reactive };
+            }
+            case 'Fragment':
+                return { kind: 'fragment', children: this.lowerChildren(node.children) };
+            case 'Element':
+                return this.lowerElement(node);
+            case 'Component':
+                return this.lowerComponent(node);
+            default:
+                return null;
+        }
+    }
+    lowerElement(el) {
+        // `<component is=${C} …>…</component>` → `<Dynamic component=${C} …>` (a
+        // reactive component swap). Dynamic reads `component` via normalizeAccessor,
+        // so it must be an ACCESSOR `() => C` (a bare function would be mis-called).
+        const isAttr = el.attributes.find((a) => a.kind === 'Attribute' && a.name === 'is');
+        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})` });
+            return node;
+        }
+        return {
+            kind: 'element',
+            tag: el.tag,
+            svg: el.namespace === 'svg',
+            props: this.lowerAttributes(el.attributes),
+            children: this.lowerChildren(el.children),
+            static: false,
+        };
+    }
+    lowerComponent(el) {
+        // `<${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`.
+        const { slots, rest } = this.partitionSlots(el.children);
+        for (const [slotName, nodes] of slots) {
+            const ir = nodes.length === 1 ? nodes[0] : { kind: 'fragment', children: nodes };
+            props.push({ name: slotName, kind: 'attr', expr: this.emit(ir), jsxElement: true });
+        }
+        return { kind: 'component', name, props, children: this.lowerChildren(rest) };
+    }
+    /** Split a component's children into named slots (`slot="x"`) and the rest. */
+    partitionSlots(children) {
+        const slots = new Map();
+        const rest = [];
+        for (const child of children) {
+            if (child.kind === 'Element' || child.kind === 'Component') {
+                const slot = child.attributes.find((a) => a.kind === 'Attribute' && a.name === 'slot');
+                if (slot && slot.value && slot.value.kind === 'static') {
+                    const stripped = { ...child, attributes: child.attributes.filter((a) => a !== slot) };
+                    const ir = stripped.kind === 'Element' ? this.lowerElement(stripped) : this.lowerComponent(stripped);
+                    const bucket = slots.get(slot.value.value) ?? [];
+                    bucket.push(ir);
+                    slots.set(slot.value.value, bucket);
+                    continue;
+                }
+            }
+            rest.push(child);
+        }
+        return { slots, rest };
+    }
+    // --- control-flow sugar -------------------------------------------------
+    /** `<el if=${cond}>…</el>` (+ optional `<el else>`) → `<Show when fallback>`. */
+    lowerIf(el, condHole, elseEl) {
+        const cond = this.hole(condHole);
+        const props = [
+            { name: 'when', kind: 'attr', expr: cond.code, reactive: cond.reactive },
+        ];
+        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] };
+    }
+    /** `<el each=${items} key?>${item => …}</el>` → `<For each>{item => <el>…</el>}</For>`. */
+    lowerEach(el) {
+        const eachDir = el.attributes.find((a) => a.kind === 'EachDirective');
+        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 }];
+        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.
+            const by = 'static' in eachDir.key
+                ? `(item) => item[${JSON.stringify(eachDir.key.static)}]`
+                : 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 bodyExpr = arrow.body;
+            const bodyIR = { kind: 'expr', code: genExpr(bodyExpr, this.used), reactive: isReactiveExpr(bodyExpr) };
+            const repeated = this.rebuildWithChildren(el, [bodyIR]);
+            childrenCode = `(${arrow.params.map((p) => gen(p)).join(', ')}) => (${this.emit(repeated)})`;
+        }
+        else {
+            const repeated = this.stripAndLower(el, (a) => a.kind === 'EachDirective');
+            childrenCode = `() => (${this.emit(repeated)})`;
+        }
+        const children = [{ kind: 'expr', code: childrenCode, reactive: false }];
+        return { kind: 'component', name: 'For', props, children };
+    }
+    /** The single `${item => expr}` child arrow, if that's the element's content. */
+    itemArrow(el) {
+        const kids = el.children.filter((c) => !this.isBlankText(c));
+        if (kids.length !== 1 || kids[0].kind !== 'Expression')
+            return null;
+        const node = this.hole(kids[0].hole).node;
+        if (t.isArrowFunctionExpression(node) && !t.isBlockStatement(node.body))
+            return node;
+        return null;
+    }
+    /** Lower an element to IR, dropping the directive attribute matched by `drop`. */
+    stripAndLower(el, drop) {
+        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') {
+            return { kind: 'element', tag: el.tag, svg: el.namespace === 'svg', props, children, static: false };
+        }
+        return { kind: 'component', name: el.tag, props, children };
+    }
+    // --- attributes ---------------------------------------------------------
+    lowerAttributes(attrs) {
+        const props = [];
+        const classEntries = [];
+        let classReactive = false;
+        const styleEntries = [];
+        let styleReactive = false;
+        const usePairs = [];
+        for (const a of attrs) {
+            switch (a.kind) {
+                case 'IfDirective':
+                case 'EachDirective':
+                case 'ElseDirective':
+                    break; // handled as control-flow at the parent level
+                case 'Attribute':
+                    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 });
+                    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 });
+                    break;
+                case 'Spread':
+                    props.push({ name: '', kind: 'spread', expr: this.hole(a.hole).code });
+                    break;
+                case 'ClassDirective': {
+                    const h = this.hole(a.hole);
+                    classEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
+                    classReactive = classReactive || h.reactive;
+                    break;
+                }
+                case 'StyleDirective': {
+                    const h = this.hole(a.hole);
+                    styleEntries.push(`${JSON.stringify(a.name)}: ${h.code}`);
+                    styleReactive = styleReactive || h.reactive;
+                    break;
+                }
+                case 'BindDirective':
+                    props.push(...this.bindProps(a.name, this.hole(a.hole).code));
+                    break;
+                case 'UseDirective': {
+                    // `use=${dir}` → [dir]; `use:name` → [name]; `use:name=${opts}` →
+                    // [name, () => opts]. `name` is an in-scope identifier (like Solid).
+                    const dir = a.name ?? (a.hole != null ? this.hole(a.hole).code : null);
+                    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}]`);
+                    break;
+                }
+            }
+        }
+        // Merge all class:/style: directives into one classList/style prop so they
+        // don't collide as duplicate keys in the emitted props object.
+        if (classEntries.length > 0) {
+            props.push({ name: 'classList', kind: 'attr', expr: `{ ${classEntries.join(', ')} }`, reactive: classReactive });
+        }
+        if (styleEntries.length > 0) {
+            props.push({ name: 'style', kind: 'attr', expr: `{ ${styleEntries.join(', ')} }`, reactive: styleReactive });
+        }
+        // All use: directives normalize to one `use` prop = an array of [dir, accessor?] pairs.
+        if (usePairs.length > 0) {
+            props.push({ name: 'use', kind: 'attr', expr: `[${usePairs.join(', ')}]` });
+        }
+        return props;
+    }
+    /**
+     * Lower an event binding. Plain `@click`/`onClick` (no modifiers) stays a
+     * DELEGATED handler (unchanged, byte-identical with JSX). `on:click` or any
+     * modifier (`.capture`/`.once`/`.passive`/`.prevent`/`.stop`/`.self`) emits a
+     * NATIVE `on:name` prop the runtime attaches via addEventListener.
+     */
+    eventProp(a) {
+        const dom = a.name.toLowerCase();
+        const handler = this.hole(a.hole).code;
+        const native = a.syntax === 'colon' || a.modifiers.length > 0;
+        if (!native) {
+            return {
+                name: 'on' + capitalize(a.name),
+                kind: 'event',
+                event: { name: dom, delegated: DELEGATED.has(dom) },
+                expr: handler,
+            };
+        }
+        const wrapped = this.wrapHandler(handler, a.modifiers);
+        const options = this.eventOptions(a.modifiers);
+        const value = options ? `[${wrapped}, ${options}]` : wrapped;
+        return { name: 'on:' + dom, kind: 'attr', expr: value };
+    }
+    /** Wrap a handler for `.prevent`/`.stop`/`.self` (no wrap when none apply). */
+    wrapHandler(handler, mods) {
+        const guard = mods.includes('self') ? 'if (e.target !== e.currentTarget) return; ' : '';
+        const pre = [];
+        if (mods.includes('prevent'))
+            pre.push('e.preventDefault();');
+        if (mods.includes('stop'))
+            pre.push('e.stopPropagation();');
+        if (!guard && pre.length === 0)
+            return handler;
+        return `(e) => { ${guard}${pre.join(' ')} return (${handler})(e); }`;
+    }
+    /** addEventListener options object from `.capture`/`.once`/`.passive`, or null. */
+    eventOptions(mods) {
+        const opts = [];
+        if (mods.includes('capture'))
+            opts.push('capture: true');
+        if (mods.includes('once'))
+            opts.push('once: true');
+        if (mods.includes('passive'))
+            opts.push('passive: true');
+        return opts.length ? `{ ${opts.join(', ')} }` : null;
+    }
+    /** `bind:value=${sig}` → `value={sig[0]()}` + `onInput={e => sig[1](e…value)}`. */
+    bindProps(prop, sigCode) {
+        const checked = prop === 'checked';
+        const evt = checked ? 'change' : 'input';
+        const accessor = checked ? 'checked' : 'value';
+        // Parenthesize the signal expression — it may be more than an identifier
+        // (`[get, set] as const`, `props.model`, a call), and `expr[0]()` would then
+        // mis-parse (e.g. `[...] as const[0]`).
+        const sig = `(${sigCode})`;
+        return [
+            { name: prop, kind: 'attr', expr: `${sig}[0]()`, reactive: true },
+            {
+                name: 'on' + capitalize(evt),
+                kind: 'event',
+                event: { name: evt, delegated: DELEGATED.has(evt) },
+                // delegated handler: `target` is the bound element (currentTarget is the root)
+                expr: `(e) => ${sig}[1](e.target.${accessor})`,
+            },
+        ];
+    }
+    /** 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
+        // apply. `class` -> className; `style=${{...}}` stays `style` (runtime merges).
+        // `html=${x}` is the raw-HTML escape hatch -> innerHTML.
+        let name = a.name;
+        if (a.name === 'class') {
+            name = v && v.kind === 'hole' && t.isObjectExpression(this.hole(v.hole).node) ? 'classList' : 'className';
+        }
+        else if (a.name === 'html') {
+            name = 'innerHTML';
+        }
+        const kind = 'attr';
+        const base = { name, kind };
+        if (v == null) {
+            base.literal = true;
+            return base;
+        }
+        if (v.kind === 'static') {
+            base.literal = v.value;
+            return base;
+        }
+        if (v.kind === 'hole') {
+            const h = this.hole(v.hole);
+            base.expr = h.code;
+            base.reactive = h.reactive;
+            return base;
+        }
+        // mixed: template literal, reactive if any hole is
+        let reactive = false;
+        const body = v.parts
+            .map((p) => {
+            if ('text' in p)
+                return escapeTemplate(p.text);
+            const h = this.hole(p.hole);
+            reactive = reactive || h.reactive;
+            return '${' + h.code + '}';
+        })
+            .join('');
+        base.expr = '`' + body + '`';
+        base.reactive = reactive;
+        return base;
+    }
+}
+/**
+ * Build IR from a lit `` html`...` `` / `` svg`...` `` TaggedTemplateExpression.
+ * Parses (Babel-free) then lowers (Babel-aware) — a drop-in for the old
+ * single-pass scanner, with the same signature.
+ */
+export function lowerLitTemplate(node, used, opts = {}) {
+    const quasi = node.quasi;
+    const holes = quasi.expressions.map((e) => {
+        const expr = e;
+        return { node: expr, code: genExpr(expr, used), reactive: isReactiveExpr(expr) };
+    });
+    const pieces = buildPieces(quasi);
+    const { root } = parseTemplate(pieces, { svg: opts.svg });
+    return new Lowerer(holes, used).lowerRoot(root.children);
+}
+/** Turn a Babel TemplateLiteral into position-carrying parser pieces. */
+function buildPieces(quasi) {
+    const pieces = [];
+    quasi.quasis.forEach((q, i) => {
+        const text = q.value.cooked ?? q.value.raw;
+        pieces.push({ kind: 'static', text, start: q.start ?? 0 });
+        if (i < quasi.expressions.length) {
+            const e = quasi.expressions[i];
+            pieces.push({ kind: 'hole', index: i, start: e.start ?? 0, end: e.end ?? 0 });
+        }
+    });
+    return pieces;
+}

package/dist/frontend/babel/lower-template.mjs

@@ -0,0 +1 @@
+import{types as v}from"@babel/core";import A from"@babel/generator";import{parseTemplate as Z}from"@fluixi/template-parser";var x={version:1,module:"@fluixi/dom",symbols:["createNativeElement","insert","spread","setAttribute","delegateEvents","createComponent","createMemo","untrack","Show","For","Index","Switch","Match","Dynamic","ErrorBoundary"]},te={version:2,module:"@fluixi/dom",symbols:[...x.symbols,"template","cloneTemplate","walk"]};var X={show:"Show",for:"For",index:"Index",switch:"Switch",match:"Match",dynamic:"Dynamic",errorBoundary:"ErrorBoundary",suspense:"Suspense"};function j(n){return/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(n)}function b(n){return j(n)?n:JSON.stringify(n)}function L(n){return n.expr!==void 0?n.reactive?`() => (${n.expr})`:`(${n.expr})`:JSON.stringify(n.literal??!0)}function D(n){return n.expr!==void 0?`(${n.expr})`:JSON.stringify(n.literal??!0)}function O(n,e,t){let r=n.filter(l=>l.kind==="spread"),a=n.filter(l=>l.kind!=="spread").map(l=>`${b(l.name)}: ${L(l)}`);e!=null&&a.push(`children: ${e}`);let o=`{ ${a.join(", ")} }`;return r.length>0?(t.add("mergeProps"),`mergeProps(${r.map(l=>l.expr).join(", ")}, ${o})`):o}function y(n,e){return n.length===1?f(n[0],e):`[${n.map(t=>f(t,e)).join(", ")}]`}function N(n,e,t,r){r.add("createMemo"),r.add("createComponent");let i=e.filter(s=>s.kind==="spread"),o=e.filter(s=>s.kind!=="spread").map(s=>`get ${b(s.name)}() { return ${D(s)}; }`);t.length>0&&o.push(`get children() { return ${y(t,r)}; }`);let l=`{ ${o.join(", ")} }`;return i.length>0&&(r.add("mergeProps"),l=`mergeProps(${i.map(s=>s.expr).join(", ")}, ${l})`),`createMemo(() => createComponent(${n}, ${l}))`}function f(n,e){switch(n.kind){case"text":return JSON.stringify(n.value);case"expr":return n.reactive?`() => (${n.code})`:`(${n.code})`;case"fragment":return n.children.length===0?"null":y(n.children,e);case"component":return N(n.name,n.props,n.children,e);case"control":{let t=X[n.control]??n.control;return e.add(t),N(t,n.props,n.children,e)}case"element":{e.add("createNativeElement");let t=JSON.stringify(n.tag),r="_el$",i=[],a=n.svg?`${t}, true`:t;if(i.push(`const ${r} = createNativeElement(${a});`),n.props.length>0){e.add("spread");let o=n.svg?", isSVG: true":"";i.push(`spread({ element: ${r}, props: ${O(n.props,null,e)}${o} });`)}for(let o of n.children){e.add("insert");let l=f(o,e),s=o.kind==="expr"&&o.reactive||o.kind==="component"||o.kind==="control";i.push(s?`insert(${r}, ${l}, null);`:`insert(${r}, ${l});`)}return i.push(`return ${r};`),`(() => { ${i.join(" ")} })()`}}}var h={name:"imperative",contract:x,emit(n,e){let t=new Set;return{code:f(n,t),imports:Array.from(t)}}};import{types as c,traverse as B,template as F}from"@babel/core";import I from"@babel/generator";function S(n,e=new Set,t={}){return R(n,e,t)}var M=I.default??I;function C(n){return M(n,{concise:!0}).code}function _(n,e){let t=c.cloneNode(n,!0),r=c.file(c.program([c.expressionStatement(t)])),i=!1,a=(o,l,s)=>{for(let p of s)e.add(p);o.replaceWith(F.expression(l,{placeholderPattern:!1,plugins:["typescript"]})()),o.skip(),i=!0};return B(r,{"JSXElement|JSXFragment"(o){let l=o.node,{code:s,imports:p}=h.emit(k(l,e),{});a(o,s,p)},TaggedTemplateExpression(o){let l=o.node.tag;if(!c.isIdentifier(l)||l.name!=="html"&&l.name!=="svg")return;let s=S(o.node,e,{svg:l.name==="svg"}),{code:p,imports:m}=h.emit(s,{});a(o,p,m)}}),i?r.program.body[0].expression:n}function d(n,e){return C(_(n,e))}var H=new Set(["svg","path","circle","rect","line","polygon","polyline","ellipse","g","defs","clipPath","text"]),V=/^on[A-Z]/,G=new Set(["click","dblclick","input","change","submit","focus","blur","keydown","keyup","keypress","mousedown","mouseup"]);function K(n){if(c.isJSXIdentifier(n)){let e=n.name[0]!==n.name[0].toLowerCase();return{tag:n.name,component:e}}return c.isJSXMemberExpression(n)?{tag:C(n),component:!0}:c.isJSXNamespacedName(n)?{tag:`${n.namespace.name}:${n.name.name}`,component:!1}:{tag:"div",component:!1}}function U(n){return c.isJSXIdentifier(n)?n.name==="class"?"className":n.name:c.isJSXNamespacedName(n)?`${n.namespace.name}:${n.name.name}`:"unknown"}function u(n){return c.isCallExpression(n)||c.isOptionalCallExpression(n)?!0:c.isMemberExpression(n)||c.isOptionalMemberExpression(n)?!(!n.computed&&c.isIdentifier(n.property,{name:"children"})):c.isConditionalExpression(n)?u(n.test)||u(n.consequent)||u(n.alternate):c.isLogicalExpression(n)||c.isBinaryExpression(n)?u(n.left)||u(n.right):c.isTemplateLiteral(n)?n.expressions.some(e=>u(e)):c.isObjectExpression(n)?n.properties.some(e=>c.isObjectProperty(e)&&!e.computed&&u(e.value)):c.isArrayExpression(n)?n.elements.some(e=>e!=null&&!c.isSpreadElement(e)&&u(e)):!1}function W(n,e){let t=U(n.name),r=V.test(t),i=r||t.startsWith("on:"),o={name:t,kind:r?"event":"attr"};r&&(o.event={name:t.slice(2).toLowerCase(),delegated:G.has(t.slice(2).toLowerCase())});let l=n.value;if(l==null)return o.literal=!0,o;if(c.isStringLiteral(l))return o.literal=l.value,o;if(c.isJSXExpressionContainer(l)&&!c.isJSXEmptyExpression(l.expression)){let s=l.expression;return c.isStringLiteral(s)||c.isNumericLiteral(s)||c.isBooleanLiteral(s)?(o.literal=s.value,o):(o.expr=d(s,e),o.reactive=i?!1:u(s),(c.isJSXElement(s)||c.isJSXFragment(s))&&(o.jsxElement=!0),o)}return o.literal=!0,o}function $(n,e){let t=n.value;return t==null?null:c.isStringLiteral(t)?JSON.stringify(t.value):c.isJSXExpressionContainer(t)&&!c.isJSXEmptyExpression(t.expression)?d(t.expression,e):null}function z(n,e){let t=[],r=[];for(let i of n){if(c.isJSXSpreadAttribute(i)){t.push({name:"",kind:"spread",expr:d(i.argument,e)});continue}if(!c.isJSXAttribute(i))continue;let a=c.isJSXNamespacedName(i.name)?i.name.namespace.name:null;if(a==="use"){let o=i.name.name.name;e.add(o);let l=$(i,e);r.push(l!=null?`[${o}, () => (${l})]`:`[${o}]`);continue}if(a==="oncapture"){let o=i.name.name.name.toLowerCase(),l=$(i,e)??"undefined";t.push({name:"on:"+o,kind:"attr",expr:`[${l}, { capture: true }]`});continue}t.push(W(i,e))}return r.length>0&&t.push({name:"use",kind:"attr",expr:`[${r.join(", ")}]`}),t}function g(n){let e=n.split(/\r\n|\n|\r/),t=0;for(let i=0;i<e.length;i++)/[^ \t]/.test(e[i])&&(t=i);let r="";for(let i=0;i<e.length;i++){let a=e[i].replace(/\t/g," ");i!==0&&(a=a.replace(/^ +/,"")),i!==e.length-1&&(a=a.replace(/ +$/,"")),a&&(i!==t&&(a+=" "),r+=a)}return r}function w(n,e){let t=[];for(let r of n)if(c.isJSXText(r)){let i=g(r.value);i&&t.push({kind:"text",value:i})}else if(c.isJSXExpressionContainer(r)){if(!c.isJSXEmptyExpression(r.expression)){let i=r.expression;t.push({kind:"expr",code:d(i,e),reactive:u(i)})}}else c.isJSXElement(r)||c.isJSXFragment(r)?t.push(k(r,e)):c.isJSXSpreadChild(r)&&t.push({kind:"expr",code:d(r.expression,e),reactive:!1});return t}function k(n,e=new Set){if(c.isJSXFragment(n))return{kind:"fragment",children:w(n.children,e)};let{tag:t,component:r}=K(n.openingElement.name),i=z(n.openingElement.attributes,e),a=w(n.children,e);return r?{kind:"component",name:t,props:i,children:a}:{kind:"element",tag:t,svg:H.has(t),props:i,children:a,static:!1}}var q=A.default??A;function Q(n){return q(n,{concise:!0}).code}var J=new Set(["click","dblclick","input","change","submit","focus","blur","keydown","keyup","keypress","mousedown","mouseup"]);function Y(n){return n.replace(/\\/g,"\\\\").replace(/`/g,"\\`").replace(/\$\{/g,"\\${")}function P(n){return n.charAt(0).toUpperCase()+n.slice(1)}var E=class{constructor(e,t){this.holes=e;this.used=t}hole(e){return this.holes[e]??{node:v.identifier("undefined"),code:"undefined",reactive:!1}}emit(e){let{code:t,imports:r}=h.emit(e,{});for(let i of r)this.used.add(i);return t}lowerRoot(e){let t=this.lowerChildren(e);return t.length===1?t[0]:{kind:"fragment",children:t}}lowerChildren(e){let t=[];for(let r=0;r<e.length;r++){let i=e[r];if(i.kind==="Element"||i.kind==="Component"){let o=i.attributes.find(l=>l.kind==="IfDirective");if(o&&o.kind==="IfDirective"){let l=r+1;l<e.length&&this.isBlankText(e[l])&&l++;let s=e[l],p=s&&(s.kind==="Element"||s.kind==="Component")&&s.attributes.some(m=>m.kind==="ElseDirective");t.push(this.lowerIf(i,o.hole,p?s:null)),p&&(r=l);continue}if(i.attributes.some(l=>l.kind==="EachDirective")){t.push(this.lowerEach(i));continue}}let a=this.lowerNode(i);a&&t.push(a)}return t}isBlankText(e){return e.kind==="Text"&&!e.raw&&g(e.value)===""}lowerNode(e){switch(e.kind){case"Text":{if(e.raw)return{kind:"text",value:e.value};let t=g(e.value);return t?{kind:"text",value:t}:null}case"Comment":return null;case"Expression":{let t=this.hole(e.hole);return{kind:"expr",code:t.code,reactive:t.reactive}}case"Fragment":return{kind:"fragment",children:this.lowerChildren(e.children)};case"Element":return this.lowerElement(e);case"Component":return this.lowerComponent(e);default:return null}}lowerElement(e){let t=e.attributes.find(r=>r.kind==="Attribute"&&r.name==="is");if(e.tag==="component"&&t&&t.value&&t.value.kind==="hole"){let r=e.attributes.filter(a=>a!==t),i=this.lowerComponent({...e,kind:"Component",tag:"Dynamic",tagHole:null,attributes:r});return i.props.unshift({name:"component",kind:"attr",expr:`() => (${this.hole(t.value.hole).code})`}),i}return{kind:"element",tag:e.tag,svg:e.namespace==="svg",props:this.lowerAttributes(e.attributes),children:this.lowerChildren(e.children),static:!1}}lowerComponent(e){let t=e.tagHole!=null?this.hole(e.tagHole).code:e.tag,r=this.lowerAttributes(e.attributes),{slots:i,rest:a}=this.partitionSlots(e.children);for(let[o,l]of i){let s=l.length===1?l[0]:{kind:"fragment",children:l};r.push({name:o,kind:"attr",expr:this.emit(s),jsxElement:!0})}return{kind:"component",name:t,props:r,children:this.lowerChildren(a)}}partitionSlots(e){let t=new Map,r=[];for(let i of e){if(i.kind==="Element"||i.kind==="Component"){let a=i.attributes.find(o=>o.kind==="Attribute"&&o.name==="slot");if(a&&a.value&&a.value.kind==="static"){let o={...i,attributes:i.attributes.filter(p=>p!==a)},l=o.kind==="Element"?this.lowerElement(o):this.lowerComponent(o),s=t.get(a.value.value)??[];s.push(l),t.set(a.value.value,s);continue}}r.push(i)}return{slots:t,rest:r}}lowerIf(e,t,r){let i=this.hole(t),a=[{name:"when",kind:"attr",expr:i.code,reactive:i.reactive}];if(r){let l=this.stripAndLower(r,s=>s.kind==="ElseDirective");a.push({name:"fallback",kind:"attr",expr:this.emit(l),jsxElement:!0})}let o=this.stripAndLower(e,l=>l.kind==="IfDirective");return{kind:"component",name:"Show",props:a,children:[o]}}lowerEach(e){let t=e.attributes.find(s=>s.kind==="EachDirective");if(!t||t.kind!=="EachDirective")return this.lowerNode(e);let r=this.hole(t.hole),i=[{name:"each",kind:"attr",expr:r.code,reactive:r.reactive}];if(t.key){let s="static"in t.key?`(item) => item[${JSON.stringify(t.key.static)}]`:this.hole(t.key.hole).code;i.push({name:"by",kind:"attr",expr:s})}let a=this.itemArrow(e),o;if(a){let s=a.body,p={kind:"expr",code:d(s,this.used),reactive:u(s)},m=this.rebuildWithChildren(e,[p]);o=`(${a.params.map(T=>Q(T)).join(", ")}) => (${this.emit(m)})`}else{let s=this.stripAndLower(e,p=>p.kind==="EachDirective");o=`() => (${this.emit(s)})`}return{kind:"component",name:"For",props:i,children:[{kind:"expr",code:o,reactive:!1}]}}itemArrow(e){let t=e.children.filter(i=>!this.isBlankText(i));if(t.length!==1||t[0].kind!=="Expression")return null;let r=this.hole(t[0].hole).node;return v.isArrowFunctionExpression(r)&&!v.isBlockStatement(r.body)?r:null}stripAndLower(e,t){let r={...e,attributes:e.attributes.filter(i=>!t(i))};return r.kind==="Element"?this.lowerElement(r):this.lowerComponent(r)}rebuildWithChildren(e,t){let r=this.lowerAttributes(e.attributes.filter(i=>i.kind!=="EachDirective"));return e.kind==="Element"?{kind:"element",tag:e.tag,svg:e.namespace==="svg",props:r,children:t,static:!1}:{kind:"component",name:e.tag,props:r,children:t}}lowerAttributes(e){let t=[],r=[],i=!1,a=[],o=!1,l=[];for(let s of e)switch(s.kind){case"IfDirective":case"EachDirective":case"ElseDirective":break;case"Attribute":t.push(this.plainAttr(s));break;case"PropertyBinding":t.push({name:s.name,kind:"prop",expr:this.hole(s.hole).code,reactive:this.hole(s.hole).reactive});break;case"EventBinding":t.push(this.eventProp(s));break;case"RefBinding":t.push({name:"ref",kind:"ref",expr:this.hole(s.hole).code,reactive:this.hole(s.hole).reactive});break;case"Spread":t.push({name:"",kind:"spread",expr:this.hole(s.hole).code});break;case"ClassDirective":{let p=this.hole(s.hole);r.push(`${JSON.stringify(s.name)}: ${p.code}`),i=i||p.reactive;break}case"StyleDirective":{let p=this.hole(s.hole);a.push(`${JSON.stringify(s.name)}: ${p.code}`),o=o||p.reactive;break}case"BindDirective":t.push(...this.bindProps(s.name,this.hole(s.hole).code));break;case"UseDirective":{let p=s.name??(s.hole!=null?this.hole(s.hole).code:null);if(!p)break;l.push(s.name!=null&&s.hole!=null?`[${p}, () => (${this.hole(s.hole).code})]`:`[${p}]`);break}}return r.length>0&&t.push({name:"classList",kind:"attr",expr:`{ ${r.join(", ")} }`,reactive:i}),a.length>0&&t.push({name:"style",kind:"attr",expr:`{ ${a.join(", ")} }`,reactive:o}),l.length>0&&t.push({name:"use",kind:"attr",expr:`[${l.join(", ")}]`}),t}eventProp(e){let t=e.name.toLowerCase(),r=this.hole(e.hole).code;if(!(e.syntax==="colon"||e.modifiers.length>0))return{name:"on"+P(e.name),kind:"event",event:{name:t,delegated:J.has(t)},expr:r};let a=this.wrapHandler(r,e.modifiers),o=this.eventOptions(e.modifiers),l=o?`[${a}, ${o}]`:a;return{name:"on:"+t,kind:"attr",expr:l}}wrapHandler(e,t){let r=t.includes("self")?"if (e.target !== e.currentTarget) return; ":"",i=[];return t.includes("prevent")&&i.push("e.preventDefault();"),t.includes("stop")&&i.push("e.stopPropagation();"),!r&&i.length===0?e:`(e) => { ${r}${i.join(" ")} return (${e})(e); }`}eventOptions(e){let t=[];return e.includes("capture")&&t.push("capture: true"),e.includes("once")&&t.push("once: true"),e.includes("passive")&&t.push("passive: true"),t.length?`{ ${t.join(", ")} }`:null}bindProps(e,t){let r=e==="checked",i=r?"change":"input",a=r?"checked":"value",o=`(${t})`;return[{name:e,kind:"attr",expr:`${o}[0]()`,reactive:!0},{name:"on"+P(i),kind:"event",event:{name:i,delegated:J.has(i)},expr:`(e) => ${o}[1](e.target.${a})`}]}plainAttr(e){let t=e.value,r=e.name;e.name==="class"?r=t&&t.kind==="hole"&&v.isObjectExpression(this.hole(t.hole).node)?"classList":"className":e.name==="html"&&(r="innerHTML");let a={name:r,kind:"attr"};if(t==null)return a.literal=!0,a;if(t.kind==="static")return a.literal=t.value,a;if(t.kind==="hole"){let s=this.hole(t.hole);return a.expr=s.code,a.reactive=s.reactive,a}let o=!1,l=t.parts.map(s=>{if("text"in s)return Y(s.text);let p=this.hole(s.hole);return o=o||p.reactive,"${"+p.code+"}"}).join("");return a.expr="`"+l+"`",a.reactive=o,a}};function R(n,e,t={}){let r=n.quasi,i=r.expressions.map(l=>{let s=l;return{node:s,code:d(s,e),reactive:u(s)}}),a=ee(r),{root:o}=Z(a,{svg:t.svg});return new E(i,e).lowerRoot(o.children)}function ee(n){let e=[];return n.quasis.forEach((t,r)=>{let i=t.value.cooked??t.value.raw;if(e.push({kind:"static",text:i,start:t.start??0}),r<n.expressions.length){let a=n.expressions[r];e.push({kind:"hole",index:r,start:a.start??0,end:a.end??0})}}),e}export{R as lowerLitTemplate};