@vertz/ui-compiler 0.2.10 → 0.2.12

package/dist/index.js

@@ -263,11 +263,12 @@ class JsxAnalyzer {
       const deps = identifiers.filter((id) => reactiveNames.has(id));
       const uniqueDeps = [...new Set(deps)];
       const hasSignalApiAccess = containsSignalApiPropertyAccess(expr, signalApiVars, plainPropVars, fieldSignalPropVars);
+      const hasSignalApiRef = containsSignalApiReference(expr, signalApiVars);
       const hasReactiveSourceAccess = containsReactiveSourceAccess(expr, reactiveSourceVars);
       results.push({
         start: expr.getStart(),
         end: expr.getEnd(),
-        reactive: uniqueDeps.length > 0 || hasSignalApiAccess || hasReactiveSourceAccess,
+        reactive: uniqueDeps.length > 0 || hasSignalApiAccess || hasSignalApiRef || hasReactiveSourceAccess,
         deps: uniqueDeps
       });
     }
@@ -309,6 +310,19 @@ function containsSignalApiPropertyAccess(node, signalApiVars, plainPropVars, fie
   }
   return false;
 }
+function containsSignalApiReference(node, signalApiVars) {
+  if (signalApiVars.size === 0)
+    return false;
+  const callExprs = node.getDescendantsOfKind(SyntaxKind4.CallExpression);
+  for (const call of callExprs) {
+    for (const arg of call.getArguments()) {
+      if (arg.isKind(SyntaxKind4.Identifier) && signalApiVars.has(arg.getText())) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
 function containsReactiveSourceAccess(node, reactiveSourceVars) {
   if (reactiveSourceVars.size === 0)
     return false;
@@ -527,7 +541,8 @@ class ReactivityAnalyzer {
                   consts.set(syntheticName, {
                     start: decl.getStart(),
                     end: decl.getEnd(),
-                    deps: []
+                    deps: [],
+                    propertyAccesses: new Map
                   });
                 }
               }
@@ -539,12 +554,21 @@ class ReactivityAnalyzer {
             if (signalApiConfig && syntheticName) {
               const isSignalProp = signalApiConfig.signalProperties.has(propName);
               const deps2 = isSignalProp ? [syntheticName] : [];
-              const entry2 = { start: decl.getStart(), end: decl.getEnd(), deps: deps2 };
+              const propAccesses = new Map;
+              if (isSignalProp) {
+                propAccesses.set(syntheticName, new Set([propName]));
+              }
+              const entry2 = {
+                start: decl.getStart(),
+                end: decl.getEnd(),
+                deps: deps2,
+                propertyAccesses: propAccesses
+              };
               consts.set(bindingName, entry2);
               destructuredFromMap.set(bindingName, syntheticName);
             } else {
-              const deps2 = init ? collectIdentifierRefs(init) : [];
-              const entry2 = { start: decl.getStart(), end: decl.getEnd(), deps: deps2 };
+              const { refs: deps2, propertyAccesses: propertyAccesses2 } = init ? collectDeps(init) : { refs: [], propertyAccesses: new Map };
+              const entry2 = { start: decl.getStart(), end: decl.getEnd(), deps: deps2, propertyAccesses: propertyAccesses2 };
               if (isLet) {
                 lets.set(bindingName, entry2);
               } else if (isConst) {
@@ -555,8 +579,8 @@ class ReactivityAnalyzer {
           continue;
         }
         const name = decl.getName();
-        const deps = init ? collectIdentifierRefs(init) : [];
-        const entry = { start: decl.getStart(), end: decl.getEnd(), deps };
+        const { refs: deps, propertyAccesses } = init ? collectDeps(init) : { refs: [], propertyAccesses: new Map };
+        const entry = { start: decl.getStart(), end: decl.getEnd(), deps, propertyAccesses };
         let callInit = init;
         if (callInit?.isKind(SyntaxKind6.NonNullExpression)) {
           callInit = callInit.getExpression();
@@ -614,7 +638,20 @@ class ReactivityAnalyzer {
       for (const [name, info] of consts) {
         if (computeds.has(name))
           continue;
-        const dependsOnReactive = info.deps.some((dep) => signals.has(dep) || computeds.has(dep) || signalApiVars.has(dep) || reactiveSourceVars.has(dep));
+        if (signalApiVars.has(name))
+          continue;
+        const dependsOnReactive = info.deps.some((dep) => {
+          if (signals.has(dep) || computeds.has(dep) || reactiveSourceVars.has(dep))
+            return true;
+          const apiConfig = signalApiVars.get(dep);
+          if (apiConfig) {
+            const accessed = info.propertyAccesses.get(dep);
+            if (!accessed || accessed.size === 0)
+              return false;
+            return [...accessed].some((prop) => apiConfig.signalProperties.has(prop));
+          }
+          return false;
+        });
         if (dependsOnReactive) {
           computeds.add(name);
           changed = true;
@@ -678,9 +715,27 @@ function addIdentifiers(node, refs) {
     addIdentifiers(child, refs);
   }
 }
-function collectIdentifierRefs(node) {
+function collectDeps(node) {
   const refs = [];
+  const propertyAccesses = new Map;
   const walk = (n) => {
+    if (n.isKind(SyntaxKind6.PropertyAccessExpression)) {
+      const expr = n.getExpression();
+      const propName = n.getName();
+      if (expr.isKind(SyntaxKind6.Identifier)) {
+        const varName = expr.getText();
+        refs.push(varName);
+        let props = propertyAccesses.get(varName);
+        if (!props) {
+          props = new Set;
+          propertyAccesses.set(varName, props);
+        }
+        props.add(propName);
+      } else {
+        walk(expr);
+      }
+      return;
+    }
     if (n.isKind(SyntaxKind6.Identifier)) {
       refs.push(n.getText());
     }
@@ -689,7 +744,7 @@ function collectIdentifierRefs(node) {
     }
   };
   walk(node);
-  return refs;
+  return { refs, propertyAccesses };
 }
 function buildImportAliasMap(sourceFile) {
   const signalApiAliases = new Map;
@@ -1110,6 +1165,9 @@ function transformComputedReads(source, bodyNode, computeds) {
 
 // src/transformers/jsx-transformer.ts
 import { SyntaxKind as SyntaxKind10 } from "ts-morph";
+function isLiteralExpression(node) {
+  return node.isKind(SyntaxKind10.StringLiteral) || node.isKind(SyntaxKind10.NumericLiteral) || node.isKind(SyntaxKind10.TrueKeyword) || node.isKind(SyntaxKind10.FalseKeyword) || node.isKind(SyntaxKind10.NullKeyword) || node.isKind(SyntaxKind10.NoSubstitutionTemplateLiteral);
+}
 function cleanJsxText(raw) {
   if (!raw.includes(`
 `) && !raw.includes("\r")) {
@@ -1220,7 +1278,7 @@ function transformJsxElement(node, reactiveNames, jsxMap, source, formVarNames =
   for (const attr of attrs) {
     if (!attr.isKind(SyntaxKind10.JsxAttribute))
       continue;
-    const attrStmt = processAttribute(attr, elVar, jsxMap, source);
+    const attrStmt = processAttribute(attr, elVar, source);
     if (attrStmt)
       statements.push(attrStmt);
   }
@@ -1266,7 +1324,7 @@ function transformSelfClosingElement(node, reactiveNames, jsxMap, source, formVa
   for (const attr of attrs) {
     if (!attr.isKind(SyntaxKind10.JsxAttribute))
       continue;
-    const attrStmt = processAttribute(attr, elVar, jsxMap, source);
+    const attrStmt = processAttribute(attr, elVar, source);
     if (attrStmt)
       statements.push(attrStmt);
   }
@@ -1295,7 +1353,7 @@ ${statements.map((s) => `  ${s};`).join(`
   return ${fragVar};
 })()`;
 }
-function processAttribute(attr, elVar, jsxMap, source) {
+function processAttribute(attr, elVar, source) {
   if (!attr.isKind(SyntaxKind10.JsxAttribute))
     return null;
   const attrName = attr.getNameNode().getText();
@@ -1315,10 +1373,9 @@ function processAttribute(attr, elVar, jsxMap, source) {
     return `${elVar}.setAttribute(${JSON.stringify(attrName)}, ${init.getText()})`;
   }
   if (init.isKind(SyntaxKind10.JsxExpression)) {
-    const exprInfo = jsxMap.get(init.getStart());
     const exprNode = init.getExpression();
     const exprText = exprNode ? source.slice(exprNode.getStart(), exprNode.getEnd()) : "";
-    if (exprInfo?.reactive) {
+    if (exprNode && !isLiteralExpression(exprNode)) {
       return `__attr(${elVar}, ${JSON.stringify(attrName)}, () => ${exprText})`;
     }
     return `{ const __v = ${exprText}; if (__v != null && __v !== false) ${elVar}.setAttribute(${JSON.stringify(attrName)}, __v === true ? "" : __v); }`;
@@ -1337,18 +1394,20 @@ function transformChild(child, reactiveNames, jsxMap, parentVar, source, formVar
     const exprNode = child.getExpression();
     if (!exprNode)
       return null;
-    if (exprInfo?.reactive) {
+    if (!isLiteralExpression(exprNode)) {
       const conditionalCode = tryTransformConditional(exprNode, reactiveNames, jsxMap, source);
       if (conditionalCode) {
         return `__append(${parentVar}, ${conditionalCode})`;
       }
+    }
+    if (exprInfo?.reactive) {
       const listCode = tryTransformList(exprNode, reactiveNames, jsxMap, parentVar, source);
       if (listCode) {
         return listCode;
       }
     }
     const exprText = sliceWithTransformedJsx(exprNode, reactiveNames, jsxMap, source, formVarNames);
-    if (exprInfo?.reactive) {
+    if (!isLiteralExpression(exprNode)) {
       return `__append(${parentVar}, __child(() => ${exprText}))`;
     }
     return `__insert(${parentVar}, ${exprText})`;
@@ -1367,18 +1426,17 @@ function transformChildAsValue(child, reactiveNames, jsxMap, source, formVarName
     return `__staticText(${JSON.stringify(text)})`;
   }
   if (child.isKind(SyntaxKind10.JsxExpression)) {
-    const exprInfo = jsxMap.get(child.getStart());
     const exprNode = child.getExpression();
     if (!exprNode)
       return null;
-    if (exprInfo?.reactive) {
+    if (!isLiteralExpression(exprNode)) {
       const conditionalCode = tryTransformConditional(exprNode, reactiveNames, jsxMap, source);
       if (conditionalCode) {
         return conditionalCode;
       }
     }
     const exprText = sliceWithTransformedJsx(exprNode, reactiveNames, jsxMap, source, formVarNames);
-    if (exprInfo?.reactive) {
+    if (!isLiteralExpression(exprNode)) {
       return `__child(() => ${exprText})`;
     }
     return exprText;
@@ -1571,10 +1629,9 @@ function buildPropsObject(element, jsxMap, source, reactiveNames, formVarNames,
       continue;
     }
     if (init.isKind(SyntaxKind10.JsxExpression)) {
-      const exprInfo = jsxMap.get(init.getStart());
       const exprNode = init.getExpression();
       const exprText = exprNode ? sliceWithTransformedJsx(exprNode, reactiveNames, jsxMap, source, formVarNames) : "";
-      if (exprInfo?.reactive) {
+      if (exprNode && !isLiteralExpression(exprNode)) {
         props.push(`get ${name}() { return ${exprText}; }`);
       } else {
         props.push(`${name}: ${exprText}`);
@@ -1724,6 +1781,7 @@ class SignalTransformer {
   }
 }
 function transformDeclarations(source, bodyNode, signals) {
+  const seenNames = new Map;
   for (const stmt of bodyNode.getChildSyntaxList()?.getChildren() ?? []) {
     if (!stmt.isKind(SyntaxKind11.VariableStatement))
       continue;
@@ -1741,8 +1799,11 @@ function transformDeclarations(source, bodyNode, signals) {
       if (letKeyword) {
         source.overwrite(letKeyword.getStart(), letKeyword.getEnd(), "const");
       }
+      const count = seenNames.get(name) ?? 0;
+      seenNames.set(name, count + 1);
+      const hmrKey = count === 0 ? name : `${name}$${count}`;
       source.appendLeft(init.getStart(), "signal(");
-      source.appendRight(init.getEnd(), ")");
+      source.appendRight(init.getEnd(), `, '${hmrKey}')`);
     }
   }
 }
@@ -1891,9 +1952,6 @@ function compile(source, optionsOrFilename) {
     if (jsxExpressions.length > 0) {
       usedFeatures.add("__element");
       usedFeatures.add("__child");
-    }
-    if (jsxExpressions.some((e) => e.reactive)) {
-      usedFeatures.add("__text");
       usedFeatures.add("__attr");
     }
     const hasEvents = sourceFile.getDescendantsOfKind(SyntaxKind12.JsxAttribute).some((attr) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui-compiler",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI compiler — SSR and build-time optimizations",
@@ -23,12 +23,12 @@
   "scripts": {
     "build": "bunup",
     "test": "bun test",
-    "test:watch": "vitest",
+    "test:watch": "bun test --watch",
     "typecheck": "tsc --noEmit -p tsconfig.typecheck.json"
   },
   "dependencies": {
     "@ampproject/remapping": "^2.3.0",
-    "@vertz/ui": "^0.2.2",
+    "@vertz/ui": "^0.2.11",
     "magic-string": "^0.30.0",
     "ts-morph": "^27.0.2"
   },
@@ -36,10 +36,8 @@
     "@jridgewell/trace-mapping": "^0.3.31",
     "@types/node": "^25.3.1",
     "bun-types": "^1.3.10",
-    "@vitest/coverage-v8": "^4.0.18",
     "bunup": "^0.16.31",
-    "typescript": "^5.7.0",
-    "vitest": "^4.0.18"
+    "typescript": "^5.7.0"
   },
   "engines": {
     "node": ">=22"