@marimo-team/islands 0.23.12-dev10 → 0.23.12-dev11

package/dist/{reveal-component-BXP8Y-bq.js → reveal-component-OEq7xNow.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-Di0mtt6O.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
-import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-D1W_9sHW.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-Bi2d-Fh5.js";
 import { X as useDebouncedCallback } from "./input-CbEz_aj_.js";
 import "./toDate-D-l5s8nn.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

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

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

@@ -12,6 +12,7 @@ import {
 type Base64String = components["schemas"]["Base64String"];
 interface TestIslandApp {
   id: string;
+  payloadBacked?: boolean;
   cells: { code: string; idx: number; output: string }[];
 }
 interface TestExportContext {
@@ -142,6 +143,30 @@ describe("IslandsPyodideBridge", () => {
       });
     });
 
+    it("should ignore trusted export notebook code for a payload-backed app", async () => {
+      const payloadApp = {
+        id: "app-1",
+        payloadBacked: true,
+        cells: [{ code: "x = 1", idx: 0, output: "<div>1</div>" }],
+      };
+      mockParseMarimoIslandApps.mockReturnValue([payloadApp]);
+      mockGetMarimoExportContext.mockReturnValue({
+        trusted: true,
+        notebookCode: "full notebook should be ignored",
+      });
+      mockCreateMarimoFile.mockReturnValue("generated payload app");
+
+      await (
+        bridge as unknown as { startSessionsForAllApps(): Promise<void> }
+      ).startSessionsForAllApps();
+
+      expect(mockCreateMarimoFile).toHaveBeenCalledWith(payloadApp);
+      expect(mockStartSessionRequest).toHaveBeenCalledWith({
+        appId: "app-1",
+        code: "generated payload app",
+      });
+    });
+
     it("should keep synthesized per-app files for multiple reactive apps even when export context exists", async () => {
       mockParseMarimoIslandApps.mockReturnValue([
         {

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

@@ -1,9 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   ISLAND_DATA_ATTRIBUTES,
   ISLAND_TAG_NAMES,
+  ISLANDS_JSON_SCRIPT_TYPE,
 } from "@/core/islands/constants";
+import { Logger } from "@/utils/Logger";
 import {
   createMarimoFile,
   extractIslandCodeFromEmbed,
@@ -15,6 +18,43 @@ import {
 } from "../parse";
 import { createMockIslandElement, createMockIslands } from "./test-utils.tsx";
 
+function createPayloadCell(
+  overrides: Partial<{
+    cellId: string;
+    code: string;
+    outputHtml: string;
+    outputMimetype: string;
+    reactive: boolean;
+    displayCode: boolean;
+    displayOutput: boolean;
+  }> = {},
+) {
+  return {
+    cellId: "cell-1",
+    code: 'print("payload")',
+    outputHtml: "<div>payload</div>",
+    outputMimetype: "text/html",
+    reactive: true,
+    displayCode: false,
+    displayOutput: true,
+    ...overrides,
+  };
+}
+
+function appendPayload(
+  root: HTMLElement,
+  payload: {
+    schemaVersion: number;
+    appId: string;
+    cells: ReturnType<typeof createPayloadCell>[];
+  },
+) {
+  const script = document.createElement("script");
+  script.type = ISLANDS_JSON_SCRIPT_TYPE;
+  script.textContent = JSON.stringify(payload);
+  root.appendChild(script);
+}
+
 describe("createMarimoFile", () => {
   it("should return a string", () => {
     const app = {
@@ -90,6 +130,27 @@ describe("createMarimoFile", () => {
     `);
   });
 
+  it("should create disabled marimo cells", () => {
+    const app = {
+      cells: [{ code: "x = 0", disabled: true }, { code: "x = 1" }],
+    };
+
+    const result = createMarimoFile(app);
+
+    expect(result).toMatchInlineSnapshot(`
+      "import marimo
+      app = marimo.App()
+      @app.cell(disabled=True)
+      def __():
+          pass
+          return
+      @app.cell
+      def __():
+          x = 1
+          return"
+    `);
+  });
+
   it("should properly indent multi-line code", () => {
     const app = {
       cells: [{ code: "if True:\n    print('hello')\n    print('world')" }],
@@ -459,6 +520,7 @@ describe("parseMarimoIslandApps", () => {
 
   afterEach(() => {
     document.body.removeChild(container);
+    vi.restoreAllMocks();
   });
 
   it("should parse islands from document", () => {
@@ -528,4 +590,526 @@ describe("parseMarimoIslandApps", () => {
       ]
     `);
   });
+
+  it("should use supported JSON payload data for matched islands", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: 'print("dom")',
+      innerHTML: "<div>dom</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [createPayloadCell()],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result).toEqual([
+      {
+        id: "app1",
+        payloadBacked: true,
+        cells: [
+          {
+            cellId: "cell-1",
+            code: 'print("payload")',
+            idx: 0,
+            output: "<div>payload</div>",
+          },
+        ],
+      },
+    ]);
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID)).toBeNull();
+    expect(extractIslandCodeFromEmbed(island)).toBe('print("payload")');
+    expect(island.querySelector(ISLAND_TAG_NAMES.CELL_OUTPUT)?.innerHTML).toBe(
+      "<div>payload</div>",
+    );
+  });
+
+  it("should parse Python-generated island payload snapshots", () => {
+    const html = readFileSync(
+      new URL(
+        "../../../../../tests/_islands/snapshots/html-payload.txt",
+        import.meta.url,
+      ).pathname.replace(/^\/@fs/, ""),
+      "utf8",
+    );
+    container.innerHTML = html;
+
+    const result = parseMarimoIslandApps(container);
+    const islands = container.querySelectorAll<HTMLElement>(
+      ISLAND_TAG_NAMES.ISLAND,
+    );
+
+    expect(result).toEqual([
+      {
+        id: "main",
+        payloadBacked: true,
+        cells: [
+          {
+            cellId: "Hbol",
+            code: "import marimo as mo",
+            idx: 0,
+            output: "",
+          },
+          {
+            cellId: "MJUe",
+            code: "mo.md('Hello, HTML!')",
+            idx: 1,
+            output: "",
+          },
+        ],
+      },
+    ]);
+    expect(islands[0].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBeNull();
+    expect(islands[1].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+    expect(islands[2].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("1");
+  });
+
+  it("should fall back to DOM islands for unsupported payload versions", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: 'print("dom")',
+      innerHTML: "<div>dom</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 2,
+      appId: "app1",
+      cells: [createPayloadCell()],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result).toEqual([
+      {
+        id: "app1",
+        cells: [
+          {
+            code: 'print("dom")',
+            idx: 0,
+            output: "<div>dom</div>",
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("should ignore payload scripts rendered inside island output", () => {
+    const nestedPayload = {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          code: "payload_code_should_not_run = True",
+          outputHtml: "<div>payload</div>",
+        }),
+      ],
+    };
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: 'print("dom")',
+      innerHTML: `<div>dom</div><script type="${ISLANDS_JSON_SCRIPT_TYPE}">${JSON.stringify(nestedPayload)}</script>`,
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result).toEqual([
+      {
+        id: "app1",
+        cells: [
+          {
+            code: 'print("dom")',
+            idx: 0,
+            output: island.querySelector(ISLAND_TAG_NAMES.CELL_OUTPUT)
+              ?.innerHTML,
+          },
+        ],
+      },
+    ]);
+  });
+
+  it("should use payload order for runtime cell indices", () => {
+    const second = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-2",
+      code: "second_dom = True",
+      innerHTML: "<div>second dom</div>",
+    });
+    const first = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: "first_dom = True",
+      innerHTML: "<div>first dom</div>",
+    });
+    for (const island of [second, first]) {
+      island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+      container.appendChild(island);
+    }
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          cellId: "cell-1",
+          code: "first_payload = True",
+          outputHtml: "<div>first payload</div>",
+        }),
+        createPayloadCell({
+          cellId: "cell-2",
+          code: "second_payload = True",
+          outputHtml: "<div>second payload</div>",
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result[0].cells.map((cell) => cell.code)).toEqual([
+      "first_payload = True",
+      "second_payload = True",
+    ]);
+    expect(first.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+    expect(second.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("1");
+  });
+
+  it("should include payload-only runtime cells", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-2",
+      code: "value",
+      innerHTML: "<div>value</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          cellId: "cell-1",
+          code: "import marimo as mo",
+          outputHtml: "",
+        }),
+        createPayloadCell({
+          cellId: "cell-2",
+          code: "mo.md('visible')",
+          outputHtml: "<div>visible</div>",
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result[0].cells.map((cell) => cell.code)).toEqual([
+      "import marimo as mo",
+      "mo.md('visible')",
+    ]);
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("1");
+  });
+
+  it("should bind payload-backed islands by runtime index after static cells", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-2",
+      code: "visible_dom = True",
+      innerHTML: "<div>visible dom</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          cellId: "cell-1",
+          code: "",
+          outputHtml: "<div>static</div>",
+          reactive: false,
+        }),
+        createPayloadCell({
+          cellId: "cell-2",
+          code: "visible_payload = True",
+          outputHtml: "<div>visible payload</div>",
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result[0].cells).toEqual([
+      {
+        cellId: "cell-1",
+        code: "",
+        disabled: true,
+        idx: 0,
+        output: "<div>static</div>",
+      },
+      {
+        cellId: "cell-2",
+        code: "visible_payload = True",
+        idx: 1,
+        output: "<div>visible payload</div>",
+      },
+    ]);
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("1");
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID)).toBeNull();
+  });
+
+  it("should fall back to DOM when no payload cell matches an island", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "dom-only",
+      code: "dom_only = True",
+      innerHTML: "<div>dom only</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    island.removeAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX);
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          cellId: "payload-only",
+          code: "payload_only = True",
+          outputHtml: "<div>payload only</div>",
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result).toEqual([
+      {
+        id: "app1",
+        cells: [
+          {
+            code: "dom_only = True",
+            idx: 0,
+            output: "<div>dom only</div>",
+          },
+        ],
+      },
+    ]);
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID)).toBe(
+      "dom-only",
+    );
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE)).toBe("true");
+  });
+
+  it("should ignore payloads without matching islands", () => {
+    const warn = vi.spyOn(Logger, "warn").mockImplementation(() => undefined);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [createPayloadCell()],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result).toEqual([]);
+    expect(warn).toHaveBeenCalledWith("No embedded marimo apps found.");
+  });
+
+  it("should still parse DOM-only apps when another app has payload", () => {
+    const payloadIsland = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: "payload_dom = True",
+      innerHTML: "<div>payload dom</div>",
+    });
+    const domIsland = createMockIslandElement({
+      appId: "app2",
+      code: "dom_app = True",
+      innerHTML: "<div>dom app</div>",
+    });
+    for (const island of [payloadIsland, domIsland]) {
+      island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+      container.appendChild(island);
+    }
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [createPayloadCell()],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result.map((app) => app.id)).toEqual(["app1", "app2"]);
+    expect(result[0].cells[0].code).toBe('print("payload")');
+    expect(result[1].cells[0].code).toBe("dom_app = True");
+  });
+
+  it("should materialize non-reactive payload islands without runtime cells", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: "static_dom = True",
+      innerHTML: "<div>static dom</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "false");
+    island.removeAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX);
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          code: "",
+          outputHtml: "<div>static payload</div>",
+          reactive: false,
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result).toEqual([]);
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBeNull();
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID)).toBeNull();
+    expect(island.querySelector(ISLAND_TAG_NAMES.CELL_OUTPUT)?.innerHTML).toBe(
+      "<div>static payload</div>",
+    );
+  });
+
+  it("should keep non-reactive display code out of runtime cells", () => {
+    const staticIsland = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: "x = 0",
+      innerHTML: "<div>static</div>",
+    });
+    const reactiveIsland = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-2",
+      code: "y = 1",
+      innerHTML: "<div>reactive</div>",
+    });
+    staticIsland.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "false");
+    reactiveIsland.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.append(staticIsland, reactiveIsland);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          cellId: "cell-1",
+          code: "x = 0",
+          outputHtml: "<div>static payload</div>",
+          reactive: false,
+          displayCode: true,
+        }),
+        createPayloadCell({
+          cellId: "cell-2",
+          code: "y = 1",
+          outputHtml: "<div>reactive payload</div>",
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+    const file = createMarimoFile(result[0]);
+
+    expect(result[0].cells).toEqual([
+      {
+        cellId: "cell-1",
+        code: "",
+        disabled: true,
+        idx: 0,
+        output: "<div>static payload</div>",
+      },
+      {
+        cellId: "cell-2",
+        code: "y = 1",
+        idx: 1,
+        output: "<div>reactive payload</div>",
+      },
+    ]);
+    expect(file).not.toContain("x = 0");
+    expect(file).toContain("@app.cell(disabled=True)\ndef __():\n    pass");
+    expect(reactiveIsland.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe(
+      "1",
+    );
+  });
+
+  it("should update editor initial values from payload code", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: 'print("dom")',
+      innerHTML: "<div>dom</div>",
+    });
+    island.insertAdjacentHTML(
+      "beforeend",
+      '<div data-marimo-element><marimo-code-editor data-initial-value="\\"print(\\\\\\"dom\\\\\\")\\""></marimo-code-editor></div>',
+    );
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [createPayloadCell()],
+    });
+
+    parseMarimoIslandApps(container);
+
+    expect(
+      island
+        .querySelector(ISLAND_TAG_NAMES.CODE_EDITOR)
+        ?.getAttribute("data-initial-value"),
+    ).toBe(JSON.stringify('print("payload")'));
+  });
+
+  it("should match duplicate cell ids by occurrence", () => {
+    const first = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: "dom_first = True",
+      innerHTML: "<div>dom first</div>",
+    });
+    const second = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: "dom_second = True",
+      innerHTML: "<div>dom second</div>",
+    });
+    for (const island of [first, second]) {
+      island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+      container.appendChild(island);
+    }
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          code: "payload_first = True",
+          outputHtml: "<div>payload first</div>",
+        }),
+        createPayloadCell({
+          code: "payload_second = True",
+          outputHtml: "<div>payload second</div>",
+        }),
+      ],
+    });
+
+    const result = parseMarimoIslandApps(container);
+
+    expect(result[0].cells.map((cell) => cell.code)).toEqual([
+      "payload_first = True",
+      "payload_second = True",
+    ]);
+    expect(first.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+    expect(second.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("1");
+  });
 });