Merge pull request #4706 from solidjs/claude/project-thread-uehqk6

fix: live server components in a windowed view, and a broadcast's late joiner sent the table twice

Author: ryansolid

.changeset/broadcast-join-once.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/web": patch
+---
+
+A viewer that joins a running `broadcast` is sent each live range once, as it shows now. Its snapshot used to carry the frame as it first rendered and then every changed hole whole again, so a late joiner downloaded a big live table twice (about 600 ms to join a 2,000-row table, now about 120 ms).

.changeset/live-attr-pending-at-top.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/web": patch
+---
+
+A live server component's attribute whose value is still pending at the top of the render (no `<Loading>` around it) no longer writes the live-hole comment markers inside the tag or the attribute value (`<div<!--lh:1--> style="…"<!--lh:/1-->>`), which broke the element. The element keeps its attribute address, and the binding registers once the tag's pending values resolve, so later values update the attribute as an `attr` op.

.changeset/live-revisit-first-address.md

@@ -0,0 +1,8 @@
+---
+"solid-js": patch
+"@solidjs/web": patch
+---
+
+A `dynamic` mount of a live server component that switches arguments and comes back to its first call (a windowed view scrolling back to the slice the page was served with) shows that call again. The equals gate compared the incoming binding with the one the memo holds, which is the first resolution's, so the way back read as "nothing changed" and the mount stayed on the other address.
+
+A live connection cancelled before its body's `start` arrived now reads as a death, and the loop reconnects. A remount replaying a warm store gives up on a row-op record by cancelling the new connection so the resume re-sends the hole whole; with nothing open yet, the end read as a completion and the mount was left with no live connection.

packages/solid/src/client/dynamic.ts

