@atolljs/islands 0.1.10 → 0.1.11

package/src/worker/instance.ts

@@ -93,6 +93,63 @@ interface HandlerEntry {
 }
 /** handler id → prop function + owning instance. Lives worker-side; never serialized. */
 const handlers = new Map<number, HandlerEntry>();
+
+/* ── Detached-instance tombstones ───────────────────────────────────────────
+ * removeChild detaches a subtree but the app may re-append the same nodes
+ * later (zrender restacks displayables, list libs reorder rows). Records and
+ * handler entries move here instead of staying live forever — detached
+ * nodes can still materialize as dispatch targets (a click already in
+ * flight when its subtree left) and promote back on re-append. The cap
+ * bounds create/remove churn (tooltip text, transient overlays) that never
+ * returns. */
+const DETACHED_CAP = 4096;
+const detachedInstances = new Map<number, HostInstance>();
+const detachedHandlers = new Map<number, HandlerEntry>();
+
+const evictOldest = <V>(map: Map<number, V>): void => {
+  if (map.size <= DETACHED_CAP) return;
+  const oldest = map.keys().next().value;
+  if (oldest !== undefined) map.delete(oldest);
+};
+
+/** Move an instance record + its handler ids out of the live maps. */
+export const detachInstance = (id: number, handlerIds: number[]): void => {
+  const record = instances.get(id);
+  if (record === undefined) return;
+  instances.delete(id);
+  detachedInstances.set(id, record);
+  evictOldest(detachedInstances);
+  for (const hid of handlerIds) {
+    const entry = handlers.get(hid);
+    if (entry !== undefined) {
+      handlers.delete(hid);
+      detachedHandlers.set(hid, entry);
+      evictOldest(detachedHandlers);
+    }
+  }
+};
+
+/** Restore an instance record + handler ids on re-append (idempotent). */
+export const attachInstance = (id: number, handlerIds: number[]): void => {
+  const record = detachedInstances.get(id);
+  if (record !== undefined) {
+    detachedInstances.delete(id);
+    instances.set(id, record);
+  }
+  for (const hid of handlerIds) {
+    const entry = detachedHandlers.get(hid);
+    if (entry !== undefined) {
+      detachedHandlers.delete(hid);
+      handlers.set(hid, entry);
+    }
+  }
+};
+
+/** instances.get that also resolves detached records — stale dispatches and
+ *  relatedTarget materialization may still reference them. */
+export const lookupInstance = (id: number): HostInstance | undefined =>
+  instances.get(id) ?? detachedInstances.get(id);
+
 let nextId = 1;
 let nextHandlerId = 1;
 
@@ -229,9 +286,9 @@ export const takeOps = (instance: string): Op[] =>
 
 /**
  * Structural memory snapshot of the proxy layer — how much shadow state the
- * engine retains for live + previously-allocated nodes, handlers, and ops
- * still queued. `instances` is not pruned on removeChild (event dispatch may
- * still resolve detached target ids), so liveNodes is nodes-ever-allocated.
+ * engine retains for live nodes, handlers, and ops still queued. Removed
+ * nodes leave `instances` for a bounded tombstone (event dispatch may still
+ * resolve recently-detached target ids), so liveNodes is attached-only.
  */
 export const proxyInstanceStats = (): {
   liveNodes: number;
@@ -247,16 +304,19 @@ export const proxyInstanceStats = (): {
   ),
 });
 
-export const getHandler = (id: number): HandlerEntry | undefined => handlers.get(id);
+export const getHandler = (id: number): HandlerEntry | undefined =>
+  handlers.get(id) ?? detachedHandlers.get(id);
 
 /* ── Pushed container size (setSize channel) ────────────────────────────── */
 
 /**
  * instance key → the island container's last measured {w,h}, pushed by the
- * driver's `setSize` task. This is the ONLY geometry channel: the main
- * thread can only measure the island's root box, so the proxy DOM serves
- * this value to `doc.body`/`documentElement` and to elements explicitly
- * marked `doc.markContainer(el)` — every other element keeps the honest 0.
+ * driver's `setSize` task. This is the always-on geometry channel: the main
+ * thread measures the island's root box unconditionally, so the proxy DOM
+ * serves this value to `doc.body`/`documentElement` and to elements
+ * explicitly marked `doc.markContainer(el)`. Per-element rects arrive
+ * separately through `setRects`/`instanceRects` below; elements with neither
+ * keep the honest 0.
  * Module-level (not per-document) so it survives imperative rebuilds that
  * swap in a fresh proxy document.
  */
