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

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

package/src/hooks/useElapsedTime.ts

@@ -1,13 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { type Milliseconds, Time } from "@/utils/time";
 
 /**
  * Returns the elapsed time since mount, in milliseconds.
  */
 export function useElapsedTime(initialStartTimeMs: Milliseconds) {
-  const startTime = useRef(initialStartTimeMs);
+  const [startTime] = useState(initialStartTimeMs);
   const [endTime, setEndTime] = useState(initialStartTimeMs);
 
   useEffect(() => {
@@ -21,5 +21,5 @@ export function useElapsedTime(initialStartTimeMs: Milliseconds) {
     return () => clearInterval(interval);
   }, []);
 
-  return endTime - startTime.current;
+  return endTime - startTime;
 }

package/src/hooks/useInputHistory.ts

@@ -37,12 +37,9 @@ export function useInputHistory({
   const historyIndexRef = React.useRef<number>(-1);
   // Store the current input when navigating history
   const pendingInputRef = React.useRef<string>("");
-  // Keep a ref to history for use in callbacks without causing re-renders
-  const historyRef = React.useRef(history);
-  historyRef.current = history;
 
   const navigateUp = React.useCallback(() => {
-    const currentHistory = historyRef.current;
+    const currentHistory = history;
     if (currentHistory.length === 0) {
       return;
     }
@@ -59,10 +56,10 @@ export function useInputHistory({
       historyIndexRef.current = newIndex;
       setValue(currentHistory[currentHistory.length - 1 - newIndex]);
     }
-  }, [value, setValue]);
+  }, [history, value, setValue]);
 
   const navigateDown = React.useCallback(() => {
-    const currentHistory = historyRef.current;
+    const currentHistory = history;
     if (currentHistory.length === 0) {
       return;
     }
@@ -79,7 +76,7 @@ export function useInputHistory({
       historyIndexRef.current = -1;
       setValue(pendingInputRef.current);
     }
-  }, [setValue]);
+  }, [history, setValue]);
 
   const addToHistory = React.useCallback((command: string) => {
     setHistory((prev) => {

package/src/hooks/useResizeObserver.ts

@@ -6,6 +6,7 @@
 
 import type { RefObject } from "react";
 import { useEffect, useRef } from "react";
+import useEvent from "react-use-event-hook";
 
 interface Size {
   width: number | undefined;
@@ -30,9 +31,7 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
   const { ref, box = "content-box", skip } = options;
   // oxlint-disable-next-line react/hook-use-state
   const previousSize = useRef<Size>({ ...initialSize });
-  const onResize = useRef<((size: Size) => void) | undefined>(undefined);
-  // oxlint-disable-next-line react-hooks/react-compiler
-  onResize.current = options.onResize;
+  const onResize = useEvent((size: Size) => options.onResize?.(size));
 
   useEffect(() => {
     if (!ref.current || skip) {
@@ -63,9 +62,7 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
         previousSize.current.width = newWidth;
         previousSize.current.height = newHeight;
 
-        if (onResize.current) {
-          onResize.current(newSize);
-        }
+        onResize(newSize);
       }
     });
 
@@ -74,7 +71,7 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
     return () => {
       observer.disconnect();
     };
-  }, [box, ref, skip]);
+  }, [box, ref, skip, onResize]);
 }
 
 type BoxSizesKey = keyof Pick<

package/src/mount.tsx

@@ -10,7 +10,7 @@ import {
   userConfigAtom,
 } from "@/core/config/config";
 import { KnownQueryParams } from "@/core/constants";
-import { pairPreviewAtom, pairPreviewSchema } from "@/core/config/pair";
+import { pairConfigAtom, pairConfigSchema } from "@/core/config/pair";
 import { getFilenameFromDOM } from "@/core/dom/htmlUtils";
 import { getMarimoCode } from "@/core/meta/globals";
 import {
@@ -209,7 +209,7 @@ const mountOptionsSchema = z.object({
    * marimo config overrides
    */
   configOverrides: passthroughObject,
-  pairPreview: pairPreviewSchema.optional(),
+  pairConfig: pairConfigSchema.optional(),
   /**
    * marimo app config
    */
@@ -347,7 +347,7 @@ function initStore(options: unknown) {
   );
   store.set(userConfigAtom, parseUserConfig(parsedOptions.data.config));
   store.set(appConfigAtom, parseAppConfig(parsedOptions.data.appConfig));
-  store.set(pairPreviewAtom, parsedOptions.data.pairPreview);
+  store.set(pairConfigAtom, parsedOptions.data.pairConfig);
 
   // Runtime config
   if (parsedOptions.data.runtimeConfig.length > 0) {

package/src/plugins/core/registerReactComponent.tsx

@@ -104,7 +104,7 @@ function PluginSlotInternal<T>(
   ref: React.Ref<PluginSlotHandle>,
 ): JSX.Element {
   const [childNodes, setChildNodes] = useState<ReactNode>(children);
-  const [value, setValue] = useState<T>(getInitialValue());
+  const [value, setValue] = useState<T>(getInitialValue);
   const { theme } = useTheme();
 
   const [parsedResult, setParsedResult] = useState(() => {

package/src/plugins/impl/DropdownPlugin.tsx

@@ -97,13 +97,9 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
         id={id}
         disabled={disabled}
       >
-        {allowSelectNone ? (
-          <option value={EMPTY_VALUE} selected={value.length === 0}>
-            --
-          </option>
-        ) : null}
+        {allowSelectNone ? <option value={EMPTY_VALUE}>--</option> : null}
         {options.map((option) => (
-          <option value={option} selected={value.includes(option)} key={option}>
+          <option value={option} key={option}>
             {option}
           </option>
         ))}

package/src/plugins/impl/FormPlugin.tsx

@@ -212,7 +212,7 @@ const Form = ({
   // wrapped plugin; this buffered value is in contrast to the actual
   // value of the plugin, which is the value of the wrapped plugin when
   // the submit button was last clicked/activated.
-  const [internalValue, setInternalValue] = useState<T>(
+  const [internalValue, setInternalValue] = useState<T>(() =>
     UI_ELEMENT_REGISTRY.lookupValue(elementId),
   );
 

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -136,6 +136,90 @@ describe("LoadingDataTableComponent", () => {
     expect(downloadGeoJSON).toHaveBeenCalledTimes(1);
   });
 
+  it("refreshes export metadata when a dataframe transform changes the data", async () => {
+    const host = document.createElement("div");
+    const metadataFor = (name: string) => ({
+      geometry_columns: [{ name, encoding: "objects", crs: "EPSG:4326" }],
+      primary_geometry_column: name,
+      default_geometry_column: name,
+      formats: {
+        parquet: { available: true, reason: null, missing_packages: [] },
+      },
+    });
+    const getExportMetadata = vi
+      .fn()
+      .mockResolvedValueOnce(metadataFor("before"))
+      .mockResolvedValueOnce(metadataFor("after"));
+    const view = (data: string) => (
+      <Provider store={store}>
+        <TooltipProvider>
+          <LoadingDataTableComponent
+            label={null}
+            totalRows={1}
+            pagination={false}
+            pageSize={10}
+            selection={null}
+            showDownload={true}
+            showFilters={false}
+            showColumnSummaries={false}
+            showDataTypes={false}
+            showPageSizeSelector={false}
+            showColumnExplorer={false}
+            showRowExplorer={false}
+            showChartBuilder={false}
+            rowHeaders={[]}
+            fieldTypes={undefined}
+            totalColumns={1}
+            maxColumns="all"
+            hasStableRowId={false}
+            lazy={false}
+            host={host}
+            showSearch={false}
+            value={[]}
+            setValue={vi.fn()}
+            data={data}
+            search={vi.fn().mockResolvedValue({
+              data,
+              total_rows: 1,
+              cell_styles: null,
+              cell_hover_texts: null,
+            })}
+            download_as={vi.fn()}
+            download_geojson={vi.fn()}
+            get_export_metadata={getExportMetadata}
+            get_column_summaries={vi.fn()}
+            get_data_url={vi.fn() as GetDataUrl}
+            get_row_ids={vi.fn() as GetRowIds}
+            get_size_bytes={vi.fn().mockResolvedValue({ size_bytes: null })}
+          />
+        </TooltipProvider>
+      </Provider>
+    );
+    const { rerender } = render(
+      view(JSON.stringify([{ before: "POINT (1 2)" }])),
+    );
+    await waitFor(() =>
+      expect(
+        screen.getByRole("columnheader", { name: "before" }),
+      ).toBeInTheDocument(),
+    );
+    fireEvent.click(screen.getByTestId("export-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("export-summary-parquet")).toHaveTextContent(
+        "before",
+      ),
+    );
+
+    rerender(view(JSON.stringify([{ after: "POINT (3 4)" }])));
+
+    await waitFor(() =>
+      expect(screen.getByTestId("export-summary-parquet")).toHaveTextContent(
+        "after",
+      ),
+    );
+    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+  });
+
   it("does not log duplicate keys when a pivot becomes empty", async () => {
     const host = document.createElement("div");
     const consoleError = vi

package/src/plugins/impl/anywidget/__tests__/registry.test.ts

@@ -238,6 +238,7 @@ describe("WidgetRegistry.getWidget", () => {
       jsUrl: SPEC.url,
       jsHash: SPEC.hash,
       kernelAuthored: true,
+      lifetime: expect.any(AbortSignal),
     });
     expect(widgetDef.initialize).toHaveBeenCalledTimes(1);
     expect(widget.exports).toBe(exports);
@@ -263,6 +264,7 @@ describe("WidgetRegistry.getWidget", () => {
       jsUrl: SPEC.url,
       jsHash: SPEC.hash,
       kernelAuthored: true,
+      lifetime: expect.any(AbortSignal),
     });
   });