sinwan-compiler 0.2.11 → 0.3.1

package/dist/{chunk-ad9mh6gz.js → chunk-fadpxq9v.js}

@@ -143,6 +143,10 @@ function trackLocalScopeBindings(path, names, scope) {
       const init = p.node.init;
       if (!init)
         return;
+      if (t.isIdentifier(id) && t.isCallExpression(init) && t.isIdentifier(init.callee) && (init.callee.name === "_$createLiveRest" || init.callee.name === "createLiveRest")) {
+        scope.bindings.set(id.name, { kind: "prop" });
+        return;
+      }
       const source = isReactiveSourceCall(init, names);
       if (source) {
         if (source.isArray) {
@@ -678,7 +682,25 @@ function transformPropMemberAccess(expr, scope) {
 function wrapExpression(expr) {
   return t.arrowFunctionExpression([], expr);
 }
-function createBindingDescriptor(expr, exprPath, options) {
+function isPropRoot(expr, scope) {
+  if (t.isIdentifier(expr)) {
+    return scope.bindings.get(expr.name)?.kind === "prop";
+  }
+  if (t.isCallExpression(expr) && t.isIdentifier(expr.callee, { name: "_$unwrap" }) && expr.arguments.length === 1 && t.isIdentifier(expr.arguments[0])) {
+    return scope.bindings.get(expr.arguments[0].name)?.kind === "prop";
+  }
+  return false;
+}
+function isChildrenPropRead(expr, scope) {
+  if (t.isIdentifier(expr, { name: "children" }))
+    return true;
+  if (!isMemberLike(expr) || expr.computed)
+    return false;
+  if (!t.isIdentifier(expr.property, { name: "children" }))
+    return false;
+  return isPropRoot(expr.object, scope);
+}
+function createBindingDescriptor(expr, exprPath, options, scope, childrenGetter) {
   if (!options.explicitBindings) {
     return wrapExpression(expr);
   }
@@ -705,7 +727,7 @@ function createBindingDescriptor(expr, exprPath, options) {
     ]);
   }
   const compInfo = getComponentExpressionInfo(exprPath);
-  if (t.isIdentifier(expr, { name: "children" }) || compInfo.isComponent && compInfo.attributeName === null) {
+  if (isChildrenPropRead(expr, scope) || childrenGetter || compInfo.isComponent && compInfo.attributeName === null) {
     return wrapExpression(expr);
   }
   return t.callExpression(t.identifier("_$bindText"), [wrapExpression(expr)]);
@@ -952,7 +974,7 @@ function wrapReactiveExpressions2(ast, options = {}) {
       }
       if (source === "sinwan/reactivity") {
         for (const spec of p.node.specifiers) {
-          if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported) && spec.imported.name === "unwrap") {
+          if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported) && spec.imported.name === "unwrap" && spec.local.name === RESOLVE_HELPER) {
             hasUnwrapImport = true;
           }
         }
@@ -1152,10 +1174,11 @@ function wrapReactiveExpressions2(ast, options = {}) {
             }
           }
           if (shouldWrap(expr, scope)) {
+            const childrenGetter = isChildrenPropRead(expr, scope);
             if (transformPropMemberAccess(expr, scope)) {
               needsResolve = true;
             }
-            exprPath.replaceWith(t.jsxExpressionContainer(createBindingDescriptor(expr, exprPath, options)));
+            exprPath.replaceWith(t.jsxExpressionContainer(createBindingDescriptor(expr, exprPath, options, scope, childrenGetter)));
           }
         }
       });

package/dist/cli.js

@@ -3,7 +3,7 @@
 import {
   runAnalyzeCli2,
   runCliIfMain2
-} from "./chunk-ad9mh6gz.js";
+} from "./chunk-fadpxq9v.js";
 export {
   runAnalyzeCli2 as runAnalyzeCli,
   runCliIfMain2 as runCliIfMain

package/dist/index.d.ts

@@ -7,6 +7,7 @@
 export { transformJSX, type TransformOptions } from "./transform";
 export { COMPILER_TEMPLATE_SLOT_PROTOCOL } from "./transform";
 export { autoWrapComponents } from "./auto-cc";
+export { rewriteLiveCcDestructure } from "./live-cc-destructure";
 export { analyze, analyzeProject, analyzeModule, loadMetadata, AnalyzerCache, type AnalyzeOptions, type ModuleAnalysis, type ProjectAnalysis, type ImportedCallSite, type ImportInfo, type WorkspacesConfig, } from "./analyze";
 export { collectExportedComponents, type ExportedComponent } from "./exports";
 export { runAnalyzeCli } from "./cli";

package/dist/index.js

@@ -17,15 +17,275 @@ import {
   propagateReactiveProps2,
   wrapReactiveExpressions2,
   runAnalyzeCli2
-} from "./chunk-ad9mh6gz.js";
+} from "./chunk-fadpxq9v.js";
 
 // src/transform.ts
 import { parse } from "@babel/parser";
