@marimo-team/islands 0.25.3-dev51 → 0.25.3-dev55

package/src/components/editor/file-tree/use-file-search.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRequestClient } from "@/core/network/requests";
 import { useDebounce } from "@/hooks/useDebounce";
 import {
@@ -34,20 +34,29 @@ export function useFileSearch({
 }): { state: FileSearchState; refetch: () => void } {
   const { sendSearchFiles } = useRequestClient();
   const debouncedQuery = useDebounce(query, 300);
-  const pending = useRef<Promise<void>>(Promise.resolve());
+  // Nullable so the ref is not built on every render
+  const pending = useRef<Promise<void> | null>(null);
   const [revision, setRevision] = useState(0);
   const refetch = useCallback(() => setRevision((value) => value + 1), []);
-  const [result, setResult] = useState<FileSearchState>({ status: "idle" });
+  const requestIdentity = useMemo(
+    () => ({ query, tree, showHiddenFiles, revision, sendSearchFiles }),
+    [query, tree, showHiddenFiles, revision, sendSearchFiles],
+  );
+  const [result, setResult] = useState<{
+    requestIdentity: typeof requestIdentity;
+    state: FileSearchState;
+  }>();
 
   useEffect(() => {
+    // Read inputs through requestIdentity so it alone drives new requests
+    const { query, tree, showHiddenFiles, sendSearchFiles } = requestIdentity;
     let cancelled = false;
     if (!query || query !== debouncedQuery) {
       return;
     }
-    setResult({ status: "loading", query });
     // Let the in-flight server scan finish before starting another. Superseded
     // queued queries and remaining roots are skipped, keeping scan work bounded.
-    const request = pending.current.then(async () => {
+    const request = (pending.current ?? Promise.resolve()).then(async () => {
       const filesByPath = new Map<string, FileTreeNode>();
       let rootLimitReached = false;
       let failedRootCount = 0;
@@ -88,9 +97,12 @@ export function useFileSearch({
       if (!cancelled) {
         if (roots.length > 0 && failedRootCount === roots.length) {
           setResult({
-            status: "error",
-            query,
-            error: new Error("Could not search any root"),
+            requestIdentity,
+            state: {
+              status: "error",
+              query,
+              error: new Error("Could not search any root"),
+            },
           });
           return;
         }
@@ -110,33 +122,35 @@ export function useFileSearch({
             rank(left) - rank(right) || left.name.localeCompare(right.name),
         );
         setResult({
-          status: "success",
-          isPartial: failedRootCount > 0,
-          query,
-          files: sortedFiles.slice(0, RESULT_LIMIT),
-          hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          requestIdentity,
+          state: {
+            status: "success",
+            isPartial: failedRootCount > 0,
+            query,
+            files: sortedFiles.slice(0, RESULT_LIMIT),
+            hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          },
         });
       }
     });
     pending.current = request.catch((error: unknown) => {
       if (!cancelled) {
-        setResult({ status: "error", query, error });
+        setResult({
+          requestIdentity,
+          state: { status: "error", query, error },
+        });
       }
     });
     return () => {
       cancelled = true;
     };
-  }, [query, debouncedQuery, tree, showHiddenFiles, revision, sendSearchFiles]);
+  }, [debouncedQuery, requestIdentity]);
 
   if (!query) {
     return { state: { status: "idle" }, refetch };
   }
-  if (
-    query !== debouncedQuery ||
-    result.status === "idle" ||
-    result.query !== query
-  ) {
+  if (query !== debouncedQuery || result?.requestIdentity !== requestIdentity) {
     return { state: { status: "loading", query }, refetch };
   }
-  return { state: result, refetch };
+  return { state: result.state, refetch };
 }

package/src/components/icons/__tests__/large-spinner.test.tsx

@@ -0,0 +1,39 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, render, screen } from "@testing-library/react";
+import { Profiler } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { LargeSpinner } from "../large-spinner";
+
+describe("LargeSpinner", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("fades the old title without a second commit before the timer fires", () => {
+    const onRender = vi.fn();
+    const spinner = (title: string) => (
+      <Profiler id="spinner" onRender={onRender}>
+        <LargeSpinner title={title} />
+      </Profiler>
+    );
+    const { rerender } = render(spinner("Starting"));
+    onRender.mockClear();
+
+    rerender(spinner("Loading"));
+    expect(onRender).toHaveBeenCalledOnce();
+    expect(screen.getByText("Starting")).toHaveClass("opacity-0");
+
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.getByText("Loading")).toHaveClass("opacity-100");
+  });
+
+  it("restores visibility if the title changes back during the fade", () => {
+    const { rerender } = render(<LargeSpinner title="Starting" />);
+    rerender(<LargeSpinner title="Loading" />);
+    rerender(<LargeSpinner title="Starting" />);
+
+    expect(screen.getByText("Starting")).toHaveClass("opacity-100");
+    act(() => vi.advanceTimersByTime(300));
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+  });
+});

package/src/components/icons/large-spinner.tsx

@@ -1,23 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Loader2Icon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useDebounce } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
 
 export const LargeSpinner = ({ title }: { title?: string }) => {
-  const [currentTitle, setCurrentTitle] = useState(title);
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    if (title !== currentTitle) {
-      setIsVisible(false);
-      const timer = setTimeout(() => {
-        setCurrentTitle(title);
-        setIsVisible(true);
-      }, 300); // Wait for fade out animation to complete
-      return () => clearTimeout(timer);
-    }
-  }, [title, currentTitle]);
+  const currentTitle = useDebounce(title, 300);
+  const isVisible = title === currentTitle;
 
   return (
     <div className="flex flex-col h-full flex-1 items-center justify-center p-4">

package/src/core/network/useConnectionNotice.ts

@@ -17,11 +17,17 @@ export function useConnectionNotice(
   const notice = useAtomValue(connectionNoticeAtom);
   const connected = useAtomValue(isConnectedAtom);
   const elapsed = useDelayElapsed(notice?.pending ? delayMs : 0);
-  const [previous, setPrevious] = useState<ConnectionNotice | null>(null);
+  const [previous, setPrevious] = useState<ConnectionNotice | null>(
+    elapsed ? notice : null,
+  );
+
+  const visibleNotice = elapsed ? notice : null;
+  if ((notice || !connected) && previous !== visibleNotice) {
+    setPrevious(visibleNotice);
+  }
 
   useEffect(() => {
     if (notice || !connected) {
-      setPrevious(elapsed ? notice : null);
       return;
     }
     const timeout = setTimeout(() => setPrevious(null), 1500);

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);
+  });
+});