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

package/src/plugins/impl/anywidget/model.ts

@@ -64,11 +64,11 @@ export class Model<T extends ModelState> implements AnyModel<T> {
    * (`widget_manager.get_model`). Assigned by the registry module at
    * import time to avoid an import cycle.
    */
-  static _modelManager: {
+  public static _modelManager: {
     getModel(model_id: WidgetModelId): Promise<Model<any>>;
   };
 
-  constructor(data: T, comm: MarimoComm<T>, signal?: AbortSignal) {
+  public constructor(data: T, comm: MarimoComm<T>, signal?: AbortSignal) {
     this.#data = data;
     this.#comm = comm;
     this.#dirtyFields = new Set();
@@ -84,7 +84,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
    * Internal marimo API - not part of AnyWidget AFM.
    * Access via getMarimoInternal().
    */
-  [marimoSymbol]: MarimoInternalApi<T> = {
+  public [marimoSymbol]: MarimoInternalApi<T> = {
     updateAndEmitDiffs: (value: T) => this.#updateAndEmitDiffs(value),
     emitCustomMessage: (
       message: CustomMessage,
@@ -92,7 +92,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
     ) => this.#emitCustomMessage(message, buffers),
   };
 
-  off(eventName?: string | null, callback?: EventHandler | null): void {
+  public off(eventName?: string | null, callback?: EventHandler | null): void {
     if (!eventName) {
       this.#listeners = {};
       return;
@@ -106,7 +106,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
     this.#listeners[eventName]?.delete(callback);
   }
 
-  send(
+  public send(
     content: any,
     callbacks?: any,
     buffers?: ArrayBuffer[] | ArrayBufferView[],
@@ -121,7 +121,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
       .then(() => callbacks?.());
   }
 
-  widget_manager = {
+  public widget_manager = {
     async get_model<TT extends ModelState>(
       model_id: WidgetModelId,
     ): Promise<AnyModel<TT>> {
@@ -135,18 +135,18 @@ export class Model<T extends ModelState> implements AnyModel<T> {
     },
   };
 
-  get<K extends keyof T>(key: K): T[K] {
+  public get<K extends keyof T>(key: K): T[K] {
     return this.#data[key];
   }
 
-  set<K extends keyof T>(key: K, value: T[K]): void {
+  public set<K extends keyof T>(key: K, value: T[K]): void {
     this.#data = { ...this.#data, [key]: value };
     this.#dirtyFields.add(key);
     this.#emit(`change:${key as K & string}`, value);
     this.#emitAnyChange();
   }
 
-  save_changes(): void {
+  public save_changes(): void {
     if (this.#dirtyFields.size === 0) {
       return;
     }
@@ -169,7 +169,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
    * `addEventListener({ signal })`) and is what `modelProxy` uses to
    * scope listeners to view / binding lifetimes.
    */
-  on(
+  public on(
     eventName: string,
     callback: EventHandler,
     options?: { signal?: AbortSignal },

package/src/plugins/impl/anywidget/registry.ts

@@ -41,7 +41,10 @@ export class WidgetRegistry implements WidgetResolver {
   #timeout: number;
   #isEditMode: () => boolean;
 
-  constructor(timeout = 10_000, isEditMode: () => boolean = defaultIsEditMode) {
+  public constructor(
+    timeout = 10_000,
+    isEditMode: () => boolean = defaultIsEditMode,
+  ) {
     this.#timeout = timeout;
     this.#isEditMode = isEditMode;
   }
@@ -71,7 +74,7 @@ export class WidgetRegistry implements WidgetResolver {
    * hasn't arrived yet. Rejects after the registry timeout so a ref to
    * a model that never opens fails loudly instead of hanging.
    */
-  getModel(key: WidgetModelId): Promise<Model<ModelState>> {
+  public getModel(key: WidgetModelId): Promise<Model<ModelState>> {
     return this.#getOrCreateRuntime(key).getModel();
   }
 
@@ -79,7 +82,7 @@ export class WidgetRegistry implements WidgetResolver {
    * Get a model synchronously if it exists and has been resolved.
    * Returns undefined if the model doesn't exist or is still pending.
    */
-  getModelSync(key: WidgetModelId): Model<ModelState> | undefined {
+  public getModelSync(key: WidgetModelId): Model<ModelState> | undefined {
     return this.#runtimes.get(key)?.getModelSync();
   }
 
@@ -87,14 +90,14 @@ export class WidgetRegistry implements WidgetResolver {
    * Create a model with a managed lifecycle signal.
    * The signal is aborted when the entry is deleted.
    */
-  createModel(
+  public createModel(
     key: WidgetModelId,
     factory: (signal: AbortSignal) => Model<ModelState>,
   ): void {
     this.#getOrCreateRuntime(key).createModel(factory);
   }
 
-  setModel(key: WidgetModelId, model: Model<ModelState>): void {
+  public setModel(key: WidgetModelId, model: Model<ModelState>): void {
     this.#getOrCreateRuntime(key).setModel(model);
   }
 
@@ -105,15 +108,15 @@ export class WidgetRegistry implements WidgetResolver {
    * Specs only come from kernel-authored notifications; model state
    * must never be treated as code (it is client-writable).
    */
-  setSpec(key: WidgetModelId, spec: EsmSpec): void {
+  public setSpec(key: WidgetModelId, spec: EsmSpec): void {
     this.#getOrCreateRuntime(key).setSpec(spec);
   }
 
-  getWidget<T = unknown>(key: WidgetModelId) {
+  public getWidget<T = unknown>(key: WidgetModelId) {
     return this.#getOrCreateRuntime(key).getWidget<T>();
   }
 
-  createView(options: {
+  public createView(options: {
     modelId: WidgetModelId;
     el: HTMLElement;
     signal: AbortSignal;
@@ -125,7 +128,7 @@ export class WidgetRegistry implements WidgetResolver {
    * Tear down everything known about `key`: the model's lifecycle
    * signal and the current generation.
    */
-  delete(key: WidgetModelId): void {
+  public delete(key: WidgetModelId): void {
     const runtime = this.#runtimes.get(key);
     if (!runtime) {
       return;

package/src/plugins/impl/anywidget/runtime.ts

@@ -60,7 +60,7 @@ export class WidgetRuntime {
   #generationCleanup = Promise.resolve();
   #css = "";
 
-  constructor(key: WidgetModelId, options: WidgetRuntimeOptions) {
+  public constructor(key: WidgetModelId, options: WidgetRuntimeOptions) {
     this.#key = key;
     this.#timeout = options.timeout;
     this.#isEditMode = options.isEditMode;
@@ -68,7 +68,7 @@ export class WidgetRuntime {
     this.#onModelTimeout = options.onModelTimeout;
   }
 
-  getModel(): Promise<Model<ModelState>> {
+  public getModel(): Promise<Model<ModelState>> {
     if (this.#model.status === "pending" && !this.#modelTimeout) {
       this.#modelTimeout = setTimeout(() => {
         if (this.#model.status === "pending") {
@@ -83,18 +83,20 @@ export class WidgetRuntime {
     return this.#model.promise;
   }
 
-  getModelSync(): Model<ModelState> | undefined {
+  public getModelSync(): Model<ModelState> | undefined {
     return this.#model.status === "resolved" ? this.#model.value : undefined;
   }
 
-  createModel(factory: (signal: AbortSignal) => Model<ModelState>): void {
+  public createModel(
+    factory: (signal: AbortSignal) => Model<ModelState>,
+  ): void {
     if (this.#model.status !== "pending") {
       return;
     }
     this.#resolveModel(factory(this.#controller.signal));
   }
 
-  setModel(model: Model<ModelState>): void {
+  public setModel(model: Model<ModelState>): void {
     if (this.#model.status !== "pending") {
       return;
     }
@@ -121,7 +123,7 @@ export class WidgetRuntime {
     );
   }
 
-  setSpec(spec: EsmSpec): void {
+  public setSpec(spec: EsmSpec): void {
     if (!this.#esmSpec) {
       this.#esmSpec = spec;
       return;
@@ -138,7 +140,7 @@ export class WidgetRuntime {
     }
   }
 
-  async getWidget<T = unknown>(): Promise<ResolvedWidget<T>> {
+  public async getWidget<T = unknown>(): Promise<ResolvedWidget<T>> {
     const binding = await this.#getCurrentBinding();
     return {
       exports: binding.exports as T,
@@ -151,7 +153,7 @@ export class WidgetRuntime {
     };
   }
 
-  async createView(options: {
+  public async createView(options: {
     el: HTMLElement;
     signal: AbortSignal;
   }): Promise<void> {
@@ -341,7 +343,7 @@ export class WidgetRuntime {
     view.signal.addEventListener("abort", release, { once: true });
   }
 
-  dispose(): void {
+  public dispose(): void {
     if (this.#controller.signal.aborted) {
       return;
     }

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -59,7 +59,7 @@ class WidgetDefRegistry {
    * `kernelAuthored: true` only for URLs from an `EsmSpec`; it widens
    * the import gate to remote and data URLs.
    */
-  getModule(options: {
+  public getModule(options: {
     jsUrl: string;
     jsHash: string;
     kernelAuthored?: boolean;
@@ -80,7 +80,7 @@ class WidgetDefRegistry {
     return promise;
   }
 
-  invalidate(jsHash: string): void {
+  public invalidate(jsHash: string): void {
     this.#cache.delete(jsHash);
   }
 
@@ -180,7 +180,7 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * `controller`'s signal. Aborting the controller mid-initialize
    * still runs any legacy cleanup callback, and `create` rejects.
    */
-  static async create<T extends ModelState>({
+  public static async create<T extends ModelState>({
     widgetDef,
     model,
     createHost,
@@ -261,7 +261,7 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * The object returned from `initialize`, or `undefined` if it
    * returned a cleanup function or nothing.
    */
-  get exports(): unknown {
+  public get exports(): unknown {
     return this.#exports;
   }
 
@@ -273,7 +273,7 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * `render` reads current state via `model.get`; change listeners
    * observe only subsequent changes, matching Jupyter semantics.
    */
-  async createView(
+  public async createView(
     target: { el: HTMLElement },
     options: { signal: AbortSignal },
   ): Promise<void> {
@@ -346,7 +346,7 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * Destroy this generation, running initialize/render cleanups and
    * clearing listeners registered through its model proxies.
    */
-  async destroy(): Promise<void> {
+  public async destroy(): Promise<void> {
     Logger.debug("[WidgetBinding] Destroying binding generation");
     this.#controller.abort();
     await Promise.allSettled(this.#viewTasks);

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -19,7 +19,7 @@ function truncateSrc(src: string): string {
   return src.length > MAX_LENGTH ? `${src.slice(0, MAX_LENGTH)}…` : src;
 }
 
-const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
+const ImageComparisonContent: React.FC<ImageComparisonData> = ({
   beforeSrc,
   afterSrc,
   value,
@@ -31,12 +31,8 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
     () => new Set(),
   );
 
-  React.useEffect(() => {
-    setFailedSrcs(new Set());
-  }, [beforeSrc, afterSrc]);
-
   const handleError = React.useCallback((src: string) => {
-    setFailedSrcs((prev) => new Set(prev).add(src));
+    setFailedSrcs((previous) => new Set(previous).add(src));
   }, []);
 
   const containerStyle: React.CSSProperties = {
@@ -106,4 +102,9 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   );
 };
 
+const ImageComparisonComponent: React.FC<ImageComparisonData> = (props) => {
+  const sourceKey = JSON.stringify([props.beforeSrc, props.afterSrc]);
+  return <ImageComparisonContent key={sourceKey} {...props} />;
+};
+
 export default ImageComparisonComponent;

package/src/plugins/impl/matplotlib/MatplotlibPlugin.tsx

@@ -11,9 +11,9 @@ import {
 } from "./matplotlib-renderer";
 
 export class MatplotlibPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-matplotlib";
+  public tagName = "marimo-matplotlib";
 
-  validator = z.object({
+  public validator = z.object({
     chartBase64: z.string(),
     xBounds: z.tuple([z.number(), z.number()]),
     yBounds: z.tuple([z.number(), z.number()]),
@@ -28,7 +28,7 @@ export class MatplotlibPlugin implements IPlugin<T, Data> {
     yScale: z.enum(["linear", "log"]).default("linear"),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <MatplotlibComponent
         {...props.data}

package/src/plugins/impl/matplotlib/__tests__/matplotlib-renderer.test.ts

@@ -228,8 +228,8 @@ function stubSyncImage() {
   vi.stubGlobal(
     "Image",
     class {
-      onload: (() => void) | null = null;
-      set src(_value: string) {
+      public onload: (() => void) | null = null;
+      public set src(_value: string) {
         this.onload?.();
       }
     },

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -284,7 +284,7 @@ export class MatplotlibRenderer {
   /** The devicePixelRatio the canvas buffer was last sized with. */
   #backingDpr = 1;
 
-  constructor(
+  public constructor(
     container: HTMLDivElement,
     options: { state: MatplotlibState; signal: AbortSignal },
   ) {
@@ -396,7 +396,7 @@ export class MatplotlibRenderer {
     mq.addEventListener("change", onChange, { once: true, signal });
   }
 
-  update(state: MatplotlibState): void {
+  public update(state: MatplotlibState): void {
     const prev = this.#state;
     this.#state = state;
 

package/src/plugins/impl/mpl-interactive/mpl-websocket-shim.ts

@@ -10,14 +10,14 @@
  *   - onopen / onmessage / onclose callbacks
  */
 export class MplCommWebSocket {
-  readyState: number = WebSocket.OPEN;
+  public readyState: number = WebSocket.OPEN;
   private sendFn: (msg: unknown) => void;
 
-  onopen: (() => void) | null = null;
-  onmessage: ((evt: MessageEvent) => void) | null = null;
-  onclose: (() => void) | null = null;
+  public onopen: (() => void) | null = null;
+  public onmessage: ((evt: MessageEvent) => void) | null = null;
+  public onclose: (() => void) | null = null;
 
-  constructor(sendFn: (msg: unknown) => void) {
+  public constructor(sendFn: (msg: unknown) => void) {
     this.sendFn = sendFn;
   }
 
@@ -27,7 +27,7 @@ export class MplCommWebSocket {
    * socket instance stays bound to mpl.js (which wires `onopen`/`onmessage`
    * onto it at construction); only the comm behind it changes.
    */
-  setSendHandler(sendFn: (msg: unknown) => void): void {
+  public setSendHandler(sendFn: (msg: unknown) => void): void {
     this.sendFn = sendFn;
   }
 
@@ -35,14 +35,14 @@ export class MplCommWebSocket {
    * Called by mpl.js to send a message to the backend.
    * mpl.js always sends JSON strings.
    */
-  send(data: string): void {
+  public send(data: string): void {
     this.sendFn(JSON.parse(data));
   }
 
   /**
    * Called when the backend pushes a JSON message via the model custom event.
    */
-  receiveJson(data: unknown): void {
+  public receiveJson(data: unknown): void {
     this.onmessage?.(
       new MessageEvent("message", { data: JSON.stringify(data) }),
     );
@@ -51,7 +51,7 @@ export class MplCommWebSocket {
   /**
    * Called when the backend pushes binary data (PNG render) via model custom event.
    */
-  receiveBinary(buffer: DataView): void {
+  public receiveBinary(buffer: DataView): void {
     const ab = buffer.buffer.slice(
       buffer.byteOffset,
       buffer.byteOffset + buffer.byteLength,
@@ -60,7 +60,7 @@ export class MplCommWebSocket {
     this.onmessage?.(new MessageEvent("message", { data: blob }));
   }
 
-  close(): void {
+  public close(): void {
     this.readyState = WebSocket.CLOSED;
     this.onclose?.();
   }

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

@@ -60,12 +60,12 @@ export class EventBuffer<T> {
   private processEvents: () => void;
   private blockDuration: number;
 
-  constructor(processEvents: () => void, blockDuration = 200) {
+  public constructor(processEvents: () => void, blockDuration = 200) {
     this.processEvents = processEvents;
     this.blockDuration = blockDuration;
   }
 
-  add(event: T) {
+  public add(event: T) {
     this.buffer.push(event);
     this.flush();
   }
@@ -90,15 +90,15 @@ export class EventBuffer<T> {
     }, this.blockDuration);
   }
 
-  size() {
+  public size() {
     return this.buffer.length;
   }
 
-  clear() {
+  public clear() {
     this.buffer = [];
   }
 
-  getAndClear() {
+  public getAndClear() {
     const events = this.buffer;
     this.buffer = [];
     return events;

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -55,9 +55,9 @@ type T =
   | undefined;
 
 export class PlotlyPlugin implements IPlugin<T, Data> {
-  tagName = "marimo-plotly";
+  public tagName = "marimo-plotly";
 
-  validator = z.object({
+  public validator = z.object({
     figure: z
       .object({})
       .passthrough()
@@ -65,7 +65,7 @@ export class PlotlyPlugin implements IPlugin<T, Data> {
     config: z.object({}).passthrough(),
   });
 
-  render(props: IPluginProps<T, Data>): JSX.Element {
+  public render(props: IPluginProps<T, Data>): JSX.Element {
     return (
       <PlotlyComponent
         {...props.data}

package/src/plugins/impl/vega/VegaPlugin.tsx

@@ -12,9 +12,9 @@ import React, { type JSX } from "react";
 const LazyVegaComponent = React.lazy(() => import("./vega-component"));
 
 export class VegaPlugin implements IPlugin<VegaComponentState, Data> {
-  tagName = "marimo-vega";
+  public tagName = "marimo-vega";
 
-  validator = z.object({
+  public validator = z.object({
     spec: z
       .object({})
       .passthrough()
@@ -26,7 +26,7 @@ export class VegaPlugin implements IPlugin<VegaComponentState, Data> {
     embedOptions: z.object({}).passthrough().default({}),
   });
 
-  render(props: IPluginProps<VegaComponentState, Data>): JSX.Element {
+  public render(props: IPluginProps<VegaComponentState, Data>): JSX.Element {
     return (
       <LazyVegaComponent
         value={props.value}

package/src/plugins/impl/vega/__tests__/use-vega-container-remeasure.test.ts

@@ -10,27 +10,27 @@ describe("useVegaContainerRemeasure", () => {
   let OriginalResizeObserver: typeof ResizeObserver;
 
   class FakeResizeObserver {
-    callback: ResizeObserverCallback;
-    el: Element | null = null;
+    public callback: ResizeObserverCallback;
+    public el: Element | null = null;
 
-    constructor(callback: ResizeObserverCallback) {
+    public constructor(callback: ResizeObserverCallback) {
       this.callback = callback;
       observers.push(this);
     }
 
-    observe(el: Element) {
+    public observe(el: Element) {
       this.el = el;
     }
 
-    disconnect() {
+    public disconnect() {
       this.el = null;
     }
 
-    unobserve() {
+    public unobserve() {
       this.el = null;
     }
 
-    trigger(width: number) {
+    public trigger(width: number) {
       this.callback(
         [
           {

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

@@ -1,7 +1,22 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
-import { getContainerWidth } from "../utils";
+import { getContainerWidth, getVegaFieldTypes } from "../utils";
+
+describe("getVegaFieldTypes", () => {
+  it("preserves date strings unless the caller requests date parsing", () => {
+    expect(getVegaFieldTypes({ day: "date", timestamp: "datetime" })).toEqual({
+      day: "string",
+      timestamp: "date",
+    });
+    expect(
+      getVegaFieldTypes(
+        { day: "date", timestamp: "datetime" },
+        { parseDates: true },
+      ),
+    ).toEqual({ day: "date", timestamp: "date" });
+  });
+});
 
 describe("getContainerWidth", () => {
   it('should return "container" when spec width is "container"', () => {

package/src/plugins/impl/vega/__tests__/vega.test.ts

@@ -13,6 +13,43 @@ const { ZERO_WIDTH_SPACE, replacePeriodsInColumnNames, uniquifyColumnNames } =
   exportedForTesting;
 
 describe("vega loader", () => {
+  it("parses infinities only in explicitly numeric CSV fields", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue(
+      "value,label,id\ninf,inf,1\n-inf,-inf,2\n+inf,+inf,3\n2.5,002.5,4\n,,5\nNaN,NaN,6\n",
+    );
+
+    const data = await vegaLoadData("chart.csv", {
+      type: "csv",
+      parse: { value: "number", label: "string", id: "integer" },
+    });
+
+    expect(data).toEqual([
+      { value: Infinity, label: "inf", id: 1 },
+      { value: -Infinity, label: "-inf", id: 2 },
+      { value: Infinity, label: "+inf", id: 3 },
+      { value: 2.5, label: "002.5", id: 4 },
+      { value: null, label: null, id: 5 },
+      { value: Number.NaN, label: "NaN", id: 6 },
+    ]);
+  });
+
+  it("preserves the table's large integer and infinity handling", async () => {
+    vi.spyOn(vegaLoader, "load").mockResolvedValue(
+      "id,value\n9007199254740993,inf\n9007199254740995,-inf\n",
+    );
+
+    const data = await vegaLoadData(
+      "table.csv",
+      { type: "csv", parse: { id: "integer", value: "number" } },
+      { handleBigIntAndNumberLike: true },
+    );
+
+    expect(data).toEqual([
+      { id: BigInt("9007199254740993"), value: "inf" },
+      { id: BigInt("9007199254740995"), value: "-inf" },
+    ]);
+  });
+
   it("should parse csv data with dates", async () => {
     const csvData = `
 active,username,id

package/src/plugins/impl/vega/loader.ts

@@ -16,6 +16,26 @@ const previousNumberParser = typeParsers.number;
 const previousDateParser = typeParsers.date;
 const previousBooleanParser = typeParsers.boolean;
 
+const NUMBER_MIDDLEWARE: Middleware = () => {
+  const parseNumber = (value: string) => {
+    if (value === "inf" || value === "+inf") {
+      return Number.POSITIVE_INFINITY;
+    }
+    if (value === "-inf") {
+      return Number.NEGATIVE_INFINITY;
+    }
+    return previousNumberParser(value);
+  };
+
+  typeParsers.integer = parseNumber;
+  typeParsers.number = parseNumber;
+
+  return () => {
+    typeParsers.integer = previousIntegerParser;
+    typeParsers.number = previousNumberParser;
+  };
+};
+
 const BIG_INT_MIDDLEWARE: Middleware = () => {
   // Custom parser to:
   // - handle BigInt
@@ -159,6 +179,8 @@ export async function vegaLoadData<T = object>(
   const middleware: Middleware[] = [DATE_MIDDLEWARE];
   if (handleBigIntAndNumberLike) {
     middleware.push(BIG_INT_MIDDLEWARE);
+  } else {
+    middleware.push(NUMBER_MIDDLEWARE);
   }
 
   let unsubscribes: Unsubscribe[] = [];
@@ -216,7 +238,7 @@ export async function vegaLoadData<T = object>(
 
     // Apply middleware
     unsubscribes = middleware.map((m) => m());
-    // Always set parse to auto for csv data, to be able to parse dates and floats
+    // CSV defaults to inference when no explicit column types are available.
     const results = isCsv
       ? // csv -> json
         read(csvOrJsonData, {