what-compiler 0.1.0

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "what-compiler",
+  "version": "0.1.0",
+  "description": "JSX compiler for What Framework - transforms JSX to optimized DOM operations",
+  "main": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.js",
+    "./babel": "./src/babel-plugin.js",
+    "./vite": "./src/vite-plugin.js"
+  },
+  "keywords": [
+    "what",
+    "framework",
+    "compiler",
+    "jsx",
+    "babel",
+    "vite"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "@babel/core": "^7.0.0"
+  },
+  "files": [
+    "src"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0"
+  }
+}

package/src/babel-plugin.js

@@ -0,0 +1,535 @@
+/**
+ * What Framework Babel Plugin
+ * Transforms JSX into optimized DOM operations
+ *
+ * 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
+ */
+
+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'
+]);
+
+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
+  function parseEventModifiers(name) {
+    const parts = name.split('|');
+    const eventName = parts[0];
+    const modifiers = parts.slice(1).filter(m => EVENT_MODIFIERS.has(m));
+    return { eventName, modifiers };
+  }
+
+  // Check if attribute is a binding
+  function isBindingAttribute(name) {
+    return name.startsWith('bind:');
+  }
+
+  // Get the binding property from bind:value -> value
+  function getBindingProperty(name) {
+    return name.slice(5); // Remove 'bind:'
+  }
+
+  // Check if element is a component (starts with uppercase)
+  function isComponent(name) {
+    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;
+    }
+
+    return t.stringLiteral(value.value || '');
+  }
+
+  // Create event handler with modifiers
+  function createEventHandler(handler, modifiers) {
+    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([
+              t.expressionStatement(
+                t.callExpression(
+                  t.memberExpression(t.identifier('e'), t.identifier('preventDefault')),
+                  []
+                )
+              ),
+              t.expressionStatement(
+                t.callExpression(wrappedHandler, [t.identifier('e')])
+              )
+            ])
+          );
+          break;
+
+        case 'stopPropagation':
+          wrappedHandler = t.arrowFunctionExpression(
+            [t.identifier('e')],
+            t.blockStatement([
+              t.expressionStatement(
+                t.callExpression(
+                  t.memberExpression(t.identifier('e'), t.identifier('stopPropagation')),
+                  []
+                )
+              ),
+              t.expressionStatement(
+                t.callExpression(wrappedHandler, [t.identifier('e')])
+              )
+            ])
+          );
+          break;
+
+        case 'self':
+          // (e) => { if (e.target === e.currentTarget) handler(e); }
+          wrappedHandler = t.arrowFunctionExpression(
+            [t.identifier('e')],
+            t.blockStatement([
+              t.ifStatement(
+                t.binaryExpression(
+                  '===',
+                  t.memberExpression(t.identifier('e'), t.identifier('target')),
+                  t.memberExpression(t.identifier('e'), t.identifier('currentTarget'))
+                ),
+                t.expressionStatement(
+                  t.callExpression(wrappedHandler, [t.identifier('e')])
+                )
+              )
+            ])
+          );
+          break;
+
+        case 'once':
+        case 'capture':
+        case 'passive':
+          // These are handled at addEventListener level, mark them
+          // Will be processed by the runtime
+          break;
+      }
+    }
+
+    return wrappedHandler;
+  }
+
+  // Transform JSX element to createElement call
+  function transformElement(path, state) {
+    const { node } = path;
+    const openingElement = node.openingElement;
+    const tagName = openingElement.name.name;
+    const attributes = openingElement.attributes;
+    const children = node.children;
+
+    // Check if it's a component
+    if (isComponent(tagName)) {
+      return transformComponent(path, state);
+    }
+
+    // Build props object
+    const props = [];
+    const eventProps = [];
+    const bindProps = [];
+    let hasSpread = false;
+    let spreadExpr = null;
+
+    for (const attr of attributes) {
+      if (t.isJSXSpreadAttribute(attr)) {
+        hasSpread = true;
+        spreadExpr = attr.argument;
+        continue;
+      }
+
+      const attrName = attr.name.name || attr.name;
+
+      // Handle event modifiers: onClick|preventDefault
+      if (attrName.startsWith('on') && attrName.includes('|')) {
+        const { eventName, modifiers } = parseEventModifiers(attrName);
+        const handler = transformAttributeValue(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)))
+              )
+            ])
+          )
+        );
+        continue;
+      }
+
+      // Handle two-way binding: bind:value
+      if (isBindingAttribute(attrName)) {
+        const bindProp = getBindingProperty(attrName);
+        const signal = attr.value.expression;
+
+        bindProps.push(
+          t.objectProperty(
+            t.stringLiteral(bindProp),
+            signal
+          )
+        );
+        continue;
+      }
+
+      // Handle regular attributes
+      const isDynamic = t.isJSXExpressionContainer(attr.value) && mightBeSignal(attr.value?.expression);
+      const value = transformAttributeValue(attr.value, isDynamic);
+
+      // Use the correct attribute name (className -> class for DOM)
+      let domAttrName = attrName;
+      if (attrName === 'className') domAttrName = 'class';
+      if (attrName === 'htmlFor') domAttrName = 'for';
+
+      props.push(
+        t.objectProperty(
+          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)
+        )
+      );
+    }
+
+    if (hasSpread) {
+      // Merge spread with props
+      args.push(
+        t.callExpression(
+          t.memberExpression(t.identifier('Object'), t.identifier('assign')),
+          [t.objectExpression([]), spreadExpr, t.objectExpression(propsObj)]
+        )
+      );
+    } else {
+      args.push(t.objectExpression(propsObj));
+    }
+
+    // Children array
+    if (transformedChildren.length > 0) {
+      args.push(t.arrayExpression(transformedChildren));
+    }
+
+    // Determine if SVG context
+    const isSvg = isSVGElement(tagName);
+
+    // Call the appropriate createElement function
+    const createFn = isSvg ? '_createSVGElement' : '_createElement';
+
+    return t.callExpression(
+      t.identifier(createFn),
+      args
+    );
+  }
+
+  // Transform component JSX
+  function transformComponent(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 directives (islands)
+    let clientDirective = null;
+    const filteredAttrs = [];
+
+    for (const attr of attributes) {
+      if (t.isJSXAttribute(attr)) {
+        const name = attr.name.name;
+        if (name && name.startsWith('client:')) {
+          clientDirective = name.slice(7); // 'load', 'idle', 'visible', etc.
+          if (attr.value) {
+            // client:media="(max-width: 768px)"
+            clientDirective = {
+              type: clientDirective,
+              value: attr.value.value
+            };
+          }
+          continue;
+        }
+      }
+      filteredAttrs.push(attr);
+    }
+
+    // Build props object
+    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 = attr.name.name;
+      const value = transformAttributeValue(attr.value);
+
+      props.push(
+        t.objectProperty(
+          t.identifier(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)
+          )
+        );
+      }
+    }
+
+    // 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 {
+      propsExpr = t.objectExpression(props);
+    }
+
+    // Handle control flow components specially
+    if (CONTROL_FLOW_COMPONENTS.has(componentName)) {
+      return t.callExpression(
+        t.identifier(`_${componentName}`),
+        [propsExpr]
+      );
+    }
+
+    // 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);
+
+      return t.callExpression(
+        t.identifier('_createIsland'),
+        [
+          t.identifier(componentName),
+          propsExpr,
+          directiveValue
+        ]
+      );
+    }
+
+    // Regular component call
+    return t.callExpression(
+      t.identifier('_createComponent'),
+      [
+        t.identifier(componentName),
+        propsExpr
+      ]
+    );
+  }
+
+  return {
+    name: 'what-jsx-transform',
+
+    visitor: {
+      Program: {
+        enter(path, state) {
+          state.needsRuntime = false;
+          state.usedHelpers = new Set();
+        },
+
+        exit(path, state) {
+          if (state.needsRuntime) {
+            // Add runtime imports at the top
+            const helpers = Array.from(state.usedHelpers);
+
+            const importDecl = t.importDeclaration(
+              helpers.map(h => t.importSpecifier(t.identifier(h), t.identifier(h))),
+              t.stringLiteral('what-framework/runtime')
+            );
+
+            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)]
+          )
+        );
+      }
+    }
+  };
+}

