@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev261

package/src/utils/__tests__/download.test.tsx

@@ -11,6 +11,7 @@ import {
   downloadExportedFile,
   downloadHTMLAsImage,
   getImageDataUrlForCell,
+  isDownloadUrl,
   withLoadingToast,
 } from "../download";
 
@@ -595,34 +596,193 @@ describe("downloadByURL", () => {
   });
 
   it("should create anchor, set attributes, click, and remove", () => {
-    downloadByURL("data:test", "filename.png");
+    downloadByURL("data:image/png;base64,AAA=", "filename.png");
 
     expect(document.createElement).toHaveBeenCalledWith("a");
-    expect(mockAnchor.href).toBe("data:test");
+    expect(mockAnchor.href).toBe("data:image/png;base64,AAA=");
     expect(mockAnchor.download).toBe("filename.png");
     expect(mockAnchor.click).toHaveBeenCalled();
     expect(mockAnchor.remove).toHaveBeenCalled();
   });
 
-  it("downloads an exported file with its returned metadata", async () => {
-    let downloadedBlob: Blob | undefined;
-    vi.stubGlobal("URL", {
-      createObjectURL: vi.fn((blob: Blob) => {
-        downloadedBlob = blob;
-        return "blob:export";
-      }),
-      revokeObjectURL: vi.fn(),
-    });
-
-    downloadExportedFile({
-      contents: "notebook",
-      filename: "résumé.qmd",
-      mediaType: "text/plain; charset=utf-8",
-    });
-
-    expect(downloadedBlob?.type).toBe("text/plain; charset=utf-8");
-    expect(await downloadedBlob?.text()).toBe("notebook");
-    expect(mockAnchor.download).toBe("résumé.qmd");
-    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:export");
-  });
+  it.each([
+    "https://example.com/results.csv",
+    "http://example.com/results.csv",
+    "//example.com/results.csv",
+    "./@file/123-results.csv",
+    "/files/results.csv?download=1#data",
+    "../results.csv",
+    "blob:http://localhost/123",
+    "data:text/csv;charset=utf-8,a%2Cb",
+    "DATA:TEXT/PLAIN;base64,aGVsbG8=",
+    "data:application/json,%7B%7D",
+    "data:application/octet-stream;base64,AAA=",
+    "data:audio/x-wav;base64,AAA=",
+    "data:AUDIO/MPEG;codecs=mp3;base64,AAA=",
+    "data:video/mp4;base64,AAA=",
+    "data:image/tiff;base64,AAA=",
+    "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,AAA=",
+    "data:application/vnd.ms-excel;base64,AAA=",
+    "data:application/vnd.apache.parquet;base64,AAA=",
+    "data:application/x-hdf5;base64,AAA=",
+    "data:application/x-custom-format;base64,AAA=",
+    "data:application/geo+json,%7B%7D",
+    "data:application/epub+zip;base64,AAA=",
+    "data:font/woff2;base64,AAA=",
+    "data:text/markdown;charset=utf-8,%23%20Title",
+    "data:application/pdf;base64,AAA=",
+    "data:,hello",
+    "data:;base64,aGVsbG8=",
+    "data:text/plain,",
+    "data:text/plain,javascript:alert(1)",
+    "data:text/plain,hello?name=world#fragment",
+    "data:application/javascript-source,source%20code",
+    " https://example.com/results.csv ",
+  ])("downloads %s without an explicit filename", (url) => {
+    downloadByURL(url);
+
+    expect(mockAnchor.getAttribute("href")).toBe(url);
+    expect(mockAnchor.getAttribute("download")).toBe("");
+    expect(mockAnchor.click).toHaveBeenCalledOnce();
+  });
+
+  it.each([
+    "javascript:alert(1)",
+    "JaVaScRiPt:alert(1)",
+    " \u0000javascript:alert(1)",
+    "java\tscript:alert(1)",
+    "java\nscript:alert(1)",
+    "java\rscript:alert(1)",
+    "vbscript:msgbox(1)",
+    "file:///tmp/results.csv",
+    "ftp://example.com/results.csv",
+    "mailto:example@example.com",
+    "data:text/html,<h1>hello</h1>",
+    "data:TEXT/HTML;charset=utf-8;base64,AAA=",
+    "data:image/svg+xml,<svg/>",
+    "data:application/xhtml+xml,<html/>",
+    "data:text/javascript,alert(1)",
+    "data:application/javascript;charset=utf-8,alert(1)",
+    "data:application/x-javascript;base64,AAA=",
+    "data:application/ecmascript,alert(1)",
+    "data:application/x-ecmascript,alert(1)",
+    "data:text/ecmascript,alert(1)",
+    "data:text/x-ecmascript,alert(1)",
+    "data:text/x-javascript,alert(1)",
+    "data:text/javascript1.0,alert(1)",
+    "data:text/javascript1.1,alert(1)",
+    "data:text/javascript1.2,alert(1)",
+    "data:text/javascript1.3,alert(1)",
+    "data:text/javascript1.4,alert(1)",
+    "data:text/javascript1.5,alert(1)",
+    "data:text/jscript,alert(1)",
+    "data:text/livescript,alert(1)",
+    "data:text/vbscript,msgbox(1)",
+    "data:text/xml,<root/>",
+    "data:application/xml,<root/>",
+    "data:IMAGE/SVG+XML;charset=utf-8;base64,AAA=",
+    "data:application/custom+xml,<root/>",
+    "data:invalid,hello",
+    "data:text/,hello",
+    "data:/plain,hello",
+    "data:text/pl ain,hello",
+    "data:text/plain/extra,hello",
+    "data:text/plain",
+    "https://[invalid",
+    "",
+    " \n\t",
+  ])("rejects %j before creating a download link", (url) => {
+    expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+    expect(document.createElement).not.toHaveBeenCalled();
+    expect(mockAnchor.click).not.toHaveBeenCalled();
+  });
+
+  it.each(Array.from({ length: 33 }, (_, code) => code))(
+    "rejects a script scheme with leading ASCII character %i",
+    (code) => {
+      const url = `${String.fromCharCode(code)}JaVa\nScRi\tPt:alert(1)`;
+      expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+      expect(document.createElement).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each([
+    "text/html",
+    "application/xhtml+xml",
+    "image/svg+xml",
+    "application/custom+xml",
+    "text/javascript1.4",
+    "text/javascript2.0",
+    "application/x-javascript2.0",
+    "text/ecmascript2026",
+    "text/livescript",
+  ])("rejects normalized and parameterized data MIME type %s", (mimeType) => {
+    const urls = [
+      `DATA:${mimeType.toUpperCase()},payload`,
+      `data: ${mimeType} ;charset=utf-8,payload`,
+      `data:${mimeType};charset="utf-8";base64,cGF5bG9hZA==`,
+      `da\tta:${mimeType};name=file.txt,payload?query#fragment`,
+    ];
+    for (const url of urls) {
+      expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+    }
+    expect(document.createElement).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    null,
+    undefined,
+    42,
+    false,
+    {},
+    [],
+    new String("https://example.com"),
+  ])("rejects non-string input %j without throwing or coercing it", (url) => {
+    expect(isDownloadUrl(url)).toBe(false);
+  });
+
+  it.each([false, true])(
+    "releases exported files after a click (fails=%s)",
+    async (fails) => {
+      let downloadedBlob: Blob | undefined;
+      vi.stubGlobal(
+        "URL",
+        class extends URL {
+          public static override createObjectURL = vi.fn((blob: Blob) => {
+            downloadedBlob = blob;
+            return "blob:export";
+          });
+          public static override revokeObjectURL = vi.fn();
+        },
+      );
+
+      if (fails) {
+        vi.mocked(mockAnchor.click).mockImplementation(() => {
+          throw new Error("Download failed");
+        });
+      }
+      const download = () =>
+        downloadExportedFile({
+          contents: "notebook",
+          filename: "résumé.qmd",
+          mediaType: "text/plain; charset=utf-8",
+        });
+      let caughtError: unknown;
+      try {
+        download();
+      } catch (error) {
+        caughtError = error;
+      }
+
+      expect(caughtError).toEqual(
+        fails ? new Error("Download failed") : undefined,
+      );
+
+      expect(downloadedBlob?.type).toBe("text/plain; charset=utf-8");
+      expect(await downloadedBlob?.text()).toBe("notebook");
+      expect(mockAnchor.download).toBe("résumé.qmd");
+      expect(mockAnchor.remove).toHaveBeenCalledOnce();
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:export");
+    },
+  );
 });

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

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   countFractionDigits,
+  fractionDigitsForSlider,
   maxFractionDigitsForSteps,
   prettyEngineeringNumber,
   prettyNumber,
