sinwan-compiler 0.3.1 → 1.0.0

package/dist/index.js

@@ -1,6 +1,53 @@
 // @bun
 import {
+  identifier,
+  stringLiteral,
+  numericLiteral,
+  callExpression,
+  memberExpression,
+  variableDeclarator,
+  variableDeclaration,
+  arrayExpression,
+  objectExpression,
+  objectProperty,
+  importSpecifier,
+  importDeclaration,
+  jsxExpressionContainer,
+  blockStatement,
+  returnStatement,
+  binaryExpression,
+  conditionalExpression,
+  unaryExpression,
+  isNode,
+  isIdentifier,
+  isStringLiteral,
+  isNumericLiteral,
+  isBooleanLiteral,
+  isNullLiteral,
+  isTemplateLiteral,
+  templateElementRaw,
+  isParenthesizedExpression,
+  unwrapParens,
+  isObjectExpression,
+  isObjectProperty,
+  isObjectPattern,
+  isRestElement,
+  isAssignmentPattern,
+  isBlockStatement,
+  isArrowFunctionExpression,
+  isFunction,
+  isImportDeclaration,
+  isImportSpecifier,
+  isJSXIdentifier,
+  isJSXOpeningElement,
+  isJSXMemberExpression,
+  isExpression,
+  importedBindingName,
+  moduleSourceValue,
+  singlePath,
+  traverse,
   autoWrapComponents2,
+  parse,
   analyzeModule2,
   analyzeProject2,
   AnalyzerCache2,
@@ -17,15 +64,9 @@ import {
   propagateReactiveProps2,
   wrapReactiveExpressions2,
   runAnalyzeCli2
-} from "./chunk-fadpxq9v.js";
-
-// src/transform.ts
-import { parse } from "@babel/parser";
+} from "./chunk-rshqq0t3.js";
 
 // src/live-cc-destructure.ts
-import * as t from "@babel/types";
-import _traverse from "@babel/traverse";
-var traverse = typeof _traverse === "function" ? _traverse : _traverse.default ?? _traverse;
 var CC_SOURCE_MODULES = new Set(["sinwan", "sinwan/component"]);
 var LIVE_REST_LOCAL = "_$createLiveRest";
 var SPREAD_LOCAL = "_$getSpreadProps";
