@geajs/vite-plugin 1.0.0 → 1.0.2

package/dist/index.js

@@ -1766,7 +1766,10 @@ function collectTextChildren(node, stateRefs, stateProps) {
   return { textTemplate, textExpressions, shouldBuildTextTemplate };
 }
 function analyzeChildren(node, tagName, elementPath, bindings, propBindings, arrayMaps, stateProps, stateRefs, textTemplate, textExpressions, shouldBuildTextTemplate, walk, onUnresolvedMap, classBody2, propsParamName, destructuredPropNames, templateSetupContext, rerenderPropNames, rerenderConditions, conditionalSlots) {
-  node.children.forEach((child, index) => {
+  const directChildren = getDirectChildElements(node.children);
+  let directChildCursor = 0;
+  for (let index = 0; index < node.children.length; index++) {
+    const child = node.children[index];
     if (t7.isJSXExpressionContainer(child) && !t7.isJSXEmptyExpression(child.expression)) {
       const expr = child.expression;
       if (isMapCall(expr)) {
@@ -1822,11 +1825,14 @@ function analyzeChildren(node, tagName, elementPath, bindings, propBindings, arr
           hasNestedMapCall
         );
       }
+    } else if (t7.isJSXElement(child)) {
+      const seg = directChildren[directChildCursor]?.selectorSegment;
+      directChildCursor++;
+      walk(child, seg ? [...elementPath, seg] : elementPath);
+    } else if (t7.isJSXFragment(child)) {
+      walk(child, elementPath);
     }
-  });
-  getDirectChildElements(node.children).forEach((child) => {
-    walk(child.node, [...elementPath, child.selectorSegment]);
-  });
+  }
 }
 function isMapCall(expr) {
   return t7.isCallExpression(expr) && t7.isMemberExpression(expr.callee) && t7.isIdentifier(expr.callee.property) && expr.callee.property.name === "map";
@@ -2896,23 +2902,22 @@ function transformJSXExpression(expr, ctx, skipEvents = false) {
     return expr;
   }
 }
