@marimo-team/frontend 0.19.8-dev3 → 0.19.8-dev5

package/package.json

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

package/src/core/islands/__tests__/bridge.test.ts

@@ -0,0 +1,241 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock browser APIs before any imports
+vi.stubGlobal(
+  "Worker",
+  vi.fn(() => ({
+    addEventListener: vi.fn(),
+    postMessage: vi.fn(),
+    terminate: vi.fn(),
+  })),
+);
+
+// Create a mock URL class that works as a constructor
+class MockURL {
+  href: string;
+  constructor(url: string, base?: string | URL) {
+    this.href = base ? `${base}/${url}` : url;
+  }
+  static createObjectURL = vi.fn(() => "blob:mock-url");
+  static revokeObjectURL = vi.fn();
+}
+vi.stubGlobal("URL", MockURL);
+
+// Mock the worker RPC before importing the bridge
+const mockBridge = vi.fn();
+const mockLoadPackages = vi.fn();
+
+vi.mock("@/core/wasm/rpc", () => ({
+  getWorkerRPC: () => ({
+    proxy: {
+      request: {
+        bridge: mockBridge,
+        loadPackages: mockLoadPackages,
+        startSession: vi.fn(),
+      },
+      send: {
+        consumerReady: vi.fn(),
+      },
+    },
+    addMessageListener: vi.fn(),
+  }),
+}));
+
+// Mock the parse module to avoid DOM dependencies
+vi.mock("../parse", () => ({
+  parseMarimoIslandApps: () => [],
+  createMarimoFile: vi.fn(),
+}));
+
+// Mock uuid to have predictable tokens
+vi.mock("@/utils/uuid", () => ({
+  generateUUID: () => "test-uuid-12345",
+}));
+
+// Mock getMarimoVersion
+vi.mock("@/core/meta/globals", () => ({
+  getMarimoVersion: () => "0.0.0-test",
+}));
+
+// Mock the jotai store
+vi.mock("@/core/state/jotai", () => ({
+  store: {
+    set: vi.fn(),
+  },
+}));
+
+// Now import the bridge class
+import { IslandsPyodideBridge } from "../bridge";
+
+describe("IslandsPyodideBridge", () => {
+  let bridge: IslandsPyodideBridge;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset the singleton by clearing the window property
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any)._marimo_private_IslandsPyodideBridge;
+    // Access the singleton - creates a fresh instance
+    bridge = IslandsPyodideBridge.INSTANCE;
+  });
+
+  afterEach(() => {
+    // Clean up singleton
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any)._marimo_private_IslandsPyodideBridge;
+  });
+
+  describe("sendComponentValues", () => {
+    it("should include type field and token in control request", async () => {
+      const request = {
+        objectIds: ["Hbol-0"],
+        values: [58],
+      };
+
+      await bridge.sendComponentValues(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "update-ui-element",
+          objectIds: ["Hbol-0"],
+          values: [58],
+          token: "test-uuid-12345",
+        },
+      });
+    });
+
+    it("should preserve all request properties", async () => {
+      const request = {
+        objectIds: ["slider-1", "slider-2"],
+        values: [10, 20],
+      };
+
+      await bridge.sendComponentValues(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: expect.objectContaining({
+          type: "update-ui-element",
+          objectIds: ["slider-1", "slider-2"],
+          values: [10, 20],
+        }),
+      });
+    });
+  });
+
+  describe("sendFunctionRequest", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        functionCallId: "call-123",
+        namespace: "test_namespace",
+        functionName: "my_function",
+        args: { x: 1, y: 2 },
+      };
+
+      await bridge.sendFunctionRequest(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "invoke-function",
+          functionCallId: "call-123",
+          namespace: "test_namespace",
+          functionName: "my_function",
+          args: { x: 1, y: 2 },
+        },
+      });
+    });
+  });
+
+  describe("sendRun", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        cellIds: ["cell-1", "cell-2"],
+        codes: ["print('hello')", "print('world')"],
+      };
+
+      await bridge.sendRun(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "execute-cells",
+          cellIds: ["cell-1", "cell-2"],
+          codes: ["print('hello')", "print('world')"],
+        },
+      });
+    });
+
+    it("should call loadPackages before putControlRequest", async () => {
+      const request = {
+        cellIds: ["cell-1"],
+        codes: ["import pandas"],
+      };
+
+      await bridge.sendRun(request);
+
+      // Verify loadPackages was called with joined codes
+      expect(mockLoadPackages).toHaveBeenCalledWith("import pandas");
+
+      // Verify order: loadPackages should be called before bridge
+      const loadPackagesCallOrder =
+        mockLoadPackages.mock.invocationCallOrder[0];
+      const bridgeCallOrder = mockBridge.mock.invocationCallOrder[0];
+      expect(loadPackagesCallOrder).toBeLessThan(bridgeCallOrder);
+    });
+  });
+
+  describe("sendModelValue", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        modelId: "widget-1",
+        message: {
+          state: { value: 42 },
+          bufferPaths: [],
+        },
+      };
+
+      await bridge.sendModelValue(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "update-widget-model",
+          modelId: "widget-1",
+          message: {
+            state: { value: 42 },
+            bufferPaths: [],
+          },
+        },
+      });
+    });
+  });
+
+  describe("control request message format", () => {
+    it("should always include the type field required by msgspec", async () => {
+      // Test all methods to ensure they include the type field
+      await bridge.sendComponentValues({ objectIds: [], values: [] });
+      await bridge.sendFunctionRequest({
+        functionCallId: "",
+        namespace: "",
+        functionName: "",
+        args: {},
+      });
+      await bridge.sendRun({ cellIds: [], codes: [] });
+      await bridge.sendModelValue({
+        modelId: "",
+        message: { state: {}, bufferPaths: [] },
+      });
+
+      // All calls should have the type field
+      const allCalls = mockBridge.mock.calls;
+      for (const call of allCalls) {
+        const payload = call[0].payload;
+        expect(payload).toHaveProperty("type");
+        expect(typeof payload.type).toBe("string");
+      }
+    });
+  });
+});

