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

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -73,12 +73,16 @@ export const GlideDataEditor = ({
   });
 
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const editableColumnSet = useMemo(
+    () => (editableColumns === "all" ? null : new Set(editableColumns)),
+    [editableColumns],
+  );
 
   const columns: ModifiedGridColumn[] = useMemo(() => {
     const columns: ModifiedGridColumn[] = [];
     for (const [columnName, fieldType] of columnFields) {
       const editable =
-        editableColumns === "all" || editableColumns.includes(columnName);
+        editableColumnSet === null || editableColumnSet.has(columnName);
 
       columns.push({
         id: columnName,
@@ -100,7 +104,7 @@ export const GlideDataEditor = ({
     }
 
     return columns;
-  }, [columnFields, columnWidths, editableColumns, theme]);
+  }, [columnFields, columnWidths, editableColumnSet, theme]);
 
   const getCellContent = useCallback(
     (cell: Item): GridCell => {
@@ -110,8 +114,7 @@ export const GlideDataEditor = ({
       const dataItem = dataRow[columns[col].title];
       const columnKind = columns[col].kind;
       const editable =
-        editableColumns === "all" ||
-        editableColumns.includes(columns[col].title);
+        editableColumnSet === null || editableColumnSet.has(columns[col].title);
 
       if (columnKind === GridCellKind.Boolean) {
         const value = Boolean(dataItem);
@@ -141,7 +144,7 @@ export const GlideDataEditor = ({
         data: String(dataItem),
       };
     },
-    [columns, data, editableColumns],
+    [columns, data, editableColumnSet],
   );
 
   const onCellEdited = useCallback(

package/src/plugins/impl/data-editor/glide-utils.ts

@@ -147,6 +147,8 @@ export function pasteCells(options: {
       }
 
       const edits: Edits["edits"] = [];
+      const editableColumnSet =
+        editableColumns === "all" ? null : new Set(editableColumns);
 
       for (const [rowIndex, dataRow] of parsedData.entries()) {
         if (!dataRow) {
@@ -175,7 +177,7 @@ export function pasteCells(options: {
           const column = columns[targetColIdx];
           const columnType = column.dataType;
           const editable =
-            editableColumns === "all" || editableColumns.includes(column.title);
+            editableColumnSet === null || editableColumnSet.has(column.title);
 
           if (!editable) {
             continue;

package/src/plugins/impl/mpl-interactive/MplInteractivePlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* oxlint-disable typescript/no-explicit-any */
 
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { z } from "zod";
 import { useEventListener } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
@@ -186,12 +186,14 @@ const MplInteractiveSlot = (props: IPluginProps<ModelIdRef, Data>) => {
   // the figure is built once, and switching to a new model is the rebind
   // effect's job, not a reason to tear the canvas down.
   const modelIdRef = useRef(modelId);
-  modelIdRef.current = modelId;
   // The data attributes are re-parsed into fresh objects on every rerun, so
   // `toolbarImages` changes identity even when its contents do not. Read it
   // from a ref so it can't retrigger the mount effect and rebuild the canvas.
   const toolbarImagesRef = useRef(toolbarImages);
-  toolbarImagesRef.current = toolbarImages;
+  useLayoutEffect(() => {
+    modelIdRef.current = modelId;
+    toolbarImagesRef.current = toolbarImages;
+  }, [modelId, toolbarImages]);
 
   // Bind the already-rendered figure/socket to a backend model, leaving the
   // DOM, figure, and socket in place so they survive across reruns. Disposes

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* oxlint-disable typescript/no-explicit-any */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import {
@@ -146,17 +147,10 @@ const PanelSlot = (props: Props) => {
   > | null>(null);
   const [loaded, setLoaded] = useState<boolean>(false);
   const [rendered, setRendered] = useState<string | null>(null);
+  const eventBufferRef = useRef<EventBuffer<unknown> | null>(null);
 
-  // Store functions in a ref so the callback captured by EventBuffer stays current
-  const functionsRef = useRef(functions);
-  functionsRef.current = functions;
-
-  const processEvents = useCallback(() => {
-    if (!eventBufferRef.current) {
-      return;
-    }
-
-    const events = eventBufferRef.current.getAndClear();
+  const processEvents = useEvent(() => {
+    const events = eventBufferRef.current?.getAndClear() ?? [];
     if (events.length === 0) {
       return;
     }
@@ -182,14 +176,19 @@ const PanelSlot = (props: Props) => {
     );
     const buffers: ArrayBuffer[] = [];
     message.content = extractBuffers(message.content, buffers);
-    functionsRef.current.send_to_widget({ message, buffers }).catch((error) => {
+    functions.send_to_widget({ message, buffers }).catch((error) => {
       Logger.warn("Failed to send Panel event to backend", error);
     });
-  }, []);
+  });
 
-  const eventBufferRef = useRef<EventBuffer<unknown> | null>(
-    new EventBuffer(processEvents),
-  );
+  useEffect(() => {
+    const buffer = new EventBuffer(processEvents);
+    eventBufferRef.current = buffer;
+    return () => {
+      buffer.dispose();
+      eventBufferRef.current = null;
+    };
+  }, [processEvents]);
 
   // Load the bokeh extension
   useEffect(() => {

package/src/plugins/impl/panel/__tests__/utils.test.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { EventBuffer, extractBuffers, MessageSchema } from "../utils";
 
 describe("MessageSchema", () => {
@@ -73,6 +73,44 @@ describe("EventBuffer", () => {
     eventBuffer = new EventBuffer(processEvents, 50);
   });
 
+  afterEach(() => {
+    eventBuffer.dispose();
+    vi.useRealTimers();
+  });
+
+  it("flushes queued events and cancels the pending timer on dispose", () => {
+    eventBuffer.add("event1");
+    eventBuffer.add("event2");
+    expect(vi.getTimerCount()).toBe(1);
+    expect(processEvents).toHaveBeenCalledOnce();
+
+    eventBuffer.dispose();
+    expect(processEvents).toHaveBeenCalledTimes(2);
+    eventBuffer.dispose();
+
+    expect(eventBuffer.size()).toBe(0);
+    expect(vi.getTimerCount()).toBe(0);
+    vi.advanceTimersByTime(100);
+    expect(processEvents).toHaveBeenCalledTimes(2);
+  });
+
+  it("does not process an empty buffer on dispose", () => {
+    eventBuffer.dispose();
+    expect(processEvents).not.toHaveBeenCalled();
+  });
+
+  it("resets the blocked state when disposed", () => {
+    eventBuffer.add("event1");
+    // Emulate a real processEvents, which drains the buffer
+    eventBuffer.getAndClear();
+    eventBuffer.dispose();
+    eventBuffer.add("event2");
+
+    expect(processEvents).toHaveBeenCalledTimes(2);
+    expect(eventBuffer.getAndClear()).toEqual(["event2"]);
+    expect(vi.getTimerCount()).toBe(1);
+  });
+
   it("should add events to buffer", () => {
     eventBuffer.add("event1");
     eventBuffer.add("event2");

package/src/plugins/impl/panel/utils.ts

@@ -83,6 +83,7 @@ export class EventBuffer<T> {
       clearTimeout(this.timeout);
     }
     this.timeout = window.setTimeout(() => {
+      this.timeout = null;
       this.isBlocked = false;
       if (this.buffer.length > 0) {
         this.flush();
@@ -98,6 +99,22 @@ export class EventBuffer<T> {
     this.buffer = [];
   }
 
+  /**
+   * Cancel the pending timer, flushing any events still held by the block
+   * window so the last user interaction is not lost.
+   */
+  public dispose() {
+    if (this.timeout !== null) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+    this.isBlocked = false;
+    if (this.buffer.length > 0) {
+      this.processEvents();
+    }
+    this.clear();
+  }
+
   public getAndClear() {
     const events = this.buffer;
     this.buffer = [];

package/src/plugins/impl/vega/make-selectable.ts

@@ -3,6 +3,7 @@
 import type { TopLevelSpec } from "vega-lite";
 import type { NonNormalizedSpec } from "vega-lite/types_unstable/spec/index.js";
 import type { TopLevelParameter } from "vega-lite/types_unstable/spec/toplevel.js";
+import { Arrays } from "@/utils/arrays";
 
 import { findEncodedFields, makeEncodingInteractive } from "./encodings";
 import { Marks } from "./marks";
@@ -357,9 +358,7 @@ export function makeSelectable<T extends VegaLiteSpec>(
 
       // If fieldSelection is an array, filter the fields
       if (Array.isArray(fieldSelection)) {
-        legendFields = legendFields.filter((field) =>
-          fieldSelection.includes(field),
-        );
+        legendFields = Arrays.intersection(legendFields, fieldSelection);
       }
     }
 
@@ -420,9 +419,7 @@ function makeLegendSelectable(
   let legendFields = findEncodedFields(spec);
   // If fieldSelection is an array, we filter the fields
   if (Array.isArray(fieldSelection)) {
-    legendFields = legendFields.filter((field) =>
-      fieldSelection.includes(field),
-    );
+    legendFields = Arrays.intersection(legendFields, fieldSelection);
   }
 
   const legendParams = legendFields.map((field) => Params.legend(field));

package/src/stories/__tests__/editor-story.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { EditorView } from "@codemirror/view";
+import { composeStories } from "@storybook/react-vite";
+import { act, render } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import * as stories from "../editor.stories";
+
+vi.mock("@/core/codemirror/cm", () => ({
+  basicBundle: () => [],
+}));
+
+const { Primary } = composeStories(stories);
+
+it("preserves editor changes when the story rerenders with the same theme", () => {
+  const { container, rerender } = render(<Primary />);
+  const editor = container.querySelector<HTMLElement>(".cm-editor");
+  expect(editor).not.toBeNull();
+  const view = editor && EditorView.findFromDOM(editor);
+  expect(view).toBeDefined();
+  if (!view) {
+    throw new Error("Editor view was not mounted");
+  }
+
+  act(() => {
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: "user edit" },
+    });
+  });
+  rerender(<Primary />);
+
+  expect(container.querySelector(".cm-editor")).toBe(editor);
+  expect(view.state.doc.toString()).toBe("user edit");
+});

package/src/stories/editor.stories.tsx

@@ -5,7 +5,7 @@ import { EditorState, type Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import CodeMirror from "@uiw/react-codemirror";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { CopilotConfig } from "@/core/codemirror/copilot/copilot-config";
 import { copilotBundle } from "@/core/codemirror/copilot/extension";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
@@ -52,28 +52,35 @@ const Editor = (opts: { extensions?: Extension[] }): React.ReactNode => {
     });
 
     return () => view.destroy();
-    // oxlint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current]);
+  }, [opts.extensions]);
 
   return <div className="cm" ref={ref} />;
 };
 
-export const Primary: Story = {
-  render: (_args, ctx) => (
+const PrimaryEditor = ({ theme }: Pick<CodeMirrorSetupOpts, "theme">) => {
+  const extensions = useMemo(
+    () =>
+      basicBundle({
+        completionConfig: {
+          activate_on_typing: false,
+          copilot: false,
+          signature_hint_on_typing: false,
+        },
+        theme,
+        hotkeys: new OverridingHotkeyProvider({}),
+      } as unknown as CodeMirrorSetupOpts),
+    [theme],
+  );
+
+  return (
     <div className="Cell m-20 w-[60%] overflow-hidden">
-      <Editor
-        extensions={basicBundle({
-          completionConfig: {
-            activate_on_typing: false,
-            copilot: false,
-            signature_hint_on_typing: false,
-          },
-          theme: ctx.globals.theme,
-          hotkeys: new OverridingHotkeyProvider({}),
-        } as unknown as CodeMirrorSetupOpts)}
-      />
+      <Editor extensions={extensions} />
     </div>
-  ),
+  );
+};
+
+export const Primary: Story = {
+  render: (_args, ctx) => <PrimaryEditor theme={ctx.globals.theme} />,
 };
 
 export const DefaultPython: Story = {

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

@@ -16,6 +16,41 @@ import {
 } from "../arrays";
 
 describe("arrays", () => {
+  describe.each([
+    ["intersection", Arrays.intersection, [3, 3, 2], [Number.NaN]],
+    ["difference", Arrays.difference, [1], [1]],
+  ] as const)("%s", (_name, operation, expected, expectedWithNaN) => {
+    it("preserves order and duplicates without mutating readonly inputs", () => {
+      const values = Object.freeze([3, 1, 3, 2]);
+      const other = Object.freeze([2, 3, 3]);
+      expect(operation(values, other)).toEqual(expected);
+      expect(values).toEqual([3, 1, 3, 2]);
+      expect(other).toEqual([2, 3, 3]);
+    });
+
+    it("uses the same equality as array membership, including NaN", () => {
+      expect(operation([Number.NaN, 1], [Number.NaN])).toEqual(expectedWithNaN);
+    });
+
+    it("handles an empty source", () => {
+      expect(operation([], [1])).toEqual([]);
+    });
+  });
+
+  it("handles empty membership lists", () => {
+    expect(Arrays.intersection([1, 1, 2], [])).toEqual([]);
+    expect(Arrays.difference([1, 1, 2], [])).toEqual([1, 1, 2]);
+  });
+
+  it("compares objects by identity", () => {
+    const shared = { id: 1 };
+    const distinct = { id: 1 };
+    expect(Arrays.intersection([shared, distinct], [shared])).toEqual([shared]);
+    expect(Arrays.difference([shared, distinct], [shared])).toEqual([distinct]);
+    expect(Arrays.intersection([shared, distinct], [shared])[0]).toBe(shared);
+    expect(Arrays.difference([shared, distinct], [shared])[0]).toBe(distinct);
+  });
+
   describe("arrayDelete", () => {
     it("should delete an element at the specified index", () => {
       expect(arrayDelete([1, 2, 3], 1)).toEqual([1, 3]);

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

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   countFractionDigits,
   maxFractionDigitsForSteps,
@@ -20,6 +20,53 @@ describe("prettyNumber", () => {
 
 const options = { locale };
 
+describe("formatter reuse", () => {
+  it.each([
+    {
+      name: "scientific",
+      value: 0.000_123_4,
+      format: (value: number, locale: string) =>
+        prettyScientificNumber(value, { locale }),
+    },
+    {
+      name: "rounded",
+      value: 1234.567,
+      format: (value: number, locale: string) =>
+        prettyScientificNumber(value, { locale, shouldRound: true }),
+    },
+    {
+      name: "engineering",
+      value: 12_345,
+      format: prettyEngineeringNumber,
+    },
+  ])(
+    "reuses the $name formatter until the locale changes",
+    ({ format, value }) => {
+      const NumberFormat = Intl.NumberFormat;
+      const constructor = vi
+        .spyOn(Intl, "NumberFormat")
+        .mockImplementation(function (locales, options) {
+          return new NumberFormat(locales, options);
+        });
+      try {
+        const first = format(value, "fr-FR");
+        expect(format(value, "fr-FR")).toBe(first);
+        format(value * 2, "fr-FR");
+        expect(constructor).toHaveBeenCalledTimes(1);
+
+        format(value, "de-DE");
+        expect(constructor).toHaveBeenCalledTimes(2);
+        expect(constructor).toHaveBeenLastCalledWith(
+          "de-DE",
+          expect.any(Object),
+        );
+      } finally {
+        constructor.mockRestore();
+      }
+    },
+  );
+});
+
 describe("prettyScientificNumber", () => {
   it("should handle special cases", () => {
     expect(prettyScientificNumber(0, options)).toBe("0");

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

@@ -204,6 +204,27 @@ describe("Objects", () => {
   });
 
   describe("filter", () => {
+    it.each([42, { base_url: "https://example.com" }])(
+      "preserves an own __proto__ property with value %j",
+      (value) => {
+        const obj = { ["__proto__"]: value, removed: value };
+        const result = Objects.filter(obj, (_, key) => key !== "removed");
+
+        expect(Object.entries(result)).toEqual([["__proto__", value]]);
+        expect(Object.getPrototypeOf(result)).toBe(Object.prototype);
+        expect(Object.getOwnPropertyDescriptor(result, "__proto__")).toEqual({
+          value,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        });
+        expect(Object.keys(obj)).toEqual(["__proto__", "removed"]);
+        expect(Objects.filter(obj, (_, key) => key !== "__proto__")).toEqual({
+          removed: value,
+        });
+      },
+    );
+
     it("should filter object entries by predicate", () => {
       const obj = { a: 1, b: 2, c: 3, d: 4 };
       const result = Objects.filter(obj, (v) => v % 2 === 0);

package/src/utils/arrays.ts

@@ -55,6 +55,16 @@ export function arrayShallowEquals<T>(a: T[], b: T[]): boolean {
 export const Arrays = {
   // oxlint-disable-next-line typescript/no-explicit-any
   EMPTY: [] as any,
+  /** Keep values present in both arrays, preserving the first array's order and duplicates. */
+  intersection<T>(values: readonly T[], included: readonly T[]): T[] {
+    const includedSet = new Set(included);
+    return values.filter((value) => includedSet.has(value));
+  },
+  /** Remove values present in the second array, preserving order and duplicates. */
+  difference<T>(values: readonly T[], excluded: readonly T[]): T[] {
+    const excludedSet = new Set(excluded);
+    return values.filter((value) => !excludedSet.has(value));
+  },
   zip: <T, U>(a: T[], b: U[]): [T, U][] => {
     invariant(a.length === b.length, "Arrays must be the same length");
     return a.map((item, i) => [item, b[i]]);

package/src/utils/numbers.ts

@@ -23,6 +23,31 @@ export const maxFractionalDigits = memoizeLastValue((locale: string) => {
   return 0;
 });
 
+const getScientificFormatter = memoizeLastValue(
+  (locale: string) =>
+    new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+      notation: "scientific",
+    }),
+);
+
+const getRoundedFormatter = memoizeLastValue(
+  (locale: string) =>
+    new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    }),
+);
+
+const getEngineeringFormatter = memoizeLastValue(
+  (locale: string) =>
+    new Intl.NumberFormat(locale, {
+      notation: "engineering",
+      maximumSignificantDigits: 3,
+    }),
+);
+
 /** Decimal places needed to display `n` without float noise. */
 export function countFractionDigits(n: number): number {
   if (!Number.isFinite(n) || n === 0) {
@@ -108,23 +133,14 @@ export function prettyScientificNumber(
   // Determine if the number should be in scientific notation
   const absValue = Math.abs(value);
   if (absValue < 1e-2 || absValue >= 1e6) {
-    return new Intl.NumberFormat(opts.locale, {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 1,
-      notation: "scientific",
-    })
-      .format(value)
-      .toLowerCase();
+    return getScientificFormatter(opts.locale).format(value).toLowerCase();
   }
 
   const { shouldRound, locale } = opts;
 
   if (shouldRound) {
     // Number has an integer part, format with 2 decimal places
-    return new Intl.NumberFormat(locale, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
-    }).format(value);
+    return getRoundedFormatter(locale).format(value);
   }
 
   // Don't round
@@ -161,12 +177,7 @@ export function prettyEngineeringNumber(value: number, locale: string): string {
     return specialCase;
   }
 
-  const [mant, exp] = new Intl.NumberFormat(locale, {
-    notation: "engineering",
-    maximumSignificantDigits: 3,
-  })
-    .format(value)
-    .split("E");
+  const [mant, exp] = getEngineeringFormatter(locale).format(value).split("E");
 
   if (exp in prefixes) {
     return mant + prefixes[exp as keyof typeof prefixes];

package/src/utils/objects.ts

@@ -89,13 +89,9 @@ export const Objects = {
     obj: Record<K, V>,
     predicate: (value: V, key: K) => boolean,
   ): Record<K, V> {
-    const result: Record<K, V> = {} as Record<K, V>;
-    for (const [key, value] of Objects.entries(obj)) {
-      if (predicate(value, key)) {
-        result[key] = obj[key];
-      }
-    }
-    return result;
+    return Objects.fromEntries(
+      Objects.entries(obj).filter(([key, value]) => predicate(value, key)),
+    );
   },
 
   omit<V extends object, K extends keyof V>(

package/src/utils/once.ts

@@ -2,36 +2,36 @@
 
 import { arrayShallowEquals } from "./arrays";
 
-// oxlint-disable-next-line typescript/no-explicit-any
-export function once<T extends (...args: any[]) => any>(fn: T): T {
-  let result: ReturnType<T>;
+export function once<F extends (...args: never[]) => unknown>(fn: F): F;
+export function once<Args extends unknown[], Result, This>(
+  fn: (this: This, ...args: Args) => Result,
+): (this: This, ...args: Args) => Result {
+  let result: Result;
   let called = false;
-  return function (
-    this: ThisParameterType<T>,
-    ...args: Parameters<T>
-  ): ReturnType<T> {
+  return function (this: This, ...args: Args): Result {
     if (!called) {
       called = true;
-      result = fn.apply(this, args) as ReturnType<T>;
+      result = fn.apply(this, args);
     }
     return result;
-  } as T;
+  };
 }
 
-// oxlint-disable-next-line typescript/no-explicit-any
-export function memoizeLastValue<T extends (...args: any[]) => any>(fn: T): T {
-  let result: ReturnType<T>;
-  let lastArgs: Parameters<T> | undefined;
+export function memoizeLastValue<F extends (...args: never[]) => unknown>(
+  fn: F,
+): F;
+export function memoizeLastValue<Args extends unknown[], Result, This>(
+  fn: (this: This, ...args: Args) => Result,
+): (this: This, ...args: Args) => Result {
+  let result: Result;
+  let lastArgs: Args | undefined;
   let lastError: unknown;
   let hasError = false;
 
-  return function (
-    this: ThisParameterType<T>,
-    ...args: Parameters<T>
-  ): ReturnType<T> {
+  return function (this: This, ...args: Args): Result {
     if (lastArgs === undefined || !arrayShallowEquals(args, lastArgs)) {
       try {
-        result = fn.apply(this, args) as ReturnType<T>;
+        result = fn.apply(this, args);
         hasError = false;
         lastError = undefined;
       } catch (error) {
@@ -45,5 +45,5 @@ export function memoizeLastValue<T extends (...args: any[]) => any>(fn: T): T {
       throw lastError;
     }
     return result;
-  } as T;
+  };
 }