package/src/index.js

@@ -0,0 +1,8 @@
+/**
+ * What Compiler
+ * JSX transformation and build-time optimizations
+ */
+
+export { default as babelPlugin } from './babel-plugin.js';
+export { default as vitePlugin, what } from './vite-plugin.js';
+export * from './runtime.js';

package/src/runtime.js

@@ -0,0 +1,483 @@
+/**
+ * What Framework Runtime
+ * Optimized DOM creation and updates with signal reactivity
+ */
+
+import { effect, untrack, batch } from 'what-framework';
+
+// 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);
+    }
+  }
+}
+
+/**
+ * Create a component instance
+ */
+export function _createComponent(Component, props) {
+  // Components are just functions that return DOM nodes
+  return untrack(() => Component(props));
+}
+
+/**
+ * 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 = '';
+  };
+}

package/src/vite-plugin.js

@@ -0,0 +1,92 @@
+/**
+ * What Framework Vite Plugin
+ * Enables JSX transformation and other optimizations
+ */
+
+import { transformSync } from '@babel/core';
+import whatBabelPlugin from './babel-plugin.js';
+
+export default function whatVitePlugin(options = {}) {
+  const {
+    // File extensions to process
+    include = /\.[jt]sx$/,
+    // Files to exclude
+    exclude = /node_modules/,
+    // Enable source maps
+    sourceMaps = true,
+    // Production optimizations
+    production = process.env.NODE_ENV === 'production'
+  } = options;
+
+  return {
+    name: 'vite-plugin-what',
+
+    // Transform JSX files
+    transform(code, id) {
+      // Check if we should process this file
+      if (!include.test(id)) return null;
+      if (exclude && exclude.test(id)) return null;
+
+      try {
+        const result = transformSync(code, {
+          filename: id,
+          sourceMaps,
+          plugins: [
+            [whatBabelPlugin, { production }]
+          ],
+          parserOpts: {
+            plugins: ['jsx', 'typescript']
+          }
+        });
+
+        if (!result || !result.code) {
+          return null;
+        }
+
+        return {
+          code: result.code,
+          map: result.map
+        };
+      } catch (error) {
+        console.error(`[what] Error transforming ${id}:`, error.message);
+        throw error;
+      }
+    },
+
+    // Resolve what-framework imports
+    resolveId(id) {
+      if (id === 'what-framework/runtime') {
+        return '\0what-runtime';
+      }
+      return null;
+    },
+
+    // Load virtual modules
+    load(id) {
+      if (id === '\0what-runtime') {
+        // Return the runtime module
+        return `export * from 'what-compiler/runtime';`;
+      }
+      return null;
+    },
+
+    // Configure for development
+    config(config, { mode }) {
+      return {
+        esbuild: {
+          // Let our plugin handle JSX, not esbuild
+          jsx: 'preserve',
+          jsxFactory: '_createElement',
+          jsxFragment: '_Fragment'
+        },
+        optimizeDeps: {
+          // Pre-bundle the framework
+          include: ['what-framework']
+        }
+      };
+    }
+  };
+}
+
+// Named export for compatibility
+export { whatVitePlugin as what };