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

package/dist/lower/jsx.js

@@ -4,6 +4,8 @@ import { shapeOf } from '../analyze/expr-shape.js';
 import { analyzeStatic } from '../optimize/analyze-static.js';
 import { cleanTemplateText } from './text.js';
 import { paren } from '../analyze/paren.js';
+import { markHole } from '../transform/source-locations.js';
+import { imperativeBackend, inlineTemplates } from '../codegen/backends/imperative.js';
 export const SVG_TAGS = new Set([
     'svg', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline',
     'ellipse', 'g', 'defs', 'clipPath', 'text',
@@ -14,6 +16,29 @@ const DELEGATED = new Set([
     'keydown', 'keyup', 'keypress', 'mousedown', 'mouseup',
 ]);
 const isReactive = (node) => isReactiveShape(shapeOf(node));
+/** The tag that carries directives and renders only its content. Never a custom element: no dash. */
+const CONTAINER = 'container';
+/** An intrinsic element's `if`, `else`, `each` or `key` attribute, as written. */
+function directive(node, name) {
+    if (node.type !== 'JSXElement')
+        return undefined;
+    const opening = node.openingElement;
+    if (opening.name.type !== 'JSXIdentifier' || opening.name.name[0] !== opening.name.name[0].toLowerCase())
+        return undefined;
+    return opening.attributes.find((a) => a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && a.name.name === name);
+}
+/** The expression a directive holds: `if={cond}`. */
+function directiveExpr(attr) {
+    const v = attr.value;
+    return v?.type === 'JSXExpressionContainer' && v.expression?.type !== 'JSXEmptyExpression' ? v.expression : undefined;
+}
+/** A nested subtree as code, for `Show`'s fallback and `For`'s render function. */
+function emitIR(ir, ctx) {
+    const { code, imports, templates } = imperativeBackend.emit(ir, {});
+    for (const s of imports)
+        ctx.used.add(s);
+    return inlineTemplates(code, templates);
+}
 /** Only when the host asked for source locations, the flag that records usage sites too. */
 const posOf = (node, ctx) => {
     if (!ctx.sourceFile)
@@ -108,9 +133,18 @@ function attrExprCode(attr, ctx) {
     }
     return null;
 }
-function buildProps(attrs, ctx) {
+/**
+ * `element`: the tag is a DOM element. Only there are class:/style: and a style object taken
+ * apart; a component gets its props as written.
+ */
+function buildProps(attrs, ctx, element = false) {
     const props = [];
     const usePairs = []; // use:name directives collapse into one `use` prop
+    // class:x and style:x collapse into one classList / style object, as in templates; each
+    // value that moves is an accessor in it, so the runtime updates that one key.
+    const classEntries = [];
+    const styleEntries = [];
+    let styleAt;
     for (const a of attrs) {
         if (a.type === 'JSXSpreadAttribute') {
             props.push({ name: '', kind: 'spread', expr: ctx.code(a.argument) });
@@ -131,6 +165,33 @@ function buildProps(attrs, ctx) {
             usePairs.push(opts != null ? `[${dir}, () => ${paren(opts, 'arrowBody')}]` : `[${dir}]`);
             continue;
         }
+        if (element && (ns === 'class' || ns === 'style')) {
+            const key = JSON.stringify(a.name.name.name);
+            const v = a.value;
+            let value;
+            if (v == null)
+                value = 'true';
+            else if (isString(v))
+                value = JSON.stringify(literalOf(v));
+            else if (v.type === 'JSXExpressionContainer' && v.expression?.type !== 'JSXEmptyExpression') {
+                value = keyValue(v.expression, ctx);
+                if (ns === 'style')
+                    styleAt ??= posOf(v.expression, ctx);
+            }
+            else
+                continue;
+            (ns === 'class' ? classEntries : styleEntries).push(`${key}: ${value}`);
+            continue;
+        }
+        // style={{ … }}: one entry per property, so `--gap` moving does not rewrite `margin`.
+        if (element && a.name.type === 'JSXIdentifier' && a.name.name === 'style' && a.value?.type === 'JSXExpressionContainer') {
+            const entries = objectEntries(a.value.expression, ctx);
+            if (entries) {
+                styleEntries.unshift(...entries);
+                styleAt = posOf(a.value.expression, ctx);
+                continue;
+            }
+        }
         // oncapture:name -> native on:name with { capture: true }
         if (ns === 'oncapture') {
             const evt = a.name.name.name.toLowerCase();
@@ -140,13 +201,66 @@ function buildProps(attrs, ctx) {
         }
         props.push(buildAttr(a, ctx));
     }
+    if (classEntries.length > 0)
+        props.push({ name: 'classList', kind: 'attr', expr: `{ ${classEntries.join(', ')} }`, reactive: false });
+    if (styleEntries.length > 0) {
+        const entries = `{ ${styleEntries.join(', ')} }`;
+        // A style the object form could not take apart (a string, a variable) goes first, and
+        // the keys after it: the runtime applies an array in order.
+        const base = props.findIndex((p) => p.name === 'style' && p.kind === 'attr');
+        if (base === -1)
+            props.push({ name: 'style', kind: 'attr', expr: entries, reactive: false, ...(styleAt ? { at: styleAt } : {}) });
+        else {
+            const prop = props[base];
+            const value = prop.literal !== 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 } : {}) };
+        }
+    }
     if (usePairs.length > 0)
         props.push({ name: 'use', kind: 'attr', expr: `[${usePairs.join(', ')}]` });
     return props;
 }
+/** A value inside a classList / style object: an accessor when it moves. */
+function keyValue(expr, ctx) {
+    const code = ctx.code(expr);
+    if (!isReactive(expr))
+        return code;
+    const accessor = `() => ${paren(code, 'arrowBody')}`;
+    const at = posOf(expr, ctx);
+    return at ? markHole(accessor, at.line, at.column) : accessor;
+}
+/** `{ a: x, '--b': y }` as object entries; null for anything with a spread or a method. */
+function objectEntries(expr, ctx) {
+    if (expr?.type !== 'ObjectExpression')
+        return null;
+    const entries = [];
+    for (const p of expr.properties) {
+        if (p.type !== 'ObjectProperty')
+            return null;
+        const key = p.computed
+            ? `[${ctx.code(p.key)}]`
+            : p.key.type === 'Identifier'
+                ? JSON.stringify(p.key.name)
+                : JSON.stringify(String(p.key.value));
+        entries.push(`${key}: ${keyValue(p.value, ctx)}`);
+    }
+    return entries;
+}
 function buildChildren(children, ctx) {
     const out = [];
-    for (const child of children) {
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (directive(child, 'if')) {
+            // The next element, past whitespace, is the fallback when it says `else`.
+            let next = i + 1;
+            while (next < children.length && children[next].type === 'JSXText' && !cleanTemplateText(children[next].value))
+                next++;
+            const fallback = directive(children[next], 'else') ? children[next] : null;
+            out.push(buildIf(child, fallback, ctx));
+            if (fallback)
+                i = next;
+            continue;
+        }
         if (child.type === 'JSXText') {
             // Drop whitespace-only text spanning a newline so a lone child stays lone , 
             // an array insert will not reactively bind a memo/component inside it.
@@ -167,6 +281,9 @@ function buildChildren(children, ctx) {
             }
         }
         else if (child.type === 'JSXElement' || child.type === 'JSXFragment') {
+            // A `<style>` the compiler took out leaves no child behind, not even an empty insert.
+            if (ctx.dropStyles?.has(child.start))
+                continue;
             out.push(buildNode(child, ctx));
         }
         else if (child.type === 'JSXSpreadChild') {
@@ -190,21 +307,102 @@ function readLoad(attrs) {
     }
     return undefined;
 }
+/** `<el if={cond}>` and an optional `<el else>` after it → `<Show when fallback>`. */
+function buildIf(node, fallback, ctx) {
+    const cond = directiveExpr(directive(node, 'if'));
+    const props = [
+        cond
+            ? { name: 'when', kind: 'attr', expr: ctx.code(cond), reactive: isReactive(cond), at: posOf(cond, ctx) }
+            : { name: 'when', kind: 'attr', literal: true },
+    ];
+    if (fallback) {
+        props.push({ name: 'fallback', kind: 'attr', expr: emitIR(buildElement(fallback, ctx, ['else']), ctx), jsxElement: true });
+    }
+    return { kind: 'component', name: 'Show', props, children: [buildElement(node, ctx, ['if'])] };
+}
+/**
+ * `<el each={items} key?>{(item) => …}</el>` → `<el><For each by>{…}</For></el>`: the
+ * content repeats, the element does not. Null when there is no `each`.
+ */
+function buildEach(node, ctx) {
+    const attr = directive(node, 'each');
+    if (!attr)
+        return null;
+    const list = directiveExpr(attr);
+    const props = [
+        list
+            ? { name: 'each', kind: 'attr', expr: ctx.code(list), reactive: isReactive(list), at: posOf(list, ctx) }
+            : { name: 'each', kind: 'attr', expr: '[]' },
+    ];
+    const key = directive(node, 'key');
+    if (key) {
+        const keyExpr = directiveExpr(key);
+        const by = isString(key.value)
+            ? `(item) => item[${JSON.stringify(literalOf(key.value))}]`
+            : keyExpr
+                ? ctx.code(keyExpr)
+                : undefined;
+        if (by)
+            props.push({ name: 'by', kind: 'attr', expr: by });
+    }
+    const content = node.children.filter((c) => !(c.type === 'JSXText' && !cleanTemplateText(c.value)));
+    const only = content.length === 1 && content[0].type === 'JSXExpressionContainer' ? content[0].expression : null;
+    let render;
+    if (only && (only.type === 'ArrowFunctionExpression' || only.type === 'FunctionExpression')) {
+        const fn = ctx.code(only);
+        // A body that reads signals, `{(it) => it.label + count()}`, is handed back as an
+        // accessor so the runtime binds it; a body that builds elements needs nothing.
+        const live = only.type === 'ArrowFunctionExpression' && only.body.type !== 'BlockStatement' && isReactive(only.body);
+        render = live ? `(...args) => () => (${fn})(...args)` : fn;
+    }
+    else {
+        const built = buildChildren(node.children, ctx);
+        const ir = built.length === 1 ? built[0] : { kind: 'fragment', children: built };
+        render = `() => ${paren(emitIR(ir, ctx), 'arrowBody')}`;
+    }
+    return { kind: 'component', name: 'For', props, children: [{ kind: 'expr', code: render, reactive: false }] };
+}
+/** An element, with the directives already handled by the caller left out. */
+function buildElement(node, ctx, handled) {
+    const skip = new Set(handled);
+    // `key` is only a directive beside `each`; anywhere else it is an ordinary attribute.
+    const directives = new Set(['if', 'else', 'each', ...(directive(node, 'each') ? ['key'] : [])]);
+    const attributes = node.openingElement.attributes.filter((a) => !(a.type === 'JSXAttribute' && a.name.type === 'JSXIdentifier' && (skip.has(a.name.name) || directives.has(a.name.name))));
+    const { tag } = tagInfo(node.openingElement.name, ctx);
+    const each = buildEach(node, ctx);
+    const children = each ? [each] : buildChildren(node.children, ctx);
+    if (tag === CONTAINER)
+        return children.length === 1 ? children[0] : { kind: 'fragment', children };
+    const at = ctx.sourceFile && node.loc?.start
+        ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column }
+        : undefined;
+    const props = buildProps(attributes, ctx, true);
+    // A scoped style's mark: a static attribute, so it is part of the template itself and
+    // every render carries it, on the client, from the server and through hydration.
+    const scope = ctx.scopes?.find((s) => node.start >= s.start && node.end <= s.end);
+    if (scope)
+        props.unshift({ name: 'data-fx-s', kind: 'attr', literal: scope.value });
+    return { kind: 'element', tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...(at ? { at } : {}) };
+}
 function buildNode(node, ctx) {
     if (node.type === 'JSXFragment') {
         return { kind: 'fragment', children: buildChildren(node.children, ctx) };
     }
+    if (directive(node, 'if'))
+        return buildIf(node, null, ctx);
+    // Its CSS went to the host; nothing of the element is rendered.
+    if (ctx.dropStyles?.has(node.start))
+        return { kind: 'fragment', children: [] };
     const { tag, component } = tagInfo(node.openingElement.name, ctx);
+    if (!component)
+        return buildElement(node, ctx, []);
     const props = buildProps(node.openingElement.attributes, ctx);
     const children = buildChildren(node.children, ctx);
     const at = ctx.sourceFile && node.loc?.start
         ? { file: ctx.sourceFile, line: node.loc.start.line, column: node.loc.start.column }
         : undefined;
-    if (component) {
-        const load = readLoad(node.openingElement.attributes);
-        return { kind: 'component', name: tag, props, children, ...(load ? { load } : {}), ...(at ? { at } : {}) };
-    }
-    return { kind: 'element', tag, svg: SVG_TAGS.has(tag), props, children, static: false, ...(at ? { at } : {}) };
+    const load = readLoad(node.openingElement.attributes);
+    return { kind: 'component', name: tag, props, children, ...(load ? { load } : {}), ...(at ? { at } : {}) };
 }
 /** Build IR from a JSXElement or JSXFragment. */
 export function buildJsxIR(node, ctx) {