@marimo-team/frontend 0.25.3-dev5 → 0.25.3-dev55

package/src/hooks/__tests__/useAsyncData.test.tsx

@@ -0,0 +1,148 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, render, renderHook, waitFor } from "@testing-library/react";
+import { Activity } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { Deferred } from "@/utils/Deferred";
+import { useAsyncData } from "../useAsyncData";
+
+function AsyncDataStatus({ fetch }: { fetch: () => Promise<string> }) {
+  const result = useAsyncData(fetch, []);
+  return (
+    <output
+      data-status={result.status}
+      data-fetching={result.isFetching}
+      data-error={result.error?.message ?? ""}
+    >
+      {result.data}
+    </output>
+  );
+}
+
+describe("useAsyncData", () => {
+  it.each(["success", "error"] as const)(
+    "restarts fetching when Activity reopens after %s",
+    async (initialStatus) => {
+      const initial = new Deferred<string>();
+      const restarted = new Deferred<string>();
+      const fetch = vi
+        .fn(() => restarted.promise)
+        .mockImplementationOnce(() => initial.promise);
+      const view = render(
+        <Activity mode="visible">
+          <AsyncDataStatus fetch={fetch} />
+        </Activity>,
+      );
+      await act(async () => {
+        if (initialStatus === "success") {
+          initial.resolve("first");
+        } else {
+          initial.reject(new Error("offline"));
+        }
+      });
+      expect(view.getByRole("status").dataset.status).toBe(initialStatus);
+
+      view.rerender(
+        <Activity mode="hidden">
+          <AsyncDataStatus fetch={fetch} />
+        </Activity>,
+      );
+      view.rerender(
+        <Activity mode="visible">
+          <AsyncDataStatus fetch={fetch} />
+        </Activity>,
+      );
+
+      expect(fetch).toHaveBeenCalledTimes(2);
+      expect(view.getByRole("status").dataset).toMatchObject({
+        status: initialStatus === "success" ? "loading" : "pending",
+        error: "",
+        fetching: "true",
+      });
+      expect(view.getByRole("status").textContent).toBe(
+        initialStatus === "success" ? "first" : "",
+      );
+      await act(async () => restarted.resolve("latest"));
+      expect(view.getByRole("status").dataset).toMatchObject({
+        status: "success",
+        fetching: "false",
+      });
+      expect(view.getByRole("status").textContent).toBe("latest");
+    },
+  );
+
+  it("ignores a request canceled when Activity hides", async () => {
+    const canceled = new Deferred<string>();
+    const restarted = new Deferred<string>();
+    const fetch = vi
+      .fn(() => restarted.promise)
+      .mockImplementationOnce(() => canceled.promise);
+    const view = render(
+      <Activity mode="visible">
+        <AsyncDataStatus fetch={fetch} />
+      </Activity>,
+    );
+    view.rerender(
+      <Activity mode="hidden">
+        <AsyncDataStatus fetch={fetch} />
+      </Activity>,
+    );
+    view.rerender(
+      <Activity mode="visible">
+        <AsyncDataStatus fetch={fetch} />
+      </Activity>,
+    );
+    expect(fetch).toHaveBeenCalledTimes(2);
+    await act(async () => canceled.resolve("obsolete"));
+    expect(view.getByRole("status").dataset.status).toBe("pending");
+    expect(view.getByRole("status").textContent).toBe("");
+    await act(async () => restarted.resolve("latest"));
+    expect(view.getByRole("status").dataset.status).toBe("success");
+    expect(view.getByRole("status").textContent).toBe("latest");
+  });
+
+  it("preserves data while refetching and ignores obsolete requests", async () => {
+    const requests = [
+      new Deferred<string>(),
+      new Deferred<string>(),
+      new Deferred<string>(),
+    ];
+    const fetch = vi
+      .fn(() => requests[0].promise)
+      .mockImplementationOnce(() => requests[0].promise)
+      .mockImplementationOnce(() => requests[1].promise)
+      .mockImplementationOnce(() => requests[2].promise);
+    const { result, rerender } = renderHook(
+      ({ key }) => useAsyncData(fetch, [key]),
+      { initialProps: { key: 0 } },
+    );
+    expect(result.current.status).toBe("pending");
+    await act(async () => requests[0].resolve("first"));
+    expect(result.current.data).toBe("first");
+    rerender({ key: 1 });
+    expect(result.current).toMatchObject({ status: "loading", data: "first" });
+    rerender({ key: 2 });
+    await act(async () => requests[1].resolve("obsolete"));
+    expect(result.current).toMatchObject({ status: "loading", data: "first" });
+    await act(async () => requests[2].resolve("latest"));
+    expect(result.current).toMatchObject({ status: "success", data: "latest" });
+  });
+
+  it("retries after errors and allows manual updates during a request", async () => {
+    const request = new Deferred<string>();
+    const fetch = vi
+      .fn<() => Promise<string>>()
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockImplementation(() => request.promise);
+    const { result } = renderHook(() => useAsyncData(fetch, []));
+    await waitFor(() => expect(result.current.status).toBe("error"));
+    act(() => result.current.refetch());
+    expect(result.current.status).toBe("pending");
+    act(() => result.current.setData("manual"));
+    expect(result.current).toMatchObject({ status: "success", data: "manual" });
+    await act(async () => request.resolve("response"));
+    expect(result.current).toMatchObject({
+      status: "success",
+      data: "response",
+    });
+  });
+});

