@marimo-team/islands 0.22.4-dev1 → 0.22.4-dev11

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} />);
 

package/dist/assets/__vite-browser-external-WSlCcXn_.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-DUYMdbtA.js";var t=e(((e,t)=>{t.exports={}}));export default t();