@marimo-team/islands 0.25.3-dev17 → 0.25.3-dev173

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

@@ -16,21 +16,27 @@ interface ReducerHandlers<State> {
   [k: string]: ReducerHandler<State, any>;
 }
 
-type ReducerActions<RH extends ReducerHandlers<any>> = {
-  [Type in keyof RH]: RH[Type] extends ReducerHandler<any, infer Payload>
+type ReducerActions<RH> = {
+  [Type in keyof RH]: RH[Type] extends (
+    state: never,
+    payload: infer Payload,
+  ) => unknown
     ? IfUnknown<Payload, () => void, (payload: Payload) => void>
     : never;
 };
 
 /** 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 in keyof RH]: RH[Type] extends (
+    state: never,
+    payload: infer Payload,
+  ) => unknown
     ? { type: Type; payload: Payload }
     : never;
 }[keyof RH & string];
@@ -42,7 +48,7 @@ export interface ReducerCreatorResult<
   /**
    * The reducer function.
    */
-  reducer: Reducer<State, any>;
+  reducer: Reducer<State, ReducerActionOf<RH>>;
   /**
    * Given a dispatch function, returns an object containing all the actions.
    */
@@ -98,49 +104,70 @@ export function createReducerAndAtoms<
   };
   const { reducer, createActions } = createReducer(initialState, reducers);
 
-  const reducerWithMiddleware = (state: State, action: ReducerActionOf<RH>) => {
+  const reduceSafely = (state: State, action: ReducerActionOf<RH>) => {
     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<RH>,
+  ) => {
+    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<RH>) => {
+    const next = reduceSafely(state, action);
+    runMiddleware(state, next, action);
+    return next;
+  };
+
   const valueAtom = atom(initialState());
-  // map of SetAtom => Actions
+  // map of SetAtom => Actions, with and without middleware
   const actionsMap = new WeakMap();
+  const plainActionsMap = new WeakMap();
 
   function useActions(
     options: { skipMiddleware?: boolean } = {},
   ): ReducerActions<RH> {
     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));
-      });
-    }
-
-    if (!actionsMap.has(setState)) {
-      actionsMap.set(
+    if (!cache.has(setState)) {
+      cache.set(
         setState,
         createActions((action: ReducerActionOf<RH>) => {
-          setState((state: State) => reducerWithMiddleware(state, action));
+          // Reduce inside the write. Middleware runs once the write has
+          // committed and its subscribers have run, so anything it sets in
+          // turn observes the new state rather than the one being replaced.
+          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);
+          }
         }),
       );
     }
 
     // oxlint-disable-next-line typescript/no-non-null-assertion
