babel-plugin-essor 0.0.17-beta.7 → 0.0.17

package/dist/index.cjs

@@ -148,6 +148,7 @@ function createCompileContext(options, programPath) {
     delegateEvents: /* @__PURE__ */ new Set(),
     imports: /* @__PURE__ */ new Set(),
     importIdentifiers: createImportIdentifiers(programPath, options.mode),
+    signalBindings: /* @__PURE__ */ new WeakSet(),
     declarations: /* @__PURE__ */ new Map(),
     hmrComponents: /* @__PURE__ */ new Set(),
     hmrSignatures: /* @__PURE__ */ new Map(),
@@ -261,35 +262,46 @@ function createImport(path) {
 }
 
 // ../shared/dist/shared.js
-var p = Array.isArray;
+var g = (e) => e !== null && typeof e == "object";
+var m = Array.isArray;
 function i(e) {
   return typeof e == "string";
 }
-function g(e) {
+function d(e) {
   return typeof e == "number";
 }
-function E(e) {
+function T(e) {
   return e === null;
 }
-var P = (e) => u.call(e) === "[object Object]";
-function $(e) {
+var F = (e) => {
+  if (u.call(e) !== "[object Object]") return false;
+  let t13 = Object.getPrototypeOf(e);
+  return t13 === null || t13 === Object.prototype;
+};
+function A(e) {
   return typeof e == "boolean";
 }
-function G(e) {
+function U(e) {
   return typeof e == "bigint";
 }
 var u = Object.prototype.toString;
+var f = (e) => {
+  let t13 = /* @__PURE__ */ Object.create(null);
+  return ((n) => t13[n] || (t13[n] = e(n)));
+};
+var ne = /\B([A-Z])/g;
+var b = f((e) => e.replaceAll(ne, "-$1").toLowerCase());
 function x(e, t13) {
   return i(e) ? e.indexOf(t13) === 0 : false;
 }
-function re(e, ...t13) {
+function se(e, ...t13) {
   console.warn(`[Essor warn]: ${e}`, ...t13);
 }
-var ae = /["&'<>]/;
-function le(e) {
-  let t13 = `${e}`, n = ae.exec(t13);
+var ce = /["&'<>]/;
+function pe(e) {
+  let t13 = `${e}`, n = ce.exec(t13);
   if (!n) return t13;
-  let o = "", r, s, m = 0;
+  let o = "", r, s, l = 0;
   for (s = n.index; s < t13.length; s++) {
     switch (t13.charCodeAt(s)) {
       case 34:
@@ -310,35 +322,71 @@ function le(e) {
       default:
         continue;
     }
-    m !== s && (o += t13.slice(m, s)), m = s + 1, o += r;
+    l !== s && (o += t13.slice(l, s)), l = s + 1, o += r;
   }
-  return m !== s ? o + t13.slice(m, s) : o;
+  return l !== s ? o + t13.slice(l, s) : o;
 }
 function a(e) {
   let t13 = /* @__PURE__ */ Object.create(null);
   for (let n of e.split(",")) t13[n] = 1;
   return (n) => n in t13;
 }
-var w = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";
-a(w);
-a(`${w},async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
-var xe = { acceptCharset: "accept-charset", className: "class", htmlFor: "for", httpEquiv: "http-equiv" };
+var N = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";
+a(N);
+a(`${N},async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
+var ke = { acceptCharset: "accept-charset", className: "class", htmlFor: "for", httpEquiv: "http-equiv" };
 a("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");
 a("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 we = "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 Te = "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 Se = "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 Ae = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
-a(we);
-var Ne = a(Te);
+var Se = "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 ve = "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 Ae = "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 Ee = "beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,keyup,mousedown,mousemove,mouseout,mouseover,mouseup,pointerdown,pointermove,pointerout,pointerover,pointerup,touchend,touchmove,touchstart";
+var Ne = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
 a(Se);
-var Ce = a(Ae);
-var Oe = a(ve);
-var Re = "data-hk-idx";
-var ze = "_$spread$";
-
-// src/ast-utils.ts
+var Ce = a(ve);
+a(Ae);
+var Re = a(Ne);
+var ze = a(Ee);
+var je = "data-hk-idx";
+var He = "_$spread$";
+var $e = /;(?![^(]*\))/g;
+var Ue = /:([\s\S]+)/;
+var Ge = /\/\*[\s\S]*?\*\//g;
+function k(e) {
+  let t13 = {};
+  return e.replaceAll(Ge, "").split($e).forEach((n) => {
+    if (n) {
+      let o = n.split(Ue);
+      o.length > 1 && (t13[o[0].trim()] = o[1].trim());
+    }
+  }), t13;
+}
+function w(e) {
+  if (m(e)) {
+    let t13 = {};
+    for (let n of e) {
+      let o = i(n) ? k(n) : w(n);
+      if (o) for (let r in o) t13[r] = o[r];
+    }
+    return t13;
+  }
+  if (i(e)) return e;
+  if (g(e)) {
+    let t13 = {};
+    for (let n in e) {
+      let o = e[n];
+      if (i(o) || d(o)) {
+        t13[n] = o;
+        continue;
+      }
+      let r = w(o);
+      if (!r) continue;
+      let s = i(r) ? k(r) : r;
+      for (let l in s) t13[l] = s[l];
+    }
+    return t13;
+  }
+}
 function isAnyFunctionPath(path) {
   return path.isFunctionDeclaration() || path.isFunctionExpression() || path.isArrowFunctionExpression();
 }
@@ -400,7 +448,7 @@ function serializeStaticAttrs(attrs) {
   const merged = [];
   let classValue;
   for (const attr of attrs) {
-    const name = (_a = xe[attr.name]) != null ? _a : attr.name;
+    const name = (_a = ke[attr.name]) != null ? _a : attr.name;
     if (name === "class") {
       classValue = classValue ? `${classValue} ${attr.value}` : String(attr.value);
     } else {
@@ -410,7 +458,7 @@ function serializeStaticAttrs(attrs) {
   if (classValue) merged.unshift({ name: "class", value: classValue });
   return merged.map((attr) => {
     if (attr.value === true) return ` ${attr.name}`;
-    return ` ${attr.name}="${le(attr.value)}"`;
+    return ` ${attr.name}="${pe(attr.value)}"`;
   }).join("");
 }
 function resolveComponentCallee(tag, fallback) {
@@ -429,16 +477,16 @@ function isSerializableStaticValue(value) {
   const stack = [value];
   while (stack.length > 0) {
     const current = stack.pop();
-    if (E(current) || $(current) || g(current) || i(current) || G(current)) {
+    if (T(current) || A(current) || d(current) || i(current) || U(current)) {
       continue;
     }
-    if (p(current)) {
+    if (m(current)) {
       for (const item of current) {
         stack.push(item);
       }
       continue;
     }
-    if (!P(current)) {
+    if (!F(current)) {
       return false;
     }
     const values = Object.values(current);
@@ -449,21 +497,29 @@ function isSerializableStaticValue(value) {
   return true;
 }
 function styleToString(style) {
-  return Object.entries(style).map(([key, value]) => {
-    const kebabKey = key.replaceAll(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-    return `${kebabKey}:${value}`;
-  }).join(";");
+  const normalized = w(style);
+  if (!normalized) return void 0;
+  if (i(normalized)) return normalized;
+  const parts = [];
+  for (const key in normalized) {
+    const value = normalized[key];
+    if (i(value) || d(value)) {
+      const prop = x(key, "--") ? key : b(key);
+      parts.push(`${prop}:${value}`);
+    }
+  }
+  return parts.join(";");
 }
 function shouldResolveStaticCollection(attrName) {
   return attrName !== "ref" && !x(attrName, "bind:") && !normalizeEventName(attrName);
 }
 function normalizeTemplateAttrName(attrName) {
   var _a;
-  return (_a = xe[attrName]) != null ? _a : attrName;
+  return (_a = ke[attrName]) != null ? _a : attrName;
 }
 function createStaticAttr(attrName, value, order) {
   return {
-    attr: { name: attrName, value },
+    attr: { name: attrName, value, order },
     order,
     templateName: normalizeTemplateAttrName(attrName)
   };
@@ -474,7 +530,8 @@ function createDynamicAttr(attrPath, attrName, value, effectKind, order) {
       path: attrPath,
       name: attrName,
       value,
-      effectKind
+      effectKind,
+      order
     },
     order,
     templateName: normalizeTemplateAttrName(attrName)
@@ -489,13 +546,15 @@ function resolveStaticExpressionValue(attrName, expressionPath) {
     return void 0;
   }
   let value = evaluated.value;
-  if (attrName === "style" && P(value)) {
-    value = styleToString(value);
+  if (attrName === "style") {
+    const style = styleToString(value);
+    if (style === void 0) return void 0;
+    value = style;
   }
-  if (i(value) || $(value)) {
+  if (i(value) || A(value)) {
     return value;
   }
-  if (g(value)) {
+  if (d(value)) {
     return String(value);
   }
   return void 0;
@@ -548,7 +607,8 @@ function parseAttributes(path) {
     if (attrPath.isJSXSpreadAttribute()) {
       spreadAttrs.push({
         value: attrPath.node.argument,
-        effectKind: classifyAttrValue(attrPath.node.argument).kind
+        effectKind: classifyAttrValue(attrPath.node.argument).kind,
+        order
       });
       continue;
     }
@@ -636,7 +696,7 @@ function unwrapTopLevelDeclaration(statementPath) {
   }
   if (statementPath.isExportNamedDeclaration() || statementPath.isExportDefaultDeclaration()) {
     const declarationPath = statementPath.get("declaration");
-    if (declarationPath && !Array.isArray(declarationPath) && (declarationPath.isFunctionDeclaration() || declarationPath.isVariableDeclaration())) {
+    if (declarationPath && !m(declarationPath) && (declarationPath.isFunctionDeclaration() || declarationPath.isVariableDeclaration())) {
       return declarationPath;
     }
   }
@@ -1045,7 +1105,7 @@ function patternHasSignalBinding(node) {
   if (core.types.isIdentifier(node)) return isSignal(node.name);
   if (core.types.isObjectPattern(node)) {
     return node.properties.some(
-      (p2) => core.types.isRestElement(p2) ? patternHasSignalBinding(p2.argument) : patternHasSignalBinding(p2.value)
+      (p) => core.types.isRestElement(p) ? patternHasSignalBinding(p.argument) : patternHasSignalBinding(p.value)
     );
   }
   if (core.types.isArrayPattern(node)) {
@@ -1193,9 +1253,9 @@ function isAlreadyValueAccess(path) {
   if (!core.types.isParenthesizedExpression(parent) && !core.types.isTSAsExpression(parent) && !core.types.isTSNonNullExpression(parent)) {
     return false;
   }
-  const ancestor = path.findParent((p2) => {
-    if (!isMemberLike(p2.node)) return false;
-    return isMemberAccessingProperty(p2.node, "value");
+  const ancestor = path.findParent((p) => {
+    if (!isMemberLike(p.node)) return false;
+    return isMemberAccessingProperty(p.node, "value");
   });
   return !!ancestor;
 }
@@ -1290,7 +1350,7 @@ function collectObjectPattern(pattern, base, leaves, rests) {
       continue;
     }
     const { keyExpr, computed, excludeKey } = resolveKey(prop);
-    if (excludeKey !== null) excludeKeys.push(excludeKey);
+    if (!T(excludeKey)) excludeKeys.push(excludeKey);
     const access = core.types.memberExpression(clone2(base), keyExpr, computed);
     collectTarget(prop.value, access, leaves, rests);
   }
@@ -1322,7 +1382,7 @@ function ensureBlockBody(path) {
   return block;
 }
 function isInsidePattern(ref, pattern) {
-  return !!ref.findParent((p2) => p2.node === pattern);
+  return !!ref.findParent((p) => p.node === pattern);
 }
 function accessorFor(pattern, base, name) {
   var _a;
@@ -1342,7 +1402,7 @@ function transformFnProps(path) {
   collectObjectPattern(firstParam, base, initLeaves, initRests);
   const conflicts = [...initLeaves, ...initRests].map((b2) => b2.name).filter((name) => x(name, signalPrefix));
   if (conflicts.length > 0) {
-    re("transformProps", "Property names cannot start with signal prefix", conflicts);
+    se("transformProps", "Property names cannot start with signal prefix", conflicts);
   }
   if (initLeaves.length === 0 && initRests.length === 1 && firstParam.properties.length === 1 && core.types.isRestElement(firstParam.properties[0])) {
     path.node.params[0] = core.types.identifier(initRests[0].name);
@@ -1450,6 +1510,18 @@ function hasDynamicBoundary(children, index) {
   const isDynamic = (n) => (n == null ? void 0 : n.type) === 3 /* EXPRESSION */ || (n == null ? void 0 : n.type) === 1 /* COMPONENT */ || (n == null ? void 0 : n.type) === 4 /* FOR */;
   return isText(prev) || isText(next) || isDynamic(prev) || isDynamic(next);
 }
+function getDynamicAnchorKind(children, index, mode) {
+  if (!hasDynamicBoundary(children, index)) {
+    const next = children[index + 1];
+    if ((mode === "hydrate" || mode === "server") && (next == null ? void 0 : next.type) === 0 /* ELEMENT */) {
+      return "element";
+    }
+    if (!next) {
+      return "tail";
+    }
+  }
+  return "comment";
+}
 function buildIR(path, ctx) {
   if (path.isJSXFragment()) {
     useImport("Fragment");
@@ -1466,14 +1538,14 @@ function buildElementIR(tag, path, ctx) {
   const node = {
     type: 0 /* ELEMENT */,
     tag,
-    isSVG: Ne(tag),
+    isSVG: Ce(tag),
     staticAttrs,
     dynamicAttrs: [],
     events: [],
-    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind })),
+    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind, order: s.order })),
     binds: [],
     children: [],
-    selfClosing: Ce(tag),
+    selfClosing: Re(tag),
     loc: path.node.loc
   };
   for (const attr of dynamicAttrs) {
@@ -1493,7 +1565,8 @@ function buildComponentIR(tag, path, ctx) {
     props.push({
       name: attr.name,
       value: i(attr.value) ? core.types.stringLiteral(attr.value) : core.types.booleanLiteral(attr.value),
-      kind: "static"
+      kind: "static",
+      order: attr.order
     });
   }
   for (const attr of dynamicAttrs) {
@@ -1502,7 +1575,8 @@ function buildComponentIR(tag, path, ctx) {
       props.push({
         name: attr.name,
         value: attr.value,
-        kind: attr.effectKind
+        kind: attr.effectKind,
+        order: attr.order
       });
     } else if (x(attr.name, "bind:")) {
       const binding = attr.name.slice("bind:".length);
@@ -1513,18 +1587,21 @@ function buildComponentIR(tag, path, ctx) {
       props.push({
         name: binding,
         value: core.types.cloneNode(valueExpr),
-        kind: attr.effectKind
+        kind: attr.effectKind,
+        order: attr.order
       });
       props.push({
         name: `update:${binding}`,
         value: createBindingSetter(valueExpr),
-        kind: "static"
+        kind: "static",
+        order: attr.order
       });
     } else {
       props.push({
         name: attr.name,
         value: attr.value,
-        kind: attr.effectKind
+        kind: attr.effectKind,
+        order: attr.order
       });
     }
   }
@@ -1532,7 +1609,7 @@ function buildComponentIR(tag, path, ctx) {
     type: 1 /* COMPONENT */,
     tag,
     props,
-    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind })),
+    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind, order: s.order })),
     children: buildChildren(path, ctx),
     loc: path.node.loc
   };
@@ -1541,7 +1618,7 @@ function applyDynamicAttr(node, attr, ctx) {
   const { name, value, effectKind, path } = attr;
   const eventName = normalizeEventName(name);
   if (eventName) {
-    const delegated = !!(ctx.options.delegateEvents && Oe(eventName));
+    const delegated = !!(ctx.options.delegateEvents && ze(eventName));
     node.events.push({
       name: eventName,
       handler: value,
@@ -1629,7 +1706,7 @@ function isPropsChildrenExpression(expression) {
   const binding = expression.scope.getBinding(node.object.name);
   const bindingPath = binding == null ? void 0 : binding.path;
   if (!(bindingPath == null ? void 0 : bindingPath.isIdentifier())) return false;
-  const owner = bindingPath.findParent((p2) => isAnyFunctionPath(p2));
+  const owner = bindingPath.findParent((p) => isAnyFunctionPath(p));
   if (!owner) return false;
   const fn = owner.node;
   const componentName = getEnclosingFunctionName(owner);
@@ -1692,6 +1769,7 @@ function buildForIR(expression, ctx) {
   };
 }
 function extractKeyExpression(path) {
+  if (path.isJSXFragment()) return extractFragmentKeyExpression(path);
   if (!path.isJSXElement()) return null;
   for (const attrPath of path.get("openingElement.attributes")) {
     if (!attrPath.isJSXAttribute()) continue;
@@ -1706,7 +1784,7 @@ function extractKeyExpression(path) {
       return core.types.stringLiteral(value.value);
     }
     const valuePath = attrPath.get("value");
-    if (!Array.isArray(valuePath) && valuePath.isJSXExpressionContainer()) {
+    if (!m(valuePath) && valuePath.isJSXExpressionContainer()) {
       const expressionPath = valuePath.get("expression");
       attrPath.remove();
       if (expressionPath.isJSXEmptyExpression()) return null;
@@ -1717,9 +1795,16 @@ function extractKeyExpression(path) {
   }
   return null;
 }
+function extractFragmentKeyExpression(path) {
+  const children = path.get("children").filter(isValidChild);
+  if (children.length !== 1) return null;
+  const child = children[0];
+  if (!child.isJSXElement() && !child.isJSXFragment()) return null;
+  return extractKeyExpression(child);
+}
 function getForCallbackBody(callback) {
   const bodyPath = callback.get("body");
-  if (Array.isArray(bodyPath)) return null;
+  if (m(bodyPath)) return null;
   if (bodyPath.isJSXElement() || bodyPath.isJSXFragment()) {
     return {
       path: bodyPath,
@@ -1736,7 +1821,7 @@ function getForCallbackBody(callback) {
       continue;
     }
     const argument = statement.get("argument");
-    if (Array.isArray(argument) || !argument.node) {
+    if (m(argument) || !argument.node) {
       prelude.push(statement.node);
       continue;
     }
@@ -1812,16 +1897,55 @@ function createPropNode(name, value, kind, options) {
 function composePropsExpression(props, spreads, options) {
   if (spreads.length === 0) {
     if (props.length === 0) return core.types.objectExpression([]);
-    return core.types.objectExpression(props.map((p2) => createPropNode(p2.name, p2.value, p2.kind, options)));
+    return core.types.objectExpression(props.map((p) => createPropNode(p.name, p.value, p.kind, options)));
+  }
+  if (props.some((prop) => prop.order == null) || spreads.some((spread) => spread.order == null)) {
+    return composeUnorderedPropsExpression(props, spreads, options);
+  }
+  const ordered = [
+    ...props.map((prop, sequence) => ({
+      type: "prop",
+      order: prop.order,
+      sequence,
+      prop
+    })),
+    ...spreads.map((spread, sequence) => ({
+      type: "spread",
+      order: spread.order,
+      sequence,
+      spread
+    }))
+  ].sort((a2, b2) => a2.order - b2.order || a2.sequence - b2.sequence);
+  const parts = [];
+  let propNodes = [];
+  const flushProps = () => {
+    if (propNodes.length === 0) return;
+    parts.push(core.types.objectExpression(propNodes));
+    propNodes = [];
+  };
+  for (const entry of ordered) {
+    if (entry.type === "prop") {
+      propNodes.push(createPropNode(entry.prop.name, entry.prop.value, entry.prop.kind, options));
+      continue;
+    }
+    flushProps();
+    parts.push(cloneValue(entry.spread.value, options.cloneValues));
   }
+  flushProps();
+  return composeAssignParts(parts);
+}
+function composeUnorderedPropsExpression(props, spreads, options) {
   const parts = [];
-  const propNodes = props.map((p2) => createPropNode(p2.name, p2.value, p2.kind, options));
+  const propNodes = props.map((p) => createPropNode(p.name, p.value, p.kind, options));
   if (propNodes.length > 0) {
     parts.push(core.types.objectExpression(propNodes));
   }
   for (const spread of spreads) {
     parts.push(cloneValue(spread.value, options.cloneValues));
   }
+  return composeAssignParts(parts);
+}
+function composeAssignParts(parts) {
   if (parts.length === 0) return core.types.objectExpression([]);
   if (parts.length === 1) return parts[0];
   return core.types.callExpression(core.types.memberExpression(core.types.identifier("Object"), core.types.identifier("assign")), [
@@ -2093,7 +2217,7 @@ function generateServerFor(node, ctx) {
   return buildForCall(node, bodyExpr);
 }
 function generateServerElement(node, ctx, withHydrationKey = true, staticIndex, options = {}) {
-  var _a, _b;
+  var _a;
   const dynamicAttrExprs = [...(_a = options.prependAttrExprs) != null ? _a : []];
   for (const attr of node.dynamicAttrs) {
     let expr;
@@ -2121,7 +2245,7 @@ function generateServerElement(node, ctx, withHydrationKey = true, staticIndex,
   }
   const templates = [];
   const expressions = [];
-  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: Re, value: String(staticIndex) }];
+  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: je, value: String(staticIndex) }];
   const attrs = serializeStaticAttrs(staticAttrs);
   const textareaValueBind = node.tag === "textarea" ? findBind(node, "value") : null;
   let currentStr = `<${node.tag}`;
@@ -2152,11 +2276,11 @@ function generateServerElement(node, ctx, withHydrationKey = true, staticIndex,
         if (child.type === 2 /* TEXT */) {
           currentStr += escapeServerTemplateText(child.value);
         } else if (child.type === 3 /* EXPRESSION */ || child.type === 1 /* COMPONENT */ || child.type === 4 /* FOR */) {
-          const marker = hasDynamicBoundary(node.children, i2);
+          const anchorKind = getDynamicAnchorKind(node.children, i2, "server");
           const slotIndex = markerIndex++;
           templates.push(currentStr);
-          currentStr = marker ? `<!--${slotIndex}-->` : "";
-          if (!marker && ((_b = node.children[i2 + 1]) == null ? void 0 : _b.type) === 0 /* ELEMENT */) {
+          currentStr = anchorKind === "comment" ? `<!--${slotIndex}-->` : "";
+          if (anchorKind === "element") {
             pendingAnchorIndex = slotIndex;
           }
           expressions.push(generateServerNode(child, ctx));
@@ -2179,7 +2303,7 @@ function generateServerElement(node, ctx, withHydrationKey = true, staticIndex,
             }
           }
           const staticHTML = buildStaticServerHTML(child, anchorIndex);
-          if (staticHTML !== null) {
+          if (!T(staticHTML)) {
             currentStr += staticHTML;
           } else {
             templates.push(currentStr);
@@ -2224,7 +2348,7 @@ function buildStaticServerHTML(node, staticIndex) {
   if (node.binds.length > 0 || node.dynamicAttrs.length > 0 || node.spreads.length > 0) {
     return null;
   }
-  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: Re, value: String(staticIndex) }];
+  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: je, value: String(staticIndex) }];
   const attrs = serializeStaticAttrs(staticAttrs);
   if (node.selfClosing) {
     return `<${node.tag}${attrs} />`;
@@ -2236,7 +2360,7 @@ function buildStaticServerHTML(node, staticIndex) {
     } else if (child.type === 0 /* ELEMENT */) {
       if (child.binds.length > 0) return null;
       const nested = buildStaticServerHTML(child);
-      if (nested === null) return null;
+      if (T(nested)) return null;
       html += nested;
     } else {
       return null;
@@ -2274,18 +2398,6 @@ function shouldCloseTag(element, isLastElement, hasClosingParent, options) {
 function closeTag(element, isLastElement, hasClosingParent, options) {
   return shouldCloseTag(element, isLastElement, hasClosingParent, options) ? `</${element.tag}>` : "";
 }
-function getDynamicAnchorKind(children, index, mode) {
-  if ((mode === "client" || mode === "hydrate") && !hasDynamicBoundary(children, index)) {
-    const next = children[index + 1];
-    if (mode === "hydrate" && (next == null ? void 0 : next.type) === 0 /* ELEMENT */) {
-      return "element";
-    }
-    if (!next) {
-      return "tail";
-    }
-  }
-  return "comment";
-}
 function findLastOmittableElementIndex(children, mode) {
   for (let i2 = children.length - 1; i2 >= 0; i2--) {
     const child = children[i2];
@@ -2310,7 +2422,7 @@ function buildTemplateAndFlatten(root, mode) {
     const myId = nextId++;
     const staticAttrs = mode === "hydrate" && forcedStaticIndex !== void 0 ? [
       ...element.staticAttrs,
-      { name: Re, value: String(forcedStaticIndex) }
+      { name: je, value: String(forcedStaticIndex) }
     ] : element.staticAttrs;
     const attrs = serializeStaticAttrs(staticAttrs);
     if (element.selfClosing) {
@@ -2349,7 +2461,7 @@ function buildTemplateAndFlatten(root, mode) {
       const child = element.children[i2];
       switch (child.type) {
         case 2 /* TEXT */:
-          template += mode === "hydrate" ? child.value : le(child.value);
+          template += mode === "hydrate" ? child.value : pe(child.value);
           nodes.push({
             id: nextId++,
             kind: "text",
@@ -2416,7 +2528,7 @@ function buildStaticTemplateString(node, mode) {
   function visit(current, isLastElement, hasClosingParent) {
     switch (current.type) {
       case 2 /* TEXT */:
-        return mode === "hydrate" ? current.value : le(current.value);
+        return mode === "hydrate" ? current.value : pe(current.value);
       case 0 /* ELEMENT */: {
         const attrs = serializeStaticAttrs(current.staticAttrs);
         if (current.selfClosing) return selfClosingTag(current, attrs);
@@ -2719,7 +2831,7 @@ function emitDynamicAttr(attr, target, body, state, pendingMemoPatches) {
 function emitSpread(spread, target, body, state, pendingMemoPatches) {
   emitPatchOrEffect(
     target,
-    ze,
+    He,
     spread.value,
     spread.kind,
     body,

package/dist/index.js

@@ -146,6 +146,7 @@ function createCompileContext(options, programPath) {
     delegateEvents: /* @__PURE__ */ new Set(),
     imports: /* @__PURE__ */ new Set(),
     importIdentifiers: createImportIdentifiers(programPath, options.mode),
+    signalBindings: /* @__PURE__ */ new WeakSet(),
     declarations: /* @__PURE__ */ new Map(),
     hmrComponents: /* @__PURE__ */ new Set(),
     hmrSignatures: /* @__PURE__ */ new Map(),
@@ -259,35 +260,46 @@ function createImport(path) {
 }
 
 // ../shared/dist/shared.js
-var p = Array.isArray;
+var g = (e) => e !== null && typeof e == "object";
+var m = Array.isArray;
 function i(e) {
   return typeof e == "string";
 }
-function g(e) {
+function d(e) {
   return typeof e == "number";
 }
-function E(e) {
+function T(e) {
   return e === null;
 }
-var P = (e) => u.call(e) === "[object Object]";
-function $(e) {
+var F = (e) => {
+  if (u.call(e) !== "[object Object]") return false;
+  let t13 = Object.getPrototypeOf(e);
+  return t13 === null || t13 === Object.prototype;
+};
+function A(e) {
   return typeof e == "boolean";
 }
-function G(e) {
+function U(e) {
   return typeof e == "bigint";
 }
 var u = Object.prototype.toString;
+var f = (e) => {
+  let t13 = /* @__PURE__ */ Object.create(null);
+  return ((n) => t13[n] || (t13[n] = e(n)));
+};
+var ne = /\B([A-Z])/g;
+var b = f((e) => e.replaceAll(ne, "-$1").toLowerCase());
 function x(e, t13) {
   return i(e) ? e.indexOf(t13) === 0 : false;
 }
-function re(e, ...t13) {
+function se(e, ...t13) {
   console.warn(`[Essor warn]: ${e}`, ...t13);
 }
-var ae = /["&'<>]/;
-function le(e) {
-  let t13 = `${e}`, n = ae.exec(t13);
+var ce = /["&'<>]/;
+function pe(e) {
+  let t13 = `${e}`, n = ce.exec(t13);
   if (!n) return t13;
-  let o = "", r, s, m = 0;
+  let o = "", r, s, l = 0;
   for (s = n.index; s < t13.length; s++) {
     switch (t13.charCodeAt(s)) {
       case 34:
@@ -308,35 +320,71 @@ function le(e) {
       default:
         continue;
     }
-    m !== s && (o += t13.slice(m, s)), m = s + 1, o += r;
+    l !== s && (o += t13.slice(l, s)), l = s + 1, o += r;
   }
-  return m !== s ? o + t13.slice(m, s) : o;
+  return l !== s ? o + t13.slice(l, s) : o;
 }
 function a(e) {
   let t13 = /* @__PURE__ */ Object.create(null);
   for (let n of e.split(",")) t13[n] = 1;
   return (n) => n in t13;
 }
-var w = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";
-a(w);
-a(`${w},async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
-var xe = { acceptCharset: "accept-charset", className: "class", htmlFor: "for", httpEquiv: "http-equiv" };
+var N = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly";
+a(N);
+a(`${N},async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
+var ke = { acceptCharset: "accept-charset", className: "class", htmlFor: "for", httpEquiv: "http-equiv" };
 a("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");
 a("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 we = "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 Te = "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 Se = "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 Ae = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
-a(we);
-var Ne = a(Te);
+var Se = "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 ve = "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 Ae = "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 Ee = "beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,keyup,mousedown,mousemove,mouseout,mouseover,mouseup,pointerdown,pointermove,pointerout,pointerover,pointerup,touchend,touchmove,touchstart";
+var Ne = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
 a(Se);
-var Ce = a(Ae);
-var Oe = a(ve);
-var Re = "data-hk-idx";
-var ze = "_$spread$";
-
-// src/ast-utils.ts
+var Ce = a(ve);
+a(Ae);
+var Re = a(Ne);
+var ze = a(Ee);
+var je = "data-hk-idx";
+var He = "_$spread$";
+var $e = /;(?![^(]*\))/g;
+var Ue = /:([\s\S]+)/;
+var Ge = /\/\*[\s\S]*?\*\//g;
+function k(e) {
+  let t13 = {};
+  return e.replaceAll(Ge, "").split($e).forEach((n) => {
+    if (n) {
+      let o = n.split(Ue);
+      o.length > 1 && (t13[o[0].trim()] = o[1].trim());
+    }
+  }), t13;
+}
+function w(e) {
+  if (m(e)) {
+    let t13 = {};
+    for (let n of e) {
+      let o = i(n) ? k(n) : w(n);
+      if (o) for (let r in o) t13[r] = o[r];
+    }
+    return t13;
+  }
+  if (i(e)) return e;
+  if (g(e)) {
+    let t13 = {};
+    for (let n in e) {
+      let o = e[n];
+      if (i(o) || d(o)) {
+        t13[n] = o;
+        continue;
+      }
+      let r = w(o);
+      if (!r) continue;
+      let s = i(r) ? k(r) : r;
+      for (let l in s) t13[l] = s[l];
+    }
+    return t13;
+  }
+}
 function isAnyFunctionPath(path) {
   return path.isFunctionDeclaration() || path.isFunctionExpression() || path.isArrowFunctionExpression();
 }
@@ -398,7 +446,7 @@ function serializeStaticAttrs(attrs) {
   const merged = [];
   let classValue;
   for (const attr of attrs) {
-    const name = (_a = xe[attr.name]) != null ? _a : attr.name;
+    const name = (_a = ke[attr.name]) != null ? _a : attr.name;
     if (name === "class") {
       classValue = classValue ? `${classValue} ${attr.value}` : String(attr.value);
     } else {
@@ -408,7 +456,7 @@ function serializeStaticAttrs(attrs) {
   if (classValue) merged.unshift({ name: "class", value: classValue });
   return merged.map((attr) => {
     if (attr.value === true) return ` ${attr.name}`;
-    return ` ${attr.name}="${le(attr.value)}"`;
+    return ` ${attr.name}="${pe(attr.value)}"`;
   }).join("");
 }
 function resolveComponentCallee(tag, fallback) {
@@ -427,16 +475,16 @@ function isSerializableStaticValue(value) {
   const stack = [value];
   while (stack.length > 0) {
     const current = stack.pop();
-    if (E(current) || $(current) || g(current) || i(current) || G(current)) {
+    if (T(current) || A(current) || d(current) || i(current) || U(current)) {
       continue;
     }
-    if (p(current)) {
+    if (m(current)) {
       for (const item of current) {
         stack.push(item);
       }
       continue;
     }
-    if (!P(current)) {
+    if (!F(current)) {
       return false;
     }
     const values = Object.values(current);
@@ -447,21 +495,29 @@ function isSerializableStaticValue(value) {
   return true;
 }
 function styleToString(style) {
-  return Object.entries(style).map(([key, value]) => {
-    const kebabKey = key.replaceAll(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-    return `${kebabKey}:${value}`;
-  }).join(";");
+  const normalized = w(style);
+  if (!normalized) return void 0;
+  if (i(normalized)) return normalized;
+  const parts = [];
+  for (const key in normalized) {
+    const value = normalized[key];
+    if (i(value) || d(value)) {
+      const prop = x(key, "--") ? key : b(key);
+      parts.push(`${prop}:${value}`);
+    }
+  }
+  return parts.join(";");
 }
 function shouldResolveStaticCollection(attrName) {
   return attrName !== "ref" && !x(attrName, "bind:") && !normalizeEventName(attrName);
 }
 function normalizeTemplateAttrName(attrName) {
   var _a;
-  return (_a = xe[attrName]) != null ? _a : attrName;
+  return (_a = ke[attrName]) != null ? _a : attrName;
 }
 function createStaticAttr(attrName, value, order) {
   return {
-    attr: { name: attrName, value },
+    attr: { name: attrName, value, order },
     order,
     templateName: normalizeTemplateAttrName(attrName)
   };
@@ -472,7 +528,8 @@ function createDynamicAttr(attrPath, attrName, value, effectKind, order) {
       path: attrPath,
       name: attrName,
       value,
-      effectKind
+      effectKind,
+      order
     },
     order,
     templateName: normalizeTemplateAttrName(attrName)
@@ -487,13 +544,15 @@ function resolveStaticExpressionValue(attrName, expressionPath) {
     return void 0;
   }
   let value = evaluated.value;
-  if (attrName === "style" && P(value)) {
-    value = styleToString(value);
+  if (attrName === "style") {
+    const style = styleToString(value);
+    if (style === void 0) return void 0;
+    value = style;
   }
-  if (i(value) || $(value)) {
+  if (i(value) || A(value)) {
     return value;
   }
-  if (g(value)) {
+  if (d(value)) {
     return String(value);
   }
   return void 0;
@@ -546,7 +605,8 @@ function parseAttributes(path) {
     if (attrPath.isJSXSpreadAttribute()) {
       spreadAttrs.push({
         value: attrPath.node.argument,
-        effectKind: classifyAttrValue(attrPath.node.argument).kind
+        effectKind: classifyAttrValue(attrPath.node.argument).kind,
+        order
       });
       continue;
     }
@@ -634,7 +694,7 @@ function unwrapTopLevelDeclaration(statementPath) {
   }
   if (statementPath.isExportNamedDeclaration() || statementPath.isExportDefaultDeclaration()) {
     const declarationPath = statementPath.get("declaration");
-    if (declarationPath && !Array.isArray(declarationPath) && (declarationPath.isFunctionDeclaration() || declarationPath.isVariableDeclaration())) {
+    if (declarationPath && !m(declarationPath) && (declarationPath.isFunctionDeclaration() || declarationPath.isVariableDeclaration())) {
       return declarationPath;
     }
   }
@@ -1043,7 +1103,7 @@ function patternHasSignalBinding(node) {
   if (types.isIdentifier(node)) return isSignal(node.name);
   if (types.isObjectPattern(node)) {
     return node.properties.some(
-      (p2) => types.isRestElement(p2) ? patternHasSignalBinding(p2.argument) : patternHasSignalBinding(p2.value)
+      (p) => types.isRestElement(p) ? patternHasSignalBinding(p.argument) : patternHasSignalBinding(p.value)
     );
   }
   if (types.isArrayPattern(node)) {
@@ -1191,9 +1251,9 @@ function isAlreadyValueAccess(path) {
   if (!types.isParenthesizedExpression(parent) && !types.isTSAsExpression(parent) && !types.isTSNonNullExpression(parent)) {
     return false;
   }
-  const ancestor = path.findParent((p2) => {
-    if (!isMemberLike(p2.node)) return false;
-    return isMemberAccessingProperty(p2.node, "value");
+  const ancestor = path.findParent((p) => {
+    if (!isMemberLike(p.node)) return false;
+    return isMemberAccessingProperty(p.node, "value");
   });
   return !!ancestor;
 }
@@ -1288,7 +1348,7 @@ function collectObjectPattern(pattern, base, leaves, rests) {
       continue;
     }
     const { keyExpr, computed, excludeKey } = resolveKey(prop);
-    if (excludeKey !== null) excludeKeys.push(excludeKey);
+    if (!T(excludeKey)) excludeKeys.push(excludeKey);
     const access = types.memberExpression(clone2(base), keyExpr, computed);
     collectTarget(prop.value, access, leaves, rests);
   }
@@ -1320,7 +1380,7 @@ function ensureBlockBody(path) {
   return block;
 }
 function isInsidePattern(ref, pattern) {
-  return !!ref.findParent((p2) => p2.node === pattern);
+  return !!ref.findParent((p) => p.node === pattern);
 }
 function accessorFor(pattern, base, name) {
   var _a;
@@ -1340,7 +1400,7 @@ function transformFnProps(path) {
   collectObjectPattern(firstParam, base, initLeaves, initRests);
   const conflicts = [...initLeaves, ...initRests].map((b2) => b2.name).filter((name) => x(name, signalPrefix));
   if (conflicts.length > 0) {
-    re("transformProps", "Property names cannot start with signal prefix", conflicts);
+    se("transformProps", "Property names cannot start with signal prefix", conflicts);
   }
   if (initLeaves.length === 0 && initRests.length === 1 && firstParam.properties.length === 1 && types.isRestElement(firstParam.properties[0])) {
     path.node.params[0] = types.identifier(initRests[0].name);
@@ -1448,6 +1508,18 @@ function hasDynamicBoundary(children, index) {
   const isDynamic = (n) => (n == null ? void 0 : n.type) === 3 /* EXPRESSION */ || (n == null ? void 0 : n.type) === 1 /* COMPONENT */ || (n == null ? void 0 : n.type) === 4 /* FOR */;
   return isText(prev) || isText(next) || isDynamic(prev) || isDynamic(next);
 }
+function getDynamicAnchorKind(children, index, mode) {
+  if (!hasDynamicBoundary(children, index)) {
+    const next = children[index + 1];
+    if ((mode === "hydrate" || mode === "server") && (next == null ? void 0 : next.type) === 0 /* ELEMENT */) {
+      return "element";
+    }
+    if (!next) {
+      return "tail";
+    }
+  }
+  return "comment";
+}
 function buildIR(path, ctx) {
   if (path.isJSXFragment()) {
     useImport("Fragment");
@@ -1464,14 +1536,14 @@ function buildElementIR(tag, path, ctx) {
   const node = {
     type: 0 /* ELEMENT */,
     tag,
-    isSVG: Ne(tag),
+    isSVG: Ce(tag),
     staticAttrs,
     dynamicAttrs: [],
     events: [],
-    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind })),
+    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind, order: s.order })),
     binds: [],
     children: [],
-    selfClosing: Ce(tag),
+    selfClosing: Re(tag),
     loc: path.node.loc
   };
   for (const attr of dynamicAttrs) {
@@ -1491,7 +1563,8 @@ function buildComponentIR(tag, path, ctx) {
     props.push({
       name: attr.name,
       value: i(attr.value) ? types.stringLiteral(attr.value) : types.booleanLiteral(attr.value),
-      kind: "static"
+      kind: "static",
+      order: attr.order
     });
   }
   for (const attr of dynamicAttrs) {
@@ -1500,7 +1573,8 @@ function buildComponentIR(tag, path, ctx) {
       props.push({
         name: attr.name,
         value: attr.value,
-        kind: attr.effectKind
+        kind: attr.effectKind,
+        order: attr.order
       });
     } else if (x(attr.name, "bind:")) {
       const binding = attr.name.slice("bind:".length);
@@ -1511,18 +1585,21 @@ function buildComponentIR(tag, path, ctx) {
       props.push({
         name: binding,
         value: types.cloneNode(valueExpr),
-        kind: attr.effectKind
+        kind: attr.effectKind,
+        order: attr.order
       });
       props.push({
         name: `update:${binding}`,
         value: createBindingSetter(valueExpr),
-        kind: "static"
+        kind: "static",
+        order: attr.order
       });
     } else {
       props.push({
         name: attr.name,
         value: attr.value,
-        kind: attr.effectKind
+        kind: attr.effectKind,
+        order: attr.order
       });
     }
   }
@@ -1530,7 +1607,7 @@ function buildComponentIR(tag, path, ctx) {
     type: 1 /* COMPONENT */,
     tag,
     props,
-    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind })),
+    spreads: spreadAttrs.map((s) => ({ value: s.value, kind: s.effectKind, order: s.order })),
     children: buildChildren(path, ctx),
     loc: path.node.loc
   };
@@ -1539,7 +1616,7 @@ function applyDynamicAttr(node, attr, ctx) {
   const { name, value, effectKind, path } = attr;
   const eventName = normalizeEventName(name);
   if (eventName) {
-    const delegated = !!(ctx.options.delegateEvents && Oe(eventName));
+    const delegated = !!(ctx.options.delegateEvents && ze(eventName));
     node.events.push({
       name: eventName,
       handler: value,
@@ -1627,7 +1704,7 @@ function isPropsChildrenExpression(expression) {
   const binding = expression.scope.getBinding(node.object.name);
   const bindingPath = binding == null ? void 0 : binding.path;
   if (!(bindingPath == null ? void 0 : bindingPath.isIdentifier())) return false;
-  const owner = bindingPath.findParent((p2) => isAnyFunctionPath(p2));
+  const owner = bindingPath.findParent((p) => isAnyFunctionPath(p));
   if (!owner) return false;
   const fn = owner.node;
   const componentName = getEnclosingFunctionName(owner);
@@ -1690,6 +1767,7 @@ function buildForIR(expression, ctx) {
   };
 }
 function extractKeyExpression(path) {
+  if (path.isJSXFragment()) return extractFragmentKeyExpression(path);
   if (!path.isJSXElement()) return null;
   for (const attrPath of path.get("openingElement.attributes")) {
     if (!attrPath.isJSXAttribute()) continue;
@@ -1704,7 +1782,7 @@ function extractKeyExpression(path) {
       return types.stringLiteral(value.value);
     }
     const valuePath = attrPath.get("value");
-    if (!Array.isArray(valuePath) && valuePath.isJSXExpressionContainer()) {
+    if (!m(valuePath) && valuePath.isJSXExpressionContainer()) {
       const expressionPath = valuePath.get("expression");
       attrPath.remove();
       if (expressionPath.isJSXEmptyExpression()) return null;
@@ -1715,9 +1793,16 @@ function extractKeyExpression(path) {
   }
   return null;
 }
+function extractFragmentKeyExpression(path) {
+  const children = path.get("children").filter(isValidChild);
+  if (children.length !== 1) return null;
+  const child = children[0];
+  if (!child.isJSXElement() && !child.isJSXFragment()) return null;
+  return extractKeyExpression(child);
+}
 function getForCallbackBody(callback) {
   const bodyPath = callback.get("body");
-  if (Array.isArray(bodyPath)) return null;
+  if (m(bodyPath)) return null;
   if (bodyPath.isJSXElement() || bodyPath.isJSXFragment()) {
     return {
       path: bodyPath,
@@ -1734,7 +1819,7 @@ function getForCallbackBody(callback) {
       continue;
     }
     const argument = statement.get("argument");
-    if (Array.isArray(argument) || !argument.node) {
+    if (m(argument) || !argument.node) {
       prelude.push(statement.node);
       continue;
     }
@@ -1810,16 +1895,55 @@ function createPropNode(name, value, kind, options) {
 function composePropsExpression(props, spreads, options) {
   if (spreads.length === 0) {
     if (props.length === 0) return types.objectExpression([]);
-    return types.objectExpression(props.map((p2) => createPropNode(p2.name, p2.value, p2.kind, options)));
+    return types.objectExpression(props.map((p) => createPropNode(p.name, p.value, p.kind, options)));
+  }
+  if (props.some((prop) => prop.order == null) || spreads.some((spread) => spread.order == null)) {
+    return composeUnorderedPropsExpression(props, spreads, options);
+  }
+  const ordered = [
+    ...props.map((prop, sequence) => ({
+      type: "prop",
+      order: prop.order,
+      sequence,
+      prop
+    })),
+    ...spreads.map((spread, sequence) => ({
+      type: "spread",
+      order: spread.order,
+      sequence,
+      spread
+    }))
+  ].sort((a2, b2) => a2.order - b2.order || a2.sequence - b2.sequence);
+  const parts = [];
+  let propNodes = [];
+  const flushProps = () => {
+    if (propNodes.length === 0) return;
+    parts.push(types.objectExpression(propNodes));
+    propNodes = [];
+  };
+  for (const entry of ordered) {
+    if (entry.type === "prop") {
+      propNodes.push(createPropNode(entry.prop.name, entry.prop.value, entry.prop.kind, options));
+      continue;
+    }
+    flushProps();
+    parts.push(cloneValue(entry.spread.value, options.cloneValues));
   }
+  flushProps();
+  return composeAssignParts(parts);
+}
+function composeUnorderedPropsExpression(props, spreads, options) {
   const parts = [];
-  const propNodes = props.map((p2) => createPropNode(p2.name, p2.value, p2.kind, options));
+  const propNodes = props.map((p) => createPropNode(p.name, p.value, p.kind, options));
   if (propNodes.length > 0) {
     parts.push(types.objectExpression(propNodes));
   }
   for (const spread of spreads) {
     parts.push(cloneValue(spread.value, options.cloneValues));
   }
+  return composeAssignParts(parts);
+}
+function composeAssignParts(parts) {
   if (parts.length === 0) return types.objectExpression([]);
   if (parts.length === 1) return parts[0];
   return types.callExpression(types.memberExpression(types.identifier("Object"), types.identifier("assign")), [
@@ -2091,7 +2215,7 @@ function generateServerFor(node, ctx) {
   return buildForCall(node, bodyExpr);
 }
 function generateServerElement(node, ctx, withHydrationKey = true, staticIndex, options = {}) {
-  var _a, _b;
+  var _a;
   const dynamicAttrExprs = [...(_a = options.prependAttrExprs) != null ? _a : []];
   for (const attr of node.dynamicAttrs) {
     let expr;
@@ -2119,7 +2243,7 @@ function generateServerElement(node, ctx, withHydrationKey = true, staticIndex,
   }
   const templates = [];
   const expressions = [];
-  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: Re, value: String(staticIndex) }];
+  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: je, value: String(staticIndex) }];
   const attrs = serializeStaticAttrs(staticAttrs);
   const textareaValueBind = node.tag === "textarea" ? findBind(node, "value") : null;
   let currentStr = `<${node.tag}`;
@@ -2150,11 +2274,11 @@ function generateServerElement(node, ctx, withHydrationKey = true, staticIndex,
         if (child.type === 2 /* TEXT */) {
           currentStr += escapeServerTemplateText(child.value);
         } else if (child.type === 3 /* EXPRESSION */ || child.type === 1 /* COMPONENT */ || child.type === 4 /* FOR */) {
-          const marker = hasDynamicBoundary(node.children, i2);
+          const anchorKind = getDynamicAnchorKind(node.children, i2, "server");
           const slotIndex = markerIndex++;
           templates.push(currentStr);
-          currentStr = marker ? `<!--${slotIndex}-->` : "";
-          if (!marker && ((_b = node.children[i2 + 1]) == null ? void 0 : _b.type) === 0 /* ELEMENT */) {
+          currentStr = anchorKind === "comment" ? `<!--${slotIndex}-->` : "";
+          if (anchorKind === "element") {
             pendingAnchorIndex = slotIndex;
           }
           expressions.push(generateServerNode(child, ctx));
@@ -2177,7 +2301,7 @@ function generateServerElement(node, ctx, withHydrationKey = true, staticIndex,
             }
           }
           const staticHTML = buildStaticServerHTML(child, anchorIndex);
-          if (staticHTML !== null) {
+          if (!T(staticHTML)) {
             currentStr += staticHTML;
           } else {
             templates.push(currentStr);
@@ -2222,7 +2346,7 @@ function buildStaticServerHTML(node, staticIndex) {
   if (node.binds.length > 0 || node.dynamicAttrs.length > 0 || node.spreads.length > 0) {
     return null;
   }
-  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: Re, value: String(staticIndex) }];
+  const staticAttrs = staticIndex === void 0 ? node.staticAttrs : [...node.staticAttrs, { name: je, value: String(staticIndex) }];
   const attrs = serializeStaticAttrs(staticAttrs);
   if (node.selfClosing) {
     return `<${node.tag}${attrs} />`;
@@ -2234,7 +2358,7 @@ function buildStaticServerHTML(node, staticIndex) {
     } else if (child.type === 0 /* ELEMENT */) {
       if (child.binds.length > 0) return null;
       const nested = buildStaticServerHTML(child);
-      if (nested === null) return null;
+      if (T(nested)) return null;
       html += nested;
     } else {
       return null;
@@ -2272,18 +2396,6 @@ function shouldCloseTag(element, isLastElement, hasClosingParent, options) {
 function closeTag(element, isLastElement, hasClosingParent, options) {
   return shouldCloseTag(element, isLastElement, hasClosingParent, options) ? `</${element.tag}>` : "";
 }
-function getDynamicAnchorKind(children, index, mode) {
-  if ((mode === "client" || mode === "hydrate") && !hasDynamicBoundary(children, index)) {
-    const next = children[index + 1];
-    if (mode === "hydrate" && (next == null ? void 0 : next.type) === 0 /* ELEMENT */) {
-      return "element";
-    }
-    if (!next) {
-      return "tail";
-    }
-  }
-  return "comment";
-}
 function findLastOmittableElementIndex(children, mode) {
   for (let i2 = children.length - 1; i2 >= 0; i2--) {
     const child = children[i2];
@@ -2308,7 +2420,7 @@ function buildTemplateAndFlatten(root, mode) {
     const myId = nextId++;
     const staticAttrs = mode === "hydrate" && forcedStaticIndex !== void 0 ? [
       ...element.staticAttrs,
-      { name: Re, value: String(forcedStaticIndex) }
+      { name: je, value: String(forcedStaticIndex) }
     ] : element.staticAttrs;
     const attrs = serializeStaticAttrs(staticAttrs);
     if (element.selfClosing) {
@@ -2347,7 +2459,7 @@ function buildTemplateAndFlatten(root, mode) {
       const child = element.children[i2];
       switch (child.type) {
         case 2 /* TEXT */:
-          template += mode === "hydrate" ? child.value : le(child.value);
+          template += mode === "hydrate" ? child.value : pe(child.value);
           nodes.push({
             id: nextId++,
             kind: "text",
@@ -2414,7 +2526,7 @@ function buildStaticTemplateString(node, mode) {
   function visit(current, isLastElement, hasClosingParent) {
     switch (current.type) {
       case 2 /* TEXT */:
-        return mode === "hydrate" ? current.value : le(current.value);
+        return mode === "hydrate" ? current.value : pe(current.value);
       case 0 /* ELEMENT */: {
         const attrs = serializeStaticAttrs(current.staticAttrs);
         if (current.selfClosing) return selfClosingTag(current, attrs);
@@ -2717,7 +2829,7 @@ function emitDynamicAttr(attr, target, body, state, pendingMemoPatches) {
 function emitSpread(spread, target, body, state, pendingMemoPatches) {
   emitPatchOrEffect(
     target,
-    ze,
+    He,
     spread.value,
     spread.kind,
     body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-essor",
-  "version": "0.0.17-beta.7",
+  "version": "0.0.17",
   "description": "",
   "type": "module",
   "keywords": [],
@@ -34,7 +34,7 @@
   "dependencies": {
     "@babel/core": "^8.0.1",
     "@babel/generator": "^8.0.0",
-    "@estjs/shared": "0.0.17-beta.7"
+    "@estjs/shared": "0.0.17"
   },
   "devDependencies": {
     "@babel/traverse": "^8.0.0",