@marimo-team/islands 0.23.12-dev9 → 0.23.13-dev0

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

@@ -9,7 +9,8 @@ import { MODEL_MANAGER, Model } from "../model";
 import type { WidgetModelId } from "../types";
 import { BINDING_MANAGER } from "../widget-binding";
 
-const { LoadedSlot } = visibleForTesting;
+const { LoadedSlot, isAnyWidgetModule, getInvalidAnyWidgetModuleError } =
+  visibleForTesting;
 
 // Helper to create typed model IDs for tests
 const asModelId = (id: string): WidgetModelId => id as WidgetModelId;
@@ -115,4 +116,106 @@ describe("LoadedSlot", () => {
       expect(newMockWidget.render).toHaveBeenCalled();
     });
   });
+
+  it("should hydrate view state even when listener attaches late", async () => {
+    mockModel = new Model(
+      { count: 8 },
+      {
+        sendUpdate: vi.fn().mockResolvedValue(undefined),
+        sendCustomMessage: vi.fn().mockResolvedValue(undefined),
+      },
+    );
+    MODEL_MANAGER.set(modelId, mockModel);
+
+    const lateListenerWidget = {
+      initialize: vi.fn(),
+      render: vi.fn(({ model, el }) => {
+        // Simulate a widget view that starts with a local default and
+        // relies on change events for hydration.
+        el.textContent = "count is 5";
+        const onCount = () => {
+          el.textContent = `count is ${model.get("count")}`;
+        };
+        model.on("change:count", onCount);
+        return () => model.off("change:count", onCount);
+      }),
+    };
+
+    const { container } = render(
+      <LoadedSlot {...mockProps} widget={lateListenerWidget} />,
+    );
+
+    await waitFor(() => {
+      expect(lateListenerWidget.render).toHaveBeenCalled();
+      expect(container.textContent).toContain("count is 8");
+    });
+  });
+});
+
+describe("isAnyWidgetModule", () => {
+  it("should accept a default object with render", () => {
+    expect(isAnyWidgetModule({ default: { render: () => undefined } })).toBe(
+      true,
+    );
+  });
+
+  it("should accept a default factory function", () => {
+    expect(
+      isAnyWidgetModule({ default: async () => ({ render: () => {} }) }),
+    ).toBe(true);
+  });
+
+  it("should reject legacy named render exports", () => {
+    expect(isAnyWidgetModule({ render: () => undefined })).toBe(false);
+  });
+});
+
+describe("getInvalidAnyWidgetModuleError", () => {
+  const jsUrl = "./@file/widget.js";
+
+  it("should explain legacy named render exports", () => {
+    const error = getInvalidAnyWidgetModuleError(
+      { render: () => undefined },
+      jsUrl,
+    );
+    expect(error.message).toContain("named exports (`render`)");
+    expect(error.message).toContain("`export default { render }`");
+    expect(error.message).toContain("not `export function render`");
+  });
+
+  it("should explain legacy named initialize exports", () => {
+    const error = getInvalidAnyWidgetModuleError(
+      { initialize: () => undefined },
+      jsUrl,
+    );
+    expect(error.message).toContain("named exports (`initialize`)");
+    expect(error.message).toContain("`export default { initialize }`");
+    expect(error.message).toContain("not `export function initialize`");
+  });
+
+  it("should avoid nested backticks for multi-hook named exports", () => {
+    const error = getInvalidAnyWidgetModuleError(
+      { render: () => undefined, initialize: () => undefined },
+      jsUrl,
+    );
+    expect(error.message).toContain(
+      "`export default { render, initialize }` (not `named export function ...`).",
+    );
+    expect(error.message).not.toContain("`named `export");
+  });
+
+  it("should explain a missing default export", () => {
+    expect(getInvalidAnyWidgetModuleError({}, jsUrl).message).toContain(
+      "missing a default export",
+    );
+    expect(getInvalidAnyWidgetModuleError(null, jsUrl).message).toContain(
+      "missing a default export",
+    );
+  });
+
+  it("should explain an invalid default export", () => {
+    const error = getInvalidAnyWidgetModuleError({ default: {} }, jsUrl);
+    expect(error.message).toContain("invalid default export");
+    expect(error.message).toContain("https://anywidget.dev/en/afm/");
+  });
 });

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

@@ -272,6 +272,25 @@ describe("Model", () => {
     });
   });
 
+  describe("reemitState", () => {
+    it("should emit change events for current values without state changes", async () => {
+      const onFoo = vi.fn();
+      const onBar = vi.fn();
+      const onAny = vi.fn();
+
+      model.on("change:foo", onFoo);
+      model.on("change:bar", onBar);
+      model.on("change", onAny);
+
+      getMarimoInternal(model).reemitState();
+      await TestUtils.nextTick();
+
+      expect(onFoo).toHaveBeenCalledWith("test");
+      expect(onBar).toHaveBeenCalledWith(123);
+      expect(onAny).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe("emitCustomMessage", () => {
     it("should handle custom messages", () => {
       const callback = vi.fn();

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

@@ -112,6 +112,10 @@ interface MarimoInternalApi<T extends ModelState> {
    * Update model state and emit change events for any differences.
    */
   updateAndEmitDiffs: (value: T) => void;
+  /**
+   * Re-emit current state as change events.
+   */
+  reemitState: () => void;
   /**
    * Emit a custom message to listeners.
    */
@@ -160,6 +164,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
    */
   [marimoSymbol]: MarimoInternalApi<T> = {
     updateAndEmitDiffs: (value: T) => this.#updateAndEmitDiffs(value),
+    reemitState: () => this.#reemitState(),
     emitCustomMessage: (
       message: Extract<AnyWidgetMessage, { method: "custom" }>,
       buffers?: readonly DataView[],
@@ -269,6 +274,16 @@ export class Model<T extends ModelState> implements AnyModel<T> {
     });
   }
 
+  #reemitState() {
+    for (const [key, value] of Object.entries(this.#data) as [
+      keyof T & string,
+      T[keyof T],
+    ][]) {
+      this.#emit(`change:${key}`, value);
+    }
+    this.#emitAnyChange();
+  }
+
   /**
    * When receiving a message from the backend.
    * We want to notify all listeners with `msg:custom`

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

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { hasFunctionProperty, isRecord } from "../records";
+
+describe("isRecord", () => {
+  it("should accept plain objects", () => {
+    expect(isRecord({})).toBe(true);
+    expect(isRecord({ a: 1 })).toBe(true);
+  });
+
+  it("should reject null, arrays, and primitives", () => {
+    expect(isRecord(null)).toBe(false);
+    expect(isRecord([])).toBe(false);
+    expect(isRecord("x")).toBe(false);
+    expect(isRecord(1)).toBe(false);
+  });
+});
+
+describe("hasFunctionProperty", () => {
+  it("should detect function properties", () => {
+    expect(hasFunctionProperty({ render: () => undefined }, "render")).toBe(
+      true,
+    );
+    expect(hasFunctionProperty({ render: 1 }, "render")).toBe(false);
+  });
+});

package/src/utils/records.ts

@@ -0,0 +1,12 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+export function hasFunctionProperty(
+  record: Record<string, unknown>,
+  key: string,
+): boolean {
+  return typeof record[key] === "function";
+}