diff --git a/.changeset/witty-crabs-search.md b/.changeset/witty-crabs-search.md new file mode 100644 index 000000000..4564d5b88 --- /dev/null +++ b/.changeset/witty-crabs-search.md @@ -0,0 +1,5 @@ +--- +"solid-js": patch +--- + +make createSelector transition-aware diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts index f4f0309ab..dce94319b 100644 --- a/packages/solid/src/reactive/signal.ts +++ b/packages/solid/src/reactive/signal.ts @@ -851,7 +851,8 @@ export function createSelector( for (const [key, val] of subs.entries()) if (fn(key, v) !== fn(key, p!)) { for (const c of val.values()) { - c.state = STALE; + if (Transition && Transition.running) c.tState = STALE; + else c.state = STALE; if (c.pure) Updates!.push(c); else Effects!.push(c); } diff --git a/packages/solid/test/signals.spec.ts b/packages/solid/test/signals.spec.ts index 6d31bb3bb..395a16d08 100644 --- a/packages/solid/test/signals.spec.ts +++ b/packages/solid/test/signals.spec.ts @@ -19,8 +19,10 @@ import { useContext, getOwner, runWithOwner, - children + children, + startTransition } from "../src/index.js"; +import { getSuspenseContext } from "../src/reactive/signal.js"; import "./MessageChannel"; @@ -811,6 +813,36 @@ describe("createSelector", () => { }); }); })); + + test("selection made inside a transition", async () => { + // startTransition only creates a real Transition once a SuspenseContext exists + getSuspenseContext(); + + await createRoot(async () => { + const [s, set] = createSignal(-1), + isSelected = createSelector(s); + let count = 0; + const list = Array.from({ length: 3 }, (_, i) => + createMemo(() => { + count++; + return isSelected(i) ? "selected" : "no"; + }) + ); + expect(count).toBe(3); + expect(list[1]()).toBe("no"); + + count = 0; + await startTransition(() => set(1)); + expect(count).toBe(1); + expect(list[1]()).toBe("selected"); + + count = 0; + await startTransition(() => set(2)); + expect(count).toBe(2); + expect(list[1]()).toBe("no"); + expect(list[2]()).toBe("selected"); + }); + }); }); describe("create and use context", () => {