what-core 0.11.7 → 0.12.0

package/src/components.js

@@ -3,6 +3,7 @@
 
 import { h } from './h.js';
 import { signal, effect, untrack, __DEV__ } from './reactive.js';
+import { isServerRender } from './server-context.js';
 
 // Legacy errorBoundaryStack removed — tree-based resolution via _parentCtx._errorBoundary
 // is now the only mechanism. See reportError() below.
@@ -81,19 +82,31 @@ export function lazy(loader) {
 export function Suspense({ fallback, children }) {
   const loading = signal(false);
   const pendingPromises = new Set();
+  let failed = false;
 
   // Suspense boundary marker
   const boundary = {
     _suspense: true,
     onSuspend(promise) {
+      if (failed) return;
       loading.set(true);
       pendingPromises.add(promise);
-      promise.finally(() => {
-        pendingPromises.delete(promise);
-        if (pendingPromises.size === 0) {
-          loading.set(false);
-        }
-      });
+      // Rejection is handled separately from fulfilment. Clearing the fallback
+      // on a rejection re-renders the child, which suspends on the same
+      // rejected thenable again, forever. Latch the failure and stay put.
+      promise.then(
+        () => {
+          pendingPromises.delete(promise);
+          if (pendingPromises.size === 0) {
+            loading.set(false);
+          }
+        },
+        (err) => {
+          failed = true;
+          pendingPromises.delete(promise);
+          console.error('[what] Suspense: a suspended child rejected:', err);
+        },
+      );
     },
   };
 
@@ -105,6 +118,10 @@ export function Suspense({ fallback, children }) {
   };
 }
 
+// The boundary context only exists once createSuspenseBoundary runs, so
+// compiled children must not be built during this call. See createComponent.
+Suspense._deferChildren = true;
+
 // --- ErrorBoundary ---
 // Catch errors in children and show fallback.
 // Uses a signal to track error state so it works with reactive rendering.
@@ -135,6 +152,10 @@ export function ErrorBoundary({ fallback, children, onError }) {
   };
 }
 