-    return actionsMap.get(setState)!;
+    return cache.get(setState)!;
   }
 
   return {

package/src/utils/maps.ts

@@ -1,10 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable typescript/no-explicit-any */
 
 import { Logger } from "./Logger";
 
-type NoInfer<T> = [T][T extends any ? 0 : never];
-
 export const Maps = {
   /**
    * keyBy for Map, with duplicate key detection.

package/src/utils/numbers.ts

@@ -23,6 +23,31 @@ export const maxFractionalDigits = memoizeLastValue((locale: string) => {
   return 0;
 });
 
+const getScientificFormatter = memoizeLastValue(
+  (locale: string, maximumFractionDigits = 1) =>
+    new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits,
+      notation: "scientific",
+    }),
+);
+
+const getRoundedFormatter = memoizeLastValue(
+  (locale: string, maximumFractionDigits = 2) =>
+    new Intl.NumberFormat(locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits,
+    }),
+);
+
+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) {
@@ -35,7 +60,7 @@ export function countFractionDigits(n: number): number {
 
 /** Max fraction digits to display a set of step values cleanly. */
 export function maxFractionDigitsForSteps(
-  steps: number[],
+  steps: readonly number[],
   minGap: number,
 ): number {
   let max = countFractionDigits(minGap);
@@ -45,6 +70,41 @@ export function maxFractionDigitsForSteps(
   return max;
 }
 
+/** Infer display precision from a slider's regular or custom steps. */
+export function fractionDigitsForSlider(
+  step?: number,
+  steps?: readonly number[] | null,
+  origin?: number,
+  values?: readonly number[],
+): number {
+  const originDigits = origin == null ? 0 : countFractionDigits(origin);
+
+  if (steps && steps.length > 0) {
+    let minGap = Number.POSITIVE_INFINITY;
+    for (let i = 1; i < steps.length; i++) {
+      const gap = Math.abs(steps[i] - steps[i - 1]);
+      if (gap > 0 && gap < minGap) {
+        minGap = gap;
+      }
+    }
+
+    return Math.max(
+      originDigits,
+      maxFractionDigitsForSteps(steps, Number.isFinite(minGap) ? minGap : 0),
+    );
+  }
+
+  if (step == null || !Number.isFinite(step) || step <= 0) {
+    return Math.max(
+      2,
+      originDigits,
+      ...(values ?? []).map(countFractionDigits),
+    );
+  }
+
+  return Math.max(originDigits, countFractionDigits(step));
+}
+
 /** Round away float noise so step-based inputs stay on a clean decimal grid. */
 export function roundToFractionDigits(n: number, digits: number): number {
   return Number(n.toFixed(digits));
@@ -96,6 +156,7 @@ export function prettyScientificNumber(
   value: number,
   opts: {
     shouldRound?: boolean; // Default to false
+    maximumFractionDigits?: number;
     locale: string;
   },
 ): string {
@@ -108,23 +169,28 @@ 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",
-    })
+    // Scientific notation counts digits after the decimal in the mantissa.
+    const digits =
+      opts.maximumFractionDigits === undefined
+        ? 1
+        : Math.max(
+            1,
+            Math.min(
+              maxFractionalDigits(opts.locale),
+              opts.maximumFractionDigits + Math.floor(Math.log10(absValue)),
+            ),
+          );
+    return getScientificFormatter(opts.locale, digits)
       .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);
+  if (shouldRound || opts.maximumFractionDigits !== undefined) {
+    return getRoundedFormatter(locale, opts.maximumFractionDigits ?? 2).format(
+      value,
+    );
   }
 
   // Don't round
@@ -161,12 +227,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>(
@@ -106,8 +102,7 @@ export const Objects = {
     return Objects.filter(obj, (_, key) => !set.has(key));
   },
 
-  // oxlint-disable-next-line typescript/no-explicit-any
-  pick<V extends Record<string, any>, K extends string>(
+  pick<V extends Record<string, unknown>, K extends string>(
     obj: V,
     keys: readonly K[],
   ): Pick<V, K & 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;
+  };
 }

package/src/utils/tracer.ts

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-/* oxlint-disable typescript/no-explicit-any */
 /* oxlint-disable no-console -- for debugging */
 
 import { Logger } from "./Logger";
@@ -61,12 +60,17 @@ export class Tracer {
     }
   }
 
-  public wrapAsync<T extends (...args: any[]) => Promise<any>>(
+  public wrapAsync<T extends (...args: never[]) => Promise<unknown>>(
     fn: T,
     name?: string,
+    attributes?: Record<string, unknown>,
+  ): T;
+  public wrapAsync<Args extends unknown[], Result>(
+    fn: (...args: Args) => Promise<Result>,
+    name?: string,
     attributes: Record<string, unknown> = {},
-  ): T {
-    return (async (...args) => {
+  ): (...args: Args) => Promise<Result> {
+    return async (...args) => {
       const span = this.startSpan(name || fn.name, attributes);
       try {
         const result = await fn(...args);
@@ -76,7 +80,7 @@ export class Tracer {
         this.endSpan(span, "error");
         throw error;
       }
-    }) as T;
+    };
   }
 
   public logSpans(): void {

package/src/utils/zod-utils.ts

@@ -2,9 +2,7 @@
 
 import z from "zod";
 
-export function isZodArray<T>(
-  schema: z.ZodType,
-): schema is z.ZodArray<z.ZodType> {
+export function isZodArray(schema: z.ZodType): schema is z.ZodArray<z.ZodType> {
   return schema instanceof z.ZodArray;
 }