what-compiler 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-compiler",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "JSX compiler for What Framework - transforms JSX to optimized DOM operations",
   "main": "src/index.js",
   "type": "module",
@@ -22,7 +22,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@babel/core": "^7.0.0",
-    "what-core": "^0.1.0"
+    "what-core": "^0.2.0"
   },
   "files": [
     "src"

package/src/babel-plugin.js

@@ -1,37 +1,27 @@
 /**
  * What Framework Babel Plugin
- * Transforms JSX into optimized DOM operations
+ * Transforms JSX into h() calls, routing all rendering through core's VNode reconciler.
+ *
+ * Output: h(tag, props, ...children) from what-core
  *
  * Features:
- * - Direct DOM creation (no virtual DOM)
- * - Signal auto-unwrapping in expressions
- * - Event modifiers (onClick|preventDefault)
- * - Two-way binding (bind:value)
- * - Static content hoisting
- * - Control flow component optimization
+ * - Elements: h('div', { class: 'foo', onClick: handler }, child1, child2)
+ * - Components: h(Component, { prop: val }, child1, child2)
+ * - Fragments: h(Fragment, null, child1, child2)
+ * - Event modifiers: onClick|preventDefault → wrapped handler as normal onClick prop
+ * - Event options (once/capture/passive): handler._eventOpts = { once: true }
+ * - Two-way binding: bind:value={sig} → { value: sig(), onInput: e => sig.set(e.target.value) }
+ * - Islands: <Comp client:idle /> → h(Island, { component: Comp, mode: 'idle' })
+ * - SVG: handled by dom.js namespace detection, no special output needed
+ * - Control flow: <Show when={x}> → h(Show, { when: x }, children) — normal components
  */
 
-const CONTROL_FLOW_COMPONENTS = new Set(['Show', 'For', 'Switch', 'Match', 'Suspense', 'ErrorBoundary', 'Portal']);
 const EVENT_MODIFIERS = new Set(['preventDefault', 'stopPropagation', 'once', 'capture', 'passive', 'self']);
-const SVG_ELEMENTS = new Set([
-  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse',
-  'g', 'defs', 'use', 'symbol', 'clipPath', 'mask', 'pattern', 'image',
-  'text', 'tspan', 'textPath', 'foreignObject', 'linearGradient', 'radialGradient', 'stop'
-]);
+const EVENT_OPTION_MODIFIERS = new Set(['once', 'capture', 'passive']);
 
 export default function whatBabelPlugin({ types: t }) {
-  // Helper to check if an expression might be a signal
-  function mightBeSignal(node) {
-    // Identifiers that are likely signals
-    if (t.isIdentifier(node)) return true;
-    // Member expressions like store.count
-    if (t.isMemberExpression(node)) return true;
-    // Call expressions are definitely reactive
-    if (t.isCallExpression(node)) return true;
-    return false;
-  }
 
-  // Parse event modifiers from attribute name
+  // Parse event modifiers from attribute name like onClick|preventDefault|once
   function parseEventModifiers(name) {
     const parts = name.split('|');
     const eventName = parts[0];
@@ -46,7 +36,7 @@ export default function whatBabelPlugin({ types: t }) {
 
   // Get the binding property from bind:value -> value
   function getBindingProperty(name) {
-    return name.slice(5); // Remove 'bind:'
+    return name.slice(5);
   }
 
   // Check if element is a component (starts with uppercase)
@@ -54,50 +44,23 @@ export default function whatBabelPlugin({ types: t }) {
     return /^[A-Z]/.test(name);
   }
 
-  // Check if element is SVG
-  function isSVGElement(name) {
-    return SVG_ELEMENTS.has(name);
-  }
-
-  // Transform JSX attribute value to runtime value
-  function transformAttributeValue(value, isDynamic = false) {
-    if (!value) {
-      // Boolean attribute: <input disabled />
-      return t.booleanLiteral(true);
-    }
-
-    if (t.isJSXExpressionContainer(value)) {
-      const expr = value.expression;
-
-      // Wrap potentially reactive expressions
-      if (isDynamic && mightBeSignal(expr)) {
-        // () => expr (auto-unwrap at runtime)
-        return t.arrowFunctionExpression([], expr);
-      }
-
-      return expr;
-    }
-
-    if (t.isStringLiteral(value)) {
-      return value;
-    }
-
+  // Get the expression from a JSX attribute value
+  function getAttributeValue(value) {
+    if (!value) return t.booleanLiteral(true);
+    if (t.isJSXExpressionContainer(value)) return value.expression;
+    if (t.isStringLiteral(value)) return value;
     return t.stringLiteral(value.value || '');
   }
 
-  // Create event handler with modifiers
+  // Create event handler wrapper for inline modifiers (preventDefault, stopPropagation, self)
   function createEventHandler(handler, modifiers) {
-    if (modifiers.length === 0) {
-      return handler;
-    }
+    if (modifiers.length === 0) return handler;
 
-    // Build modifier chain
     let wrappedHandler = handler;
 
     for (const mod of modifiers) {
       switch (mod) {
         case 'preventDefault':
-          // (e) => { e.preventDefault(); handler(e); }
           wrappedHandler = t.arrowFunctionExpression(
             [t.identifier('e')],
             t.blockStatement([
@@ -132,7 +95,6 @@ export default function whatBabelPlugin({ types: t }) {
           break;
 
         case 'self':
-          // (e) => { if (e.target === e.currentTarget) handler(e); }
           wrappedHandler = t.arrowFunctionExpression(
             [t.identifier('e')],
             t.blockStatement([
@@ -150,11 +112,10 @@ export default function whatBabelPlugin({ types: t }) {
           );
           break;
 
+        // once, capture, passive are handled via _eventOpts, not handler wrapping
         case 'once':
         case 'capture':
         case 'passive':
-          // These are handled at addEventListener level, mark them
-          // Will be processed by the runtime
           break;
       }
     }
@@ -162,7 +123,51 @@ export default function whatBabelPlugin({ types: t }) {
     return wrappedHandler;
   }
 
-  // Transform JSX element to createElement call
+  // Build _eventOpts assignment for once/capture/passive modifiers
+  function buildEventOptsStatements(handlerIdentifier, modifiers) {
+    const optionMods = modifiers.filter(m => EVENT_OPTION_MODIFIERS.has(m));
+    if (optionMods.length === 0) return [];
+
+    const optsProps = optionMods.map(m =>
+      t.objectProperty(t.identifier(m), t.booleanLiteral(true))
+    );
+
+    // handler._eventOpts = { once: true, ... }
+    return [
+      t.expressionStatement(
+        t.assignmentExpression(
+          '=',
+          t.memberExpression(handlerIdentifier, t.identifier('_eventOpts')),
+          t.objectExpression(optsProps)
+        )
+      )
+    ];
+  }
+
+  // Transform children array from JSX
+  function transformChildren(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(transformElement({ node: child }, state));
+      } else if (t.isJSXFragment(child)) {
+        // Inline fragment children
+        result.push(transformFragment({ node: child }, state));
+      }
+    }
+    return result;
+  }
+
+  // Transform a JSX element to h() call
   function transformElement(path, state) {
     const { node } = path;
     const openingElement = node.openingElement;
@@ -170,17 +175,15 @@ export default function whatBabelPlugin({ types: t }) {
     const attributes = openingElement.attributes;
     const children = node.children;
 
-    // Check if it's a component
     if (isComponent(tagName)) {
       return transformComponent(path, state);
     }
 
-    // Build props object
+    // Build props
     const props = [];
-    const eventProps = [];
-    const bindProps = [];
     let hasSpread = false;
     let spreadExpr = null;
+    const eventOptsStatements = [];
 
     for (const attr of attributes) {
       if (t.isJSXSpreadAttribute(attr)) {
@@ -189,147 +192,155 @@ export default function whatBabelPlugin({ types: t }) {
         continue;
       }
 
-      const attrName = attr.name.name || attr.name;
+      const attrName = typeof attr.name.name === 'string' ? attr.name.name : String(attr.name.name);
 
       // Handle event modifiers: onClick|preventDefault
       if (attrName.startsWith('on') && attrName.includes('|')) {
         const { eventName, modifiers } = parseEventModifiers(attrName);
-        const handler = transformAttributeValue(attr.value);
+        const handler = getAttributeValue(attr.value);
         const wrappedHandler = createEventHandler(handler, modifiers);
 
-        eventProps.push(
-          t.objectProperty(
-            t.stringLiteral(eventName),
-            t.objectExpression([
-              t.objectProperty(t.identifier('handler'), wrappedHandler),
-              t.objectProperty(
-                t.identifier('modifiers'),
-                t.arrayExpression(modifiers.map(m => t.stringLiteral(m)))
-              )
-            ])
-          )
-        );
+        // Check if we need _eventOpts (once/capture/passive)
+        const optionMods = modifiers.filter(m => EVENT_OPTION_MODIFIERS.has(m));
+        if (optionMods.length > 0) {
+          // Need a temp variable for the handler to attach _eventOpts
+          const tempId = path.scope
+            ? path.scope.generateUidIdentifier('handler')
+            : t.identifier('_h' + Math.random().toString(36).slice(2, 6));
+
+          // We'll use an IIFE: (() => { const _h = handler; _h._eventOpts = {...}; return _h; })()
+          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;
       }
 
-      // Handle two-way binding: bind:value
+      // Handle two-way binding: bind:value={sig}
       if (isBindingAttribute(attrName)) {
         const bindProp = getBindingProperty(attrName);
-        const signal = attr.value.expression;
-
-        bindProps.push(
-          t.objectProperty(
-            t.stringLiteral(bindProp),
-            signal
-          )
-        );
+        const signalExpr = attr.value.expression;
+
+        if (bindProp === 'value') {
+          // { value: sig(), onInput: (e) => sig.set(e.target.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') {
+          // { checked: sig(), onChange: (e) => sig.set(e.target.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 regular attributes
-      const isDynamic = t.isJSXExpressionContainer(attr.value) && mightBeSignal(attr.value?.expression);
-      const value = transformAttributeValue(attr.value, isDynamic);
+      // Regular attributes
+      const value = getAttributeValue(attr.value);
 
-      // Use the correct attribute name (className -> class for DOM)
+      // Normalize className -> class, htmlFor -> for
       let domAttrName = attrName;
       if (attrName === 'className') domAttrName = 'class';
       if (attrName === 'htmlFor') domAttrName = 'for';
 
       props.push(
         t.objectProperty(
-          t.stringLiteral(domAttrName),
+          // Use identifier for valid JS identifiers, string literal otherwise
+          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(domAttrName)
+            ? t.identifier(domAttrName)
+            : t.stringLiteral(domAttrName),
           value
         )
       );
     }
 
-    // Transform children
-    const transformedChildren = [];
-    for (const child of children) {
-      if (t.isJSXText(child)) {
-        const text = child.value.trim();
-        if (text) {
-          transformedChildren.push(t.stringLiteral(text));
-        }
-      } else if (t.isJSXExpressionContainer(child)) {
-        if (!t.isJSXEmptyExpression(child.expression)) {
-          const expr = child.expression;
-          // Wrap signal expressions for reactivity
-          if (mightBeSignal(expr)) {
-            transformedChildren.push(
-              t.arrowFunctionExpression([], expr)
-            );
-          } else {
-            transformedChildren.push(expr);
-          }
-        }
-      } else if (t.isJSXElement(child)) {
-        // Recursively transform child elements
-        transformedChildren.push(transformElement({ node: child }, state));
-      } else if (t.isJSXFragment(child)) {
-        // Handle fragments
-        for (const fragChild of child.children) {
-          if (t.isJSXElement(fragChild)) {
-            transformedChildren.push(transformElement({ node: fragChild }, state));
-          }
-        }
-      }
-    }
-
-    // Build the createElement call
-    const args = [
-      t.stringLiteral(tagName)
-    ];
-
-    // Props object
-    const propsObj = [];
-    if (props.length > 0) {
-      propsObj.push(...props);
-    }
-    if (eventProps.length > 0) {
-      propsObj.push(
-        t.objectProperty(
-          t.identifier('_events'),
-          t.objectExpression(eventProps)
-        )
-      );
-    }
-    if (bindProps.length > 0) {
-      propsObj.push(
-        t.objectProperty(
-          t.identifier('_bindings'),
-          t.objectExpression(bindProps)
-        )
-      );
-    }
+    // Build the h() call: h(tag, props, ...children)
+    const transformedChildren = transformChildren(children, state);
 
+    let propsExpr;
     if (hasSpread) {
-      // Merge spread with props
-      args.push(
-        t.callExpression(
+      if (props.length > 0) {
+        propsExpr = t.callExpression(
           t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-          [t.objectExpression([]), spreadExpr, t.objectExpression(propsObj)]
-        )
-      );
+          [t.objectExpression([]), spreadExpr, t.objectExpression(props)]
+        );
+      } else {
+        propsExpr = spreadExpr;
+      }
+    } else if (props.length > 0) {
+      propsExpr = t.objectExpression(props);
     } else {
-      args.push(t.objectExpression(propsObj));
-    }
-
-    // Children array
-    if (transformedChildren.length > 0) {
-      args.push(t.arrayExpression(transformedChildren));
+      propsExpr = t.nullLiteral();
     }
 
-    // Determine if SVG context
-    const isSvg = isSVGElement(tagName);
-
-    // Call the appropriate createElement function
-    const createFn = isSvg ? '_createSVGElement' : '_createElement';
+    const args = [t.stringLiteral(tagName), propsExpr, ...transformedChildren];
 
-    return t.callExpression(
-      t.identifier(createFn),
-      args
-    );
+    state.needsH = true;
+    return t.callExpression(t.identifier('h'), args);
   }
 
   // Transform component JSX
@@ -348,13 +359,11 @@ export default function whatBabelPlugin({ types: t }) {
       if (t.isJSXAttribute(attr)) {
         const name = attr.name.name;
         if (name && name.startsWith('client:')) {
-          clientDirective = name.slice(7); // 'load', 'idle', 'visible', etc.
+          const mode = name.slice(7); // 'load', 'idle', 'visible', etc.
           if (attr.value) {
-            // client:media="(max-width: 768px)"
-            clientDirective = {
-              type: clientDirective,
-              value: attr.value.value
-            };
+            clientDirective = { type: mode, value: attr.value.value };
+          } else {
+            clientDirective = { type: mode };
           }
           continue;
         }
@@ -362,7 +371,43 @@ export default function whatBabelPlugin({ types: t }) {
       filteredAttrs.push(attr);
     }
 
-    // Build props object
+    // Handle islands — h(Island, { component: Comp, mode: 'idle', ...props })
+    if (clientDirective) {
+      state.needsH = 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)
+          )
+        );
+      }
+
+      // Add remaining props
+      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));
+      }
+
+      return t.callExpression(
+        t.identifier('h'),
+        [t.identifier('Island'), t.objectExpression(islandProps)]
+      );
+    }
+
+    // Build props
     const props = [];
     let hasSpread = false;
     let spreadExpr = null;
@@ -375,97 +420,56 @@ export default function whatBabelPlugin({ types: t }) {
       }
 
       const attrName = attr.name.name;
-      const value = transformAttributeValue(attr.value);
+      const value = getAttributeValue(attr.value);
 
       props.push(
         t.objectProperty(
-          t.identifier(attrName),
+          /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(attrName)
+            ? t.identifier(attrName)
+            : t.stringLiteral(attrName),
           value
         )
       );
     }
 
-    // Handle children
-    const transformedChildren = [];
-    for (const child of children) {
-      if (t.isJSXText(child)) {
-        const text = child.value.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(transformElement({ node: child }, state));
-      }
-    }
-
-    // Add children to props if present
-    if (transformedChildren.length > 0) {
-      if (transformedChildren.length === 1) {
-        props.push(
-          t.objectProperty(
-            t.identifier('children'),
-            transformedChildren[0]
-          )
-        );
-      } else {
-        props.push(
-          t.objectProperty(
-            t.identifier('children'),
-            t.arrayExpression(transformedChildren)
-          )
-        );
-      }
-    }
+    // Transform children
+    const transformedChildren = transformChildren(children, state);
 
     // Build props expression
     let propsExpr;
     if (hasSpread) {
-      propsExpr = t.callExpression(
-        t.memberExpression(t.identifier('Object'), t.identifier('assign')),
-        [t.objectExpression([]), spreadExpr, t.objectExpression(props)]
-      );
-    } else {
+      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();
     }
 
-    // Handle control flow components specially
-    if (CONTROL_FLOW_COMPONENTS.has(componentName)) {
-      return t.callExpression(
-        t.identifier(`_${componentName}`),
-        [propsExpr]
-      );
-    }
+    // h(Component, props, ...children)
+    const args = [t.identifier(componentName), propsExpr, ...transformedChildren];
 
-    // Handle islands
-    if (clientDirective) {
-      const directiveValue = typeof clientDirective === 'object'
-        ? t.objectExpression([
-            t.objectProperty(t.identifier('type'), t.stringLiteral(clientDirective.type)),
-            t.objectProperty(t.identifier('value'), t.stringLiteral(clientDirective.value))
-          ])
-        : t.stringLiteral(clientDirective);
+    state.needsH = true;
+    return t.callExpression(t.identifier('h'), args);
+  }
 
-      return t.callExpression(
-        t.identifier('_createIsland'),
-        [
-          t.identifier(componentName),
-          propsExpr,
-          directiveValue
-        ]
-      );
-    }
+  // Transform JSX fragment to h(Fragment, null, ...children)
+  function transformFragment(path, state) {
+    const { node } = path;
+    const transformedChildren = transformChildren(node.children, state);
+
+    state.needsH = true;
+    state.needsFragment = true;
 
-    // Regular component call
     return t.callExpression(
-      t.identifier('_createComponent'),
-      [
-        t.identifier(componentName),
-        propsExpr
-      ]
+      t.identifier('h'),
+      [t.identifier('Fragment'), t.nullLiteral(), ...transformedChildren]
     );
   }
 
@@ -475,60 +479,80 @@ export default function whatBabelPlugin({ types: t }) {
     visitor: {
       Program: {
         enter(path, state) {
-          state.needsRuntime = false;
-          state.usedHelpers = new Set();
+          state.needsH = false;
+          state.needsFragment = false;
+          state.needsIsland = false;
         },
 
         exit(path, state) {
-          if (state.needsRuntime) {
-            // Add runtime imports at the top
-            const helpers = Array.from(state.usedHelpers);
+          if (!state.needsH) return;
+
+          // Build imports from what-core
+          const coreSpecifiers = [
+            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'))
+            );
+          }
+
+          const importDecl = t.importDeclaration(
+            coreSpecifiers,
+            t.stringLiteral('what-core')
+          );
+
+          // Check if what-core is already imported
+          let existingImport = null;
+          for (const node of path.node.body) {
+            if (t.isImportDeclaration(node) && node.source.value === 'what-core') {
+              existingImport = node;
+              break;
+            }
+          }
+
+          // Also check what-framework (alias)
+          if (!existingImport) {
+            for (const node of path.node.body) {
+              if (t.isImportDeclaration(node) && node.source.value === 'what-framework') {
+                existingImport = node;
+                break;
+              }
+            }
+          }
 
-            const importDecl = t.importDeclaration(
-              helpers.map(h => t.importSpecifier(t.identifier(h), t.identifier(h))),
-              t.stringLiteral('what-compiler/runtime')
+          if (existingImport) {
+            // Add missing specifiers to existing import
+            const existingNames = new Set(
+              existingImport.specifiers
+                .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);
+              }
+            }
+          } else {
             path.unshiftContainer('body', importDecl);
           }
         }
       },
 
       JSXElement(path, state) {
-        state.needsRuntime = true;
-        state.usedHelpers.add('_createElement');
-        state.usedHelpers.add('_createComponent');
-
         const transformed = transformElement(path, state);
         path.replaceWith(transformed);
       },
 
       JSXFragment(path, state) {
-        state.needsRuntime = true;
-        state.usedHelpers.add('_Fragment');
-
-        const children = [];
-        for (const child of path.node.children) {
-          if (t.isJSXText(child)) {
-            const text = child.value.trim();
-            if (text) {
-              children.push(t.stringLiteral(text));
-            }
-          } else if (t.isJSXExpressionContainer(child)) {
-            if (!t.isJSXEmptyExpression(child.expression)) {
-              children.push(child.expression);
-            }
-          } else if (t.isJSXElement(child)) {
-            children.push(transformElement({ node: child }, state));
-          }
-        }
-
-        path.replaceWith(
-          t.callExpression(
-            t.identifier('_Fragment'),
-            [t.arrayExpression(children)]
-          )
-        );
+        const transformed = transformFragment(path, state);
+        path.replaceWith(transformed);
       }
     }
   };

package/src/runtime.js

@@ -1,537 +1,11 @@
 /**
- * What Framework Runtime
- * Optimized DOM creation and updates with signal reactivity
+ * What Compiler Runtime
+ *
+ * With the unified rendering path (babel plugin → h() → core reconciler),
+ * most runtime helpers are no longer needed. The compiler now outputs h() calls
+ * that go through what-core's VNode reconciler.
+ *
+ * This file re-exports from what-core for backwards compatibility.
  */
 
-import { effect, untrack, batch } from 'what-core';
-
-// Check if value is a signal (callable with .set)
-function isSignal(value) {
-  return typeof value === 'function' && typeof value.set === 'function';
-}
-
-// Unwrap a potentially reactive value
-function unwrap(value) {
-  if (typeof value === 'function') {
-    return value();
-  }
-  return value;
-}
-
-// Set a DOM property with proper handling
-function setProperty(el, key, value, isSVG = false) {
-  if (key === 'class') {
-    el.className = value ?? '';
-  } else if (key === 'style') {
-    if (typeof value === 'string') {
-      el.style.cssText = value;
-    } else if (typeof value === 'object') {
-      Object.assign(el.style, value);
-    }
-  } else if (key === 'ref') {
-    if (typeof value === 'function') {
-      value(el);
-    } else if (value && typeof value === 'object') {
-      value.current = el;
-    }
-  } else if (key.startsWith('on') && typeof value === 'function') {
-    const eventName = key.slice(2).toLowerCase();
-    el.addEventListener(eventName, value);
-  } else if (key === 'innerHTML' || key === 'textContent') {
-    el[key] = value ?? '';
-  } else if (key in el && !isSVG) {
-    try {
-      el[key] = value;
-    } catch {
-      el.setAttribute(key, value);
-    }
-  } else {
-    if (value === true) {
-      el.setAttribute(key, '');
-    } else if (value === false || value == null) {
-      el.removeAttribute(key);
-    } else {
-      el.setAttribute(key, value);
-    }
-  }
-}
-
-// Create a reactive property binding
-function bindProperty(el, key, getValue, isSVG = false) {
-  let currentValue;
-
-  effect(() => {
-    const newValue = unwrap(getValue);
-    if (newValue !== currentValue) {
-      currentValue = newValue;
-      setProperty(el, key, newValue, isSVG);
-    }
-  });
-}
-
-// Create a text node that updates reactively
-function createReactiveText(getValue) {
-  const node = document.createTextNode('');
-  let currentValue;
-
-  effect(() => {
-    const newValue = String(unwrap(getValue) ?? '');
-    if (newValue !== currentValue) {
-      currentValue = newValue;
-      node.textContent = newValue;
-    }
-  });
-
-  return node;
-}
-
-/**
- * Create a DOM element with optimized property handling
- */
-export function _createElement(tag, props = {}, children = []) {
-  const el = document.createElement(tag);
-  const isSVG = false;
-
-  // Process props
-  for (const [key, value] of Object.entries(props)) {
-    if (key === '_events') {
-      // Handle events with modifiers
-      for (const [eventKey, eventConfig] of Object.entries(value)) {
-        const eventName = eventKey.slice(2).toLowerCase();
-        const { handler, modifiers } = eventConfig;
-
-        const options = {};
-        if (modifiers.includes('capture')) options.capture = true;
-        if (modifiers.includes('passive')) options.passive = true;
-        if (modifiers.includes('once')) options.once = true;
-
-        el.addEventListener(eventName, handler, options);
-      }
-      continue;
-    }
-
-    if (key === '_bindings') {
-      // Handle two-way bindings
-      for (const [bindKey, signal] of Object.entries(value)) {
-        if (bindKey === 'value') {
-          // Input value binding
-          el.value = unwrap(signal);
-
-          effect(() => {
-            const newValue = unwrap(signal);
-            if (el.value !== newValue) {
-              el.value = newValue;
-            }
-          });
-
-          el.addEventListener('input', (e) => {
-            signal.set(e.target.value);
-          });
-        } else if (bindKey === 'checked') {
-          // Checkbox binding
-          el.checked = unwrap(signal);
-
-          effect(() => {
-            el.checked = unwrap(signal);
-          });
-
-          el.addEventListener('change', (e) => {
-            signal.set(e.target.checked);
-          });
-        }
-      }
-      continue;
-    }
-
-    // Check if value is reactive (a function)
-    if (typeof value === 'function' && !key.startsWith('on')) {
-      bindProperty(el, key, value, isSVG);
-    } else {
-      setProperty(el, key, value, isSVG);
-    }
-  }
-
-  // Process children
-  for (const child of children) {
-    appendChild(el, child);
-  }
-
-  return el;
-}
-
-/**
- * Create an SVG element
- */
-export function _createSVGElement(tag, props = {}, children = []) {
-  const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
-  const isSVG = true;
-
-  // Process props
-  for (const [key, value] of Object.entries(props)) {
-    if (key === '_events' || key === '_bindings') continue;
-
-    if (typeof value === 'function' && !key.startsWith('on')) {
-      bindProperty(el, key, value, isSVG);
-    } else {
-      setProperty(el, key, value, isSVG);
-    }
-  }
-
-  // Process children
-  for (const child of children) {
-    appendChild(el, child);
-  }
-
-  return el;
-}
-
-/**
- * Append a child to an element, handling different types
- */
-function appendChild(parent, child) {
-  if (child == null || child === false || child === true) {
-    return;
-  }
-
-  if (typeof child === 'string' || typeof child === 'number') {
-    parent.appendChild(document.createTextNode(String(child)));
-  } else if (typeof child === 'function') {
-    // Reactive child - could be a signal or computed
-    parent.appendChild(createReactiveText(child));
-  } else if (child instanceof Node) {
-    parent.appendChild(child);
-  } else if (Array.isArray(child)) {
-    for (const c of child) {
-      appendChild(parent, c);
-    }
-  } else if (child && typeof child === 'object' && child.tag != null) {
-    // VNode from h() — interop with what-core's VNode system
-    parent.appendChild(renderVNode(child));
-  }
-}
-
-// Convert a what-core VNode to a real DOM node (interop bridge)
-function renderVNode(vnode) {
-  if (vnode == null || vnode === false || vnode === true) return document.createComment('');
-  if (typeof vnode === 'string' || typeof vnode === 'number') return document.createTextNode(String(vnode));
-  if (vnode instanceof Node) return vnode;
-  if (Array.isArray(vnode)) {
-    const frag = document.createDocumentFragment();
-    for (const v of vnode) frag.appendChild(renderVNode(v));
-    return frag;
-  }
-
-  const { tag, props, children } = vnode;
-
-  // Component VNode
-  if (typeof tag === 'function') {
-    const result = tag({ ...props, children });
-    return renderVNode(result);
-  }
-
-  // Element VNode
-  const el = document.createElement(tag);
-  if (props) {
-    for (const [key, val] of Object.entries(props)) {
-      if (key === 'key' || key === 'ref' || key === 'children') continue;
-      if (key.startsWith('on') && typeof val === 'function') {
-        el.addEventListener(key.slice(2).toLowerCase(), val);
-      } else if (key === 'className' || key === 'class') {
-        el.className = val || '';
-      } else if (key === 'style' && typeof val === 'object') {
-        Object.assign(el.style, val);
-      } else if (val !== false && val != null) {
-        el.setAttribute(key, val === true ? '' : String(val));
-      }
-    }
-  }
-  if (children) {
-    for (const child of children) {
-      el.appendChild(renderVNode(child));
-    }
-  }
-  return el;
-}
-
-/**
- * Create a component instance
- */
-export function _createComponent(Component, props) {
-  // Call the component function.
-  // Don't untrack — framework components like Router need signal tracking.
-  const result = Component(props);
-
-  // If the component returned a VNode (from h()), convert to DOM
-  if (result && typeof result === 'object' && !(result instanceof Node) && !Array.isArray(result) && result.tag != null) {
-    return renderVNode(result);
-  }
-
-  return result;
-}
-
-/**
- * Create a fragment (array of nodes)
- */
-export function _Fragment(children) {
-  const fragment = document.createDocumentFragment();
-  for (const child of children) {
-    appendChild(fragment, child);
-  }
-  return fragment;
-}
-
-/**
- * Show component - conditional rendering
- */
-export function _Show(props) {
-  const { when, fallback, children } = props;
-  const marker = document.createComment('Show');
-  let currentNodes = [];
-  let showingMain = null;
-
-  const container = document.createDocumentFragment();
-  container.appendChild(marker);
-
-  effect(() => {
-    const condition = unwrap(when);
-    const shouldShowMain = Boolean(condition);
-
-    if (shouldShowMain === showingMain) return;
-    showingMain = shouldShowMain;
-
-    // Remove current nodes
-    for (const node of currentNodes) {
-      node.parentNode?.removeChild(node);
-    }
-    currentNodes = [];
-
-    // Insert new nodes
-    const content = shouldShowMain ? children : fallback;
-    if (content != null) {
-      const nodes = Array.isArray(content) ? content : [content];
-      for (const node of nodes) {
-        if (node instanceof Node) {
-          marker.parentNode?.insertBefore(node, marker.nextSibling);
-          currentNodes.push(node);
-        } else if (typeof node === 'string') {
-          const textNode = document.createTextNode(node);
-          marker.parentNode?.insertBefore(textNode, marker.nextSibling);
-          currentNodes.push(textNode);
-        }
-      }
-    }
-  });
-
-  return container;
-}
-
-/**
- * For component - list rendering
- */
-export function _For(props) {
-  const { each, children: renderFn } = props;
-  const marker = document.createComment('For');
-  let currentNodes = [];
-  let currentItems = [];
-
-  const container = document.createDocumentFragment();
-  container.appendChild(marker);
-
-  effect(() => {
-    const items = unwrap(each) || [];
-
-    // Simple reconciliation - replace all for now
-    // TODO: Keyed reconciliation for better performance
-    for (const node of currentNodes) {
-      node.parentNode?.removeChild(node);
-    }
-    currentNodes = [];
-
-    const parent = marker.parentNode;
-    if (!parent) return;
-
-    items.forEach((item, index) => {
-      const rendered = renderFn(item, index);
-      if (rendered instanceof Node) {
-        parent.insertBefore(rendered, marker);
-        currentNodes.push(rendered);
-      }
-    });
-
-    currentItems = items;
-  });
-
-  return container;
-}
-
-/**
- * Switch/Match components
- */
-export function _Switch(props) {
-  const { children } = props;
-  const matches = Array.isArray(children) ? children : [children];
-
-  const marker = document.createComment('Switch');
-  let currentNode = null;
-
-  const container = document.createDocumentFragment();
-  container.appendChild(marker);
-
-  effect(() => {
-    // Find first matching condition
-    let matched = null;
-    for (const match of matches) {
-      if (match && match._isMatch && unwrap(match.when)) {
-        matched = match.children;
-        break;
-      }
-    }
-
-    // Remove current
-    if (currentNode) {
-      currentNode.parentNode?.removeChild(currentNode);
-      currentNode = null;
-    }
-
-    // Insert matched
-    if (matched instanceof Node) {
-      marker.parentNode?.insertBefore(matched, marker.nextSibling);
-      currentNode = matched;
-    }
-  });
-
-  return container;
-}
-
-export function _Match(props) {
-  return {
-    _isMatch: true,
-    when: props.when,
-    children: props.children
-  };
-}
-
-/**
- * Create an island (deferred hydration)
- */
-export function _createIsland(Component, props, directive) {
-  const type = typeof directive === 'string' ? directive : directive.type;
-  const value = typeof directive === 'object' ? directive.value : null;
-
-  // Create placeholder element
-  const el = document.createElement('div');
-  el.setAttribute('data-island', Component.name || 'Island');
-  el.setAttribute('data-hydrate', type);
-  if (value) {
-    el.setAttribute('data-hydrate-value', value);
-  }
-
-  // Store props for hydration
-  el._islandProps = props;
-  el._islandComponent = Component;
-
-  // Schedule hydration based on directive
-  switch (type) {
-    case 'load':
-      // Hydrate immediately
-      queueMicrotask(() => hydrateIsland(el));
-      break;
-
-    case 'idle':
-      // Hydrate when browser is idle
-      if ('requestIdleCallback' in window) {
-        requestIdleCallback(() => hydrateIsland(el));
-      } else {
-        setTimeout(() => hydrateIsland(el), 200);
-      }
-      break;
-
-    case 'visible':
-      // Hydrate when visible
-      const observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          observer.disconnect();
-          hydrateIsland(el);
-        }
-      });
-      queueMicrotask(() => observer.observe(el));
-      break;
-
-    case 'interaction':
-      // Hydrate on first interaction
-      const hydrate = () => {
-        el.removeEventListener('click', hydrate);
-        el.removeEventListener('focus', hydrate);
-        el.removeEventListener('mouseenter', hydrate);
-        hydrateIsland(el);
-      };
-      el.addEventListener('click', hydrate, { once: true });
-      el.addEventListener('focus', hydrate, { once: true });
-      el.addEventListener('mouseenter', hydrate, { once: true });
-      break;
-
-    case 'media':
-      // Hydrate when media query matches
-      const mq = window.matchMedia(value);
-      const checkMedia = () => {
-        if (mq.matches) {
-          mq.removeEventListener('change', checkMedia);
-          hydrateIsland(el);
-        }
-      };
-      if (mq.matches) {
-        queueMicrotask(() => hydrateIsland(el));
-      } else {
-        mq.addEventListener('change', checkMedia);
-      }
-      break;
-  }
-
-  return el;
-}
-
-function hydrateIsland(el) {
-  const Component = el._islandComponent;
-  const props = el._islandProps;
-
-  if (!Component) return;
-
-  const rendered = _createComponent(Component, props);
-  if (rendered instanceof Node) {
-    el.replaceWith(rendered);
-  }
-
-  // Dispatch event for tracking
-  document.dispatchEvent(new CustomEvent('island:hydrated', {
-    detail: { component: Component.name }
-  }));
-}
-
-/**
- * Mount a component to the DOM
- */
-export function mount(component, container) {
-  const target = typeof container === 'string'
-    ? document.querySelector(container)
-    : container;
-
-  if (!target) {
-    throw new Error(`Mount target not found: ${container}`);
-  }
-
-  // Clear container
-  target.innerHTML = '';
-
-  // Render component
-  const rendered = typeof component === 'function'
-    ? component()
-    : component;
-
-  if (rendered instanceof Node) {
-    target.appendChild(rendered);
-  }
-
-  return () => {
-    target.innerHTML = '';
-  };
-}
+export { h, Fragment, mount, Island } from 'what-core';

package/src/vite-plugin.js

@@ -1,6 +1,7 @@
 /**
  * What Framework Vite Plugin
- * Enables JSX transformation and other optimizations
+ * Enables JSX transformation via the What babel plugin.
+ * JSX is compiled to h() calls that go through what-core's VNode reconciler.
  */
 
 import { transformSync } from '@babel/core';
@@ -57,10 +58,8 @@ export default function whatVitePlugin(options = {}) {
     config(config, { mode }) {
       return {
         esbuild: {
-          // Let our plugin handle JSX, not esbuild
+          // Preserve JSX so our babel plugin handles it — don't let esbuild transform it
           jsx: 'preserve',
-          jsxFactory: '_createElement',
-          jsxFragment: '_Fragment'
         },
         optimizeDeps: {
           // Pre-bundle the framework