+// The boundary context only exists once createErrorBoundary runs, so compiled
+// children must not be built during this call. See createComponent.
+ErrorBoundary._deferChildren = true;
+
 // Helper to report error to nearest boundary
 // Walks the component context tree (not a runtime stack) so async errors are caught
 export function reportError(error, startCtx) {
@@ -216,124 +237,196 @@ export function For({ each, fallback = null, children }) {
 // Multi-condition rendering (like switch statement).
 
 export function Switch({ fallback = null, children }) {
-  // The Match children (marker vnodes) are static — resolve them once. The
-  // match loop, which reads each Match's reactive `when`, must run inside a
-  // reactive thunk (see Show/For above): components run once, so evaluating
-  // `when()` in the body here would snapshot the active arm a single time and
-  // `<Switch>`/`<Match when={() => sig()}>` would render once and never update.
-  // Switch/Match are NOT lowered by the fine-grained compiler, so this runtime
-  // path is the ONLY path — the thunk is what makes them reactive at all.
+  // The Match children are static, so resolve them once. The match loop, which
+  // reads each Match's reactive `when`, must run inside a reactive thunk (see
+  // Show/For above): components run once, so evaluating `when()` in the body
+  // here would snapshot the active arm a single time and `<Switch>`/`<Match
+  // when={() => sig()}>` would render once and never update.
+  // This is the runtime path, for h() and the automatic JSX runtime, where a
+  // <Match> arrives as an unexecuted marker vnode. The fine-grained compiler
+  // lowers <Switch> to the same conditional thunk and never reaches here; a
+  // <Switch> it cannot lower is a build error rather than a call into this.
   const kids = Array.isArray(children) ? children : [children];
 
   return () => {
     for (const child of kids) {
       if (child && child.tag === Match) {
-        const condition = typeof child.props.when === 'function'
-          ? child.props.when()
-          : child.props.when;
-        if (condition) {
-          return child.children;
-        }
+        const when = child.props.when;
+        const condition = typeof when === 'function' ? when() : when;
+        if (condition) return child.children;
       }
     }
     return fallback;
   };
 }
 
-export function Match({ when, children }) {
-  // Match is just a marker component, Switch handles the logic
-  return { tag: Match, props: { when }, children, _vnode: true };
+export function Match(props) {
+  // Executed rather than left as a marker, which is what a lone compiled
+  // <Match> does. Returning a `{ tag: Match }` vnode here would send createDOM
+  // straight back into Match forever, so return a reactive thunk that renders
+  // the arm when it matches.
+  return () => {
+    const condition = typeof props.when === 'function' ? props.when() : props.when;
+    return condition ? props.children : null;
+  };
 }
 
 // --- 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));
+// Islands architecture: the content ships as server-rendered HTML and only the
+// *interactivity* is deferred to a client trigger. The babel plugin compiles
+// `<Counter client:idle />` into h(Island, { component: Counter, mode: 'idle' }).
+//
+// This used to render an empty marker div on every path, on the server AND the
+// client, in every mode: the SSR branch never rendered the component, and the
+// client branch read `hydrated()` once in a run-once component so the swap-in
+// never happened. Every `client:*` directive silently deleted its component.
+
+// Late-bound renderers, injected by render.js. components.js cannot import
+// render.js directly (render -> dom -> components is already a cycle), so the
+// same injection precedent as _injectGetCurrentComponent applies here.
+let _islandRuntime = null;
+
+/** @internal */
+export function _injectIslandRuntime(runtime) {
+  _islandRuntime = runtime;
+}
+
+// Island props cross the server/client boundary as JSON, so anything that is not
+// representable is dropped rather than throwing mid-render. Functions in
+// particular are common (event handlers passed down) and are simply not
+// transferable: the island re-creates its own handlers when it hydrates.
+function serializeIslandProps(props) {
+  const out = {};
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === 'function' || typeof value === 'symbol' || value === undefined) continue;
+    out[key] = value;
+  }
+  try {
+    return JSON.stringify(out);
+  } catch {
+    return '{}';
+  }
+}
+
+export function Island({ component: Component, mode, mediaQuery, name, children, ...props }) {
+  const islandName = name || Component?.name || 'Island';
+  const resolvedMode = mode || 'idle';
+
+  const marker = {
+    'data-island': islandName,
+    'data-island-mode': resolvedMode,
+    'data-hydrate': resolvedMode,
+    // Tells hydrateIslands() to leave this element alone: a compiler-emitted
+    // island holds a direct component reference and hydrates itself, so it
+    // needs no registry entry and must not be claimed twice.
+    'data-island-self': '1',
+  };
+
+  // Server: render the island's HTML inline, inside the marker. An island that
+  // emits nothing costs SEO and LCP to buy lazy hydration, which is a strictly
+  // worse trade than not using the directive at all.
+  // Children arrive as props here but must be handed to the component
+  // positionally: the renderers rebuild `props.children` from the vnode's own
+  // children list, so anything passed through props alone is overwritten.
+  const childList = children == null ? [] : (Array.isArray(children) ? children : [children]);
+
+  if (isServerRender()) {
+    return h(
+      'div',
+      { ...marker, 'data-island-props': serializeIslandProps(props) },
+      h(Component, props, ...childList)
+    );
+  }
+
+  let hydrated = false;
+
+  function hydrateInto(el) {
+    if (hydrated) return;
+    hydrated = true;
+
+    const vnode = h(Component, props, ...childList);
+
+    // Server-rendered children present => hydrate in place, reusing the DOM.
+    // Nothing there => a client-only render, so build it from scratch.
+    if (el.childNodes.length > 0 && _islandRuntime?.hydrate) {
+      _islandRuntime.hydrate(vnode, el);
+    } else if (_islandRuntime?.insert) {
+      _islandRuntime.insert(el, vnode, null);
+    }
+
+    el.removeAttribute('data-hydrate');
+    el.removeAttribute('data-island-self');
+    el.setAttribute('data-island-hydrated', '');
+    // Build the event in the element's own realm. A global CustomEvent belongs
+    // to a different realm inside an iframe or a DOM shim, and dispatchEvent
+    // rejects it as "not of type 'Event'".
+    const view = el.ownerDocument?.defaultView ?? globalThis;
+    if (typeof view.CustomEvent === 'function') {
+      el.dispatchEvent(new view.CustomEvent('island:hydrated', {
+        bubbles: true,
+        detail: { name: islandName, mode: resolvedMode },
+      }));
+    }
   }
 
-  // Schedule hydration based on mode
   function scheduleHydration(el) {
-    switch (mode) {
+    const trigger = () => hydrateInto(el);
+
+    switch (resolvedMode) {
       case 'load':
-        queueMicrotask(doHydrate);
+        queueMicrotask(trigger);
         break;
 
       case 'idle':
-        if (typeof requestIdleCallback !== 'undefined') {
-          requestIdleCallback(doHydrate);
-        } else {
-          setTimeout(doHydrate, 200);
-        }
+        if (typeof requestIdleCallback !== 'undefined') requestIdleCallback(trigger);
+        else setTimeout(trigger, 200);
         break;
 
       case 'visible': {
+        if (typeof IntersectionObserver === 'undefined') { queueMicrotask(trigger); break; }
         const observer = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting) {
+          if (entries.some((entry) => entry.isIntersecting)) {
             observer.disconnect();
-            doHydrate();
+            trigger();
           }
-        });
+        }, { rootMargin: '200px' });
         observer.observe(el);
         break;
       }
 
-      case 'interaction': {
-        const hydrate = () => {
-          el.removeEventListener('click', hydrate);
-          el.removeEventListener('focus', hydrate);
-          el.removeEventListener('mouseenter', hydrate);
-          doHydrate();
+      case 'interaction':
+      case 'action': {
+        const events = ['click', 'focus', 'mouseenter', 'touchstart'];
+        const onInteract = () => {
+          for (const type of events) el.removeEventListener(type, onInteract);
+          trigger();
         };
-        el.addEventListener('click', hydrate, { once: true });
-        el.addEventListener('focus', hydrate, { once: true });
-        el.addEventListener('mouseenter', hydrate, { once: true });
+        for (const type of events) el.addEventListener(type, onInteract, { once: true });
         break;
       }
 
       case 'media': {
-        if (!mediaQuery) { doHydrate(); break; }
+        if (!mediaQuery || typeof window === 'undefined' || !window.matchMedia) { trigger(); 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);
-        }
+        if (mq.matches) { queueMicrotask(trigger); break; }
+        const onChange = () => {
+          if (!mq.matches) return;
+          mq.removeEventListener('change', onChange);
+          trigger();
+        };
+        mq.addEventListener('change', onChange);
         break;
       }
 
+      // 'static' ships no JS at all: the server HTML is the whole island.
+      case 'static':
+        break;
+
       default:
-        // Unknown mode, hydrate immediately
-        queueMicrotask(doHydrate);
+        queueMicrotask(trigger);
     }
   }
 
