@ersbeth/picoflow 2.0.2 → 2.1.0

package/test/converters/solid.state.browser.test.tsx

@@ -1,1592 +0,0 @@
-import { cleanup, render } from "@solidjs/testing-library";
-import { type Component, createResource, ErrorBoundary, Match, Suspense, Switch } from "solid-js";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { userEvent } from "vitest/browser";
-import { type FlowState, from, state, stateAsync } from "~";
-
-describe("solid converter", () => {
-    beforeEach(() => {
-        cleanup();
-    });
-
-    describe("initialization", () => {
-        describe("happy path", () => {
-            it("init-happy-path: should convert FlowState to SolidResource", async () => {
-                const Comp: Component = () => {
-                    const $state = state(42);
-                    const $$state = from($state);
-
-                    return <div>{$$state()}</div>;
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-            });
-
-            it("init-happy-path: should convert AsyncFlowState to SolidResource", async () => {
-                const Comp: Component = () => {
-                    const $stateAsync = stateAsync(Promise.resolve(42));
-                    const $$stateAsync = from($stateAsync);
-
-                    return <div>{$$stateAsync()}</div>;
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-            });
-
-            it("init-happy-path: should convert getter function to SolidResource", async () => {
-                const Comp: Component = () => {
-                    const $a = state(10);
-                    const $b = state(20);
-
-                    const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                    return <div>{$$result()}</div>;
-                };
-
-                const { getByText } = render(() => <Comp />);
-
-                await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-            });
-
-            it("init-happy-path: should convert async getter function to SolidResource", async () => {
-                const Comp: Component = () => {
-                    const $a = stateAsync<number>(Promise.resolve(10));
-                    const $b = state(20);
-
-                    const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                    return <div>{$$result()}</div>;
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-            });
-        });
-
-        describe("suspense", () => {
-            describe("flag", () => {
-                it("init-suspense-flag: should handle suspense in FlowStateAsync", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.resolve(42));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Switch>
-                                <Match when={$$stateAsync.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$stateAsync()}>
-                                    <div>{$$stateAsync()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("init-suspense-flag: should handle suspense in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Switch>
-                                <Match when={$$result.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$result()}>
-                                    <div>{$$result()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-            });
-
-            describe("component", () => {
-                it("init-suspense-component: should handle suspense in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(42);
-                        const $$state = from($state);
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$state()}</div>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("init-suspense-component: should handle suspense in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.resolve(42));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$stateAsync()}</div>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("init-suspense-component: should handle suspense in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(10);
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$result()}</div>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-
-                it("init-suspense-component: should handle suspense in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$result()}</div>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-            });
-        });
-
-        describe("error", () => {
-            describe("flag", () => {
-                it("init-error-flag: should handle error in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $$state = from($state);
-                        return (
-                            <Switch>
-                                <Match when={$$state.error}>
-                                    <div>Error</div>
-                                </Match>
-                                <Match when={$$state()}>
-                                    <div>{$$state()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-error-flag: should handle error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Switch>
-                                <Match when={$$stateAsync.error}>
-                                    <div>Error</div>
-                                </Match>
-                                <Match when={$$stateAsync()}>
-                                    <div>{$$stateAsync()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-error-flag: should handle error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Switch>
-                                <Match when={$$result.error}>
-                                    <div>Error</div>
-                                </Match>
-                                <Match when={$$result()}>
-                                    <div>{$$result()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-error-flag: should handle error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Switch>
-                                <Match when={$$result.error}>
-                                    <div>Error</div>
-                                </Match>
-                                <Match when={$$result()}>
-                                    <div>{$$result()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-            });
-
-            describe("component", () => {
-                it("init-error-component: should handle error in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $$state = from($state);
-
-                        return (
-                            <ErrorBoundary fallback="Error">
-                                <div>{$$state()}</div>
-                            </ErrorBoundary>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-error-component: should handle error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <ErrorBoundary fallback="Error">
-                                <div>{$$stateAsync()}</div>
-                            </ErrorBoundary>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-error-component: should handle error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <ErrorBoundary fallback="Error">
-                                <div>{$$result()}</div>
-                            </ErrorBoundary>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-error-component: should handle error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <ErrorBoundary fallback="Error">
-                                <div>{$$result()}</div>
-                            </ErrorBoundary>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-            });
-        });
-
-        describe("suspense-error", () => {
-            describe("flag", () => {
-                it("init-suspense-error-flag: should handle suspense and error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Switch>
-                                <Match when={$$stateAsync.error}>
-                                    <div>Error</div>
-                                </Match>
-                                <Match when={$$stateAsync.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$stateAsync()}>
-                                    <div>{$$stateAsync()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-suspense-error-flag: should handle suspense and error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Switch>
-                                <Match when={$$result.error}>
-                                    <div>Error</div>
-                                </Match>
-                                <Match when={$$result.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$result()}>
-                                    <div>{$$result()}</div>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-            });
-
-            describe("component", () => {
-                it("init-suspense-error-component: should handle suspense and error in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $$state = from($state);
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$state()}</div>
-                                </ErrorBoundary>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-suspense-error-component: should handle suspense and error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$stateAsync()}</div>
-                                </ErrorBoundary>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-suspense-error-component: should handle suspense and error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$result()}</div>
-                                </ErrorBoundary>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-
-                it("init-suspense-error-component: should handle suspense and error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$result()}</div>
-                                </ErrorBoundary>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                });
-            });
-        });
-    });
-
-    describe("updates", () => {
-        describe("happy path", () => {
-            it("update-happy-path: should update FlowState", async () => {
-                const Comp: Component = () => {
-                    const $state = state<number>(42);
-                    const $$state = from($state);
-
-                    return (
-                        <div>
-                            <div>{$$state()}</div>
-                            <button type="button" onClick={() => $state.set(43)}>
-                                Update
-                            </button>
-                        </div>
-                    );
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                await userEvent.click(getByText("Update"));
-                await vi.waitFor(() => expect.element(getByText("43")).toBeInTheDocument());
-            });
-
-            it("update-happy-path: should update AsyncFlowState", async () => {
-                const Comp: Component = () => {
-                    const $stateAsync = stateAsync<number>(Promise.resolve(42));
-                    const $$stateAsync = from($stateAsync);
-
-                    return (
-                        <div>
-                            <div>{$$stateAsync()}</div>
-                            <button type="button" onClick={() => $stateAsync.set(Promise.resolve(43))}>
-                                Update
-                            </button>
-                        </div>
-                    );
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                await userEvent.click(getByText("Update"));
-                await vi.waitFor(() => expect.element(getByText("43")).toBeInTheDocument());
-            });
-
-            it("update-happy-path: should update getter function", async () => {
-                const Comp: Component = () => {
-                    const $a = state<number>(10);
-                    const $b = state(20);
-
-                    const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                    return (
-                        <div>
-                            <div>{$$result()}</div>
-                            <button type="button" onClick={() => $a.set(11)}>
-                                Update
-                            </button>
-                        </div>
-                    );
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                await userEvent.click(getByText("Update"));
-                await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-            });
-
-            it("update-happy-path: should update async getter function", async () => {
-                const Comp: Component = () => {
-                    const $a = stateAsync<number>(Promise.resolve(10));
-                    const $b = state(20);
-
-                    const $$result = from((t) => $a.get(t) + $b.get(t));
-                    return (
-                        <div>
-                            <div>{$$result()}</div>
-                            <button type="button" onClick={() => $a.set(Promise.resolve(11))}>
-                                Update
-                            </button>
-                        </div>
-                    );
-                };
-
-                const { getByText } = render(() => <Comp />);
-                await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                await userEvent.click(getByText("Update"));
-                await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-            });
-        });
-
-        describe("suspense", () => {
-            describe("flag", () => {
-                it("update-suspense-flag: should handle suspense in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.resolve(42));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Switch>
-                                <Match when={$$stateAsync.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$stateAsync()}>
-                                    <div>{$$stateAsync()}</div>
-                                    <button
-                                        type="button"
-                                        onClick={() =>
-                                            $stateAsync.set(
-                                                new Promise((resolve) => setTimeout(() => resolve(43), 100)),
-                                            )
-                                        }
-                                    >
-                                        Update
-                                    </button>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("43")).toBeInTheDocument());
-                });
-
-                it("update-suspense-flag: should handle suspense in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <Switch>
-                                <Match when={$$result.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$result()}>
-                                    <div>{$$result()}</div>
-                                    <button
-                                        type="button"
-                                        onClick={() =>
-                                            $a.set(new Promise((resolve) => setTimeout(() => resolve(11), 100)))
-                                        }
-                                    >
-                                        Update
-                                    </button>
-                                </Match>
-                            </Switch>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-            });
-
-            describe("component", () => {
-                it("update-suspense-component: should handle suspense in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(42);
-                        const $$state = from($state);
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$state()}</div>
-                                <button type="button" onClick={() => $state.set(43)}>
-                                    Update
-                                </button>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("43")).toBeInTheDocument());
-                });
-
-                it.skip("temp", async () => {
-                    const Comp: Component = () => {
-                        let value = 42;
-
-                        const [resource, { refetch }] = createResource<number>(() => {
-                            return new Promise((resolve) => setTimeout(() => resolve(value), 500));
-                        });
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{resource()}</div>
-                                <button
-                                    type="button"
-                                    onClick={() => {
-                                        value = 43;
-                                        refetch();
-                                    }}
-                                >
-                                    Update
-                                </button>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("43")).toBeInTheDocument());
-                });
-
-                it("update-suspense-component: should handle suspense in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(
-                            new Promise((resolve) => setTimeout(() => resolve(42), 500)),
-                        );
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$stateAsync()}</div>
-                                <button
-                                    type="button"
-                                    onClick={() =>
-                                        $stateAsync.set(new Promise((resolve) => setTimeout(() => resolve(43), 500)))
-                                    }
-                                >
-                                    Update
-                                </button>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("43")).toBeInTheDocument());
-                });
-
-                it("update-suspense-component: should handle suspense in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(10);
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-                        return (
-                            <Suspense fallback="Loading">
-                                <div>{$$result()}</div>
-                                <button type="button" onClick={() => $a.set(11)}>
-                                    Update
-                                </button>
-                            </Suspense>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await expect.element(getByText("Loading")).toBeInTheDocument();
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-suspense-component: should handle suspense in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-                        return (
-                            <div>
-                                <Suspense fallback="Loading">
-                                    <div>{$$result()}</div>
-                                </Suspense>
-                                <button
-                                    type="button"
-                                    onClick={() => $a.set(new Promise((resolve) => setTimeout(() => resolve(11), 100)))}
-                                >
-                                    Update
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-
-                    await userEvent.click(getByText("Update"));
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-            });
-        });
-
-        describe("error", () => {
-            describe("flag", () => {
-                it("update-error-flag: should recover from initial error in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $$state = from($state);
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$state.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$state()}>
-                                        <div>{$$state()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $state.set(42)}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("update-error-flag: should recover from initial error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$stateAsync.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$stateAsync()}>
-                                        <div>{$$stateAsync()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $stateAsync.set(Promise.resolve(42))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("update-error-flag: should recover from initial error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$result.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$result()}>
-                                        <div>{$$result()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $a.set(11)}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-error-flag: should recover from initial error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$result.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$result()}>
-                                        <div>{$$result()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $a.set(Promise.resolve(11))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-error-flag: should handle error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(10);
-                        const $b = state(20);
-
-                        const $$result = from((t) => {
-                            if ($a.get(t) > 10) {
-                                throw new Error("Test error");
-                            } else {
-                                return $a.get(t) + $b.get(t);
-                            }
-                        });
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$result.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$result()}>
-                                        <div>{$$result()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $a.set((v) => (v ? v + 1 : 0))}>
-                                    Increment Value
-                                </button>
-                                <button type="button" onClick={() => $a.set((v) => (v ? v - 1 : 0))}>
-                                    Decrement Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Increment Value"));
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Decrement Value"));
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-
-                it("update-error-flag: should handle error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => {
-                            if ($a.get(t) > 10) {
-                                throw new Error("Test error");
-                            } else {
-                                return $a.get(t) + $b.get(t);
-                            }
-                        });
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$result.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$result()}>
-                                        <div>{$$result()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v + 1 : 0))}>
-                                    Increment Value
-                                </button>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v - 1 : 0))}>
-                                    Decrement Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Increment Value"));
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Decrement Value"));
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-            });
-
-            describe("component", () => {
-                it("update-error-component: should recover from initial error in FlowState", async () => {
-                    const Comp: Component = () => {
-                        const $state = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $$state = from($state);
-                        return (
-                            <div>
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$state()}</div>
-                                </ErrorBoundary>
-                                <button type="button" onClick={() => $state.set(42)}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("update-error-component: should recover from initial error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <div>
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$stateAsync()}</div>
-                                </ErrorBoundary>
-                                <button type="button" onClick={() => $stateAsync.set(Promise.resolve(42))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("update-error-component: should recover from initial error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(() => {
-                            throw new Error("Test error");
-                        });
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <div>
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$result()}</div>
-                                </ErrorBoundary>
-                                <button type="button" onClick={() => $a.set(11)}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-error-component: should recover from initial error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <div>
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$result()}</div>
-                                </ErrorBoundary>
-                                <button type="button" onClick={() => $a.set(Promise.resolve(11))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-error-component: should handle error in getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = state<number>(10);
-                        const $b = state(20);
-
-                        const $$result = from((t) => {
-                            if ($a.get(t) > 10) {
-                                throw new Error("Test error");
-                            } else {
-                                return $a.get(t) + $b.get(t);
-                            }
-                        });
-
-                        return (
-                            <div>
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$result()}</div>
-                                </ErrorBoundary>
-                                <button type="button" onClick={() => $a.set((v) => (v ? v + 1 : 0))}>
-                                    Increment Value
-                                </button>
-                                <button type="button" onClick={() => $a.set((v) => (v ? v - 1 : 0))}>
-                                    Decrement Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Increment Value"));
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Decrement Value"));
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-
-                it("update-error-component: should handle error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => {
-                            if ($a.get(t) > 10) {
-                                throw new Error("Test error");
-                            } else {
-                                return $a.get(t) + $b.get(t);
-                            }
-                        });
-
-                        return (
-                            <div>
-                                <ErrorBoundary fallback="Error">
-                                    <div>{$$result()}</div>
-                                </ErrorBoundary>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v + 1 : 0))}>
-                                    Increment Value
-                                </button>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v - 1 : 0))}>
-                                    Decrement Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Increment Value"));
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Decrement Value"));
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-            });
-        });
-
-        describe("suspense-error", () => {
-            describe("flag", () => {
-                it("update-suspense-error-flag: should recover from initial error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$stateAsync.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$stateAsync.loading}>
-                                        <div>Loading</div>
-                                    </Match>
-                                    <Match when={$$stateAsync()}>
-                                        <div>{$$stateAsync()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $stateAsync.set(Promise.resolve(42))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("update-suspense-error-flag: should recover from initial error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$result.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$result.loading}>
-                                        <div>Loading</div>
-                                    </Match>
-                                    <Match when={$$result()}>
-                                        <div>{$$result()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $a.set(Promise.resolve(11))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-suspense-error-flag: should handle error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => {
-                            if ($a.get(t) > 10) {
-                                throw new Error("Test error");
-                            } else {
-                                return $a.get(t) + $b.get(t);
-                            }
-                        });
-
-                        return (
-                            <div>
-                                <Switch>
-                                    <Match when={$$result.error}>
-                                        <div>Error</div>
-                                    </Match>
-                                    <Match when={$$result.loading}>
-                                        <div>Loading</div>
-                                    </Match>
-                                    <Match when={$$result()}>
-                                        <div>{$$result()}</div>
-                                    </Match>
-                                </Switch>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v + 1 : 0))}>
-                                    Increment Value
-                                </button>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v - 1 : 0))}>
-                                    Decrement Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Increment Value"));
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Decrement Value"));
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-            });
-
-            describe("component", () => {
-                it("update-suspense-error-component: should recover from initial error in AsyncFlowState", async () => {
-                    const Comp: Component = () => {
-                        const $stateAsync = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $$stateAsync = from($stateAsync);
-
-                        return (
-                            <div>
-                                <Suspense fallback="Loading">
-                                    <ErrorBoundary fallback="Error">
-                                        <div>{$$stateAsync()}</div>
-                                    </ErrorBoundary>
-                                </Suspense>
-                                <button type="button" onClick={() => $stateAsync.set(Promise.resolve(42))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("42")).toBeInTheDocument());
-                });
-
-                it("update-suspense-error-component: should recover from initial error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.reject(new Error("Test error")));
-                        const $b = state(20);
-
-                        const $$result = from((t) => $a.get(t) + $b.get(t));
-
-                        return (
-                            <div>
-                                <Suspense fallback="Loading">
-                                    <ErrorBoundary fallback="Error">
-                                        <div>{$$result()}</div>
-                                    </ErrorBoundary>
-                                </Suspense>
-                                <button type="button" onClick={() => $a.set(Promise.resolve(11))}>
-                                    Update Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Update Value"));
-                    await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                });
-
-                it("update-suspense-error-component: should handle error in async getter function", async () => {
-                    const Comp: Component = () => {
-                        const $a = stateAsync<number>(Promise.resolve(10));
-                        const $b = state(20);
-
-                        const $$result = from((t) => {
-                            if ($a.get(t) > 10) {
-                                throw new Error("Test error");
-                            } else {
-                                return $a.get(t) + $b.get(t);
-                            }
-                        });
-
-                        return (
-                            <div>
-                                <Suspense fallback="Loading">
-                                    <ErrorBoundary fallback="Error">
-                                        <div>{$$result()}</div>
-                                    </ErrorBoundary>
-                                </Suspense>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v + 1 : 0))}>
-                                    Increment Value
-                                </button>
-                                <button type="button" onClick={() => $a.set(async (v) => (v ? v - 1 : 0))}>
-                                    Decrement Value
-                                </button>
-                            </div>
-                        );
-                    };
-
-                    const { getByText } = render(() => <Comp />);
-
-                    await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                    await userEvent.click(getByText("Increment Value"));
-                    await vi.waitFor(() => expect.element(getByText("Error")).toBeInTheDocument());
-                    await userEvent.click(getByText("Decrement Value"));
-                    await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                });
-            });
-        });
-    });
-
-    describe("replacement", () => {
-        describe("happy path", () => {
-            it("replacement-happy-path: should update FlowState via Switch", async () => {
-                const CompInner: Component<{ $state: FlowState<number> }> = ({ $state }) => {
-                    const $$state = from($state);
-
-                    return (
-                        <div>
-                            <div>{$$state()}</div>
-                            <button type="button" onClick={() => $state.set((v) => (v ? v + 1 : 0))}>
-                                Increment
-                            </button>
-                        </div>
-                    );
-                };
-
-                const CompOuter: Component = () => {
-                    const $stateA = state<number>(20);
-                    const $stateB = state<number>(30);
-                    const $selected = state<FlowState<number>>($stateA);
-
-                    const $$selected = from($selected);
-
-                    return (
-                        <div>
-                            <Switch>
-                                <Match when={$$selected.loading}>
-                                    <div>Loading</div>
-                                </Match>
-                                <Match when={$$selected()}>{(selected) => <CompInner $state={selected()} />}</Match>
-                            </Switch>
-                            <button type="button" onClick={() => $selected.set($stateA)}>
-                                Use A
-                            </button>
-                            <button type="button" onClick={() => $selected.set($stateB)}>
-                                Use B
-                            </button>
-                        </div>
-                    );
-                };
-
-                const { getByText } = render(() => <CompOuter />);
-                await vi.waitFor(() => expect.element(getByText("20")).toBeInTheDocument());
-                await userEvent.click(getByText("Increment"));
-                await vi.waitFor(() => expect.element(getByText("21")).toBeInTheDocument());
-                await userEvent.click(getByText("Use B"));
-                await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-                await userEvent.click(getByText("Increment"));
-                await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-                await userEvent.click(getByText("Use A"));
-                await vi.waitFor(() => expect.element(getByText("21")).toBeInTheDocument());
-            });
-
-            // it("replacement-happy-path: should update FlowState via Show", async () => {
-
-            //     const FlowBoundary: Component<{ resource: Resource<FlowState<unknown>>, children: Component<{ $state: FlowState<unknown> }> }> = (props) => {
-            //         return (
-            //             <div>
-            //                 <Switch>
-            //                     <Match when={props.resource.loading}>
-            //                         <div>Loading</div>
-            //                     </Match>
-            //                     <Match when={props.resource.error}>
-            //                         <div>Error</div>
-            //                     </Match>
-            //                     <Match when={props.resource()}>
-            //                         {(resource) => props.children({ $state: resource() })}
-            //                     </Match>
-            //                 </Switch>
-            //             </div >
-            //         )
-            //     }
-
-            //     const CompInner: Component<{ $state: FlowState<number> }> = ({ $state }) => {
-
-            //         const $$state = from($state);
-
-            //         return (
-            //             <div>
-            //                 <div>{$$state()}</div>
-            //                 <button type="button" onClick={() => $state.set((v) => v ? v + 1 : 0)}>Increment</button>
-            //             </div>
-            //         )
-            //     }
-
-            //     const CompOuter: Component = () => {
-            //         const $stateA = state<number>(20);
-            //         const $stateB = state<number>(30);
-            //         const $selected = state<FlowState<number>>($stateA);
-
-            //         const $$selected = from($selected);
-
-            //         return (
-            //             <div>
-            //                 <FlowBoundary resource={$$selected}>
-            //                     <CompInner/>
-            //                 </FlowBoundary>
-            //                 <button type="button" onClick={() => $selected.set($stateA)}>Use A</button>
-            //                 <button type="button" onClick={() => $selected.set($stateB)}>Use B</button>
-            //             </div >
-            //         )
-            //     }
-
-            //     const { getByText } = render(() => <CompOuter />);
-            //     await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-            //     await vi.waitFor(() => expect.element(getByText("20")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Increment"));
-            //     await vi.waitFor(() => expect.element(getByText("21")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Use B"));
-            //     await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Increment"));
-            //     await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Use A"));
-            //     await vi.waitFor(() => expect.element(getByText("21")).toBeInTheDocument());
-            // });
-
-            // it("replacement-happy-path: should update FlowState via FlowBoundary", async () => {
-
-            //     const CompInner: Component<{ $state: FlowState<number> }> = ({ $state }) => {
-            //         // if (!props.$state) { return undefined }
-
-            //         const $$state = from($state);
-
-            //         return (
-            //             <div>
-            //                 <div>{$$state()}</div>
-            //                 <button type="button" onClick={() => $state.set((v) => v ? v + 1 : 0)}>Increment</button>
-            //             </div>
-            //         )
-            //     }
-
-            //     const CompOuter: Component = () => {
-            //         const $stateA = state<number>(20);
-            //         const $stateB = state<number>(30);
-            //         const $selected = state<FlowState<number>>($stateA);
-
-            //         const $$selected = from($selected);
-
-            //         return (
-            //             <div>
-            //                 <Suspense fallback="Loading Outer">
-            //                     <CompInner $state={$$selected()} />
-            //                 </Suspense>
-            //                 <button type="button" onClick={() => $selected.set($stateA)}>Use A</button>
-            //                 <button type="button" onClick={() => $selected.set($stateB)}>Use B</button>
-            //             </div >
-            //         )
-            //     }
-
-            //     const { getByText } = render(() => <CompOuter />);
-            //     await vi.waitFor(() => expect.element(getByText("Loading")).toBeInTheDocument());
-            //     await vi.waitFor(() => expect.element(getByText("20")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Increment"));
-            //     await vi.waitFor(() => expect.element(getByText("21")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Use B"));
-            //     await vi.waitFor(() => expect.element(getByText("30")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Increment"));
-            //     await vi.waitFor(() => expect.element(getByText("31")).toBeInTheDocument());
-            //     await userEvent.click(getByText("Use A"));
-            //     await vi.waitFor(() => expect.element(getByText("21")).toBeInTheDocument());
-            // });
-        });
-    });
-});