@@ -20,6 +21,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");
@@ -57,6 +105,42 @@ describe("prettyScientificNumber", () => {
       "1.23456789101112",
     );
   });
+
+  it("supports caller-provided display precision", () => {
+    expect(
+      prettyScientificNumber(1.2340000000000002, {
+        maximumFractionDigits: 2,
+        locale,
+      }),
+    ).toBe("1.23");
+    expect(
+      prettyScientificNumber(1.2340000000000002, {
+        maximumFractionDigits: 3,
+        locale,
+      }),
+    ).toBe("1.234");
+    expect(
+      prettyScientificNumber(1.234, {
+        maximumFractionDigits: 3,
+        locale,
+      }),
+    ).toBe("1.234");
+  });
+
+  it("preserves caller-provided precision in scientific notation", () => {
+    expect(
+      prettyScientificNumber(0.0012300000000000002, {
+        maximumFractionDigits: 5,
+        locale,
+      }),
+    ).toBe("1.23e-3");
+    expect(
+      prettyScientificNumber(1_000_001.2300000001, {
+        maximumFractionDigits: 2,
+        locale,
+      }),
+    ).toBe("1.00000123e6");
+  });
 });
 
 describe("prettyEngineeringNumber", () => {
@@ -106,3 +190,23 @@ describe("maxFractionDigitsForSteps", () => {
     expect(maxFractionDigitsForSteps([1, 2, 3, 4], 1)).toBe(0);
   });
 });
