@marimo-team/islands 0.19.9-dev0 → 0.19.9-dev10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.9-dev0",
+  "version": "0.19.9-dev10",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -4,9 +4,6 @@
 import type { AnyWidget } from "@anywidget/types";
 import { useEffect, useRef } from "react";
 import { z } from "zod";
-import { asRemoteURL } from "@/core/runtime/config";
-import { resolveVirtualFileURL } from "@/core/static/files";
-import { isStaticNotebook } from "@/core/static/static-state";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
@@ -14,8 +11,9 @@ import type { IPluginProps } from "@/plugins/types";
 import { prettyError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
 import { ErrorBanner } from "../common/error-banner";
-import { getMarimoInternal, MODEL_MANAGER, type Model } from "./model";
+import { MODEL_MANAGER, type Model } from "./model";
 import type { ModelState, WidgetModelId } from "./types";
+import { BINDING_MANAGER, WIDGET_DEF_REGISTRY } from "./widget-binding";
 
 /**
  * AnyWidget asset data
@@ -48,12 +46,7 @@ export function useAnyWidgetModule(opts: { jsUrl: string; jsHash: string }) {
     error,
     refetch,
   } = useAsyncData(async () => {
-    let url = asRemoteURL(jsUrl).toString();
-    // In static notebooks, resolve virtual files to blob URLs for import()
-    if (isStaticNotebook()) {
-      url = resolveVirtualFileURL(url);
-    }
-    return await import(/* @vite-ignore */ url);
+    return await WIDGET_DEF_REGISTRY.getModule(jsUrl, jsHash);
     // Re-render on jsHash change (which is a hash of the contents of the file)
     // instead of a jsUrl change because URLs may change without the contents
     // actually changing (and we don't want to re-render on every change).