package/src/hooks/__tests__/useDebounce.test.tsx

@@ -121,6 +121,57 @@ describe("useDebounceControlledState", () => {
 
     expect(onChange).not.toHaveBeenCalled();
   });
+
+  it("replaces an uncommitted draft when the external value changes", () => {
+    const onChange = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useDebounceControlledState({
+          initialValue: value,
+          onChange,
+          delay: 1000,
+        }),
+      { initialProps: { value: "initial" } },
+    );
+
+    act(() => result.current.onChange("draft"));
+    rerender({ value: "external" });
+    expect(result.current.value).toBe("external");
+    act(() => vi.runAllTimers());
+    expect(result.current.debouncedValue).toBe("external");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("handles NaN external values without repeatedly resetting the draft", () => {
+    const onChange = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useDebounceControlledState({ initialValue: value, onChange }),
+      { initialProps: { value: Number.NaN } },
+    );
+
+    expect(result.current.value).toBeNaN();
+    act(() => result.current.onChange(1));
+    rerender({ value: Number.NaN });
+    expect(result.current.value).toBe(1);
+    rerender({ value: 2 });
+    expect(result.current.value).toBe(2);
+    rerender({ value: Number.NaN });
+    expect(result.current.value).toBeNaN();
+  });
+
+  it("resets the draft when the external value changes from zero to negative zero", () => {
+    const onChange = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useDebounceControlledState({ initialValue: value, onChange }),
+      { initialProps: { value: 0 } },
+    );
+
+    act(() => result.current.onChange(1));
+    rerender({ value: -0 });
+    expect(result.current.value).toBe(-0);
+  });
 });
 
 describe("useDebouncedCallback", () => {

package/src/hooks/__tests__/useDeepCompareMemoize.test.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useDeepCompareMemoize } from "../useDeepCompareMemoize";
+
+describe("useDeepCompareMemoize", () => {
+  it("keeps equal values stable and updates changed values immediately", () => {
+    const initial = { nested: [1, 2] };
+    const { result, rerender } = renderHook(
+      ({ value }) => useDeepCompareMemoize(value),
+      {
+        initialProps: { value: initial },
+      },
+    );
+    rerender({ value: { nested: [1, 2] } });
+    expect(result.current).toBe(initial);
+    const changed = { nested: [1, 3] };
+    rerender({ value: changed });
+    expect(result.current).toBe(changed);
+    rerender({ value: { nested: [1, 3] } });
+    expect(result.current).toBe(changed);
+  });
+
+  it("handles inline callbacks without causing additional renders", () => {
+    let renders = 0;
+    const { result, rerender } = renderHook(
+      ({ value }) => {
+        renders++;
+        return useDeepCompareMemoize({ callback: () => value });
+      },
+      { initialProps: { value: "initial" } },
+    );
+
+    const initialRenders = renders;
+    rerender({ value: "changed" });
+    expect(result.current.callback()).toBe("changed");
+    expect(renders).toBe(initialRenders + 1);
+  });
+});

package/src/hooks/__tests__/useDelayElapsed.test.tsx

@@ -52,4 +52,32 @@ describe("useDelayElapsed", () => {
     // The pending timeout must be cleared, not left dangling.
     expect(vi.getTimerCount()).toBe(0);
   });
+
+  it("handles a NaN delay without resetting on every render", () => {
+    const { result, rerender } = renderHook(() => useDelayElapsed(Number.NaN));
+    expect(result.current).toBe(false);
+
+    act(() => vi.runAllTimers());
+    expect(result.current).toBe(true);
+    rerender();
+    expect(result.current).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("restarts a completed delay after the gate is temporarily disabled", () => {
+    const { result, rerender } = renderHook(
+      ({ delay }) => useDelayElapsed(delay),
+      { initialProps: { delay: 1000 } },
+    );
+    act(() => vi.advanceTimersByTime(1000));
+    expect(result.current).toBe(true);
+    rerender({ delay: 0 });
+    expect(result.current).toBe(true);
+    rerender({ delay: 1000 });
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(999));
+    expect(result.current).toBe(false);
+    act(() => vi.advanceTimersByTime(1));
+    expect(result.current).toBe(true);
+  });
 });