-  // 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
-  );
+  return h('div', { ...marker, ref: (el) => { if (el) scheduleHydration(el); } });
 }

package/src/data.js

@@ -14,6 +14,25 @@ const validatingSignals = new Map(); // key -> signal(boolean)
 const cacheTimestamps = new Map(); // key -> last access time (for LRU)
 const MAX_CACHE_SIZE = 200;
 
+// --- Query key normalization ---
+// Array keys are joined into the same flat string space as useSWR's string keys,
+// so `useQuery({queryKey: ['todos']})` and `useSWR('todos')` share one cache
+// entry by design. Every cache-facing entry point must normalize identically:
+// useQuery used to be the only one that did, so `invalidateQueries(['todos'])`
+// looked up a raw Array object as a Map key, found nothing, and silently did
+// nothing. The documented shape was the broken one.
+//
+// Segments escape ':' so `['user', 'a:b']` cannot collide with
+// `['user', 'a', 'b']`. A collision here serves one query's data to another,
+// which is worse than a miss.
+function normalizeQueryKey(key) {
+  if (!Array.isArray(key)) return key;
+  return key
+    .map((part) => (typeof part === 'string' ? part : JSON.stringify(part) ?? String(part)))
+    .map((part) => part.replace(/([\\:])/g, '\\$1'))
+    .join(':');
+}
+
 function getCacheSignal(key) {
   cacheTimestamps.set(key, Date.now());
   if (!cacheSignals.has(key)) {
@@ -335,7 +354,7 @@ export function useQuery(options) {
     placeholderData,
   } = options;
 
-  const key = Array.isArray(queryKey) ? queryKey.join(':') : queryKey;
+  const key = normalizeQueryKey(queryKey);
 
   const cacheS = getCacheSignal(key);
   const data = computed(() => {
@@ -503,7 +522,7 @@ export function useInfiniteQuery(options) {
   const isFetchingNextPage = signal(false);
   const isFetchingPreviousPage = signal(false);
 
-  const key = Array.isArray(queryKey) ? queryKey.join(':') : queryKey;
+  const key = normalizeQueryKey(queryKey);
   let abortController = null;
 
   let isRefetching = false;
@@ -595,15 +614,36 @@ export function useInfiniteQuery(options) {
 
 // --- Cache Management ---
 
+// Every key the cache knows about. A query that has subscribed but not yet
+// resolved has a revalidation subscriber before it has a cache signal, and
+// invalidating it is exactly how you tell it to fetch, so both maps count.
+function allKnownKeys() {
+  const keys = new Set(cacheSignals.keys());
+  for (const key of revalidationSubscribers.keys()) keys.add(key);
+  return keys;
+}
+
 export function invalidateQueries(keyOrPredicate, options = {}) {
-  const { hard = false } = options;
+  const { hard = false, exact = false } = options;
   const keysToInvalidate = [];
   if (typeof keyOrPredicate === 'function') {
     for (const [key] of cacheSignals) {
       if (keyOrPredicate(key)) keysToInvalidate.push(key);
     }
+  } else if (Array.isArray(keyOrPredicate) && !exact) {
+    // An array key is a PREFIX: invalidateQueries(['todos']) invalidates
+    // ['todos', 1] and ['todos', {done: true}] too, which is what the shape
+    // implies and what every peer library does. Matching is on segment
+    // boundaries, so ['todo'] never matches 'todos'.
+    const prefix = normalizeQueryKey(keyOrPredicate);
+    const scoped = prefix + ':';
+    for (const key of allKnownKeys()) {
+      if (key === prefix || (typeof key === 'string' && key.startsWith(scoped))) {
+        keysToInvalidate.push(key);
+      }
+    }
   } else {
-    keysToInvalidate.push(keyOrPredicate);
+    keysToInvalidate.push(normalizeQueryKey(keyOrPredicate));
   }
 
   for (const key of keysToInvalidate) {
@@ -619,6 +659,7 @@ export function invalidateQueries(keyOrPredicate, options = {}) {
 }
 
 export function prefetchQuery(key, fetcher) {
+  key = normalizeQueryKey(key);
   const cacheS = getCacheSignal(key);
   return fetcher(key).then(result => {
     cacheS.set(result);
@@ -628,6 +669,7 @@ export function prefetchQuery(key, fetcher) {
 }
 
 export function setQueryData(key, updater) {
+  key = normalizeQueryKey(key);
   const cacheS = getCacheSignal(key);
   const current = cacheS.peek();
   cacheS.set(typeof updater === 'function' ? updater(current) : updater);
@@ -635,6 +677,7 @@ export function setQueryData(key, updater) {
 }
 
 export function getQueryData(key) {
+  key = normalizeQueryKey(key);
   return cacheSignals.has(key) ? cacheSignals.get(key).peek() : undefined;
 }