@@ -271,6 +331,40 @@ export const setInstanceSize = (instance: string, w: number, h: number): void =>
   instanceSizes.set(instance, { w, h });
 };
 
+/* ── Measured element rects (setRects channel) ──────────────────────────── */
+
+/**
+ * instance key → element id → last measured box, pushed by the driver's
+ * `setRects` task in answer to `measure` ops. Module-level for the same
+ * reason as `instanceSizes`: entries survive imperative doc rebuilds, and
+ * rects for reconciler-created elements are reachable the moment the id is
+ * adopted — no proxy document needs to exist.
+ */
+const instanceRects = new Map<string, Map<number, { x: number; y: number; w: number; h: number }>>();
+
+/** The last pushed rect for one element id, or undefined if never measured. */
+export const getInstanceRect = (
+  instance: string,
+  id: number,
+): { x: number; y: number; w: number; h: number } | undefined =>
+  instanceRects.get(instance)?.get(id);
+
+/** Store one element's measured box from a `setRects` push. */
+export const setInstanceRect = (
+  instance: string,
+  rect: { id: number; x: number; y: number; w: number; h: number },
+): void => {
+  let table = instanceRects.get(instance);
+  if (table === undefined) instanceRects.set(instance, (table = new Map()));
+  table.set(rect.id, { x: rect.x, y: rect.y, w: rect.w, h: rect.h });
+};
+
+/** Drop every measured rect for the instance — the unmount path calls this
+ *  so stale geometry can't answer reads on a re-mounted instance's ids. */
+export const clearInstanceRects = (instance: string): void => {
+  instanceRects.delete(instance);
+};
+
 /**
  * Register a function in the handler table outside prop serialization —
  * the proxy DOM's addEventListener uses this. The instance is stamped on the
@@ -292,6 +386,7 @@ export const registerHandler = (
 export const unregisterHandler = (id: number): void => {
   timed(() => {
     handlers.delete(id);
+    detachedHandlers.delete(id);
   });
 };
 

package/src/worker/proxyDom.ts

@@ -24,6 +24,9 @@ export {
   installInstanceDispatcher,
   installDomShim,
 } from './dom/window';
+export {
+  ProxyResizeObserver,
+} from './dom/resizeObserver';
 export type {
   WindowShim,
   WindowFacadeBundle,

package/src/worker/subIsland.ts

@@ -149,6 +149,8 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
   const prevProps = new Map<number, WireProps>();
   /** sub-id → 'type#handler' → attached proxy listener (kept for removal). */
   const nodeListeners = new Map<number, Map<string, { fn: ProxyEventHandler; capture?: boolean }>>();
