babel-plugin-essor 0.0.16-beta.3 → 0.0.16-beta.4

package/dist/index.cjs

@@ -22142,15 +22142,94 @@ function styleToString(style) {
 function shouldResolveStaticCollection(attrName) {
   return attrName !== "ref" && !attrName.startsWith("bind:") && !normalizeEventName(attrName);
 }
+function normalizeTemplateAttrName(attrName) {
+  var _a;
+  return (_a = propsToAttrMap[attrName]) != null ? _a : attrName;
+}
+function createStaticAttr(attrName, value, order) {
+  return {
+    attr: { name: attrName, value },
+    order,
+    templateName: normalizeTemplateAttrName(attrName)
+  };
+}
+function createDynamicAttr(attrPath, attrName, value, effectKind, order) {
+  return {
+    attr: {
+      path: attrPath,
+      name: attrName,
+      value,
+      effectKind
+    },
+    order,
+    templateName: normalizeTemplateAttrName(attrName)
+  };
+}
+function resolveStaticExpressionValue(attrName, expressionPath) {
+  if (!shouldResolveStaticCollection(attrName)) {
+    return void 0;
+  }
+  const evaluated = expressionPath.evaluate();
+  if (!evaluated.confident || !isSerializableStaticValue(evaluated.value)) {
+    return void 0;
+  }
+  let value = evaluated.value;
+  if (attrName === "style" && isPlainObject(value)) {
+    value = styleToString(value);
+  }
+  if (isString(value) || isBoolean(value)) {
+    return value;
+  }
+  if (isNumber(value)) {
+    return String(value);
+  }
+  return void 0;
+}
+function parseExpressionAttribute(attrPath, attrName, expression, order, staticAttrs, dynamicAttrs) {
+  const expressionPath = attrPath.get("value.expression");
+  const staticValue = resolveStaticExpressionValue(attrName, expressionPath);
+  if (staticValue !== void 0) {
+    staticAttrs.push(createStaticAttr(attrName, staticValue, order));
+    return;
+  }
+  const classified = classifyAttrValue(expression);
+  dynamicAttrs.push(
+    createDynamicAttr(attrPath, attrName, classified.expression, classified.kind, order)
+  );
+}
+function finalizeParsedAttributes(staticAttrs, dynamicAttrs, spreadAttrs) {
+  if (dynamicAttrs.length === 0) {
+    return {
+      staticAttrs: staticAttrs.map((entry) => entry.attr),
+      dynamicAttrs: [],
+      spreadAttrs
+    };
+  }
+  const dynamicNames = new Set(dynamicAttrs.map((entry) => entry.templateName));
+  const lastExplicitOrder = /* @__PURE__ */ new Map();
+  for (const entry of [...staticAttrs, ...dynamicAttrs]) {
+    if (!dynamicNames.has(entry.templateName)) continue;
+    const current = lastExplicitOrder.get(entry.templateName);
+    if (current == null || entry.order > current) {
+      lastExplicitOrder.set(entry.templateName, entry.order);
+    }
+  }
+  const keepsWinningExplicitAttr = (entry) => !dynamicNames.has(entry.templateName) || entry.order === lastExplicitOrder.get(entry.templateName);
+  return {
+    staticAttrs: staticAttrs.filter(keepsWinningExplicitAttr).map((entry) => entry.attr),
+    dynamicAttrs: dynamicAttrs.filter(keepsWinningExplicitAttr).map((entry) => entry.attr),
+    spreadAttrs
+  };
+}
 function parseAttributes(path2) {
   const staticAttrs = [];
   const dynamicAttrs = [];
   const spreadAttrs = [];
   if (!path2.isJSXElement()) {
-    return { staticAttrs, dynamicAttrs, spreadAttrs };
+    return { staticAttrs: [], dynamicAttrs: [], spreadAttrs };
   }
   const attributes = path2.get("openingElement.attributes");
-  for (const attrPath of attributes) {
+  for (const [order, attrPath] of attributes.entries()) {
     if (attrPath.isJSXSpreadAttribute()) {
       spreadAttrs.push({
         value: attrPath.node.argument,
@@ -22158,14 +22237,17 @@ function parseAttributes(path2) {
       });
       continue;
     }
+    if (!attrPath.isJSXAttribute()) {
+      continue;
+    }
     const attr = attrPath.node;
     const attrName = getJSXName(attr.name);
     if (!attr.value) {
-      staticAttrs.push({ name: attrName, value: true });
+      staticAttrs.push(createStaticAttr(attrName, true, order));
       continue;
     }
     if (core.types.isStringLiteral(attr.value)) {
-      staticAttrs.push({ name: attrName, value: attr.value.value });
+      staticAttrs.push(createStaticAttr(attrName, attr.value.value, order));
       continue;
     }
     if (core.types.isJSXExpressionContainer(attr.value)) {
@@ -22173,36 +22255,10 @@ function parseAttributes(path2) {
       if (core.types.isJSXEmptyExpression(expression)) {
         continue;
       }
-      const expressionPath = attrPath.get(
-        "value.expression"
-      );
-      const evaluated = expressionPath.evaluate();
-      if (evaluated.confident && isSerializableStaticValue(evaluated.value)) {
-        if (shouldResolveStaticCollection(attrName)) {
-          let value2 = evaluated.value;
-          if (attrName === "style" && isPlainObject(value2)) {
-            value2 = styleToString(value2);
-          }
-          if (isString(value2) || isBoolean(value2) || isNumber(value2)) {
-            staticAttrs.push({
-              name: attrName,
-              value: isBoolean(value2) ? value2 : String(value2)
-            });
-            continue;
-          }
-        }
-      }
-      const value = expression;
-      const classified = classifyAttrValue(value);
-      dynamicAttrs.push({
-        path: attrPath,
-        name: attrName,
-        value: classified.expression,
-        effectKind: classified.kind
-      });
+      parseExpressionAttribute(attrPath, attrName, expression, order, staticAttrs, dynamicAttrs);
     }
   }
-  return { staticAttrs, dynamicAttrs, spreadAttrs };
+  return finalizeParsedAttributes(staticAttrs, dynamicAttrs, spreadAttrs);
 }
 
 // src/jsx/ir.ts
@@ -22804,7 +22860,13 @@ function generateServer(ir, ctx) {
 // src/jsx/client.ts
 init_cjs_shims();
 var MEMO_STATE_ID = "_p$";
-var MEMO_NEXT_VALUE_ID = "_v$0";
+var MEMO_NEXT_VALUE_ID = "_v$";
+function isDynamicChild(node) {
+  return node.type === 3 /* EXPRESSION */ || node.type === 1 /* COMPONENT */ || node.type === 4 /* FOR */;
+}
+function hasOwnEffects(element) {
+  return element.dynamicAttrs.length > 0 || element.events.length > 0 || element.spreads.length > 0 || element.ref != null || element.binds.length > 0;
+}
 function buildTemplateAndFlatten(root, mode) {
   const nodes = [];
   let template = "";
@@ -22820,22 +22882,19 @@ function buildTemplateAndFlatten(root, mode) {
         irElement: element,
         parentId,
         childIndex,
-        needsRef: element.dynamicAttrs.length > 0 || element.events.length > 0 || element.spreads.length > 0 || element.ref != null || element.binds.length > 0
+        needsRef: hasOwnEffects(element)
       });
       return;
     }
     template += `<${element.tag}${attrs}>`;
-    const hasDynamicChild = element.children.some(
-      (c) => c.type === 3 /* EXPRESSION */ || c.type === 1 /* COMPONENT */ || c.type === 4 /* FOR */
-    );
-    const hasOwnEffects = element.dynamicAttrs.length > 0 || element.events.length > 0 || element.spreads.length > 0 || element.ref != null || element.binds.length > 0;
+    const hasDynamicChildren = element.children.some(isDynamicChild);
     nodes.push({
       id: myId,
       kind: "element",
       irElement: element,
       parentId,
       childIndex,
-      needsRef: hasOwnEffects || hasDynamicChild
+      needsRef: hasOwnEffects(element) || hasDynamicChildren
     });
     let templateChildIndex = 0;
     for (const child of element.children) {
@@ -22908,7 +22967,6 @@ function planNavigation(nodes) {
     }
   }
   function ensureNavigated(node) {
-    var _a;
     if (navigated.has(node.id)) return;
     if (node.parentId >= 0 && !navigated.has(node.parentId)) {
       const parent = nodeMap.get(node.parentId);
@@ -22918,8 +22976,7 @@ function planNavigation(nodes) {
       steps.push({
         nodeId: node.id,
         type: "child",
-        fromNodeId: node.parentId,
-        distance: 0
+        fromNodeId: node.parentId
       });
       navigated.add(node.id);
       return;
@@ -22940,26 +22997,16 @@ function planNavigation(nodes) {
         nodeId: node.id,
         type: "next",
         fromNodeId: prevNav.id,
-        distance: node.childIndex - prevNav.childIndex
+        index: node.childIndex - prevNav.childIndex
       });
       navigated.add(node.id);
       return;
     }
-    const firstChild = parentSiblings == null ? void 0 : parentSiblings.get(0);
-    if (firstChild && !navigated.has(firstChild.id)) {
-      steps.push({
-        nodeId: firstChild.id,
-        type: "child",
-        fromNodeId: node.parentId,
-        distance: 0
-      });
-      navigated.add(firstChild.id);
-    }
     steps.push({
       nodeId: node.id,
-      type: "next",
-      fromNodeId: (_a = firstChild == null ? void 0 : firstChild.id) != null ? _a : node.parentId,
-      distance: node.childIndex
+      type: "nthChild",
+      fromNodeId: node.parentId,
+      index: node.childIndex
     });
     navigated.add(node.id);
   }
@@ -22970,8 +23017,16 @@ function planNavigation(nodes) {
   }
   return steps;
 }
+function createNavigationExpression(step, fromExpr) {
+  if (step.type === "child") {
+    return core.types.callExpression(useImport("child"), [fromExpr]);
+  }
+  if (step.type === "nthChild") {
+    return core.types.callExpression(useImport("nthChild"), [fromExpr, core.types.numericLiteral(step.index)]);
+  }
+  return core.types.callExpression(useImport("next"), [fromExpr, core.types.numericLiteral(step.index)]);
+}
 function generateElement(node, state) {
-  var _a;
   const { mode } = state;
   if (isStaticSubtree(node)) {
     const tmplId2 = registerTemplate(buildStaticTemplateString(node, mode));
@@ -22987,76 +23042,77 @@ function generateElement(node, state) {
   );
   const varMap = /* @__PURE__ */ new Map();
   varMap.set(0, rootId);
-  for (const step of navSteps) {
+  emitNavigationDeclarations(navSteps, varMap, rootId, body);
+  const pendingMemoPatches = [];
+  emitElementEffects(flatNodes, varMap, state, body, pendingMemoPatches);
+  emitMergedMemoEffect(pendingMemoPatches, body);
+  emitDynamicChildInserts(flatNodes, varMap, state, body);
+  body.push(core.types.returnStatement(rootId));
+  return core.types.callExpression(core.types.arrowFunctionExpression([], core.types.blockStatement(body)), []);
+}
+function emitNavigationDeclarations(steps, varMap, rootId, body) {
+  var _a;
+  for (const step of steps) {
     const varName = genUid("n$");
     const fromExpr = (_a = varMap.get(step.fromNodeId)) != null ? _a : rootId;
-    let navExpr;
-    if (step.type === "child") {
-      navExpr = core.types.callExpression(useImport("child"), [fromExpr]);
-    } else {
-      navExpr = core.types.callExpression(useImport("next"), [fromExpr, core.types.numericLiteral(step.distance)]);
-    }
+    const navExpr = createNavigationExpression(step, fromExpr);
     body.push(core.types.variableDeclaration("const", [core.types.variableDeclarator(varName, navExpr)]));
     varMap.set(step.nodeId, varName);
   }
+}
+function emitElementEffects(flatNodes, varMap, state, body, pendingMemoPatches) {
   for (const flatNode of flatNodes) {
     if (flatNode.kind !== "element" || !flatNode.irElement) continue;
-    const el = flatNode.irElement;
-    const elExpr = varMap.get(flatNode.id);
-    if (!elExpr) continue;
-    for (const event of el.events) {
-      emitEvent(event, elExpr, body);
-    }
-    if (el.ref) {
-      body.push(core.types.expressionStatement(createRefExpression(elExpr, el.ref.value)));
-    }
-    for (const bind of el.binds) {
-      emitBind(bind, elExpr, body);
-    }
-    for (const attr of el.dynamicAttrs) {
-      emitDynamicAttr(attr, elExpr, body, state);
-    }
-    for (const spread of el.spreads) {
-      emitSpread(spread, elExpr, body, state);
-    }
+    const target = varMap.get(flatNode.id);
+    if (!target) continue;
+    emitElementEffect(flatNode.irElement, target, state, body, pendingMemoPatches);
+  }
+}
+function emitElementEffect(element, target, state, body, pendingMemoPatches) {
+  for (const event of element.events) {
+    emitEvent(event, target, body);
+  }
+  if (element.ref) {
+    body.push(core.types.expressionStatement(createRefExpression(target, element.ref.value)));
+  }
+  for (const bind of element.binds) {
+    emitBind(bind, target, body);
   }
+  for (const attr of element.dynamicAttrs) {
+    emitDynamicAttr(attr, target, body, state, pendingMemoPatches);
+  }
+  for (const spread of element.spreads) {
+    emitSpread(spread, target, body, state, pendingMemoPatches);
+  }
+}
+function emitDynamicChildInserts(flatNodes, varMap, state, body) {
   for (const flatNode of flatNodes) {
     if (flatNode.kind !== "anchor" || !flatNode.dynamicChild) continue;
-    const parentExpr = varMap.get(flatNode.parentId);
-    const anchorExpr = varMap.get(flatNode.id);
-    if (!parentExpr || !anchorExpr) continue;
-    const child = flatNode.dynamicChild;
-    if (child.type === 3 /* EXPRESSION */) {
-      body.push(
-        core.types.expressionStatement(
-          core.types.callExpression(useImport("insert"), [
-            parentExpr,
-            core.types.arrowFunctionExpression([], core.types.cloneNode(child.value, true)),
-            anchorExpr
-          ])
-        )
-      );
-    } else if (child.type === 1 /* COMPONENT */) {
-      const componentExpr = generateComponent(child, state);
-      body.push(
-        core.types.expressionStatement(
-          core.types.callExpression(useImport("insert"), [parentExpr, componentExpr, anchorExpr])
-        )
-      );
-    } else if (child.type === 4 /* FOR */) {
-      body.push(
-        core.types.expressionStatement(
-          core.types.callExpression(useImport("insert"), [
-            parentExpr,
-            generateFor(child, state),
-            anchorExpr
-          ])
-        )
-      );
-    }
+    const parent = varMap.get(flatNode.parentId);
+    const anchor = varMap.get(flatNode.id);
+    if (!parent || !anchor) continue;
+    body.push(
+      core.types.expressionStatement(createInsertCall(parent, flatNode.dynamicChild, anchor, state))
+    );
+  }
+}
+function createInsertCall(parent, child, anchor, state) {
+  if (child.type === 4 /* FOR */) {
+    const insert = useImport("insert");
+    return core.types.callExpression(insert, [parent, generateFor(child, state), anchor]);
+  }
+  const childExpression = createDynamicChildExpression(child, state);
+  return core.types.callExpression(useImport("insert"), [parent, childExpression, anchor]);
+}
+function createDynamicChildExpression(child, state) {
+  switch (child.type) {
+    case 3 /* EXPRESSION */:
+      return core.types.arrowFunctionExpression([], core.types.cloneNode(child.value, true));
+    case 1 /* COMPONENT */:
+      return generateComponent(child, state);
+    case 4 /* FOR */:
+      return generateFor(child, state);
   }
-  body.push(core.types.returnStatement(rootId));
-  return core.types.callExpression(core.types.arrowFunctionExpression([], core.types.blockStatement(body)), []);
 }
 function emitEvent(event, target, body) {
   if (event.delegated) {
@@ -23097,65 +23153,75 @@ function emitBind(bind, target, body) {
   if (modifiersArg) args.push(core.types.cloneNode(modifiersArg));
   body.push(core.types.expressionStatement(core.types.callExpression(useImport("bindElement"), args)));
 }
-function emitDynamicAttr(attr, target, body, state) {
+function emitDynamicAttr(attr, target, body, state, pendingMemoPatches) {
   emitPatchOrEffect(
     target,
     attr.name,
     attr.value,
     attr.kind,
     body,
-    state,
-    () => createEffectKey(attr.name, state.effectIndex++)
+    () => createEffectKey(attr.name, state.effectIndex++),
+    pendingMemoPatches
   );
 }
-function emitSpread(spread, target, body, state) {
+function emitSpread(spread, target, body, state, pendingMemoPatches) {
   emitPatchOrEffect(
     target,
     "_$spread$",
     spread.value,
     spread.kind,
     body,
-    state,
-    () => createSpreadEffectKey(state.effectIndex++)
+    () => createSpreadEffectKey(state.effectIndex++),
+    pendingMemoPatches
   );
 }
-function emitPatchOrEffect(target, attrName, value, kind, body, state, getEffectKey) {
+function emitPatchOrEffect(target, attrName, value, kind, body, getEffectKey, pendingMemoPatches) {
   if (kind === "static") {
     body.push(core.types.expressionStatement(createPatchCall(useImport, target, attrName, value)));
     return;
   }
-  const effectKey = getEffectKey();
-  emitMemoEffect(effectKey, target, attrName, value, body);
-}
-function emitMemoEffect(effectKey, target, attrName, value, body) {
-  const effectState = core.types.memberExpression(core.types.identifier(MEMO_STATE_ID), core.types.identifier(effectKey));
-  const valueId = core.types.identifier(MEMO_NEXT_VALUE_ID);
-  const updateCall = createPatchCall(useImport, target, attrName, value, {
-    previousValue: effectState,
-    nextValue: core.types.assignmentExpression("=", effectState, valueId)
+  pendingMemoPatches.push({
+    effectKey: getEffectKey(),
+    target,
+    attrName,
+    value
   });
+}
+function emitMergedMemoEffect(patches, body) {
+  if (patches.length === 0) return;
+  const memoStateId = core.types.identifier(MEMO_STATE_ID);
+  const effectBody = patches.flatMap((patch) => createMemoPatchStatements(patch, memoStateId));
+  effectBody.push(core.types.returnStatement(memoStateId));
   body.push(
     core.types.expressionStatement(
       core.types.callExpression(useImport("memoEffect"), [
-        core.types.arrowFunctionExpression(
-          [core.types.identifier(MEMO_STATE_ID)],
-          core.types.blockStatement([
-            core.types.variableDeclaration("var", [core.types.variableDeclarator(valueId, value)]),
-            core.types.expressionStatement(
-              core.types.logicalExpression(
-                "&&",
-                core.types.binaryExpression("!==", valueId, effectState),
-                updateCall
-              )
-            ),
-            core.types.returnStatement(core.types.identifier(MEMO_STATE_ID))
-          ])
-        ),
-        core.types.objectExpression([core.types.objectProperty(core.types.identifier(effectKey), core.types.objectExpression([]))])
+        core.types.arrowFunctionExpression([memoStateId], core.types.blockStatement(effectBody)),
+        createMemoInitialState(patches)
       ])
     )
   );
 }
+function createMemoPatchStatements(patch, memoStateId) {
+  const effectState = core.types.memberExpression(memoStateId, core.types.identifier(patch.effectKey));
+  const valueId = genUid(MEMO_NEXT_VALUE_ID);
+  const updateCall = createPatchCall(useImport, patch.target, patch.attrName, valueId, {
+    previousValue: effectState,
+    nextValue: core.types.assignmentExpression("=", effectState, valueId)
+  });
+  return [
+    core.types.variableDeclaration("var", [core.types.variableDeclarator(valueId, core.types.cloneNode(patch.value, true))]),
+    core.types.expressionStatement(
+      core.types.logicalExpression("&&", core.types.binaryExpression("!==", valueId, effectState), updateCall)
+    )
+  ];
+}
+function createMemoInitialState(patches) {
+  return core.types.objectExpression(
+    patches.map(
+      (patch) => core.types.objectProperty(core.types.identifier(patch.effectKey), core.types.identifier("undefined"))
+    )
+  );
+}
 function generateComponent(node, state) {
   const renderedChildren = renderChildExpressions(
     node.children,