[2.0 / next] createOptimisticStore: add, delete, add with saves pending hands <For> an undefined row

import { render } from "@solidjs/web";
import { action, createOptimisticStore, flush, For, Loading, refresh } from "solid-js";
import { expect, it } from "vitest";

const tick = async () => { for (let i = 0; i < 2; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };
type Todo = { id: number; title: string };

// The cheatsheet's todo list; the user adds a todo before the list has loaded.
async function run(order: "list-first" | "save-first") {
  let server: Todo[] = [{ id: 1, title: "milk" }, { id: 2, title: "eggs" }];
  const out: { key: string; go: () => void }[] = [];
  const call = (key: string, apply?: () => void) =>
    new Promise<any>(resolve => out.push({ key, go: () => { apply?.(); resolve(key === "list" ? server.map(t => ({ ...t })) : true); } }));
  const land = (key: string) => out.splice(out.findIndex(f => f.key === key), 1)[0].go();
  const el = document.createElement("div");
  const frames: string[] = [];
  let add!: (t: Todo) => Promise<unknown>;
  const dispose = render(() => {
    const [todos, setTodos] = createOptimisticStore<Todo[]>(() => call("list"), []);
    add = action(function* (todo: Todo) {
      setTodos(s => { s.push(todo); });
      yield call("add:" + todo.id, () => { server = [...server, todo]; });
      refresh(todos);
    });
    return <Loading fallback={<p>loading</p>}><For each={todos}>{t => <li>[{t.title}]</li>}</For></Loading>;
  }, el);
  await tick();
  add({ id: 3, title: "jam" }); flush(); await tick();
  if (order === "list-first") { land("list"); await tick(); frames.push(el.textContent!); land("add:3"); await tick(); }
  else { land("add:3"); await tick(); land("list"); await tick(); frames.push(el.textContent!); }
  while (out.length) { land(out[0].key); await tick(); }   // the add's refresh
  frames.push(el.textContent!);
  dispose();
  return frames;
}

it("the list lands while the add is saving", async () => {
  expect(await run("list-first")).toEqual(["[milk][eggs][jam]", "[milk][eggs][jam]"]);
});

it("the add is saved before the list lands", async () => {
  expect(await run("save-first")).toEqual(["[milk][eggs][jam]", "[milk][eggs][jam]"]);
});

import { render } from "@solidjs/web";
import { action, createOptimisticStore, flush, For, Loading, refresh } from "solid-js";
import { expect, it } from "vitest";

const tick = async () => { for (let i = 0; i < 2; i++) { await new Promise(r => setTimeout(r, 0)); flush(); } };
type Todo = { id: number; title: string };

// The cheatsheet's todo list: delete a todo, the server declines, then add another.
for (const renameFirst of [false, true])
it(`a declined delete, then an add, settles to the server's list (rename first=${renameFirst})`, async () => {
  let server: Todo[] = [{ id: 1, title: "milk" }, { id: 2, title: "eggs" }];
  const out: { key: string; go: (ok: boolean) => void }[] = [];
  const call = (key: string, apply?: () => void) => new Promise<any>((resolve, reject) =>
    out.push({ key, go: ok => { if (!ok) return reject(new Error(key)); apply?.(); resolve(key === "list" ? server.map(t => ({ ...t })) : true); } }));
  const land = (key: string, ok = true) => out.splice(out.findIndex(f => f.key === key), 1)[0].go(ok);
  const el = document.createElement("div");
  let rename!: (id: number, t: string) => Promise<unknown>, remove!: (id: number) => Promise<unknown>, add!: (t: Todo) => Promise<unknown>;
  const dispose = render(() => {
    const [todos, setTodos] = createOptimisticStore<Todo[]>(() => call("list"), []);
    rename = action(function* (id: number, title: string) {
      setTodos(s => { const t = s.find(x => x.id === id); if (t) t.title = title; });
      try { yield call("rename:" + id, () => { server = server.map(t => t.id === id ? { ...t, title } : t); }); } catch {}
      refresh(todos);
    });
    remove = action(function* (id: number) {
      setTodos(s => s.filter(x => x.id !== id));
      try { yield call("remove:" + id, () => { server = server.filter(t => t.id !== id); }); } catch {}
      refresh(todos);
    });
    add = action(function* (todo: Todo) {
      setTodos(s => { s.push(todo); });
      try { yield call("add:" + todo.id, () => { server = [...server, todo]; }); } catch {}
      refresh(todos);
    });
    return <Loading fallback={<p>loading</p>}><For each={todos}>{t => <li>[{t.title}]</li>}</For></Loading>;
  }, el);
  const step = async (f: () => void) => { f(); flush(); await tick(); };
  await step(() => land("list"));
  if (renameFirst) await step(() => { rename(1, "oat milk"); });
  await step(() => { remove(1); });
  await step(() => land("remove:1", false));     // the server declines the delete
  await step(() => { add({ id: 3, title: "jam" }); });
  while (out.length) await step(() => land(out[0].key));
  const settled = el.textContent;
  dispose();
  expect(settled).toBe(renameFirst ? "[oat milk][eggs][jam]" : "[milk][eggs][jam]");
});