what-core 0.1.1 → 0.3.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.1",
+  "version": "0.3.0",
   "description": "What Framework - The closest framework to vanilla JS",
   "type": "module",
   "main": "dist/what.js",

package/src/animation.js

@@ -2,8 +2,17 @@
 // Springs, tweens, gestures, and transition helpers
 
 import { signal, effect, untrack, batch } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 import { scheduleRead, scheduleWrite } from './scheduler.js';
 
+// Create an effect scoped to the current component's lifecycle
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- Spring Animation ---
 // Physics-based animation with natural feel
 
@@ -388,14 +397,14 @@ export function useGesture(element, handlers = {}) {
   // Attach listeners
   if (typeof element === 'function') {
     // Ref function
-    effect(() => {
+    scopedEffect(() => {
       const el = untrack(element);
       if (!el) return;
       return attachListeners(el);
     });
   } else if (element?.current !== undefined) {
     // Ref object
-    effect(() => {
+    scopedEffect(() => {
       const el = element.current;
       if (!el) return;
       return attachListeners(el);

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/data.js

@@ -2,11 +2,21 @@
 // SWR-like data fetching with caching, revalidation, and optimistic updates
 
 import { signal, effect, batch, computed } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 
 // Global cache for requests
 const cache = new Map();
 const inFlightRequests = new Map();
 
+// Create an effect scoped to the current component's lifecycle.
+// When the component unmounts, the effect is automatically disposed.
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- useFetch Hook ---
 // Simple fetch with automatic JSON parsing and error handling
 
@@ -51,7 +61,7 @@ export function useFetch(url, options = {}) {
   }
 
   // Fetch on mount
-  effect(() => {
+  scopedEffect(() => {
     fetchData();
   });
 
@@ -120,13 +130,13 @@ export function useSWR(key, fetcher, options = {}) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     revalidate().catch(() => {});
   });
 
   // Revalidate on focus
   if (revalidateOnFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           revalidate().catch(() => {});
@@ -139,7 +149,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Revalidate on reconnect
   if (revalidateOnReconnect && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => revalidate().catch(() => {});
       window.addEventListener('online', handler);
       return () => window.removeEventListener('online', handler);
@@ -148,7 +158,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Polling
   if (refreshInterval > 0) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         revalidate().catch(() => {});
       }, refreshInterval);
@@ -269,7 +279,7 @@ export function useQuery(options) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     if (enabled) {
       fetch().catch(() => {});
     }
@@ -277,7 +287,7 @@ export function useQuery(options) {
 
   // Refetch on focus
   if (refetchOnWindowFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           fetch().catch(() => {});
@@ -290,7 +300,7 @@ export function useQuery(options) {
 
   // Polling
   if (refetchInterval) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         fetch().catch(() => {});
       }, refetchInterval);
@@ -368,7 +378,7 @@ export function useInfiniteQuery(options) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     fetchPage(initialPageParam).catch(() => {});
   });