what-compiler 0.5.5 → 0.6.1

package/src/babel-plugin.js

@@ -1,47 +1,55 @@
 /**
- * What Framework Babel Plugin
+ * What Framework Babel Plugin — Fine-Grained Only
  *
- * Two modes:
- * - 'vdom' (legacy): JSX → h() calls through VNode reconciler
- * - 'fine-grained' (default): JSX → template() + insert() + effect() calls
- *   Static HTML extracted to templates, dynamic expressions wrapped in effects.
+ * JSX → template() + insert() + effect() calls
+ * Static HTML extracted to module-level templates, dynamic expressions wrapped in effects.
+ * Components run ONCE. All reactivity is signal-driven.
  *
- * Fine-grained output:
- *   const _t$ = template('<div class="container"><h1>Title</h1><p></p></div>');
+ * Output:
+ *   const _tmpl$1 = template('<div class="container"><h1>Title</h1><p></p></div>');
  *   function App() {
- *     const _el$ = _t$();
- *     insert(_el$.children[1], () => desc());
+ *     const _el$ = _tmpl$1();
+ *     insert(_el$.childNodes[1], () => desc());
  *     return _el$;
  *   }
  *
- * VDOM output (legacy):
- *   h('div', { class: 'container' }, h('h1', null, 'Title'), h('p', null, desc()))
+ * Template calls are hoisted to module scope — each unique HTML string gets one
+ * top-level const. Component functions just clone: `const _el$ = _tmpl$1()`.
  */
 
 const EVENT_MODIFIERS = new Set(['preventDefault', 'stopPropagation', 'once', 'capture', 'passive', 'self']);
 const EVENT_OPTION_MODIFIERS = new Set(['once', 'capture', 'passive']);
 const VOID_HTML_ELEMENTS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr'
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr'
 ]);
 