-import _generate from "@babel/generator";
+
+// src/live-cc-destructure.ts
 import * as t from "@babel/types";
 import _traverse from "@babel/traverse";
-var generate = typeof _generate === "function" ? _generate : _generate.default ?? _generate;
 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";
+var LIVE_REST_IMPORTED = "createLiveRest";
+var SPREAD_IMPORTED = "getSpreadProps";
+function collectCcAliases(ast) {
+  const aliases = new Set;
+  traverse(ast, {
+    ImportDeclaration(path) {
+      const source = path.node.source.value;
+      if (!CC_SOURCE_MODULES.has(source))
+        return;
+      for (const spec of path.node.specifiers) {
+        if (!t.isImportSpecifier(spec))
+          continue;
+        const imported = t.isIdentifier(spec.imported) ? spec.imported.name : spec.imported.value;
+        if (imported === "cc") {
+          aliases.add(spec.local.name);
+        }
+      }
+    }
+  });
+  return aliases;
+}
+function parseFlatObjectPattern(pattern) {
+  const props = [];
+  let rest = null;
+  for (const prop of pattern.properties) {
+    if (t.isRestElement(prop)) {
+      if (!t.isIdentifier(prop.argument))
+        return null;
+      rest = prop.argument.name;
+      continue;
+    }
+    if (!t.isObjectProperty(prop) || prop.computed)
+      return null;
+    if (!t.isIdentifier(prop.key) && !t.isStringLiteral(prop.key))
+      return null;
+    let value = prop.value;
+    let defaultValue = null;
+    if (t.isAssignmentPattern(value)) {
+      defaultValue = value.right;
+      value = value.left;
+    }
+    if (!t.isIdentifier(value))
+      return null;
+    const keyName = t.isIdentifier(prop.key) ? prop.key.name : prop.key.value;
+    props.push({
+      key: prop.key,
+      keyName,
+      local: value.name,
+      defaultValue
+    });
+  }
+  return { props, rest };
+}
+function pickPropsName(used) {
+  if (!used.has("props"))
+    return "props";
+  let index = 0;
+  let name = "_props";
+  while (used.has(name)) {
+    index += 1;
+    name = `_props${index}`;
+  }
+  return name;
+}
+function collectUsedNames(fnPath) {
+  const used = new Set;
+  fnPath.traverse({
+    Identifier(p) {
+      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));
+  }
+  return t.memberExpression(t.identifier(propsName), t.stringLiteral(key.value), 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);
+}
+function ensureBlockBody(fn) {
+  if (t.isBlockStatement(fn.body))
+    return fn.body;
+  const body = t.blockStatement([t.returnStatement(fn.body)]);
+  fn.body = body;
+  if (t.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) {
+    parent.shorthand = false;
+    parent.value = expr;
+    return;
+  }
+  path.replaceWith(expr);
+}
+function isCcParamBinding(path, locals, fnNode) {
+  if (!path.isReferencedIdentifier())
+    return false;
+  if (!locals.has(path.node.name))
+    return false;
+  const binding = path.scope.getBinding(path.node.name);
+  if (!binding)
+    return false;
+  const fnParent = binding.path.getFunctionParent();
+  return fnParent?.node === fnNode;
+}
+function rewriteSpreads(fnPath, liveNames, fnNode) {
+  let changed = false;
+  fnPath.traverse({
+    JSXSpreadAttribute(p) {
+      const arg = p.node.argument;
+      if (!t.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)
+      ]);
+      changed = true;
+    }
+  });
+  return changed;
+}
+function hasLocalSpecifier(stmt, local) {
+  return stmt.specifiers.some((spec) => t.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))
+      continue;
+    if (hasLocalSpecifier(stmt, local))
+      return;
+    if (stmt.source.value === "sinwan/component") {
+      target = stmt;
+    } else if (stmt.source.value === "sinwan" && target === null) {
+      target = stmt;
+    }
+  }
+  const spec = t.importSpecifier(t.identifier(local), t.identifier(imported));
+  if (target) {
+    target.specifiers.push(spec);
+  }
+}
+function copyPatternType(pattern, id) {
+  if (pattern.typeAnnotation) {
+    id.typeAnnotation = pattern.typeAnnotation;
+  }
+  if (pattern.optional) {
+    id.optional = true;
+  }
+}
+function rewriteFunctionDestructure(fnPath) {
+  const fn = fnPath.node;
+  const param = fn.params[0];
+  if (!param) {
+    return { rest: false, spread: false };
+  }
+  if (t.isIdentifier(param)) {
+    const spread = rewriteSpreads(fnPath, new Set([param.name]), fn);
+    return { rest: false, spread };
+  }
+  if (!t.isObjectPattern(param)) {
+    return { rest: false, spread: false };
+  }
+  const flat = parseFlatObjectPattern(param);
+  if (!flat) {
+    return { rest: false, spread: false };
+  }
+  const used = collectUsedNames(fnPath);
+  for (const binding of flat.props)
+    used.add(binding.local);
+  if (flat.rest)
+    used.add(flat.rest);
+  const propsName = pickPropsName(used);
+  const locals = new Set(flat.props.map((binding) => binding.local));
+  const reads = new Map;
+  for (const binding of flat.props) {
+    reads.set(binding.local, binding);
+  }
+  fnPath.traverse({
+    Identifier(p) {
+      if (p.findParent((parent) => parent.node === param)) {
+        return;
+      }
+      if (!isCcParamBinding(p, locals, fn))
+        return;
+      const binding = reads.get(p.node.name);
+      if (!binding)
+        return;
+      replaceWithExpression(p, liveRead(propsName, binding));
+    }
+  });
+  const propsId = t.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)))
+      ]))
+    ]));
+    liveNames.add(flat.rest);
+  }
+  const spread = rewriteSpreads(fnPath, liveNames, fn);
+  return { rest: flat.rest != null, spread };
+}
+function rewriteLiveCcDestructure(ast) {
+  const aliases = collectCcAliases(ast);
+  if (aliases.size === 0)
+    return { rest: false, spread: false };
+  let needsRest = false;
+  let needsSpread = false;
+  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))
+        return;
+      const argPaths = path.get("arguments");
+      const fnPath = argPaths[0];
+      const result = rewriteFunctionDestructure(fnPath);
+      needsRest = needsRest || result.rest;
+      needsSpread = needsSpread || result.spread;
+    }
+  });
+  if (needsRest) {
+    ensureComponentImport(ast, LIVE_REST_IMPORTED, LIVE_REST_LOCAL);
+  }
+  if (needsSpread) {
+    ensureComponentImport(ast, SPREAD_IMPORTED, SPREAD_LOCAL);
+  }
+  return { rest: needsRest, spread: needsSpread };
+}
+
+// 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) {
@@ -162,17 +422,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 t.isStringLiteral(expr) || t.isNumericLiteral(expr) || t.isBooleanLiteral(expr) || t.isNullLiteral(expr);
+  return t2.isStringLiteral(expr) || t2.isNumericLiteral(expr) || t2.isBooleanLiteral(expr) || t2.isNullLiteral(expr);
 }
 function isStaticStyleValue(expr) {
-  if (t.isStringLiteral(expr))
+  if (t2.isStringLiteral(expr))
     return true;
-  if (t.isTemplateLiteral(expr) && expr.expressions.length === 0)
+  if (t2.isTemplateLiteral(expr) && expr.expressions.length === 0)
     return true;
-  if (!t.isObjectExpression(expr))
+  if (!t2.isObjectExpression(expr))
     return false;
   for (const prop of expr.properties) {
-    if (!t.isObjectProperty(prop))
+    if (!t2.isObjectProperty(prop))
       return false;
     if (prop.computed)
       return false;
@@ -185,36 +445,36 @@ function toKebabCase(value) {
   return value.includes("-") ? value : value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 }
 function serializeStyleValue(expr) {
-  if (t.isStringLiteral(expr))
+  if (t2.isStringLiteral(expr))
     return expr.value;
-  if (t.isTemplateLiteral(expr) && expr.expressions.length === 0) {
+  if (t2.isTemplateLiteral(expr) && expr.expressions.length === 0) {
     return expr.quasis[0]?.value?.raw ?? "";
   }
-  if (!t.isObjectExpression(expr))
+  if (!t2.isObjectExpression(expr))
     return "";
   const parts = [];
   for (const prop of expr.properties) {
-    if (!t.isObjectProperty(prop))
+    if (!t2.isObjectProperty(prop))
       continue;
     const key = prop.key;
     let name = null;
-    if (t.isIdentifier(key))
+    if (t2.isIdentifier(key))
       name = key.name;
-    else if (t.isStringLiteral(key))
+    else if (t2.isStringLiteral(key))
       name = key.value;
     if (!name)
       continue;
     const val = prop.value;
-    if (t.isNullLiteral(val))
+    if (t2.isNullLiteral(val))
       continue;
-    if (t.isBooleanLiteral(val) && !val.value)
+    if (t2.isBooleanLiteral(val) && !val.value)
       continue;
     let valueStr = "";
-    if (t.isStringLiteral(val))
+    if (t2.isStringLiteral(val))
       valueStr = val.value;
-    else if (t.isNumericLiteral(val))
+    else if (t2.isNumericLiteral(val))
       valueStr = String(val.value);
-    else if (t.isBooleanLiteral(val))
+    else if (t2.isBooleanLiteral(val))
       valueStr = String(val.value);
     if (valueStr === "")
       continue;
@@ -259,7 +519,7 @@ function elementToHtml(node, slots, path, filename, counter) {
       const expr = attr.value.expression;
       if (expr.type === "JSXEmptyExpression")
         continue;
-      if (attrName === "style" && t.isExpression(expr) && isStaticStyleValue(expr)) {
+      if (attrName === "style" && t2.isExpression(expr) && isStaticStyleValue(expr)) {
         const serialized = serializeStyleValue(expr);
         html += ` ${htmlName}="${escapeHtml(serialized)}"`;
         continue;
@@ -357,6 +617,7 @@ function transformJSX(code, filename, options = {}) {
     sourceFilename: filename
   });
   autoWrapComponents2(ast, filename);
+  rewriteLiveCcDestructure(ast);
   wrapReactiveExpressions2(ast, {
     explicitBindings: options.explicitBindings,
     analyze: options.analyze,
@@ -367,7 +628,7 @@ function transformJSX(code, filename, options = {}) {
   const hoist = options.hoist !== false;
   const templates = [];
   let templateCounter = 0;
-  traverse(ast, {
+  traverse2(ast, {
     JSXElement(path) {
       if (!hoist)
         return;
@@ -387,9 +648,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 = t.callExpression(t.identifier("_$createTemplate"), [t.identifier(tmplId), t.arrayExpression(dynamicExprs)]);
+        const templateExpr = t2.callExpression(t2.identifier("_$createTemplate"), [t2.identifier(tmplId), t2.arrayExpression(dynamicExprs)]);
         const parentIsJSX = path.parentPath?.isJSXElement() || path.parentPath?.isJSXFragment();
-        path.replaceWith(parentIsJSX ? t.jsxExpressionContainer(templateExpr) : templateExpr);
+        path.replaceWith(parentIsJSX ? t2.jsxExpressionContainer(templateExpr) : templateExpr);
       } catch (err) {
         if (options.dev) {
           console.warn(`[Sinwan] template hoisting skipped in ${filename}: ${err.message}`);
@@ -399,12 +660,12 @@ function transformJSX(code, filename, options = {}) {
   });
   if (templates.length === 0) {
     if (options.explicitBindings) {
-      const bindingImport = t.importDeclaration([
-        t.importSpecifier(t.identifier("_$bindText"), t.identifier("_$bindText")),
-        t.importSpecifier(t.identifier("_$bindAttr"), t.identifier("_$bindAttr")),
-        t.importSpecifier(t.identifier("_$bindStyle"), t.identifier("_$bindStyle")),
-        t.importSpecifier(t.identifier("_$bindClass"), t.identifier("_$bindClass"))
-      ], t.stringLiteral("sinwan/renderer"));
+      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 result = generate(ast, {
@@ -413,25 +674,25 @@ function transformJSX(code, filename, options = {}) {
     });
     return { code: result.code, map: result.map };
   }
-  const templateDecls = templates.map(({ id, template }) => t.variableDeclaration("const", [
-    t.variableDeclarator(t.identifier(id), t.objectExpression([
-      t.objectProperty(t.identifier("html"), t.stringLiteral(template.html)),
-      t.objectProperty(t.identifier("slots"), t.arrayExpression(template.slots.map((slot) => t.objectExpression([
-        t.objectProperty(t.identifier("path"), t.arrayExpression(slot.path.map((i) => t.numericLiteral(i)))),
-        t.objectProperty(t.identifier("type"), t.stringLiteral(slot.type)),
+  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)),
         ...slot.name ? [
-          t.objectProperty(t.identifier("name"), t.stringLiteral(slot.name))
+          t2.objectProperty(t2.identifier("name"), t2.stringLiteral(slot.name))
         ] : []
       ]))))
     ]))
   ]));
   const importSpecifiers = [
-    t.importSpecifier(t.identifier("_$createTemplate"), t.identifier("_$createTemplate"))
+    t2.importSpecifier(t2.identifier("_$createTemplate"), t2.identifier("_$createTemplate"))
   ];
   if (options.explicitBindings) {
-    importSpecifiers.push(t.importSpecifier(t.identifier("_$bindText"), t.identifier("_$bindText")), t.importSpecifier(t.identifier("_$bindAttr"), t.identifier("_$bindAttr")), t.importSpecifier(t.identifier("_$bindStyle"), t.identifier("_$bindStyle")), t.importSpecifier(t.identifier("_$bindClass"), t.identifier("_$bindClass")));
+    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")));
   }
-  const importDecl = t.importDeclaration(importSpecifiers, t.stringLiteral("sinwan/renderer"));
+  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 };
@@ -509,6 +770,7 @@ export {
   isReactiveValue2 as isReactiveValue,
   loadMetadata2 as loadMetadata,
   propagateReactiveProps2 as propagateReactiveProps,
+  rewriteLiveCcDestructure,
   runAnalyzeCli2 as runAnalyzeCli,
   trackReactiveImports2 as trackReactiveImports,
   transformJSX,

package/dist/live-cc-destructure.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Rewrite flat `cc` / auto-`cc` object destructure so prop reads stay live.
+ *
+ * `cc(({ value }) => <span>{value}</span>)` becomes
+ * `cc((props) => <span>{props.value}</span>)` before reactive wrap, so JSX
+ * emits `() => props.value` instead of snapshotting a destructured local.
+ *
+ * Nested patterns are left as snapshots. JSX spreads of the props (or rest)
+ * identifier use `getSpreadProps` so native attributes keep getter functions.
+ */
+import * as t from "@babel/types";
+/**
+ * Rewrite flat `cc` destructure and raw JSX spreads. Returns whether any
+ * helper imports are required.
+ */
+export declare function rewriteLiveCcDestructure(ast: t.Node): {
+    rest: boolean;
+    spread: boolean;
+};

package/docs/README.md

@@ -7,9 +7,10 @@ If you are building a Sinwan app, start with [Plugins](plugins.md). If you are c
 ## Pipeline
 
 1. **Auto-`cc`** — exported functions that look like components (`App`, `Card`, …) are wrapped with `cc(...)` so the rest of the pipeline sees the same components the runtime will.
-2. **Reactive wrap** — JSX expressions that read signals, stores, `useState`, `useFetch`, `.value` on signals returned from other modules (`useTheme`, `inject`), or zero-arity getters returned from hooks (`counter()`) become `() => …` (or explicit binding helpers when that mode is on).
-3. **Template hoist** — static native-element trees become `_$createTemplate(...)` calls with slots for dynamic bits (`child`, `attr`, `event`, `ref`).
-4. **Analyze (optional)** — a project-wide pass marks which *exported* component props are actually reactive, so static strings are not wrapped.
+2. **Live destructure** — flat `cc(({ value }) => …)` becomes `cc((props) => …)` so `{value}` stays a live `props.value` read. `{...props}` spreads the raw bag.
+3. **Reactive wrap** — JSX expressions that read signals, stores, `useState`, `useFetch`, `.value` on signals returned from other modules (`useTheme`, `inject`), or zero-arity getters returned from hooks (`counter()`) become `() => …` (or explicit binding helpers when that mode is on).
+4. **Template hoist** — static native-element trees become `_$createTemplate(...)` calls with slots for dynamic bits (`child`, `attr`, `event`, `ref`).
+5. **Analyze (optional)** — a project-wide pass marks which *exported* component props are actually reactive, so static strings are not wrapped.
 
 ```text
 source.tsx
@@ -18,6 +19,9 @@ source.tsx
 autoWrapComponents()     plain `export function App()` → cc(App)
     │
     ▼
+rewriteLiveCcDestructure()  cc(({ value }) => …) → props.value
+    │
+    ▼
 wrapReactiveExpressions()   {count.value} → {() => count.value}
                             {arr.map(x => n.value)} → {() => arr.map(...)}
                             also wraps those reads as children/attrs of <Label>

package/docs/api.md

@@ -31,6 +31,10 @@ See [Transform](transform.md) for wrapping rules and options.
 
 Mutates a Babel AST: wrap exported component-like functions with `cc(...)`. Returns `true` if anything changed. `transformJSX` already runs this.
 
+### `rewriteLiveCcDestructure(ast)`
+
+Mutates a Babel AST: rewrite flat `cc(({ value }) => …)` params to a `props` identifier and `{...props}` spreads to `getSpreadProps(props)`. Nested destructure is left as a snapshot. `transformJSX` already runs this before reactive wrap.
+
 ## Analysis
 
 ### `analyze(options)`

package/docs/architecture.md

@@ -8,6 +8,7 @@ This page is for people changing the compiler. App authors can stay on [Transfor
 src/
   index.ts           Public exports
   auto-cc.ts         Exported function → cc(...)
+  live-cc-destructure.ts  Flat cc(({ value }) => …) → props.value
   reactive-wrap.ts   Imports, scopes, call graph, wrap
   transform.ts       Hoist + transformJSX
   analyze.ts         Project scan, resolution, AnalyzerCache
@@ -20,6 +21,7 @@ src/
 ```text
 transformJSX
   autoWrapComponents
+  rewriteLiveCcDestructure  ← flat destructure stays live; raw JSX spreads
   wrapReactiveExpressions   ← analyze / analyzeMetadata / resolveImport
   hoist JSXElement roots    ← _$createTemplate + slots
 

package/docs/plugins.md

@@ -55,7 +55,7 @@ The Vite plugin sets `resolve.dedupe: ["sinwan"]` for the same duplicate-runtime
 | `explicitBindings` | `false` | `_$bind*` helpers instead of bare `() =>` |
 | `analyze` | unset | Path to CLI JSON (production) |
 | `cache` | `true` | Incremental analyzer in dev. `false` turns it off. An object sets `root`, `tsConfigPath`, `bunfigPath`, `workspaces`, `cachePath` |
-| `fastRefresh` | `true` (Vite) | In-place component HMR in `vite serve` only |
+| `fastRefresh` | Bun: same as `dev`; Vite: `true` in `serve` | Per-component `import.meta.hot.accept` so routed/looked-up pages hot-update |
 
 ## Dev vs production
 

package/docs/transform.md

@@ -54,6 +54,24 @@ Not wrapped: lowercase helpers, generators, multi-argument functions, or functio
 
 `cc` may be imported from `sinwan` or `sinwan/component`.
 
+## Live `cc` props
+
+`cc` setup runs once. The runtime wraps the raw props bag in a Proxy that invokes **zero-arity getters** on each read (`props.value`), while `'value' in props` inspects the raw bag.
+
+The compiler rewrites **flat** destructure so those reads stay live:
+
+```tsx
+export const Child = cc(({ value }) => <span>{value}</span>);
+
+// becomes (then wrap)
+export const Child = cc((props) => <span>{() => props.value}</span>);
+```
+
+- Defaults `({ value = "" })` stay JS “undefined → default” **on each read**. Controlled vs omitted still uses `'value' in props`, not a destructure default.
+- Rest `({ value, ...rest })` becomes `const rest = createLiveRest(props, ["value"])`.
+- Nested `({ user: { name } })` is **not** rewritten (setup snapshot).
+- Native or forwarded `{...props}` / `{...rest}` spreads `getSpreadProps(...)` so attributes keep getter functions instead of freezing unwrapped values at setup.
+
 ## What counts as reactive
 
 Tracked imports:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sinwan-compiler",
-  "version": "0.2.11",
+  "version": "0.3.1",
   "description": "Shared compiler core for Sinwan plugins",
   "type": "module",
   "main": "./dist/index.js",