@marimo-team/islands 0.19.8-dev4 → 0.19.8-dev40

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

@@ -0,0 +1,164 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { store } from "@/core/state/jotai";
+import {
+  type GetDataUrl,
+  type GetRowIds,
+  LoadingDataTableComponent,
+} from "../DataTablePlugin";
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+describe("LoadingDataTableComponent", () => {
+  /**
+   * Regression test for https://github.com/marimo-team/marimo/issues/8023
+   *
+   * When a table is replaced via mo.output.replace() with updated data,
+   * but the initial page data (unsorted first page) hasn't changed,
+   * the useAsyncData hook's deps may all remain the same.
+   * Previously, the `search` function reference was memoized on
+   * [plugin.functions, hostElement] and wouldn't change on reset(),
+   * so the useAsyncData effect wouldn't re-fire.
+   *
+   * The fix adds a resetNonce to the functionMethods memo deps,
+   * so when the plugin is reset (table instance changes), the search
+   * function reference changes, triggering useAsyncData to re-fetch.
+   *
+   * This test verifies that when the search function reference changes
+   * (simulating reset()), the component re-fetches data even if
+   * props.data hasn't changed.
+   */
+  it("should refetch data when search function reference changes", async () => {
+    const host = document.createElement("div");
+    const setValue = vi.fn();
+
+    // The initial page data string - identical for both renders.
+    // This simulates the case where only a row on page 2 changed,
+    // so the first page data is the same.
+    const initialPageData = JSON.stringify([
+      { id: 1, status: "pending", value: 10 },
+      { id: 2, status: "pending", value: 20 },
+      { id: 3, status: "pending", value: 30 },
+    ]);
+
+    const searchResult = {
+      data: [
+        { id: 1, status: "pending", value: 10 },
+        { id: 2, status: "pending", value: 20 },
+        { id: 3, status: "pending", value: 30 },
+      ],
+      total_rows: 4,
+      cell_styles: null,
+      cell_hover_texts: null,
+    };
+
+    const searchFn1 = vi.fn().mockResolvedValue(searchResult);
+    const searchFn2 = vi.fn().mockResolvedValue(searchResult);
+
+    const fieldTypes: FieldTypesWithExternalType = [
+      ["id", ["integer", "integer"]],
+      ["status", ["string", "string"]],
+      ["value", ["integer", "integer"]],
+    ];
+
+    const commonProps = {
+      label: null,
+      totalRows: 4,
+      pagination: true,
+      pageSize: 3,
+      selection: "single" as const,
+      showDownload: false,
+      showFilters: false,
+      showColumnSummaries: false as const,
+      showDataTypes: false,
+      showPageSizeSelector: false,
+      showColumnExplorer: false,
+      showRowExplorer: false,
+      showChartBuilder: false,
+      rowHeaders: [] as FieldTypesWithExternalType,
+      fieldTypes,
+      totalColumns: 3,
+      maxColumns: "all" as const,
+      hasStableRowId: false,
+      lazy: false,
+      host,
+      enableSearch: true,
+      value: [] as (number | string | { rowId: string; columnName?: string })[],
+      setValue,
+      download_as: vi.fn() as DownloadAsArgs,
+      get_column_summaries: vi.fn().mockResolvedValue({
+        data: null,
+        stats: {},
+        bin_values: {},
+        value_counts: {},
+        show_charts: false,
+      }),
+      get_data_url: vi.fn() as GetDataUrl,
+      get_row_ids: vi.fn() as GetRowIds,
+    };
+
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>
+        <TooltipProvider>{children}</TooltipProvider>
+      </Provider>
+    );
+
+    // Render with first search function
+    const { rerender } = render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...commonProps}
+          data={initialPageData}
+          search={searchFn1}
+        />
+      </Wrapper>,
+    );
+
+    // Wait for the table to render with data
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    // Search was called on initial load (fire-and-forget for canShowInitialPage)
+    expect(searchFn1).toHaveBeenCalled();
+
+    // Now rerender with the same data but a NEW search function reference.
+    // This simulates what happens after reset() when resetNonce increments
+    // and functionMethods is recreated.
+    await act(async () => {
+      rerender(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...commonProps}
+            data={initialPageData}
+            search={searchFn2}
+          />
+        </Wrapper>,
+      );
+    });
+
+    // The new search function should be called because the search
+    // dependency changed in useAsyncData.
+    await waitFor(() => {
+      expect(searchFn2).toHaveBeenCalled();
+    });
+  });
+});

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -8,6 +8,8 @@ import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { asRemoteURL } from "@/core/runtime/config";
+import { resolveVirtualFileURL } from "@/core/static/files";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import {
@@ -93,7 +95,11 @@ const AnyWidgetSlot = (
     error,
     refetch,
   } = useAsyncData(async () => {
-    const url = asRemoteURL(jsUrl).toString();
+    let url = asRemoteURL(jsUrl).toString();
+    // In static notebooks, resolve virtual files to blob URLs for import()
+    if (isStaticNotebook()) {
+      url = resolveVirtualFileURL(url);
+    }
     return await import(/* @vite-ignore */ url);
     // Re-render on jsHash change (which is a hash of the contents of the file)
     // instead of a jsUrl change because URLs may change without the contents

package/src/utils/__tests__/blob.test.ts

@@ -20,7 +20,7 @@ describe("Blob serialization and deserialization", () => {
 
   test("deserializeBlob should deserialize a base64 string to a Blob", async () => {
     const serialized = await serializeBlob(testBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     expect(deserialized).toBeDefined();
     expect(deserialized.size).toBe(testBlob.size);
     expect(deserialized.type).toBe(testBlob.type);
@@ -28,7 +28,7 @@ describe("Blob serialization and deserialization", () => {
 
   test("deserialized Blob should contain the original content", async () => {
     const serialized = await serializeBlob(testBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     const reader = new FileReader();
     // eslint-disable-next-line unicorn/prefer-blob-reading-methods
     reader.readAsText(deserialized);
@@ -45,7 +45,7 @@ describe("Blob serialization and deserialization", () => {
       type: "image/png",
     });
     const serialized = await serializeBlob(imageBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     expect(deserialized).toBeDefined();
     expect(deserialized.size).toBe(imageBlob.size);
     expect(deserialized.type).toBe(imageBlob.type);

package/src/utils/__tests__/id-tree.test.ts

@@ -214,16 +214,19 @@ describe("CollapsibleTree", () => {
     `);
   });
 
-  it("fails to expand", () => {
+  it("fails to expand when node not found", () => {
     expect(() => tree.expand("five")).toThrowErrorMatchingInlineSnapshot(
       "[Error: Node five not found in tree. Valid ids: one,two,three,four]",
     );
-    expect(() => {
-      tree.expand("one");
-      tree.expand("one");
-    }).toThrowErrorMatchingInlineSnapshot(
-      "[Error: Node one is already expanded]",
-    );
+  });
+
+  it("expand on already expanded node is a no-op", () => {
+    // Expanding an already expanded node should return the same tree (no-op)
+    const result = tree.expand("one");
+    expect(result).toBe(tree);
+    // Can call multiple times without error
+    const result2 = tree.expand("one");
+    expect(result2).toBe(tree);
   });
 
   it("moves nodes correctly", () => {
@@ -378,6 +381,18 @@ describe("CollapsibleTree", () => {
     `);
   });
 
+  it("can delete non-collapsed nodes without throwing", () => {
+    // Deleting a non-collapsed node should not throw
+    // (previously this would throw "Node is already expanded" internally)
+    const result = tree.deleteAtIndex(1);
+    expect(result.toString()).toMatchInlineSnapshot(`
+      "one
+      three
+      four
+      "
+    `);
+  });
+
   it("fails to delete nodes", () => {
     expect(() => tree.deleteAtIndex(5)).toThrowErrorMatchingInlineSnapshot(
       "[Error: Node at index 5 not found in tree]",

package/src/utils/__tests__/mime-types.test.ts

@@ -132,7 +132,7 @@ describe("mime-types", () => {
 
   describe("sortByPrecedence", () => {
     it("should sort entries by precedence order", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["image/png", "png"],
@@ -151,7 +151,7 @@ describe("mime-types", () => {
     });
 
     it("should place unknown mime types at the end", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["application/json", "json"],
@@ -173,7 +173,7 @@ describe("mime-types", () => {
     });
 
     it("should handle empty precedence", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
       ];
@@ -184,7 +184,7 @@ describe("mime-types", () => {
     });
 
     it("should not mutate original array", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
       ];
@@ -198,7 +198,7 @@ describe("mime-types", () => {
 
   describe("processMimeBundle", () => {
     it("should filter and sort mime entries", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/html", "html"],
         ["image/png", "png"],
@@ -226,7 +226,7 @@ describe("mime-types", () => {
     });
 
     it("should use default config when not provided", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/html", "html"],
         ["image/png", "png"],
         ["text/markdown", "md"],
@@ -240,9 +240,7 @@ describe("mime-types", () => {
 
     it("should preserve data associated with mime types", () => {
       const htmlData = { content: "<h1>Hello</h1>" };
-      const entries: Array<[MimeType, typeof htmlData]> = [
-        ["text/html", htmlData],
-      ];
+      const entries: [MimeType, typeof htmlData][] = [["text/html", htmlData]];
 
       const result = processMimeBundle(entries);
 
@@ -250,7 +248,7 @@ describe("mime-types", () => {
     });
 
     it("should sort by precedence after filtering", () => {
-      const entries: Array<[MimeType, string]> = [
+      const entries: [MimeType, string][] = [
         ["text/plain", "plain"],
         ["text/markdown", "md"],
         ["text/html", "html"],

package/src/utils/__tests__/url-parser.test.ts

@@ -76,4 +76,26 @@ describe("parseContent", () => {
       url: "https://avatars.githubusercontent.com/u/123",
     });
   });
+
+  it("preserves newlines between URLs", () => {
+    const parts = parseContent("https://marimo.io\nhttps://github.com\n");
+    expect(parts).toEqual([
+      { type: "url", url: "https://marimo.io" },
+      { type: "text", value: "\n" },
+      { type: "url", url: "https://github.com" },
+      { type: "text", value: "\n" },
+    ]);
+  });
+
+  it("preserves whitespace in mixed content", () => {
+    const parts = parseContent(
+      "Line 1: https://marimo.io\nLine 2: https://github.com",
+    );
+    expect(parts).toEqual([
+      { type: "text", value: "Line 1: " },
+      { type: "url", url: "https://marimo.io" },
+      { type: "text", value: "\nLine 2: " },
+      { type: "url", url: "https://github.com" },
+    ]);
+  });
 });

package/src/utils/blob.ts

@@ -14,32 +14,19 @@ export function serializeBlob<T>(blob: Blob): Promise<DataURLString> {
   });
 }
 
-export function deserializeBlob(serializedBlob: DataURLString): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    try {
-      // Extract the base64 data from the data URL
-      const [prefix, base64Data] = serializedBlob.split(",", 2);
-      const mimeType = /^data:(.+);base64$/.exec(prefix)?.[1];
-      // Decode the base64 string
-      const binaryString = atob(base64Data);
-      // Convert the binary string to an array buffer
-      const len = binaryString.length;
-      const bytes = new Uint8Array(len);
-      for (let i = 0; i < len; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-      }
-      // Create a new Blob from the array buffer
-      const blob = new Blob([bytes], { type: mimeType });
-      resolve(blob);
-    } catch (error) {
-      reject(ensureError(error));
-    }
-  });
-}
-
-function ensureError(error: unknown): Error {
-  if (error instanceof Error) {
-    return error;
+export function deserializeBlob(serializedBlob: DataURLString): Blob {
+  // Extract the base64 data from the data URL
+  const [prefix, base64Data] = serializedBlob.split(",", 2);
+  const mimeType = /^data:(.+);base64$/.exec(prefix)?.[1];
+  // Decode the base64 string
+  const binaryString = atob(base64Data);
+  // Convert the binary string to an array buffer
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
   }
-  return new Error(`${error}`);
+  // Create a new Blob from the array buffer
+  const blob = new Blob([bytes], { type: mimeType });
+  return blob;
 }

package/src/utils/id-tree.tsx

@@ -360,7 +360,8 @@ export class CollapsibleTree<T> {
   }
 
   /**
-   * Expand a node and all of its children
+   * Expand a node and all of its children.
+   * If the node is already expanded, returns the same tree (no-op).
    */
   expand(id: T): CollapsibleTree<T> {
     const nodeIndex = this.nodes.findIndex((n) => n.value === id);
@@ -373,7 +374,8 @@ export class CollapsibleTree<T> {
     let nodes = [...this.nodes];
     const node = nodes[nodeIndex];
     if (!node.isCollapsed) {
-      throw new Error(`Node ${id} is already expanded`);
+      // Already expanded, no-op
+      return this;
     }
 
     nodes[nodeIndex] = new TreeNode(node.value, false, []);
@@ -495,13 +497,9 @@ export class CollapsibleTree<T> {
    */
   deleteAtIndex(idx: number): CollapsibleTree<T> {
     const id = this.atOrThrow(idx);
-    let tree = this.withNodes(this.nodes);
-    try {
-      tree = tree.expand(id);
-    } catch {
-      // Don't care if its not expanded
-    }
-    return this.withNodes(arrayDelete(tree.nodes, idx));
+    // Expand the node first (if collapsed) to bring children back to top level
+    const tree = this.expand(id);
+    return tree.withNodes(arrayDelete(tree.nodes, idx));
   }
 
   delete(id: T): CollapsibleTree<T> {
@@ -524,16 +522,10 @@ export class CollapsibleTree<T> {
     if (found.length === 0) {
       return this;
     }
-    let result = this.withNodes(this.nodes);
-    for (const node of found) {
-      try {
-        result = result.expand(node);
-      } catch {
-        // Don't care if its the last node and its not expanded
-      }
-    }
-
-    return result;
+    return found.reduce<CollapsibleTree<T>>(
+      (acc, node) => acc.expand(node),
+      this,
+    );
   }
 
   /**

package/src/utils/mime-types.ts

@@ -26,7 +26,7 @@ export interface MimeTypeConfig {
  */
 export interface ProcessedMimeTypes<T> {
   /** The filtered and sorted mime entries */
-  entries: Array<[MimeType, T]>;
+  entries: [MimeType, T][];
   /** Mime types that were hidden by rules */
   hidden: MimeType[];
 }
@@ -146,9 +146,9 @@ export function applyHidingRules(
  * Mime types not in the map are placed at the end, preserving their original order.
  */
 export function sortByPrecedence<T>(
-  entries: Array<[MimeType, T]>,
+  entries: [MimeType, T][],
   precedence: ReadonlyMap<MimeType, number>,
-): Array<[MimeType, T]> {
+): [MimeType, T][] {
   const unknownPrecedence = precedence.size;
 
   return [...entries].sort((a, b) => {
@@ -162,7 +162,7 @@ export function sortByPrecedence<T>(
  * Main entry point: processes mime entries by applying hiding rules and sorting.
  */
 export function processMimeBundle<T>(
-  entries: Array<[MimeType, T]>,
+  entries: [MimeType, T][],
   config: MimeTypeConfig = getDefaultMimeConfig(),
 ): ProcessedMimeTypes<T> {
   if (entries.length === 0) {
@@ -176,6 +176,6 @@ export function processMimeBundle<T>(
 
   return {
     entries: sortedEntries,
-    hidden: Array.from(hidden),
+    hidden: [...hidden],
   };
 }

package/src/utils/url-parser.ts

@@ -19,7 +19,7 @@ export function parseContent(text: string): ContentPart[] {
     return [{ type: "image", url: text }];
   }
 
-  const parts = text.split(urlRegex).filter((part) => part.trim() !== "");
+  const parts = text.split(urlRegex).filter((part) => part !== "");
   return parts.map((part) => {
     const isUrl = urlRegex.test(part);
     if (isUrl) {

package/dist/assets/__vite-browser-external-DRa9CT_O.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-SqntmiwV.js";var t=e(((e,t)=>{t.exports={}}));export default t();

package/dist/mermaid-4DMBBIKO-o3xNphpD.js

@@ -1,6 +0,0 @@
-import "./react-DdA8EBol.js";
-import { a as tt } from "./chunk-5FQGJX7Z-D5VFKHmt.js";
-import "./jsx-runtime-CTBg5pdT.js";
-export {
-  tt as Mermaid
-};