@marimo-team/frontend 0.20.5-dev28 → 0.20.5-dev33

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

@@ -0,0 +1,110 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it, vi } from "vitest";
+import { MplCommWebSocket } from "../mpl-websocket-shim";
+
+describe("MplCommWebSocket", () => {
+  it("starts in OPEN state", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    expect(ws.readyState).toBe(WebSocket.OPEN);
+  });
+
+  it("send() parses JSON and calls sendFn with parsed object", () => {
+    const sendFn = vi.fn();
+    const ws = new MplCommWebSocket(sendFn);
+
+    ws.send(JSON.stringify({ type: "resize", width: 640, height: 480 }));
+
+    expect(sendFn).toHaveBeenCalledOnce();
+    expect(sendFn).toHaveBeenCalledWith({
+      type: "resize",
+      width: 640,
+      height: 480,
+    });
+  });
+
+  it("receiveJson() dispatches MessageEvent with JSON string data", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    const handler = vi.fn();
+    ws.onmessage = handler;
+
+    ws.receiveJson({ type: "figure_size", size: [640, 480] });
+
+    expect(handler).toHaveBeenCalledOnce();
+    const event: MessageEvent = handler.mock.calls[0][0];
+    expect(event).toBeInstanceOf(MessageEvent);
+    expect(event.type).toBe("message");
+    expect(JSON.parse(event.data as string)).toEqual({
+      type: "figure_size",
+      size: [640, 480],
+    });
+  });
+
+  it("receiveJson() is a no-op if onmessage is not set", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    ws.receiveJson({ type: "test" });
+    expect(ws.onmessage).toBeNull();
+  });
+
+  it("receiveBinary() dispatches MessageEvent with Blob data", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    const handler = vi.fn();
+    ws.onmessage = handler;
+
+    // Simulate a PNG-like binary buffer
+    const bytes = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0, 1, 2, 3]);
+    const dv = new DataView(bytes.buffer);
+
+    ws.receiveBinary(dv);
+
+    expect(handler).toHaveBeenCalledOnce();
+    const event: MessageEvent = handler.mock.calls[0][0];
+    expect(event).toBeInstanceOf(MessageEvent);
+    expect(event.data).toBeInstanceOf(Blob);
+    expect((event.data as Blob).size).toBe(8);
+  });
+
+  it("receiveBinary() handles DataView with offset", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    const handler = vi.fn();
+    ws.onmessage = handler;
+
+    // Create a DataView that's a slice of a larger buffer
+    const fullBuffer = new ArrayBuffer(16);
+    const fullView = new Uint8Array(fullBuffer);
+    fullView.set([0, 0, 0, 0, 0x89, 0x50, 0x4e, 0x47, 0, 1, 2, 3, 0, 0, 0, 0]);
+    const dv = new DataView(fullBuffer, 4, 8);
+
+    ws.receiveBinary(dv);
+
+    expect(handler).toHaveBeenCalledOnce();
+    const blob = handler.mock.calls[0][0].data as Blob;
+    expect(blob.size).toBe(8);
+  });
+
+  it("close() sets readyState to CLOSED and fires onclose", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    const closeHandler = vi.fn();
+    ws.onclose = closeHandler;
+
+    ws.close();
+
+    expect(ws.readyState).toBe(WebSocket.CLOSED);
+    expect(closeHandler).toHaveBeenCalledOnce();
+  });
+
+  it("close() does not throw if onclose is not set", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    ws.close();
+    expect(ws.readyState).toBe(WebSocket.CLOSED);
+  });
+
+  it("onopen can be triggered externally", () => {
+    const ws = new MplCommWebSocket(vi.fn());
+    const openHandler = vi.fn();
+    ws.onopen = openHandler;
+
+    ws.onopen?.();
+
+    expect(openHandler).toHaveBeenCalledOnce();
+  });
+});

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

@@ -0,0 +1,57 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Fake WebSocket that routes messages through MarimoComm / MODEL_MANAGER
+ * instead of a real network WebSocket.
+ *
+ * mpl.js expects a WebSocket-like object with:
+ *   - readyState
+ *   - send(data: string)
+ *   - onopen / onmessage / onclose callbacks
+ */
+export class MplCommWebSocket {
+  readyState: number = WebSocket.OPEN;
+  private sendFn: (msg: unknown) => void;
+
+  onopen: (() => void) | null = null;
+  onmessage: ((evt: MessageEvent) => void) | null = null;
+  onclose: (() => void) | null = null;
+
+  constructor(sendFn: (msg: unknown) => void) {
+    this.sendFn = sendFn;
+  }
+
+  /**
+   * Called by mpl.js to send a message to the backend.
+   * mpl.js always sends JSON strings.
+   */
+  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 {
+    this.onmessage?.(
+      new MessageEvent("message", { data: JSON.stringify(data) }),
+    );
+  }
+
+  /**
+   * Called when the backend pushes binary data (PNG render) via model custom event.
+   */
+  receiveBinary(buffer: DataView): void {
+    const ab = buffer.buffer.slice(
+      buffer.byteOffset,
+      buffer.byteOffset + buffer.byteLength,
+    ) as ArrayBuffer;
+    const blob = new Blob([ab]);
+    this.onmessage?.(new MessageEvent("message", { data: blob }));
+  }
+
+  close(): void {
+    this.readyState = WebSocket.CLOSED;
+    this.onclose?.();
+  }
+}

package/src/plugins/plugins.ts

@@ -26,6 +26,7 @@ import { MatrixPlugin } from "./impl/MatrixPlugin";
 import { MicrophonePlugin } from "./impl/MicrophonePlugin";
 import { MultiselectPlugin } from "./impl/MultiselectPlugin";
 import { MatplotlibPlugin } from "./impl/matplotlib/MatplotlibPlugin";
+import { MplInteractivePlugin } from "./impl/mpl-interactive/MplInteractivePlugin";
 import { NumberPlugin } from "./impl/NumberPlugin";
 import { PanelPlugin } from "./impl/panel/PanelPlugin";
 import { PlotlyPlugin } from "./impl/plotly/PlotlyPlugin";
@@ -92,6 +93,7 @@ export const UI_PLUGINS: IPlugin<any, unknown>[] = [
   AnyWidgetPlugin,
   DataEditorPlugin,
   PanelPlugin,
+  MplInteractivePlugin,
 ];
 
 // List of output / layout plugins