@marimo-team/islands 0.25.3-dev39 → 0.25.3-dev40

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/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/code/any-language-editor.tsx

@@ -53,14 +53,14 @@ const AnyLanguageCodeMirror: React.FC<
     extensions?: readonly Extension[];
   }
 > = ({
-  language,
+  language: requestedLanguage,
   hideUnsupportedLanguageErrors,
   showCopyButton,
   extensions = EMPTY_EXTENSIONS,
   ...props
 }) => {
   // Maybe normalize the language to the extension
-  language = LANGUAGE_MAP[language || ""] || language;
+  const language = LANGUAGE_MAP[requestedLanguage || ""] || requestedLanguage;
 
   const isSupported = isSupportedLanguage(language);
   if (!isSupported) {

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/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/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/dist/any-language-editor-D4q-IFcM.js

@@ -1,76 +0,0 @@
-import "./rolldown-runtime-Cb76FRpK.js";
-import { g as e } from "./button-CvjkwdSk.js";
-import { t } from "./react-sHtZdjeP.js";
-import { t as n } from "./compiler-runtime-CldRdSsv.js";
-import { t as r } from "./copy-icon-BgUO8jsi.js";
-import { t as i } from "./jsx-runtime-3BD1kT0s.js";
-import { n as a } from "./error-banner-CFPHFw4h.js";
-import { t as o } from "./esm-AMFssoNp.js";
-import { n as s, t as c } from "./esm-D2gTsXEV.js";
-//#region src/plugins/impl/code/any-language-editor.tsx
-var l = n();
-t();
-var u = i(), d = {
-	python: "py",
-	python3: "py",
-	javascript: "js",
-	typescript: "ts",
-	shell: "sh",
-	bash: "sh",
-	unknown: "text",
-	undefined: "text"
-}, f = [];
-function p(e) {
-	return e ? e in c : !1;
-}
-var m = (t) => {
-	let n = (0, l.c)(29), i, m, h, g, _, v;
-	if (n[0] !== t) {
-		let { language: e, hideUnsupportedLanguageErrors: r, showCopyButton: a, extensions: o, ...s } = t;
-		m = r, _ = a, g = s, h = e, i = o === void 0 ? f : o, h = d[h || ""] || h, v = p(h), n[0] = t, n[1] = i, n[2] = m, n[3] = h, n[4] = g, n[5] = _, n[6] = v;
-	} else i = n[1], m = n[2], h = n[3], g = n[4], _ = n[5], v = n[6];
-	let y = v;
-	y || e.warn(`Language ${h} not found in CodeMirror.`);
-	let b;
-	bb0: {
-		if (!p(h)) {
-			b = i;
-			break bb0;
-		}
-		let e;
-		n[7] === h ? e = n[8] : (e = s(h), n[7] = h, n[8] = e);
-		let t;
-		n[9] !== i || n[10] !== e ? (t = [e, ...i].filter(Boolean), n[9] = i, n[10] = e, n[11] = t) : t = n[11], b = t;
-	}
-	let x = b, S;
-	n[12] !== m || n[13] !== y || n[14] !== h ? (S = !y && !m && /* @__PURE__ */ (0, u.jsx)(a, {
-		className: "mb-1 rounded-sm",
-		error: `Language ${h} not supported. Supported languages are: ${Object.keys(c).join(", ")}`
-	}), n[12] = m, n[13] = y, n[14] = h, n[15] = S) : S = n[15];
-	let C;
-	n[16] !== y || n[17] !== g || n[18] !== _ ? (C = _ && y && /* @__PURE__ */ (0, u.jsx)(r, {
-		tooltip: !1,
-		buttonClassName: "absolute top-2 right-2 z-10 hover-action",
-		className: "h-4 w-4 text-muted-foreground",
-		value: g.value || "",
-		toastTitle: "Copied to clipboard"
-	}), n[16] = y, n[17] = g, n[18] = _, n[19] = C) : C = n[19];
-	let w;
-	n[20] === x ? w = n[21] : (w = [...x], n[20] = x, n[21] = w);
-	let T;
-	n[22] !== g || n[23] !== w ? (T = /* @__PURE__ */ (0, u.jsx)(o, {
-		...g,
-		extensions: w
-	}), n[22] = g, n[23] = w, n[24] = T) : T = n[24];
-	let E;
-	return n[25] !== S || n[26] !== C || n[27] !== T ? (E = /* @__PURE__ */ (0, u.jsxs)("div", {
-		className: "relative w-full group hover-actions-parent",
-		children: [
-			S,
-			C,
-			T
-		]
-	}), n[25] = S, n[26] = C, n[27] = T, n[28] = E) : E = n[28], E;
-};
-//#endregion
-export { d as LANGUAGE_MAP, m as default };