-export default function whatBabelPlugin({ types: t }) {
-  const mode = 'fine-grained'; // Can be overridden via plugin options
+// Events that use document-level delegation for performance.
+// The compiler emits `el.__click = handler` instead of addEventListener.
+// A one-time document listener walks event.target upward to find the handler.
+const DELEGATED_EVENTS = new Set([
+  'click', 'input', 'change', 'keydown', 'keyup', 'submit',
+  'focusin', 'focusout', 'mousedown', 'mouseup',
+]);
+
+// Known non-reactive call expressions — these should NOT be wrapped in effects
+// unless their arguments contain signal reads.
+const SAFE_GLOBAL_CALLS = new Set([
+  'Math', 'Number', 'String', 'Boolean', 'parseInt', 'parseFloat',
+  'isNaN', 'isFinite', 'encodeURIComponent', 'decodeURIComponent',
+  'encodeURI', 'decodeURI', 'JSON', 'Date', 'Array', 'Object',
+  'console', 'RegExp',
+]);
 
+// Known signal-creating functions
+const SIGNAL_CREATORS = new Set([
+  'useSignal', 'signal', 'computed', 'useComputed', 'useState', 'useReducer',
+  'createResource', 'useSWR', 'useQuery', 'useInfiniteQuery',
+]);
+
+export default function whatBabelPlugin({ types: t }) {
   // =====================================================
-  // Shared utilities (used by both modes)
+  // Shared utilities
   // =====================================================
 
   function parseEventModifiers(name) {
@@ -80,6 +88,14 @@ export default function whatBabelPlugin({ types: t }) {
     return attrName;
   }
 
+  // Safely extract attribute name, handling JSXNamespacedName (e.g., client:idle, bind:value)
+  function getAttrName(attr) {
+    if (t.isJSXNamespacedName(attr.name)) {
+      return `${attr.name.namespace.name}:${attr.name.name.name}`;
+    }
+    return typeof attr.name.name === 'string' ? attr.name.name : String(attr.name.name);
+  }
+
   function createEventHandler(handler, modifiers) {
     if (modifiers.length === 0) return handler;
 
@@ -150,298 +166,227 @@ export default function whatBabelPlugin({ types: t }) {
   }
 
   // =====================================================
-  // VDOM Mode (legacy h() calls)
+  // Reactivity Detection — Signal-Aware
   // =====================================================
 
-  function transformChildrenVdom(children, state) {
-    const result = [];
-    for (const child of children) {
-      if (t.isJSXText(child)) {
-        const text = child.value.replace(/\n\s+/g, ' ').trim();
-        if (text) result.push(t.stringLiteral(text));
-      } else if (t.isJSXExpressionContainer(child)) {
-        if (!t.isJSXEmptyExpression(child.expression)) {
-          result.push(child.expression);
-        }
-      } else if (t.isJSXElement(child)) {
-        result.push(transformElementVdom({ node: child }, state));
-      } else if (t.isJSXFragment(child)) {
-        result.push(transformFragmentVdom({ node: child }, state));
-      }
-    }
-    return result;
+  // Check if an identifier is known to be a signal (from useSignal/signal/computed/useState)
+  function isSignalIdentifier(name, signalNames) {
+    return signalNames.has(name);
   }
 
-  function transformElementVdom(path, state) {
-    const { node } = path;
-    const openingElement = node.openingElement;
-    const tagName = openingElement.name.name;
-    const attributes = openingElement.attributes;
-    const children = node.children;
-
-    if (isComponent(tagName)) {
-      return transformComponentVdom(path, state);
-    }
-
-    const props = [];
-    let hasSpread = false;
-    let spreadExpr = null;
-
-    for (const attr of attributes) {
-      if (t.isJSXSpreadAttribute(attr)) {
-        hasSpread = true;
-        spreadExpr = attr.argument;
-        continue;
-      }
-
-      const attrName = typeof attr.name.name === 'string' ? attr.name.name : String(attr.name.name);
-
-      if (attrName.startsWith('on') && attrName.includes('|')) {
-        const { eventName, modifiers } = parseEventModifiers(attrName);
-        const handler = getAttributeValue(attr.value);
-        const wrappedHandler = createEventHandler(handler, modifiers);
-
-        const optionMods = modifiers.filter(m => EVENT_OPTION_MODIFIERS.has(m));
-        if (optionMods.length > 0) {
-          const tempId = path.scope
-            ? path.scope.generateUidIdentifier('handler')
-            : t.identifier('_h' + Math.random().toString(36).slice(2, 6));
-
-          const optsProps = optionMods.map(m =>
-            t.objectProperty(t.identifier(m), t.booleanLiteral(true))
-          );
-
-          const iifeHandler = t.callExpression(
-            t.arrowFunctionExpression(
-              [],
-              t.blockStatement([
-                t.variableDeclaration('const', [
-                  t.variableDeclarator(tempId, wrappedHandler)
-                ]),
-                t.expressionStatement(
-                  t.assignmentExpression(
-                    '=',
-                    t.memberExpression(t.cloneNode(tempId), t.identifier('_eventOpts')),
-                    t.objectExpression(optsProps)
-                  )
-                ),
-                t.returnStatement(t.cloneNode(tempId))
-              ])
-            ),
-            []
-          );
-
-          props.push(t.objectProperty(t.identifier(eventName), iifeHandler));
-        } else {
-          props.push(t.objectProperty(t.identifier(eventName), wrappedHandler));
-        }
-        continue;
+  // Collect signal identifiers using Babel's scope analysis.
+  // Walks the scope chain from the given path upward, collecting signals
+  // defined in each lexical scope (function/block).
+  function collectSignalNamesFromScope(path) {
+    const signalNames = new Set();
+
+    // Helper: extract signal names from a VariableDeclarator node
+    function extractFromDeclarator(decl) {
+      const init = decl.init;
+      if (!init || !t.isCallExpression(init)) return;
+
+      const callee = init.callee;
+      let calleeName = '';
+      if (t.isIdentifier(callee)) {
+        calleeName = callee.name;
+      } else if (t.isMemberExpression(callee) && t.isIdentifier(callee.property)) {
+        calleeName = callee.property.name;
       }
 
-      if (isBindingAttribute(attrName)) {
-        const bindProp = getBindingProperty(attrName);
-        const signalExpr = attr.value.expression;
-
-        if (bindProp === 'value') {
-          props.push(
-            t.objectProperty(t.identifier('value'), t.callExpression(t.cloneNode(signalExpr), []))
-          );
-          props.push(
-            t.objectProperty(
-              t.identifier('onInput'),
-              t.arrowFunctionExpression(
-                [t.identifier('e')],
-                t.callExpression(
-                  t.memberExpression(t.cloneNode(signalExpr), t.identifier('set')),
-                  [t.memberExpression(
-                    t.memberExpression(t.identifier('e'), t.identifier('target')),
-                    t.identifier('value')
-                  )]
-                )
-              )
-            )
-          );
-        } else if (bindProp === 'checked') {
-          props.push(
-            t.objectProperty(t.identifier('checked'), t.callExpression(t.cloneNode(signalExpr), []))
-          );
-          props.push(
-            t.objectProperty(
-              t.identifier('onChange'),
-              t.arrowFunctionExpression(
-                [t.identifier('e')],
-                t.callExpression(
-                  t.memberExpression(t.cloneNode(signalExpr), t.identifier('set')),
-                  [t.memberExpression(
-                    t.memberExpression(t.identifier('e'), t.identifier('target')),
-                    t.identifier('checked')
-                  )]
-                )
-              )
-            )
-          );
+      if (SIGNAL_CREATORS.has(calleeName)) {
+        const id = decl.id;
+        if (t.isIdentifier(id)) {
+          signalNames.add(id.name);
+        } else if (t.isArrayPattern(id)) {
+          for (const el of id.elements) {
+            if (t.isIdentifier(el)) signalNames.add(el.name);
+          }
+        } else if (t.isObjectPattern(id)) {
+          for (const prop of id.properties) {
+            if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
+              signalNames.add(prop.value.name);
+            }
+          }
         }
-        continue;
       }
-
-      const value = getAttributeValue(attr.value);
-      let domAttrName = attrName;
-      if (attrName === 'className') domAttrName = 'class';
-      if (attrName === 'htmlFor') domAttrName = 'for';
-
-      props.push(
-        t.objectProperty(
-          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(domAttrName)
-            ? t.identifier(domAttrName)
-            : t.stringLiteral(domAttrName),
-          value
-        )
-      );
     }
 
-    const transformedChildren = transformChildrenVdom(children, state);
-
-    let propsExpr;
-    if (hasSpread) {
-      if (props.length > 0) {
-        propsExpr = t.callExpression(
-          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-          [t.objectExpression([]), spreadExpr, t.objectExpression(props)]
-        );
-      } else {
-        propsExpr = spreadExpr;
+    // Walk up the scope chain using Babel's scope API
+    let scope = path.scope;
+    while (scope) {
+      // Check all bindings in this scope
+      for (const [name, binding] of Object.entries(scope.bindings)) {
+        if (binding.path.isVariableDeclarator()) {
+          extractFromDeclarator(binding.path.node);
+        }
+        // Also check function params (destructured props)
+        if (binding.path.isIdentifier() || binding.kind === 'param') {
+          const fnPath = binding.scope.path;
+          if (fnPath && fnPath.node && fnPath.node.params) {
+            for (const param of fnPath.node.params) {
+              if (t.isObjectPattern(param)) {
+                for (const prop of param.properties) {
+                  if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
+                    signalNames.add(prop.value.name);
+                  } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
+                    signalNames.add(prop.argument.name);
+                  }
+                }
+              }
+            }
+          }
+        }
       }
-    } else if (props.length > 0) {
-      propsExpr = t.objectExpression(props);
-    } else {
-      propsExpr = t.nullLiteral();
+      scope = scope.parent;
     }
 
-    const args = [t.stringLiteral(tagName), propsExpr, ...transformedChildren];
-    state.needsH = true;
-    return t.callExpression(t.identifier('h'), args);
+    return signalNames;
   }
 
-  function transformComponentVdom(path, state) {
-    const { node } = path;
-    const openingElement = node.openingElement;
-    const componentName = openingElement.name.name;
-    const attributes = openingElement.attributes;
-    const children = node.children;
+  // Legacy wrapper for backward compat (used in collectSignalNames calls)
+  function collectSignalNames(path) {
+    return collectSignalNamesFromScope(path);
+  }
 
-    let clientDirective = null;
-    const filteredAttrs = [];
+  // Check if a call expression is a safe (non-reactive) global call
+  function isSafeGlobalCall(expr) {
+    if (!t.isCallExpression(expr)) return false;
+    const callee = expr.callee;
 
-    for (const attr of attributes) {
-      if (t.isJSXAttribute(attr)) {
-        const name = attr.name.name;
-        if (name && name.startsWith('client:')) {
-          const mode = name.slice(7);
-          if (attr.value) {
-            clientDirective = { type: mode, value: attr.value.value };
-          } else {
-            clientDirective = { type: mode };
-          }
-          continue;
-        }
-      }
-      filteredAttrs.push(attr);
+    // Math.max(), Number.parseInt(), etc.
+    if (t.isMemberExpression(callee) && t.isIdentifier(callee.object)) {
+      return SAFE_GLOBAL_CALLS.has(callee.object.name);
     }
 
-    if (clientDirective) {
-      state.needsH = true;
-      state.needsIsland = true;
+    // parseInt(), isNaN(), etc.
+    if (t.isIdentifier(callee)) {
+      return SAFE_GLOBAL_CALLS.has(callee.name);
+    }
 
-      const islandProps = [
-        t.objectProperty(t.identifier('component'), t.identifier(componentName)),
-        t.objectProperty(t.identifier('mode'), t.stringLiteral(clientDirective.type)),
-      ];
+    return false;
+  }
 
-      if (clientDirective.value) {
-        islandProps.push(
-          t.objectProperty(t.identifier('mediaQuery'), t.stringLiteral(clientDirective.value))
-        );
+  // Check if an expression's reactivity is uncertain — e.g., a non-signal function call
+  // whose arguments happen to contain signal reads. The function itself may not produce
+  // a reactive result, so the compiler wraps it conservatively.
+  function isUncertainReactive(expr, signalNames, importedIds) {
+    if (!signalNames) return false;
+    if (t.isCallExpression(expr)) {
+      // Callee is a known signal — definitely reactive, not uncertain
+      if (t.isIdentifier(expr.callee) && isSignalIdentifier(expr.callee.name, signalNames)) {
+        return false;
       }
-
-      for (const attr of filteredAttrs) {
-        if (t.isJSXSpreadAttribute(attr)) continue;
-        const attrName = attr.name.name;
-        const value = getAttributeValue(attr.value);
-        islandProps.push(t.objectProperty(t.identifier(attrName), value));
+      // Imported identifier called as function — definitely reactive (not uncertain)
+      if (importedIds && t.isIdentifier(expr.callee) && importedIds.has(expr.callee.name) &&
+          !SAFE_GLOBAL_CALLS.has(expr.callee.name)) {
+        return false;
+      }
+      // Callee is a member of a known signal — definitely reactive
+      if (t.isMemberExpression(expr.callee) && t.isIdentifier(expr.callee.object) &&
+          isSignalIdentifier(expr.callee.object.name, signalNames)) {
+        return false;
       }
+      // Safe global call (Math.max, etc.) with reactive args — still deterministic, not uncertain
+      if (isSafeGlobalCall(expr)) return false;
+      // Unknown function call — if args are reactive, the wrapping is uncertain
+      if (expr.arguments.some(arg => isPotentiallyReactive(arg, signalNames, importedIds))) {
+        return true;
+      }
+    }
+    return false;
+  }
 
-      return t.callExpression(
-        t.identifier('h'),
-        [t.identifier('Island'), t.objectExpression(islandProps)]
-      );
+  // Check if an expression is potentially reactive (reads a signal)
+  // importedIds: Set of identifiers imported from other modules — any imported
+  // function call is conservatively treated as potentially reactive since the
+  // imported binding could be a signal from another file.
+  function isPotentiallyReactive(expr, signalNames, importedIds) {
+    if (!signalNames) signalNames = new Set();
+
+    if (t.isCallExpression(expr)) {
+      // If callee is a known signal identifier being called (signal read), it's reactive
+      if (t.isIdentifier(expr.callee) && isSignalIdentifier(expr.callee.name, signalNames)) {
+        return true;
+      }
+      // Imported identifier called as a function — conservatively reactive.
+      // Handles: import { count } from './store'; ... {count()} in JSX
+      if (importedIds && t.isIdentifier(expr.callee) && importedIds.has(expr.callee.name)) {
+        // Exclude known safe globals that happen to also be imported
+        if (!SAFE_GLOBAL_CALLS.has(expr.callee.name)) {
+          return true;
+        }
+      }
+      // member.call() — e.g., data(), isLoading()
+      if (t.isMemberExpression(expr.callee)) {
+        // Check if the object is a signal
+        if (t.isIdentifier(expr.callee.object) && isSignalIdentifier(expr.callee.object.name, signalNames)) {
+          return true;
+        }
+      }
+      // Safe global calls like Math.max — only reactive if their args are
+      if (isSafeGlobalCall(expr)) {
+        return expr.arguments.some(arg => isPotentiallyReactive(arg, signalNames, importedIds));
+      }
+      // Unknown call — check if callee or args contain signal reads
+      if (t.isIdentifier(expr.callee)) {
+        // Could be a function that reads signals internally
+        // Be conservative: if it's not a known safe call and not a signal, still check args
+        return expr.arguments.some(arg => isPotentiallyReactive(arg, signalNames, importedIds));
+      }
+      // For any other call expression, check recursively
+      return isPotentiallyReactive(expr.callee, signalNames, importedIds) ||
+             expr.arguments.some(arg => isPotentiallyReactive(arg, signalNames, importedIds));
     }
 
-    const props = [];
-    let hasSpread = false;
-    let spreadExpr = null;
+    if (t.isIdentifier(expr)) {
+      return isSignalIdentifier(expr.name, signalNames);
+    }
 
-    for (const attr of filteredAttrs) {
-      if (t.isJSXSpreadAttribute(attr)) {
-        hasSpread = true;
-        spreadExpr = attr.argument;
-        continue;
-      }
+    if (t.isMemberExpression(expr)) {
+      return isPotentiallyReactive(expr.object, signalNames, importedIds);
+    }
 
-      const attrName = attr.name.name;
-      const value = getAttributeValue(attr.value);
+    if (t.isConditionalExpression(expr)) {
+      return isPotentiallyReactive(expr.test, signalNames, importedIds) ||
+             isPotentiallyReactive(expr.consequent, signalNames, importedIds) ||
+             isPotentiallyReactive(expr.alternate, signalNames, importedIds);
+    }
 
-      props.push(
-        t.objectProperty(
-          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(attrName)
-            ? t.identifier(attrName)
-            : t.stringLiteral(attrName),
-          value
-        )
-      );
+    if (t.isBinaryExpression(expr) || t.isLogicalExpression(expr)) {
+      return isPotentiallyReactive(expr.left, signalNames, importedIds) ||
+             isPotentiallyReactive(expr.right, signalNames, importedIds);
     }
 
-    const transformedChildren = transformChildrenVdom(children, state);
+    if (t.isUnaryExpression(expr)) {
+      return isPotentiallyReactive(expr.argument, signalNames, importedIds);
+    }
 
-    let propsExpr;
-    if (hasSpread) {
-      if (props.length > 0) {
-        propsExpr = t.callExpression(
-          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-          [t.objectExpression([]), spreadExpr, t.objectExpression(props)]
-        );
-      } else {
-        propsExpr = spreadExpr;
-      }
-    } else if (props.length > 0) {
-      propsExpr = t.objectExpression(props);
-    } else {
-      propsExpr = t.nullLiteral();
+    if (t.isTemplateLiteral(expr)) {
+      return expr.expressions.some(e => isPotentiallyReactive(e, signalNames, importedIds));
     }
 
-    const args = [t.identifier(componentName), propsExpr, ...transformedChildren];
-    state.needsH = true;
-    return t.callExpression(t.identifier('h'), args);
-  }
+    if (t.isObjectExpression(expr)) {
+      return expr.properties.some(prop =>
+        t.isObjectProperty(prop) && isPotentiallyReactive(prop.value, signalNames, importedIds)
+      );
+    }
 
-  function transformFragmentVdom(path, state) {
-    const { node } = path;
-    const transformedChildren = transformChildrenVdom(node.children, state);
+    if (t.isArrayExpression(expr)) {
+      return expr.elements.some(el => el && isPotentiallyReactive(el, signalNames, importedIds));
+    }
 
-    state.needsH = true;
-    state.needsFragment = true;
+    if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
+      // Function expressions are not reactive themselves — they're callbacks
+      return false;
+    }
 
-    return t.callExpression(
-      t.identifier('h'),
-      [t.identifier('Fragment'), t.nullLiteral(), ...transformedChildren]
-    );
+    return false;
   }
 
   // =====================================================
   // Fine-Grained Mode (template + insert + effect)
   // =====================================================
 
-  let templateCounter = 0;
-
   // Check if a JSX child is static (no expressions)
   function isStaticChild(child) {
     if (t.isJSXText(child)) return true;
@@ -450,60 +395,33 @@ export default function whatBabelPlugin({ types: t }) {
       const el = child.openingElement;
       const tagName = el.name.name;
       if (isComponent(tagName)) return false;
-      // Check if attributes are all static
       for (const attr of el.attributes) {
         if (t.isJSXSpreadAttribute(attr)) return false;
         const value = attr.value;
         if (t.isJSXExpressionContainer(value)) return false;
       }
-      // Check children recursively
       return child.children.every(isStaticChild);
     }
     return false;
   }
 
-  // Check if an attribute value is dynamic (expression, not string literal)
+  // Check if an attribute value is dynamic
   function isDynamicAttr(attr) {
     if (t.isJSXSpreadAttribute(attr)) return true;
-    if (!attr.value) return false; // boolean attr like `disabled`
+    if (!attr.value) return false;
     return t.isJSXExpressionContainer(attr.value);
   }
 
-  // Check if an expression is potentially reactive (contains function calls)
-  function isPotentiallyReactive(expr) {
-    if (t.isCallExpression(expr)) return true;
-    if (t.isMemberExpression(expr)) return isPotentiallyReactive(expr.object);
-    if (t.isConditionalExpression(expr)) {
-      return isPotentiallyReactive(expr.test) || isPotentiallyReactive(expr.consequent) || isPotentiallyReactive(expr.alternate);
+  // Extract static HTML from JSX element for template()
+  function extractStaticHTML(node) {
+    if (t.isJSXText(node)) {
+      const text = node.value.replace(/\n\s+/g, ' ').trim();
+      return text ? escapeHTML(text) : '';
     }
-    if (t.isBinaryExpression(expr) || t.isLogicalExpression(expr)) {
-      return isPotentiallyReactive(expr.left) || isPotentiallyReactive(expr.right);
-    }
-    if (t.isTemplateLiteral(expr)) {
-      return expr.expressions.some(isPotentiallyReactive);
-    }
-    if (t.isObjectExpression(expr)) {
-      return expr.properties.some(prop =>
-        t.isObjectProperty(prop) && isPotentiallyReactive(prop.value)
-      );
-    }
-    if (t.isArrayExpression(expr)) {
-      return expr.elements.some(el => el && isPotentiallyReactive(el));
-    }
-    return false;
-  }
-
-  // Extract static HTML from JSX element for template()
-  function extractStaticHTML(node) {
-    if (t.isJSXText(node)) {
-      const text = node.value.replace(/\n\s+/g, ' ').trim();
-      return text ? escapeHTML(text) : '';
-    }
-
-    if (t.isJSXExpressionContainer(node)) {
-      // Dynamic child marker so insert() can preserve source ordering
-      if (t.isJSXEmptyExpression(node.expression)) return '';
-      return '<!--$-->';
+
+    if (t.isJSXExpressionContainer(node)) {
+      if (t.isJSXEmptyExpression(node.expression)) return '';
+      return '<!--$-->';
     }
 
     if (!t.isJSXElement(node)) return '';
@@ -515,10 +433,9 @@ export default function whatBabelPlugin({ types: t }) {
 
     let html = `<${tagName}`;
 
-    // Static attributes
     for (const attr of el.attributes) {
       if (t.isJSXSpreadAttribute(attr)) continue;
-      const name = attr.name.name;
+      const name = getAttrName(attr);
       if (name.startsWith('on') || name.startsWith('bind:') || name.includes('|')) continue;
 
       let domName = name;
@@ -530,8 +447,7 @@ export default function whatBabelPlugin({ types: t }) {
       } else if (t.isStringLiteral(attr.value)) {
         html += ` ${domName}="${escapeAttr(attr.value.value)}"`;
       } else if (t.isJSXExpressionContainer(attr.value)) {
-        // Dynamic attr — skip from template, will be set via effect
-        continue;
+        continue; // Dynamic attr — set via effect
       }
     }
 
@@ -548,7 +464,6 @@ export default function whatBabelPlugin({ types: t }) {
 
     html += '>';
 
-    // Children
     for (const child of node.children) {
       if (t.isJSXText(child)) {
         const text = child.value.replace(/\n\s+/g, ' ').trim();
@@ -575,7 +490,7 @@ export default function whatBabelPlugin({ types: t }) {
   }
 
   function escapeAttr(str) {
-    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 
   // Analyze JSX tree and generate fine-grained output
@@ -588,7 +503,7 @@ export default function whatBabelPlugin({ types: t }) {
       return transformComponentFineGrained(path, state);
     }
 
-    // For <For> and <Show> control flow components
+    // Control flow components (lowercase but special)
     if (tagName === 'For') {
       return transformForFineGrained(path, state);
     }
@@ -604,7 +519,7 @@ export default function whatBabelPlugin({ types: t }) {
     const allAttrsStatic = attributes.every(attr => !isDynamicAttr(attr));
     const noEvents = attributes.every(attr => {
       if (t.isJSXSpreadAttribute(attr)) return false;
-      const name = attr.name?.name;
+      const name = getAttrName(attr);
       return !name?.startsWith('on') && !name?.startsWith('bind:');
     });
 
@@ -612,8 +527,7 @@ export default function whatBabelPlugin({ types: t }) {
       // Fully static element — extract to template, return clone call
       const html = extractStaticHTML(node);
       if (html) {
-        const tmplId = generateTemplateId(state);
-        state.templates.push({ id: tmplId, html });
+        const tmplId = getOrCreateTemplate(state, html);
         state.needsTemplate = true;
         return t.callExpression(t.identifier(tmplId), []);
       }
@@ -622,17 +536,26 @@ export default function whatBabelPlugin({ types: t }) {
     // Mixed static/dynamic element — extract template, add effects for dynamic parts
     const html = extractStaticHTML(node);
     if (!html) {
-      // Fallback to VDOM mode for degenerate cases
-      return transformElementVdom(path, state);
+      // Template extraction failed — emit a detailed compile warning and use h() as fallback
+      const loc = node.loc;
+      const fileName = state.filename || state.file?.opts?.filename || '<unknown>';
+      const lineInfo = loc ? `:${loc.start.line}:${loc.start.column}` : '';
+      console.warn(
+        `[what-compiler] Could not extract template for <${tagName}> at ${fileName}${lineInfo}. ` +
+        `Falling back to h() for this element. ` +
+        `This element could not be statically analyzed. Consider simplifying the JSX.`
+      );
+      state.needsH = true;
+      return transformElementAsH(path, state);
     }
 
-    const tmplId = generateTemplateId(state);
-    state.templates.push({ id: tmplId, html });
+    const tmplId = getOrCreateTemplate(state, html);
     state.needsTemplate = true;
 
     const elId = state.nextVarId();
 
-    // _el$ = _t$()
+    // Build statements: _el$ = _tmpl$1()
+    // NO IIFE wrapping — statements are inlined into the containing function
     const statements = [
       t.variableDeclaration('const', [
         t.variableDeclarator(t.identifier(elId), t.callExpression(t.identifier(tmplId), []))
@@ -645,13 +568,55 @@ export default function whatBabelPlugin({ types: t }) {
     // Handle dynamic children
     applyDynamicChildren(statements, elId, children, node, state);
 
-    // Return the element — wrap in IIFE
-    statements.push(t.returnStatement(t.identifier(elId)));
+    // Instead of wrapping in an IIFE, store setup statements for hoisting.
+    // The JSXElement visitor will insert them before the enclosing statement.
+    if (!state._pendingSetup) state._pendingSetup = [];
+    state._pendingSetup.push(...statements);
+    return t.identifier(elId);
+  }
 
-    return t.callExpression(
-      t.arrowFunctionExpression([], t.blockStatement(statements)),
-      []
-    );
+  // Fallback: transform element using h() when template extraction fails
+  function transformElementAsH(path, state) {
+    const { node } = path;
+    const openingElement = node.openingElement;
+    const tagName = openingElement.name.name;
+    const attributes = openingElement.attributes;
+    const children = node.children;
+
+    const props = [];
+    for (const attr of attributes) {
+      if (t.isJSXSpreadAttribute(attr)) continue;
+      const attrName = getAttrName(attr);
+      const value = getAttributeValue(attr.value);
+      let domAttrName = normalizeAttrName(attrName);
+      props.push(
+        t.objectProperty(
+          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(domAttrName)
+            ? t.identifier(domAttrName)
+            : t.stringLiteral(domAttrName),
+          value
+        )
+      );
+    }
+
+    const transformedChildren = [];
+    for (const child of children) {
+      if (t.isJSXText(child)) {
+        const text = child.value.replace(/\n\s+/g, ' ').trim();
+        if (text) transformedChildren.push(t.stringLiteral(text));
+      } else if (t.isJSXExpressionContainer(child)) {
+        if (!t.isJSXEmptyExpression(child.expression)) {
+          transformedChildren.push(child.expression);
+        }
+      } else if (t.isJSXElement(child)) {
+        transformedChildren.push(transformElementFineGrained({ node: child }, state));
+      } else if (t.isJSXFragment(child)) {
+        transformedChildren.push(transformFragmentFineGrained({ node: child }, state));
+      }
+    }
+
+    const propsExpr = props.length > 0 ? t.objectExpression(props) : t.nullLiteral();
+    return t.callExpression(t.identifier('h'), [t.stringLiteral(tagName), propsExpr, ...transformedChildren]);
   }
 
   function applyDynamicAttrs(statements, elId, attributes, state) {
@@ -666,7 +631,6 @@ export default function whatBabelPlugin({ types: t }) {
 
     for (const attr of attributes) {
       if (t.isJSXSpreadAttribute(attr)) {
-        // spread(el, props) — use runtime spread
         state.needsSpread = true;
         statements.push(
           t.expressionStatement(
@@ -676,24 +640,65 @@ export default function whatBabelPlugin({ types: t }) {
         continue;
       }
 
-      const attrName = attr.name.name;
+      const attrName = getAttrName(attr);
 
-      // Event handlers
-      if (attrName.startsWith('on') && !attrName.includes('|')) {
-        const event = attrName.slice(2).toLowerCase();
-        const handler = getAttributeValue(attr.value);
-        // Direct addEventListener
+      // Ref handling — assign element to ref object/callback
+      if (attrName === 'ref') {
+        const refExpr = getAttributeValue(attr.value);
+        // Generate: typeof ref === 'function' ? ref(el) : ref.current = el
         statements.push(
           t.expressionStatement(
-            t.callExpression(
-              t.memberExpression(t.identifier(elId), t.identifier('addEventListener')),
-              [t.stringLiteral(event), handler]
+            t.conditionalExpression(
+              t.binaryExpression('===',
+                t.unaryExpression('typeof', refExpr),
+                t.stringLiteral('function')
+              ),
+              t.callExpression(t.cloneNode(refExpr), [t.identifier(elId)]),
+              t.assignmentExpression('=',
+                t.memberExpression(t.cloneNode(refExpr), t.identifier('current')),
+                t.identifier(elId)
+              )
             )
           )
         );
         continue;
       }
 
+      // Event handlers
+      if (attrName.startsWith('on') && !attrName.includes('|')) {
+        const event = attrName.slice(2).toLowerCase();
+        const handler = getAttributeValue(attr.value);
+
+        if (DELEGATED_EVENTS.has(event)) {
+          // Use event delegation: el.__click = handler
+          state.needsDelegation = true;
+          if (!state.delegatedEvents) state.delegatedEvents = new Set();
+          state.delegatedEvents.add(event);
+          statements.push(
+            t.expressionStatement(
+              t.assignmentExpression('=',
+                t.memberExpression(
+                  t.identifier(elId),
+                  t.identifier(`__${event}`)
+                ),
+                handler
+              )
+            )
+          );
+        } else {
+          // Non-delegated: use per-element addEventListener
+          statements.push(
+            t.expressionStatement(
+              t.callExpression(
+                t.memberExpression(t.identifier(elId), t.identifier('addEventListener')),
+                [t.stringLiteral(event), handler]
+              )
+            )
+          );
+        }
+        continue;
+      }
+
       // Event with modifiers
       if (attrName.startsWith('on') && attrName.includes('|')) {
         const { eventName, modifiers } = parseEventModifiers(attrName);
@@ -728,7 +733,6 @@ export default function whatBabelPlugin({ types: t }) {
         state.needsEffect = true;
 
         if (bindProp === 'value') {
-          // Reactive value binding
           statements.push(
             t.expressionStatement(
               t.callExpression(t.identifier('_$effect'), [
@@ -739,7 +743,6 @@ export default function whatBabelPlugin({ types: t }) {
               ])
             )
           );
-          // Input listener
           statements.push(
             t.expressionStatement(
               t.callExpression(
@@ -760,6 +763,38 @@ export default function whatBabelPlugin({ types: t }) {
               )
             )
           );
+        } else if (bindProp === 'checked') {
+          state.needsEffect = true;
+          statements.push(
+            t.expressionStatement(
+              t.callExpression(t.identifier('_$effect'), [
+                t.arrowFunctionExpression([], t.assignmentExpression('=',
+                  t.memberExpression(t.identifier(elId), t.identifier('checked')),
+                  t.callExpression(t.cloneNode(signalExpr), [])
+                ))
+              ])
+            )
+          );
+          statements.push(
+            t.expressionStatement(
+              t.callExpression(
+                t.memberExpression(t.identifier(elId), t.identifier('addEventListener')),
+                [
+                  t.stringLiteral('change'),
+                  t.arrowFunctionExpression(
+                    [t.identifier('e')],
+                    t.callExpression(
+                      t.memberExpression(t.cloneNode(signalExpr), t.identifier('set')),
+                      [t.memberExpression(
+                        t.memberExpression(t.identifier('e'), t.identifier('target')),
+                        t.identifier('checked')
+                      )]
+                    )
+                  )
+                ]
+              )
+            )
+          );
         }
         continue;
       }
@@ -769,28 +804,35 @@ export default function whatBabelPlugin({ types: t }) {
         const expr = attr.value.expression;
         const domName = normalizeAttrName(attrName);
 
-        if (isPotentiallyReactive(expr)) {
-          // Reactive attribute — wrap in effect
+        if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
           state.needsEffect = true;
-          statements.push(
-            t.expressionStatement(
-              t.callExpression(t.identifier('_$effect'), [
-                t.arrowFunctionExpression([], buildSetPropCall(domName, expr))
-              ])
-            )
-          );
+          const effectCall = t.callExpression(t.identifier('_$effect'), [
+            t.arrowFunctionExpression([], buildSetPropCall(domName, expr))
+          ]);
+          // In dev mode, add a leading comment when the effect wrapping is uncertain
+          // (non-signal function call whose args happen to contain signal reads)
+          if (isUncertainReactive(expr, state.signalNames, state.importedIdentifiers)) {
+            t.addComment(effectCall, 'leading',
+              ' @what-dev: effect wrapping may be unnecessary — expression contains a non-signal function call with reactive args ',
+              false
+            );
+          }
+          statements.push(t.expressionStatement(effectCall));
         } else {
           // Static expression (no signal calls) — set once
           statements.push(t.expressionStatement(buildSetPropCall(domName, expr)));
         }
       }
-      // Static string/boolean attributes already in template
     }
   }
 
   function applyDynamicChildren(statements, elId, children, parentNode, state) {
-    // Build a child access path. We need to track position relative to template's children.
-    // Dynamic children (expressions and components) need insert() calls.
+    // Two-pass approach: first collect all children needing DOM references,
+    // then pre-capture markers before any _$insert() calls shift indices.
+    // This fixes issue #1: childNodes index shifting with multiple dynamic children.
+
+    // --- Pass 1: Scan children and collect entries ---
+    const entries = [];
     let childIndex = 0;
 
     for (const child of children) {
@@ -802,21 +844,88 @@ export default function whatBabelPlugin({ types: t }) {
 
       if (t.isJSXExpressionContainer(child)) {
         if (t.isJSXEmptyExpression(child.expression)) continue;
+        entries.push({ type: 'expression', child, childIndex });
+        childIndex++;
+        continue;
+      }
 
-        const expr = child.expression;
-        const marker = buildChildAccess(elId, childIndex);
-        state.needsInsert = true;
+      if (t.isJSXElement(child)) {
+        const childTag = child.openingElement.name.name;
+        if (isComponent(childTag) || childTag === 'For' || childTag === 'Show') {
+          entries.push({ type: 'component', child, childIndex });
+          childIndex++;
+        } else {
+          const hasAnythingDynamic = child.openingElement.attributes.some(isDynamicAttr) ||
+            child.openingElement.attributes.some(a => !t.isJSXSpreadAttribute(a) && getAttrName(a)?.startsWith('on')) ||
+            !child.children.every(isStaticChild);
 
-        if (isPotentiallyReactive(expr)) {
-          statements.push(
-            t.expressionStatement(
-              t.callExpression(t.identifier('_$insert'), [
-                t.identifier(elId),
-                t.arrowFunctionExpression([], expr),
-                marker
-              ])
+          entries.push({ type: 'static', child, childIndex, hasAnythingDynamic });
+          childIndex++;
+        }
+        continue;
+      }
+
+      if (t.isJSXFragment(child)) {
+        entries.push({ type: 'fragment', child });
+      }
+    }
+
+    // --- Pre-capture marker references if needed ---
+    // When there are multiple entries needing DOM refs and at least one _$insert(),
+    // capture all markers upfront to avoid index shifting after DOM mutations.
+    const entriesNeedingRef = entries.filter(e =>
+      e.type === 'expression' || e.type === 'component' ||
+      (e.type === 'static' && e.hasAnythingDynamic)
+    );
+    const hasDynamicInsert = entries.some(e => e.type === 'expression' || e.type === 'component');
+    const needsPreCapture = entriesNeedingRef.length >= 2 && hasDynamicInsert;
+
+    const markerVars = new Map(); // childIndex → variable name
+    if (needsPreCapture) {
+      for (const entry of entriesNeedingRef) {
+        const varName = `_m$${entry.childIndex}`;
+        // Use a unique name to avoid collisions with element vars
+        const markerVar = state.nextVarId();
+        markerVars.set(entry.childIndex, markerVar);
+        statements.push(
+          t.variableDeclaration('const', [
+            t.variableDeclarator(
+              t.identifier(markerVar),
+              buildChildAccess(elId, entry.childIndex)
             )
-          );
+          ])
+        );
+      }
+    }
+
+    // Helper: get a marker reference (pre-captured var or inline access)
+    function getMarker(idx) {
+      if (markerVars.has(idx)) {
+        return t.identifier(markerVars.get(idx));
+      }
+      return buildChildAccess(elId, idx);
+    }
+
+    // --- Pass 2: Generate code using stable references ---
+    for (const entry of entries) {
+      if (entry.type === 'expression') {
+        const expr = entry.child.expression;
+        const marker = getMarker(entry.childIndex);
+        state.needsInsert = true;
+
+        if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
+          const insertCall = t.callExpression(t.identifier('_$insert'), [
+            t.identifier(elId),
+            t.arrowFunctionExpression([], expr),
+            marker
+          ]);
+          if (isUncertainReactive(expr, state.signalNames, state.importedIdentifiers)) {
+            t.addComment(insertCall, 'leading',
+              ' @what-dev: reactive wrapping may be unnecessary — expression contains a non-signal function call with reactive args ',
+              false
+            );
+          }
+          statements.push(t.expressionStatement(insertCall));
         } else {
           statements.push(
             t.expressionStatement(
@@ -828,60 +937,52 @@ export default function whatBabelPlugin({ types: t }) {
             )
           );
         }
-        childIndex++;
         continue;
       }
 
-      if (t.isJSXElement(child)) {
-        const childTag = child.openingElement.name.name;
-        if (isComponent(childTag) || childTag === 'For' || childTag === 'Show') {
-          // Component/control-flow — transform and insert
-          const transformed = transformElementFineGrained({ node: child }, state);
-          const marker = buildChildAccess(elId, childIndex);
-          state.needsInsert = true;
+      if (entry.type === 'component') {
+        const transformed = transformElementFineGrained({ node: entry.child }, state);
+        const marker = getMarker(entry.childIndex);
+        state.needsInsert = true;
+        statements.push(
+          t.expressionStatement(
+            t.callExpression(t.identifier('_$insert'), [
+              t.identifier(elId),
+              transformed,
+              marker
+            ])
+          )
+        );
+        continue;
+      }
+
+      if (entry.type === 'static' && entry.hasAnythingDynamic) {
+        // Static child with dynamic content — get element reference
+        let childElRef;
+        if (markerVars.has(entry.childIndex)) {
+          childElRef = markerVars.get(entry.childIndex);
+        } else {
+          childElRef = state.nextVarId();
           statements.push(
-            t.expressionStatement(
-              t.callExpression(t.identifier('_$insert'), [
-                t.identifier(elId),
-                transformed,
-                marker
-              ])
-            )
+            t.variableDeclaration('const', [
+              t.variableDeclarator(
+                t.identifier(childElRef),
+                buildChildAccess(elId, entry.childIndex)
+              )
+            ])
           );
-          childIndex++;
-        } else {
-          // Static child element — already in template
-          // But check if it has dynamic children/attrs that need effects
-          const hasAnythingDynamic = child.openingElement.attributes.some(isDynamicAttr) ||
-            child.openingElement.attributes.some(a => !t.isJSXSpreadAttribute(a) && a.name?.name?.startsWith('on')) ||
-            !child.children.every(isStaticChild);
-
-          if (hasAnythingDynamic) {
-            // Need to reference this child element and apply effects to it
-            const childElId = state.nextVarId();
-            statements.push(
-              t.variableDeclaration('const', [
-                t.variableDeclarator(
-                  t.identifier(childElId),
-                  buildChildAccess(elId, childIndex)
-                )
-              ])
-            );
-            applyDynamicAttrs(statements, childElId, child.openingElement.attributes, state);
-            applyDynamicChildren(statements, childElId, child.children, child, state);
-          }
-          childIndex++;
         }
+        applyDynamicAttrs(statements, childElRef, entry.child.openingElement.attributes, state);
+        applyDynamicChildren(statements, childElRef, entry.child.children, entry.child, state);
         continue;
       }
 
-      if (t.isJSXFragment(child)) {
-        // Inline fragment children
-        for (const fChild of child.children) {
+      if (entry.type === 'fragment') {
+        for (const fChild of entry.child.children) {
           if (t.isJSXExpressionContainer(fChild) && !t.isJSXEmptyExpression(fChild.expression)) {
             state.needsInsert = true;
             const expr = fChild.expression;
-            if (isPotentiallyReactive(expr)) {
+            if (isPotentiallyReactive(expr, state.signalNames, state.importedIdentifiers)) {
               statements.push(
                 t.expressionStatement(
                   t.callExpression(t.identifier('_$insert'), [
@@ -907,19 +1008,202 @@ export default function whatBabelPlugin({ types: t }) {
   }
 
   function buildChildAccess(elId, index) {
-    // Use childNodes[n] (not children[n]) so indices remain stable when text/comment
-    // placeholders are present in the static template.
-    return t.memberExpression(
-      t.memberExpression(t.identifier(elId), t.identifier('childNodes')),
-      t.numericLiteral(index),
-      true // computed
-    );
+    // Use firstChild/nextSibling chains instead of childNodes[N]
+    // This is more robust with whitespace text nodes
+    if (index === 0) {
+      return t.memberExpression(t.identifier(elId), t.identifier('firstChild'));
+    }
+    // Chain .nextSibling for subsequent indices
+    let expr = t.memberExpression(t.identifier(elId), t.identifier('firstChild'));
+    for (let i = 0; i < index; i++) {
+      expr = t.memberExpression(expr, t.identifier('nextSibling'));
+    }
+    return expr;
   }
 
   function transformComponentFineGrained(path, state) {
-    // Components in fine-grained mode still use h() for now (backward compat)
-    // The component itself decides how to render (vdom or fine-grained)
-    return transformComponentVdom(path, state);
+    const { node } = path;
+    const openingElement = node.openingElement;
+    const componentName = openingElement.name.name;
+    const attributes = openingElement.attributes;
+    const children = node.children;
+
+    // Check for client: directive (islands)
+    let clientDirective = null;
+    const filteredAttrs = [];
+
+    for (const attr of attributes) {
+      if (t.isJSXAttribute(attr)) {
+        // Handle both simple names and namespaced names (client:idle)
+        let name;
+        if (t.isJSXNamespacedName(attr.name)) {
+          name = `${attr.name.namespace.name}:${attr.name.name.name}`;
+        } else {
+          name = attr.name.name;
+        }
+        if (name && typeof name === 'string' && name.startsWith('client:')) {
+          const mode = name.slice(7);
+          if (attr.value) {
+            clientDirective = { type: mode, value: attr.value.value };
+          } else {
+            clientDirective = { type: mode };
+          }
+          continue;
+        }
+      }
+      filteredAttrs.push(attr);
+    }
+
+    if (clientDirective) {
+      state.needsCreateComponent = true;
+      state.needsIsland = true;
+
+      const islandProps = [
+        t.objectProperty(t.identifier('component'), t.identifier(componentName)),
+        t.objectProperty(t.identifier('mode'), t.stringLiteral(clientDirective.type)),
+      ];
+
+      if (clientDirective.value) {
+        islandProps.push(
+          t.objectProperty(t.identifier('mediaQuery'), t.stringLiteral(clientDirective.value))
+        );
+      }
+
+      for (const attr of filteredAttrs) {
+        if (t.isJSXSpreadAttribute(attr)) continue;
+        const attrName = getAttrName(attr);
+        const value = getAttributeValue(attr.value);
+        islandProps.push(t.objectProperty(t.identifier(attrName), value));
+      }
+
+      return t.callExpression(
+        t.identifier('_$createComponent'),
+        [t.identifier('Island'), t.objectExpression(islandProps), t.arrayExpression([])]
+      );
+    }
+
+    // Regular component — use _$createComponent to instantiate, component runs once
+    state.needsCreateComponent = true;
+
+    const props = [];
+    let hasSpread = false;
+    let spreadExpr = null;
+
+    for (const attr of filteredAttrs) {
+      if (t.isJSXSpreadAttribute(attr)) {
+        hasSpread = true;
+        spreadExpr = attr.argument;
+        continue;
+      }
+
+      const attrName = getAttrName(attr);
+
+      // Handle bind: attributes for components
+      if (isBindingAttribute(attrName)) {
+        const bindProp = getBindingProperty(attrName);
+        const signalExpr = attr.value.expression;
+
+        if (bindProp === 'value') {
+          props.push(
+            t.objectProperty(t.identifier('value'), t.callExpression(t.cloneNode(signalExpr), []))
+          );
+          props.push(
+            t.objectProperty(
+              t.identifier('onInput'),
+              t.arrowFunctionExpression(
+                [t.identifier('e')],
+                t.callExpression(
+                  t.memberExpression(t.cloneNode(signalExpr), t.identifier('set')),
+                  [t.memberExpression(
+                    t.memberExpression(t.identifier('e'), t.identifier('target')),
+                    t.identifier('value')
+                  )]
+                )
+              )
+            )
+          );
+        } else if (bindProp === 'checked') {
+          props.push(
+            t.objectProperty(t.identifier('checked'), t.callExpression(t.cloneNode(signalExpr), []))
+          );
+          props.push(
+            t.objectProperty(
+              t.identifier('onChange'),
+              t.arrowFunctionExpression(
+                [t.identifier('e')],
+                t.callExpression(
+                  t.memberExpression(t.cloneNode(signalExpr), t.identifier('set')),
+                  [t.memberExpression(
+                    t.memberExpression(t.identifier('e'), t.identifier('target')),
+                    t.identifier('checked')
+                  )]
+                )
+              )
+            )
+          );
+        }
+        continue;
+      }
+
+      // Handle event modifiers on components
+      if (attrName.startsWith('on') && attrName.includes('|')) {
+        const { eventName, modifiers } = parseEventModifiers(attrName);
+        const handler = getAttributeValue(attr.value);
+        const wrappedHandler = createEventHandler(handler, modifiers);
+        props.push(t.objectProperty(t.identifier(eventName), wrappedHandler));
+        continue;
+      }
+
+      const value = getAttributeValue(attr.value);
+
+      props.push(
+        t.objectProperty(
+          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(attrName)
+            ? t.identifier(attrName)
+            : t.stringLiteral(attrName),
+          value
+        )
+      );
+    }
+
+    // Transform children
+    const transformedChildren = [];
+    for (const child of children) {
+      if (t.isJSXText(child)) {
+        const text = child.value.replace(/\n\s+/g, ' ').trim();
+        if (text) transformedChildren.push(t.stringLiteral(text));
+      } else if (t.isJSXExpressionContainer(child)) {
+        if (!t.isJSXEmptyExpression(child.expression)) {
+          transformedChildren.push(child.expression);
+        }
+      } else if (t.isJSXElement(child)) {
+        transformedChildren.push(transformElementFineGrained({ node: child }, state));
+      } else if (t.isJSXFragment(child)) {
+        transformedChildren.push(transformFragmentFineGrained({ node: child }, state));
+      }
+    }
+
+    let propsExpr;
+    if (hasSpread) {
+      if (props.length > 0) {
+        propsExpr = t.callExpression(
+          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+          [t.objectExpression([]), spreadExpr, t.objectExpression(props)]
+        );
+      } else {
+        propsExpr = spreadExpr;
+      }
+    } else if (props.length > 0) {
+      propsExpr = t.objectExpression(props);
+    } else {
+      propsExpr = t.nullLiteral();
+    }
+
+    const childrenArray = transformedChildren.length > 0
+      ? t.arrayExpression(transformedChildren)
+      : t.arrayExpression([]);
+
+    return t.callExpression(t.identifier('_$createComponent'), [t.identifier(componentName), propsExpr, childrenArray]);
   }
 
   function transformForFineGrained(path, state) {
@@ -931,17 +1215,17 @@ export default function whatBabelPlugin({ types: t }) {
     // → mapArray(data, (item) => ...)
     let eachExpr = null;
     for (const attr of attributes) {
-      if (t.isJSXAttribute(attr) && attr.name.name === 'each') {
+      if (t.isJSXAttribute(attr) && getAttrName(attr) === 'each') {
         eachExpr = getAttributeValue(attr.value);
       }
     }
 
     if (!eachExpr) {
-      // Fallback
-      return transformElementVdom(path, state);
+      console.warn('[what-compiler] <For> element missing "each" attribute.');
+      state.needsH = true;
+      return transformElementAsH(path, state);
     }
 
-    // Get the render function from children
     let renderFn = null;
     for (const child of children) {
       if (t.isJSXExpressionContainer(child) && !t.isJSXEmptyExpression(child.expression)) {
@@ -951,7 +1235,9 @@ export default function whatBabelPlugin({ types: t }) {
     }
 
     if (!renderFn) {
-      return transformElementVdom(path, state);
+      console.warn('[what-compiler] <For> element missing render function child.');
+      state.needsH = true;
+      return transformElementAsH(path, state);
     }
 
     state.needsMapArray = true;
@@ -959,20 +1245,16 @@ export default function whatBabelPlugin({ types: t }) {
   }
 
   function transformShowFineGrained(path, state) {
-    const { node } = path;
-    const attributes = node.openingElement.attributes;
-    const children = node.children;
-
     // <Show when={cond}>{content}</Show>
-    // Still uses h(Show, ...) for now — Show is a runtime component
-    return transformElementVdom(path, state);
+    // Uses _$createComponent(Show, ...) — Show is a runtime component
+    state.needsCreateComponent = true;
+    return transformComponentFineGrained(path, state);
   }
 
   function transformFragmentFineGrained(path, state) {
     const { node } = path;
     const children = node.children;
 
-    // Fragments with fine-grained: just return children array or single child
     const transformed = [];
     for (const child of children) {
       if (t.isJSXText(child)) {
@@ -993,8 +1275,15 @@ export default function whatBabelPlugin({ types: t }) {
     return t.arrayExpression(transformed);
   }
 
-  function generateTemplateId(state) {
-    return `_t$${state.templateCount++}`;
+  // Template deduplication: same HTML string → same module-level const
+  function getOrCreateTemplate(state, html) {
+    if (state.templateMap.has(html)) {
+      return state.templateMap.get(html);
+    }
+    const id = `_tmpl$${state.templateCount++}`;
+    state.templateMap.set(html, id);
+    state.templates.push({ id, html });
+    return id;
   }
 
   // =====================================================
@@ -1007,15 +1296,6 @@ export default function whatBabelPlugin({ types: t }) {
     visitor: {
       Program: {
         enter(path, state) {
-          // Read mode from plugin options
-          const pluginMode = state.opts?.mode || mode;
-          state.mode = pluginMode;
-
-          // VDOM mode state
-          state.needsH = false;
-          state.needsFragment = false;
-          state.needsIsland = false;
-
           // Fine-grained mode state
           state.needsTemplate = false;
           state.needsInsert = false;
@@ -1023,147 +1303,252 @@ export default function whatBabelPlugin({ types: t }) {
           state.needsMapArray = false;
           state.needsSpread = false;
           state.needsSetProp = false;
+          state.needsH = false;
+          state.needsCreateComponent = false;
+          state.needsFragment = false;
+          state.needsIsland = false;
+          state.needsDelegation = false;
+          state.delegatedEvents = new Set();
           state.templates = [];
+          state.templateMap = new Map(); // html → template id (deduplication)
           state.templateCount = 0;
           state._varCounter = 0;
+          state._pendingSetup = [];
           state.nextVarId = () => `_el$${state._varCounter++}`;
-        },
-
-        exit(path, state) {
-          if (state.mode === 'fine-grained') {
-            // Insert template declarations at top of program
-            for (const tmpl of state.templates.reverse()) {
-              path.unshiftContainer('body',
-                t.variableDeclaration('const', [
-                  t.variableDeclarator(
-                    t.identifier(tmpl.id),
-                    t.callExpression(t.identifier('_$template'), [t.stringLiteral(tmpl.html)])
-                  )
-                ])
-              );
-            }
 
-            // Build imports
-            const fgSpecifiers = [];
-            if (state.needsTemplate) {
-              fgSpecifiers.push(
-                t.importSpecifier(t.identifier('_$template'), t.identifier('template'))
-              );
-            }
-            if (state.needsInsert) {
-              fgSpecifiers.push(
-                t.importSpecifier(t.identifier('_$insert'), t.identifier('insert'))
-              );
-            }
-            if (state.needsEffect) {
-              fgSpecifiers.push(
-                t.importSpecifier(t.identifier('_$effect'), t.identifier('effect'))
-              );
-            }
-            if (state.needsMapArray) {
-              fgSpecifiers.push(
-                t.importSpecifier(t.identifier('_$mapArray'), t.identifier('mapArray'))
-              );
-            }
-            if (state.needsSpread) {
-              fgSpecifiers.push(
-                t.importSpecifier(t.identifier('_$spread'), t.identifier('spread'))
-              );
-            }
-            if (state.needsSetProp) {
-              fgSpecifiers.push(
-                t.importSpecifier(t.identifier('_$setProp'), t.identifier('setProp'))
-              );
-            }
-
-            // Also include h/Fragment/Island if vdom mode used for components
-            const coreSpecifiers = [];
-            if (state.needsH) {
-              coreSpecifiers.push(
-                t.importSpecifier(t.identifier('h'), t.identifier('h'))
-              );
-            }
-            if (state.needsFragment) {
-              coreSpecifiers.push(
-                t.importSpecifier(t.identifier('Fragment'), t.identifier('Fragment'))
-              );
-            }
-            if (state.needsIsland) {
-              coreSpecifiers.push(
-                t.importSpecifier(t.identifier('Island'), t.identifier('Island'))
-              );
-            }
+          // Collect signal names for smart reactivity detection
+          state.signalNames = new Set();
+
+          // --- Imported Signal Tracking ---
+          // Only mark imports as potentially reactive if they come from known
+          // reactive sources: what-framework, what-framework/*, relative paths
+          // (user stores), or functions matching use*/create* naming conventions.
+          // This prevents over-wrapping of utility imports (lodash, etc.).
+          state.importedIdentifiers = new Set();
+          for (const node of path.node.body) {
+            if (t.isImportDeclaration(node)) {
+              const source = node.source.value;
+              const isReactiveSource =
+                source === 'what-framework' ||
+                source.startsWith('what-framework/') ||
+                source === 'what-core' ||
+                source.startsWith('what-core/') ||
+                source.startsWith('./') ||
+                source.startsWith('../');
+
+              for (const spec of node.specifiers) {
+                let localName = null;
+                if (t.isImportSpecifier(spec) && t.isIdentifier(spec.local)) {
+                  localName = spec.local.name;
+                } else if (t.isImportDefaultSpecifier(spec) && t.isIdentifier(spec.local)) {
+                  localName = spec.local.name;
+                } else if (t.isImportNamespaceSpecifier(spec) && t.isIdentifier(spec.local)) {
+                  localName = spec.local.name;
+                }
 
-            if (fgSpecifiers.length > 0) {
-              // Check for existing render import
-              let existingRenderImport = null;
-              for (const node of path.node.body) {
-                if (t.isImportDeclaration(node) && (
-                  node.source.value === 'what-framework/render' ||
-                  node.source.value === 'what-core/render'
-                )) {
-                  existingRenderImport = node;
-                  break;
+                if (localName) {
+                  // Mark as reactive if from a reactive source, or if the name
+                  // matches use*/create* conventions (hooks/signal creators)
+                  if (isReactiveSource || /^(use|create)[A-Z]/.test(localName)) {
+                    state.importedIdentifiers.add(localName);
+                  }
                 }
               }
+            }
+          }
 
-              if (existingRenderImport) {
-                const existingNames = new Set(
-                  existingRenderImport.specifiers
-                    .filter(s => t.isImportSpecifier(s))
-                    .map(s => s.imported.name)
-                );
+          path.traverse({
+            VariableDeclarator(declPath) {
+              const init = declPath.node.init;
+              if (!init || !t.isCallExpression(init)) return;
+
+              const callee = init.callee;
+              let calleeName = '';
+              if (t.isIdentifier(callee)) {
+                calleeName = callee.name;
+              } else if (t.isMemberExpression(callee) && t.isIdentifier(callee.property)) {
+                calleeName = callee.property.name;
+              }
 
-                for (const spec of fgSpecifiers) {
-                  if (!existingNames.has(spec.imported.name)) {
-                    existingRenderImport.specifiers.push(spec);
+              if (SIGNAL_CREATORS.has(calleeName)) {
+                const id = declPath.node.id;
+                if (t.isIdentifier(id)) {
+                  state.signalNames.add(id.name);
+                } else if (t.isArrayPattern(id)) {
+                  for (const el of id.elements) {
+                    if (t.isIdentifier(el)) state.signalNames.add(el.name);
+                  }
+                } else if (t.isObjectPattern(id)) {
+                  for (const prop of id.properties) {
+                    if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
+                      state.signalNames.add(prop.value.name);
+                    }
                   }
                 }
-              } else {
-                path.unshiftContainer('body',
-                  t.importDeclaration(fgSpecifiers, t.stringLiteral('what-framework/render'))
-                );
               }
             }
+          });
+        },
+
+        exit(path, state) {
+          // Insert template declarations at top of program (hoisted to module scope)
+          for (const tmpl of state.templates.reverse()) {
+            path.unshiftContainer('body',
+              t.variableDeclaration('const', [
+                t.variableDeclarator(
+                  t.identifier(tmpl.id),
+                  t.callExpression(t.identifier('_$template'), [t.stringLiteral(tmpl.html)])
+                )
+              ])
+            );
+          }
+
+          // Build fine-grained imports
+          const fgSpecifiers = [];
+          if (state.needsTemplate) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$template'), t.identifier('template'))
+            );
+          }
+          if (state.needsInsert) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$insert'), t.identifier('insert'))
+            );
+          }
+          if (state.needsEffect) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$effect'), t.identifier('effect'))
+            );
+          }
+          if (state.needsMapArray) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$mapArray'), t.identifier('mapArray'))
+            );
+          }
+          if (state.needsSpread) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$spread'), t.identifier('spread'))
+            );
+          }
+          if (state.needsSetProp) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$setProp'), t.identifier('setProp'))
+            );
+          }
+          if (state.needsCreateComponent) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$createComponent'), t.identifier('_$createComponent'))
+            );
+          }
+          if (state.needsDelegation) {
+            fgSpecifiers.push(
+              t.importSpecifier(t.identifier('_$delegateEvents'), t.identifier('delegateEvents'))
+            );
+          }
+
+          // Core imports (h/Fragment/Island for components)
+          const coreSpecifiers = [];
+          if (state.needsH) {
+            coreSpecifiers.push(
+              t.importSpecifier(t.identifier('h'), t.identifier('h'))
+            );
+          }
+          if (state.needsFragment) {
+            coreSpecifiers.push(
+              t.importSpecifier(t.identifier('Fragment'), t.identifier('Fragment'))
+            );
+          }
+          if (state.needsIsland) {
+            coreSpecifiers.push(
+              t.importSpecifier(t.identifier('Island'), t.identifier('Island'))
+            );
+          }
 
-            if (coreSpecifiers.length > 0) {
-              addCoreImports(path, t, coreSpecifiers);
+          if (fgSpecifiers.length > 0) {
+            let existingRenderImport = null;
+            for (const node of path.node.body) {
+              if (t.isImportDeclaration(node) && (
+                node.source.value === 'what-framework/render' ||
+                node.source.value === 'what-core/render'
+              )) {
+                existingRenderImport = node;
+                break;
+              }
             }
 
-          } else {
-            // VDOM mode
-            if (!state.needsH) return;
-
-            const coreSpecifiers = [
-              t.importSpecifier(t.identifier('h'), t.identifier('h')),
-            ];
-            if (state.needsFragment) {
-              coreSpecifiers.push(
-                t.importSpecifier(t.identifier('Fragment'), t.identifier('Fragment'))
+            if (existingRenderImport) {
+              const existingNames = new Set(
+                existingRenderImport.specifiers
+                  .filter(s => t.isImportSpecifier(s))
+                  .map(s => s.imported.name)
               );
-            }
-            if (state.needsIsland) {
-              coreSpecifiers.push(
-                t.importSpecifier(t.identifier('Island'), t.identifier('Island'))
+              for (const spec of fgSpecifiers) {
+                if (!existingNames.has(spec.imported.name)) {
+                  existingRenderImport.specifiers.push(spec);
+                }
+              }
+            } else {
+              path.unshiftContainer('body',
+                t.importDeclaration(fgSpecifiers, t.stringLiteral('what-framework/render'))
               );
             }
+          }
 
+          if (coreSpecifiers.length > 0) {
             addCoreImports(path, t, coreSpecifiers);
           }
+
+          // Emit event delegation setup call if any delegated events were used
+          if (state.needsDelegation && state.delegatedEvents && state.delegatedEvents.size > 0) {
+            const eventArray = t.arrayExpression(
+              [...state.delegatedEvents].map(e => t.stringLiteral(e))
+            );
+            path.pushContainer('body',
+              t.expressionStatement(
+                t.callExpression(t.identifier('_$delegateEvents'), [eventArray])
+              )
+            );
+          }
         }
       },
 
       JSXElement(path, state) {
-        const transformed = state.mode === 'fine-grained'
-          ? transformElementFineGrained(path, state)
-          : transformElementVdom(path, state);
-        path.replaceWith(transformed);
+        // FIX-1: Use scope-aware signal detection instead of file-global
+        state.signalNames = collectSignalNamesFromScope(path);
+        state._pendingSetup = [];
+        const transformed = transformElementFineGrained(path, state);
+        const pending = state._pendingSetup;
+        state._pendingSetup = [];
+
+        if (pending.length > 0) {
+          // Find the enclosing statement to hoist setup before it
+          let stmtPath = path;
+          while (stmtPath && !stmtPath.isStatement()) {
+            stmtPath = stmtPath.parentPath;
+          }
+          if (stmtPath && stmtPath.isStatement()) {
+            // Insert setup statements before the enclosing statement
+            for (const stmt of pending) {
+              stmtPath.insertBefore(stmt);
+            }
+            path.replaceWith(transformed);
+          } else {
+            // Fallback: if we can't find a statement parent, use IIFE
+            pending.push(t.returnStatement(transformed));
+            path.replaceWith(
+              t.callExpression(
+                t.arrowFunctionExpression([], t.blockStatement(pending)),
+                []
+              )
+            );
+          }
+        } else {
+          path.replaceWith(transformed);
+        }
       },
 
       JSXFragment(path, state) {
-        const transformed = state.mode === 'fine-grained'
-          ? transformFragmentFineGrained(path, state)
-          : transformFragmentVdom(path, state);
+        const transformed = transformFragmentFineGrained(path, state);
         path.replaceWith(transformed);
       }
     }
@@ -1187,7 +1572,6 @@ function addCoreImports(path, t, coreSpecifiers) {
         .filter(s => t.isImportSpecifier(s))
         .map(s => s.imported.name)
     );
-
     for (const spec of coreSpecifiers) {
       if (!existingNames.has(spec.imported.name)) {
         existingImport.specifiers.push(spec);