Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show double evaluation #2411

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+231 −62
Open

Show double evaluation #2411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5bc544c
Added tests for Show counting condition evaluations
TPReal Jan 24, 2025
c0cc51f
Fixes <Show> evaluating the condition twice
TPReal Jan 24, 2025
f2a1e9d
Made <Match> conditions only evaluate when needed
TPReal Jan 24, 2025
2174599
changeset
TPReal Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hot-jeans-cheer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"solid-js": patch
---

Removed unnecessary evaluations of <Show> and <Match> conditions.
99 changes: 58 additions & 41 deletions packages/solid/src/render/flow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
Accessor,
Setter,
onCleanup,
MemoOptions,
IS_DEV
} from "../reactive/signal.js";
import { mapArray, indexArray } from "../reactive/array.js";
Expand Down Expand Up @@ -106,16 +105,23 @@ export function Show<T>(props: {
children: JSX.Element | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => JSX.Element);
}): JSX.Element {
const keyed = props.keyed;
const condition = createMemo<T | undefined | null | boolean>(
const conditionValue = createMemo<T | undefined | null | boolean>(
() => props.when,
undefined,
IS_DEV
? {
equals: (a, b) => (keyed ? a === b : !a === !b),
name: "condition"
}
: { equals: (a, b) => (keyed ? a === b : !a === !b) }
IS_DEV ? { name: "condition value" } : undefined
);
const condition = keyed
? conditionValue
: createMemo(
conditionValue,
undefined,
IS_DEV
? {
equals: (a, b) => !a === !b,
name: "condition"
}
: { equals: (a, b) => !a === !b }
);
return createMemo(
() => {
const c = condition();
Expand All @@ -129,7 +135,7 @@ export function Show<T>(props: {
? (c as T)
: () => {
if (!untrack(condition)) throw narrowedError("Show");
return props.when;
return conditionValue();
}
)
)
Expand All @@ -142,7 +148,7 @@ export function Show<T>(props: {
) as unknown as JSX.Element;
}

type EvalConditions = readonly [number, unknown?, MatchProps<unknown>?];
type EvalConditions = readonly [number, Accessor<unknown>, MatchProps<unknown>];

/**
* Switches between content based on mutually exclusive conditions
Expand All @@ -159,47 +165,58 @@ type EvalConditions = readonly [number, unknown?, MatchProps<unknown>?];
* @description https://docs.solidjs.com/reference/components/switch-and-match
*/
export function Switch(props: { fallback?: JSX.Element; children: JSX.Element }): JSX.Element {
let keyed = false;
const equals: MemoOptions<EvalConditions>["equals"] = (a, b) =>
(keyed ? a[1] === b[1] : !a[1] === !b[1]) && a[2] === b[2];
const conditions = children(() => props.children) as unknown as () => MatchProps<unknown>[],
evalConditions = createMemo(
(): EvalConditions => {
let conds = conditions();
if (!Array.isArray(conds)) conds = [conds];
for (let i = 0; i < conds.length; i++) {
const c = conds[i].when;
if (c) {
keyed = !!conds[i].keyed;
return [i, c, conds[i]];
}
}
return [-1];
},
undefined,
IS_DEV ? { equals, name: "eval conditions" } : { equals }
);
const chs = children(() => props.children);
const switchFunc = createMemo(() => {
const ch = chs() as unknown as MatchProps<unknown> | MatchProps<unknown>[];
const mps = Array.isArray(ch) ? ch : [ch];
let func: Accessor<EvalConditions | undefined> = () => undefined;
for (let i = 0; i < mps.length; i++) {
const index = i;
const mp = mps[i];
const prevFunc = func;
const conditionValue = createMemo(
() => (prevFunc() ? undefined : mp.when),
undefined,
IS_DEV ? { name: "condition value" } : undefined
);
const condition = mp.keyed
? conditionValue
: createMemo(
conditionValue,
undefined,
IS_DEV
? {
equals: (a, b) => !a === !b,
name: "condition"
}
: { equals: (a, b) => !a === !b }
);
func = () => prevFunc() || (condition() ? [index, conditionValue, mp] : undefined);
}
return func;
});
return createMemo(
() => {
const [index, when, cond] = evalConditions();
if (index < 0) return props.fallback;
const c = cond!.children;
const fn = typeof c === "function" && c.length > 0;
const sel = switchFunc()();
if (!sel) return props.fallback;
const [index, conditionValue, mp] = sel;
const child = mp.children;
const fn = typeof child === "function" && child.length > 0;
return fn
? untrack(() =>
(c as any)(
keyed
? when
(child as any)(
mp.keyed
? (conditionValue() as any)
: () => {
if (untrack(evalConditions)[0] !== index) throw narrowedError("Match");
return cond!.when;
if (untrack(switchFunc)()?.[0] !== index) throw narrowedError("Match");
return conditionValue();
}
)
)
: c;
: child;
},
undefined,
IS_DEV ? { name: "value" } : undefined
IS_DEV ? { name: "eval conditions" } : undefined
) as unknown as JSX.Element;
}

Expand Down
81 changes: 60 additions & 21 deletions packages/solid/web/test/show.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,17 @@ describe("Testing an only child show control flow with DOM children", () => {
describe("Testing nonkeyed show control flow", () => {
let div!: HTMLDivElement, disposer: () => void;
const [count, setCount] = createSignal(0);
let executed = 0;
let whenExecuted = 0;
let childrenExecuted = 0;
function when() {
whenExecuted++;
return count();
}
const Component = () => (
<div ref={div}>
<Show when={count()}>
<Show when={when()}>
<span>{count()}</span>
<span>{executed++}</span>
<span>{childrenExecuted++}</span>
</Show>
</div>
);
Expand All @@ -89,19 +94,27 @@ describe("Testing nonkeyed show control flow", () => {
});

expect(div.innerHTML).toBe("");
expect(executed).toBe(0);
expect(whenExecuted).toBe(1);
expect(childrenExecuted).toBe(0);
});

test("Toggle show control flow", () => {
setCount(7);
expect(whenExecuted).toBe(2);
expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(3);
expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(3);
setCount(0);
expect(whenExecuted).toBe(4);
expect(div.innerHTML).toBe("");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(5);
});

test("dispose", () => disposer());
Expand All @@ -110,12 +123,17 @@ describe("Testing nonkeyed show control flow", () => {
describe("Testing keyed show control flow", () => {
let div!: HTMLDivElement, disposer: () => void;
const [count, setCount] = createSignal(0);
let executed = 0;
let whenExecuted = 0;
let childrenExecuted = 0;
function when() {
whenExecuted++;
return count();
}
const Component = () => (
<div ref={div}>
<Show when={count()} keyed>
<Show when={when()} keyed>
<span>{count()}</span>
<span>{executed++}</span>
<span>{childrenExecuted++}</span>
</Show>
</div>
);
Expand All @@ -127,19 +145,27 @@ describe("Testing keyed show control flow", () => {
});

expect(div.innerHTML).toBe("");
expect(executed).toBe(0);
expect(whenExecuted).toBe(1);
expect(childrenExecuted).toBe(0);
});

test("Toggle show control flow", () => {
setCount(7);
expect(whenExecuted).toBe(2);
expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(3);
expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5");
expect(executed).toBe(2);
expect(childrenExecuted).toBe(2);
setCount(5);
expect(whenExecuted).toBe(3);
setCount(0);
expect(whenExecuted).toBe(4);
expect(div.innerHTML).toBe("");
expect(executed).toBe(2);
expect(childrenExecuted).toBe(2);
setCount(5);
expect(whenExecuted).toBe(5);
});

test("dispose", () => disposer());
Expand All @@ -148,14 +174,19 @@ describe("Testing keyed show control flow", () => {
describe("Testing nonkeyed function show control flow", () => {
let div!: HTMLDivElement, disposer: () => void;
const [count, setCount] = createSignal(0);
let executed = 0;
let whenExecuted = 0;
let childrenExecuted = 0;
function when() {
whenExecuted++;
return count();
}
const Component = () => (
<div ref={div}>
<Show when={count()}>
<Show when={when()}>
{count => (
<>
<span>{count()}</span>
<span>{executed++}</span>
<span>{childrenExecuted++}</span>
</>
)}
</Show>
Expand All @@ -169,19 +200,27 @@ describe("Testing nonkeyed function show control flow", () => {
});

expect(div.innerHTML).toBe("");
expect(executed).toBe(0);
expect(whenExecuted).toBe(1);
expect(childrenExecuted).toBe(0);
});

test("Toggle show control flow", () => {
setCount(7);
expect(whenExecuted).toBe(2);
expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("7");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(3);
expect((div.firstChild as HTMLSpanElement).innerHTML).toBe("5");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(3);
setCount(0);
expect(whenExecuted).toBe(4);
expect(div.innerHTML).toBe("");
expect(executed).toBe(1);
expect(childrenExecuted).toBe(1);
setCount(5);
expect(whenExecuted).toBe(5);
});

test("dispose", () => disposer());
Expand Down
Loading