@marimo-team/frontend 0.23.1-dev20 → 0.23.1-dev22

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-C9DyCFTe.js"></script>
+    <script type="module" crossorigin src="./assets/index-C7hH7rgL.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-D2MJg03u.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.1-dev20",
+  "version": "0.23.1-dev22",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -123,6 +123,7 @@
     "path-to-regexp": "^8.4.0",
     "plotly.js": "^3.3.1",
     "pyodide": "0.27.7",
+    "radix-ui": "1.4.3",
     "react-arborist": "^3.4.3",
     "react-aria": "3.47.0",
     "react-aria-components": "1.16.0",
@@ -159,8 +160,7 @@
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
     "web-vitals": "^4.2.4",
-    "zod": "^4.3.6",
-    "radix-ui": "1.4.3"
+    "zod": "^4.3.6"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -217,7 +217,7 @@
     "oxfmt": "^0.42.0",
     "oxlint": "^1.58.0",
     "postcss": "^8.5.6",
-    "postcss-plugin-namespace": "^0.0.3",
+    "postcss-prefix-selector": "^2.1.1",
     "react": "^19.2.4",
     "react-compiler-runtime": "19.1.0-rc.3",
     "react-dom": "^19.2.4",

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { components } from "@marimo-team/marimo-api";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
   cellId,
   requestId,
