[2.0 / next] createOptimisticStore: a pending removal guess is dropped from the screen when another action guesses on a different store #4484

/**
 * @jsxImportSource @solidjs/web
 * @vitest-environment jsdom
 */
import { test } from "vitest";
import { For, Loading, Errored, action, createOptimisticStore, createMemo, flush, refresh, untrack } from "solid-js";
import { render } from "../src/index.js";
const tick = async () => { for (let i = 0; i < 4; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };
test("a removal guess survives another action's guess on another store", async () => {
  const asks: { key: string; res: (v: any) => void }[] = [];
  const ask = (key: string) => new Promise<any>(res => asks.push({ key, res }));
  const settle = async (key: string, v: any) => { const i = asks.findIndex(a => a.key === key); asks.splice(i, 1)[0].res(v); await tick(); };
  const container = document.body.appendChild(document.createElement("div"));
  const frames: string[] = []; const snap = (l: string) => frames.push(`${l}: ${container.textContent}`);
  let rename!: (id: number, t: string) => any; let closeOne!: (id: number) => any;
  render(() => {
    const [issues, set] = createOptimisticStore(async (d: any[]) => { const r = await ask("issues"); d.length = r.length; r.forEach((x: any, i: number) => { d[i] = x; }); }, [] as any[], { key: "id" });
    const detailQ = createMemo(() => ask("detail"));
    const [detail, setDetail] = createOptimisticStore(async (d: any) => { Object.assign(d, detailQ()); }, {} as any);
    rename = action(function* (id: number, t: string) {           // guesses the detail only, once it has loaded
      let shown: any = null; try { shown = untrack(() => detail.id); } catch {}
      if (shown === id) setDetail((d: any) => { d.title = t; });
      yield ask(`rename:${id}`);
      refresh(issues);
    });
    closeOne = action(function* (id: number) {                     // removes the row by guess
      const next = untrack(() => issues.filter((x: any) => x.id !== id));
      set((d: any) => { d.length = next.length; next.forEach((x: any, i: number) => { d[i] = x; }); });
      yield ask(`close:${id}`);
      refresh(issues);
    });
    return <>
      <Loading fallback={<p>loading</p>}><For each={issues}>{(it: any) => <i>[#{it.id} {it.title}]</i>}</For></Loading>
      {" | "}<Loading fallback={<p>loading detail</p>}><Errored fallback={() => <p>err</p>}><u>#{detail.id} {detail.title}</u></Errored></Loading>
    </>;
  }, container);
  await tick();
  const rows = (t3: string) => [{ id: 1, title: "Login" }, { id: 3, title: t3 }, { id: 4, title: "Typo" }];
  await settle("issues", rows("Crash")); snap("loaded");
  rename(3, "Alpha"); await tick(); snap("rename #3");             // detail still loading: no guess
  closeOne(3); await tick(); snap("close #3");
  await settle("rename:3", {}); snap("rename accepted");
  await settle("detail", { id: 3, title: "Alpha" }); snap("detail landed");
  await settle("issues", rows("Alpha")); snap("refresh answered");  // the server has not closed #3 yet
  rename(3, "Alpha"); await tick(); snap("rename #3 again");       // a guess on the detail store only
  await settle("close:3", {}); snap("close accepted");
  console.log(frames.join("\n"));
});