+  /** sub-id → the parent-doc observeSize detacher a `measure` op registered. */
+  const measureCleanups = new Map<number, () => void>();
 
   /**
    * sub-id → slot name for anchors THIS mount's `slots` claimed. A claimed
@@ -345,6 +347,8 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
       }
       case 'remove': {
         nodes.get(op.child)?.remove();
+        measureCleanups.get(op.child)?.();
+        measureCleanups.delete(op.child);
         releaseDetachedSlots();
         break;
       }
@@ -421,9 +425,34 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
       }
       case 'clear': {
         el.replaceChildren();
+        for (const cleanup of measureCleanups.values()) cleanup();
+        measureCleanups.clear();
         releaseDetachedSlots();
         break;
       }
+      case 'measure': {
+        const node = nodes.get(op.id);
+        if (!(node instanceof ProxyElement) || measureCleanups.has(op.id)) break;
+        // The sub-worker's measure request tunnels through the parent's own
+        // channel: observe the translated proxy node — the real driver
+        // measures the real element — and forward each pushed rect down as
+        // a setRects batch in the SUB worker's id space.
+        measureCleanups.set(
+          op.id,
+          doc.observeSize(node, (rect) => {
+            void islandCall(
+              'setRects',
+              client.setRects(instance, [{ id: op.id, x: rect.x, y: rect.y, w: rect.w, h: rect.h }]),
+            ).then((ops) => applyOps(ops, 'setRects'));
+          }),
+        );
+        break;
+      }
+      case 'unmeasure': {
+        measureCleanups.get(op.id)?.();
+        measureCleanups.delete(op.id);
+        break;
+      }
       case 'emit': {
         if (op.name === CALLBACK_EVENT) {
           const p = op.payload as { id?: number; args?: unknown[] } | undefined;
@@ -443,7 +472,7 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
     }
   }
 
-  function applyOps(ops: Op[], via: 'mount' | 'updateProps' | 'dispatch' | 'setSize' | 'flush'): void {
+  function applyOps(ops: Op[], via: 'mount' | 'updateProps' | 'dispatch' | 'setSize' | 'setRects' | 'flush'): void {
     opsApplied += ops.length;
     onActivity?.();
     const t0 = performance.now();
@@ -465,7 +494,7 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
 
   /** Times a worker→sub-worker round-trip for the devtools inspector. */
   const islandCall = <T>(
-    method: 'mount' | 'whoami' | 'dispatch' | 'setSize' | 'updateProps' | 'flush' | 'unmount',
+    method: 'mount' | 'whoami' | 'dispatch' | 'setSize' | 'setRects' | 'updateProps' | 'flush' | 'unmount',
     p: Promise<T>,
   ): Promise<T> => {
     const t0 = performance.now();
@@ -562,16 +591,27 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
   setMode(mode);
 
   /* ── Pushed-size forwarding ─────────────────────────────────────────────
-   * The only geometry channel that exists is the parent island's measured
-   * box — forward it as the sub-island's container size (same claim
-   * `doc.markContainer` makes: "pretend my box is the container's"). Sub
-   * apps that genuinely fill their mount get a usable size; others see the
-   * parent's box — honest enough, and the alternative is permanent zeros. */
+   * The sub-island's container IS `el` — its real box is what the sub app's
+   * layout should size to. observeSize emits a measure op up the parent's
+   * queue so the main driver's ResizeObserver tracks the REAL element and
+   * forwards its box; until the first nonzero rect lands the parent's own
+   * container box forwards as the fallback (the same claim markContainer
+   * makes). An all-zero measured rect stays fallback-eligible: "no layout
+   * yet" is indistinguishable from "no real layout engine" (in-process
+   * tests), and the parent box is the better answer in both. */
+  let measuredEl = false;
   const pushSize = (w: number, h: number): void => {
     if (destroyed) return;
     void islandCall('setSize', client.setSize(instance, w, h)).then((ops) => applyOps(ops, 'setSize'));
   };
-  doc.onResize(pushSize);
+  const unobserveEl = doc.observeSize(el, (rect) => {
+    if (rect.w === 0 && rect.h === 0) return;
+    measuredEl = true;
+    pushSize(rect.w, rect.h);
+  });
+  doc.onResize((w, h) => {
+    if (!measuredEl) pushSize(w, h);
+  });
   const initial = getInstanceSize(parentInstance);
   if (initial !== undefined) pushSize(initial.w, initial.h);
 
@@ -602,6 +642,9 @@ export async function mountSubIsland(opts: MountSubIslandOptions): Promise<SubIs
       destroyed = true;
       emitDevtools({ type: 'island:unmount', instance });
       for (const subId of [...slotNodes.keys()]) unmountSlot(subId);
+      unobserveEl();
+      for (const cleanup of measureCleanups.values()) cleanup();
+      measureCleanups.clear();
       unsubscribe?.();
       if (pollTimer !== null) clearInterval(pollTimer);
       const remaining = (clientMounts.get(client) ?? 1) - 1;