@geajs/vite-plugin 1.0.23 → 1.0.26

package/dist/index.js

@@ -2347,6 +2347,17 @@ function detectItemIdProperty(template, itemVar) {
   }
   return void 0;
 }
+function extractKeyExpression(template) {
+  if (!template || !t6.isJSXElement(template)) return void 0;
+  for (const attr of template.openingElement.attributes) {
+    if (!t6.isJSXAttribute(attr) || !t6.isJSXIdentifier(attr.name) || attr.name.name !== "key") continue;
+    if (!t6.isJSXExpressionContainer(attr.value)) continue;
+    const keyExpr = attr.value.expression;
+    if (t6.isJSXEmptyExpression(keyExpr)) continue;
+    return keyExpr;
+  }
+  return void 0;
+}
 function hasExplicitItemKey(template) {
   if (!template || !t6.isJSXElement(template)) return false;
   return template.openingElement.attributes.some(
@@ -3843,6 +3854,7 @@ function handleArrayMap(expr, tagName, node, elementPath, index, arrayMaps, stat
         itemVariable: itemVar2,
         ...indexVar2 ? { indexVariable: indexVar2 } : {},
         itemIdProperty: itemIdProp,
+        ...!itemIdProp && hasExplicitItemKey(itemTemplate2) ? { keyExpression: t9.cloneNode(extractKeyExpression(itemTemplate2), true) } : {},
         rootHasUserId: hasRootUserIdAttribute(itemTemplate2),
         computationExpr: t9.cloneNode(normalizedArrayExpr, true),
         computationSetupStatements: computationSetupStatements.map((stmt) => t9.cloneNode(stmt, true)),
@@ -3956,6 +3968,7 @@ function handleArrayMap(expr, tagName, node, elementPath, index, arrayMaps, stat
     isImportedState: result.isImportedState || false,
     isKeyed,
     itemIdProperty: itemIdProperty || (isKeyed ? void 0 : "id"),
+    ...!itemIdProperty && isKeyed ? { keyExpression: t9.cloneNode(extractKeyExpression(itemTemplate), true) } : {},
     classToggleName,
     conditionalBindings,
     ...cbBodyStmts.length > 0 ? { callbackBodyStatements: cbBodyStmts } : {}
@@ -4705,7 +4718,34 @@ function expressionContainsJSX(expr) {
   check(expr);
   return found;
 }
+function callsJSXReturningProperty(expr, classBody2) {
+  if (!classBody2 || !t10.isCallExpression(expr)) return false;
+  let propName;
+  if (t10.isMemberExpression(expr.callee) && t10.isIdentifier(expr.callee.property) && !expr.callee.computed) {
+    propName = expr.callee.property.name;
+  }
+  if (!propName) return false;
+  for (const member of classBody2.body) {
+    if (!t10.isClassProperty(member) || !member.value) continue;
+    const scanValue = (node) => {
+      if (t10.isObjectExpression(node)) {
+        for (const prop of node.properties) {
+          if (t10.isObjectProperty(prop) && t10.isIdentifier(prop.key) && prop.key.name === propName && (t10.isArrowFunctionExpression(prop.value) || t10.isFunctionExpression(prop.value))) {
+            return expressionContainsJSX(prop.value);
+          }
+        }
+      }
+      if (t10.isArrayExpression(node)) {
+        return node.elements.some((el) => el && scanValue(el));
+      }
+      return false;
+    };
+    if (scanValue(member.value)) return true;
+  }
+  return false;
+}
 function isChildrenPropAccess(expr) {
+  if (t10.isIdentifier(expr) && expr.name === "children") return true;
   if (t10.isMemberExpression(expr) && t10.isIdentifier(expr.property) && expr.property.name === "children" && t10.isIdentifier(expr.object) && expr.object.name === "props")
     return true;
   if (t10.isMemberExpression(expr) && t10.isIdentifier(expr.property) && expr.property.name === "children" && t10.isMemberExpression(expr.object) && t10.isThisExpression(expr.object.object) && t10.isIdentifier(expr.object.property) && expr.object.property.name === "props")
@@ -4927,13 +4967,16 @@ function replaceJSXInExpression(node, mapJSXNodes, ctx) {
     normalizeDestructuredMapCallback(fn);
     const handlerPropsInMap = [];
     const mapItemVariable = t10.isIdentifier(fn.params[0]) ? fn.params[0].name : "item";
-    const mapItemIdProperty = detectItemIdProperty(extractItemTemplate(fn), mapItemVariable) || "id";
+    const itemTemplate = extractItemTemplate(fn);
+    const mapItemIdProperty = detectItemIdProperty(itemTemplate, mapItemVariable) || "id";
+    const mapKeyExpr = !detectItemIdProperty(itemTemplate, mapItemVariable) && hasExplicitItemKey(itemTemplate) ? extractKeyExpression(itemTemplate) : void 0;
     const mapCtx = {
       ...ctx,
       inMapCallback: true,
       handlerPropsInMap,
       mapItemIdProperty,
       mapItemVariable,
+      ...mapKeyExpr ? { mapKeyExpression: mapKeyExpr } : {},
       conditionalSlots: void 0,
       conditionalSlotCursor: void 0,
       conditionalSlotNodeMap: void 0
@@ -5203,7 +5246,7 @@ function processElement(node, parts, ctx, elementPath = []) {
   if (ctx.inMapCallback && elementPath.length === 0 && ctx.mapItemVariable) {
     const itemVar = ctx.mapItemVariable;
     const itemIdProp = ctx.mapItemIdProperty;
-    const itemIdExpr = itemIdProp && itemIdProp !== ITEM_IS_KEY ? t10.logicalExpression("??", buildOptionalMemberChain(t10.identifier(itemVar), itemIdProp), t10.identifier(itemVar)) : t10.callExpression(t10.identifier("String"), [t10.identifier(itemVar)]);
+    const itemIdExpr = ctx.mapKeyExpression ? t10.callExpression(t10.identifier("String"), [t10.cloneNode(ctx.mapKeyExpression, true)]) : itemIdProp && itemIdProp !== ITEM_IS_KEY ? t10.logicalExpression("??", buildOptionalMemberChain(t10.identifier(itemVar), itemIdProp), t10.identifier(itemVar)) : t10.callExpression(t10.identifier("String"), [t10.identifier(itemVar)]);
     {
       parts.push({ type: "string", value: html + ' data-gea-item-id="' });
       parts.push({ type: "expression", value: itemIdExpr });
@@ -5568,7 +5611,7 @@ function processChildren(children, parts, ctx, elementPath, dcCursor, directChil
         if (expressionMayBeFalsy(rawExpr)) {
           expr = t10.logicalExpression("||", expr, t10.stringLiteral(""));
         }
-        const skipEscape = childCallInfo || isChildrenPropAccess(rawExpr) || expressionContainsJSX(rawExpr) || ctx.inMapCallback;
+        const skipEscape = childCallInfo || isChildrenPropAccess(rawExpr) || expressionContainsJSX(rawExpr) || ctx.inMapCallback || callsJSXReturningProperty(rawExpr, ctx.classBody);
         const safeExpr = skipEscape ? expr : t10.callExpression(t10.identifier("__escapeHtml"), [
           t10.callExpression(t10.identifier("String"), [expr])
         ]);
@@ -5639,6 +5682,17 @@ import { appendToBody, id as id3, js as js2, jsMethod } from "eszter";
 import { createRequire as createRequire6 } from "module";
 var require7 = createRequire6(import.meta.url);
 var traverse6 = require7("@babel/traverse").default;
+function rewriteItemVarInExpression(expr, fromVar, toVar) {
+  if (fromVar === toVar) return expr;
+  const cloned = t11.cloneNode(expr, true);
+  traverse6(t11.program([t11.expressionStatement(cloned)]), {
+    noScope: true,
+    Identifier(path) {
+      if (path.node.name === fromVar) path.node.name = toVar;
+    }
+  });
+  return cloned;
+}
 var EVENT_NAMES2 = /* @__PURE__ */ new Set([
   "click",
   "dblclick",
@@ -5945,7 +5999,7 @@ function generatePatchItemMethod(arrayMap, templatePropNames, wholeParamName, te
       }
     }
   }
-  const rawItemIdExpr = itemIdProperty && itemIdProperty !== ITEM_IS_KEY ? t11.logicalExpression("??", buildOptionalMemberChain(t11.identifier("item"), itemIdProperty), t11.identifier("item")) : t11.identifier("item");
+  const rawItemIdExpr = arrayMap.keyExpression ? t11.cloneNode(rewriteItemVarInExpression(arrayMap.keyExpression, arrayMap.itemVariable, "item"), true) : itemIdProperty && itemIdProperty !== ITEM_IS_KEY ? t11.logicalExpression("??", buildOptionalMemberChain(t11.identifier("item"), itemIdProperty), t11.identifier("item")) : t11.identifier("item");
   const itemIdExpr = t11.callExpression(t11.identifier("String"), [rawItemIdExpr]);
   body.push(
     t11.expressionStatement(t11.assignmentExpression("=", t11.memberExpression(elVar, t11.identifier("__geaKey")), itemIdExpr))
@@ -6600,7 +6654,7 @@ function generateCreateItemMethod(arrayMap, templatePropNames, wholeParamName, t
       }
     }
   }
-  const rawPatchItemIdExpr = itemIdProperty && itemIdProperty !== ITEM_IS_KEY ? t11.logicalExpression("??", buildOptionalMemberChain(t11.identifier("item"), itemIdProperty), t11.identifier("item")) : t11.identifier("item");
+  const rawPatchItemIdExpr = arrayMap.keyExpression ? t11.cloneNode(rewriteItemVarInExpression(arrayMap.keyExpression, arrayMap.itemVariable, "item"), true) : itemIdProperty && itemIdProperty !== ITEM_IS_KEY ? t11.logicalExpression("??", buildOptionalMemberChain(t11.identifier("item"), itemIdProperty), t11.identifier("item")) : t11.identifier("item");
   const patchItemIdExpr = t11.callExpression(t11.identifier("String"), [rawPatchItemIdExpr]);
   body.push(
     t11.expressionStatement(
@@ -9564,7 +9618,8 @@ function generateRenderItemMethod(arrayMap, imports, eventHandlers, eventIdCount
     handlerPropsInMap,
     mapItemIdProperty: arrayMap.itemIdProperty || "id",
     mapItemVariable: arrayMap.itemVariable,
-    mapContainerBindingId: arrayMap.containerBindingId
+    mapContainerBindingId: arrayMap.containerBindingId,
+    ...arrayMap.keyExpression ? { mapKeyExpression: arrayMap.keyExpression } : {}
   };
   if (t18.isJSXFragment(modified)) {
     const err = new Error(
@@ -10232,6 +10287,16 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
       traverse12(ast, {
         ClassDeclaration(classPath) {
           if (!t20.isIdentifier(classPath.node.id) || classPath.node.id.name !== className) return;
+          let originalClassBody;
+          traverse12(originalAST, {
+            noScope: true,
+            ClassDeclaration(origClass) {
+              if (t20.isIdentifier(origClass.node.id) && origClass.node.id.name === className) {
+                originalClassBody = origClass.node.body;
+                origClass.stop();
+              }
+            }
+          });
           const templateMethod = classPath.node.body.body.find(
             (n) => t20.isClassMethod(n) && t20.isIdentifier(n.key) && n.key.name === "template"
           );
@@ -10382,7 +10447,8 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
                 t20.ifStatement(notTextNode, insertNewTextNode, updateExisting)
               ]);
             } else if (pb.type === "text") {
-              const targetProp = pb.propName === "children" ? "innerHTML" : "textContent";
+              const isHtmlProducing = pb.propName === "children" || pb.expression && originalClassBody && expressionCallsJSXReturningClassProp(pb.expression, originalClassBody);
+              const targetProp = isHtmlProducing ? "innerHTML" : "textContent";
               const assignStmt = t20.expressionStatement(
                 t20.assignmentExpression(
                   "=",
@@ -10390,7 +10456,7 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
                   t20.cloneNode(valueExpr, true)
                 )
               );
-              const consequent = pb.propName === "children" ? t20.blockStatement([
+              const consequent = isHtmlProducing ? t20.blockStatement([
                 assignStmt,
                 // After replacing innerHTML for children, re-initialize child
                 // components that were created from the new HTML string.
@@ -11058,6 +11124,7 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
               itemTemplate: um.itemTemplate,
               isImportedState: false,
               itemIdProperty: um.itemIdProperty,
+              ...um.keyExpression ? { keyExpression: um.keyExpression } : {},
               ...um.callbackBodyStatements?.length ? { callbackBodyStatements: um.callbackBodyStatements } : {}
             };
             unresolvedBindings.push({ info: um, binding: syntheticBinding });
@@ -11077,6 +11144,7 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
             mapItemAttrInfos.push({
               itemVariable: um.itemVariable,
               itemIdProperty: um.itemIdProperty,
+              ...um.keyExpression ? { keyExpression: um.keyExpression } : {},
               containerBindingId: um.containerBindingId,
               eventToken: tokenMatch ? tokenMatch[1] : void 0
             });
@@ -11849,6 +11917,7 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
               itemVariable: arrayMap.itemVariable,
               ...arrayMap.indexVariable ? { indexVariable: arrayMap.indexVariable } : {},
               itemIdProperty: arrayMap.itemIdProperty,
+              ...arrayMap.keyExpression ? { keyExpression: arrayMap.keyExpression } : {},
               containerElementPath: arrayMap.containerElementPath,
               containerBindingId: arrayMap.containerBindingId,
               computationExpr: computationExprSafe ?? computationExpr
@@ -12668,7 +12737,19 @@ function generateMapRegistration(arrayMap, unresolvedMap, templatePropNames, who
       )
     )
   ];
-  if (arrayMap.itemIdProperty && arrayMap.itemIdProperty !== ITEM_IS_KEY) {
+  if (unresolvedMap.keyExpression) {
+    const keyExpr = t20.cloneNode(unresolvedMap.keyExpression, true);
+    const itemVar = unresolvedMap.itemVariable;
+    traverse12(t20.program([t20.expressionStatement(keyExpr)]), {
+      noScope: true,
+      Identifier(path) {
+        if (path.node.name === itemVar) path.node.name = "__k";
+      }
+    });
+    registerArgs.push(
+      t20.arrowFunctionExpression([t20.identifier("__k")], t20.callExpression(t20.identifier("String"), [keyExpr]))
+    );
+  } else if (arrayMap.itemIdProperty && arrayMap.itemIdProperty !== ITEM_IS_KEY) {
     registerArgs.push(t20.stringLiteral(arrayMap.itemIdProperty));
   }
   return t20.expressionStatement(
@@ -13213,6 +13294,44 @@ function getTemplateParamIdentifier(classBody2) {
   const binding = templateMethod ? getTemplateParamBinding(templateMethod.params[0]) : void 0;
   return t20.isIdentifier(binding) ? binding.name : void 0;
 }
+function expressionCallsJSXReturningClassProp(expr, classBody2) {
+  if (!t20.isCallExpression(expr)) return false;
+  let propName;
+  if (t20.isMemberExpression(expr.callee) && t20.isIdentifier(expr.callee.property) && !expr.callee.computed) {
+    propName = expr.callee.property.name;
+  }
+  if (!propName) return false;
+  const scanValue = (node) => {
+    if (t20.isObjectExpression(node)) {
+      for (const prop of node.properties) {
+        if (t20.isObjectProperty(prop) && t20.isIdentifier(prop.key) && prop.key.name === propName && (t20.isArrowFunctionExpression(prop.value) || t20.isFunctionExpression(prop.value))) {
+          let found = false;
+          const check = (n) => {
+            if (found) return;
+            if (t20.isJSXElement(n) || t20.isJSXFragment(n)) {
+              found = true;
+              return;
+            }
+            for (const key of t20.VISITOR_KEYS[n.type] || []) {
+              const child = n[key];
+              if (Array.isArray(child)) child.forEach((c) => c && typeof c === "object" && "type" in c && check(c));
+              else if (child && typeof child === "object" && "type" in child) check(child);
+              if (found) return;
+            }
+          };
+          check(prop.value);
+          return found;
+        }
+      }
+    }
+    if (t20.isArrayExpression(node)) return node.elements.some((el) => el != null && scanValue(el));
+    return false;
+  };
+  for (const member of classBody2.body) {
+    if (t20.isClassProperty(member) && member.value && scanValue(member.value)) return true;
+  }
+  return false;
+}
 function collectPropNamesFromItemTemplate(itemTemplate, templatePropNames) {
   if (!itemTemplate) return [];
   const used = /* @__PURE__ */ new Set();
@@ -13297,7 +13416,7 @@ function injectMapItemAttrsIntoTemplate(templateMethod, mapInfos) {
       const tagName = tagPart.slice(1).toLowerCase();
       const isIntrinsicRoot = !tagName.includes("-");
       const eventAttr = info.eventToken && isIntrinsicRoot ? ` data-gea-event="${info.eventToken}"` : "";
-      const itemIdExpr = info.itemIdProperty && info.itemIdProperty !== ITEM_IS_KEY ? t20.logicalExpression(
+      const itemIdExpr = info.keyExpression ? t20.callExpression(t20.identifier("String"), [t20.cloneNode(info.keyExpression, true)]) : info.itemIdProperty && info.itemIdProperty !== ITEM_IS_KEY ? t20.logicalExpression(
         "??",
         buildOptionalMemberChain(t20.identifier(info.itemVariable), info.itemIdProperty),
         t20.identifier(info.itemVariable)
@@ -13877,6 +13996,7 @@ function transformComponentFile(ast, imports, storeImports, className, sourceFil
           earlyReturnBarrierIndex: analysis.earlyReturnBarrierIndex
         },
         sourceFile,
+        classBody: classBody2,
         isRoot: true,
         conditionalSlots: conditionalSlotInfos,
         conditionalSlotCursor: { value: 0 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geajs/vite-plugin",
-  "version": "1.0.23",
+  "version": "1.0.26",
   "description": "Vite plugin for Gea framework - JSX/TSX transform, reactivity, HMR",
   "type": "module",
   "main": "./dist/index.js",