package/src/core/islands/bridge.ts

@@ -6,7 +6,8 @@ import { Deferred } from "@/utils/Deferred";
 import { throwNotImplemented } from "@/utils/functions";
 import type { JsonString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
-import type { NotificationPayload } from "../kernel/messages";
+import { generateUUID } from "@/utils/uuid";
+import type { CommandMessage, NotificationPayload } from "../kernel/messages";
 import { getMarimoVersion } from "../meta/globals";
 import type { EditRequests, RunRequests } from "../network/types";
 import { store } from "../state/jotai";
@@ -104,7 +105,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendComponentValues: RunRequests["sendComponentValues"] = async (
     request,
   ): Promise<null> => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "update-ui-element",
+      ...request,
+      token: generateUUID(),
+    });
     return null;
   };
 
@@ -117,18 +122,27 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendFunctionRequest: RunRequests["sendFunctionRequest"] = async (
     request,
   ): Promise<null> => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "invoke-function",
+      ...request,
+    });
     return null;
   };
 
   sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
     await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "execute-cells",
+      ...request,
+    });
     return null;
   };
 
   sendModelValue: RunRequests["sendModelValue"] = async (request) => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "update-widget-model",
+      ...request,
+    });
     return null;
   };
 
@@ -187,7 +201,9 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   clearCache = throwNotImplemented;
   getCacheInfo = throwNotImplemented;
 
-  private async putControlRequest(operation: object) {
+  // The kernel uses msgspec to parse control requests, which requires a 'type'
+  // field for discriminated union deserialization.
+  private async putControlRequest(operation: CommandMessage) {
     await this.rpc.proxy.request.bridge({
       functionName: "put_control_request",
       payload: operation,