[2.0 / next] createOptimisticStore: a removal guess re-based over a new question's answer shows the old list's rows next to the new ones #4482

/**
 * @jsxImportSource @solidjs/web
 * @vitest-environment jsdom
 */
import { test } from "vitest";
import { For, action, createOptimisticStore, createSignal, 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("removal guess over a new question's answer", 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 setFilter!: (f: string) => void; let assignTo!: (id: number, who: string) => any; let closeOne!: (id: number) => any;
  render(() => {
    const [filter, sf] = createSignal("open"); setFilter = sf;
    const list = createMemo(() => ask(`issues:${filter()}`));
    const [issues, set] = createOptimisticStore(async (d: any[]) => { const r = list() as any[]; d.length = r.length; r.forEach((x, i) => { d[i] = x; }); }, [] as any[], { key: "id" });
    assignTo = action(function* (id: number, who: string) {
      const i = untrack(() => issues.findIndex((t: any) => t.id === id));
      set((d: any) => { d[i].assignee = who; });
      yield ask(`assign:${id}`);
      refresh(issues);
    });
    closeOne = action(function* (id: number) {
      set((d: any) => { const i = d.findIndex((t: any) => t.id === id); if (i >= 0) d.splice(i, 1); });
      yield ask(`close:${id}`);
      refresh(issues);
    });
    return <For each={issues}>{(it: any) => <i>[#{it.id} {it.assignee}]</i>}</For>;
  }, container);
  await tick();
  await settle("issues:open", [{ id: 1, assignee: null }, { id: 3, assignee: null }, { id: 4, assignee: "dana" }]); snap("loaded");
  assignTo(3, "guest"); await tick(); snap("assign #3");
  closeOne(3); await tick(); snap("close #3");
  setFilter("closed"); await tick(); snap("filter closed");
  await settle("issues:closed", [{ id: 2, assignee: "eve" }]); snap("closed answered");
  await settle("assign:3", {}); snap("assign accepted");
  await settle("close:3", {}); snap("close accepted");
  console.log(frames.join("\n"));
});