@ersbeth/picoflow 1.1.2 → 2.0.0

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

@@ -0,0 +1,1592 @@
+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());
+            // });
+        });
+    });
+});