+
+describe("fractionDigitsForSlider", () => {
+  it("preserves precision for regular slider steps", () => {
+    expect(fractionDigitsForSlider(0.001)).toBe(3);
+    expect(fractionDigitsForSlider(0.01)).toBe(2);
+    expect(fractionDigitsForSlider(undefined)).toBe(2);
+    expect(fractionDigitsForSlider(undefined, null, 0, [0.1234, 0.5])).toBe(4);
+  });
+
+  it("infers precision from custom step values", () => {
+    expect(fractionDigitsForSlider(undefined, [1, 1.234, 2])).toBe(3);
+    expect(
+      fractionDigitsForSlider(undefined, [0.1, 0.2, 0.30000000000000004]),
+    ).toBe(1);
+  });
+
+  it("includes the slider origin in regular step precision", () => {
+    expect(fractionDigitsForSlider(1, null, 0.5)).toBe(1);
+  });
+});

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

@@ -53,8 +53,17 @@ export function arrayShallowEquals<T>(a: T[], b: T[]): boolean {
 }
 
 export const Arrays = {
-  // oxlint-disable-next-line typescript/no-explicit-any
-  EMPTY: [] as any,
+  EMPTY: [],
+  /** 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/blob.ts

@@ -5,7 +5,7 @@ import {
   type DataURLString,
 } from "./json/base64";
 
-export function serializeBlob<T>(blob: Blob): Promise<DataURLString> {
+export function serializeBlob(blob: Blob): Promise<DataURLString> {
   return new Promise<DataURLString>((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = (event) => {

package/src/utils/createReducer.ts

@@ -1,52 +1,52 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable typescript/no-explicit-any */
 
 import { atom, useSetAtom } from "jotai";
 import type { Reducer } from "react";
 import { Logger } from "@/utils/Logger";
 
-export type NoInfer<T> = [T][T extends any ? 0 : never];
-
-type Dispatch<RH> = (action: ReducerActionOf<RH>) => void;
-type IfUnknown<T, Y, N> = unknown extends T ? Y : N;
+type ReducerHandlers<State, Payloads> = {
+  [Type in keyof Payloads]: (state: State, payload: Payloads[Type]) => State;
+};
 
-type ReducerHandler<State, Payload> = (state: State, payload: Payload) => State;
+type ReducerConstraints<State> = Record<
+  string,
+  (state: State, payload: never) => State
+>;
+
+type PayloadsOf<RH> = {
+  [Type in keyof RH]: RH[Type] extends (
+    state: never,
+    payload: infer Payload,
+  ) => unknown
+    ? Payload
+    : never;
+};
 
-interface ReducerHandlers<State> {
-  [k: string]: ReducerHandler<State, any>;
-}
+type Dispatch<Payloads> = (action: ReducerActionOf<Payloads>) => void;
 
-type ReducerActions<RH extends ReducerHandlers<any>> = {
-  [Type in keyof RH]: RH[Type] extends ReducerHandler<any, infer Payload>
-    ? IfUnknown<Payload, () => void, (payload: Payload) => void>
-    : never;
+type ReducerActions<Payloads> = {
+  [Type in keyof Payloads]: unknown extends Payloads[Type]
+    ? () => void
+    : (payload: Payloads[Type]) => void;
 };
 
 /** Helper for typing middleware that receives dispatched actions. */
 export type DispatchedActionOf<T> = {
-  [Key in keyof T]: T[Key] extends (payload: infer P) => any
+  [Key in keyof T]: T[Key] extends (payload: infer P) => unknown
     ? { type: Key; payload: P }
     : never;
 }[keyof T & string];
 
-type ReducerActionOf<RH> = {
-  [Type in keyof RH]: RH[Type] extends ReducerHandler<any, infer Payload>
-    ? { type: Type; payload: Payload }
-    : never;
-}[keyof RH & string];
+type ReducerActionOf<
+  Payloads,
+  Key extends keyof Payloads & string = keyof Payloads & string,
+> = {
+  [Type in Key]: { type: Type; payload: Payloads[Type] };
+}[Key];
 
-export interface ReducerCreatorResult<
-  State,
-  RH extends ReducerHandlers<State>,
-> {
-  /**
-   * The reducer function.
-   */
-  reducer: Reducer<State, any>;
-  /**
-   * Given a dispatch function, returns an object containing all the actions.
-   */
-  createActions: (dispatch: Dispatch<RH>) => ReducerActions<RH>;
+export interface ReducerCreatorResult<State, Payloads> {
+  reducer: Reducer<State, ReducerActionOf<Payloads>>;
+  createActions: (dispatch: Dispatch<Payloads>) => ReducerActions<Payloads>;
 }
 
 /**
@@ -54,93 +54,129 @@ export interface ReducerCreatorResult<
  */
 export function createReducer<
   State,
-  RH extends ReducerHandlers<NoInfer<State>>,
->(initialState: () => State, reducers: RH): ReducerCreatorResult<State, RH> {
+  RH extends ReducerConstraints<NoInfer<State>>,
+>(
+  initialState: () => State,
+  reducers: RH & ReducerHandlers<NoInfer<State>, PayloadsOf<RH>>,
+): ReducerCreatorResult<State, PayloadsOf<RH>> {
+  type Payloads = PayloadsOf<RH>;
+  const handlers: ReducerHandlers<State, Payloads> = reducers;
   return {
-    reducer: (state, action: ReducerActionOf<RH>) => {
+    reducer: (state, action) => {
       state = state || initialState();
-      if (action.type in reducers) {
-        return reducers[action.type](state, action.payload);
+      if (action.type in handlers) {
+        return handlers[action.type](state, action.payload);
       }
 
       Logger.error(`Action type ${action.type} is not defined in reducers.`);
       return state;
     },
-    createActions: (dispatch: Dispatch<RH>) => {
-      const actions = {} as ReducerActions<RH>;
-      for (const type in reducers) {
-        (actions as any)[type] = (payload: any) => {
-          dispatch({ type, payload } as any);
-        };
+    createActions: (dispatch) => {
+      const actions: {
+        [Key in keyof Payloads]?: (payload: Payloads[Key]) => void;
+      } = {};
+      const addAction = <Key extends keyof Payloads & string>(type: Key) => {
+        actions[type] = (payload) => dispatch({ type, payload });
+      };
+      for (const type in handlers) {
+        addAction(type);
       }
-      return actions;
+      // The loop fills every key; payload-free creators receive undefined.
+      return actions as ReducerActions<Payloads>;
     },
   };
 }
 
-type Middleware<State, RH> = (
+type Middleware<State, Payloads> = (
   prevState: State,
   newState: State,
-  action: ReducerActionOf<RH>,
+  action: ReducerActionOf<Payloads>,
 ) => void;
 
 export function createReducerAndAtoms<
   State,
-  RH extends ReducerHandlers<NoInfer<State>>,
+  RH extends ReducerConstraints<NoInfer<State>>,
 >(
   initialState: () => State,
-  reducers: RH,
-  middleware?: Middleware<State, NoInfer<RH>>[],
+  reducers: RH & ReducerHandlers<NoInfer<State>, PayloadsOf<RH>>,
+  middleware?: NoInfer<Middleware<State, PayloadsOf<RH>>[]>,
 ) {
+  type Payloads = PayloadsOf<RH>;
   const allMiddleware = [...(middleware ?? [])];
-  const addMiddleware = (mw: Middleware<State, RH>) => {
+  const addMiddleware = (mw: Middleware<State, Payloads>) => {
     allMiddleware.push(mw);
   };
-  const { reducer, createActions } = createReducer(initialState, reducers);
+  const { reducer, createActions } = createReducer<State, RH>(
+    initialState,
+    reducers,
+  );
 
-  const reducerWithMiddleware = (state: State, action: ReducerActionOf<RH>) => {
+  const reduceSafely = (state: State, action: ReducerActionOf<Payloads>) => {
     try {
-      const newState = reducer(state, action);
-      for (const mw of allMiddleware) {
-        try {
-          mw(state, newState, action);
-        } catch (error) {
-          Logger.error(`Error in middleware for action ${action.type}:`, error);
-        }
-      }
-      return newState;
+      return reducer(state, action);
     } catch (error) {
       Logger.error(`Error in reducer for action ${action.type}:`, error);
       return state;
     }
   };
 
+  const runMiddleware = (
+    prev: State,
+    next: State,
+    action: ReducerActionOf<Payloads>,
+  ) => {
+    for (const mw of allMiddleware) {
+      try {
+        mw(prev, next, action);
+      } catch (error) {
+        Logger.error(`Error in middleware for action ${action.type}:`, error);
+      }
+    }
+  };
+
+  const reducerWithMiddleware = (
+    state: State,
+    action: ReducerActionOf<Payloads>,
+  ) => {
+    const next = reduceSafely(state, action);
+    runMiddleware(state, next, action);
+    return next;
+  };
+
   const valueAtom = atom(initialState());
-  // map of SetAtom => Actions
-  const actionsMap = new WeakMap();
+  type ActionsCache = WeakMap<
+    ReturnType<typeof useSetAtom<typeof valueAtom>>,
+    ReducerActions<Payloads>
+  >;
+  const actionsMap: ActionsCache = new WeakMap();
+  const plainActionsMap: ActionsCache = new WeakMap();
 
   function useActions(
     options: { skipMiddleware?: boolean } = {},
-  ): ReducerActions<RH> {
+  ): ReducerActions<Payloads> {
     const setState = useSetAtom(valueAtom);
+    const skipMiddleware = options.skipMiddleware === true;
+    const cache = skipMiddleware ? plainActionsMap : actionsMap;
 
-    if (options.skipMiddleware === true) {
-      return createActions((action: ReducerActionOf<RH>) => {
-        setState((state: State) => reducer(state, action));
-      });
+    const cachedActions = cache.get(setState);
+    if (cachedActions) {
+      return cachedActions;
     }
-
-    if (!actionsMap.has(setState)) {
-      actionsMap.set(
-        setState,
-        createActions((action: ReducerActionOf<RH>) => {
-          setState((state: State) => reducerWithMiddleware(state, action));
-        }),
-      );
-    }
-
-    // oxlint-disable-next-line typescript/no-non-null-assertion
-    return actionsMap.get(setState)!;
+    const actions = createActions((action) => {
+      // Middleware runs after the write commits so it observes the new state.
+      let prev: State | undefined;
+      let next: State | undefined;
+      setState((state: State) => {
+        prev = state;
+        next = reduceSafely(state, action);
+        return next;
+      });
+      if (!skipMiddleware && prev !== undefined && next !== undefined) {
+        runMiddleware(prev, next, action);
+      }
+    });
+    cache.set(setState, actions);
+    return actions;
   }
 
   return {