what-core 0.1.0 → 0.2.0

package/dist/testing.js

@@ -0,0 +1,367 @@
+// What Framework - Testing Utilities
+// Helpers for testing components, similar to @testing-library/react
+// Works with Node.js test runner or any test framework
+
+import { mount, h, signal, batch, effect } from './index.js';
+
+// Minimal DOM implementation for Node.js
+let container = null;
+
+// --- Setup and Cleanup ---
+
+export function setupDOM() {
+  if (typeof document !== 'undefined') {
+    // Browser environment
+    container = document.createElement('div');
+    container.id = 'test-root';
+    document.body.appendChild(container);
+  }
+  return container;
+}
+
+export function cleanup() {
+  if (container) {
+    container.innerHTML = '';
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    container = null;
+  }
+}
+
+// --- Render ---
+
+export function render(vnode, options = {}) {
+  const { container: customContainer } = options;
+  const target = customContainer || setupDOM();
+
+  if (!target) {
+    throw new Error('No DOM container available. Are you running in Node.js without jsdom?');
+  }
+
+  const unmount = mount(vnode, target);
+
+  return {
+    container: target,
+    unmount,
+    // Query helpers
+    getByText: (text) => queryByText(target, text),
+    getByTestId: (id) => target.querySelector(`[data-testid="${id}"]`),
+    getByRole: (role) => target.querySelector(`[role="${role}"]`),
+    getAllByText: (text) => queryAllByText(target, text),
+    queryByText: (text) => queryByText(target, text),
+    queryByTestId: (id) => target.querySelector(`[data-testid="${id}"]`),
+    // Debug
+    debug: () => console.log(target.innerHTML),
+    // Async utilities
+    findByText: (text, timeout) => waitFor(() => queryByText(target, text), { timeout }),
+    findByTestId: (id, timeout) => waitFor(() => target.querySelector(`[data-testid="${id}"]`), { timeout }),
+  };
+}
+
+// --- Query Helpers ---
+
+function queryByText(container, text) {
+  const regex = text instanceof RegExp ? text : null;
+  const walker = document.createTreeWalker(
+    container,
+    NodeFilter.SHOW_TEXT,
+    null,
+    false
+  );
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    const matches = regex
+      ? regex.test(node.textContent)
+      : node.textContent.includes(text);
+    if (matches) {
+      return node.parentElement;
+    }
+  }
+  return null;
+}
+
+function queryAllByText(container, text) {
+  const results = [];
+  const regex = text instanceof RegExp ? text : null;
+  const walker = document.createTreeWalker(
+    container,
+    NodeFilter.SHOW_TEXT,
+    null,
+    false
+  );
+
+  while (walker.nextNode()) {
+    const node = walker.currentNode;
+    const matches = regex
+      ? regex.test(node.textContent)
+      : node.textContent.includes(text);
+    if (matches) {
+      results.push(node.parentElement);
+    }
+  }
+  return results;
+}
+
+// --- Fire Events ---
+
+export const fireEvent = {
+  click(element) {
+    const event = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      view: typeof window !== 'undefined' ? window : undefined,
+    });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  change(element, value) {
+    element.value = value;
+    const event = new Event('input', { bubbles: true });
+    element.dispatchEvent(event);
+    const changeEvent = new Event('change', { bubbles: true });
+    element.dispatchEvent(changeEvent);
+    return changeEvent;
+  },
+
+  input(element, value) {
+    element.value = value;
+    const event = new Event('input', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  submit(element) {
+    const event = new Event('submit', { bubbles: true, cancelable: true });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  focus(element) {
+    element.focus();
+    const event = new FocusEvent('focus', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  blur(element) {
+    element.blur();
+    const event = new FocusEvent('blur', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  keyDown(element, key, options = {}) {
+    const event = new KeyboardEvent('keydown', {
+      bubbles: true,
+      cancelable: true,
+      key,
+      ...options,
+    });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  keyUp(element, key, options = {}) {
+    const event = new KeyboardEvent('keyup', {
+      bubbles: true,
+      cancelable: true,
+      key,
+      ...options,
+    });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  mouseEnter(element) {
+    const event = new MouseEvent('mouseenter', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+  },
+
+  mouseLeave(element) {
+    const event = new MouseEvent('mouseleave', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+  },
+};
+
+// --- Wait Utilities ---
+
+export async function waitFor(callback, options = {}) {
+  const { timeout = 1000, interval = 50 } = options;
+  const startTime = Date.now();
+
+  while (Date.now() - startTime < timeout) {
+    try {
+      const result = callback();
+      if (result) return result;
+    } catch (e) {
+      // Keep waiting
+    }
+    await new Promise(r => setTimeout(r, interval));
+  }
+
+  throw new Error(`waitFor timed out after ${timeout}ms`);
+}
+
+export async function waitForElementToBeRemoved(callback, options = {}) {
+  const { timeout = 1000, interval = 50 } = options;
+  const startTime = Date.now();
+
+  // First, element should exist
+  let element = callback();
+  if (!element) {
+    throw new Error('Element not found');
+  }
+
+  // Then wait for it to be removed
+  while (Date.now() - startTime < timeout) {
+    element = callback();
+    if (!element) return;
+    await new Promise(r => setTimeout(r, interval));
+  }
+
+  throw new Error(`Element still present after ${timeout}ms`);
+}
+
+// --- Act ---
+// Ensure all effects and updates are flushed
+
+export async function act(callback) {
+  const result = await callback();
+  // Wait for microtasks to flush
+  await new Promise(r => queueMicrotask(r));
+  // Wait for any scheduled effects
+  await new Promise(r => setTimeout(r, 0));
+  return result;
+}
+
+// --- Signal Testing Helpers ---
+
+export function createTestSignal(initial) {
+  const s = signal(initial);
+  const history = [initial];
+
+  // Track all changes
+  effect(() => {
+    history.push(s());
+  });
+
+  return {
+    signal: s,
+    get value() { return s(); },
+    set value(v) { s.set(v); },
+    history,
+    reset() {
+      history.length = 0;
+      history.push(s());
+    },
+  };
+}
+
+// --- Mocking ---
+
+export function mockComponent(name = 'MockComponent') {
+  const calls = [];
+
+  function Mock(props) {
+    calls.push({ props, timestamp: Date.now() });
+    return h('div', { 'data-testid': `mock-${name}` },
+      JSON.stringify(props, null, 2)
+    );
+  }
+
+  Mock.displayName = name;
+  Mock.calls = calls;
+  Mock.lastCall = () => calls[calls.length - 1];
+  Mock.reset = () => { calls.length = 0; };
+
+  return Mock;
+}
+
+// --- Assertions ---
+
+export const expect = {
+  toBeInTheDocument(element) {
+    if (!element || !element.parentNode) {
+      throw new Error('Expected element to be in the document');
+    }
+  },
+
+  toHaveTextContent(element, text) {
+    if (!element) {
+      throw new Error('Element not found');
+    }
+    const content = element.textContent;
+    const matches = text instanceof RegExp ? text.test(content) : content.includes(text);
+    if (!matches) {
+      throw new Error(`Expected "${content}" to contain "${text}"`);
+    }
+  },
+
+  toHaveAttribute(element, attr, value) {
+    if (!element) {
+      throw new Error('Element not found');
+    }
+    const attrValue = element.getAttribute(attr);
+    if (value !== undefined && attrValue !== value) {
+      throw new Error(`Expected attribute "${attr}" to be "${value}", got "${attrValue}"`);
+    }
+    if (value === undefined && attrValue === null) {
+      throw new Error(`Expected element to have attribute "${attr}"`);
+    }
+  },
+
+  toHaveClass(element, className) {
+    if (!element) {
+      throw new Error('Element not found');
+    }
+    if (!element.classList.contains(className)) {
+      throw new Error(`Expected element to have class "${className}"`);
+    }
+  },
+
+  toBeVisible(element) {
+    if (!element) {
+      throw new Error('Element not found');
+    }
+    const style = window.getComputedStyle(element);
+    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+      throw new Error('Expected element to be visible');
+    }
+  },
+
+  toBeDisabled(element) {
+    if (!element) {
+      throw new Error('Element not found');
+    }
+    if (!element.disabled) {
+      throw new Error('Expected element to be disabled');
+    }
+  },
+
+  toHaveValue(element, value) {
+    if (!element) {
+      throw new Error('Element not found');
+    }
+    if (element.value !== value) {
+      throw new Error(`Expected value to be "${value}", got "${element.value}"`);
+    }
+  },
+};
+
+// --- Screen ---
+// Global query object for convenience
+
+export const screen = {
+  getByText: (text) => queryByText(document.body, text),
+  getByTestId: (id) => document.querySelector(`[data-testid="${id}"]`),
+  getByRole: (role) => document.querySelector(`[role="${role}"]`),
+  getAllByText: (text) => queryAllByText(document.body, text),
+  queryByText: (text) => queryByText(document.body, text),
+  queryByTestId: (id) => document.querySelector(`[data-testid="${id}"]`),
+  debug: () => console.log(document.body.innerHTML),
+};

package/dist/what.js

@@ -16,8 +16,8 @@ onMount,
 onCleanup,
 createResource,
 } from './hooks.js';
-export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match } from './components.js';
-export { createStore, atom } from './store.js';
+export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match, Island } from './components.js';
+export { createStore, storeComputed, atom } from './store.js';
 export { Head, clearHead } from './head.js';
 export {
 show,

package/index.d.ts

@@ -147,12 +147,27 @@ export type Store<T extends StoreDefinition> = {
   [K in keyof T]: T[K] extends (...args: any[]) => any ? T[K] : T[K];
 };
 
+/** Mark a function as a computed property in a store definition */
+export function storeComputed<T>(fn: (state: any) => T): (state: any) => T;
+
 /** Create a global reactive store */
 export function createStore<T extends StoreDefinition>(definition: T): () => Store<T>;
 
 /** Create a simple global atom */
 export function atom<T>(initial: T): Signal<T>;
 
+// --- Island ---
+
+export interface IslandProps {
+  component: Component<any>;
+  mode: 'load' | 'idle' | 'visible' | 'interaction' | 'media';
+  mediaQuery?: string;
+  [key: string]: any;
+}
+
+/** Island component for deferred hydration */
+export function Island(props: IslandProps): VNode;
+
 // --- Utilities ---
 
 /** Conditional rendering helper */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "What Framework - The closest framework to vanilla JS",
   "type": "module",
   "main": "dist/what.js",

package/src/components.js

@@ -202,3 +202,96 @@ export function Match({ when, children }) {
   // Match is just a marker component, Switch handles the logic
   return { tag: Match, props: { when }, children, _vnode: true };
 }
+
+// --- Island ---
+// Deferred hydration component for islands architecture.
+// Usage: h(Island, { component: Counter, mode: 'idle' })
+// The babel plugin compiles <Counter client:idle /> into this.
+
+export function Island({ component: Component, mode, mediaQuery, ...props }) {
+  const placeholder = h('div', { 'data-island': Component.name || 'Island', 'data-hydrate': mode });
+
+  // We need to return a vnode that the reconciler can handle.
+  // The actual hydration scheduling happens after mount via an effect.
+  const wrapper = signal(null);
+  const hydrated = signal(false);
+
+  function doHydrate() {
+    if (hydrated()) return;
+    hydrated.set(true);
+    // Render the actual component
+    wrapper.set(h(Component, props));
+  }
+
+  // Schedule hydration based on mode
+  function scheduleHydration(el) {
+    switch (mode) {
+      case 'load':
+        queueMicrotask(doHydrate);
+        break;
+
+      case 'idle':
+        if (typeof requestIdleCallback !== 'undefined') {
+          requestIdleCallback(doHydrate);
+        } else {
+          setTimeout(doHydrate, 200);
+        }
+        break;
+
+      case 'visible': {
+        const observer = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting) {
+            observer.disconnect();
+            doHydrate();
+          }
+        });
+        observer.observe(el);
+        break;
+      }
+
+      case 'interaction': {
+        const hydrate = () => {
+          el.removeEventListener('click', hydrate);
+          el.removeEventListener('focus', hydrate);
+          el.removeEventListener('mouseenter', hydrate);
+          doHydrate();
+        };
+        el.addEventListener('click', hydrate, { once: true });
+        el.addEventListener('focus', hydrate, { once: true });
+        el.addEventListener('mouseenter', hydrate, { once: true });
+        break;
+      }
+
+      case 'media': {
+        if (!mediaQuery) { doHydrate(); break; }
+        const mq = window.matchMedia(mediaQuery);
+        if (mq.matches) {
+          queueMicrotask(doHydrate);
+        } else {
+          const checkMedia = () => {
+            if (mq.matches) {
+              mq.removeEventListener('change', checkMedia);
+              doHydrate();
+            }
+          };
+          mq.addEventListener('change', checkMedia);
+        }
+        break;
+      }
+
+      default:
+        // Unknown mode, hydrate immediately
+        queueMicrotask(doHydrate);
+    }
+  }
+
+  // Use ref callback to get the DOM element and schedule hydration
+  const refCallback = (el) => {
+    if (el) scheduleHydration(el);
+  };
+
+  // Return: show placeholder until hydrated, then show the real component
+  return h('div', { 'data-island': Component.name || 'Island', 'data-hydrate': mode, ref: refCallback },
+    hydrated() ? wrapper() : null
+  );
+}

package/src/dom.js

@@ -5,6 +5,19 @@
 import { effect, batch, untrack } from './reactive.js';
 import { errorBoundaryStack, reportError } from './components.js';
 
+// SVG elements that need namespace
+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',
+  'marker', 'animate', 'animateTransform', 'animateMotion', 'set', 'filter',
+  'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix',
+  'feDiffuseLighting', 'feDisplacementMap', 'feFlood', 'feGaussianBlur', 'feImage',
+  'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'feSpecularLighting',
+  'feTile', 'feTurbulence',
+]);
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
 // Mount a component tree into a DOM container
 export function mount(vnode, container) {
   if (typeof container === 'string') {
@@ -22,7 +35,7 @@ export function mount(vnode, container) {
 
 // --- Create DOM from VNode ---
 
-function createDOM(vnode, parent) {
+function createDOM(vnode, parent, isSvg) {
   if (vnode == null || vnode === false || vnode === true) return null;
 
   // Text
@@ -34,7 +47,7 @@ function createDOM(vnode, parent) {
   if (Array.isArray(vnode)) {
     const frag = document.createDocumentFragment();
     for (const child of vnode) {
-      const node = createDOM(child, parent);
+      const node = createDOM(child, parent, isSvg);
       if (node) frag.appendChild(node);
     }
     return frag;
@@ -45,11 +58,17 @@ function createDOM(vnode, parent) {
     return createComponent(vnode, parent);
   }
 
-  // HTML Element
-  const el = document.createElement(vnode.tag);
-  applyProps(el, vnode.props, {});
+  // Detect SVG context: either we're already in SVG, or this tag is an SVG element
+  const svgContext = isSvg || vnode.tag === 'svg' || SVG_ELEMENTS.has(vnode.tag);
+
+  // HTML or SVG Element
+  const el = svgContext
+    ? document.createElementNS(SVG_NS, vnode.tag)
+    : document.createElement(vnode.tag);
+
+  applyProps(el, vnode.props, {}, svgContext);
   for (const child of vnode.children) {
-    const node = createDOM(child, el);
+    const node = createDOM(child, el, svgContext && vnode.tag !== 'foreignObject');
     if (node) el.appendChild(node);
   }
 
@@ -506,7 +525,7 @@ function reconcileChildren(parent, newChildVNodes) {
 // --- Prop Diffing ---
 // Only touch DOM for props that actually changed.
 
-function applyProps(el, newProps, oldProps) {
+function applyProps(el, newProps, oldProps, isSvg) {
   newProps = newProps || {};
   oldProps = oldProps || {};
 
@@ -522,7 +541,7 @@ function applyProps(el, newProps, oldProps) {
   for (const key in newProps) {
     if (key === 'key' || key === 'ref' || key === 'children') continue;
     if (newProps[key] !== oldProps[key]) {
-      setProp(el, key, newProps[key]);
+      setProp(el, key, newProps[key], isSvg);
     }
   }
 
@@ -533,7 +552,7 @@ function applyProps(el, newProps, oldProps) {
   }
 }
 
-function setProp(el, key, value) {
+function setProp(el, key, value, isSvg) {
   // Event handlers: onClick -> click
   // Wrap in untrack so signal reads in handlers don't create subscriptions
   if (key.startsWith('on') && key.length > 2) {
@@ -546,13 +565,19 @@ function setProp(el, key, value) {
     const wrappedHandler = (e) => untrack(() => value(e));
     wrappedHandler._original = value;
     el._events[event] = wrappedHandler;
-    el.addEventListener(event, wrappedHandler);
+    // Check for _eventOpts (once/capture/passive from compiler)
+    const eventOpts = value._eventOpts;
+    el.addEventListener(event, wrappedHandler, eventOpts || undefined);
     return;
   }
 
-  // className
+  // className / class
   if (key === 'className' || key === 'class') {
-    el.className = value || '';
+    if (isSvg) {
+      el.setAttribute('class', value || '');
+    } else {
+      el.className = value || '';
+    }
     return;
   }
 
@@ -587,6 +612,16 @@ function setProp(el, key, value) {
     return;
   }
 
+  // SVG: always use setAttribute (SVG properties don't work as DOM properties)
+  if (isSvg) {
+    if (value === false || value == null) {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, value === true ? '' : String(value));
+    }
+    return;
+  }
+
   // Default: set as property if it exists, otherwise attribute
   if (key in el) {
     el[key] = value;

package/src/index.js

@@ -28,10 +28,10 @@ export {
 } from './hooks.js';
 
 // Component helpers
-export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match } from './components.js';
+export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match, Island } from './components.js';
 
 // Store
-export { createStore, atom } from './store.js';
+export { createStore, storeComputed, atom } from './store.js';
 
 // Head management
 export { Head, clearHead } from './head.js';

package/src/store.js

@@ -4,15 +4,32 @@
 
 import { signal, computed, batch } from './reactive.js';
 
+// --- storeComputed ---
+// Marker wrapper to explicitly tag a function as a computed in createStore.
+// Without this, createStore can't distinguish computed(state => ...) from action(item => ...).
+//
+// Usage:
+//   const useCounter = createStore({
+//     count: 0,
+//     doubled: storeComputed(state => state.count * 2),
+//     addItem(item) { /* this is an action */ },
+//   });
+
+export function storeComputed(fn) {
+  fn._storeComputed = true;
+  return fn;
+}
+
 // --- createStore ---
 // Creates a reactive store with actions. Each key becomes a signal.
 //
 // Usage:
 //   const useCounter = createStore({
 //     count: 0,
-//     doubled: (state) => state.count * 2,  // computed
-//     increment() { this.count++; },         // action
+//     doubled: storeComputed(state => state.count * 2),  // computed
+//     increment() { this.count++; },                      // action
 //     decrement() { this.count--; },
+//     addItem(item) { this.items.push(item); },           // action (not confused with computed)
 //   });
 //
 //   function Counter() {
@@ -27,12 +44,13 @@ export function createStore(definition) {
   const state = {};
 
   // Separate state, computeds, and actions
+  // Use explicit _storeComputed marker instead of function.length heuristic
   for (const [key, value] of Object.entries(definition)) {
-    if (typeof value === 'function' && value.length > 0 && key !== 'constructor') {
-      // Computed: function that takes state
+    if (typeof value === 'function' && value._storeComputed) {
+      // Computed: explicitly marked with storeComputed()
       computeds[key] = value;
     } else if (typeof value === 'function') {
-      // Action: function with no args that uses `this`
+      // Action: any other function
       actions[key] = value;
     } else {
       // State: initial value