babel-plugin-essor 0.0.14-beta.9 → 0.0.15-beta.1

package/dist/index.js

@@ -1,695 +1,2288 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __spreadValues = (a2, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
+      __defNormalProp(a2, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+        __defNormalProp(a2, prop, b[prop]);
     }
-  return a;
+  return a2;
 };
+var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
 
-// src/jsx/index.ts
-import { types as t3 } from "@babel/core";
+// src/program.ts
+import { types as t2 } from "@babel/core";
 
-// ../shared/dist/shared.js
-var isArray = Array.isArray;
-function isString(val) {
-  return typeof val === "string";
-}
-var noop = Function.prototype;
-function startsWith(str, searchString) {
-  if (!isString(str)) {
-    return false;
-  }
-  return str.indexOf(searchString) === 0;
+// src/import.ts
+import { types as t } from "@babel/core";
+
+// ../shared/dist/shared.esm.js
+var w = (e) => e !== null && typeof e == "object";
+var d = Array.isArray;
+function m(e) {
+  return typeof e == "string";
 }
-var cacheStringFunction = (fn) => {
-  const cache = /* @__PURE__ */ Object.create(null);
-  return (str) => {
-    const hit = cache[str];
-    return hit || (cache[str] = fn(str));
-  };
+function T(e) {
+  return typeof e == "number";
+}
+function y(e) {
+  return e === null;
+}
+function A(e) {
+  return typeof e == "symbol";
+}
+function E(e) {
+  return a.call(e) === "[object Map]";
+}
+function N(e) {
+  return e == null;
+}
+var j = (e) => ["string", "number", "boolean", "symbol", "undefined"].includes(typeof e) || y(e);
+var P = (e) => a.call(e) === "[object Object]";
+function _(e) {
+  return typeof e == "undefined";
+}
+function z(e) {
+  return typeof e == "boolean";
+}
+var a = Object.prototype.toString;
+function G(e) {
+  return d(e) ? e : [e];
+}
+var V = Function.prototype;
+function q(e, t10) {
+  return m(e) ? e.indexOf(t10) === 0 : false;
+}
+var u = (e) => {
+  let t10 = /* @__PURE__ */ Object.create(null);
+  return ((n) => t10[n] || (t10[n] = e(n)));
+};
+var W = Object.freeze({});
+var Y = Object.freeze([]);
+var J = /\B([A-Z])/g;
+var Z = u((e) => e.replaceAll(J, "-$1").toLowerCase());
+var Q = /[_-](\w)/g;
+var ee = u((e) => (e = e.replaceAll(/^[_-]+|[_-]+$/g, ""), e = e.replaceAll(/[_-]+/g, "-"), e.replaceAll(Q, (t10, n) => n.toUpperCase())));
+var te = u((e) => e.charAt(0).toUpperCase() + e.slice(1));
+function ne(e, ...t10) {
+  console.warn(`[Essor warn]: ${e}`, ...t10);
+}
+function h(e, ...t10) {
+  console.error(`[Essor error]: ${e}`, ...t10);
+}
+function o(e) {
+  let t10 = /* @__PURE__ */ Object.create(null);
+  for (let n of e.split(",")) t10[n] = 1;
+  return (n) => n in t10;
+}
+var x = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";
+var pe = o(x);
+var ue = o(`${x},async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
+var he = o("accept,accept-charset,accesskey,action,align,allow,alt,async,autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,border,buffered,capture,challenge,charset,checked,cite,class,code,codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http-equiv,icon,id,importance,inert,integrity,ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,target,title,translate,type,usemap,value,width,wrap");
+var be = o("xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,clip,clipPathUnits,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-profile,color-rendering,contentScriptType,contentStyleType,crossorigin,cursor,cx,cy,d,decelerate,descent,diffuseConstant,direction,display,divisor,dominant-baseline,dur,dx,dy,edgeMode,elevation,enable-background,end,exponent,fill,fill-opacity,fill-rule,filter,filterRes,filterUnits,flood-color,flood-opacity,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,format,from,fr,fx,fy,g1,g2,glyph-name,glyph-orientation-horizontal,glyph-orientation-vertical,glyphRef,gradientTransform,gradientUnits,hanging,height,href,hreflang,horiz-adv-x,horiz-origin-x,id,ideographic,image-rendering,in,in2,intercept,k,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,kerning,keyPoints,keySplines,keyTimes,lang,lengthAdjust,letter-spacing,lighting-color,limitingConeAngle,local,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mask,maskContentUnits,maskUnits,mathematical,max,media,method,min,mode,name,numOctaves,offset,opacity,operator,order,orient,orientation,origin,overflow,overline-position,overline-thickness,panose-1,paint-order,path,pathLength,patternContentUnits,patternTransform,patternUnits,ping,pointer-events,points,pointsAtX,pointsAtY,pointsAtZ,preserveAlpha,preserveAspectRatio,primitiveUnits,r,radius,referrerPolicy,refX,refY,rel,rendering-intent,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,result,rotate,rx,ry,scale,seed,shape-rendering,slope,spacing,specularConstant,specularExponent,speed,spreadMethod,startOffset,stdDeviation,stemh,stemv,stitchTiles,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,string,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,style,surfaceScale,systemLanguage,tabindex,tableValues,target,targetX,targetY,text-anchor,text-decoration,text-rendering,textLength,to,transform,transform-origin,type,u1,u2,underline-position,underline-thickness,unicode,unicode-bidi,unicode-range,units-per-em,v-alphabetic,v-hanging,v-ideographic,v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan");
+var ke = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
+var xe = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
+var we = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics";
+var ve = "beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,keyup,mousedown,mousemove,mouseout,mouseover,mouseup,pointerdown,pointermove,pointerout,pointerover,pointerup,touchend,touchmove,touchstart";
+var Te = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+var Ae = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+var Se = o(ke);
+var Me = o(xe);
+var Ce = o(we);
+var Ee = o(Te);
+var Ne = o(Ae);
+var Oe = o(ve);
+
+// src/constants.ts
+var DEFAULT_OPTIONS = {
+  mode: "client",
+  symbol: "$",
+  props: true,
+  hmr: false,
+  styled: false
+};
+var IMPORTS_MAPS = [
+  // Reactive API
+  "signal",
+  "computed",
+  "reactive",
+  "memoEffect",
+  "omitProps",
+  // component
+  "createComponent",
+  "Fragment",
+  "For",
+  "Suspense",
+  "Portal",
+  // Template related
+  "mapNodes",
+  "template",
+  "delegateEvents",
+  // styled
+  "styled",
+  // binding related
+  "insert",
+  "patchStyle",
+  "patchClass",
+  "patchAttr",
+  "bindElement",
+  "setSpread",
+  "addEventListener",
+  // rendering related
+  "render",
+  "escapeHTML",
+  "getHydrationKey"
+];
+var SSG_IMPORTS_MAPS = {
+  createComponent: "createSSGComponent",
+  patchAttr: "setSSGAttr"
+};
+var SSR_IMPORTS_MAPS = {
+  mapNodes: "mapSSRNodes",
+  template: "getElement"
 };
-var hyphenateRE = /\B([A-Z])/g;
-var kebabCase = cacheStringFunction(
-  (str) => str.replaceAll(hyphenateRE, "-$1").toLowerCase()
+var TRANSFORM_PROPERTY_NAME = "__props";
+
+// src/import.ts
+function createImportIdentifiers(path) {
+  const identifiers = IMPORTS_MAPS.reduce((acc, name) => {
+    var _a, _b;
+    const identifier = (_b = (_a = path.scope) == null ? void 0 : _a.generateUidIdentifier(`${name}$`)) != null ? _b : t.identifier(`${name}$`);
+    if (!identifier) {
+      throw new Error(`Failed to generate identifier for ${name}`);
+    }
+    acc[name] = identifier;
+    return acc;
+  }, {});
+  return identifiers;
+}
+var importMap = IMPORTS_MAPS.reduce(
+  (acc, name) => __spreadProps(__spreadValues({}, acc), { [name]: name }),
+  {}
 );
-var camelizeRE = /-(\w)/g;
-var camelCase = cacheStringFunction((str) => {
-  return str.replaceAll(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
-});
-var capitalize = cacheStringFunction(
-  (str) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
+var importedSets = /* @__PURE__ */ new Set();
+function addImport(name) {
+  importedSets.add(name);
+}
+function clearImport() {
+  importedSets.clear();
+}
+function createImport(path, imports, from) {
+  const state = path.state;
+  const mode = state.opts.mode;
+  if (!importedSets.size) {
+    return;
   }
-);
+  try {
+    const importSpecifiers = Array.from(importedSets).map((name) => {
+      const importIdentifier = imports[name];
+      if (!importIdentifier) {
+        throw new Error(`Import identifier not found for: ${name}`);
+      }
+      const local = t.identifier(importIdentifier.name);
+      if (mode === "ssg" /* SSG */) {
+        name = SSG_IMPORTS_MAPS[name] || name;
+      }
+      if (mode === "ssr" /* SSR */) {
+        name = SSR_IMPORTS_MAPS[name] || name;
+      }
+      const imported = t.identifier(name);
+      return t.importSpecifier(local, imported);
+    });
+    const importDeclaration = t.importDeclaration(importSpecifiers, t.stringLiteral(from));
+    path.node.body.unshift(importDeclaration);
+  } catch (error_) {
+    h("Failed to create import declaration:", h);
+    throw error_;
+  }
+}
 
 // src/program.ts
-import { types as t } from "@babel/core";
-var imports = /* @__PURE__ */ new Set();
-var defaultOption = {
-  ssg: false,
-  symbol: "$",
-  props: true
-};
 var transformProgram = {
-  enter(path, state) {
-    imports.clear();
-    state.opts = __spreadValues(__spreadValues({}, defaultOption), state.opts);
-    path.state = {
-      h: path.scope.generateUidIdentifier("h$"),
-      template: path.scope.generateUidIdentifier("template$"),
-      ssg: path.scope.generateUidIdentifier("ssg$"),
-      useSignal: path.scope.generateUidIdentifier("signal$"),
-      useComputed: path.scope.generateUidIdentifier("computed$"),
-      useReactive: path.scope.generateUidIdentifier("reactive$"),
-      tmplDeclaration: t.variableDeclaration("const", []),
-      opts: state.opts
-    };
+  enter: (path, state) => {
+    const opts = __spreadValues(__spreadValues({}, DEFAULT_OPTIONS), state.opts);
+    const imports = createImportIdentifiers(path);
+    clearImport();
+    path.state = __spreadProps(__spreadValues({}, state), {
+      opts,
+      imports,
+      declarations: [],
+      // Collect template declarations during transformation
+      filename: state.filename,
+      events: /* @__PURE__ */ new Set()
+      // Track delegated events for optimization
+    });
   },
-  exit(path) {
-    const state = path.state;
-    if (state.tmplDeclaration.declarations.length > 0) {
-      const index = path.node.body.findIndex(
-        (node) => !t.isImportDeclaration(node) && !t.isExportDeclaration(node)
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  exit: (path, state) => {
+    const pluginState = path.state;
+    const { imports, declarations, events } = pluginState;
+    const insertIndex = path.node.body.findIndex(
+      (node) => !t2.isImportDeclaration(node) && !t2.isExportDeclaration(node)
+    );
+    if (declarations == null ? void 0 : declarations.length) {
+      const templateDeclaration = t2.variableDeclaration("const", declarations);
+      if (insertIndex !== -1) {
+        path.node.body.splice(insertIndex, 0, templateDeclaration);
+      } else {
+        path.node.body.push(templateDeclaration);
+      }
+    }
+    if (events && events.size > 0) {
+      const eventsDeclaration = t2.expressionStatement(
+        t2.callExpression(imports.delegateEvents, [
+          t2.arrayExpression(Array.from(events).map((event) => t2.stringLiteral(event)))
+        ])
+      );
+      addImport(importMap.delegateEvents);
+      path.node.body.push(eventsDeclaration);
+    }
+    createImport(path, imports, "essor");
+  }
+};
+
+// src/signals/props.ts
+import { types as t4 } from "@babel/core";
+
+// src/signals/utils.ts
+import { types as t3 } from "@babel/core";
+function isValidPath(path) {
+  return !!(path && path.node);
+}
+function isJSXNode(node) {
+  return !!(node && (t3.isJSXElement(node) || t3.isJSXFragment(node)));
+}
+function mightReturnJSX(expr) {
+  if (isJSXNode(expr)) {
+    return true;
+  }
+  if (t3.isConditionalExpression(expr)) {
+    return mightReturnJSX(expr.consequent) || mightReturnJSX(expr.alternate);
+  }
+  if (t3.isLogicalExpression(expr)) {
+    return mightReturnJSX(expr.left) || mightReturnJSX(expr.right);
+  }
+  if (t3.isSequenceExpression(expr)) {
+    return expr.expressions.some(mightReturnJSX);
+  }
+  if (t3.isParenthesizedExpression(expr)) {
+    return mightReturnJSX(expr.expression);
+  }
+  return false;
+}
+function checkHasJSXReturn(path) {
+  if (!isValidPath(path)) return false;
+  try {
+    const body = path.get("body");
+    if (!isValidPath(body)) return false;
+    if (!t3.isBlockStatement(body.node)) {
+      return mightReturnJSX(body.node);
+    }
+    let hasJSX = false;
+    body.traverse({
+      "ReturnStatement": function(returnPath) {
+        if (!hasJSX && returnPath.node.argument && mightReturnJSX(returnPath.node.argument)) {
+          hasJSX = true;
+          returnPath.stop();
+        }
+      },
+      "FunctionDeclaration|FunctionExpression|ArrowFunctionExpression": (nestedPath) => {
+        nestedPath.skip();
+      }
+    });
+    return hasJSX;
+  } catch (e) {
+    return false;
+  }
+}
+function isMemberAccessingProperty(node, propertyName) {
+  if (!node.computed && t3.isIdentifier(node.property) && node.property.name === propertyName) {
+    return true;
+  }
+  if (node.computed && t3.isStringLiteral(node.property) && node.property.value === propertyName) {
+    return true;
+  }
+  return false;
+}
+
+// src/signals/props.ts
+function transformProperty(path, properties, parentPath, defaultValues = {}) {
+  properties.forEach((property, index) => {
+    try {
+      if (!t4.isObjectProperty(property)) {
+        return;
+      }
+      if (!t4.isIdentifier(property.key)) {
+        if (true) {
+          ne("transformObjectProperties: Skipping computed property", { index });
+        }
+        return;
+      }
+      const keyName = property.key.name;
+      if (t4.isIdentifier(property.value)) {
+        path.scope.rename(property.value.name, `${parentPath}.${keyName}`);
+      } else if (t4.isAssignmentPattern(property.value)) {
+        if (t4.isIdentifier(property.value.left)) {
+          defaultValues[keyName] = property.value.right;
+          path.scope.rename(property.value.left.name, `${parentPath}.${keyName}`);
+        } else if (t4.isObjectPattern(property.value.left)) {
+          transformProperty(
+            path,
+            property.value.left.properties,
+            `${parentPath}.${keyName}`,
+            defaultValues
+          );
+          defaultValues[keyName] = property.value.right;
+        }
+      } else if (t4.isObjectPattern(property.value)) {
+        transformProperty(
+          path,
+          property.value.properties,
+          `${parentPath}.${keyName}`,
+          defaultValues
+        );
+      }
+    } catch (error) {
+      ne("transformProperty", `Failed to process property at index ${index}`, {
+        error: error instanceof Error ? error.message : String(error)
+      });
+    }
+  });
+  return defaultValues;
+}
+function buildRestVariableDeclaration(state, restName, parentPath, excludeProps) {
+  const validExcludeProps = excludeProps.filter(Boolean);
+  let init;
+  const pathParts = parentPath.split(".").filter((part) => part.length > 0);
+  let sourceObject = t4.identifier(pathParts[0] || "__props");
+  for (let i = 1; i < pathParts.length; i++) {
+    sourceObject = t4.memberExpression(sourceObject, t4.identifier(pathParts[i]));
+  }
+  if (validExcludeProps.length === 0) {
+    init = sourceObject;
+  } else {
+    init = t4.callExpression(state.imports.omitProps, [
+      sourceObject,
+      t4.arrayExpression(validExcludeProps.map((name) => t4.stringLiteral(name)))
+    ]);
+  }
+  return t4.variableDeclaration("const", [t4.variableDeclarator(t4.identifier(restName), init)]);
+}
+function transformRestProperties(path, restProperties, notRestNames = [], nestedRestParams = []) {
+  if (!t4.isIdentifier(restProperties.argument)) {
+    return;
+  }
+  const restName = restProperties.argument.name;
+  if (notRestNames.length === 0 && nestedRestParams.length === 0) {
+    path.node.params[0] = t4.identifier(restName);
+  } else {
+    const restDeclarations = [];
+    if (nestedRestParams.length > 0) {
+      for (const nestedRest of nestedRestParams) {
+        const nestedRestDeclaration = buildRestVariableDeclaration(
+          path.state,
+          nestedRest.name,
+          nestedRest.parentPath,
+          nestedRest.excludeProps
+        );
+        restDeclarations.push(nestedRestDeclaration);
+        if (nestedRest.excludeProps.length > 0) {
+          addImport(importMap.omitProps);
+        }
+      }
+    }
+    if (restProperties) {
+      const restDeclaration = buildRestVariableDeclaration(
+        path.state,
+        restName,
+        TRANSFORM_PROPERTY_NAME,
+        notRestNames
       );
-      path.node.body.splice(index, 0, state.tmplDeclaration);
+      restDeclarations.push(restDeclaration);
+      if (notRestNames.length) {
+        addImport(importMap.omitProps);
+      }
+    }
+    for (const declaration of restDeclarations) {
+      const body = path.node.body;
+      body.body.unshift(declaration);
+    }
+  }
+}
+function buildDefaultValueObject(defaultValues) {
+  if (!P(defaultValues)) {
+    return t4.objectExpression([]);
+  }
+  const properties = [];
+  for (const [key, value] of Object.entries(defaultValues)) {
+    if (!key) {
+      continue;
+    }
+    let propertyValue;
+    if (P(value) && !t4.isNode(value)) {
+      propertyValue = buildDefaultValueObject(value);
+    } else if (t4.isExpression(value)) {
+      propertyValue = value;
+    } else {
+      continue;
+    }
+    properties.push(t4.objectProperty(t4.identifier(key), propertyValue));
+  }
+  return t4.objectExpression(properties);
+}
+function buildDefaultValue(path, defaultValues) {
+  const propsParam = Object.keys(defaultValues).length > 0 ? t4.assignmentPattern(
+    t4.identifier(TRANSFORM_PROPERTY_NAME),
+    buildDefaultValueObject(defaultValues)
+  ) : t4.identifier(TRANSFORM_PROPERTY_NAME);
+  path.node.params[0] = propsParam;
+}
+function transformProps(path) {
+  const firstParam = path.node.params[0];
+  if (!firstParam || !t4.isObjectPattern(firstParam) || !checkHasJSXReturn(path)) {
+    return;
+  }
+  const state = path.state;
+  const properties = firstParam.properties;
+  const signalPrefix = state.opts.symbol || "$";
+  const notRestProperties = properties.filter((prop) => !t4.isRestElement(prop));
+  const restProperties = properties.find((prop) => t4.isRestElement(prop));
+  const notRestNames = notRestProperties.map((prop) => t4.isIdentifier(prop.key) ? prop.key.name : null).filter((name) => name !== null);
+  if (true) {
+    if (notRestNames.some((name) => q(name, signalPrefix))) {
+      ne(
+        "transformProps",
+        "Property names cannot start with signal prefix",
+        notRestNames.filter((name) => q(name, signalPrefix))
+      );
+    }
+  }
+  if (notRestProperties.length) {
+    const defaultValues = transformProperty(path, notRestProperties, TRANSFORM_PROPERTY_NAME);
+    buildDefaultValue(path, defaultValues);
+  }
+  if (restProperties) {
+    transformRestProperties(path, restProperties, notRestNames);
+  }
+}
+
+// src/jsx/context.ts
+var contextStack = [];
+function getContext() {
+  if (!contextStack.length) {
+    throw new Error("No active context found. Ensure setContext has been called.");
+  }
+  return contextStack[contextStack.length - 1];
+}
+function setContext(context) {
+  contextStack.push(context);
+}
+function resetContext() {
+  contextStack.pop();
+}
+
+// src/jsx/client.ts
+import { types as t8 } from "@babel/core";
+
+// src/signals/symbol.ts
+import { types as t5 } from "@babel/core";
+function isSignal(name) {
+  return !!name && name.startsWith("$");
+}
+function replaceSymbol(path) {
+  const { init, id } = path.node;
+  if (!t5.isIdentifier(id)) {
+    return;
+  }
+  const variableName = id.name;
+  if (!isSignal(variableName)) {
+    return;
+  }
+  if (isAlreadySignalCall(init)) {
+    return;
+  }
+  const isComputed = init && (t5.isFunctionExpression(init) || t5.isArrowFunctionExpression(init)) && path.parent.kind === "const";
+  const importName = isComputed ? "computed" : "signal";
+  const state = path.state;
+  const args = init ? [init] : [];
+  const newInit = t5.callExpression(t5.identifier(state.imports[importName].name), args);
+  addImport(importName);
+  path.node.init = newInit;
+}
+function isAlreadySignalCall(init) {
+  if (!init || !t5.isCallExpression(init) || !t5.isIdentifier(init.callee)) {
+    return false;
+  }
+  const calleeName = init.callee.name;
+  return calleeName === "signal" || calleeName === "computed" || calleeName.includes("signal") || calleeName.includes("computed");
+}
+function symbolIdentifier(path) {
+  if (!isValidPath(path)) {
+    return;
+  }
+  const name = path.node.name;
+  if (!isSignal(name)) {
+    return;
+  }
+  if (!shouldProcessIdentifier(path, path.parentPath)) {
+    return;
+  }
+  if (isAlreadyValueAccess(path)) {
+    return;
+  }
+  path.replaceWith(t5.memberExpression(t5.identifier(name), t5.identifier("value")));
+}
+function shouldProcessIdentifier(path, parentPath) {
+  if (!parentPath) {
+    return false;
+  }
+  const parent = parentPath.node;
+  const currentNode = path.node;
+  if (t5.isVariableDeclarator(parent) || t5.isArrayPattern(parent) || t5.isObjectPattern(parent)) {
+    return false;
+  }
+  if (t5.isImportSpecifier(parent) || t5.isImportDefaultSpecifier(parent) || t5.isImportNamespaceSpecifier(parent)) {
+    return false;
+  }
+  if (t5.isFunctionDeclaration(parent) || t5.isFunctionExpression(parent) || t5.isArrowFunctionExpression(parent)) {
+    return false;
+  }
+  if (t5.isClassDeclaration(parent) && parent.id === currentNode) {
+    return false;
+  }
+  if (t5.isObjectMethod(parent) || t5.isClassMethod(parent)) {
+    return false;
+  }
+  if (t5.isObjectProperty(parent) && parent.key === currentNode) {
+    return false;
+  }
+  if (t5.isLabeledStatement(parent) && parent.label === currentNode) {
+    return false;
+  }
+  if ((t5.isBreakStatement(parent) || t5.isContinueStatement(parent)) && parent.label === currentNode) {
+    return false;
+  }
+  return true;
+}
+function isAlreadyValueAccess(path) {
+  const parent = path.parent;
+  if (t5.isMemberExpression(parent) && parent.object === path.node) {
+    return isMemberAccessingProperty(parent, "value");
+  }
+  if (!t5.isParenthesizedExpression(parent) && !t5.isTSAsExpression(parent) && !t5.isTSNonNullExpression(parent)) {
+    return false;
+  }
+  const ancestorCheck = path.findParent((p) => {
+    if (!p.isMemberExpression()) {
+      return false;
+    }
+    const memberExpr = p.node;
+    return memberExpr.object === path.node && isMemberAccessingProperty(memberExpr, "value");
+  });
+  return !!ancestorCheck;
+}
+function symbolAssignment(path) {
+  if (!isValidPath(path)) {
+    return;
+  }
+  const { left } = path.node;
+  if (!t5.isIdentifier(left)) {
+    return;
+  }
+  const name = left.name;
+  if (!isSignal(name)) {
+    return;
+  }
+  if (isAlreadyValueAssignment(left)) {
+    return;
+  }
+  path.node.left = t5.memberExpression(t5.identifier(name), t5.identifier("value"));
+}
+function isAlreadyValueAssignment(left) {
+  return t5.isMemberExpression(left) && isMemberAccessingProperty(left, "value");
+}
+function symbolUpdate(path) {
+  if (!isValidPath(path)) {
+    return;
+  }
+  const { argument } = path.node;
+  if (!t5.isIdentifier(argument)) {
+    return;
+  }
+  const name = argument.name;
+  if (!isSignal(name)) {
+    return;
+  }
+  if (isAlreadyValueUpdate(argument)) {
+    return;
+  }
+  path.node.argument = t5.memberExpression(t5.identifier(name), t5.identifier("value"));
+}
+function isAlreadyValueUpdate(argument) {
+  return t5.isMemberExpression(argument) && isMemberAccessingProperty(argument, "value");
+}
+function symbolObjectPattern(path) {
+  if (!isValidPath(path)) {
+    return;
+  }
+  const properties = path.node.properties;
+  if (!Array.isArray(properties) || properties.length === 0) {
+    return;
+  }
+  for (const property of properties) {
+    if (!property) continue;
+    if (t5.isObjectProperty(property)) {
+      handleObjectProperty(property, path);
+    } else if (t5.isRestElement(property)) {
+      handleRestElement(property, path);
+    }
+  }
+}
+function handleObjectProperty(property, parentPath) {
+  if (!property || !property.value) {
+    return;
+  }
+  const value = property.value;
+  if (t5.isObjectPattern(value)) {
+    const mockPath = {
+      node: value,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolObjectPattern(mockPath);
+  } else if (t5.isArrayPattern(value)) {
+    const mockPath = {
+      node: value,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolArrayPattern(mockPath);
+  } else if (t5.isAssignmentPattern(value)) {
+    handleAssignmentPattern(value, parentPath);
+  }
+}
+function handleAssignmentPattern(pattern, parentPath) {
+  const left = pattern.left;
+  if (t5.isObjectPattern(left)) {
+    const mockPath = {
+      node: left,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolObjectPattern(mockPath);
+  } else if (t5.isArrayPattern(left)) {
+    const mockPath = {
+      node: left,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolArrayPattern(mockPath);
+  }
+}
+function handleRestElement(restElement, parentPath) {
+  if (!restElement || !restElement.argument) {
+    return;
+  }
+  const argument = restElement.argument;
+  if (t5.isObjectPattern(argument)) {
+    const mockPath = {
+      node: argument,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolObjectPattern(mockPath);
+  } else if (t5.isArrayPattern(argument)) {
+    const mockPath = {
+      node: argument,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolArrayPattern(mockPath);
+  }
+}
+function symbolArrayPattern(path) {
+  if (!isValidPath(path)) {
+    return;
+  }
+  const elements = path.node.elements;
+  if (!Array.isArray(elements) || elements.length === 0) {
+    return;
+  }
+  for (const element of elements) {
+    if (!element) continue;
+    if (t5.isAssignmentPattern(element)) {
+      handleAssignmentPattern(element, path);
+    } else if (t5.isRestElement(element)) {
+      handleArrayRestElement(element, path);
+    } else if (t5.isObjectPattern(element)) {
+      const mockPath = {
+        node: element,
+        state: path.state,
+        parentPath: path
+      };
+      symbolObjectPattern(mockPath);
+    } else if (t5.isArrayPattern(element)) {
+      const mockPath = {
+        node: element,
+        state: path.state,
+        parentPath: path
+      };
+      symbolArrayPattern(mockPath);
+    }
+  }
+}
+function handleArrayRestElement(restElement, parentPath) {
+  if (!restElement || !restElement.argument) {
+    return;
+  }
+  const argument = restElement.argument;
+  if (t5.isArrayPattern(argument)) {
+    const mockPath = {
+      node: argument,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolArrayPattern(mockPath);
+  } else if (t5.isObjectPattern(argument)) {
+    const mockPath = {
+      node: argument,
+      state: parentPath.state,
+      parentPath
+    };
+    symbolObjectPattern(mockPath);
+  }
+}
+
+// src/jsx/constants.ts
+var CLASS_NAME = "class";
+var STYLE_NAME = "style";
+var EVENT_ATTR_NAME = "on";
+var UPDATE_PREFIX = "update";
+var FRAGMENT_NAME = "Fragment";
+var CHILDREN_NAME = "children";
+var SPREAD_NAME = "_$spread$";
+var CREATE_COMPONENT_NAME = "createComponent";
+var BIND_REG = /^bind:.+/;
+var BUILT_IN_COMPONENTS = ["Fragment", "Portal", "Suspense", "For"];
+
+// src/jsx/shared.ts
+import { types as t7 } from "@babel/core";
+
+// src/jsx/tree.ts
+import { types as t6 } from "@babel/core";
+function createDefaultTree() {
+  return {
+    root: true,
+    type: 0 /* NORMAL */,
+    tag: "",
+    props: {},
+    children: [],
+    index: 1,
+    parentIndex: null,
+    isLastChild: false,
+    selfClosing: false,
+    _isTreeNode: true
+  };
+}
+function isTreeNode(node) {
+  return !!(node && node._isTreeNode);
+}
+var treeIndex = 1;
+function createTree(path, parentNode) {
+  const treeNode = createDefaultTree();
+  if (parentNode) {
+    const nodeInfo = path.node;
+    const isBuiltInComponent = BUILT_IN_COMPONENTS.includes(parentNode.tag);
+    const isComponentOrFragment = isComponentName(getTagName(nodeInfo));
+    if (!isComponentOrFragment && !isBuiltInComponent) {
+      treeNode.index = ++treeIndex;
+    }
+    if (isBuiltInComponent) {
+      treeIndex = 1;
+    }
+    treeNode.parentIndex = treeIndex;
+  } else {
+    treeNode.root = true;
+    treeIndex = 1;
+  }
+  if (t6.isJSXText(path.node)) {
+    return processJSXText(path, treeNode);
+  }
+  if (t6.isJSXElement(path.node) || t6.isJSXFragment(path.node)) {
+    return processJSXElement(path, treeNode);
+  }
+  return treeNode;
+}
+function processJSXElement(path, treeNode) {
+  const tagName = getTagName(path.node);
+  treeNode.tag = tagName;
+  treeNode.type = determineNodeType(tagName);
+  treeNode.selfClosing = Ne(tagName);
+  if (!path.isJSXFragment()) {
+    treeNode.props = processProps(path);
+  }
+  if (!treeNode.selfClosing) {
+    processChildren(path, treeNode);
+  }
+  return treeNode;
+}
+function processProps(path) {
+  const props = {};
+  const attributes = path.get("openingElement.attributes");
+  if (!attributes.length) {
+    return props;
+  }
+  attributes.forEach((attribute) => {
+    if (t6.isJSXAttribute(attribute.node)) {
+      const name = getAttrName(attribute.node);
+      const value = attribute.get("value");
+      if (!value.node) {
+        props[name] = true;
+      } else if (value) {
+        if (value.isJSXExpressionContainer()) {
+          const expression = value.get("expression");
+          if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+            props[name] = expression.node.value;
+          } else if (expression.isJSXElement() || expression.isJSXFragment()) {
+            props[name] = expression.node;
+          } else if (expression.isExpression()) {
+            processPropsExpression(expression, name, props, path);
+          }
+        } else if (value.isStringLiteral() || value.isNumericLiteral()) {
+          props[name] = value.node.value;
+        } else if (value.isJSXElement() || value.isJSXFragment()) {
+          props[name] = value.node;
+        } else if (value.isExpression()) {
+          processPropsExpression(value, name, props, path);
+        }
+      }
+    } else if (t6.isJSXSpreadAttribute(attribute.node)) {
+      props[SPREAD_NAME] = attribute.get("argument").node;
+    }
+  });
+  return props;
+}
+function processPropsExpression(expression, name, props, path) {
+  if (BIND_REG.test(name)) {
+    processPropsBind(name, expression, props, path);
+  } else {
+    props[name] = expression.node;
+  }
+}
+function processPropsBind(name, expression, props, path) {
+  const value = path.scope.generateUidIdentifier("value");
+  const bindName = name.slice(5).toLowerCase();
+  props[`${UPDATE_PREFIX}:${bindName}`] = [
+    expression.node,
+    // Getter: the bound variable
+    t6.arrowFunctionExpression(
+      [value],
+      // Type guard: expression.node must be LVal for bind directive
+      t6.isLVal(expression.node) ? t6.assignmentExpression("=", expression.node, value) : t6.assignmentExpression("=", t6.identifier("_"), value)
+      // Fallback for invalid LVal
+    )
+  ];
+}
+function processChildren(path, treeNode) {
+  const children = path.node.children;
+  if (!children || !children.length) {
+    return;
+  }
+  const optimizedChildren = optimizeChildNodes(path.get("children"));
+  optimizedChildren.forEach((child) => {
+    processChild(child, treeNode, optimizedChildren.length === 1);
+  });
+}
+function processChild(child, treeNode, isLastChild) {
+  if (t6.isJSXElement(child.node) || t6.isJSXFragment(child.node)) {
+    const childNode = createTree(child, treeNode);
+    childNode.isLastChild = isLastChild;
+    treeNode.children.push(childNode);
+    return;
+  }
+  if (t6.isJSXExpressionContainer(child.node)) {
+    processChildExpressionContainer(
+      child,
+      treeNode,
+      isLastChild
+    );
+    return;
+  }
+  if (t6.isJSXText(child.node)) {
+    processJSXChildText(child, treeNode, isLastChild);
+    return;
+  }
+  if (t6.isJSXSpreadChild(child.node)) {
+    processChildSpread(child, treeNode, isLastChild);
+    return;
+  }
+}
+function processChildExpressionContainer(child, treeNode, isLastChild) {
+  const expression = child.get("expression");
+  if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+    treeNode.children.push({
+      type: 2 /* TEXT */,
+      children: [String(expression.node.value)],
+      index: ++treeIndex,
+      // Static text increments index
+      parentIndex: treeNode.index,
+      isLastChild,
+      _isTreeNode: true
+    });
+  } else if (expression.isJSXElement() || expression.isJSXFragment()) {
+    const childNode = createTree(child, treeNode);
+    childNode.isLastChild = isLastChild;
+    treeNode.children.push(childNode);
+  } else if (expression.isExpression()) {
+    treeNode.children.push({
+      type: 4 /* EXPRESSION */,
+      index: treeIndex,
+      // Expression doesn't update index because it's dynamic content
+      isLastChild,
+      // Type guard: expression.node is Expression in JSXExpressionContainer
+      children: t6.isExpression(expression.node) ? [expression.node] : [],
+      parentIndex: treeNode.index,
+      _isTreeNode: true
+    });
+  }
+}
+function shouldInsertComment(childrenLength, previousNode) {
+  return !!(childrenLength >= 2 && // At least two child nodes
+  previousNode && // Previous node exists
+  previousNode.type !== 6 /* COMMENT */ && // Previous node is not a comment
+  // Previous node is dynamic content
+  (previousNode.type === 4 /* EXPRESSION */ || previousNode.type === 1 /* COMPONENT */));
+}
+function processJSXChildText(child, treeNode, isLastChild) {
+  const text = textTrim(child.node);
+  if (!text) {
+    return;
+  }
+  const childrenLength = treeNode.children.length;
+  const previousNode = treeNode.children[childrenLength - 1];
+  if (shouldInsertComment(childrenLength, previousNode)) {
+    const commentNode = {
+      type: 6 /* COMMENT */,
+      children: [],
+      index: ++treeIndex,
+      _isTreeNode: true
+    };
+    treeNode.children.push(commentNode);
+  }
+  const textNode = {
+    type: 2 /* TEXT */,
+    children: [text],
+    index: ++treeIndex,
+    isLastChild,
+    _isTreeNode: true
+  };
+  treeNode.children.push(textNode);
+}
+function processChildSpread(child, treeNode, isLastChild) {
+  const spreadExpression = child.get("expression");
+  treeNode.children.push({
+    type: 7 /* SPREAD */,
+    // Type guard: spreadExpression.node is Expression in JSXSpreadChild
+    children: t6.isExpression(spreadExpression.node) ? [spreadExpression.node] : [],
+    index: treeIndex,
+    // Note: doesn't increment here because this is dynamic content
+    parentIndex: treeNode.index,
+    isLastChild,
+    _isTreeNode: true
+  });
+}
+function determineNodeType(tagName) {
+  const isComponent = isComponentName(tagName);
+  if (isComponent) {
+    return 1 /* COMPONENT */;
+  }
+  if (Me(tagName)) {
+    return 5 /* SVG */;
+  }
+  return 0 /* NORMAL */;
+}
+function processJSXText(path, treeNode) {
+  treeNode.type = 2 /* TEXT */;
+  try {
+    const textValue = textTrim(path.node);
+    treeNode.children = textValue ? [textValue] : [];
+  } catch (error) {
+    ne(`Text node processing failed: ${error}`);
+    treeNode.children = [];
+  }
+  return treeNode;
+}
+
+// src/jsx/shared.ts
+function isComponentName(tagName) {
+  if (!tagName) {
+    return false;
+  }
+  const firstCharCode = tagName.charCodeAt(0);
+  if (firstCharCode >= 65 && firstCharCode <= 90) {
+    return true;
+  }
+  const dotIndex = tagName.indexOf(".");
+  const colonIndex = tagName.indexOf(":");
+  if (dotIndex !== -1 || colonIndex !== -1) {
+    const segments = tagName.split(/[:.]/);
+    const len = segments.length;
+    for (let i = 0; i < len; i++) {
+      const segment = segments[i];
+      if (segment.length > 0) {
+        const segmentCharCode = segment.charCodeAt(0);
+        if (segmentCharCode >= 65 && segmentCharCode <= 90) {
+          return true;
+        }
+      }
+    }
+  }
+  return !(firstCharCode >= 97 && firstCharCode <= 122);
+}
+var getTagName = (node) => {
+  if (t7.isJSXFragment(node)) {
+    return FRAGMENT_NAME;
+  }
+  const tag = node.openingElement.name;
+  return jsxElementNameToString(tag);
+};
+function jsxElementNameToString(node) {
+  var _a, _b, _c, _d;
+  if (t7.isJSXMemberExpression(node)) {
+    return `${jsxElementNameToString(node.object)}.${jsxElementNameToString(node.property)}`;
+  }
+  if (t7.isMemberExpression(node)) {
+    const objectName = jsxElementNameToString(
+      node.object
+    );
+    const propertyName = jsxElementNameToString(
+      node.property
+    );
+    return `${objectName}.${propertyName}`;
+  }
+  if (t7.isJSXIdentifier(node) || t7.isIdentifier(node)) {
+    return node.name;
+  }
+  const namespace = (_b = (_a = node.namespace) == null ? void 0 : _a.name) != null ? _b : "";
+  const name = (_d = (_c = node.name) == null ? void 0 : _c.name) != null ? _d : "";
+  if (!namespace) {
+    return name;
+  }
+  if (!name) {
+    return namespace;
+  }
+  return `${namespace}:${name}`;
+}
+function textTrim(node) {
+  if (!node || !node.value) return "";
+  return node.value.trim();
+}
+function isValidChild(path) {
+  const regex = /^\s*$/;
+  if (t7.isStringLiteral(path.node)) {
+    return !regex.test(path.node.value);
+  }
+  if (t7.isJSXText(path.node)) {
+    return !regex.test(path.node.value);
+  }
+  return Object.keys(path.node).length > 0;
+}
+function getRawNodeText(path) {
+  if (path.isJSXText()) {
+    return path.node.value || "";
+  }
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      return String(expression.node.value);
+    }
+  }
+  return "";
+}
+function setNodeText(path, text) {
+  if (path.isJSXText()) {
+    path.node.value = text;
+  }
+  if (path.isJSXExpressionContainer()) {
+    const expression = path.get("expression");
+    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
+      expression.replaceWith(t7.stringLiteral(text));
+    }
+  }
+}
+function optimizeChildNodes(children) {
+  const mergedWithExpression = /* @__PURE__ */ new WeakSet();
+  return children.reduce((acc, cur) => {
+    var _a, _b, _c, _d;
+    if (isValidChild(cur)) {
+      const lastChild = acc.at(-1);
+      if (!lastChild) {
+        acc.push(cur);
+        return acc;
+      }
+      const lastIsPlainText = (_b = (_a = lastChild.isJSXText) == null ? void 0 : _a.call(lastChild)) != null ? _b : false;
+      const currentIsPlainText = (_d = (_c = cur.isJSXText) == null ? void 0 : _c.call(cur)) != null ? _d : false;
+      if (lastIsPlainText && t7.isJSXExpressionContainer(cur.node) && (cur.get("expression").isStringLiteral() || cur.get("expression").isNumericLiteral()) && !mergedWithExpression.has(lastChild)) {
+        const mergedText = getRawNodeText(lastChild) + getRawNodeText(cur);
+        setNodeText(lastChild, mergedText);
+        mergedWithExpression.add(lastChild);
+        return acc;
+      }
+      if (lastIsPlainText && currentIsPlainText && !mergedWithExpression.has(lastChild)) {
+        const mergedText = getRawNodeText(lastChild) + getRawNodeText(cur);
+        setNodeText(lastChild, mergedText);
+        return acc;
+      }
+      acc.push(cur);
+    }
+    return acc;
+  }, []);
+}
+function deepCheckObjectDynamic(node) {
+  if (!t7.isObjectExpression(node)) return false;
+  let dynamic = false;
+  function walk(current) {
+    if (dynamic) return;
+    if (t7.isIdentifier(current) || t7.isCallExpression(current) || t7.isMemberExpression(current) || t7.isConditionalExpression(current) || t7.isTemplateLiteral(current) || t7.isBinaryExpression(current) || t7.isUpdateExpression(current) || t7.isUnaryExpression(current) || t7.isAwaitExpression(current) || t7.isYieldExpression(current) || t7.isTaggedTemplateExpression(current)) {
+      dynamic = true;
+      return;
+    }
+    if (t7.isObjectExpression(current)) {
+      current.properties.forEach((prop) => {
+        if (t7.isObjectProperty(prop)) walk(prop.value);
+        if (t7.isSpreadElement(prop)) walk(prop.argument);
+      });
+      return;
+    }
+    if (t7.isArrayExpression(current)) {
+      current.elements.forEach((el) => el && walk(el));
+      return;
+    }
+  }
+  walk(node);
+  return dynamic;
+}
+function processObjectExpression(propName, objectExpr, propsCollection, isClassOrStyleAttr = false) {
+  let classStyleString = "";
+  if (deepCheckObjectDynamic(objectExpr)) {
+    propsCollection[propName] = objectExpr;
+  } else if (isClassOrStyleAttr) {
+    classStyleString = objectExpr.properties.filter((property) => t7.isObjectProperty(property)).reduce((acc, property) => {
+      const key = t7.isIdentifier(property.key) ? property.key.name : t7.isStringLiteral(property.key) ? property.key.value : String(property.key);
+      if (t7.isStringLiteral(property.value)) {
+        return `${acc}${key}:${property.value.value};`;
+      }
+      return acc;
+    }, "");
+    delete propsCollection[propName];
+  }
+  return classStyleString;
+}
+function getAttrName(attribute) {
+  if (t7.isJSXIdentifier(attribute.name)) {
+    return attribute.name.name;
+  }
+  if (t7.isJSXNamespacedName(attribute.name)) {
+    return `${attribute.name.namespace.name}:${attribute.name.name.name}`;
+  }
+  return "";
+}
+function serializeAttributes(attributes) {
+  if (!attributes || !w(attributes)) {
+    return "";
+  }
+  let attributesString = "";
+  let classNames = "";
+  let styleString = "";
+  for (const [attrName, attrValue] of Object.entries(attributes)) {
+    if (attrName === CLASS_NAME && m(attrValue)) {
+      classNames += ` ${attrValue}`;
+      delete attributes[attrName];
+    } else if (attrName === STYLE_NAME && m(attrValue)) {
+      styleString += `${attrValue}${attrValue.at(-1) === ";" ? "" : ";"}`;
+      delete attributes[attrName];
+    } else if (attrValue === true) {
+      attributesString += ` ${attrName}`;
+      delete attributes[attrName];
+    } else if (attrValue === false) {
+      delete attributes[attrName];
+    } else if (m(attrValue) || T(attrValue)) {
+      attributesString += ` ${attrName}="${attrValue}"`;
+      delete attributes[attrName];
+    } else if (t7.isConditionalExpression(attrValue)) {
+      attributes[attrName] = attrValue;
+    } else if (t7.isObjectExpression(attrValue)) {
+      const result = processObjectExpression(
+        attrName,
+        attrValue,
+        attributes,
+        attrName === CLASS_NAME || attrName === STYLE_NAME
+      );
+      if (result) {
+        if (attrName === CLASS_NAME) {
+          classNames += ` ${result}`;
+        }
+        if (attrName === STYLE_NAME) {
+          styleString += `${result}${result.at(-1) === ";" ? "" : ";"}`;
+        }
+      }
+    }
+  }
+  if (classNames.trim()) {
+    attributesString += ` ${CLASS_NAME}="${classNames.trim()}"`;
+  }
+  if (styleString.trim()) {
+    attributesString += ` ${STYLE_NAME}="${styleString.trim()}"`;
+  }
+  return attributesString;
+}
+function findBeforeIndex(currentNode, parentNode) {
+  var _a;
+  if (!((_a = parentNode == null ? void 0 : parentNode.children) == null ? void 0 : _a.length) || currentNode.isLastChild) {
+    return null;
+  }
+  const children = parentNode.children;
+  const childrenLength = children.length;
+  let nodeIndex = -1;
+  for (let i = 0; i < childrenLength; i++) {
+    if (children[i] === currentNode) {
+      nodeIndex = i;
+      break;
+    }
+  }
+  if (nodeIndex === -1 || nodeIndex === childrenLength - 1) {
+    return null;
+  }
+  for (let searchIndex = nodeIndex + 1; searchIndex < childrenLength; searchIndex++) {
+    const siblingNode = children[searchIndex];
+    const siblingType = siblingNode.type;
+    if (siblingType !== 4 /* EXPRESSION */ && siblingType !== 3 /* FRAGMENT */ && siblingType !== 1 /* COMPONENT */) {
+      return siblingNode.index;
+    }
+  }
+  return null;
+}
+function findIndexPosition(targetIndex, indexMap) {
+  if (d(indexMap)) {
+    return indexMap.indexOf(targetIndex);
+  }
+  if (E(indexMap)) {
+    const position = indexMap.get(targetIndex);
+    return T(position) ? position : -1;
+  }
+  return -1;
+}
+function normalizeProps(raw) {
+  const normalized = {};
+  const classBuffer = [];
+  const styleBuffer = [];
+  for (const [key, value] of Object.entries(raw)) {
+    if (key === CLASS_NAME || key === "className") {
+      if (m(value)) classBuffer.push(value);
+      else {
+        normalized[CLASS_NAME] = value;
+      }
+      continue;
+    }
+    if (key === STYLE_NAME) {
+      if (m(value)) styleBuffer.push(value);
+      else normalized[STYLE_NAME] = value;
+      continue;
+    }
+    if (key === SPREAD_NAME) {
+      if (!normalized[SPREAD_NAME]) normalized[SPREAD_NAME] = [];
+      normalized[SPREAD_NAME].push(value);
+      continue;
+    }
+    normalized[key] = value;
+  }
+  if (classBuffer.length) normalized[CLASS_NAME] = classBuffer.join(" ").trim();
+  if (styleBuffer.length) {
+    const s = styleBuffer.map((str) => str.endsWith(";") ? str : `${str};`).join("");
+    normalized[STYLE_NAME] = s;
+  }
+  return normalized;
+}
+function createPropsObjectExpression(propsData, transformJSX2) {
+  const objectProperties = [];
+  const propsToProcess = normalizeProps(propsData);
+  for (const propName in propsToProcess) {
+    const propValue = propsToProcess[propName];
+    if (propName === CHILDREN_NAME && (!propValue || d(propValue) && !propValue.length)) {
+      continue;
+    }
+    const astValue = convertValueToASTNode(propValue, transformJSX2);
+    if (propName === SPREAD_NAME) {
+      objectProperties.push(t7.spreadElement(astValue));
+    } else {
+      objectProperties.push(t7.objectProperty(t7.stringLiteral(propName), astValue));
+    }
+  }
+  return t7.objectExpression(objectProperties);
+}
+function convertValueToASTNode(value, transformJSX2) {
+  if (t7.isExpression(value)) {
+    return value;
+  }
+  if (d(value)) {
+    return t7.arrayExpression(value.map((item) => convertValueToASTNode(item, transformJSX2)));
+  }
+  if (w(value)) {
+    if (isTreeNode(value) && hasPureStringChildren(value)) {
+      const stringContent = extractStringChildren(value);
+      return t7.stringLiteral(stringContent);
+    }
+    if (value.type === 1 /* COMPONENT */ || value.type === 0 /* NORMAL */ || value.type === 2 /* TEXT */ || value.type === 5 /* SVG */) {
+      const { path } = getContext();
+      return transformJSX2(path, value);
+    }
+    if (value.type === 4 /* EXPRESSION */ && value.children && d(value.children) && value.children.length > 0) {
+      return convertValueToASTNode(value.children[0], transformJSX2);
     }
-    if (imports.size > 0) {
-      path.node.body.unshift(createImport(state, "essor"));
+    if (t7.isJSXElement(value) || t7.isJSXFragment(value)) {
+      const { path } = getContext();
+      const mockNodePath = {
+        node: value,
+        parentPath: path,
+        // Keep parent path reference
+        scope: path.scope
+        // Keep scope reference
+      };
+      const tree = createTree(mockNodePath);
+      return transformJSX2(path, tree);
     }
+    return createPropsObjectExpression(value, transformJSX2);
   }
-};
-function createImport(state, from) {
-  const ImportSpecifier = [];
-  imports.forEach((name) => {
-    const local = t.identifier(state[name].name);
-    const imported = t.identifier(name);
-    ImportSpecifier.push(t.importSpecifier(local, imported));
-  });
-  const importSource = t.stringLiteral(from);
-  return t.importDeclaration(ImportSpecifier, importSource);
-}
-
-// src/shared.ts
-import { types as t2 } from "@babel/core";
-function hasSiblingElement(path) {
-  const siblings = path.getAllPrevSiblings().concat(path.getAllNextSiblings());
-  const hasSibling = siblings.some(
-    (siblingPath) => siblingPath.isJSXElement() || siblingPath.isJSXExpressionContainer()
-  );
-  return hasSibling;
-}
-function getAttrName(attribute) {
-  if (t2.isJSXIdentifier(attribute.name)) {
-    return attribute.name.name;
+  if (m(value)) {
+    return t7.stringLiteral(value);
   }
-  if (t2.isJSXNamespacedName(attribute.name)) {
-    return `${attribute.name.namespace.name}:${attribute.name.name.name}`;
+  if (T(value)) {
+    return t7.numericLiteral(value);
   }
-  throw new Error("Unsupported attribute type");
-}
-function getTagName(node) {
-  const tag = node.openingElement.name;
-  return jsxElementNameToString(tag);
-}
-function jsxElementNameToString(node) {
-  if (t2.isJSXMemberExpression(node)) {
-    return `${jsxElementNameToString(node.object)}.${jsxElementNameToString(node.property)}`;
+  if (z(value)) {
+    return t7.booleanLiteral(value);
   }
-  if (t2.isJSXIdentifier(node) || t2.isIdentifier(node)) {
-    return node.name;
+  if (_(value)) {
+    return t7.identifier("undefined");
   }
-  return `${node.namespace.name}:${node.name.name}`;
-}
-function isComponent(tagName) {
-  return tagName[0] && tagName[0].toLowerCase() !== tagName[0] || tagName.includes(".") || /[^a-z]/i.test(tagName[0]);
+  if (y(value)) {
+    return t7.nullLiteral();
+  }
+  return value;
 }
-function isTextChild(path) {
-  if (path.isJSXExpressionContainer()) {
-    const expression = path.get("expression");
-    if (expression.isJSXText() || expression.isStringLiteral() || expression.isNumericLiteral()) {
-      return true;
-    }
+function getSetFunctionForAttribute(attrName) {
+  const { state } = getContext();
+  switch (attrName) {
+    case CLASS_NAME:
+      return {
+        name: "patchClass",
+        value: state.imports.patchClass
+      };
+    case STYLE_NAME:
+      return { name: "patchStyle", value: state.imports.patchStyle };
+    default:
+      return { name: "patchAttr", value: state.imports.patchAttr };
   }
-  if (path.isJSXText() || path.isStringLiteral() || path.isNullLiteral()) {
+}
+function isDynamicExpression(node) {
+  if (!node) return false;
+  if (t7.isIdentifier(node) || t7.isMemberExpression(node) || t7.isOptionalMemberExpression(node) || t7.isCallExpression(node) || t7.isOptionalCallExpression(node) || t7.isConditionalExpression(node) || t7.isLogicalExpression(node) || t7.isTemplateLiteral(node) || t7.isTaggedTemplateExpression(node) || t7.isBinaryExpression(node) || t7.isUnaryExpression(node) || t7.isUpdateExpression(node) || t7.isAwaitExpression(node) || t7.isYieldExpression(node) || t7.isAssignmentExpression(node) || t7.isSequenceExpression(node) || t7.isArrowFunctionExpression(node) || t7.isFunctionExpression(node)) {
     return true;
   }
-  return false;
+  if (t7.isObjectExpression(node)) {
+    return deepCheckObjectDynamic(node);
+  }
+  if (t7.isArrayExpression(node)) {
+    return node.elements.some((el) => el != null && t7.isNode(el) && isDynamicExpression(el));
+  }
+  if (t7.isStringLiteral(node) || t7.isNumericLiteral(node) || t7.isBooleanLiteral(node) || t7.isNullLiteral(node) || t7.isRegExpLiteral(node)) {
+    return false;
+  }
+  return t7.isExpression(node);
 }
-function setNodeText(path, text) {
-  if (path.isJSXText()) {
-    path.node.value = text;
+function hasPureStringChildren(node) {
+  if (!node.children || node.children.length === 0) {
+    return false;
   }
-  if (path.isJSXExpressionContainer()) {
-    const expression = path.get("expression");
-    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      expression.replaceWith(t2.stringLiteral(text));
+  return node.children.every((child) => {
+    if (m(child)) {
+      return true;
     }
-  }
+    if (isTreeNode(child) && child.type === 2 /* TEXT */) {
+      return true;
+    }
+    return false;
+  });
 }
-function isSymbolStart(path, name) {
-  const state = path.state;
-  const { symbol } = (state == null ? void 0 : state.opts) || "$";
-  return startsWith(name, symbol);
+function extractStringChildren(node) {
+  if (!node.children || node.children.length === 0) {
+    return "";
+  }
+  return node.children.map((child) => {
+    if (m(child)) {
+      return child;
+    }
+    if (isTreeNode(child) && child.type === 2 /* TEXT */ && child.children) {
+      return child.children.join("");
+    }
+    return "";
+  }).join("");
 }
 
-// src/jsx/constants.ts
-var selfClosingTags = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-var svgTags = [
-  "circle",
-  "clipPath",
-  "defs",
-  "ellipse",
-  "filter",
-  "g",
-  "line",
-  "linearGradient",
-  "mask",
-  "path",
-  "pattern",
-  "polygon",
-  "polyline",
-  "radialGradient",
-  "rect",
-  "stop",
-  "symbol",
-  "text",
-  "use"
-];
-
-// src/jsx/index.ts
-var isSSG = false;
-function addToTemplate(result, content, join = false) {
-  if (isSSG) {
-    if (join && result.template.length > 0) {
-      result.template[result.template.length - 1] += content;
-    } else {
-      result.template.push(content);
+// src/jsx/client.ts
+function transformJSXToClient(path, node) {
+  const state = path.state;
+  if (node.type === 1 /* COMPONENT */) {
+    const props = __spreadProps(__spreadValues({}, node.props), { children: node.children });
+    return createComponentExpression(node, props);
+  }
+  const staticTemplate = generateStaticTemplate(node);
+  const dynamicCollection = generateDynamic(node);
+  const indexMap = generateIndexMap(dynamicCollection);
+  const elementId = path.scope.generateUidIdentifier("_$el");
+  const nodesId = path.scope.generateUidIdentifier("_$nodes");
+  const statements = [];
+  if (staticTemplate) {
+    addImport(importMap.template);
+    const tmplId = path.scope.generateUidIdentifier("_$tmpl");
+    state.declarations.push(
+      t8.variableDeclarator(
+        tmplId,
+        t8.callExpression(state.imports.template, G(staticTemplate).map(t8.stringLiteral))
+      )
+    );
+    statements.push(
+      t8.variableDeclaration("const", [
+        t8.variableDeclarator(elementId, t8.callExpression(tmplId, []))
+      ])
+    );
+  }
+  if (dynamicCollection.children.length || dynamicCollection.props.length) {
+    addImport(importMap.mapNodes);
+    statements.push(
+      t8.variableDeclaration("const", [
+        t8.variableDeclarator(
+          nodesId,
+          t8.callExpression(state.imports.mapNodes, [
+            elementId,
+            t8.arrayExpression(indexMap.map((idx) => t8.numericLiteral(idx)))
+          ])
+        )
+      ])
+    );
+    if (dynamicCollection.children.length) {
+      generateDynamicChildrenCode(dynamicCollection.children, statements, state, nodesId, indexMap);
+    }
+    if (dynamicCollection.props.length) {
+      generateDynamicPropsCode(dynamicCollection.props, statements, state, nodesId, indexMap);
+    }
+    if (dynamicCollection.operations.length) {
+      generateUnifiedMemoizedEffect(
+        dynamicCollection.operations,
+        statements,
+        state,
+        nodesId,
+        indexMap
+      );
     }
-  } else {
-    result.template += content;
   }
+  statements.push(t8.returnStatement(elementId));
+  return t8.callExpression(t8.arrowFunctionExpression([], t8.blockStatement(statements)), []);
 }
-function transformJSX(path) {
-  const state = path.state;
-  isSSG = state.opts.ssg;
-  const result = {
-    index: 1,
-    isLastChild: false,
-    parentIndex: 0,
-    props: {},
-    template: isSSG ? [] : ""
+function generatePropKey(attrName = "attr") {
+  const { operationIndex } = getContext();
+  const keyMap = {
+    [CLASS_NAME]: "c",
+    [STYLE_NAME]: "s",
+    name: "n",
+    attr: "a"
   };
-  transformJSXElement(path, result, true);
-  path.replaceWith(createEssorNode(path, result));
+  const baseKey = keyMap[attrName] || attrName.charAt(0);
+  setContext(__spreadProps(__spreadValues({}, getContext()), { operationIndex: operationIndex + 1 }));
+  setContext(__spreadProps(__spreadValues({}, getContext()), { operationIndex: operationIndex + 1 }));
+  return `${baseKey}${operationIndex}`;
 }
-function replaceSpace(node) {
-  return node.value.replaceAll(/\s+/g, " ").trim();
+function transformJSXClientChildren(path, treeNode) {
+  return transformJSXToClient(path, treeNode);
 }
-function createEssorNode(path, result) {
-  const state = path.state;
-  const isComponent2 = path.isJSXElement() && isComponent(getTagName(path.node));
-  const tmpl = isComponent2 ? t3.identifier(getTagName(path.node)) : path.scope.generateUidIdentifier("_tmpl$");
-  if (!isComponent2) {
-    const template = isSSG ? t3.arrayExpression(result.template.map(t3.stringLiteral)) : t3.callExpression(state.template, [t3.stringLiteral(result.template)]);
-    state.tmplDeclaration.declarations.push(t3.variableDeclarator(tmpl, template));
-    if (!isSSG) {
-      imports.add("template");
-    }
-  }
-  const key = result.props.key;
-  delete result.props.key;
-  const args = [tmpl, createProps(result.props)];
-  if (key) {
-    args.push(key);
+function createComponentExpression(node, componentProps) {
+  const { state } = getContext();
+  addImport(importMap.createComponent);
+  const isBuiltIn = BUILT_IN_COMPONENTS.includes(node.tag);
+  if (isBuiltIn) {
+    addImport(importMap[node.tag]);
   }
-  const fnName = isSSG ? "ssg" : "h";
-  imports.add(fnName);
-  return t3.callExpression(state[fnName], args);
-}
-function createProps(props) {
-  const toAstNode = (value) => {
-    if (isArray(value)) {
-      return t3.arrayExpression(value.map(toAstNode));
-    }
-    if (value && typeof value === "object" && !t3.isNode(value)) {
-      return createProps(value);
-    }
-    switch (typeof value) {
-      case "string":
-        return t3.stringLiteral(value);
-      case "number":
-        return t3.numericLiteral(value);
-      case "boolean":
-        return t3.booleanLiteral(value);
-      case "undefined":
-      case void 0:
-        return t3.tsUndefinedKeyword();
-      case null:
-        return t3.nullLiteral();
-      default:
-        return value;
-    }
-  };
-  const result = Object.entries(props).map(
-    ([prop, value]) => prop === "_$spread$" ? t3.spreadElement(toAstNode(value)) : t3.objectProperty(t3.stringLiteral(prop), toAstNode(value))
-  );
-  return t3.objectExpression(result);
-}
-function transformJSXElement(path, result, isRoot = false) {
-  if (path.isJSXElement()) {
-    const tagName = getTagName(path.node);
-    const tagIsComponent = isComponent(tagName);
-    const isSelfClose = !tagIsComponent && selfClosingTags.includes(tagName);
-    const isSvg = svgTags.includes(tagName) && result.index === 1;
-    const { props, hasExpression } = getAttrProps(path);
-    if (props.key) {
-      result.props.key = props.key;
-      delete props.key;
-    }
-    if (tagIsComponent) {
-      handleComponentElement(path, result, isRoot, props);
-    } else {
-      handleHTMLElement(path, result, tagName, isSelfClose, isSvg, props, hasExpression);
+  const argTag = isBuiltIn ? state.imports[node.tag] : t8.identifier(node.tag);
+  const propsObj = createPropsObjectExpression(componentProps, transformJSXClientChildren);
+  const args = [argTag, propsObj];
+  return t8.callExpression(state.imports[CREATE_COMPONENT_NAME], args);
+}
+function generateIndexMap({
+  props,
+  children,
+  operations = []
+}) {
+  const indexSet = /* @__PURE__ */ new Set();
+  for (const item of children) {
+    if (!N(item.parentIndex)) {
+      indexSet.add(item.parentIndex);
     }
-  } else {
-    result.index--;
-    transformChildren(path, result);
-  }
-}
-function handleComponentElement(path, result, isRoot, props) {
-  if (isRoot) {
-    result.props = props;
-    const children = getChildren(path);
-    if (children.length > 0) {
-      const childrenGenerator = children.length === 1 ? children[0] : t3.arrayExpression(children);
-      if (t3.isConditionalExpression(childrenGenerator)) {
-        result.props.children = t3.arrowFunctionExpression([], childrenGenerator);
-      } else {
-        result.props.children = childrenGenerator;
-      }
+    if (!N(item.before)) {
+      indexSet.add(item.before);
     }
-  } else {
-    transformJSX(path);
-    replaceChild(path.node, result);
   }
-}
-function handleHTMLElement(path, result, tagName, isSelfClose, isSvg, props, hasExpression) {
-  if (isSvg) {
-    result.template = isSSG ? [`<svg _svg_  data-hk="${result.index}">`] : `<svg _svg_ >`;
+  for (const item of props) {
+    if (!N(item.parentIndex)) {
+      indexSet.add(item.parentIndex);
+    }
   }
-  addToTemplate(result, `<${tagName}${isSSG ? ` data-hk="${result.index}"` : ""}`, true);
-  handleAttributes(props, result);
-  addToTemplate(result, isSelfClose ? "/>" : ">", !hasExpression);
-  if (!isSelfClose) {
-    transformChildren(path, result);
-    if (hasSiblingElement(path) || isSSG) {
-      addToTemplate(result, `</${tagName}>`);
+  if (operations && operations.length > 0) {
+    for (const item of operations) {
+      if (!N(item.nodeIndex)) {
+        indexSet.add(item.nodeIndex);
+      }
     }
   }
-}
-function transformChildren(path, result) {
-  const parentIndex = result.index;
-  path.get("children").reduce((pre, cur) => {
-    if (isValidChild(cur)) {
-      const lastChild = pre.at(-1);
-      if (lastChild && isTextChild(cur) && isTextChild(lastChild)) {
-        setNodeText(lastChild, getNodeText(lastChild) + getNodeText(cur));
-      } else {
-        pre.push(cur);
+  const indexMap = Array.from(indexSet).sort((a2, b) => a2 - b);
+  if (true) {
+    for (const index of indexMap) {
+      if (!Number.isInteger(index) || index < 1) {
+        ne(`Invalid index in index map: ${index}. All indices must be positive integers.`);
       }
     }
-    return pre;
-  }, []).forEach((child, i, arr) => {
-    result.parentIndex = parentIndex;
-    result.isLastChild = i === arr.length - 1;
-    transformChild(child, result);
-  });
+  }
+  return indexMap;
 }
-function transformChild(child, result) {
-  result.index++;
-  if (child.isJSXElement() || child.isJSXFragment()) {
-    transformJSXElement(child, result, false);
-  } else if (child.isJSXExpressionContainer()) {
-    const expression = child.get("expression");
-    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      addToTemplate(result, `${expression.node.value}`, true);
-    } else if (expression.isExpression()) {
-      replaceChild(expression.node, result);
-    } else if (t3.isJSXEmptyExpression(expression.node)) {
+function createAttributeStatement(functionIdentifier, nodesId, nodeIndex, value, key) {
+  const args = [t8.memberExpression(nodesId, t8.numericLiteral(nodeIndex), true)];
+  if (key) {
+    args.push(key);
+  }
+  if (value) {
+    if (d(value)) {
+      args.push(...value);
     } else {
-      throw new Error("Unsupported child type");
+      args.push(value);
     }
-  } else if (child.isJSXText()) {
-    addToTemplate(result, replaceSpace(child.node), true);
-  } else {
-    throw new Error("Unsupported child type");
   }
+  const functionCall = t8.callExpression(functionIdentifier, args);
+  return t8.expressionStatement(functionCall);
 }
-function getNodeText(path) {
-  if (path.isJSXText()) {
-    return replaceSpace(path.node);
-  }
-  if (path.isJSXExpressionContainer()) {
-    const expression = path.get("expression");
-    if (expression.isStringLiteral() || expression.isNumericLiteral()) {
-      return String(expression.node.value);
+function addEventListenerStatement(attrName, attrValue, nodesId, nodeIndex, statements, state) {
+  var _a;
+  const eventName = attrName.slice(2).toLowerCase();
+  if (Oe(eventName)) {
+    const activeContext = getContext();
+    if (!activeContext) {
+      ne("Missing active context, unable to handle delegated events");
+      return;
     }
+    const elementRef = t8.memberExpression(nodesId, t8.numericLiteral(nodeIndex), true);
+    const eventProperty = t8.memberExpression(elementRef, t8.stringLiteral(`_$${eventName}`), true);
+    const assignmentStmt = t8.expressionStatement(
+      t8.assignmentExpression("=", eventProperty, attrValue)
+    );
+    statements.push(assignmentStmt);
+    (_a = state.events) == null ? void 0 : _a.add(eventName);
+    return;
   }
-  return "";
+  addImport(importMap.addEventListener);
+  const eventListenerStmt = createAttributeStatement(
+    state.imports.addEventListener,
+    nodesId,
+    nodeIndex,
+    attrValue,
+    t8.stringLiteral(eventName)
+  );
+  statements.push(eventListenerStmt);
 }
-function isStyleClassName(name) {
-  return name === "class" || name === "style";
+function generateSpecificAttributeCode(attributeName, attributeValue, nodesId, nodeIndex, statements, state) {
+  switch (attributeName) {
+    case CLASS_NAME:
+      addImport(importMap.patchClass);
+      statements.push(
+        createAttributeStatement(state.imports.patchClass, nodesId, nodeIndex, attributeValue)
+      );
+      break;
+    case SPREAD_NAME:
+      addImport(importMap.setSpread);
+      statements.push(
+        createAttributeStatement(state.imports.setSpread, nodesId, nodeIndex, attributeValue)
+      );
+      break;
+    case STYLE_NAME:
+      addImport(importMap.patchStyle);
+      statements.push(
+        createAttributeStatement(state.imports.patchStyle, nodesId, nodeIndex, attributeValue)
+      );
+      break;
+    default:
+      if (q(attributeName, `${UPDATE_PREFIX}:`)) {
+        addImport(importMap.bindElement);
+        const attrName = attributeName.split(":")[1];
+        statements.push(
+          createAttributeStatement(
+            state.imports.bindElement,
+            nodesId,
+            nodeIndex,
+            attributeValue,
+            t8.stringLiteral(attrName)
+          )
+        );
+        return;
+      }
+      addImport(importMap.patchAttr);
+      statements.push(
+        createAttributeStatement(
+          state.imports.patchAttr,
+          nodesId,
+          nodeIndex,
+          attributeValue,
+          t8.stringLiteral(attributeName)
+        )
+      );
+      break;
+  }
 }
-function handleAttributes(props, result) {
-  let klass = "";
-  let style = "";
-  for (const [prop, value] of Object.entries(props)) {
-    if (prop === "class" && typeof value === "string") {
-      klass += ` ${value}`;
-      delete props[prop];
-    } else if (prop === "style" && typeof value === "string") {
-      style += `${value}${value.at(-1) === ";" ? "" : ";"}`;
-      delete props[prop];
-    } else if (value === true) {
-      addToTemplate(result, ` ${prop}`);
-      delete props[prop];
-    } else if (value === false) {
-      delete props[prop];
-    } else if (typeof value === "string" || typeof value === "number") {
-      addToTemplate(result, ` ${prop}="${value}"`);
-      delete props[prop];
-    } else if (t3.isConditionalExpression(value)) {
-      props[prop] = t3.arrowFunctionExpression([], value);
-    } else if (t3.isObjectExpression(value)) {
-      const val = handleObjectExpression(prop, value, props, isStyleClassName(prop));
-      if (val) {
-        if (prop === "class") {
-          klass += ` ${val}`;
-        }
-        if (prop === "style") {
-          style += `${val}${val.at(-1) === ";" ? "" : ";"}`;
+function processIIFEExpression(node) {
+  if (t8.isCallExpression(node) && (t8.isArrowFunctionExpression(node.callee) || t8.isFunctionExpression(node.callee)) && node.arguments.length === 0) {
+    const callee = node.callee;
+    const body = callee.body;
+    if (t8.isBlockStatement(body)) {
+      if (body.body.length === 1) {
+        const statement = body.body[0];
+        if (t8.isReturnStatement(statement) && statement.argument) {
+          return statement.argument;
         }
       }
+    } else if (t8.isExpression(body)) {
+      return body;
     }
   }
-  if (Object.keys(props).length > 0) {
-    result.props[result.index] = props;
+  return node;
+}
+function createInsertArguments(dynamicContent, nodesIdentifier, indexMap) {
+  if (N(dynamicContent.parentIndex)) {
+    throw new Error("Dynamic content missing valid parent node index");
   }
-  if (klass.trim()) {
-    addToTemplate(result, ` class="${klass.trim()}"`);
+  const parentPosition = findIndexPosition(dynamicContent.parentIndex, indexMap);
+  if (parentPosition === -1) {
+    throw new Error(
+      `Cannot find parent node index in index mapping: ${dynamicContent.parentIndex}`
+    );
   }
-  if (style.trim()) {
-    addToTemplate(result, ` style="${style.trim()}"`);
+  const argExpressions = [
+    // Target parent node reference: nodes[parentPosition]
+    t8.memberExpression(nodesIdentifier, t8.numericLiteral(parentPosition), true),
+    // CallExpression not be use call function
+    // Content lazy function: () => dynamicContent (implements on-demand calculation)
+    t8.isCallExpression(dynamicContent.node) || t8.isArrowFunctionExpression(dynamicContent.node) || t8.isFunctionExpression(dynamicContent.node) ? dynamicContent.node : t8.arrowFunctionExpression([], dynamicContent.node)
+  ];
+  if (dynamicContent.before !== null) {
+    const beforePosition = findIndexPosition(dynamicContent.before, indexMap);
+    if (beforePosition === -1) {
+      throw new Error(`Cannot find before node index in index mapping: ${dynamicContent.before}`);
+    }
+    argExpressions.push(
+      t8.memberExpression(nodesIdentifier, t8.numericLiteral(beforePosition), true)
+    );
   }
+  return argExpressions;
 }
-function handleObjectExpression(prop, value, props, isCt = false) {
-  let ct = "";
-  const hasConditional = value.properties.some(
-    (property) => t3.isObjectProperty(property) && t3.isConditionalExpression(property.value)
-  );
-  if (hasConditional) {
-    props[prop] = t3.arrowFunctionExpression([], value);
-  } else if (isCt) {
-    value.properties.forEach((property) => {
-      if (t3.isObjectProperty(property)) {
-        ct += `${property.key.name || property.key.value}:${property.value.value};`;
-      }
-    });
-    delete props[prop];
+function generateDynamicChildrenCode(dynamicChildren, statements, state, nodesId, indexMap) {
+  addImport(importMap.insert);
+  for (const dynamicContent of dynamicChildren) {
+    const processedNode = processIIFEExpression(dynamicContent.node);
+    const insertArgs = createInsertArguments(
+      __spreadProps(__spreadValues({}, dynamicContent), { node: processedNode }),
+      nodesId,
+      indexMap
+    );
+    const insertCall = t8.callExpression(state.imports.insert, insertArgs);
+    statements.push(t8.expressionStatement(insertCall));
   }
-  return ct;
 }
-function replaceChild(node, result) {
-  var _a, _b, _c, _d, _e;
-  if (result.isLastChild) {
-    result.index--;
-  } else {
-    addToTemplate(result, "<!>");
-  }
-  (_c = (_a = result.props)[_b = result.parentIndex]) != null ? _c : _a[_b] = {};
-  (_e = (_d = result.props[result.parentIndex]).children) != null ? _e : _d.children = [];
-  result.props[result.parentIndex].children.push(
-    t3.arrayExpression([
-      t3.arrowFunctionExpression([], node),
-      result.isLastChild ? t3.nullLiteral() : t3.identifier(String(result.index))
-    ])
-  );
-}
-function getChildren(path) {
-  return path.get("children").filter((child) => isValidChild(child)).map((child) => {
-    if (child.isJSXElement() || child.isJSXFragment()) {
-      transformJSX(child);
-    } else if (child.isJSXExpressionContainer()) {
-      child.replaceWith(child.get("expression"));
-    } else if (child.isJSXText()) {
-      child.replaceWith(t3.stringLiteral(replaceSpace(child.node)));
-    } else {
-      throw new Error("Unsupported child type");
+function generateDynamicPropsCode(dynamicProps, statements, state, nodesId, indexMap) {
+  for (const propItem of dynamicProps) {
+    const { parentIndex, props } = propItem;
+    if (parentIndex === null) {
+      continue;
     }
-    return child.node;
-  });
-}
-function isValidChild(path) {
-  const regex = /^\s*$/;
-  if (path.isStringLiteral() || path.isJSXText()) {
-    return !regex.test(path.node.value);
-  }
-  return Object.keys(path.node).length > 0;
-}
-function getAttrProps(path) {
-  const props = {};
-  let hasExpression = false;
-  path.get("openingElement").get("attributes").forEach((attribute) => {
-    if (attribute.isJSXAttribute()) {
-      const name = getAttrName(attribute.node);
-      const value = attribute.get("value");
-      if (!value.node) {
-        props[name] = true;
-      } else if (value.isStringLiteral()) {
-        props[name] = value.node.value;
-      } else {
-        if (value.isJSXExpressionContainer()) {
-          const expression = value.get("expression");
-          if (expression.isStringLiteral()) {
-            props[name] = expression.node.value;
-          } else if (expression.isNumericLiteral()) {
-            props[name] = expression.node.value;
-          } else if (expression.isJSXElement() || expression.isJSXFragment()) {
-            transformJSX(expression);
-            props[name] = expression.node;
-          } else if (expression.isExpression()) {
-            hasExpression = true;
-            if (/^key|ref|on.+$/.test(name)) {
-              props[name] = expression.node;
-            } else if (/^bind:.+/.test(name)) {
-              const value2 = path.scope.generateUidIdentifier("value");
-              const bindName = name.slice(5).toLocaleLowerCase();
-              props[bindName] = expression.node;
-              props[`update${capitalize(bindName)}`] = t3.arrowFunctionExpression(
-                [value2],
-                t3.assignmentExpression("=", expression.node, value2)
-              );
-            } else {
-              if (expression.isConditionalExpression()) {
-                props[name] = t3.arrowFunctionExpression([], expression.node);
-              } else {
-                props[name] = expression.node;
-              }
-            }
+    const parentIndexPosition = indexMap.indexOf(parentIndex);
+    if (parentIndexPosition === -1) {
+      ne(`Cannot find parent node index: ${parentIndex}`);
+      continue;
+    }
+    for (const [attrName, attrValue] of Object.entries(props)) {
+      try {
+        if (attrName.startsWith(`${UPDATE_PREFIX}:`) && Array.isArray(attrValue)) {
+          if (attrValue.length === 2 && t8.isExpression(attrValue[0]) && t8.isExpression(attrValue[1])) {
+            generateSpecificAttributeCode(
+              attrName,
+              attrValue,
+              // Pass array as-is, createAttributeStatement will spread it
+              nodesId,
+              parentIndexPosition,
+              statements,
+              state
+            );
           }
-        } else if (value.isJSXElement() || value.isJSXFragment()) {
-          transformJSX(value);
-          props[name] = value.node;
+          continue;
+        }
+        if (!t8.isExpression(attrValue)) {
+          continue;
+        }
+        if (attrName.startsWith("on")) {
+          addEventListenerStatement(
+            attrName,
+            attrValue,
+            nodesId,
+            parentIndexPosition,
+            statements,
+            state
+          );
+        } else {
+          generateSpecificAttributeCode(
+            attrName,
+            attrValue,
+            nodesId,
+            parentIndexPosition,
+            statements,
+            state
+          );
         }
+      } catch (error) {
+        ne(`Attribute processing failed (${attrName}): ${error}`);
       }
-    } else if (attribute.isJSXSpreadAttribute()) {
-      props._$spread$ = attribute.get("argument").node;
-      hasExpression = true;
+    }
+  }
+}
+function generateUnifiedMemoizedEffect(reactiveOperations, statements, state, nodesId, indexMap) {
+  addImport(importMap.memoEffect);
+  const variableDeclarations = reactiveOperations.map((op, index) => {
+    let attrValue = op.attrValue;
+    if (t8.isIdentifier(op.attrValue) && isSignal(op.attrValue.name)) {
+      attrValue = t8.memberExpression(attrValue, t8.identifier("value"));
+    }
+    return t8.variableDeclarator(t8.identifier(`_v$${index}`), attrValue);
+  });
+  const updateStatements = reactiveOperations.map((op, index) => {
+    const parentPosition = findIndexPosition(op.nodeIndex, indexMap);
+    if (parentPosition === -1) {
+      throw new Error(`Cannot find parent node index in index mapping: ${op.nodeIndex}`);
+    }
+    const varName = t8.identifier(`_v$${index}`);
+    const elementRef = t8.memberExpression(nodesId, t8.numericLiteral(parentPosition), true);
+    let domOperationCall;
+    if (op.setFunction.name === "patchAttr") {
+      domOperationCall = t8.callExpression(op.setFunction.value, [
+        elementRef,
+        t8.stringLiteral(op.attrName),
+        t8.memberExpression(t8.identifier("_p$"), t8.identifier(op.propKey)),
+        t8.assignmentExpression(
+          "=",
+          t8.memberExpression(t8.identifier("_p$"), t8.identifier(op.propKey)),
+          varName
+        )
+      ]);
     } else {
-      throw new Error("Unsupported attribute type");
+      domOperationCall = t8.callExpression(op.setFunction.value, [
+        elementRef,
+        t8.memberExpression(t8.identifier("_p$"), t8.identifier(op.propKey)),
+        t8.assignmentExpression(
+          "=",
+          t8.memberExpression(t8.identifier("_p$"), t8.identifier(op.propKey)),
+          varName
+        )
+      ]);
     }
+    return t8.expressionStatement(
+      t8.logicalExpression(
+        "&&",
+        t8.binaryExpression(
+          "!==",
+          varName,
+          t8.memberExpression(t8.identifier("_p$"), t8.identifier(op.propKey))
+        ),
+        domOperationCall
+      )
+    );
   });
-  return {
-    props,
-    hasExpression
-  };
+  const effectBody = t8.blockStatement([
+    // var _v$0 = expr1, _v$1 = expr2, ...;
+    t8.variableDeclaration("var", variableDeclarations),
+    // All update statements
+    ...updateStatements,
+    // return _p$;
+    t8.returnStatement(t8.identifier("_p$"))
+  ]);
+  const effectFunction = t8.arrowFunctionExpression([t8.identifier("_p$")], effectBody);
+  const initialStateProperties = reactiveOperations.map(
+    (op) => t8.objectProperty(t8.identifier(op.propKey), t8.identifier("undefined"))
+  );
+  const initialState = t8.objectExpression(initialStateProperties);
+  const memoizedEffectCall = t8.callExpression(state.imports.memoEffect, [
+    effectFunction,
+    initialState
+  ]);
+  statements.push(t8.expressionStatement(memoizedEffectCall));
 }
-
-// src/signal/symbol.ts
-import { types as t4 } from "@babel/core";
-function replaceSymbol(path) {
-  const { init, id } = path.node;
-  const variableName = id.name;
-  if (t4.isObjectPattern(id) || t4.isArrayPattern(id) || !isSymbolStart(path, variableName)) return;
-  const isComputed = init && (t4.isFunctionExpression(init) || t4.isArrowFunctionExpression(init)) && path.parent.kind === "const";
-  const hookName = isComputed ? "useComputed" : "useSignal";
-  const newInit = t4.callExpression(t4.identifier(path.state[hookName].name), init ? [init] : []);
-  imports.add(hookName);
-  path.node.init = newInit;
+function generateStaticTemplate(node) {
+  if (!node || node.type === 1 /* COMPONENT */) {
+    return "";
+  }
+  switch (node.type) {
+    case 2 /* TEXT */:
+      return Array.isArray(node.children) ? node.children.join("") : "";
+    case 6 /* COMMENT */:
+      return "<!>";
+    case 0 /* NORMAL */:
+    case 5 /* SVG */:
+      return gstForNormal(node);
+    default:
+      return gstForChildren(node);
+  }
 }
-function symbolIdentifier(path) {
-  const parentPath = path.parentPath;
-  if (!shouldProcessIdentifier(parentPath)) return;
-  const { node } = path;
-  if (!isSymbolStart(path, node.name)) return;
-  if (!path.findParent((p) => p.isMemberExpression() && p.node.property.name === "value")) {
-    path.replaceWith(t4.memberExpression(t4.identifier(node.name), t4.identifier("value")));
+function gstForNormal(node) {
+  if (!node.tag) {
+    return gstForChildren(node);
   }
+  const attributes = serializeAttributes(node.props);
+  const startTag = `<${node.tag}${attributes ? ` ${attributes}` : ""}`;
+  if (node.selfClosing) {
+    return `${startTag}/>`;
+  }
+  return `${startTag}>${gstForChildren(node)}</${node.tag}>`;
 }
-function shouldProcessIdentifier(parentPath) {
-  return parentPath && !t4.isVariableDeclarator(parentPath) && !t4.isImportSpecifier(parentPath) && !t4.isObjectProperty(parentPath) && !t4.isArrayPattern(parentPath) && !t4.isObjectPattern(parentPath);
+function gstForChildren(node) {
+  if (!node.children || !node.children.length) {
+    return "";
+  }
+  const childTemplates = [];
+  for (const child of node.children) {
+    if (w(child)) {
+      const childTemplate = generateStaticTemplate(child);
+      childTemplates.push(childTemplate);
+    } else if (m(child)) {
+      childTemplates.push(child);
+    }
+  }
+  return childTemplates.join("");
 }
-function symbolObjectPattern(path) {
-  path.node.properties.forEach((property) => {
-    if (t4.isObjectProperty(property) && t4.isIdentifier(property.key) && isSymbolStart(path, property.key.name)) {
-      property.key = t4.identifier(property.key.name);
+function generateDynamic(node) {
+  const dynamicCollection = {
+    props: [],
+    children: [],
+    operations: []
+  };
+  function walk(node2, parentNode) {
+    processNodeDynamic(dynamicCollection, node2, parentNode);
+    if (node2.type === 1 /* COMPONENT */ || node2.type === 3 /* FRAGMENT */) {
+      return;
     }
-  });
+    if (node2.children && node2.children.length) {
+      node2.children.forEach((child) => {
+        if (isTreeNode(child)) {
+          walk(child, node2);
+        }
+      });
+    }
+  }
+  walk(node);
+  return dynamicCollection;
 }
-function symbolArrayPattern(path) {
-  path.node.elements.forEach((element) => {
-    if (t4.isIdentifier(element) && element.name.startsWith("$")) {
-      element.name = t4.identifier(element.name).name;
-    } else if (t4.isObjectPattern(element)) {
-      symbolObjectPattern({ node: element });
+function processNodeDynamic(dynamicCollection, node, parentNode) {
+  var _a, _b, _c, _d;
+  const { children, props, operations } = dynamicCollection;
+  switch (node.type) {
+    case 1 /* COMPONENT */: {
+      const componentProps = __spreadProps(__spreadValues({}, node.props), { children: node.children });
+      const componentExpr = createComponentExpression(node, componentProps);
+      children.push({
+        index: node.index,
+        node: componentExpr,
+        before: findBeforeIndex(node, parentNode),
+        parentIndex: (_a = parentNode == null ? void 0 : parentNode.index) != null ? _a : null
+      });
+      break;
     }
-  });
+    case 4 /* EXPRESSION */:
+      if (node.children && node.children.length > 0) {
+        const firstChild = node.children[0];
+        if (w(firstChild) && t8.isNode(firstChild) && t8.isExpression(firstChild)) {
+          children.push({
+            index: node.index,
+            node: t8.arrowFunctionExpression([], firstChild),
+            before: findBeforeIndex(node, parentNode),
+            parentIndex: (_b = parentNode == null ? void 0 : parentNode.index) != null ? _b : null
+          });
+        } else if (w(firstChild) && t8.isNode(firstChild) && t8.isJSXElement(firstChild)) {
+          children.push({
+            index: node.index,
+            node: createComponentExpression(node, { children: [firstChild] }),
+            before: findBeforeIndex(node, parentNode),
+            parentIndex: (_c = parentNode == null ? void 0 : parentNode.index) != null ? _c : null
+          });
+        }
+      }
+      break;
+    // Text nodes don't need dynamic processing (already handled in template stage)
+    case 2 /* TEXT */:
+      break;
+    default:
+      if (node.props && Object.keys(node.props).length > 0) {
+        const currentProps = {};
+        for (const [attrName, attrValue] of Object.entries(node.props)) {
+          const isReactive = t8.isNode(attrValue) && isDynamicExpression(attrValue) && !q(attrName, `${UPDATE_PREFIX}:`) && !q(attrName, EVENT_ATTR_NAME);
+          if (q(attrName, `${UPDATE_PREFIX}:`)) {
+            const name = attrName.split(":")[1];
+            const setFunction = getSetFunctionForAttribute();
+            addImport(importMap[setFunction.name]);
+            operations.push({
+              nodeIndex: node == null ? void 0 : node.index,
+              attrName: name,
+              attrValue: attrValue[0],
+              setFunction,
+              propKey: generatePropKey()
+            });
+          }
+          if (isReactive && t8.isExpression(attrValue)) {
+            const setFunction = getSetFunctionForAttribute(attrName);
+            addImport(importMap[setFunction.name]);
+            operations.push({
+              nodeIndex: node == null ? void 0 : node.index,
+              attrName,
+              attrValue,
+              setFunction,
+              propKey: generatePropKey(attrName)
+            });
+          } else {
+            currentProps[attrName] = attrValue;
+          }
+        }
+        if (Object.keys(currentProps).length > 0) {
+          props.push({
+            props: currentProps,
+            parentIndex: (_d = node == null ? void 0 : node.index) != null ? _d : null
+          });
+        }
+      }
+      break;
+  }
 }
 
-// src/signal/import.ts
-import { types as t5 } from "@babel/core";
-function replaceImportDeclaration(path) {
-  path.node.specifiers.forEach((specifier) => {
-    const variableName = specifier.local.name;
-    if (startsWith(variableName, "$") && !isVariableUsedAsObject(path, variableName)) {
-      path.scope.rename(variableName, `${variableName}.value`);
-      specifier.local.name = variableName;
-    }
+// src/jsx/ssg.ts
+import { types as t9 } from "@babel/core";
+function transformJSXToSSG(path, treeNode) {
+  const { state } = getContext();
+  const result = transformTemplate(treeNode);
+  const { templates, dynamics } = result;
+  if (treeNode.type === 1 /* COMPONENT */ || treeNode.type === 3 /* FRAGMENT */) {
+    const componentProps = __spreadProps(__spreadValues({}, treeNode.props), { children: treeNode.children });
+    addImport(importMap.createComponent);
+    return t9.callExpression(state.imports.createComponent, [
+      t9.identifier(treeNode.tag),
+      createPropsObjectExpression(componentProps, transformJSXToSSG)
+    ]);
+  }
+  const args = [];
+  if (templates && templates.length > 0) {
+    addImport(importMap.template);
+    const tmplId = path.scope.generateUidIdentifier("_tmpl$");
+    const templateNode = t9.arrayExpression(templates.map((str) => t9.stringLiteral(str)));
+    state.declarations.push(t9.variableDeclarator(tmplId, templateNode));
+    args.push(tmplId);
+  }
+  args.push(t9.callExpression(state.imports.getHydrationKey, []));
+  addImport(importMap.render);
+  addImport(importMap.getHydrationKey);
+  const textDynamics = dynamics.filter((d2) => d2.type === "text");
+  const attrDynamics = dynamics.filter((d2) => d2.type === "attr");
+  attrDynamics.forEach((dynamic) => {
+    args.push(dynamic.node);
   });
+  textDynamics.forEach((dynamic) => {
+    args.push(dynamic.node);
+  });
+  return t9.callExpression(state.imports.render, args);
 }
-function isVariableUsedAsObject(path, variableName) {
-  var _a;
-  const binding = path.scope.getBinding(variableName);
-  return ((_a = binding == null ? void 0 : binding.referencePaths) == null ? void 0 : _a.some((referencePath) => {
-    if (t5.isMemberExpression(referencePath.parent)) {
-      const { object, property } = referencePath.parent;
-      if (t5.isIdentifier(object, { name: variableName })) {
-        referencePath.parentPath.replaceWith(
-          t5.memberExpression(t5.memberExpression(object, t5.identifier("value")), property)
-        );
-        return true;
+function transformTemplate(treeNode) {
+  const result = {
+    templates: [],
+    dynamics: []
+  };
+  walkTreeNode(treeNode, result);
+  return result;
+}
+function walkTreeNode(treeNode, result) {
+  if (!treeNode) {
+    return;
+  }
+  switch (treeNode.type) {
+    case 1 /* COMPONENT */:
+    case 3 /* FRAGMENT */:
+      handleComponent(treeNode, result);
+      break;
+    case 4 /* EXPRESSION */:
+      handleExpression(treeNode, result);
+      break;
+    case 2 /* TEXT */:
+      handleText(treeNode, result);
+      break;
+    case 0 /* NORMAL */:
+    case 5 /* SVG */:
+      handleElement(treeNode, result);
+      break;
+    case 6 /* COMMENT */:
+      addTemplate(result, "<!>", true);
+      break;
+    default:
+      if (treeNode.children && treeNode.children.length > 0) {
+        processChildren2(treeNode.children, result);
       }
-    }
-    return false;
-  })) || false;
+      break;
+  }
 }
-
-// src/signal/props.ts
-import { types as t6 } from "@babel/core";
-function replaceProps(path) {
-  var _a;
-  const state = path.state;
-  const firstParam = path.node.params[0];
-  if (!firstParam || !t6.isObjectPattern(firstParam)) return;
-  const returnStatement = path.get("body").get("body").find((statement) => statement.isReturnStatement());
-  if (!returnStatement || !t6.isJSXElement((_a = returnStatement.node) == null ? void 0 : _a.argument)) return;
-  const replaceProperties = (properties2, parentPath) => {
-    properties2.forEach((property) => {
-      if (t6.isObjectProperty(property) && t6.isIdentifier(property.key)) {
-        const keyName = property.key.name;
-        if (t6.isIdentifier(property.value)) {
-          path.scope.rename(property.value.name, `${parentPath}${keyName}`);
-        } else if (t6.isObjectPattern(property.value)) {
-          replaceProperties(property.value.properties, `${parentPath}${keyName}.`);
+var addTemplate = (result, content, join = false) => {
+  if (result.templates.length === 0) {
+    result.templates.push(content);
+  } else {
+    if (join) {
+      result.templates[result.templates.length - 1] += content;
+    } else {
+      result.templates.push(content);
+    }
+  }
+};
+var handleComponent = (node, result) => {
+  result.templates.push("");
+  const { state } = getContext();
+  const componentProps = __spreadValues({}, node.props);
+  if (node.children.length) {
+    componentProps.children = node.children;
+  }
+  addImport(importMap.createComponent);
+  const componentExpr = t9.callExpression(state.imports.createComponent, [
+    t9.identifier(node.tag),
+    createPropsObjectExpression(componentProps, transformJSXToSSG)
+  ]);
+  result.dynamics.push({
+    type: "text",
+    node: componentExpr
+  });
+};
+var handleExpression = (node, result) => {
+  if (!node.children || node.children.length === 0) {
+    return;
+  }
+  const firstChild = node.children[0];
+  result.templates.push("");
+  if (j(firstChild)) {
+    const { state } = getContext();
+    addImport(importMap.escapeHTML);
+    result.dynamics.push({
+      type: "text",
+      node: t9.callExpression(state.imports.escapeHTML, [t9.valueToNode(firstChild)])
+    });
+  } else if (w(firstChild)) {
+    const exprNode = firstChild;
+    if (t9.isCallExpression(exprNode) && t9.isMemberExpression(exprNode.callee) && exprNode.arguments.length > 0) {
+      const mapCallback = exprNode.arguments[0];
+      if ((t9.isArrowFunctionExpression(mapCallback) || t9.isFunctionExpression(mapCallback)) && mapCallback.body) {
+        let jsxElement = void 0;
+        if (t9.isJSXElement(mapCallback.body)) {
+          jsxElement = mapCallback.body;
+        } else if (t9.isBlockStatement(mapCallback.body)) {
+          const returnStmt = mapCallback.body.body.find((stmt) => t9.isReturnStatement(stmt));
+          if (returnStmt && t9.isReturnStatement(returnStmt) && returnStmt.argument && t9.isJSXElement(returnStmt.argument)) {
+            jsxElement = returnStmt.argument;
+          }
+        } else if (t9.isParenthesizedExpression(mapCallback.body) && t9.isJSXElement(mapCallback.body.expression)) {
+          jsxElement = mapCallback.body.expression;
+        }
+        if (jsxElement) {
+          const { state } = getContext();
+          const tagName = jsxElement.openingElement.name.type === "JSXIdentifier" ? jsxElement.openingElement.name.name : "";
+          const props = {};
+          jsxElement.openingElement.attributes.forEach((attr) => {
+            if (t9.isJSXAttribute(attr)) {
+              const name = attr.name.name;
+              if (t9.isJSXExpressionContainer(attr.value)) {
+                props[name] = attr.value.expression;
+              } else if (t9.isStringLiteral(attr.value)) {
+                props[name] = attr.value.value;
+              } else if (attr.value === null) {
+                props[name] = true;
+              }
+            } else if (t9.isJSXSpreadAttribute(attr)) {
+              props._$spread$ = attr.argument;
+            }
+          });
+          if (tagName === FRAGMENT_NAME) {
+            addImport(importMap.Fragment);
+            const newCallback = t9.arrowFunctionExpression(
+              mapCallback.params,
+              t9.callExpression(state.imports.Fragment, [
+                createPropsObjectExpression(props, transformJSXToSSG)
+              ])
+            );
+            exprNode.arguments[0] = newCallback;
+          } else if (tagName && tagName[0] === tagName[0].toUpperCase()) {
+            addImport(importMap.createComponent);
+            const newCallback = t9.arrowFunctionExpression(
+              mapCallback.params,
+              t9.callExpression(state.imports.createComponent, [
+                t9.identifier(tagName),
+                createPropsObjectExpression(props, transformJSXToSSG)
+              ])
+            );
+            exprNode.arguments[0] = newCallback;
+          }
         }
       }
+    }
+    result.dynamics.push({
+      type: "text",
+      node: exprNode
     });
-  };
-  const properties = firstParam.properties;
-  const notRestProperties = properties.filter((property) => !t6.isRestElement(property));
-  replaceProperties(notRestProperties, "__props.");
-  const notRestNames = notRestProperties.map((property) => property.key.name);
-  if (notRestNames.some((name) => startsWith(name, "$"))) {
-    console.warn("props name can not start with $");
-    return;
-  }
-  handleRestElement(path, state, properties, notRestNames);
-}
-function handleRestElement(path, state, properties, notRestNames) {
-  const restElement = properties.find((property) => t6.isRestElement(property));
-  path.node.params[0] = t6.identifier("__props");
-  if (restElement) {
-    const restName = restElement.argument.name;
-    if (notRestNames.length === 0) {
-      path.node.params[0] = t6.identifier(restName);
-    } else {
-      const restVariableDeclaration = createRestVariableDeclaration(state, restName, notRestNames);
-      imports.add("useReactive");
-      path.node.body.body.unshift(restVariableDeclaration);
+  }
+};
+var handleText = (node, result) => {
+  if (node.children && node.children.length > 0) {
+    addTemplate(result, node.children.join(""), true);
+  }
+};
+var handleElement = (node, result) => {
+  let openTag = `<${node.tag} data-idx="${node.index}"`;
+  const { staticAttrs, dynamicAttrs } = processAttributes(node.props || {});
+  openTag += staticAttrs;
+  addTemplate(result, openTag, true);
+  addTemplate(result, node.selfClosing ? "/>" : ">", dynamicAttrs.length === 0);
+  if (!node.selfClosing && node.children && node.children.length > 0) {
+    processChildren2(node.children, result);
+  }
+  if (!node.selfClosing) {
+    addTemplate(result, `</${node.tag}>`, true);
+  }
+  processDynamicAttributes(dynamicAttrs, result);
+};
+var processChildren2 = (children, result) => {
+  children.forEach((child) => {
+    if (isTreeNode(child)) {
+      walkTreeNode(child, result);
+    } else if (m(child)) {
+      addTemplate(result, child, true);
+    }
+  });
+};
+function processAttributes(props) {
+  let staticAttrs = "";
+  const dynamicAttrs = [];
+  for (const [prop, value] of Object.entries(props)) {
+    if (prop.startsWith(EVENT_ATTR_NAME) || prop.startsWith(UPDATE_PREFIX)) {
+      continue;
+    }
+    if (j(value)) {
+      if (value === true) {
+        staticAttrs += ` ${prop}`;
+      } else if (A(value)) {
+        staticAttrs += ` ${prop}="${value.toString()}"`;
+      } else if (value !== false) {
+        staticAttrs += ` ${prop}="${value}"`;
+      }
+    } else if (t9.isExpression(value)) {
+      dynamicAttrs.push({ name: prop, value });
     }
   }
+  return { staticAttrs, dynamicAttrs };
 }
-function createRestVariableDeclaration(state, restName, notRestNames) {
-  return t6.variableDeclaration("const", [
-    t6.variableDeclarator(
-      t6.identifier(restName),
-      t6.callExpression(state.useReactive, [
-        t6.identifier("__props"),
-        t6.arrayExpression(notRestNames.map((name) => t6.stringLiteral(name)))
-      ])
-    )
-  ]);
+var processDynamicAttributes = (dynamicAttrs, result) => {
+  dynamicAttrs.forEach((attr) => {
+    const { state } = getContext();
+    addImport(importMap.patchAttr);
+    addImport(importMap.escapeHTML);
+    result.dynamics.push({
+      type: "attr",
+      node: t9.callExpression(state.imports.patchAttr, [
+        t9.stringLiteral(attr.name),
+        t9.callExpression(state.imports.escapeHTML, [attr.value]),
+        t9.booleanLiteral(false)
+      ]),
+      attrName: attr.name
+    });
+  });
+};
+
+// src/jsx/index.ts
+var transformStrategies = {
+  ["client" /* CLIENT */]: transformJSXToClient,
+  ["ssr" /* SSR */]: transformJSXToClient,
+  ["ssg" /* SSG */]: transformJSXToSSG
+};
+var getRenderingStrategy = (mode) => {
+  const strategy = transformStrategies[mode];
+  if (!strategy) {
+    throw new Error(`Unsupported render mode: ${mode}`);
+  }
+  return strategy;
+};
+function transformJSX(path) {
+  var _a, _b;
+  try {
+    const mode = ((_b = (_a = path.state) == null ? void 0 : _a.opts) == null ? void 0 : _b.mode) || "client" /* CLIENT */;
+    const strategy = getRenderingStrategy(mode);
+    const tree = createTree(path);
+    setContext({ state: path.state, path, operationIndex: 0 });
+    const result = strategy(path, tree);
+    path.replaceWith(result);
+    resetContext();
+  } catch (error_) {
+    console.warn("JSX transformation failed in test:", { error_ });
+    resetContext();
+    throw error_;
+  }
 }
 
 // src/index.ts
-function src_default() {
+function index_default() {
   return {
     name: "babel-plugin-essor",
-    manipulateOptions({ filename }, parserOpts) {
-      if (filename.endsWith(".ts") || filename.endsWith(".tsx")) {
-        parserOpts.plugins.push("typescript");
-      }
+    manipulateOptions(_2, parserOpts) {
       parserOpts.plugins.push("jsx");
     },
     visitor: {
       Program: transformProgram,
-      FunctionDeclaration: replaceProps,
-      ArrowFunctionExpression: replaceProps,
+      // props
+      FunctionDeclaration: transformProps,
+      ArrowFunctionExpression: transformProps,
+      // Symbol
       VariableDeclarator: replaceSymbol,
-      ImportDeclaration: replaceImportDeclaration,
+      // let $x = 0 → let $x = signal(0)
       Identifier: symbolIdentifier,
+      // $x → $x.value
+      AssignmentExpression: symbolAssignment,
+      // $x = 1 → $x.value = 1
+      UpdateExpression: symbolUpdate,
+      // $x++ → $x.value++
       ObjectPattern: symbolObjectPattern,
+      // { $x } → handle nested patterns
       ArrayPattern: symbolArrayPattern,
+      // [$x] → handle nested patterns
+      // JSX
       JSXElement: transformJSX,
       JSXFragment: transformJSX
     }
   };
 }
 export {
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map