@relevate/katachi 0.1.0 → 0.2.0

package/dist/targets/liquid.js

@@ -0,0 +1,422 @@
+import { emitInterpolatedTagName, wrapHtmlAttribute } from "./shared.js";
+function nextTempName(context, prefix) {
+    context.tempId += 1;
+    return `__katachi_${prefix}_${context.tempId}`;
+}
+function pad(indent) {
+    return "  ".repeat(indent);
+}
+function escapeLiquidString(value) {
+    return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function translateTsxExprToLiquid(source) {
+    let result = source.trim();
+    result = result.replace(/([A-Za-z0-9_().]+)\.clone\(\)\.unwrap\(\)/g, "$1");
+    result = result.replace(/([A-Za-z0-9_().]+)\.unwrap\(\)/g, "$1");
+    result = result.replace(/([A-Za-z0-9_().]+)\.is_some\(\)/g, "$1 != nil");
+    result = result.replace(/([A-Za-z0-9_().]+)\.is_none\(\)/g, "$1 == nil");
+    result = result.replace(/!\s*([A-Za-z0-9_().]+)\.is_empty\(\)/g, "$1 != blank");
+    result = result.replace(/([A-Za-z0-9_().]+)\.is_empty\(\)/g, "$1 == blank");
+    result = result.replace(/([A-Za-z0-9_().]+)\.len\(\)/g, "$1.size");
+    result = result.replace(/\s===\s/g, " == ");
+    result = result.replace(/\s!==\s/g, " != ");
+    result = result.replace(/\s==\s/g, " == ");
+    result = result.replace(/\s!=\s/g, " != ");
+    result = result.replace(/\s&&\s/g, " and ");
+    result = result.replace(/\s\|\|\s/g, " or ");
+    return result;
+}
+function emitLiquidScalarExpr(expr) {
+    switch (expr.kind) {
+        case "var":
+            return expr.name;
+        case "string":
+            return `"${escapeLiquidString(expr.value)}"`;
+        case "bool":
+            return expr.value ? "true" : "false";
+        case "number":
+            return String(expr.value);
+        case "intrinsic": {
+            const [arg] = expr.args;
+            const emittedArg = arg ? emitLiquidScalarExpr(arg) : null;
+            if (!emittedArg) {
+                return null;
+            }
+            if (expr.name === "len") {
+                return `${emittedArg}.size`;
+            }
+            return null;
+        }
+        case "raw":
+            return translateTsxExprToLiquid(expr.source);
+        default:
+            return null;
+    }
+}
+function emitLiquidTagExpr(expr) {
+    const scalar = emitLiquidScalarExpr(expr);
+    if (scalar) {
+        return scalar;
+    }
+    if (expr.kind === "raw") {
+        return translateTsxExprToLiquid(expr.source);
+    }
+    return "";
+}
+function emitSimpleLiquidCondition(expr) {
+    switch (expr.kind) {
+        case "var":
+            return expr.name;
+        case "bool":
+            return expr.value ? "true" : "false";
+        case "raw":
+            return translateTsxExprToLiquid(expr.source);
+        case "eq":
+        case "neq": {
+            const left = emitLiquidScalarExpr(expr.left);
+            const right = emitLiquidScalarExpr(expr.right);
+            if (!left || !right) {
+                return null;
+            }
+            return `${left} ${expr.kind === "eq" ? "==" : "!="} ${right}`;
+        }
+        case "intrinsic": {
+            const [arg] = expr.args;
+            const emittedArg = arg ? emitLiquidScalarExpr(arg) : null;
+            if (!emittedArg) {
+                return null;
+            }
+            switch (expr.name) {
+                case "isEmpty":
+                    return `${emittedArg} == blank`;
+                case "isSome":
+                    return `${emittedArg} != nil`;
+                case "isNone":
+                    return `${emittedArg} == nil`;
+                default:
+                    return null;
+            }
+        }
+        default:
+            return null;
+    }
+}
+function materializeLiquidBooleanExpr(expr, context, indent) {
+    const simple = emitSimpleLiquidCondition(expr);
+    if (simple) {
+        return {
+            prelude: [],
+            source: simple,
+        };
+    }
+    switch (expr.kind) {
+        case "and": {
+            const left = materializeLiquidBooleanExpr(expr.left, context, indent);
+            const right = materializeLiquidBooleanExpr(expr.right, context, indent);
+            const ref = nextTempName(context, "cond");
+            return {
+                prelude: [
+                    ...left.prelude,
+                    ...right.prelude,
+                    `${pad(indent)}{% assign ${ref} = false %}`,
+                    `${pad(indent)}{% if ${left.source} %}`,
+                    `${pad(indent + 1)}{% if ${right.source} %}`,
+                    `${pad(indent + 2)}{% assign ${ref} = true %}`,
+                    `${pad(indent + 1)}{% endif %}`,
+                    `${pad(indent)}{% endif %}`,
+                ],
+                source: ref,
+            };
+        }
+        case "or": {
+            const left = materializeLiquidBooleanExpr(expr.left, context, indent);
+            const right = materializeLiquidBooleanExpr(expr.right, context, indent);
+            const ref = nextTempName(context, "cond");
+            return {
+                prelude: [
+                    ...left.prelude,
+                    ...right.prelude,
+                    `${pad(indent)}{% assign ${ref} = false %}`,
+                    `${pad(indent)}{% if ${left.source} %}`,
+                    `${pad(indent + 1)}{% assign ${ref} = true %}`,
+                    `${pad(indent)}{% elsif ${right.source} %}`,
+                    `${pad(indent + 1)}{% assign ${ref} = true %}`,
+                    `${pad(indent)}{% endif %}`,
+                ],
+                source: ref,
+            };
+        }
+        case "not": {
+            const inner = materializeLiquidBooleanExpr(expr.expr, context, indent);
+            const ref = nextTempName(context, "cond");
+            return {
+                prelude: [
+                    ...inner.prelude,
+                    `${pad(indent)}{% assign ${ref} = false %}`,
+                    `${pad(indent)}{% unless ${inner.source} %}`,
+                    `${pad(indent + 1)}{% assign ${ref} = true %}`,
+                    `${pad(indent)}{% endunless %}`,
+                ],
+                source: ref,
+            };
+        }
+        default: {
+            const ref = nextTempName(context, "cond");
+            return {
+                prelude: [
+                    `${pad(indent)}{% assign ${ref} = false %}`,
+                ],
+                source: ref,
+            };
+        }
+    }
+}
+function materializeLiquidBooleanValue(expr, context, indent) {
+    const condition = materializeLiquidBooleanExpr(expr, context, indent);
+    const ref = nextTempName(context, "bool");
+    return {
+        prelude: [
+            ...condition.prelude,
+            `${pad(indent)}{% assign ${ref} = false %}`,
+            `${pad(indent)}{% if ${condition.source} %}`,
+            `${pad(indent + 1)}{% assign ${ref} = true %}`,
+            `${pad(indent)}{% endif %}`,
+        ],
+        source: ref,
+    };
+}
+function emitLiquidInterpolatedValue(expr, context, indent) {
+    const scalar = emitLiquidScalarExpr(expr);
+    if (scalar) {
+        return {
+            prelude: [],
+            source: `{{ ${scalar} }}`,
+        };
+    }
+    const booleanExpr = materializeLiquidBooleanValue(expr, context, indent);
+    return {
+        prelude: booleanExpr.prelude,
+        source: `{{ ${booleanExpr.source} }}`,
+    };
+}
+function emitLiquidComponentPropValue(value, context, indent) {
+    switch (value.kind) {
+        case "text":
+            return {
+                prelude: [],
+                source: `"${escapeLiquidString(value.value)}"`,
+            };
+        case "expr": {
+            const scalar = emitLiquidScalarExpr(value.expr);
+            if (scalar) {
+                return {
+                    prelude: [],
+                    source: scalar,
+                };
+            }
+            return materializeLiquidBooleanValue(value.expr, context, indent);
+        }
+        case "classList": {
+            const classVar = nextTempName(context, "class");
+            const captureLines = emitLiquidClassCapture(value, classVar, context, indent);
+            return {
+                prelude: captureLines,
+                source: classVar,
+            };
+        }
+        case "concat": {
+            const concatVar = nextTempName(context, "concat");
+            const fragments = value.parts.map((part) => {
+                if (part.kind === "string") {
+                    return part.value;
+                }
+                const scalar = emitLiquidScalarExpr(part);
+                if (scalar) {
+                    return `{{ ${scalar} }}`;
+                }
+                return "";
+            });
+            return {
+                prelude: [
+                    `${pad(indent)}{% capture ${concatVar} %}${fragments.join("")}{% endcapture %}`,
+                ],
+                source: concatVar,
+            };
+        }
+    }
+}
+function emitLiquidClassCapture(value, variableName, context, indent) {
+    const prelude = [];
+    const fragments = [];
+    for (const item of value.items) {
+        if (item.kind === "static") {
+            fragments.push(item.value);
+            continue;
+        }
+        if (item.kind === "dynamic") {
+            const scalar = emitLiquidScalarExpr(item.expr);
+            if (scalar) {
+                fragments.push(`{{ ${scalar} }}`);
+            }
+            continue;
+        }
+        const condition = materializeLiquidBooleanExpr(item.test, context, indent);
+        prelude.push(...condition.prelude);
+        fragments.push(`{% if ${condition.source} %}${item.value}{% endif %}`);
+    }
+    return [
+        ...prelude,
+        `${pad(indent)}{% capture ${variableName} %}${fragments.join(" ").trim()}{% endcapture %}`,
+    ];
+}
+function emitLiquidAttr(name, value, context, indent) {
+    switch (value.kind) {
+        case "text":
+            return {
+                prelude: [],
+                source: `${name}=${wrapHtmlAttribute(value.value)}`,
+            };
+        case "expr": {
+            const rendered = emitLiquidInterpolatedValue(value.expr, context, indent);
+            return {
+                prelude: rendered.prelude,
+                source: `${name}=${wrapHtmlAttribute(rendered.source)}`,
+            };
+        }
+        case "classList": {
+            const prelude = [];
+            const parts = [];
+            for (const item of value.items) {
+                if (item.kind === "static") {
+                    parts.push(item.value);
+                    continue;
+                }
+                if (item.kind === "dynamic") {
+                    const scalar = emitLiquidScalarExpr(item.expr);
+                    if (scalar) {
+                        parts.push(`{{ ${scalar} }}`);
+                    }
+                    continue;
+                }
+                const condition = materializeLiquidBooleanExpr(item.test, context, indent);
+                prelude.push(...condition.prelude);
+                parts.push(`{% if ${condition.source} %}${item.value}{% endif %}`);
+            }
+            return {
+                prelude,
+                source: `${name}=${wrapHtmlAttribute(parts.join(" ").trim())}`,
+            };
+        }
+        case "concat": {
+            const fragments = value.parts.map((part) => {
+                if (part.kind === "string") {
+                    return part.value;
+                }
+                const scalar = emitLiquidScalarExpr(part);
+                if (scalar) {
+                    return `{{ ${scalar} }}`;
+                }
+                return "";
+            });
+            return {
+                prelude: [],
+                source: `${name}=${wrapHtmlAttribute(fragments.join(""))}`,
+            };
+        }
+    }
+}
+function emitLiquidNode(node, context, indent = 0) {
+    switch (node.kind) {
+        case "text":
+            return `${pad(indent)}${node.value}`;
+        case "slot":
+            return `${pad(indent)}{{ ${node.name} }}`;
+        case "print": {
+            const rendered = emitLiquidInterpolatedValue(node.expr, context, indent);
+            return [...rendered.prelude, `${pad(indent)}${rendered.source}`].join("\n");
+        }
+        case "if": {
+            const condition = materializeLiquidBooleanExpr(node.test, context, indent);
+            const thenBody = node.then.map((child) => emitLiquidNode(child, context, indent + 1)).join("\n");
+            const elseBody = (node.else ?? [])
+                .map((child) => emitLiquidNode(child, context, indent + 1))
+                .join("\n");
+            const lines = [...condition.prelude, `${pad(indent)}{% if ${condition.source} %}`, thenBody];
+            if (elseBody) {
+                lines.push(`${pad(indent)}{% else %}`, elseBody);
+            }
+            lines.push(`${pad(indent)}{% endif %}`);
+            return lines.join("\n");
+        }
+        case "for": {
+            const eachExpr = emitLiquidScalarExpr(node.each);
+            if (!eachExpr) {
+                throw new Error("Liquid target only supports scalar `each` expressions");
+            }
+            const body = node.children.map((child) => emitLiquidNode(child, context, indent + 1)).join("\n");
+            const lines = [`${pad(indent)}{% for ${node.item} in ${eachExpr} %}`];
+            if (node.indexName) {
+                lines.push(`${pad(indent + 1)}{% assign ${node.indexName} = forloop.index0 %}`);
+            }
+            if (body) {
+                lines.push(body);
+            }
+            lines.push(`${pad(indent)}{% endfor %}`);
+            return lines.join("\n");
+        }
+        case "element": {
+            const prelude = [];
+            const attrEntries = Object.entries(node.attrs ?? {});
+            const attrs = attrEntries.map(([name, value]) => {
+                const rendered = emitLiquidAttr(name, value, context, indent);
+                prelude.push(...rendered.prelude);
+                return rendered.source;
+            });
+            const children = (node.children ?? []).map((child) => emitLiquidNode(child, context, indent + 1));
+            const tagName = emitInterpolatedTagName(node.tag, emitLiquidTagExpr);
+            const attrBlock = attrs.length
+                ? `\n${attrs.map((attr) => `${pad(indent + 1)}${attr}`).join("\n")}\n${pad(indent)}`
+                : "";
+            if (children.length === 0) {
+                return [...prelude, `${pad(indent)}<${tagName}${attrBlock} />`].join("\n");
+            }
+            return [
+                ...prelude,
+                `${pad(indent)}<${tagName}${attrBlock}>`,
+                ...children,
+                `${pad(indent)}</${tagName}>`,
+            ].join("\n");
+        }
+        case "component": {
+            const registration = contextTemplateRegistry.get(context)?.[node.name];
+            if (!registration?.liquidSnippet) {
+                throw new Error(`Missing Liquid component registration for ${node.name}`);
+            }
+            const prelude = [];
+            const args = [];
+            for (const [propName, propValue] of Object.entries(node.props ?? {})) {
+                const rendered = emitLiquidComponentPropValue(propValue, context, indent);
+                prelude.push(...rendered.prelude);
+                args.push(`${propName}: ${rendered.source}`);
+            }
+            if ((node.children ?? []).length > 0) {
+                const childrenVar = nextTempName(context, "children_html");
+                prelude.push(`${pad(indent)}{% capture ${childrenVar} %}`);
+                prelude.push(...(node.children ?? []).map((child) => emitLiquidNode(child, context, indent + 1)));
+                prelude.push(`${pad(indent)}{% endcapture %}`);
+                args.push(`children_html: ${childrenVar}`);
+            }
+            const renderArgs = args.length > 0 ? `, ${args.join(", ")}` : "";
+            return [
+                ...prelude,
+                `${pad(indent)}{% render '${registration.liquidSnippet}'${renderArgs} %}`,
+            ].join("\n");
+        }
+    }
+}
+const contextTemplateRegistry = new WeakMap();
+export function emitLiquidSnippet(template) {
+    const context = { tempId: 0 };
+    contextTemplateRegistry.set(context, template.componentRegistry ?? {});
+    return `${emitLiquidNode(template.template, context, 0)}\n`;
+}

package/dist/targets/react.js

@@ -1,12 +1,240 @@
-import { buildTsxComponentSource, emitTsxExpr, emitTsxNode } from "./shared.js";
+import { buildReactComponentSource, emitTsxExpr, emitTsxWithHoists, emitReactNode, } from "./shared.js";
+/**
+ * HTML attribute name → React JSX equivalent.
+ */
+const HTML_TO_REACT_ATTR = {
+    class: "className",
+    for: "htmlFor",
+    tabindex: "tabIndex",
+    readonly: "readOnly",
+    maxlength: "maxLength",
+    colspan: "colSpan",
+    rowspan: "rowSpan",
+    enctype: "encType",
+    contenteditable: "contentEditable",
+    crossorigin: "crossOrigin",
+    accesskey: "accessKey",
+    autocomplete: "autoComplete",
+    autofocus: "autoFocus",
+    autoplay: "autoPlay",
+    cellpadding: "cellPadding",
+    cellspacing: "cellSpacing",
+    charset: "charSet",
+    classid: "classID",
+    frameborder: "frameBorder",
+    novalidate: "noValidate",
+    "stroke-width": "strokeWidth",
+    "stroke-linecap": "strokeLinecap",
+    "stroke-linejoin": "strokeLinejoin",
+    "stroke-dasharray": "strokeDasharray",
+    "stroke-dashoffset": "strokeDashoffset",
+    "stroke-miterlimit": "strokeMiterlimit",
+    "stroke-opacity": "strokeOpacity",
+    "fill-opacity": "fillOpacity",
+    "fill-rule": "fillRule",
+    "clip-path": "clipPath",
+    "clip-rule": "clipRule",
+    "font-size": "fontSize",
+    "font-family": "fontFamily",
+    "font-weight": "fontWeight",
+    "text-anchor": "textAnchor",
+    "text-decoration": "textDecoration",
+    "dominant-baseline": "dominantBaseline",
+    viewbox: "viewBox",
+};
+/**
+ * Boolean HTML attributes that should emit boolean values instead of strings in React.
+ */
+const BOOLEAN_ATTRS = new Set([
+    "contentEditable",
+    "autoFocus",
+    "autoPlay",
+    "noValidate",
+    "readOnly",
+    "disabled",
+    "checked",
+    "selected",
+    "multiple",
+    "hidden",
+    "open",
+    "required",
+    "spellCheck",
+    "draggable",
+]);
+/**
+ * Converts a CSS property name to its camelCase React equivalent.
+ */
+function cssPropToCamelCase(prop) {
+    // Handle vendor prefixes like -webkit-, -moz-, etc.
+    const cleaned = prop.startsWith("-") ? prop.slice(1) : prop;
+    return cleaned.replace(/-([a-z])/g, (_match, char) => char.toUpperCase());
+}
+/**
+ * Parses a static CSS string into a React CSSProperties-style object literal.
+ * e.g., "font-variant-ligatures: none; color: red" → { fontVariantLigatures: "none", color: "red" }
+ */
+function cssStringToReactStyle(css) {
+    const declarations = css
+        .split(";")
+        .map((d) => d.trim())
+        .filter(Boolean);
+    const props = declarations.map((decl) => {
+        const colonIdx = decl.indexOf(":");
+        if (colonIdx === -1)
+            return null;
+        const prop = decl.slice(0, colonIdx).trim();
+        const value = decl.slice(colonIdx + 1).trim();
+        const reactProp = cssPropToCamelCase(prop);
+        // Numeric values without units should be numbers, but CSS values are generally strings
+        return `${reactProp}: ${JSON.stringify(value)}`;
+    }).filter(Boolean);
+    return `{{ ${props.join(", ")} }}`;
+}
+/**
+ * Emits an expression for use inside a string context (template literal).
+ * `and` expressions are converted to ternaries so that `false` doesn't
+ * render as the literal string "false".
+ * e.g., `!isEmpty(color) && color` → `!isEmpty(color) ? color : ""`
+ */
+function emitStringConcatExpr(expr) {
+    if (expr.kind === "and") {
+        return `(${emitTsxExpr(expr.left)} ? ${emitTsxExpr(expr.right)} : "")`;
+    }
+    return emitTsxExpr(expr);
+}
+/**
+ * Emits a concat AttrValue as a React-compatible expression.
+ * For style attributes, converts to CSSProperties object.
+ * For other attributes, emits as template literal.
+ */
+function emitConcatValue(parts, attrName) {
+    if (attrName === "style") {
+        return emitConcatStyle(parts);
+    }
+    // Build a template literal from the parts
+    const segments = parts.map((part) => {
+        if (part.kind === "string") {
+            return part.value;
+        }
+        return `\${${emitStringConcatExpr(part)}}`;
+    });
+    return `{\`${segments.join("")}\`}`;
+}
+/**
+ * Converts a concat-style style attribute into a React CSSProperties object.
+ * e.g., ["background-color: ", color] → {{ backgroundColor: color }}
+ */
+function emitConcatStyle(parts) {
+    // Reconstruct the CSS template from the parts and parse it
+    // Strategy: join string parts and expression placeholders, then parse declarations
+    const declarations = [];
+    let currentProp = "";
+    let currentValueParts = [];
+    let parsingProp = true;
+    for (const part of parts) {
+        if (part.kind === "string") {
+            const text = part.value;
+            let remaining = text;
+            while (remaining.length > 0) {
+                if (parsingProp) {
+                    const colonIdx = remaining.indexOf(":");
+                    if (colonIdx !== -1) {
+                        currentProp += remaining.slice(0, colonIdx);
+                        remaining = remaining.slice(colonIdx + 1).trimStart();
+                        parsingProp = false;
+                    }
+                    else {
+                        const semiIdx = remaining.indexOf(";");
+                        if (semiIdx !== -1) {
+                            remaining = remaining.slice(semiIdx + 1).trimStart();
+                        }
+                        else {
+                            currentProp += remaining;
+                            remaining = "";
+                        }
+                    }
+                }
+                else {
+                    // Parsing value
+                    const semiIdx = remaining.indexOf(";");
+                    if (semiIdx !== -1) {
+                        const valueBefore = remaining.slice(0, semiIdx).trim();
+                        if (valueBefore) {
+                            currentValueParts.push({ kind: "string", value: valueBefore });
+                        }
+                        declarations.push({ prop: currentProp.trim(), valueParts: currentValueParts });
+                        currentProp = "";
+                        currentValueParts = [];
+                        parsingProp = true;
+                        remaining = remaining.slice(semiIdx + 1).trimStart();
+                    }
+                    else {
+                        if (remaining) {
+                            currentValueParts.push({ kind: "string", value: remaining });
+                        }
+                        remaining = "";
+                    }
+                }
+            }
+        }
+        else {
+            // Expression part
+            if (parsingProp) {
+                // Unusual: expression in property name position. Treat as dynamic.
+                currentProp += `__expr__`;
+                currentValueParts.push(part);
+            }
+            else {
+                currentValueParts.push(part);
+            }
+        }
+    }
+    // Flush remaining declaration
+    if (currentProp.trim() && currentValueParts.length > 0) {
+        declarations.push({ prop: currentProp.trim(), valueParts: currentValueParts });
+    }
+    const props = declarations.map(({ prop, valueParts }) => {
+        const reactProp = cssPropToCamelCase(prop);
+        if (valueParts.length === 1 && valueParts[0].kind === "string") {
+            return `${reactProp}: ${JSON.stringify(valueParts[0].value)}`;
+        }
+        if (valueParts.length === 1) {
+            return `${reactProp}: ${emitStringConcatExpr(valueParts[0])}`;
+        }
+        // Multiple parts: use template literal
+        const segments = valueParts.map((p) => p.kind === "string" ? p.value : `\${${emitStringConcatExpr(p)}}`);
+        return `${reactProp}: \`${segments.join("")}\``;
+    });
+    return `{{ ${props.join(", ")} }}`;
+}
+/**
+ * Maps an HTML attribute name to its React JSX equivalent.
+ */
+function toReactAttrName(name) {
+    return HTML_TO_REACT_ATTR[name] ?? name;
+}
 /**
  * Emits attributes for React-compatible TSX output.
  */
 function emitReactAttr(name, value) {
-    const attrName = name === "class" ? "className" : name;
+    const attrName = toReactAttrName(name);
     switch (value.kind) {
-        case "text":
+        case "text": {
+            // Handle style attribute: convert CSS string to CSSProperties object
+            if (attrName === "style") {
+                return `${attrName}=${cssStringToReactStyle(value.value)}`;
+            }
+            // Handle boolean attributes: emit boolean value instead of string
+            if (BOOLEAN_ATTRS.has(attrName)) {
+                if (value.value === "true" || value.value === "") {
+                    return `${attrName}={true}`;
+                }
+                if (value.value === "false") {
+                    return `${attrName}={false}`;
+                }
+            }
             return `${attrName}=${JSON.stringify(value.value)}`;
+        }
         case "expr":
             return `${attrName}={${emitTsxExpr(value.expr)}}`;
         case "classList": {
@@ -14,15 +242,21 @@ function emitReactAttr(name, value) {
                 if (item.kind === "static") {
                     return JSON.stringify(item.value);
                 }
+                if (item.kind === "dynamic") {
+                    return emitTsxExpr(item.expr);
+                }
                 return `${emitTsxExpr(item.test)} ? ${JSON.stringify(item.value)} : null`;
             });
             return `${attrName}={[${items.join(", ")}].filter(Boolean).join(" ")}`;
         }
+        case "concat":
+            return `${attrName}=${emitConcatValue(value.parts, attrName)}`;
     }
 }
 export function emitReact(node, indent = 0) {
-    return emitTsxNode(node, emitReactAttr, indent);
+    return emitReactNode(node, emitReactAttr, indent);
 }
 export function emitReactComponent(template) {
-    return buildTsxComponentSource(template, emitReact(template.template, 2));
+    const { body, hoists } = emitTsxWithHoists(template, emitReactNode, emitReactAttr);
+    return buildReactComponentSource(template, body, hoists);
 }