package/src/hooks/__tests__/useInternalStateWithSync.test.tsx

@@ -32,6 +32,26 @@ describe("useInternalStateWithSync", () => {
     expect(result.current[0]).toBe("new value");
   });
 
+  it("preserves function values without calling them and resets when they change", () => {
+    const initial = vi.fn(() => "initial");
+    const draft = vi.fn(() => "draft");
+    const changed = vi.fn(() => "changed");
+    const { result, rerender } = renderHook(
+      ({ value }) => useInternalStateWithSync(value),
+      { initialProps: { value: initial } },
+    );
+
+    expect(result.current[0]).toBe(initial);
+    act(() => result.current[1](() => draft));
+    rerender({ value: initial });
+    expect(result.current[0]).toBe(draft);
+    rerender({ value: changed });
+    expect(result.current[0]).toBe(changed);
+    expect(initial).not.toHaveBeenCalled();
+    expect(draft).not.toHaveBeenCalled();
+    expect(changed).not.toHaveBeenCalled();
+  });
+
   it("should not update internal state if initial value remains the same", () => {
     const { result, rerender } = renderHook(
       ({ value }) => useInternalStateWithSync(value),

package/src/hooks/__tests__/useScript.test.tsx

@@ -0,0 +1,77 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { useScript } from "../useScript";
+
+afterEach(() => {
+  document.querySelectorAll("script").forEach((script) => script.remove());
+});
+
+describe("useScript", () => {
+  it("observes loading and completion of a new script", async () => {
+    const { result } = renderHook(() => useScript("/first.js"));
+    expect(result.current).toBe("loading");
+    await act(async () => {
+      document.querySelector("script")?.dispatchEvent(new Event("load"));
+    });
+    expect(result.current).toBe("ready");
+  });
+
+  it("uses the new source's status when the source changes", async () => {
+    const { result, rerender } = renderHook(({ src }) => useScript(src), {
+      initialProps: { src: "/first.js" },
+    });
+    await act(async () => {
+      document.querySelector("script")?.dispatchEvent(new Event("load"));
+    });
+    expect(result.current).toBe("ready");
+    rerender({ src: "/second.js" });
+    expect(result.current).toBe("loading");
+    await act(async () => {
+      document
+        .querySelector('script[src="/second.js"]')
+        ?.dispatchEvent(new Event("error"));
+    });
+    expect(result.current).toBe("error");
+  });
+
+  it("shares an existing script and only removes scripts it owns", async () => {
+    const owner = renderHook(() =>
+      useScript("/first.js", { removeOnUnmount: true }),
+    );
+    const subscriber = renderHook(() =>
+      useScript("/first.js", { removeOnUnmount: true }),
+    );
+    expect(document.querySelectorAll("script")).toHaveLength(1);
+    await act(async () => {
+      document.querySelector("script")?.dispatchEvent(new Event("load"));
+    });
+    expect(subscriber.result.current).toBe("ready");
+    subscriber.unmount();
+    expect(document.querySelectorAll("script")).toHaveLength(1);
+    owner.unmount();
+    expect(document.querySelectorAll("script")).toHaveLength(0);
+  });
+
+  it("settles for remaining subscribers when the first unmounts mid-load", async () => {
+    const first = renderHook(() => useScript("/shared.js"));
+    const second = renderHook(() => useScript("/shared.js"));
+    first.unmount();
+    expect(second.result.current).toBe("loading");
+    await act(async () => {
+      document.querySelector("script")?.dispatchEvent(new Event("load"));
+    });
+    expect(second.result.current).toBe("ready");
+    // A later subscriber sees the settled status
+    expect(renderHook(() => useScript("/shared.js")).result.current).toBe(
+      "ready",
+    );
+  });
+
+  it("handles sources that are not valid inside a CSS selector", () => {
+    const src = '/odd"name].js';
+    const { result } = renderHook(() => useScript(src));
+    expect(result.current).toBe("loading");
+    expect(document.querySelector("script")?.getAttribute("src")).toBe(src);
+  });
+});

package/src/hooks/__tests__/useStateForKey.test.tsx

@@ -0,0 +1,257 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import {
+  act,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react";
+import {
+  Profiler,
+  startTransition,
+  StrictMode,
+  Suspense,
+  useLayoutEffect,
+  useState,
+} from "react";
+import { describe, expect, it, vi } from "vitest";
+import { Deferred } from "@/utils/Deferred";
+import { useStateForKey } from "../useStateForKey";
+
+describe("useStateForKey", () => {
+  it("preserves edits for the same key and creates fresh state on key changes", () => {
+    const initialize = vi.fn(() => new Set<string>());
+    const { result, rerender } = renderHook(
+      ({ key }) => useStateForKey(key, initialize),
+      { initialProps: { key: "first" } },
+    );
+    const initial = result.current[0];
+    act(() => result.current[1](new Set(["expanded"])));
+    rerender({ key: "first" });
+    expect(result.current[0]).toEqual(new Set(["expanded"]));
+    expect(initialize).toHaveBeenCalledOnce();
+
+    rerender({ key: "second" });
+    expect(result.current[0]).toEqual(new Set());
+    expect(result.current[0]).not.toBe(initial);
+    expect(initialize).toHaveBeenCalledTimes(2);
+
+    rerender({ key: "first" });
+    expect(result.current[0]).toEqual(new Set());
+    expect(initialize).toHaveBeenCalledTimes(3);
+  });
+
+  it("preserves queued functional updates and ignores setters from another key", () => {
+    const { result, rerender } = renderHook(
+      ({ key }) => useStateForKey(key, () => 0),
+      { initialProps: { key: "first" } },
+    );
+    const oldSetter = result.current[1];
+    act(() => {
+      result.current[1]((value) => value + 1);
+      result.current[1]((value) => value + 1);
+    });
+    expect(result.current[0]).toBe(2);
+
+    rerender({ key: "second" });
+    const staleUpdate = vi.fn(() => 99);
+    act(() => oldSetter(staleUpdate));
+    act(() => oldSetter(99));
+    expect(result.current[0]).toBe(0);
+    expect(staleUpdate).not.toHaveBeenCalled();
+  });
+
+  it("uses Object.is for NaN and signed zero keys", () => {
+    const { result, rerender } = renderHook(
+      ({ key }) => useStateForKey(key, () => "initial"),
+      { initialProps: { key: Number.NaN } },
+    );
+    act(() => result.current[1]("draft"));
+    rerender({ key: Number.NaN });
+    expect(result.current[0]).toBe("draft");
+
+    rerender({ key: 0 });
+    expect(result.current[0]).toBe("initial");
+    act(() => result.current[1]("draft"));
+    rerender({ key: -0 });
+    expect(result.current[0]).toBe("initial");
+  });
+
+  it("stores function values without invoking them", () => {
+    const initial = vi.fn();
+    const changed = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ key, value }) => useStateForKey(key, () => value),
+      { initialProps: { key: "first", value: initial } },
+    );
+    expect(result.current[0]).toBe(initial);
+    act(() => result.current[1](() => changed));
+    expect(result.current[0]).toBe(changed);
+    rerender({ key: "second", value: initial });
+    expect(result.current[0]).toBe(initial);
+    expect(initial).not.toHaveBeenCalled();
+    expect(changed).not.toHaveBeenCalled();
+  });
+
+  it("uses a changed initializer only after the key changes", () => {
+    const first = vi.fn(() => "first default");
+    const second = vi.fn(() => "second default");
+    const { result, rerender } = renderHook(
+      ({ key, initialize }) => useStateForKey(key, initialize),
+      { initialProps: { key: "A", initialize: first } },
+    );
+    act(() => result.current[1]("draft"));
+    rerender({ key: "A", initialize: second });
+    expect(result.current[0]).toBe("draft");
+    expect(second).not.toHaveBeenCalled();
+    rerender({ key: "B", initialize: second });
+    expect(result.current[0]).toBe("second default");
+    expect(second).toHaveBeenCalledOnce();
+  });
+
+  it("compares object keys by reference rather than their contents", () => {
+    const key = { id: "A" };
+    const { result, rerender } = renderHook(
+      ({ key }) => useStateForKey(key, () => 0),
+      { initialProps: { key } },
+    );
+    act(() => result.current[1](1));
+    rerender({ key });
+    expect(result.current[0]).toBe(1);
+    rerender({ key: { id: "A" } });
+    expect(result.current[0]).toBe(0);
+  });
+
+  it("keeps setters stable for the same key and accepts old setters when that key returns", () => {
+    const { result, rerender } = renderHook(
+      ({ key }) => useStateForKey(key, () => 0),
+      { initialProps: { key: "A" } },
+    );
+    const setA = result.current[1];
+    act(() => setA(1));
+    rerender({ key: "A" });
+    expect(result.current[1]).toBe(setA);
+    rerender({ key: "B" });
+    expect(result.current[1]).not.toBe(setA);
+    act(() => setA(2));
+    expect(result.current[0]).toBe(0);
+    rerender({ key: "A" });
+    act(() => setA(3));
+    expect(result.current[0]).toBe(3);
+  });
+
+  it("retries the owner without rendering or committing stale state to children", () => {
+    const onOwnerRender = vi.fn();
+    const onChildRender = vi.fn();
+    const onCommit = vi.fn();
+    const onLayout = vi.fn();
+    function Child({ owner, value }: { owner: string; value: string }) {
+      onChildRender(owner, value);
+      useLayoutEffect(() => onLayout(owner, value), [owner, value]);
+      return <span>{value}</span>;
+    }
+    function Owner({ owner }: { owner: string }) {
+      onOwnerRender();
+      const [value, setValue] = useStateForKey(owner, () => `${owner} default`);
+      return (
+        <>
+          <button onClick={() => setValue("draft")}>Edit</button>
+          <Child owner={owner} value={value} />
+        </>
+      );
+    }
+    const content = (owner: string) => (
+      <Profiler id="owner" onRender={onCommit}>
+        <Owner owner={owner} />
+      </Profiler>
+    );
+    const { rerender } = render(content("A"));
+    const button = screen.getByRole("button", { name: "Edit" });
+    fireEvent.click(button);
+    expect(screen.getByText("draft")).toBeInTheDocument();
+    onOwnerRender.mockClear();
+    onChildRender.mockClear();
+    onCommit.mockClear();
+    onLayout.mockClear();
+
+    rerender(content("B"));
+    expect(onOwnerRender.mock.calls.length).toBeGreaterThan(1);
+    expect(onChildRender.mock.calls).toEqual([["B", "B default"]]);
+    expect(onLayout.mock.calls).toEqual([["B", "B default"]]);
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(screen.getByRole("button", { name: "Edit" })).toBe(button);
+  });
+
+  it("keeps state correct when Strict Mode repeats initialization and updates", () => {
+    const initialize = vi.fn(() => new Set<string>());
+    const { result, rerender } = renderHook(
+      ({ key }) => useStateForKey(key, initialize),
+      { initialProps: { key: "A" }, wrapper: StrictMode },
+    );
+    expect(initialize.mock.calls.length).toBeGreaterThan(1);
+    act(() => result.current[1]((previous) => new Set([...previous, "draft"])));
+    expect(result.current[0]).toEqual(new Set(["draft"]));
+    rerender({ key: "B" });
+    expect(result.current[0]).toEqual(new Set());
+  });
+
+  it.each(["completes", "is canceled"])(
+    "preserves visible edits when a suspended transition %s",
+    async (outcome) => {
+      const pending = new Deferred<void>();
+      let blocked = true;
+      const suspended = vi.fn();
+      function Pending({ owner }: { owner: string }) {
+        if (owner === "B" && blocked) {
+          suspended();
+          throw pending.promise;
+        }
+        return null;
+      }
+      function Owner({ owner }: { owner: string }) {
+        const [value, setValue] = useStateForKey(owner, () => 0);
+        return (
+          <>
+            <button onClick={() => setValue((previous) => previous + 1)}>
+              {owner}:{value}
+            </button>
+            <Pending owner={owner} />
+          </>
+        );
+      }
+      function Harness() {
+        const [owner, setOwner] = useState("A");
+        return (
+          <>
+            <button onClick={() => startTransition(() => setOwner("B"))}>
+              Switch owner
+            </button>
+            <button onClick={() => setOwner("A")}>Keep owner</button>
+            <Suspense fallback="Loading">
+              <Owner owner={owner} />
+            </Suspense>
+          </>
+        );
+      }
+      render(<Harness />);
+      fireEvent.click(screen.getByRole("button", { name: "A:0" }));
+      fireEvent.click(screen.getByRole("button", { name: "Switch owner" }));
+      expect(suspended).toHaveBeenCalled();
+      fireEvent.click(screen.getByRole("button", { name: "A:1" }));
+      expect(screen.getByRole("button", { name: "A:2" })).toBeInTheDocument();
+      if (outcome === "is canceled") {
+        fireEvent.click(screen.getByRole("button", { name: "Keep owner" }));
+      }
+      await act(async () => {
+        blocked = false;
+        pending.resolve();
+        await pending.promise;
+      });
+      expect(
+        screen.getByRole("button", {
+          name: outcome === "completes" ? "B:0" : "A:2",
+        }),
+      ).toBeInTheDocument();
+    },
+  );
+});

package/src/hooks/useAsyncData.ts

@@ -322,7 +322,7 @@ export function useAsyncData<T>(
   const [nonce, setNonce] = useState(0);
   const [result, setResult] = useState<
     PendingResult<T> | LoadingResult<T> | ErrorResult<T> | SuccessResult<T>
-  >(Result.pending());
+  >(() => Result.pending());
 
   const asProps =
     typeof loaderOrProps === "function"
@@ -339,12 +339,12 @@ export function useAsyncData<T>(
         keepPrevious = true;
       },
     };
+    // Activity can restart this effect without changing dependencies, so
+    // loading state must follow the request lifecycle.
     setResult((prevResult) => {
-      // If we have previous data, show reloading state
       if (prevResult.status === "success" || prevResult.status === "loading") {
         return Result.loading(prevResult.data);
       }
-      // Otherwise, show initial loading state
       return Result.pending();
     });
     fetchStable(context)

package/src/hooks/useDataSourceDiscovery.ts

@@ -42,11 +42,13 @@ export function useDetectedDataSources(
       dialects: [...connections.values()].map((connection) =>
         connection.dialect.toLowerCase(),
       ),
-      storageProtocols: storageNamespaces.map((namespace) =>
-        namespace.protocol.toLowerCase(),
+      storageProtocols: new Set(
+        storageNamespaces.map((namespace) => namespace.protocol.toLowerCase()),
       ),
-      storageBackendTypes: storageNamespaces.map((namespace) =>
-        namespace.backendType.toLowerCase(),
+      storageBackendTypes: new Set(
+        storageNamespaces.map((namespace) =>
+          namespace.backendType.toLowerCase(),
+        ),
       ),
     };