@marimo-team/islands 0.23.15-dev30 → 0.23.15-dev32

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

@@ -15,6 +15,7 @@ import {
   parseIslandElement,
   parseIslandElementsIntoApps,
   parseMarimoIslandApps,
+  retainIslandSource,
 } from "../parse";
 import { createMockIslandElement, createMockIslands } from "./test-utils.tsx";
 
@@ -53,6 +54,7 @@ function appendPayload(
   script.type = ISLANDS_JSON_SCRIPT_TYPE;
   script.textContent = JSON.stringify(payload);
   root.appendChild(script);
+  return script;
 }
 
 describe("createMarimoFile", () => {
@@ -317,6 +319,39 @@ describe("parseIslandElement", () => {
 
     expect(result).toBeNull();
   });
+
+  it("uses retained source after the custom element renders", () => {
+    const element = document.createElement(ISLAND_TAG_NAMES.ISLAND);
+    retainIslandSource(element, {
+      code: 'print("retained")',
+      output: "<div>retained output</div>",
+    });
+
+    expect(parseIslandElement(element)).toEqual({
+      code: 'print("retained")',
+      output: "<div>retained output</div>",
+    });
+
+    retainIslandSource(element, { code: "", output: "<div>static</div>" });
+    expect(parseIslandElement(element)).toBeNull();
+  });
+
+  it("prefers new live source when an island element is reused", () => {
+    const element = createMockIslandElement({
+      code: 'print("new")',
+      innerHTML: "<div>new output</div>",
+    });
+    element.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    retainIslandSource(element, {
+      code: 'print("retained")',
+      output: "<div>retained output</div>",
+    });
+
+    expect(parseIslandElement(element)).toEqual({
+      code: 'print("new")',
+      output: "<div>new output</div>",
+    });
+  });
 });
 
 describe("parseIslandElementsIntoApps", () => {
@@ -630,6 +665,76 @@ describe("parseMarimoIslandApps", () => {
     );
   });
 
+  it("preserves payload-backed cells after a non-materializing capability probe", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-2",
+      code: "dom_code = True",
+      innerHTML: "<div>dom output</div>",
+    });
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [createPayloadCell({ cellId: "cell-2" })],
+    });
+    const originalIsland = island.outerHTML;
+
+    const probed = parseMarimoIslandApps(container, { materialize: false });
+
+    expect(probed).toHaveLength(1);
+    expect(island.outerHTML).toBe(originalIsland);
+
+    expect(parseMarimoIslandApps(container)).toEqual(probed);
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID)).toBeNull();
+    expect(island.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+  });
+
+  it("refreshes a reused payload anchor when its content changes", () => {
+    const island = createMockIslandElement({
+      appId: "app1",
+      cellId: "cell-1",
+      code: 'print("dom")',
+      innerHTML: "<div>dom output</div>",
+    });
+    island.insertAdjacentHTML(
+      "beforeend",
+      '<div data-marimo-element><marimo-code-editor data-initial-value="old"></marimo-code-editor></div>',
+    );
+    island.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "true");
+    container.appendChild(island);
+    const script = appendPayload(container, {
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [createPayloadCell()],
+    });
+    parseMarimoIslandApps(container);
+
+    script.textContent = JSON.stringify({
+      schemaVersion: 1,
+      appId: "app1",
+      cells: [
+        createPayloadCell({
+          code: 'print("updated")',
+          outputHtml: "<div>updated output</div>",
+        }),
+      ],
+    });
+
+    parseMarimoIslandApps(container);
+
+    expect(extractIslandCodeFromEmbed(island)).toBe('print("updated")');
+    expect(island.querySelector(ISLAND_TAG_NAMES.CELL_OUTPUT)?.innerHTML).toBe(
+      "<div>updated output</div>",
+    );
+    expect(
+      island
+        .querySelector(ISLAND_TAG_NAMES.CODE_EDITOR)
+        ?.getAttribute("data-initial-value"),
+    ).toBe(JSON.stringify('print("updated")'));
+  });
+
   it("should parse Python-generated island payload snapshots", () => {
     const html = readFileSync(
       new URL(

package/src/core/islands/bootstrap.ts

@@ -108,14 +108,17 @@ export async function initializeIslands(
   // Loading indicator: dim islands while Pyodide initializes
   store.sub(shouldShowIslandsWarningIndicatorAtom, () => {
     const showing = store.get(shouldShowIslandsWarningIndicatorAtom);
+    const currentIslands = root.querySelectorAll<HTMLElement>(
+      ISLAND_TAG_NAMES.ISLAND,
+    );
     if (showing) {
       toastIslandsLoading();
-      for (const island of islands) {
+      for (const island of currentIslands) {
         island.style.setProperty("opacity", "0.5");
       }
     } else {
       dismissIslandsLoadingToast();
-      for (const island of islands) {
+      for (const island of currentIslands) {
         island.style.removeProperty("opacity");
       }
     }
@@ -208,7 +211,9 @@ function handleMessage(
           setKernelState: Functions.NOOP,
           onError: Logger.error,
         });
-        defineCustomElement(ISLAND_TAG_NAMES.ISLAND, MarimoIslandElement);
+        if (!window.customElements?.get(ISLAND_TAG_NAMES.ISLAND)) {
+          defineCustomElement(ISLAND_TAG_NAMES.ISLAND, MarimoIslandElement);
+        }
         return;
 
       case "send-ui-element-message":

package/src/core/islands/bridge.ts

@@ -7,6 +7,7 @@ import { throwNotImplemented } from "@/utils/functions";
 import type { JsonString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { generateUUID } from "@/utils/uuid";
+import { initialNotebookState, notebookAtom } from "../cells/cells";
 import type { CommandMessage, NotificationPayload } from "../kernel/messages";
 import type { EditRequests, RunRequests } from "../network/types";
 import { store as defaultStore } from "../state/jotai";
@@ -35,11 +36,12 @@ export interface IslandsBridgeConfig {
    * Optional root element for parsing islands (for testing)
    */
   root?: Document | Element;
+}
 
-  /**
-   * Whether to auto-start sessions on worker ready (default: true)
-   */
-  autoStartSessions?: boolean;
+interface AppSession {
+  appId: string;
+  code?: string;
+  sessionGeneration: number;
 }
 
 /**
@@ -51,8 +53,8 @@ export interface IslandsBridgeConfig {
  * @example
  * ```ts
  * const bridge = new IslandsPyodideBridge();
- * await bridge.initialized;
  * bridge.consumeMessages(message => console.log(message));
+ * await bridge.initializeApps();
  * ```
  */
 export class IslandsPyodideBridge implements RunRequests, EditRequests {
@@ -62,14 +64,17 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     | undefined;
   private readonly store: typeof defaultStore;
   private readonly root: Document | Element;
-  private readonly autoStartSessions: boolean;
+  private session: AppSession | undefined;
+  private sessionReady = new Deferred<AppSession>();
+  private nextSessionGeneration = 0;
+  private appTransition = Promise.resolve();
+  private workerReady = new Deferred<void>();
 
   public initialized = new Deferred<void>();
 
   constructor(config: IslandsBridgeConfig = {}) {
     this.store = config.store || defaultStore;
     this.root = config.root || document;
-    this.autoStartSessions = config.autoStartSessions ?? true;
 
     try {
       const factory = config.workerFactory || new DefaultWorkerFactory();
@@ -88,9 +93,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
    */
   private setupMessageListeners(): void {
     this.rpc.addMessageListener("ready", () => {
-      if (this.autoStartSessions) {
-        this.startSessionsForAllApps();
-      }
+      this.workerReady.resolve();
     });
 
     this.rpc.addMessageListener("initialized", () => {
@@ -115,11 +118,16 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     );
   }
 
-  /**
-   * Starts sessions for all apps found in the DOM
-   */
-  private startSessionsForAllApps(): void {
+  async initializeApps(): Promise<void> {
+    await this.enqueueAppTransition(async () => {
+      await this.workerReady.promise;
+      await this.startApps();
+    });
+  }
+
+  private async startApps(): Promise<void> {
     const apps = parseMarimoIslandApps(this.root);
+    const managesSingleApp = apps.length === 1;
     Logger.debug(
       `Starting sessions for ${apps.length} app(s):`,
       apps.map((a) => `${a.id} (${a.cells.length} cells)`),
@@ -134,20 +142,83 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     const notebookCode = exportContext?.notebookCode;
     for (const app of apps) {
       const file = notebookCode || createMarimoFile(app);
+      if (
+        managesSingleApp &&
+        this.session?.appId === app.id &&
+        this.session.code === file
+      ) {
+        return;
+      }
       Logger.debug(`App ${app.id} marimo file:\n`, file);
-      this.startSession({
+      const request = {
         code: file,
         appId: app.id,
-      }).catch((error) => {
+        sessionGeneration: ++this.nextSessionGeneration,
+      };
+      const previousSession = this.session;
+      const replacesSession = managesSingleApp && previousSession !== undefined;
+      if (replacesSession) {
+        this.store.set(notebookAtom, initialNotebookState());
+      }
+      if (managesSingleApp || !previousSession) {
+        if (managesSingleApp && this.sessionReady.status !== "pending") {
+          this.sessionReady = new Deferred<AppSession>();
+        }
+        this.session = {
+          ...request,
+          code: managesSingleApp ? file : undefined,
+        };
+      }
+      const operation = replacesSession
+        ? this.rpc.proxy.request.replaceSession(request)
+        : this.startSession(request);
+      try {
+        await operation;
+        if (this.sessionReady.status === "pending" && this.session) {
+          this.sessionReady.resolve(this.session);
+        }
+      } catch (error) {
+        if (this.session?.sessionGeneration === request.sessionGeneration) {
+          this.session = previousSession;
+        }
         Logger.error(`Failed to start session for app ${app.id}:`, error);
-      });
+        if (managesSingleApp) {
+          throw error;
+        }
+      }
     }
   }
 
+  async stopSession(appId?: string): Promise<void> {
+    await this.enqueueAppTransition(async () => {
+      const session = this.session;
+      if (session?.code === undefined || (appId && session.appId !== appId)) {
+        return;
+      }
+      await this.rpc.proxy.request.stopSession({
+        appId: session.appId,
+        sessionGeneration: session.sessionGeneration,
+      });
+      this.session = undefined;
+      this.sessionReady = new Deferred<AppSession>();
+      this.store.set(notebookAtom, initialNotebookState());
+    });
+  }
+
+  private enqueueAppTransition(operation: () => Promise<void>): Promise<void> {
+    const result = this.appTransition.then(operation);
+    this.appTransition = result.catch(() => undefined);
+    return result;
+  }
+
   /**
    * Starts a new Python session for an app
    */
-  async startSession(opts: { code: string; appId: string }): Promise<void> {
+  async startSession(opts: {
+    code: string;
+    appId: string;
+    sessionGeneration: number;
+  }): Promise<void> {
     await this.rpc.proxy.request.startSession(opts);
   }
 
@@ -203,11 +274,19 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   // ============================================================================
 
   sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
-    await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
-    await this.putControlRequest({
-      type: "execute-cells",
-      ...request,
+    const session = await this.getActiveSession();
+    await this.rpc.proxy.request.loadPackages({
+      appId: session.appId,
+      code: request.codes.join("\n"),
+      sessionGeneration: session.sessionGeneration,
     });
+    await this.putControlRequest(
+      {
+        type: "execute-cells",
+        ...request,
+      },
+      session,
+    );
     return null;
   };
 
@@ -278,13 +357,27 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
 
   // The kernel uses msgspec to parse control requests, which requires a 'type'
   // field for discriminated union deserialization.
-  private async putControlRequest(operation: CommandMessage): Promise<void> {
+  private async putControlRequest(
+    operation: CommandMessage,
+    session?: AppSession,
+  ): Promise<void> {
+    session ??= await this.getActiveSession();
     await this.rpc.proxy.request.bridge({
+      appId: session.appId,
       functionName: "put_control_request",
       payload: operation,
+      sessionGeneration: session.sessionGeneration,
     });
   }
 
+  private async getActiveSession(): Promise<AppSession> {
+    const transition = this.appTransition;
+    const session = this.session;
+    const ready = this.sessionReady;
+    await transition;
+    return session ?? ready.promise;
+  }
+
   /**
    * Cleans up resources (for testing)
    */

package/src/core/islands/components/__tests__/web-components.test.tsx

@@ -0,0 +1,214 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act } from "react";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { notebookAtom } from "@/core/cells/cells";
+import {
+  ISLAND_DATA_ATTRIBUTES,
+  ISLAND_TAG_NAMES,
+  ISLANDS_JSON_SCRIPT_TYPE,
+} from "@/core/islands/constants";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { parseMarimoIslandApps } from "../../parse";
+import { MarimoIslandElement } from "../web-components";
+
+beforeAll(() => {
+  setReactActEnvironment(true);
+  if (!customElements.get(ISLAND_TAG_NAMES.ISLAND)) {
+    customElements.define(ISLAND_TAG_NAMES.ISLAND, MarimoIslandElement);
+  }
+});
+
+afterAll(() => {
+  setReactActEnvironment(false);
+});
+
+beforeEach(() => {
+  store.set(notebookAtom, MockNotebook.notebookState({ cellData: {} }));
+  store.set(requestClientAtom, MockRequestClient.create());
+});
+
+afterEach(async () => {
+  await actAndFlush(() => document.body.replaceChildren());
+  store.set(requestClientAtom, null);
+});
+
+describe("MarimoIslandElement lifecycle", () => {
+  it("binds a reactive island after its runtime cell index is materialized", async () => {
+    setNotebook("outgoing-cell", "outgoing runtime output");
+    const container = document.createElement("div");
+    container.innerHTML = `
+      <marimo-island data-app-id="app-1" data-reactive="true">
+        <marimo-cell-output><div>initial output</div></marimo-cell-output>
+        <marimo-cell-code hidden>${encodeURIComponent("value = 1")}</marimo-cell-code>
+      </marimo-island>
+    `;
+    await actAndFlush(() => document.body.append(container));
+
+    const island = container.querySelector<HTMLElement>(
+      ISLAND_TAG_NAMES.ISLAND,
+    );
+    expect(island).not.toBeNull();
+    expect(island?.getAttribute("data-status")).toBeNull();
+
+    await actAndFlush(() => {
+      parseMarimoIslandApps(container);
+    });
+
+    expect(island?.textContent).toContain("outgoing runtime output");
+
+    await actAndFlush(() => {
+      setNotebook("runtime-cell");
+    });
+
+    expect(island?.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe("0");
+    expect(island?.getAttribute("data-status")).toBe("idle");
+
+    await actAndFlush(() => {
+      island?.remove();
+      if (island) {
+        container.append(island);
+      }
+    });
+    expect(island?.textContent).toContain("initial output");
+
+    island?.setAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID, "source-cell");
+    island?.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "false");
+    expect((island as MarimoIslandElement | null)?.cellId).toBeUndefined();
+  });
+
+  it("refreshes a reused payload island and clears an old app binding", async () => {
+    const container = document.createElement("div");
+    container.innerHTML = `
+      <marimo-island
+        data-app-id="app-1"
+        data-cell-id="cell-1"
+        data-reactive="true"
+      >
+        <marimo-cell-output><div>old output</div></marimo-cell-output>
+        <marimo-cell-code hidden>${encodeURIComponent('print("old")')}</marimo-cell-code>
+      </marimo-island>
+    `;
+    const script = document.createElement("script");
+    script.type = ISLANDS_JSON_SCRIPT_TYPE;
+    script.textContent = payloadSource({
+      code: 'print("unchanged")',
+      outputHtml: "<div>old output</div>",
+    });
+    container.append(script);
+    await actAndFlush(() => document.body.append(container));
+
+    await actAndFlush(() => {
+      parseMarimoIslandApps(container);
+      script.textContent = payloadSource({
+        code: 'print("unchanged")',
+        outputHtml: "<div>updated output</div>",
+      });
+      parseMarimoIslandApps(container);
+    });
+
+    const island = container.querySelector<HTMLElement>(
+      ISLAND_TAG_NAMES.ISLAND,
+    );
+    expect(island?.textContent).toContain("updated output");
+    expect(island?.textContent).not.toContain("old output");
+    expect(island?.querySelector(ISLAND_TAG_NAMES.CELL_OUTPUT)).toBeNull();
+
+    await actAndFlush(() => {
+      setNotebook("outgoing-cell", "outgoing runtime output");
+    });
+    expect(island?.textContent).toContain("outgoing runtime output");
+
+    await actAndFlush(() => {
+      island?.setAttribute(ISLAND_DATA_ATTRIBUTES.APP_ID, "app-2");
+      island?.setAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID, "cell-2");
+      script.textContent = payloadSource({
+        appId: "app-2",
+        cellId: "cell-2",
+        code: 'print("next")',
+        outputHtml: "<div>next app output</div>",
+      });
+      parseMarimoIslandApps(container);
+    });
+
+    expect(island?.textContent).toContain("next app output");
+    expect(island?.textContent).not.toContain("outgoing runtime output");
+  });
+});
+
+function setNotebook(id: string, output?: string): void {
+  const runtimeCellId = cellId(id);
+  store.set(
+    notebookAtom,
+    MockNotebook.notebookState({
+      cellData: { [runtimeCellId]: {} },
+      cellRuntime: output
+        ? {
+            [runtimeCellId]: {
+              output: {
+                channel: "output",
+                data: `<div>${output}</div>`,
+                mimetype: "text/html",
+                timestamp: 0,
+              },
+            },
+          }
+        : undefined,
+    }),
+  );
+}
+
+function payloadSource({
+  appId = "app-1",
+  cellId = "cell-1",
+  code,
+  outputHtml,
+}: {
+  appId?: string;
+  cellId?: string;
+  code: string;
+  outputHtml: string;
+}): string {
+  return JSON.stringify({
+    schemaVersion: 1,
+    appId,
+    cells: [
+      {
+        cellId,
+        code,
+        outputHtml,
+        outputMimetype: "text/html",
+        reactive: true,
+        displayCode: false,
+        displayOutput: true,
+      },
+    ],
+  });
+}
+
+async function actAndFlush(action: () => void): Promise<void> {
+  await act(async () => {
+    action();
+    await Promise.resolve();
+  });
+}
+
+function setReactActEnvironment(value: boolean): void {
+  (
+    globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT: boolean;
+    }
+  ).IS_REACT_ACT_ENVIRONMENT = value;
+}