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

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

@@ -15,7 +15,6 @@ import {
   parseIslandElement,
   parseIslandElementsIntoApps,
   parseMarimoIslandApps,
-  retainIslandSource,
 } from "../parse";
 import { createMockIslandElement, createMockIslands } from "./test-utils.tsx";
 
@@ -54,7 +53,6 @@ function appendPayload(
   script.type = ISLANDS_JSON_SCRIPT_TYPE;
   script.textContent = JSON.stringify(payload);
   root.appendChild(script);
-  return script;
 }
 
 describe("createMarimoFile", () => {
@@ -319,39 +317,6 @@ 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", () => {
@@ -665,76 +630,6 @@ 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,17 +108,14 @@ 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 currentIslands) {
+      for (const island of islands) {
         island.style.setProperty("opacity", "0.5");
       }
     } else {
       dismissIslandsLoadingToast();
-      for (const island of currentIslands) {
+      for (const island of islands) {
         island.style.removeProperty("opacity");
       }
     }
@@ -211,9 +208,7 @@ function handleMessage(
           setKernelState: Functions.NOOP,
           onError: Logger.error,
         });
-        if (!window.customElements?.get(ISLAND_TAG_NAMES.ISLAND)) {
-          defineCustomElement(ISLAND_TAG_NAMES.ISLAND, MarimoIslandElement);
-        }
+        defineCustomElement(ISLAND_TAG_NAMES.ISLAND, MarimoIslandElement);
         return;
 
       case "send-ui-element-message":

package/src/core/islands/bridge.ts

@@ -7,7 +7,6 @@ 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";
@@ -36,12 +35,11 @@ export interface IslandsBridgeConfig {
    * Optional root element for parsing islands (for testing)
    */
   root?: Document | Element;
-}
 
-interface AppSession {
-  appId: string;
-  code?: string;
-  sessionGeneration: number;
+  /**
+   * Whether to auto-start sessions on worker ready (default: true)
+   */
+  autoStartSessions?: boolean;
 }
 
 /**
@@ -53,8 +51,8 @@ interface AppSession {
  * @example
  * ```ts
  * const bridge = new IslandsPyodideBridge();
+ * await bridge.initialized;
  * bridge.consumeMessages(message => console.log(message));
- * await bridge.initializeApps();
  * ```
  */
 export class IslandsPyodideBridge implements RunRequests, EditRequests {
@@ -64,17 +62,14 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     | undefined;
   private readonly store: typeof defaultStore;
   private readonly root: Document | Element;
-  private session: AppSession | undefined;
-  private sessionReady = new Deferred<AppSession>();
-  private nextSessionGeneration = 0;
-  private appTransition = Promise.resolve();
-  private workerReady = new Deferred<void>();
+  private readonly autoStartSessions: boolean;
 
   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();
@@ -93,7 +88,9 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
    */
   private setupMessageListeners(): void {
     this.rpc.addMessageListener("ready", () => {
-      this.workerReady.resolve();
+      if (this.autoStartSessions) {
+        this.startSessionsForAllApps();
+      }
     });
 
     this.rpc.addMessageListener("initialized", () => {
@@ -118,16 +115,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
     );
   }
 
-  async initializeApps(): Promise<void> {
-    await this.enqueueAppTransition(async () => {
-      await this.workerReady.promise;
-      await this.startApps();
-    });
-  }
-
-  private async startApps(): Promise<void> {
+  /**
+   * Starts sessions for all apps found in the DOM
+   */
+  private startSessionsForAllApps(): 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)`),
@@ -142,83 +134,20 @@ 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);
-      const request = {
+      this.startSession({
         code: file,
         appId: app.id,
-        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;
-        }
+      }).catch((error) => {
         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;
-    sessionGeneration: number;
-  }): Promise<void> {
+  async startSession(opts: { code: string; appId: string }): Promise<void> {
     await this.rpc.proxy.request.startSession(opts);
   }
 
@@ -274,19 +203,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   // ============================================================================
 
   sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
-    const session = await this.getActiveSession();
-    await this.rpc.proxy.request.loadPackages({
-      appId: session.appId,
-      code: request.codes.join("\n"),
-      sessionGeneration: session.sessionGeneration,
+    await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
+    await this.putControlRequest({
+      type: "execute-cells",
+      ...request,
     });
-    await this.putControlRequest(
-      {
-        type: "execute-cells",
-        ...request,
-      },
-      session,
-    );
     return null;
   };
 
@@ -357,27 +278,13 @@ 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,
-    session?: AppSession,
-  ): Promise<void> {
-    session ??= await this.getActiveSession();
+  private async putControlRequest(operation: CommandMessage): Promise<void> {
     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/web-components.tsx

@@ -5,7 +5,7 @@ import { isValidElement, type JSX } from "react";
 import ReactDOM, { type Root } from "react-dom/client";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { cellIdsAtom, notebookAtom } from "@/core/cells/cells";
+import { notebookAtom } from "@/core/cells/cells";
 import { OBJECT_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { UI_ELEMENT_REGISTRY } from "@/core/dom/uiregistry";
 import { LocaleProvider } from "@/core/i18n/locale-provider";
@@ -16,10 +16,9 @@ import { store } from "../../state/jotai";
 import {
   ISLAND_CSS_CLASSES,
   ISLAND_DATA_ATTRIBUTES,
-  ISLAND_SOURCE_CHANGED_EVENT,
   ISLAND_TAG_NAMES,
 } from "../constants";
-import { extractIslandCodeFromEmbed, retainIslandSource } from "../parse";
+import { extractIslandCodeFromEmbed } from "../parse";
 import { MarimoOutputWrapper } from "./output-wrapper";
 
 /**
@@ -29,6 +28,7 @@ export interface IslandRenderConfig {
   html: string;
   codeCallback: () => string;
   editor: JSX.Element | null;
+  cellId: CellId | undefined;
 }
 
 /**
@@ -38,12 +38,7 @@ export interface IslandRenderConfig {
  * functionality like re-running cells and copying code.
  */
 export class MarimoIslandElement extends HTMLElement {
-  private connectionGeneration = 0;
   private root?: Root;
-  private renderConfig?: IslandRenderConfig;
-  private runtimeAppId?: string;
-  private runtimeCellId?: CellId;
-  private unsubscribeCellIds?: () => void;
 
   public static readonly tagName = ISLAND_TAG_NAMES.ISLAND;
   public static readonly outputTagName = ISLAND_TAG_NAMES.CELL_OUTPUT;
@@ -77,9 +72,6 @@ export class MarimoIslandElement extends HTMLElement {
    * Returns undefined for non-reactive islands (they have no corresponding cell).
    */
   get cellId(): CellId | undefined {
-    if (!this.isReactive) {
-      return undefined;
-    }
     const cellId = this.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID);
     if (cellId) {
       return cellId as CellId;
@@ -102,9 +94,11 @@ export class MarimoIslandElement extends HTMLElement {
   /**
    * Looks up a cell ID from the notebook state by index
    */
-  private getCellIdFromIndex(idx: number): CellId | undefined {
+  private getCellIdFromIndex(idx: number): CellId {
     const { cellIds } = store.get(notebookAtom);
-    return cellIds.inOrderIds.at(idx);
+    const cellId = cellIds.inOrderIds.at(idx);
+    invariant(cellId, `Missing cell ID at index ${idx}`);
+    return cellId;
   }
 
   /**
@@ -116,62 +110,18 @@ export class MarimoIslandElement extends HTMLElement {
    * synchronously from there causes "unmount during render" warnings.
    */
   connectedCallback(): void {
-    const connectionGeneration = ++this.connectionGeneration;
-    this.addEventListener(
-      ISLAND_SOURCE_CHANGED_EVENT,
-      this.handleSourceChanged,
-    );
-    // Capture config synchronously (before children get cleared by createRoot).
-    // A reconnected element reuses the source captured on its first mount.
-    if (this.querySelector(MarimoIslandElement.outputTagName)) {
-      this.renderConfig = this.extractRenderConfig();
-    }
-    invariant(this.renderConfig, "Missing island render source");
-    this.runtimeAppId = this.appId;
-    this.runtimeCellId = this.hasAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)
-      ? this.cellId
-      : undefined;
-    this.syncCellIdsSubscription();
+    // Capture config synchronously (before children get cleared by createRoot)
+    const config = this.extractRenderConfig();
     queueMicrotask(() => {
       // Guard against disconnect between connectedCallback and microtask
-      if (
-        !this.isConnected ||
-        connectionGeneration !== this.connectionGeneration
-      ) {
+      if (!this.isConnected) {
         return;
       }
       this.root = ReactDOM.createRoot(this);
-      this.renderIsland();
+      this.renderIsland(config);
     });
   }
 
-  private handleSourceChanged = (): void => {
-    if (this.querySelector(MarimoIslandElement.outputTagName)) {
-      this.renderConfig = this.extractRenderConfig();
-      this.querySelector(MarimoIslandElement.outputTagName)?.remove();
-      this.querySelector(MarimoIslandElement.codeTagName)?.remove();
-    }
-    this.runtimeCellId =
-      this.isReactive && this.runtimeAppId === this.appId
-        ? this.cellId
-        : undefined;
-    this.runtimeAppId = this.appId;
-    this.syncCellIdsSubscription();
-    this.renderIsland();
-  };
-
-  private syncCellIdsSubscription(): void {
-    if (this.isReactive) {
-      this.unsubscribeCellIds ??= store.sub(cellIdsAtom, () => {
-        this.runtimeCellId = this.cellId;
-        this.renderIsland();
-      });
-      return;
-    }
-    this.unsubscribeCellIds?.();
-    this.unsubscribeCellIds = undefined;
-  }
-
   /**
    * Extracts configuration needed for rendering
    */
@@ -180,7 +130,7 @@ export class MarimoIslandElement extends HTMLElement {
     const initialOutput = output.innerHTML;
     const optionalEditor = this.getOptionalEditor();
     const code = this.code;
-    retainIslandSource(this, { code, output: initialOutput });
+    const cellId = this.cellId;
 
     // Read objectId directly from the DOM before createRoot clears children.
     // optionalEditor is a <RenderHTML> wrapper, so its .props don't carry the
@@ -202,19 +152,15 @@ export class MarimoIslandElement extends HTMLElement {
       html: initialOutput,
       codeCallback,
       editor: optionalEditor,
+      cellId,
     };
   }
 
   /**
    * Renders the island with React
    */
-  private renderIsland(): void {
-    const config = this.renderConfig;
-    if (!config) {
-      return;
-    }
-    const { html, codeCallback, editor } = config;
-    const cellId = this.runtimeCellId;
+  private renderIsland(config: IslandRenderConfig): void {
+    const { html, codeCallback, editor, cellId } = config;
     const alwaysShowRun = !!editor;
     const trimmedHtml = html.trim();
     const isEmpty = trimmedHtml === "<span></span>" || trimmedHtml === "";
@@ -222,7 +168,6 @@ export class MarimoIslandElement extends HTMLElement {
 
     // Non-reactive islands have no cell in the kernel — just render static HTML
     if (!cellId) {
-      this.removeAttribute("data-status");
       this.root?.render(
         <ErrorBoundary>
           <Provider store={store}>
@@ -297,12 +242,6 @@ export class MarimoIslandElement extends HTMLElement {
    * Cleanup when element is removed from DOM
    */
   disconnectedCallback(): void {
-    this.removeEventListener(
-      ISLAND_SOURCE_CHANGED_EVENT,
-      this.handleSourceChanged,
-    );
-    this.unsubscribeCellIds?.();
-    this.unsubscribeCellIds = undefined;
     const root = this.root;
     this.root = undefined;
     // Defer unmount to avoid "unmount during render" race

package/src/core/islands/constants.ts

@@ -11,7 +11,6 @@ export const ISLAND_TAG_NAMES = {
 } as const;
 
 export const ISLANDS_JSON_SCRIPT_TYPE = "application/vnd.marimo.islands+json";
-export const ISLAND_SOURCE_CHANGED_EVENT = "marimo-island-source-changed";
 
 /**
  * Data attributes for islands

package/src/core/islands/main.ts

@@ -14,44 +14,12 @@ import "iconify-icon";
 import { Logger } from "@/utils/Logger";
 import { initializeIslands } from "./bootstrap";
 import { getGlobalBridge } from "./bridge";
-import { ISLAND_CSS_CLASSES, ISLAND_TAG_NAMES } from "./constants";
-import { parseMarimoIslandApps } from "./parse";
-
-const bridge = getGlobalBridge();
-let bootstrapPromise: Promise<void> | undefined;
-
-/** Returns whether the current document can replace its app in this worker. */
-export function canReplaceApp(): boolean {
-  if (!document.querySelector(ISLAND_TAG_NAMES.ISLAND)) {
-    return false;
-  }
-  return parseMarimoIslandApps(document, { materialize: false }).length === 1;
-}
 
 /**
- * Mounts marimo custom elements and starts the apps in the current document.
+ * Main entry point for the js bundle for embedded marimo apps.
  */
-export async function initialize(): Promise<void> {
-  const islands = document.querySelectorAll<HTMLElement>(
-    ISLAND_TAG_NAMES.ISLAND,
-  );
-  if (islands.length === 0) {
-    return;
-  }
-  for (const island of islands) {
-    island.classList.add(ISLAND_CSS_CLASSES.NAMESPACE);
-  }
-  bootstrapPromise ??= initializeIslands({ bridge }).catch((error: unknown) => {
-    bootstrapPromise = undefined;
-    throw error;
-  });
-  await bootstrapPromise;
-  await bridge.initializeApps();
-}
-
-/** Stops the matching active app session. */
-export async function stopApp(appId?: string): Promise<void> {
-  await bridge.stopSession(appId);
+export async function initialize() {
+  await initializeIslands({ bridge: getGlobalBridge() });
 }
 
 // Auto-initialize on module load