@marimo-team/islands 0.22.4-dev2 → 0.22.4-dev3

package/dist/main.js

@@ -36594,12 +36594,13 @@ ${E}`,
   }
   const AnyWidgetPlugin = createPlugin("marimo-anywidget").withData(object({
     jsUrl: string(),
-    jsHash: string()
+    jsHash: string(),
+    modelId: string().transform((e) => e)
   })).withFunctions({}).renderer((e) => (0, import_jsx_runtime.jsx)(AnyWidgetSlot, {
     ...e
   }));
   var AnyWidgetSlot = (e) => {
-    let r = (0, import_compiler_runtime$91.c)(14), { jsUrl: c, jsHash: d } = e.data, { model_id: f } = e.value, h = e.host, _;
+    let r = (0, import_compiler_runtime$91.c)(14), { jsUrl: c, jsHash: d, modelId: f } = e.data, h = e.host, _;
     r[0] !== d || r[1] !== c ? (_ = {
       jsUrl: c,
       jsHash: d
@@ -65540,7 +65541,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.4-dev2"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.4-dev3"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

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

@@ -21,17 +21,19 @@ import { BINDING_MANAGER, WIDGET_DEF_REGISTRY } from "./widget-binding";
 interface Data {
   jsUrl: string;
   jsHash: string;
+  modelId: WidgetModelId;
 }
 
 type AnyWidgetState = ModelState;
 
 /**
- * Initial value is a model_id reference.
- * The backend sends just { model_id: string } and the frontend
- * retrieves the actual state from the 'open' message.
+ * Value payload sent by the frontend on state updates.
+ *
+ * The initial value from the backend is empty — `model_id` is passed
+ * via immutable data attributes (`args`) so it survives value overwrites.
  */
 interface ModelIdRef {
-  model_id: WidgetModelId;
+  model_id?: WidgetModelId;
 }
 
 export function useAnyWidgetModule(opts: { jsUrl: string; jsHash: string }) {
@@ -117,14 +119,14 @@ export const AnyWidgetPlugin = createPlugin<ModelIdRef>("marimo-anywidget")
     z.object({
       jsUrl: z.string(),
       jsHash: z.string(),
+      modelId: z.string().transform((v) => v as WidgetModelId),
     }),
   )
   .withFunctions({})
   .renderer((props) => <AnyWidgetSlot {...props} />);
 
 const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
-  const { jsUrl, jsHash } = props.data;
-  const { model_id: modelId } = props.value;
+  const { jsUrl, jsHash, modelId } = props.data;
   const host = props.host as HTMLElementNotDerivedFromRef;
 
   const { jsModule, error } = useAnyWidgetModule({ jsUrl, jsHash });

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

@@ -29,6 +29,7 @@ describe("LoadedSlot", () => {
     data: {
       jsUrl: "http://example.com/widget.js",
       jsHash: "abc123",
+      modelId: modelId,
     },
     host: document.createElement(
       "div",
@@ -67,6 +68,30 @@ describe("LoadedSlot", () => {
     });
   });
 
+  it("should not remount when value update drops model_id", async () => {
+    // Regression: when the frontend sends a state update (e.g. {zoom_level: 0}),
+    // it overwrites the UIElement value that originally held {model_id: "..."}.
+    // The key must stay stable because modelId comes from data, not value.
+    const { container, rerender } = render(<LoadedSlot {...mockProps} />);
+
+    await waitFor(() => {
+      expect(mockWidget.render).toHaveBeenCalledTimes(1);
+    });
+
+    const divBefore = container.querySelector("div");
+
+    // Simulate a value update that does NOT include model_id
+    // (this is what happens when the widget sends trait state)
+    rerender(<LoadedSlot {...mockProps} />);
+
+    await waitFor(() => {
+      // The div should be the same DOM node (no remount)
+      expect(container.querySelector("div")).toBe(divBefore);
+      // render should not be called again (no remount)
+      expect(mockWidget.render).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it("should re-run widget when widget prop changes", async () => {
     const { rerender } = render(<LoadedSlot {...mockProps} />);