@@ -89,13 +89,18 @@ export function dynamicCore(
   // stale binds the fresh mount to the first call's resident store (the SSR
   // payload) while the refetched response warms a store nothing reads.
   let deliveredAddress: string | undefined;
+  // The value a resolution just kept (and delivered past), for the gate.
+  let kept: any;
   const resolveBinding = (next: any, prev: any) => {
     const binding = bindingOf(next);
     if (!binding) return next;
     deliveredAddress = binding.address;
     const prevBinding = bindingOf(prev);
     if (prevBinding && prevBinding.component === binding.component) {
       for (const deliver of sites) deliver(binding.address);
+      // Delivered: the gate that sees this kept value next must not read
+      // its (first-resolution) address as a new one.
+      kept = prev;
       return prev;
     }
     return next;
@@ -116,12 +121,22 @@ export function dynamicCore(
   // nothing delivered (no site mounted) a differing address is a plain
   // change — nothing is kept, so nothing is lost by swapping.
   const sameInstance = (prev: any, next: any) => {
-    if (prev === next) return true;
+    if (next === kept) {
+      kept = undefined;
+      if (prev === next) return true;
+    }
     const held = bindingOf(prev);
     const incoming = bindingOf(next);
-    if (!held || !incoming || held.component !== incoming.component) return false;
-    if (held.address === incoming.address) return true;
-    if (deliveredAddress === undefined) return false;
+    if (!held || !incoming || held.component !== incoming.component) return prev === next;
+    // Nothing delivered yet: the held address is the one showing.
+    if (deliveredAddress === undefined) return held.address === incoming.address;
+    // Otherwise the delivered address is, and the held one says nothing: an
+    // instance that moved away from its first call and comes back to it
+    // receives a binding whose address equals the held one, and must still
+    // be delivered there — often as the very binding object it holds (one
+    // per address), so identity says nothing either. (A windowed live view
+    // scrolling back to the slice the page was served with stayed on the
+    // slice it had scrolled to.)
     if (incoming.address !== deliveredAddress) {
       deliveredAddress = incoming.address;
       for (const deliver of sites) deliver(incoming.address);

packages/solid/test/dynamic-component.spec.ts

@@ -87,4 +87,51 @@ describe("dynamicComponent", () => {
     expect(calls).toBe(1);
     expect(address()).toBe("b");
   });
+
+  test("a live source coming back to its first call's address delivers it again", async () => {
+    // A `live` server component's loop yields one binding object per
+    // address, straight to the factory memo's equals gate. The memo HOLDS
+    // its first resolution, so an instance that moved to another address
+    // and comes back receives the very binding it holds: the gate has to
+    // deliver it all the same (a windowed view scrolling back to the slice
+    // the page was served with stayed on the one it scrolled to).
+    let calls = 0;
+    let address!: () => string;
+    const mount = (_props: { n: string }, next: () => string) => {
+      calls++;
+      address = next;
+      return "mounted";
+    };
+    const bindings = { a: binding(mount, "a"), b: binding(mount, "b") };
+    const liveOf = (key: "a" | "b") => ({
+      async *[Symbol.asyncIterator]() {
+        yield bindings[key];
+        await new Promise(() => {});
+      }
+    });
+    const [which, setWhich] = createSignal<"a" | "b">("a");
+    let view!: () => string;
+    createRoot(() => {
+      const Comp = dynamicComponent(() => liveOf(which()) as any);
+      view = Comp({ n: "1" }) as () => string;
+    });
+    const settle = async () => {
+      for (let i = 0; i < 5; i++) {
+        await Promise.resolve();
+        flush();
+      }
+    };
+    await settle();
+    expect(view()).toBe("mounted");
+    expect(address()).toBe("a");
+    setWhich("b");
+    flush();
+    await settle();
+    expect(address()).toBe("b");
+    setWhich("a");
+    flush();
+    await settle();
+    expect(address()).toBe("a");
+    expect(calls).toBe(1);
+  });
 });

packages/web/frames/src/frame-sink.ts

@@ -3321,19 +3321,19 @@ function snapshot(shared, have) {
     if (!open || open.id !== id) out.push((open = { id, version, r: {} }));
     open.r[k] = record;
   };
-  if (!conditional) {
-    for (const { id, version, k, record } of shared.records.values()) put(id, version, k, record);
-    return out;
-  }
   // The root and each fragment as they show now: every later hole record
-  // spliced into whichever of them holds its range, in write order.
+  // spliced into whichever of them holds its range, in write order (a
+  // container written after a hole record already shows it, or newer).
   const containers = [];
-  for (const e of shared.records.values())
-    if (e.id === shared.id && (e.k === "" || /^seg:[^:]+$/.test(e.k)) && e.record)
-      containers.push({ e, value: e.record.value });
-  for (const { k, record } of shared.records.values()) {
-    if (!k.startsWith("hole:lh:") || k.endsWith(":error") || !record || record.value == null)
+  const spliced = new Set();
+  for (const entry of shared.records.values()) {
+    const { id, k, record } = entry;
+    if (id !== shared.id || !record) continue;
+    if (k === "" || /^seg:[^:]+$/.test(k)) {
+      if (typeof record.value === "string") containers.push({ e: entry, value: record.value });
       continue;
+    }
+    if (!k.startsWith("hole:lh:") || k.endsWith(":error") || record.value == null) continue;
     const n = k.slice(8);
     const startMark = `<!--lh:${n}-->`;
     const endMark = `<!--lh:/${n}-->`;
@@ -3343,9 +3343,37 @@ function snapshot(shared, have) {
       const end = c.value.indexOf(endMark, start);
       if (end < 0) continue;
       c.value = c.value.slice(0, start + startMark.length) + record.value + c.value.slice(end);
+      spliced.add(entry);
       break;
     }
   }
+  if (!conditional) {
+    // The frame whole, its containers showing their holes' latest content:
+    // a joiner is sent each range once, not as it first rendered and again
+    // as it shows now. The root keeps its digest (holes don't move the
+    // skeleton); its hole ledger is what it now holds.
+    for (const e of shared.records.values()) {
+      const { id, version, k, record } = e;
+      if (spliced.has(e)) continue;
+      const c = containers.find(c => c.e === e);
+      if (c && c.value !== record.value) {
+        const holes = {};
+        if (record.holes)
+          for (const key in record.holes)
+            if (key.startsWith("lha:")) holes[key] = record.holes[key];
+        put(
+          id,
+          version,
+          k,
+          withHoles(
+            { ...record, value: c.value, digest: k ? textDigest(c.value) : record.digest },
+            holeDigests(c.value, null, holes)
+          )
+        );
+      } else put(id, version, k, record);
+    }
+    return out;
+  }
   for (const e of shared.records.values()) {
     const { id, version, k, record } = e;
     if (id !== shared.id) {

packages/web/frames/src/wire-tier.ts

@@ -352,7 +352,13 @@ export function connect(
     const dead = error || cancelled || new Error("Frame stream ended before the frame completed.");
     connection.done = true;
     resolveEnd({
-      open: open.size,
+      // A cancel is always a death the loop reconnects from (supersession,
+      // or a mount giving up on a row-op record so the resume re-sends the
+      // hole whole), even when it lands before the body's `start` did: a
+      // remount replaying a warm store gives up as its new connection is
+      // still at the header, and an end with nothing open would read as
+      // completion, leaving the mount with no live connection at all.
+      open: cancelled !== undefined ? Math.max(open.size, 1) : open.size,
       error: dead,
       sweep: () => {
         for (const [id, version] of open)