-function collectComponentTags(node, imports, instanceTags, registrationTags, registrationOnly = false) {
-  const allTags = registrationTags || new Set(instanceTags);
-  const visitExpr = (expr, inMapCallback = false) => {
-    if (t9.isJSXElement(expr)) collectComponentTags(expr, imports, instanceTags, allTags, inMapCallback);
-    else if (t9.isJSXFragment(expr)) collectComponentTags(expr, imports, instanceTags, allTags, inMapCallback);
+function collectComponentTags(node, imports, instanceTags, inMapCallback = false) {
+  const visitExpr = (expr, inMap = false) => {
+    if (t9.isJSXElement(expr)) collectComponentTags(expr, imports, instanceTags, inMap);
+    else if (t9.isJSXFragment(expr)) collectComponentTags(expr, imports, instanceTags, inMap);
     else if (t9.isLogicalExpression(expr)) {
-      visitExpr(expr.left, inMapCallback);
-      visitExpr(expr.right, inMapCallback);
+      visitExpr(expr.left, inMap);
+      visitExpr(expr.right, inMap);
     } else if (t9.isConditionalExpression(expr)) {
-      visitExpr(expr.consequent, inMapCallback);
-      visitExpr(expr.alternate, inMapCallback);
+      visitExpr(expr.consequent, inMap);
+      visitExpr(expr.alternate, inMap);
     } else if (t9.isCallExpression(expr)) {
       expr.arguments.forEach((arg) => {
         if (!t9.isArrowFunctionExpression(arg) && !t9.isFunctionExpression(arg)) return;
         const body = arg.body;
-        if (t9.isJSXElement(body)) collectComponentTags(body, imports, instanceTags, allTags, true);
-        else if (t9.isJSXFragment(body)) collectComponentTags(body, imports, instanceTags, allTags, true);
+        if (t9.isJSXElement(body)) collectComponentTags(body, imports, instanceTags, true);
+        else if (t9.isJSXFragment(body)) collectComponentTags(body, imports, instanceTags, true);
         else if (t9.isBlockStatement(body)) {
           const ret = body.body.find((s) => t9.isReturnStatement(s) && s.argument != null);
           if (ret?.argument) visitExpr(ret.argument, true);
@@ -2923,28 +2928,27 @@ function collectComponentTags(node, imports, instanceTags, registrationTags, reg
   if (t9.isJSXElement(node)) {
     const tag = getJSXTagName(node.openingElement.name);
     if (tag && isComponentTag(tag) && imports.has(tag)) {
-      allTags.add(tag);
-      if (!registrationOnly) instanceTags.push(tag);
+      if (!inMapCallback) instanceTags.push(tag);
     }
     node.children.forEach((c) => {
-      if (t9.isJSXElement(c)) collectComponentTags(c, imports, instanceTags, allTags, registrationOnly);
-      else if (t9.isJSXFragment(c)) collectComponentTags(c, imports, instanceTags, allTags, registrationOnly);
+      if (t9.isJSXElement(c)) collectComponentTags(c, imports, instanceTags, inMapCallback);
+      else if (t9.isJSXFragment(c)) collectComponentTags(c, imports, instanceTags, inMapCallback);
       else if (t9.isJSXExpressionContainer(c) && !t9.isJSXEmptyExpression(c.expression)) {
         const expr = c.expression;
-        if (t9.isJSXElement(expr)) collectComponentTags(expr, imports, instanceTags, allTags, registrationOnly);
-        else if (t9.isJSXFragment(expr)) collectComponentTags(expr, imports, instanceTags, allTags, registrationOnly);
-        else visitExpr(expr, registrationOnly);
+        if (t9.isJSXElement(expr)) collectComponentTags(expr, imports, instanceTags, inMapCallback);
+        else if (t9.isJSXFragment(expr)) collectComponentTags(expr, imports, instanceTags, inMapCallback);
+        else visitExpr(expr, inMapCallback);
       }
     });
   } else {
     node.children.forEach((c) => {
-      if (t9.isJSXElement(c)) collectComponentTags(c, imports, instanceTags, allTags, registrationOnly);
-      else if (t9.isJSXFragment(c)) collectComponentTags(c, imports, instanceTags, allTags, registrationOnly);
+      if (t9.isJSXElement(c)) collectComponentTags(c, imports, instanceTags, inMapCallback);
+      else if (t9.isJSXFragment(c)) collectComponentTags(c, imports, instanceTags, inMapCallback);
       else if (t9.isJSXExpressionContainer(c) && !t9.isJSXEmptyExpression(c.expression)) {
         const expr = c.expression;
-        if (t9.isJSXElement(expr)) collectComponentTags(expr, imports, instanceTags, allTags, registrationOnly);
-        else if (t9.isJSXFragment(expr)) collectComponentTags(expr, imports, instanceTags, allTags, registrationOnly);
-        else visitExpr(expr, registrationOnly);
+        if (t9.isJSXElement(expr)) collectComponentTags(expr, imports, instanceTags, inMapCallback);
+        else if (t9.isJSXFragment(expr)) collectComponentTags(expr, imports, instanceTags, inMapCallback);
+        else visitExpr(expr, inMapCallback);
       }
     });
   }
@@ -3006,6 +3010,27 @@ function processElement(node, parts, ctx, elementPath = []) {
       return;
     }
   }
+  if (isComp && (!ctx.inMapCallback || elementPath.length > 0)) {
+    const propsEntries = [];
+    for (const attr of node.openingElement.attributes) {
+      if (!t9.isJSXAttribute(attr) || !t9.isJSXIdentifier(attr.name)) continue;
+      const name = attr.name.name;
+      if (name === "key") continue;
+      let value;
+      if (attr.value === null) value = t9.booleanLiteral(true);
+      else if (t9.isStringLiteral(attr.value)) value = attr.value;
+      else if (t9.isJSXExpressionContainer(attr.value) && !t9.isJSXEmptyExpression(attr.value.expression))
+        value = attr.value.expression;
+      else continue;
+      propsEntries.push(t9.objectProperty(t9.identifier(name), value));
+    }
+    pushString(parts, "");
+    parts.push({
+      type: "expression",
+      value: t9.newExpression(t9.identifier(tagName), [t9.objectExpression(propsEntries)])
+    });
+    return;
+  }
   const effectiveTag = isComp ? pascalToKebabCase(tagName) : tagName;
   const propContext = getPropContext(ctx.templateSetupContext?.params);
   const rootClassSelector = elementPath.length === 0 ? getRootClassSelector(node) : null;
@@ -3834,12 +3859,62 @@ function getPropsBuilderMethodName(child) {
 function getEnsureChildMethodName(child) {
   return `__ensureChild_${child.instanceVar.replace(/^_/, "")}`;
 }
+function collectBindingNames(stmt) {
+  if (t11.isVariableDeclaration(stmt)) {
+    const names = [];
+    const collect = (node) => {
+      if (t11.isIdentifier(node)) names.push(node.name);
+      else if (t11.isObjectPattern(node))
+        node.properties.forEach(
+          (p) => collect(t11.isRestElement(p) ? p.argument : p.value)
+        );
+      else if (t11.isArrayPattern(node)) node.elements.forEach((e) => e && collect(e));
+    };
+    stmt.declarations.forEach((d) => collect(d.id));
+    return names;
+  }
+  return [];
+}
+function collectTestIdentifiers(node) {
+  const names = /* @__PURE__ */ new Set();
+  const visit = (n) => {
+    if (t11.isIdentifier(n)) names.add(n.name);
+    for (const key of t11.VISITOR_KEYS[n.type] || []) {
+      const child = n[key];
+      if (Array.isArray(child)) child.forEach((c) => c?.type && visit(c));
+      else if (child?.type) visit(child);
+    }
+  };
+  visit(node);
+  return names;
+}
 function buildPropsBuilderMethod(child) {
-  const setupStmts = (child.setupStatements || []).map(
-    (statement) => t11.cloneNode(statement, true)
-  );
+  const propsStmtClones = (child.setupStatements || []).map((statement) => t11.cloneNode(statement, true));
   const returnStmt = t11.returnStatement(t11.cloneNode(child.propsExpression, true));
-  const prunedSetup = pruneUnusedSetupDestructuring(setupStmts, [returnStmt]);
+  const propsIdentifiers = collectTestIdentifiers(returnStmt);
+  for (const stmt of propsStmtClones) {
+    for (const name of collectTestIdentifiers(stmt)) propsIdentifiers.add(name);
+  }
+  const relevantGuards = (child.earlyReturnGuards || []).filter((guard) => {
+    const testRefs = collectTestIdentifiers(guard.test);
+    return [...testRefs].some((name) => propsIdentifiers.has(name));
+  });
+  const existingBindings = new Set(propsStmtClones.flatMap(collectBindingNames));
+  const guardStmtClones = relevantGuards.length > 0 ? (child.guardSetupStatements || []).filter((s) => !collectBindingNames(s).every((n) => existingBindings.has(n))).map((s) => t11.cloneNode(s, true)) : [];
+  const setupStmts = [...guardStmtClones, ...propsStmtClones];
+  const guardNodes = relevantGuards.map((g) => g.test);
+  const prunedSetup = pruneUnusedSetupDestructuring(setupStmts, [returnStmt, ...guardNodes]);
+  for (const guard of relevantGuards) {
+    const guardStmt = t11.ifStatement(t11.cloneNode(guard.test, true), t11.returnStatement(t11.objectExpression([])));
+    const testRefs = collectTestIdentifiers(guard.test);
+    let insertIndex = 0;
+    for (let i = 0; i < prunedSetup.length; i++) {
+      if (collectBindingNames(prunedSetup[i]).some((name) => testRefs.has(name))) {
+        insertIndex = i + 1;
+      }
+    }
+    prunedSetup.splice(insertIndex, 0, guardStmt);
+  }
   return appendToBody(jsMethod2`${id4(getPropsBuilderMethodName(child))}() {}`, ...prunedSetup, returnStmt);
 }
 function buildEnsureMethod(child) {
@@ -4328,7 +4403,7 @@ function hoistStoreReads(entries, storeVar) {
   }));
   return { hoists: Array.from(hoistMap.values()), patchedEntries };
 }
-function generateCreateItemMethod(arrayMap) {
+function generateCreateItemMethod(arrayMap, templatePropNames, wholeParamName) {
   if (!arrayMap.itemTemplate) return null;
   const arrayPath = pathPartsToString(arrayMap.arrayPathParts || normalizePathParts(arrayMap.arrayPath || ""));
   const arrayName = arrayPath.replace(/\./g, "");
@@ -4337,7 +4412,18 @@ function generateCreateItemMethod(arrayMap) {
   const renderMethodName = `render${capName}Item`;
   const containerProp = `__${arrayPath.replace(/\./g, "_")}_container`;
   const itemIdProperty = arrayMap.itemIdProperty;
-  const { entries, requiresRerender } = collectPatchEntries(arrayMap);
+  let { entries, requiresRerender } = collectPatchEntries(arrayMap);
+  const propNames = templatePropNames ?? /* @__PURE__ */ new Set();
+  if (propNames.size > 0 || wholeParamName) {
+    entries = entries.map((e) => ({
+      ...e,
+      expression: replacePropRefsInExpression(
+        t14.cloneNode(e.expression, true),
+        propNames,
+        wholeParamName
+      )
+    }));
+  }
   if (requiresRerender) {
     const createMethod = jsMethod4`${id7(methodName)}(item) {}`;
     if (arrayMap.indexVariable) createMethod.params.push(t14.identifier("__idx"));
@@ -5448,7 +5534,6 @@ function generateRenderItemMethod(arrayMap, imports, eventHandlers, eventIdCount
     ctx.mapRootEventToken
   );
   const methodName = `render${arrayPath.charAt(0).toUpperCase() + arrayPath.slice(1).replace(/\./g, "")}Item`;
-  wrapped.expressions = wrapped.expressions.map((expr) => unwrapComparisonOperands(expr));
   const propNames = /* @__PURE__ */ new Set();
   let wholeParam;
   if (classBody2) {
@@ -5464,6 +5549,9 @@ function generateRenderItemMethod(arrayMap, imports, eventHandlers, eventIdCount
       wholeParam = templateMethod.params[0].name;
     }
   }
+  wrapped.expressions = wrapped.expressions.map(
+    (expr) => replacePropRefsInExpression(unwrapComparisonOperands(expr), propNames, wholeParam)
+  );
   const handlerRegStmts = buildHandlerRegistrationStatements(
     handlerPropsInMap,
     arrayMap.itemVariable,
@@ -5498,7 +5586,7 @@ function generateRenderItemMethod(arrayMap, imports, eventHandlers, eventIdCount
 }
 function insertItemMarker(tl, itemVar, itemIdProperty, containerBindingId, eventToken) {
   const first = tl.quasis[0].value.raw;
-  const tagMatch = first.match(/^(<\w+)(\s|>)/);
+  const tagMatch = first.match(/^(<[\w-]+)(\s|>)/);
   let rewrittenFirst;
   const itemIdExpr = itemIdProperty ? t16.memberExpression(t16.identifier(itemVar), t16.identifier(itemIdProperty)) : t16.callExpression(t16.identifier("String"), [t16.identifier(itemVar)]);
   if (tagMatch) {
@@ -5508,17 +5596,17 @@ function insertItemMarker(tl, itemVar, itemIdProperty, containerBindingId, event
       rewrittenFirst = `${tagMatch[1]} data-gea-item-id="`;
     }
   } else {
-    const nameMatch = first.match(/^<(\w+)/);
+    const nameMatch = first.match(/^<([\w-]+)/);
     if (containerBindingId) {
       rewrittenFirst = nameMatch ? `${nameMatch[0]} id="` : first;
     } else {
       rewrittenFirst = nameMatch ? `${nameMatch[0]} data-gea-item-id="` : first;
     }
   }
-  if (!tagMatch && !first.match(/^<(\w+)/)) {
+  if (!tagMatch && !first.match(/^<([\w-]+)/)) {
     return tl;
   }
-  const remainder = (tagMatch ? first.substring(tagMatch[1].length) : first.substring(first.match(/^<(\w+)/)[0].length)) || "";
+  const remainder = (tagMatch ? first.substring(tagMatch[1].length) : first.substring(first.match(/^<([\w-]+)/)[0].length)) || "";
   const eventAttr = eventToken ? ` data-gea-event="${eventToken}"` : "";
   if (containerBindingId) {
     const idValueExpr = t16.binaryExpression(
@@ -5577,7 +5665,7 @@ function getComponentArrayBuildMethodName(arrayPropName) {
 function getComponentArrayRefreshMethodName(arrayPropName) {
   return `__refresh${getArrayCapName2(arrayPropName)}Items`;
 }
-function generateComponentArrayMethods(um, arrayPropName, imports, propNames, _classBody, storeArrayAccess, wholeParamName) {
+function generateComponentArrayMethods(um, arrayPropName, imports, propNames, _classBody, storeArrayAccess, wholeParamName, templateSetupContext) {
   const comp = isUnresolvedMapWithComponentChild(um, imports);
   if (!comp) return [];
   const itemTemplate = um.itemTemplate;
@@ -5600,7 +5688,7 @@ function generateComponentArrayMethods(um, arrayPropName, imports, propNames, _c
     /* @__PURE__ */ new Map(),
     void 0,
     void 0,
-    void 0,
+    templateSetupContext,
     transformExpr,
     transformFrag
   );
@@ -5662,8 +5750,9 @@ function generateComponentArrayMethods(um, arrayPropName, imports, propNames, _c
   const itemPropsCall = t17.callExpression(t17.memberExpression(t17.thisExpression(), t17.identifier(itemPropsMethodName)), [
     t17.identifier("opt")
   ]);
+  const itemPropsSetup = collectTemplateSetupStatements(finalPropsExpr, templateSetupContext);
   const itemPropsMethod = jsMethod7`${id10(itemPropsMethodName)}(opt) {}`;
-  itemPropsMethod.body.body.push(t17.returnStatement(finalPropsExpr));
+  itemPropsMethod.body.body.push(...itemPropsSetup, t17.returnStatement(finalPropsExpr));
   const buildMethod = jsMethod7`${id10(buildMethodName)}() {}`;
   buildMethod.body.body.push(
     ...arrSetupStatements,
@@ -6114,6 +6203,18 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
                 }
               }
               const propNames = getTemplatePropNames(classPath.node.body);
+              const tmplBody = templateMethod?.body.body ?? [];
+              let tmplReturnIdx = -1;
+              for (let ri = tmplBody.length - 1; ri >= 0; ri--) {
+                if (t18.isReturnStatement(tmplBody[ri])) {
+                  tmplReturnIdx = ri;
+                  break;
+                }
+              }
+              const tmplSetupCtx = templateMethod ? {
+                params: templateMethod.params,
+                statements: tmplReturnIdx >= 0 ? tmplBody.slice(0, tmplReturnIdx) : []
+              } : void 0;
               const methods = generateComponentArrayMethods(
                 um,
                 arrayPropName,
@@ -6121,7 +6222,8 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
                 propNames,
                 classPath.node.body,
                 storeArrayAccess,
-                getTemplateParamIdentifier(classPath.node.body)
+                getTemplateParamIdentifier(classPath.node.body),
+                tmplSetupCtx
               );
               if (methods.length > 0 && templateMethod) {
                 methods.forEach((method2) => classPath.node.body.body.push(method2));
@@ -6226,7 +6328,7 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
               classPath.node.body.body.push(method);
               applied = true;
             }
-            const createMethod = generateCreateItemMethod(syntheticBinding);
+            const createMethod = generateCreateItemMethod(syntheticBinding, templatePropNames, templateWholeParam);
             if (createMethod) classPath.node.body.body.push(createMethod);
             if (handlerPropsInMap.length > 0 && um.computationExpr) {
               if (arrayPropName) {
@@ -6350,10 +6452,29 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
           const ownClassMethodNames = new Set(
             classPath.node.body.body.filter((m) => t18.isClassMethod(m) && t18.isIdentifier(m.key)).map((m) => m.key.name)
           );
+          const componentGetterStoreDeps = /* @__PURE__ */ new Map();
+          for (const member of classPath.node.body.body) {
+            if (!t18.isClassMethod(member) || member.kind !== "get" || !t18.isIdentifier(member.key)) continue;
+            const deps = [];
+            const program9 = t18.program(member.body.body.map((s) => t18.cloneNode(s, true)));
+            traverse10(program9, {
+              noScope: true,
+              MemberExpression(mePath) {
+                if (!t18.isIdentifier(mePath.node.object)) return;
+                const objName = mePath.node.object.name;
+                const ref = stateRefs.get(objName);
+                if (!ref || ref.kind !== "imported") return;
+                if (!t18.isIdentifier(mePath.node.property)) return;
+                deps.push({ storeVar: objName, pathParts: [mePath.node.property.name] });
+              }
+            });
+            if (deps.length > 0) componentGetterStoreDeps.set(member.key.name, deps);
+          }
           for (const [observeKey, propPath] of stateProps) {
             const { storeVar } = parseObserveKey(observeKey);
             if (hasOnPropChange && !storeVar && propPath[0] === "props") continue;
-            if (!storeVar && propPath.length === 1 && ownClassMethodNames.has(propPath[0])) continue;
+            if (!storeVar && propPath.length === 1 && ownClassMethodNames.has(propPath[0]) && !componentGetterStoreDeps.has(propPath[0]))
+              continue;
             const alreadyHandled = handledPaths.has(observeKey);
             const conditionalSlotIndices = conditionalSlotObserveIndices.get(observeKey) || [];
             const arrayHandled = analysis.arrayMaps.some(
@@ -6568,7 +6689,7 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
               replaceInlineMapWithRenderCall(classPath, arrayMap, renderMethodName);
               replaceMapInConditionalSlots(analysis.conditionalSlots || [], arrayMap, renderMethodName);
             }
-            const createMethod = generateCreateItemMethod(arrayMap);
+            const createMethod = generateCreateItemMethod(arrayMap, templatePropNames, templateWholeParam);
             if (createMethod) {
               classPath.node.body.body.push(createMethod);
             }
@@ -6585,7 +6706,8 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
               classPath.node.body,
               analysis.conditionalSlots,
               templatePropNames2,
-              getTemplateParamIdentifier(classPath.node.body)
+              getTemplateParamIdentifier(classPath.node.body),
+              getTemplateSetupContext(classPath.node.body)
             );
           }
           if (analysis.arrayMaps.length > 0) {
@@ -6617,7 +6739,43 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
               const { parts, storeVar } = parseObserveKey(observeKey);
               if (!storeVar) {
                 if (hasOnPropChange && parts[0] === "props") return;
-                if (parts.length === 1 && ownClassMethodNames.has(parts[0])) return;
+                if (parts.length === 1 && ownClassMethodNames.has(parts[0])) {
+                  const compGetterDeps = componentGetterStoreDeps.get(parts[0]);
+                  if (compGetterDeps && compGetterDeps.length > 0) {
+                    const originalMethodName = getObserveMethodName(parts);
+                    const wrapperMethodName = `${originalMethodName}__via`;
+                    if (!classPath.node.body.body.some(
+                      (m) => t18.isClassMethod(m) && t18.isIdentifier(m.key) && m.key.name === wrapperMethodName
+                    )) {
+                      classPath.node.body.body.push(
+                        t18.classMethod(
+                          "method",
+                          t18.identifier(wrapperMethodName),
+                          [t18.identifier("_v"), t18.identifier("change")],
+                          t18.blockStatement([
+                            t18.expressionStatement(
+                              t18.callExpression(
+                                t18.memberExpression(t18.thisExpression(), t18.identifier(originalMethodName)),
+                                [
+                                  t18.memberExpression(t18.thisExpression(), t18.identifier(parts[0])),
+                                  t18.identifier("change")
+                                ]
+                              )
+                            )
+                          ])
+                        )
+                      );
+                    }
+                    for (const dep of compGetterDeps) {
+                      const depKey = buildObserveKey(dep.pathParts, dep.storeVar) + `__getter_${parts[0]}`;
+                      ensureStoreGroup(dep.storeVar).observeHandlers.set(depKey, {
+                        pathParts: dep.pathParts,
+                        methodName: wrapperMethodName
+                      });
+                    }
+                  }
+                  return;
+                }
                 localObserveHandlers.set(observeKey, { pathParts: parts, methodName: getObserveMethodName(parts) });
                 return;
               }
@@ -6637,13 +6795,10 @@ function applyStaticReactivity(ast, originalAST, className, sourceFile, imports,
                         [t18.identifier("_v"), t18.identifier("change")],
                         t18.blockStatement([
                           t18.expressionStatement(
-                            t18.callExpression(
-                              t18.memberExpression(t18.thisExpression(), t18.identifier(originalMethodName)),
-                              [
-                                t18.memberExpression(t18.identifier(storeVar), t18.identifier(parts[0])),
-                                t18.identifier("change")
-                              ]
-                            )
+                            t18.callExpression(t18.memberExpression(t18.thisExpression(), t18.identifier(originalMethodName)), [
+                              t18.memberExpression(t18.identifier(storeVar), t18.identifier(parts[0])),
+                              t18.identifier("change")
+                            ])
                           )
                         ])
                       )
@@ -7288,7 +7443,7 @@ function mergeKeyGuards(stmts) {
   }
   return result;
 }
-function generateConditionalPatchMethods(classBody2, slots, templatePropNames, wholeParamName) {
+function generateConditionalPatchMethods(classBody2, slots, templatePropNames, wholeParamName, templateSetupContext) {
   const seenVarNames = /* @__PURE__ */ new Set();
   const allSetupStatements = [];
   for (const slot of slots) {
@@ -7344,10 +7499,13 @@ function generateConditionalPatchMethods(classBody2, slots, templatePropNames, w
     const buildHtmlFn = (htmlExpr) => {
       if (!htmlExpr) return t18.nullLiteral();
       const clonedHtmlExpr = rpExpr(t18.cloneNode(htmlExpr, true));
-      const htmlSetup = pruneDeadParamDestructuring(
+      const fromTemplate = templateSetupContext != null ? collectTemplateSetupStatements(clonedHtmlExpr, templateSetupContext) : [];
+      const fromSlotsOnly = pruneDeadParamDestructuring(
         rpStmts(allSetupStatements.map((s) => t18.cloneNode(s, true))),
         [clonedHtmlExpr]
       );
+      const htmlSetupRaw = fromTemplate.length > 0 ? fromTemplate : fromSlotsOnly;
+      const htmlSetup = rpStmts(htmlSetupRaw.map((s) => t18.cloneNode(s, true)));
       if (htmlSetup.length > 0) {
         return t18.arrowFunctionExpression([], t18.blockStatement([...htmlSetup, t18.returnStatement(clonedHtmlExpr)]));
       }
@@ -7389,6 +7547,20 @@ function getTemplateParamIdentifier(classBody2) {
   if (t18.isTSParameterProperty(p) && t18.isIdentifier(p.parameter)) return p.parameter.name;
   return void 0;
 }
+function getTemplateSetupContext(classBody2) {
+  const templateMethod = classBody2.body.find(
+    (m) => t18.isClassMethod(m) && t18.isIdentifier(m.key) && m.key.name === "template"
+  );
+  if (!templateMethod?.body || !t18.isBlockStatement(templateMethod.body)) return void 0;
+  const retIdx = templateMethod.body.body.findIndex((s) => t18.isReturnStatement(s) && s.argument != null);
+  if (retIdx < 0) return void 0;
+  return {
+    params: templateMethod.params.filter(
+      (param) => !t18.isTSParameterProperty(param)
+    ),
+    statements: templateMethod.body.body.slice(0, retIdx)
+  };
+}
 function collectPropNamesFromItemTemplate(itemTemplate, templatePropNames) {
   if (!itemTemplate) return [];
   const used = /* @__PURE__ */ new Set();
@@ -7444,7 +7616,7 @@ function injectMapItemAttrsIntoTemplate(templateMethod, mapInfos) {
       const rootTL = findRootTemplateLiteral(t18.isBlockStatement(fn.body) ? fn.body : fn.body);
       if (!rootTL) return;
       const first = rootTL.quasis[0].value.raw;
-      const tagMatch = first.match(/^(<\w+)/);
+      const tagMatch = first.match(/^(<[\w-]+)/);
       if (!tagMatch) return;
       const tagPart = tagMatch[1];
       const remainder = first.substring(tagPart.length);
@@ -7884,7 +8056,7 @@ function analyzeStoreGetters(sourceFile, storeImports) {
 import { createRequire as createRequire13 } from "module";
 var require14 = createRequire13(import.meta.url);
 var traverse12 = require14("@babel/traverse").default;
-function transformComponentFile(ast, imports, storeImports, className, sourceFile, originalAST, compImportsUsedAsTags) {
+function transformComponentFile(ast, imports, storeImports, className, sourceFile, originalAST, compImportsUsedAsTags, knownComponentImports = /* @__PURE__ */ new Set()) {
   let transformed = false;
   const stateRefs = collectStateReferences(originalAST, storeImports);
   const storeGetterDeps = analyzeStoreGetters(sourceFile, storeImports);
@@ -7912,12 +8084,10 @@ function transformComponentFile(ast, imports, storeImports, className, sourceFil
       const body = path.node.body.body;
       const retStmt = body.find((s) => t20.isReturnStatement(s) && s.argument !== null);
       if (!retStmt?.argument) return;
+      const allComponentTags = new Set(knownComponentImports);
       const instanceTags = [];
-      const allComponentTags = /* @__PURE__ */ new Set();
-      if (t20.isJSXElement(retStmt.argument))
-        collectComponentTags(retStmt.argument, imports, instanceTags, allComponentTags);
-      else if (t20.isJSXFragment(retStmt.argument))
-        collectComponentTags(retStmt.argument, imports, instanceTags, allComponentTags);
+      if (t20.isJSXElement(retStmt.argument)) collectComponentTags(retStmt.argument, imports, instanceTags);
+      else if (t20.isJSXFragment(retStmt.argument)) collectComponentTags(retStmt.argument, imports, instanceTags);
       const componentInstances = /* @__PURE__ */ new Map();
       const tagCounts = /* @__PURE__ */ new Map();
       instanceTags.forEach((tag, dfsIndex) => {
@@ -8027,10 +8197,11 @@ function transformComponentFile(ast, imports, storeImports, className, sourceFil
           transformed = appendCompiledEventMethods(earlyClassPath.node.body, earlyReturnCtx.eventHandlers, []) || transformed;
         }
       }
-      for (let i = 0; i < conditionalSlotInfos.length; i++) {
-        if (analysis.conditionalSlots[i]) {
-          analysis.conditionalSlots[i].truthyHtmlExpr = conditionalSlotInfos[i].truthyHtmlExpr;
-          analysis.conditionalSlots[i].falsyHtmlExpr = conditionalSlotInfos[i].falsyHtmlExpr;
+      for (const info of conditionalSlotInfos) {
+        const slot = analysis.conditionalSlots.find((s) => s.slotId === info.slotId);
+        if (slot) {
+          slot.truthyHtmlExpr = info.truthyHtmlExpr;
+          slot.falsyHtmlExpr = info.falsyHtmlExpr;
         }
       }
       if (stateChildSlots.length > 0) {
@@ -8063,10 +8234,46 @@ function transformComponentFile(ast, imports, storeImports, className, sourceFil
             }
           }
         }
+        const preReturnStmts = returnIndex >= 0 ? body.slice(0, returnIndex) : [];
+        const earlyReturnGuards = preReturnStmts.filter(
+          (s) => t20.isIfStatement(s) && (t20.isReturnStatement(s.consequent) || t20.isBlockStatement(s.consequent) && s.consequent.body.some((b) => t20.isReturnStatement(b)), true)
+        );
+        let guardSetupStatements = [];
+        if (earlyReturnGuards.length > 0) {
+          const guardIdents = /* @__PURE__ */ new Set();
+          for (const guard of earlyReturnGuards) {
+            const walk = (node) => {
+              if (t20.isIdentifier(node)) guardIdents.add(node.name);
+              for (const key of t20.VISITOR_KEYS[node.type] || []) {
+                const child = node[key];
+                if (Array.isArray(child)) child.forEach((c) => c?.type && walk(c));
+                else if (child?.type) walk(child);
+              }
+            };
+            walk(guard.test);
+          }
+          const declBindsGuardIdent = (pattern) => {
+            if (t20.isIdentifier(pattern)) return guardIdents.has(pattern.name);
+            if (t20.isObjectPattern(pattern))
+              return pattern.properties.some(
+                (p) => t20.isRestElement(p) ? declBindsGuardIdent(p.argument) : declBindsGuardIdent(p.value)
+              );
+            if (t20.isArrayPattern(pattern)) return pattern.elements.some((e) => e && declBindsGuardIdent(e));
+            return false;
+          };
+          guardSetupStatements = preReturnStmts.filter((s) => {
+            if (!t20.isVariableDeclaration(s)) return false;
+            return s.declarations.some((d) => declBindsGuardIdent(d.id));
+          });
+        }
         const allChildren = Array.from(componentInstances.values()).flat();
         for (const child of allChildren) {
           const mappings = directMappingsMap.get(child.instanceVar);
           if (mappings) child.directMappings = mappings;
+          if (earlyReturnGuards.length > 0) {
+            child.earlyReturnGuards = earlyReturnGuards;
+            child.guardSetupStatements = guardSetupStatements;
+          }
         }
         injectChildComponents(ast, componentInstances, directForwardingSet);
         compiledChildren.push(...allChildren);
@@ -8103,6 +8310,7 @@ function transformComponentFile(ast, imports, storeImports, className, sourceFil
     eventIdCounter,
     preTransformAnalysis
   ) || transformed;
+  transformRemainingJSX(ast, imports);
   return transformed;
 }
 function transformNonComponentJSX(ast, imports) {
@@ -8584,6 +8792,7 @@ function isComponentImportSource(source) {
 }
 function geaPlugin() {
   const storeModules = /* @__PURE__ */ new Set();
+  const componentModules = /* @__PURE__ */ new Set();
   const resolveImportPath3 = (importer, source) => {
     const base = resolve3(dirname3(importer), source);
     const candidates = [
@@ -8620,6 +8829,20 @@ function geaPlugin() {
       return false;
     }
   };
+  const isComponentModule = (filePath) => {
+    if (componentModules.has(filePath)) return true;
+    if (!existsSync3(filePath)) return false;
+    try {
+      const source = readFileSync3(filePath, "utf8");
+      if (source.includes("extends Component")) {
+        componentModules.add(filePath);
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  };
   const envPath = existsSync3(resolve3(pluginDir, "gea-env.d.ts")) ? resolve3(pluginDir, "gea-env.d.ts") : resolve3(pluginDir, "..", "gea-env.d.ts");
   return {
     name: "gea-plugin",
@@ -8679,6 +8902,9 @@ function geaPlugin() {
             imports = freshParsed.imports;
           }
         }
+        if (componentClassNames.length > 0) {
+          componentModules.add(cleanId);
+        }
         let transformed = false;
         const componentImportSet = /* @__PURE__ */ new Set();
         const componentImportsUsedAsTags = /* @__PURE__ */ new Set();
@@ -8689,6 +8915,7 @@ function geaPlugin() {
         });
         const componentImports = Array.from(componentImportSet);
         const storeImports = /* @__PURE__ */ new Map();
+        const knownComponentImports = /* @__PURE__ */ new Set();
         const namedImportSources = /* @__PURE__ */ new Map();
         traverse14(ast, {
           ExportDefaultDeclaration() {
@@ -8698,8 +8925,10 @@ function geaPlugin() {
             const source = path.node.source.value;
             if (!isComponentImportSource(source)) return;
             const resolvedImport = source.startsWith(".") ? resolveImportPath3(cleanId, source) : null;
+            const isComp = resolvedImport ? isComponentModule(resolvedImport) : false;
             path.node.specifiers.forEach(
               (spec) => {
+                if (isComp) knownComponentImports.add(spec.local.name);
                 if (spec.type === "ImportDefaultSpecifier") {
                   if (resolvedImport && !isStoreModule(resolvedImport)) return;
                   storeImports.set(spec.local.name, source);
@@ -8733,7 +8962,8 @@ function geaPlugin() {
                 cn,
                 cleanId,
                 originalAST,
-                componentImportsUsedAsTags
+                componentImportsUsedAsTags,
+                knownComponentImports
               );
               if (result) transformed = true;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geajs/vite-plugin",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Vite plugin for Gea framework - JSX/TSX transform, reactivity, HMR",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,6 +45,7 @@
     "test:coverage": "c8 --reporter=text --reporter=lcov tsx --test tests/**/*.test.ts"
   },
   "dependencies": {
+    "@acemir/cssom": "^0.9.31",
     "@babel/generator": "^7.23.0",
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.23.0",
@@ -54,6 +55,7 @@
   "devDependencies": {
     "@types/node": "^25.4.0",
     "c8": "^11.0.0",
+    "cssstyle": "^6.2.0",
     "jsdom": "^28.1.0",
     "tsup": "^8.5.1",
     "tsx": "^4.21.0",