@@ -66,6 +59,7 @@ export function useAnyWidgetModule(opts: { jsUrl: string; jsHash: string }) {
   const hasError = Boolean(error);
   useEffect(() => {
     if (hasError && jsUrl) {
+      WIDGET_DEF_REGISTRY.invalidate(jsHash);
       refetch();
     }
   }, [hasError, jsUrl]);
@@ -180,6 +174,7 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
 async function runAnyWidgetModule<T extends AnyWidgetState>(
   widgetDef: AnyWidget<T>,
   model: Model<T>,
+  modelId: WidgetModelId,
   el: HTMLElement,
   signal: AbortSignal,
 ): Promise<void> {
@@ -187,7 +182,8 @@ async function runAnyWidgetModule<T extends AnyWidgetState>(
   el.innerHTML = "";
 
   try {
-    const render = await getMarimoInternal(model).resolveWidget(widgetDef);
+    const binding = BINDING_MANAGER.getOrCreate(modelId);
+    const render = await binding.bind(widgetDef, model);
     await render(el, signal);
   } catch (error) {
     Logger.error("Error rendering anywidget", error);
@@ -231,7 +227,13 @@ const LoadedSlot = <T extends AnyWidgetState>({
       return;
     }
     const controller = new AbortController();
-    runAnyWidgetModule(widget, model, htmlRef.current, controller.signal);
+    runAnyWidgetModule(
+      widget,
+      model,
+      modelId,
+      htmlRef.current,
+      controller.signal,
+    );
     return () => controller.abort();
     // We re-run the widget when the modelId changes, which means the cell
     // that created the Widget has been re-run.

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -1,12 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { render, waitFor } from "@testing-library/react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { TestUtils } from "@/__tests__/test-helpers";
 import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { visibleForTesting } from "../AnyWidgetPlugin";
 import { MODEL_MANAGER, Model } from "../model";
 import type { WidgetModelId } from "../types";
+import { BINDING_MANAGER } from "../widget-binding";
 
 const { LoadedSlot } = visibleForTesting;
 
@@ -19,14 +20,6 @@ const mockWidget = {
   render: vi.fn(),
 };
 
-vi.mock("../AnyWidgetPlugin", async () => {
-  const originalModule = await vi.importActual("../AnyWidgetPlugin");
-  return {
-    ...originalModule,
-    runAnyWidgetModule: vi.fn(),
-  };
-});
-
 describe("LoadedSlot", () => {
   const modelId = asModelId("test-model-id");
   let mockModel: Model<{ count: number }>;
@@ -56,6 +49,10 @@ describe("LoadedSlot", () => {
     MODEL_MANAGER.set(modelId, mockModel);
   });
 
+  afterEach(() => {
+    BINDING_MANAGER.destroy(modelId);
+  });
+
   it("should render a div with ref", () => {
     const { container } = render(<LoadedSlot {...mockProps} />);
     expect(container.querySelector("div")).not.toBeNull();

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

@@ -16,6 +16,7 @@ import {
   visibleForTesting,
 } from "../model";
 import type { WidgetModelId } from "../types";
+import { BINDING_MANAGER } from "../widget-binding";
 
 const { ModelManager } = visibleForTesting;
 
@@ -376,4 +377,20 @@ describe("ModelManager", () => {
     });
     await expect(modelManager.get(testId)).rejects.toThrow();
   });
+
+  it("should destroy binding on close message", async () => {
+    const model = new Model({ count: 0 }, createMockComm());
+    modelManager.set(testId, model);
+
+    // Create a binding for this model
+    BINDING_MANAGER.getOrCreate(testId);
+    expect(BINDING_MANAGER.has(testId)).toBe(true);
+
+    await handleWidgetMessage(modelManager, {
+      model_id: testId,
+      message: { method: "close" },
+    });
+
+    expect(BINDING_MANAGER.has(testId)).toBe(false);
+  });
 });

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

@@ -0,0 +1,240 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Model } from "../model";
+import type { ModelState, WidgetModelId } from "../types";
+import { visibleForTesting } from "../widget-binding";
+
+const { WidgetDefRegistry, WidgetBinding, BindingManager } = visibleForTesting;
+
+// Helper to create typed model IDs for tests
+const asModelId = (id: string): WidgetModelId => id as WidgetModelId;
+
+function createMockComm() {
+  return {
+    sendUpdate: vi.fn().mockResolvedValue(undefined),
+    sendCustomMessage: vi.fn().mockResolvedValue(undefined),
+  };
+}
+
+describe("WidgetDefRegistry", () => {
+  let registry: InstanceType<typeof WidgetDefRegistry>;
+
+  beforeEach(() => {
+    registry = new WidgetDefRegistry();
+  });
+
+  it("should cache modules by jsHash and return same promise", () => {
+    // Two calls with same hash should return the exact same promise object
+    const promise1 = registry.getModule("http://localhost/widget.js", "hash1");
+    const promise2 = registry.getModule("http://localhost/widget.js", "hash1");
+    expect(promise1).toBe(promise2);
+    // Catch the unhandled rejection from the import() attempt
+    promise1.catch(() => undefined);
+  });
+
+  it("should deduplicate concurrent imports for the same hash", () => {
+    const promise1 = registry.getModule("http://localhost/a.js", "same-hash");
+    const promise2 = registry.getModule("http://localhost/b.js", "same-hash");
+    // Same hash means same promise, even with different URLs
+    expect(promise1).toBe(promise2);
+    promise1.catch(() => undefined);
+  });
+
+  it("should create different promises for different hashes", () => {
+    const promise1 = registry.getModule("http://localhost/a.js", "hash-a");
+    const promise2 = registry.getModule("http://localhost/b.js", "hash-b");
+    expect(promise1).not.toBe(promise2);
+    promise1.catch(() => undefined);
+    promise2.catch(() => undefined);
+  });
+
+  it("should invalidate cached modules", () => {
+    const promise1 = registry.getModule("http://localhost/a.js", "hash1");
+    promise1.catch(() => undefined);
+    registry.invalidate("hash1");
+    const promise2 = registry.getModule("http://localhost/a.js", "hash1");
+    promise2.catch(() => undefined);
+    expect(promise1).not.toBe(promise2);
+  });
+
+  it("should remove from cache on import failure so retry creates new promise", async () => {
+    const promise1 = registry.getModule("http://localhost/a.js", "fail-hash");
+    // The import will fail in Node (http: scheme not supported)
+    await expect(promise1).rejects.toThrow();
+    // After failure, cache should be cleared, so next call creates a new promise
+    const promise2 = registry.getModule("http://localhost/a.js", "fail-hash");
+    expect(promise1).not.toBe(promise2);
+    promise2.catch(() => undefined);
+  });
+});
+
+describe("WidgetBinding", () => {
+  let binding: InstanceType<typeof WidgetBinding>;
+  let model: Model<ModelState>;
+
+  beforeEach(() => {
+    binding = new WidgetBinding();
+    model = new Model<ModelState>({ count: 0 }, createMockComm());
+  });
+
+  it("should initialize once and return a render function", async () => {
+    const initCleanup = vi.fn();
+    const renderCleanup = vi.fn();
+    const widgetDef = {
+      initialize: vi.fn().mockResolvedValue(initCleanup),
+      render: vi.fn().mockResolvedValue(renderCleanup),
+    };
+
+    const renderFn = await binding.bind(widgetDef, model);
+    expect(widgetDef.initialize).toHaveBeenCalledTimes(1);
+    expect(typeof renderFn).toBe("function");
+
+    // Render into an element
+    const el = document.createElement("div");
+    const controller = new AbortController();
+    await renderFn(el, controller.signal);
+    expect(widgetDef.render).toHaveBeenCalledTimes(1);
+  });
+
+  it("should return cached render for same widget def", async () => {
+    const widgetDef = {
+      initialize: vi.fn(),
+      render: vi.fn(),
+    };
+
+    const render1 = await binding.bind(widgetDef, model);
+    const render2 = await binding.bind(widgetDef, model);
+    expect(render1).toBe(render2);
+    // Initialize should only be called once
+    expect(widgetDef.initialize).toHaveBeenCalledTimes(1);
+  });
+
+  it("should re-initialize on hot reload (different widget def)", async () => {
+    const cleanup1 = vi.fn();
+    const widgetDef1 = {
+      initialize: vi.fn().mockResolvedValue(cleanup1),
+      render: vi.fn(),
+    };
+
+    const widgetDef2 = {
+      initialize: vi.fn(),
+      render: vi.fn(),
+    };
+
+    const render1 = await binding.bind(widgetDef1, model);
+    const render2 = await binding.bind(widgetDef2, model);
+
+    expect(render1).not.toBe(render2);
+    expect(cleanup1).toHaveBeenCalledTimes(1); // Old binding cleaned up
+    expect(widgetDef2.initialize).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cleanup render on view signal abort", async () => {
+    const renderCleanup = vi.fn();
+    const widgetDef = {
+      initialize: vi.fn(),
+      render: vi.fn().mockResolvedValue(renderCleanup),
+    };
+
+    const renderFn = await binding.bind(widgetDef, model);
+    const el = document.createElement("div");
+    const viewController = new AbortController();
+    await renderFn(el, viewController.signal);
+
+    // Aborting the view signal should trigger render cleanup
+    viewController.abort();
+    expect(renderCleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cleanup everything on destroy", async () => {
+    const initCleanup = vi.fn();
+    const renderCleanup = vi.fn();
+    const widgetDef = {
+      initialize: vi.fn().mockResolvedValue(initCleanup),
+      render: vi.fn().mockResolvedValue(renderCleanup),
+    };
+
+    const renderFn = await binding.bind(widgetDef, model);
+    const el = document.createElement("div");
+    const viewController = new AbortController();
+    await renderFn(el, viewController.signal);
+
+    binding.destroy();
+    expect(initCleanup).toHaveBeenCalledTimes(1);
+    expect(renderCleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle widget def as a function", async () => {
+    const widget = {
+      initialize: vi.fn(),
+      render: vi.fn(),
+    };
+    const widgetDefFn = vi.fn().mockResolvedValue(widget);
+
+    await binding.bind(widgetDefFn, model);
+    expect(widgetDefFn).toHaveBeenCalledTimes(1);
+    expect(widget.initialize).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle widget with no initialize or render", async () => {
+    const widgetDef = {};
+    const renderFn = await binding.bind(widgetDef, model);
+    expect(typeof renderFn).toBe("function");
+
+    // Render should not throw
+    const el = document.createElement("div");
+    const controller = new AbortController();
+    await renderFn(el, controller.signal);
+  });
+});
+
+describe("BindingManager", () => {
+  let manager: InstanceType<typeof BindingManager>;
+
+  beforeEach(() => {
+    manager = new BindingManager();
+  });
+
+  it("should create bindings on demand", () => {
+    const modelId = asModelId("model-1");
+    expect(manager.has(modelId)).toBe(false);
+
+    const binding = manager.getOrCreate(modelId);
+    expect(binding).toBeDefined();
+    expect(manager.has(modelId)).toBe(true);
+  });
+
+  it("should return the same binding for the same model id", () => {
+    const modelId = asModelId("model-1");
+    const binding1 = manager.getOrCreate(modelId);
+    const binding2 = manager.getOrCreate(modelId);
+    expect(binding1).toBe(binding2);
+  });
+
+  it("should destroy and remove bindings", async () => {
+    const modelId = asModelId("model-1");
+    const binding = manager.getOrCreate(modelId);
+
+    const model = new Model<ModelState>({ count: 0 }, createMockComm());
+    const initCleanup = vi.fn();
+    const widgetDef = {
+      initialize: vi.fn().mockResolvedValue(initCleanup),
+      render: vi.fn(),
+    };
+    await binding.bind(widgetDef, model);
+
+    manager.destroy(modelId);
+    expect(manager.has(modelId)).toBe(false);
+    expect(initCleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle idempotent destroy", () => {
+    const modelId = asModelId("model-1");
+    manager.getOrCreate(modelId);
+
+    // Should not throw
+    manager.destroy(modelId);
+    manager.destroy(modelId);
+    expect(manager.has(modelId)).toBe(false);
+  });
+});