@@ -35,13 +76,15 @@ function collectCcAliases(ast) {
   const aliases = new Set;
   traverse(ast, {
     ImportDeclaration(path) {
-      const source = path.node.source.value;
+      const source = path.node.source?.value;
+      if (typeof source !== "string")
+        return;
       if (!CC_SOURCE_MODULES.has(source))
         return;
-      for (const spec of path.node.specifiers) {
-        if (!t.isImportSpecifier(spec))
+      for (const spec of path.node.specifiers ?? []) {
+        if (!isImportSpecifier(spec))
           continue;
-        const imported = t.isIdentifier(spec.imported) ? spec.imported.name : spec.imported.value;
+        const imported = importedBindingName(spec.imported);
         if (imported === "cc") {
           aliases.add(spec.local.name);
         }
@@ -53,26 +96,28 @@ function collectCcAliases(ast) {
 function parseFlatObjectPattern(pattern) {
   const props = [];
   let rest = null;
-  for (const prop of pattern.properties) {
-    if (t.isRestElement(prop)) {
-      if (!t.isIdentifier(prop.argument))
+  for (const prop of pattern.properties ?? []) {
+    if (isRestElement(prop)) {
+      if (!isIdentifier(prop.argument))
         return null;
       rest = prop.argument.name;
       continue;
     }
-    if (!t.isObjectProperty(prop) || prop.computed)
+    if (!isObjectProperty(prop) || prop.computed)
       return null;
-    if (!t.isIdentifier(prop.key) && !t.isStringLiteral(prop.key))
+    if (!isIdentifier(prop.key) && !isStringLiteral(prop.key))
+      return null;
+    if (!prop.value)
       return null;
     let value = prop.value;
     let defaultValue = null;
-    if (t.isAssignmentPattern(value)) {
+    if (isAssignmentPattern(value)) {
       defaultValue = value.right;
       value = value.left;
     }
-    if (!t.isIdentifier(value))
+    if (!isIdentifier(value))
       return null;
-    const keyName = t.isIdentifier(prop.key) ? prop.key.name : prop.key.value;
+    const keyName = isIdentifier(prop.key) ? prop.key.name : prop.key.value;
     props.push({
       key: prop.key,
       keyName,
@@ -97,36 +142,38 @@ function collectUsedNames(fnPath) {
   const used = new Set;
   fnPath.traverse({
     Identifier(p) {
-      used.add(p.node.name);
+      if (typeof p.node.name === "string")
+        used.add(p.node.name);
     }
   });
   return used;
 }
 function memberAccess(propsName, key) {
-  if (t.isIdentifier(key)) {
-    return t.memberExpression(t.identifier(propsName), t.identifier(key.name));
+  if (isIdentifier(key)) {
+    return memberExpression(identifier(propsName), identifier(key.name));
   }
-  return t.memberExpression(t.identifier(propsName), t.stringLiteral(key.value), true);
+  const computedKey = isStringLiteral(key) ? key.value : String(key.value ?? "");
+  return memberExpression(identifier(propsName), stringLiteral(computedKey), true);
 }
 function liveRead(propsName, binding) {
   const read = memberAccess(propsName, binding.key);
   if (!binding.defaultValue)
     return read;
-  return t.conditionalExpression(t.binaryExpression("===", memberAccess(propsName, binding.key), t.unaryExpression("void", t.numericLiteral(0))), binding.defaultValue, read);
+  return conditionalExpression(binaryExpression("===", memberAccess(propsName, binding.key), unaryExpression("void", numericLiteral(0))), binding.defaultValue, read);
 }
 function ensureBlockBody(fn) {
-  if (t.isBlockStatement(fn.body))
+  if (isBlockStatement(fn.body))
     return fn.body;
-  const body = t.blockStatement([t.returnStatement(fn.body)]);
+  const body = blockStatement([returnStatement(fn.body)]);
   fn.body = body;
-  if (t.isArrowFunctionExpression(fn)) {
+  if (isArrowFunctionExpression(fn)) {
     fn.expression = false;
   }
   return body;
 }
 function replaceWithExpression(path, expr) {
   const parent = path.parent;
-  if (t.isObjectProperty(parent) && parent.shorthand && parent.value === path.node) {
+  if (isObjectProperty(parent) && parent.shorthand && parent.value === path.node) {
     parent.shorthand = false;
     parent.value = expr;
     return;
@@ -149,14 +196,14 @@ function rewriteSpreads(fnPath, liveNames, fnNode) {
   fnPath.traverse({
     JSXSpreadAttribute(p) {
       const arg = p.node.argument;
-      if (!t.isIdentifier(arg) || !liveNames.has(arg.name))
+      if (!isIdentifier(arg) || !liveNames.has(arg.name))
         return;
       const binding = p.scope.getBinding(arg.name);
       const fnParent = binding?.path.getFunctionParent();
       if (fnParent && fnParent.node !== fnNode)
         return;
-      p.node.argument = t.callExpression(t.identifier(SPREAD_LOCAL), [
-        t.identifier(arg.name)
+      p.node.argument = callExpression(identifier(SPREAD_LOCAL), [
+        identifier(arg.name)
       ]);
       changed = true;
     }
@@ -164,22 +211,22 @@ function rewriteSpreads(fnPath, liveNames, fnNode) {
   return changed;
 }
 function hasLocalSpecifier(stmt, local) {
-  return stmt.specifiers.some((spec) => t.isImportSpecifier(spec) && spec.local.name === local);
+  return stmt.specifiers.some((spec) => isImportSpecifier(spec) && spec.local.name === local);
 }
 function ensureComponentImport(ast, imported, local) {
   let target = null;
   for (const stmt of ast.program.body) {
-    if (!t.isImportDeclaration(stmt))
+    if (!isImportDeclaration(stmt))
       continue;
     if (hasLocalSpecifier(stmt, local))
       return;
-    if (stmt.source.value === "sinwan/component") {
+    if (moduleSourceValue(stmt.source) === "sinwan/component") {
       target = stmt;
-    } else if (stmt.source.value === "sinwan" && target === null) {
+    } else if (moduleSourceValue(stmt.source) === "sinwan" && target === null) {
       target = stmt;
     }
   }
-  const spec = t.importSpecifier(t.identifier(local), t.identifier(imported));
+  const spec = importSpecifier(identifier(local), identifier(imported));
   if (target) {
     target.specifiers.push(spec);
   }
@@ -193,16 +240,19 @@ function copyPatternType(pattern, id) {
   }
 }
 function rewriteFunctionDestructure(fnPath) {
+  if (!isFunction(fnPath.node)) {
+    return { rest: false, spread: false };
+  }
   const fn = fnPath.node;
   const param = fn.params[0];
   if (!param) {
     return { rest: false, spread: false };
   }
-  if (t.isIdentifier(param)) {
+  if (isIdentifier(param)) {
     const spread = rewriteSpreads(fnPath, new Set([param.name]), fn);
     return { rest: false, spread };
   }
-  if (!t.isObjectPattern(param)) {
+  if (!isObjectPattern(param)) {
     return { rest: false, spread: false };
   }
   const flat = parseFlatObjectPattern(param);
@@ -233,16 +283,16 @@ function rewriteFunctionDestructure(fnPath) {
       replaceWithExpression(p, liveRead(propsName, binding));
     }
   });
-  const propsId = t.identifier(propsName);
+  const propsId = identifier(propsName);
   copyPatternType(param, propsId);
   fn.params[0] = propsId;
   const liveNames = new Set([propsName]);
   if (flat.rest) {
     const body = ensureBlockBody(fn);
-    body.body.unshift(t.variableDeclaration("const", [
-      t.variableDeclarator(t.identifier(flat.rest), t.callExpression(t.identifier(LIVE_REST_LOCAL), [
-        t.identifier(propsName),
-        t.arrayExpression(flat.props.map((binding) => t.stringLiteral(binding.keyName)))
+    body.body.unshift(variableDeclaration("const", [
+      variableDeclarator(identifier(flat.rest), callExpression(identifier(LIVE_REST_LOCAL), [
+        identifier(propsName),
+        arrayExpression(flat.props.map((binding) => stringLiteral(binding.keyName)))
       ]))
     ]));
     liveNames.add(flat.rest);
@@ -259,13 +309,15 @@ function rewriteLiveCcDestructure(ast) {
   traverse(ast, {
     CallExpression(path) {
       const callee = path.node.callee;
-      if (!t.isIdentifier(callee) || !aliases.has(callee.name))
-        return;
-      const firstArg = path.node.arguments[0];
-      if (!firstArg || !t.isFunction(firstArg))
+      if (!isIdentifier(callee) || !aliases.has(callee.name))
         return;
       const argPaths = path.get("arguments");
-      const fnPath = argPaths[0];
+      let fnPath = Array.isArray(argPaths) ? argPaths[0] : argPaths;
+      if (!fnPath)
+        return;
+      while (isParenthesizedExpression(fnPath.node)) {
+        fnPath = singlePath(fnPath.get("expression"));
+      }
       const result = rewriteFunctionDestructure(fnPath);
       needsRest = needsRest || result.rest;
       needsSpread = needsSpread || result.spread;
@@ -279,13 +331,42 @@ function rewriteLiveCcDestructure(ast) {
   }
   return { rest: needsRest, spread: needsSpread };
 }
-
+// src/ast/generate.ts
+import { print } from "esrap";
+import tsx from "esrap/languages/tsx";
+function programOf(ast) {
+  if (ast.type === "File" && ast.program) {
+    return ast.program;
+  }
+  return ast;
+}
+function esrapComments(list) {
+  if (!list || list.length === 0)
+    return;
+  return list.map((comment) => ({
+    type: comment.type === "CommentLine" || comment.type === "Line" ? "Line" : "Block",
+    value: comment.value
+  }));
+}
+function generate(ast, options = {}, _code) {
+  const root = programOf(ast);
+  const language = tsx({
+    quotes: "double",
+    getLeadingComments: (node) => esrapComments(node.leadingComments),
+    getTrailingComments: (node) => esrapComments(node.trailingComments)
+  });
+  const result = print(root, language, {
+    sourceMapSource: options.sourceFileName,
+    sourceMapContent: _code
+  });
+  const map = options.sourceMaps && result.map ? {
+    ...result.map,
+    file: options.sourceFileName,
+    sources: options.sourceFileName ? [options.sourceFileName] : result.map.sources
+  } : options.sourceMaps ? result.map : null;
+  return { code: result.code, map };
+}
 // src/transform.ts
-import _generate from "@babel/generator";
-import * as t2 from "@babel/types";
-import _traverse2 from "@babel/traverse";
-var generate = typeof _generate === "function" ? _generate : _generate.default ?? _generate;
-var traverse2 = typeof _traverse2 === "function" ? _traverse2 : _traverse2.default ?? _traverse2;
 var COMPILER_TEMPLATE_SLOT_PROTOCOL = {
   slotPrefix: "s",
   encodeSlot(index) {
@@ -360,29 +441,41 @@ function htmlAttributeName(attrName) {
   return attrName;
 }
 function jsxAttrName(attr) {
-  if (attr.type !== "JSXAttribute" || attr.name.type !== "JSXIdentifier") {
+  if (attr.type !== "JSXAttribute")
     return;
+  const n = attr.name;
+  if (!n || typeof n === "string")
+    return;
+  if (n.type === "JSXIdentifier") {
+    return typeof n.name === "string" ? n.name : undefined;
+  }
+  if (n.type === "JSXNamespacedName") {
+    const namespace = n.namespace;
+    const name = n.name;
+    return `${namespace.name}:${name.name}`;
   }
-  return attr.name.name;
 }
 function hasAttr(attributes, name) {
-  for (const attr of attributes) {
+  for (const attr of attributes ?? []) {
     if (jsxAttrName(attr) === name)
       return true;
   }
   return false;
 }
 function attrIsExpression(attributes, name) {
-  for (const attr of attributes) {
+  for (const attr of attributes ?? []) {
     if (attr.type !== "JSXAttribute" || jsxAttrName(attr) !== name)
       continue;
-    return attr.value?.type === "JSXExpressionContainer";
+    return isNode(attr.value) && attr.value.type === "JSXExpressionContainer";
   }
   return false;
 }
 function elementNeedsJsxEnhancer(node) {
-  const tagName = jsxNameToString(node.openingElement.name);
-  const attrs = node.openingElement.attributes;
+  const opening = node.openingElement;
+  if (!isJSXOpeningElement(opening))
+    return false;
+  const tagName = jsxNameToString(opening.name);
+  const attrs = opening.attributes;
   switch (tagName) {
     case "select":
       return hasAttr(attrs, "defaultValue") || hasAttr(attrs, "value");
@@ -422,17 +515,17 @@ function warnSuspectedStyleInterpolation(attrValue, filename, line) {
   console.warn('[Sinwan] JSX string literal style attribute contains "${...}" which will not be interpolated. ' + "Use style={`...${...}`} instead. (" + filename + location + ")");
 }
 function isLiteralStyleValue(expr) {
-  return t2.isStringLiteral(expr) || t2.isNumericLiteral(expr) || t2.isBooleanLiteral(expr) || t2.isNullLiteral(expr);
+  return isStringLiteral(expr) || isNumericLiteral(expr) || isBooleanLiteral(expr) || isNullLiteral(expr);
 }
 function isStaticStyleValue(expr) {
-  if (t2.isStringLiteral(expr))
+  if (isStringLiteral(expr))
     return true;
-  if (t2.isTemplateLiteral(expr) && expr.expressions.length === 0)
+  if (isTemplateLiteral(expr) && expr.expressions.length === 0)
     return true;
-  if (!t2.isObjectExpression(expr))
+  if (!isObjectExpression(expr))
     return false;
   for (const prop of expr.properties) {
-    if (!t2.isObjectProperty(prop))
+    if (!isObjectProperty(prop))
       return false;
     if (prop.computed)
       return false;
@@ -445,36 +538,36 @@ function toKebabCase(value) {
   return value.includes("-") ? value : value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 }
 function serializeStyleValue(expr) {
-  if (t2.isStringLiteral(expr))
+  if (isStringLiteral(expr))
     return expr.value;
-  if (t2.isTemplateLiteral(expr) && expr.expressions.length === 0) {
-    return expr.quasis[0]?.value?.raw ?? "";
+  if (isTemplateLiteral(expr) && (expr.expressions ?? []).length === 0) {
+    return templateElementRaw((expr.quasis ?? [])[0]);
   }
-  if (!t2.isObjectExpression(expr))
+  if (!isObjectExpression(expr))
     return "";
   const parts = [];
   for (const prop of expr.properties) {
-    if (!t2.isObjectProperty(prop))
+    if (!isObjectProperty(prop))
       continue;
     const key = prop.key;
     let name = null;
-    if (t2.isIdentifier(key))
+    if (isIdentifier(key))
       name = key.name;
-    else if (t2.isStringLiteral(key))
+    else if (isStringLiteral(key))
       name = key.value;
     if (!name)
       continue;
     const val = prop.value;
-    if (t2.isNullLiteral(val))
+    if (isNullLiteral(val))
       continue;
-    if (t2.isBooleanLiteral(val) && !val.value)
+    if (isBooleanLiteral(val) && !val.value)
       continue;
     let valueStr = "";
-    if (t2.isStringLiteral(val))
+    if (isStringLiteral(val))
       valueStr = val.value;
-    else if (t2.isNumericLiteral(val))
+    else if (isNumericLiteral(val))
       valueStr = String(val.value);
-    else if (t2.isBooleanLiteral(val))
+    else if (isBooleanLiteral(val))
       valueStr = String(val.value);
     if (valueStr === "")
       continue;
@@ -483,7 +576,8 @@ function serializeStyleValue(expr) {
   return parts.join(";");
 }
 function elementToHtml(node, slots, path, filename, counter) {
-  const tagName = jsxNameToString(node.openingElement.name);
+  const opening = node.openingElement;
+  const tagName = jsxNameToString(opening?.name);
   if (tagName === "")
     return "";
   const firstChar = tagName.charAt(0);
@@ -493,11 +587,13 @@ function elementToHtml(node, slots, path, filename, counter) {
   const isVoid = VOID_ELEMENTS.has(tagName);
   let html = `<${tagName}`;
   let textareaDefault = "";
-  for (const attr of node.openingElement.attributes) {
+  for (const attr of opening?.attributes ?? []) {
     if (attr.type === "JSXSpreadAttribute") {
       throw new Error("Cannot hoist element with spread attributes");
     }
-    const attrName = attr.name.name;
+    const attrName = jsxAttrName(attr);
+    if (!attrName)
+      continue;
     if (attrName === "children")
       continue;
     if (attrName === "ref") {
@@ -519,7 +615,7 @@ function elementToHtml(node, slots, path, filename, counter) {
       const expr = attr.value.expression;
       if (expr.type === "JSXEmptyExpression")
         continue;
-      if (attrName === "style" && t2.isExpression(expr) && isStaticStyleValue(expr)) {
+      if (attrName === "style" && isExpression(expr) && isStaticStyleValue(expr)) {
         const serialized = serializeStyleValue(expr);
         html += ` ${htmlName}="${escapeHtml(serialized)}"`;
         continue;
@@ -530,10 +626,12 @@ function elementToHtml(node, slots, path, filename, counter) {
         name: attrName,
         expr
       });
-      html += ` ${htmlName}=""`;
+      if (attrName !== "class" && !attrName.startsWith("on")) {
+        html += ` ${htmlName}=""`;
+      }
       continue;
     }
-    if (attr.value?.type === "JSXText" || attr.value?.type === "StringLiteral") {
+    if (attr.value?.type === "JSXText" || isStringLiteral(attr.value)) {
       const rawValue = attr.value.value;
       if (attrName === "style") {
         warnSuspectedStyleInterpolation(rawValue, filename, attr.value.loc?.start?.line);
@@ -556,7 +654,61 @@ function elementToHtml(node, slots, path, filename, counter) {
   html += `</${tagName}>`;
   return html;
 }
-function childrenToHtml(children, slots, path, filename, startIndex, counter) {
+function getSoleDynamicChild(children) {
+  const meaningful = [];
+  for (const child of children) {
+    if (child.type === "JSXText") {
+      if (cleanJSXText(child.value ?? ""))
+        meaningful.push(child);
+      continue;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      if (child.expression.type === "JSXEmptyExpression")
+        continue;
+      meaningful.push(child);
+      continue;
+    }
+    if (child.type === "JSXElement" || child.type === "JSXFragment") {
+      meaningful.push(child);
+    }
+  }
+  if (meaningful.length !== 1)
+    return null;
+  const only = meaningful[0];
+  if (only.type === "JSXFragment")
+    return getSoleDynamicChild(only.children);
+  if (only.type === "JSXExpressionContainer")
+    return only;
+  if (only.type === "JSXElement") {
+    const childTag = jsxIdentifierTagName(only.openingElement?.name);
+    const isComponent = !!childTag && childTag.charAt(0) === childTag.charAt(0).toUpperCase();
+    if (isComponent || elementNeedsJsxEnhancer(only))
+      return only;
+    return null;
+  }
+  return null;
+}
+function childrenToHtml(children, slots, path, filename, startIndex, counter, allowParentFill = true) {
+  if (allowParentFill && startIndex === 0) {
+    const sole = getSoleDynamicChild(children);
+    if (sole != null) {
+      counter.value++;
+      if (sole.type === "JSXExpressionContainer") {
+        slots.push({
+          path: [...path],
+          type: "child",
+          expr: sole.expression
+        });
+      } else {
+        slots.push({
+          path: [...path],
+          type: "child",
+          expr: sole
+        });
+      }
+      return { html: "", childIndex: 0 };
+    }
+  }
   let html = "";
   let childIndex = startIndex;
   for (const child of children) {
@@ -567,8 +719,18 @@ function childrenToHtml(children, slots, path, filename, startIndex, counter) {
         childIndex++;
       }
     } else if (child.type === "JSXExpressionContainer") {
-      if (child.expression.type === "JSXEmptyExpression")
+      if (child.expression.type === "JSXEmptyExpression") {
+        const comments = [
+          ...child.expression.leadingComments ?? [],
+          ...child.leadingComments ?? []
+        ];
+        for (const comment of comments) {
+          if (comment?.type === "CommentBlock" && typeof comment.value === "string") {
+            html += `<!--${comment.value.replace(/--/g, "")}-->`;
+          }
+        }
         continue;
+      }
       const slot = nextSlotId(counter);
       slots.push({
         path: [...path, childIndex],
@@ -578,8 +740,7 @@ function childrenToHtml(children, slots, path, filename, startIndex, counter) {
       html += slot;
       childIndex++;
     } else if (child.type === "JSXElement") {
-      const childName = child.openingElement.name;
-      const childTag = childName.type === "JSXIdentifier" ? childName.name : "";
+      const childTag = jsxIdentifierTagName(child.openingElement?.name);
       const isFirstCharUpper = childTag && childTag.charAt(0) === childTag.charAt(0).toUpperCase();
       if (isFirstCharUpper || elementNeedsJsxEnhancer(child)) {
         const slot = nextSlotId(counter);
@@ -595,7 +756,7 @@ function childrenToHtml(children, slots, path, filename, startIndex, counter) {
         childIndex++;
       }
     } else if (child.type === "JSXFragment") {
-      const fragResult = childrenToHtml(child.children, slots, path, filename, childIndex, counter);
+      const fragResult = childrenToHtml(child.children, slots, path, filename, childIndex, counter, false);
       html += fragResult.html;
       childIndex = fragResult.childIndex;
     }
@@ -603,13 +764,43 @@ function childrenToHtml(children, slots, path, filename, startIndex, counter) {
   return { html, childIndex };
 }
 function jsxNameToString(name) {
-  if (name.type === "JSXIdentifier")
+  if (isJSXIdentifier(name))
     return name.name;
-  if (name.type === "JSXMemberExpression") {
+  if (isJSXMemberExpression(name)) {
     return jsxNameToString(name.object) + "." + jsxNameToString(name.property);
   }
   return "";
 }
+function jsxIdentifierTagName(name) {
+  return isJSXIdentifier(name) ? name.name : "";
+}
+function rendererHelperImported(body, local) {
+  for (const statement of body) {
+    if (!isImportDeclaration(statement))
+      continue;
+    const source = moduleSourceValue(statement.source);
+    if (source !== "sinwan/renderer" && source !== "sinwan/renderer/web") {
+      continue;
+    }
+    for (const specifier of statement.specifiers ?? []) {
+      if (isImportSpecifier(specifier) && isIdentifier(specifier.local) && specifier.local.name === local) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function isStructuralJsxChild(path) {
+  let cur = path.parentPath;
+  while (cur) {
+    if (cur.isJSXExpressionContainer())
+      return false;
+    if (cur.isJSXElement())
+      return true;
+    cur = cur.parentPath;
+  }
+  return false;
+}
 function transformJSX(code, filename, options = {}) {
   const ast = parse(code, {
     sourceType: "module",
@@ -619,6 +810,8 @@ function transformJSX(code, filename, options = {}) {
   autoWrapComponents2(ast, filename);
   rewriteLiveCcDestructure(ast);
   wrapReactiveExpressions2(ast, {
+    derivedLocals: options.derivedLocals,
+    dev: options.dev,
     explicitBindings: options.explicitBindings,
     analyze: options.analyze,
     analyzeMetadata: options.analyzeMetadata,
@@ -628,18 +821,20 @@ function transformJSX(code, filename, options = {}) {
   const hoist = options.hoist !== false;
   const templates = [];
   let templateCounter = 0;
-  traverse2(ast, {
+  traverse(ast, {
     JSXElement(path) {
       if (!hoist)
         return;
-      if (path.findParent((p) => p.isJSXElement()))
+      if (isStructuralJsxChild(path))
         return;
       const opening = path.node.openingElement;
-      const tagName = opening.name;
-      if (tagName.type !== "JSXIdentifier")
+      if (!isJSXOpeningElement(opening))
         return;
-      const name = tagName.name;
-      if (!name || name[0] !== name[0].toLowerCase())
+      if (!isJSXIdentifier(opening.name))
+        return;
+      const name = opening.name.name;
+      const first = name[0];
+      if (!first || first !== first.toLowerCase())
         return;
       if (elementNeedsJsxEnhancer(path.node))
         return;
@@ -648,9 +843,9 @@ function transformJSX(code, filename, options = {}) {
         const tmplId = `_$tmpl_${templateCounter++}`;
         templates.push({ id: tmplId, template: extracted });
         const dynamicExprs = extracted.slots.filter((s) => s.expr).map((s) => s.expr);
-        const templateExpr = t2.callExpression(t2.identifier("_$createTemplate"), [t2.identifier(tmplId), t2.arrayExpression(dynamicExprs)]);
+        const templateExpr = callExpression(identifier("_$createTemplate"), [identifier(tmplId), arrayExpression(dynamicExprs)]);
         const parentIsJSX = path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment();
-        path.replaceWith(parentIsJSX ? t2.jsxExpressionContainer(templateExpr) : templateExpr);
+        path.replaceWith(parentIsJSX ? jsxExpressionContainer(templateExpr) : templateExpr);
       } catch (err) {
         if (options.dev) {
           console.warn(`[Sinwan] template hoisting skipped in ${filename}: ${err.message}`);
@@ -660,13 +855,15 @@ function transformJSX(code, filename, options = {}) {
   });
   if (templates.length === 0) {
     if (options.explicitBindings) {
-      const bindingImport = t2.importDeclaration([
-        t2.importSpecifier(t2.identifier("_$bindText"), t2.identifier("_$bindText")),
-        t2.importSpecifier(t2.identifier("_$bindAttr"), t2.identifier("_$bindAttr")),
-        t2.importSpecifier(t2.identifier("_$bindStyle"), t2.identifier("_$bindStyle")),
-        t2.importSpecifier(t2.identifier("_$bindClass"), t2.identifier("_$bindClass"))
-      ], t2.stringLiteral("sinwan/renderer"));
-      ast.program.body.unshift(bindingImport);
+      const bindingImport = importDeclaration([
+        importSpecifier(identifier("_$bindText"), identifier("_$bindText")),
+        importSpecifier(identifier("_$bindAttr"), identifier("_$bindAttr")),
+        importSpecifier(identifier("_$bindStyle"), identifier("_$bindStyle")),
+        importSpecifier(identifier("_$bindClass"), identifier("_$bindClass"))
+      ], stringLiteral("sinwan/renderer/web"));
+      bindingImport.specifiers = (bindingImport.specifiers ?? []).filter((candidate) => isImportSpecifier(candidate) && isIdentifier(candidate.local) && !rendererHelperImported(ast.program.body, candidate.local.name));
+      if (bindingImport.specifiers.length > 0)
+        ast.program.body.unshift(bindingImport);
     }
     const result = generate(ast, {
       sourceMaps: true,
@@ -674,38 +871,49 @@ function transformJSX(code, filename, options = {}) {
     });
     return { code: result.code, map: result.map };
   }
-  const templateDecls = templates.map(({ id, template }) => t2.variableDeclaration("const", [
-    t2.variableDeclarator(t2.identifier(id), t2.objectExpression([
-      t2.objectProperty(t2.identifier("html"), t2.stringLiteral(template.html)),
-      t2.objectProperty(t2.identifier("slots"), t2.arrayExpression(template.slots.map((slot) => t2.objectExpression([
-        t2.objectProperty(t2.identifier("path"), t2.arrayExpression(slot.path.map((i) => t2.numericLiteral(i)))),
-        t2.objectProperty(t2.identifier("type"), t2.stringLiteral(slot.type)),
+  const templateDecls = templates.map(({ id, template }) => variableDeclaration("const", [
+    variableDeclarator(identifier(id), objectExpression([
+      objectProperty(identifier("html"), stringLiteral(template.html)),
+      objectProperty(identifier("slots"), arrayExpression(template.slots.map((slot) => objectExpression([
+        objectProperty(identifier("path"), arrayExpression(slot.path.map((i) => numericLiteral(i)))),
+        objectProperty(identifier("type"), stringLiteral(slot.type)),
         ...slot.name ? [
-          t2.objectProperty(t2.identifier("name"), t2.stringLiteral(slot.name))
+          objectProperty(identifier("name"), stringLiteral(slot.name))
         ] : []
       ]))))
     ]))
   ]));
   const importSpecifiers = [
-    t2.importSpecifier(t2.identifier("_$createTemplate"), t2.identifier("_$createTemplate"))
+    importSpecifier(identifier("_$createTemplate"), identifier("_$createTemplate"))
   ];
   if (options.explicitBindings) {
-    importSpecifiers.push(t2.importSpecifier(t2.identifier("_$bindText"), t2.identifier("_$bindText")), t2.importSpecifier(t2.identifier("_$bindAttr"), t2.identifier("_$bindAttr")), t2.importSpecifier(t2.identifier("_$bindStyle"), t2.identifier("_$bindStyle")), t2.importSpecifier(t2.identifier("_$bindClass"), t2.identifier("_$bindClass")));
+    importSpecifiers.push(importSpecifier(identifier("_$bindText"), identifier("_$bindText")), importSpecifier(identifier("_$bindAttr"), identifier("_$bindAttr")), importSpecifier(identifier("_$bindStyle"), identifier("_$bindStyle")), importSpecifier(identifier("_$bindClass"), identifier("_$bindClass")));
+  }
+  const freshSpecifiers = importSpecifiers.filter((specifier) => {
+    const local = specifier.local;
+    return isIdentifier(local) && !rendererHelperImported(ast.program.body, local.name);
+  });
+  ast.program.body.unshift(...templateDecls);
+  if (freshSpecifiers.length > 0) {
+    ast.program.body.unshift(importDeclaration(freshSpecifiers, stringLiteral("sinwan/renderer/web")));
   }
-  const importDecl = t2.importDeclaration(importSpecifiers, t2.stringLiteral("sinwan/renderer"));
-  ast.program.body.unshift(importDecl, ...templateDecls);
   const result = generate(ast, { sourceMaps: true, sourceFileName: filename });
   return { code: result.code, map: result.map };
 }
 // src/exports.ts
-import { parse as parse2 } from "@babel/parser";
 function isComponentName(name) {
   return !!name && name[0] === name[0].toUpperCase() && /^[A-Z]/.test(name);
 }
+function isTypeOnlyExport(node) {
+  return node.exportKind === "type";
+}
+function isIdent(n) {
+  return !!n && typeof n === "object" && n.type === "Identifier" && typeof n.name === "string";
+}
 function collectExportedComponents(code, filename) {
   let ast;
   try {
-    ast = parse2(code, {
+    ast = parse(code, {
       sourceType: "module",
       plugins: ["jsx", "typescript"],
       sourceFilename: filename
@@ -724,30 +932,35 @@ function collectExportedComponents(code, filename) {
   };
   for (const node of ast.program.body) {
     if (node.type === "ExportNamedDeclaration") {
-      if (node.declaration) {
-        const decl = node.declaration;
-        if (decl.type === "FunctionDeclaration" && decl.id && isComponentName(decl.id.name)) {
-          add(decl.id.name, decl.id.name);
-        } else if (decl.type === "VariableDeclaration") {
-          for (const d of decl.declarations) {
-            if (d.id?.type === "Identifier" && isComponentName(d.id.name)) {
+      if (isTypeOnlyExport(node))
+        continue;
+      const declaration = node.declaration;
+      if (declaration) {
+        if (declaration.type === "FunctionDeclaration" && isIdent(declaration.id) && isComponentName(declaration.id.name)) {
+          add(declaration.id.name, declaration.id.name);
+        } else if (declaration.type === "VariableDeclaration") {
+          for (const d of declaration.declarations ?? []) {
+            if (isIdent(d.id) && isComponentName(d.id.name)) {
               add(d.id.name, d.id.name);
             }
           }
         }
       } else if (node.specifiers && !node.source) {
         for (const spec of node.specifiers) {
-          if (spec.type === "ExportSpecifier" && spec.local?.type === "Identifier" && spec.exported?.type === "Identifier" && isComponentName(spec.exported.name)) {
+          if (isTypeOnlyExport(spec))
+            continue;
+          if (spec.type === "ExportSpecifier" && isIdent(spec.local) && isIdent(spec.exported) && isComponentName(spec.exported.name)) {
             add(spec.local.name, spec.exported.name);
           }
         }
       }
     } else if (node.type === "ExportDefaultDeclaration") {
-      const decl = node.declaration;
-      if (decl.type === "Identifier") {
-        add(decl.name, "default");
-      } else if (decl.type === "FunctionDeclaration" && decl.id) {
-        add(decl.id.name, "default");
+      const raw = node.declaration;
+      const declaration = raw && typeof raw === "object" && "type" in raw ? unwrapParens(raw) : raw;
+      if (isIdent(declaration)) {
+        add(declaration.name, "default");
+      } else if (declaration.type === "FunctionDeclaration" && isIdent(declaration.id)) {
+        add(declaration.id.name, "default");
       }
     }
   }