@@ -83,17 +83,7 @@ describe("IslandsPyodideBridge", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    // Reset the singleton by clearing the window property
-    // oxlint-disable-next-line typescript/no-explicit-any
-    delete (window as any)._marimo_private_IslandsPyodideBridge;
-    // Access the singleton - creates a fresh instance
-    bridge = IslandsPyodideBridge.INSTANCE;
-  });
-
-  afterEach(() => {
-    // Clean up singleton
-    // oxlint-disable-next-line typescript/no-explicit-any
-    delete (window as any)._marimo_private_IslandsPyodideBridge;
+    bridge = new IslandsPyodideBridge({ autoStartSessions: false });
   });
 
   describe("sendComponentValues", () => {

package/src/core/islands/__tests__/islands-harness.test.ts

@@ -0,0 +1,348 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, describe, expect, it } from "vitest";
+import { ISLAND_DATA_ATTRIBUTES } from "@/core/islands/constants";
+import {
+  extractIslandCodeFromEmbed,
+  parseIslandElement,
+  parseIslandElementsIntoApps,
+  parseMarimoIslandApps,
+} from "../parse";
+import {
+  buildIslandHTML,
+  createIslandHarness,
+  type IslandHarness,
+} from "./test-utils.tsx";
+
+let harness: IslandHarness;
+
+afterEach(() => {
+  harness?.cleanup();
+});
+
+// ============================================================================
+// Reactive vs Non-Reactive Parsing
+// ============================================================================
+
+describe("reactive vs non-reactive islands", () => {
+  it("should parse reactive islands into apps with code", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+        { reactive: true, code: "y = 2", output: "<div>2</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(1);
+    expect(apps[0].cells).toHaveLength(2);
+    expect(apps[0].cells[0].code).toBe("x = 1");
+    expect(apps[0].cells[1].code).toBe("y = 2");
+  });
+
+  it("should skip non-reactive islands during parsing (no code sent to kernel)", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+        { reactive: false, output: "<div>static content</div>" },
+        { reactive: true, code: "y = 2", output: "<div>2</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(1);
+    // Only the 2 reactive islands become cells
+    expect(apps[0].cells).toHaveLength(2);
+    expect(apps[0].cells[0].code).toBe("x = 1");
+    expect(apps[0].cells[1].code).toBe("y = 2");
+  });
+
+  it("should not set data-cell-idx on non-reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+        { reactive: false, output: "<div>static</div>" },
+      ]),
+    );
+
+    parseMarimoIslandApps(harness.container);
+
+    const [reactiveIsland, nonReactiveIsland] = harness.islands;
+
+    // Reactive island gets a cell index
+    expect(reactiveIsland.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe(
+      "0",
+    );
+    // Non-reactive island does NOT get a cell index
+    expect(
+      nonReactiveIsland.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+  });
+
+  it("should handle all-non-reactive islands (empty app list)", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: false, output: "<div>static 1</div>" },
+        { reactive: false, output: "<div>static 2</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(0);
+  });
+});
+
+// ============================================================================
+// extractIslandCodeFromEmbed
+// ============================================================================
+
+describe("extractIslandCodeFromEmbed with harness", () => {
+  it("should return code for reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: 'mo.md("hello")', output: "<div>hello</div>" },
+      ]),
+    );
+
+    const code = extractIslandCodeFromEmbed(harness.islands[0]);
+    expect(code).toBe('mo.md("hello")');
+  });
+
+  it("should return empty string for non-reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        {
+          reactive: false,
+          code: 'mo.md("hello")',
+          output: "<div>hello</div>",
+        },
+      ]),
+    );
+
+    const code = extractIslandCodeFromEmbed(harness.islands[0]);
+    expect(code).toBe("");
+  });
+});
+
+// ============================================================================
+// parseIslandElement
+// ============================================================================
+
+describe("parseIslandElement with harness", () => {
+  it("should return cell data for reactive island with output and code", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+      ]),
+    );
+
+    const result = parseIslandElement(harness.islands[0]);
+    expect(result).not.toBeNull();
+    expect(result!.code).toBe("x = 1");
+    expect(result!.output).toBe("<div>1</div>");
+  });
+
+  it("should return null for non-reactive island (code is empty)", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([{ reactive: false, output: "<div>static</div>" }]),
+    );
+
+    const result = parseIslandElement(harness.islands[0]);
+    expect(result).toBeNull();
+  });
+});
+
+// ============================================================================
+// Multi-app parsing
+// ============================================================================
+
+describe("multi-app parsing with harness", () => {
+  it("should group islands by app-id", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { appId: "app-1", reactive: true, code: "a = 1", output: "<div/>" },
+        { appId: "app-2", reactive: true, code: "b = 2", output: "<div/>" },
+        { appId: "app-1", reactive: true, code: "c = 3", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(2);
+
+    const app1 = apps.find((a) => a.id === "app-1")!;
+    const app2 = apps.find((a) => a.id === "app-2")!;
+
+    expect(app1.cells).toHaveLength(2);
+    expect(app1.cells[0].code).toBe("a = 1");
+    expect(app1.cells[1].code).toBe("c = 3");
+
+    expect(app2.cells).toHaveLength(1);
+    expect(app2.cells[0].code).toBe("b = 2");
+  });
+
+  it("should assign sequential cell indices within each app", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { appId: "app-1", reactive: true, code: "a", output: "<div/>" },
+        { appId: "app-1", reactive: true, code: "b", output: "<div/>" },
+        { appId: "app-1", reactive: true, code: "c", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps[0].cells.map((c) => c.idx)).toEqual([0, 1, 2]);
+  });
+
+  it("should skip non-reactive islands in cell index assignment", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "a = 1", output: "<div/>" },
+        { reactive: false, output: "<div>static</div>" },
+        { reactive: true, code: "b = 2", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps[0].cells).toHaveLength(2);
+    expect(apps[0].cells[0].idx).toBe(0);
+    expect(apps[0].cells[1].idx).toBe(1);
+
+    // Verify DOM: reactive islands get indices, non-reactive does not
+    expect(
+      harness.islands[0].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBe("0");
+    expect(
+      harness.islands[1].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+    expect(
+      harness.islands[2].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBe("1");
+  });
+});
+
+// ============================================================================
+// Mixed reactive/non-reactive scenarios (regression tests)
+// ============================================================================
+
+describe("mixed reactive/non-reactive island scenarios", () => {
+  it("should handle the generate.py demo pattern: reactive + non-reactive + display_code", () => {
+    // Mirrors the "Island Features" section of generate.py
+    harness = createIslandHarness(
+      buildIslandHTML([
+        // Section header (reactive)
+        {
+          reactive: true,
+          code: 'mo.md("## Display Code")',
+          output: "<div><h2>Display Code</h2></div>",
+        },
+        // display_code island (reactive)
+        {
+          reactive: true,
+          code: 'mo.md("You can show the code")',
+          output: "<div>You can show the code</div>",
+          displayCode: true,
+        },
+        // Non-reactive section header
+        {
+          reactive: true,
+          code: 'mo.md("## Non-Reactive Islands")',
+          output: "<div><h2>Non-Reactive Islands</h2></div>",
+        },
+        // Non-reactive island — the one that was crashing
+        {
+          reactive: false,
+          code: 'mo.md("This island is non-reactive")',
+          output:
+            "<div>This island is non-reactive - it runs once and doesn't update</div>",
+        },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+
+    // Only 3 reactive islands become cells
+    expect(apps).toHaveLength(1);
+    expect(apps[0].cells).toHaveLength(3);
+
+    // Non-reactive island (index 3) has no cell-idx
+    expect(
+      harness.islands[3].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+    expect(
+      harness.islands[3].getAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE),
+    ).toBe("false");
+  });
+
+  it("should handle non-reactive island at the start", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: false, output: "<div>static header</div>" },
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(1);
+    expect(apps[0].cells).toHaveLength(1);
+    expect(apps[0].cells[0].code).toBe("x = 1");
+    expect(apps[0].cells[0].idx).toBe(0);
+
+    // First island (non-reactive) has no index
+    expect(
+      harness.islands[0].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+    // Second island (reactive) gets index 0
+    expect(
+      harness.islands[1].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBe("0");
+  });
+
+  it("should handle alternating reactive and non-reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "a = 1", output: "<div/>" },
+        { reactive: false, output: "<div>static</div>" },
+        { reactive: true, code: "b = 2", output: "<div/>" },
+        { reactive: false, output: "<div>static</div>" },
+        { reactive: true, code: "c = 3", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps[0].cells).toHaveLength(3);
+    expect(apps[0].cells.map((c) => c.code)).toEqual([
+      "a = 1",
+      "b = 2",
+      "c = 3",
+    ]);
+    expect(apps[0].cells.map((c) => c.idx)).toEqual([0, 1, 2]);
+  });
+});
+
+// ============================================================================
+// parseIslandElementsIntoApps (direct element-level tests)
+// ============================================================================
+
+describe("parseIslandElementsIntoApps with mixed elements", () => {
+  it("should preserve DOM order for cell indices", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "first", output: "<div/>" },
+        { reactive: true, code: "second", output: "<div/>" },
+        { reactive: true, code: "third", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseIslandElementsIntoApps(harness.islands);
+    expect(apps[0].cells.map((c) => c.code)).toEqual([
+      "first",
+      "second",
+      "third",
+    ]);
+  });
+
+  it("should handle empty container", () => {
+    harness = createIslandHarness("");
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(0);
+  });
+});