@marimo-team/islands 0.23.6-dev9 → 0.23.6

package/src/core/wasm/__tests__/PyodideLoader.test.ts

@@ -0,0 +1,72 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { shouldShowSpinner } from "../PyodideLoader";
+
+describe("shouldShowSpinner", () => {
+  it("shows the spinner when there are no cells yet (Pyodide hasn't parsed)", () => {
+    expect(
+      shouldShowSpinner({
+        hasCells: false,
+        hasOutput: false,
+        mode: "read",
+        codeHidden: false,
+      }),
+    ).toBe(true);
+
+    expect(
+      shouldShowSpinner({
+        hasCells: false,
+        hasOutput: true,
+        mode: "edit",
+        codeHidden: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("renders children once cells exist with code visible", () => {
+    // run mode, code visible, no outputs yet — the user can read the code
+    expect(
+      shouldShowSpinner({
+        hasCells: true,
+        hasOutput: false,
+        mode: "read",
+        codeHidden: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("renders children once cells exist with cached outputs (snapshot case)", () => {
+    expect(
+      shouldShowSpinner({
+        hasCells: true,
+        hasOutput: true,
+        mode: "read",
+        codeHidden: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("keeps the spinner up in headless run mode with no outputs", () => {
+    // read mode + code hidden + no outputs = nothing visible to render
+    expect(
+      shouldShowSpinner({
+        hasCells: true,
+        hasOutput: false,
+        mode: "read",
+        codeHidden: true,
+      }),
+    ).toBe(true);
+  });
+
+  it("never blocks edit mode once cells exist", () => {
+    expect(
+      shouldShowSpinner({
+        hasCells: true,
+        hasOutput: false,
+        mode: "edit",
+        codeHidden: true,
+      }),
+    ).toBe(false);
+  });
+});

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

@@ -58,7 +58,7 @@ vi.mock("@/core/wasm/store", () => ({
 // Import after all mocks are set up
 import { store } from "@/core/state/jotai";
 import { initialModeAtom } from "@/core/mode";
-import { PyodideBridge } from "../bridge";
+import { getWasmWorkerName, PyodideBridge } from "../bridge";
 
 // Access INSTANCE once at module level so the constructor runs (and
 // addMessageListener populates rpcListeners) before any test executes.
@@ -111,3 +111,28 @@ describe("PyodideBridge.readCode", () => {
     expect(mockNotebookReadFile).not.toHaveBeenCalled();
   });
 });
+
+describe("getWasmWorkerName", () => {
+  afterEach(() => {
+    delete (window as unknown as { __MARIMO_HAS_WASM_CONTROLLER__?: boolean })
+      .__MARIMO_HAS_WASM_CONTROLLER__;
+  });
+
+  it("returns the version without suffix by default", () => {
+    expect(getWasmWorkerName()).toBe("0.0.0-test");
+  });
+
+  it("appends ::controller when the host opts in", () => {
+    (
+      window as unknown as { __MARIMO_HAS_WASM_CONTROLLER__?: boolean }
+    ).__MARIMO_HAS_WASM_CONTROLLER__ = true;
+    expect(getWasmWorkerName()).toBe("0.0.0-test::controller");
+  });
+
+  it("does not append the suffix for non-true values", () => {
+    (
+      window as unknown as { __MARIMO_HAS_WASM_CONTROLLER__?: unknown }
+    ).__MARIMO_HAS_WASM_CONTROLLER__ = "true";
+    expect(getWasmWorkerName()).toBe("0.0.0-test");
+  });
+});

package/src/core/wasm/bridge.ts

@@ -37,7 +37,7 @@ import type { IConnectionTransport } from "../websocket/transports/transport";
 import { PyodideRouter } from "./router";
 import { getWorkerRPC } from "./rpc";
 import { createShareableLink } from "./share";
-import { wasmInitializationAtom } from "./state";
+import { wasmInitializationAtom, wasmInitStatusAtom } from "./state";
 import { fallbackFileStore, notebookFileStore } from "./store";
 import { isWasm } from "./utils";
 import type { SaveWorkerSchema } from "./worker/save-worker";
@@ -81,9 +81,9 @@ export class PyodideBridge implements RunRequests, EditRequests {
       new URL("./worker/save-worker.ts", import.meta.url),
       {
         type: "module",
-        // Pass the version to the worker
+        // Pass the version (and optional capability suffix) to the worker
         /* @vite-ignore */
-        name: getMarimoVersion(),
+        name: getWasmWorkerName(),
       },
     );
 
@@ -101,9 +101,9 @@ export class PyodideBridge implements RunRequests, EditRequests {
       new URL("./worker/worker.ts", import.meta.url),
       {
         type: "module",
-        // Pass the version to the worker
+        // Pass the version (and optional capability suffix) to the worker
         /* @vite-ignore */
-        name: getMarimoVersion(),
+        name: getWasmWorkerName(),
       },
     );
 
@@ -119,13 +119,15 @@ export class PyodideBridge implements RunRequests, EditRequests {
       // By initializing after, we get hits on cached network requests
       this.saveRpc = this.getSaveWorker();
       this.setInterruptBuffer();
+      store.set(wasmInitStatusAtom, "ready");
       this.initialized.resolve();
     });
     this.rpc.addMessageListener("initializingMessage", ({ message }) => {
       store.set(wasmInitializationAtom, message);
     });
     this.rpc.addMessageListener("initializedError", ({ error }) => {
-      // If already resolved, show a toast
+      // If already initialized, surface as a toast and leave the deferred /
+      // init status alone — the worker is healthy, this is a runtime error.
       if (this.initialized.status === "resolved") {
         Logger.error(error);
         toast({
@@ -133,7 +135,9 @@ export class PyodideBridge implements RunRequests, EditRequests {
           description: error,
           variant: "danger",
         });
+        return;
       }
+      store.set(wasmInitStatusAtom, "error");
       this.initialized.reject(new Error(error));
     });
     this.rpc.addMessageListener("kernelMessage", ({ message }) => {
@@ -634,3 +638,17 @@ export function createPyodideConnection(): IConnectionTransport {
     PyodideBridge.INSTANCE.attachMessageConsumer(callback);
   });
 }
+
+// Compose the worker name. The version prefix is read by getMarimoVersion()
+// in the worker; the optional "::controller" suffix tells getController.ts
+// that the host page provides a custom /wasm/controller.js and that the
+// dynamic import should be attempted. Hosts opt in by setting
+// `window.__MARIMO_HAS_WASM_CONTROLLER__ = true` before
+// PyodideBridge/worker initialization.
+export function getWasmWorkerName(): string {
+  const hasCustomController =
+    typeof window !== "undefined" &&
+    (window as unknown as { __MARIMO_HAS_WASM_CONTROLLER__?: boolean })
+      .__MARIMO_HAS_WASM_CONTROLLER__ === true;
+  return getMarimoVersion() + (hasCustomController ? "::controller" : "");
+}

package/src/core/wasm/state.ts

@@ -5,6 +5,9 @@ import { isOutputEmpty } from "../cells/outputs";
 
 export const wasmInitializationAtom = atom<string>("Initializing...");
 
+export type WasmInitStatus = "loading" | "ready" | "error";
+export const wasmInitStatusAtom = atom<WasmInitStatus>("loading");
+
 export const hasAnyOutputAtom = atom<boolean>((get) => {
   const notebook = get(notebookAtom);
   const runtimeStates = Object.values(notebook.cellRuntime);

package/src/core/wasm/worker/getController.ts

@@ -5,6 +5,13 @@ import type { WasmController } from "./types";
 // Load the controller
 // Falls back to the default controller
 export async function getController(version: string): Promise<WasmController> {
+  // Hosts that provide a custom /wasm/controller.js opt in via the worker
+  // name (see bridge.ts). Default: skip the dynamic import to avoid a
+  // guaranteed-404 round trip on the standard build.
+  const hasCustomController = self.name?.includes("::controller") ?? false;
+  if (!hasCustomController) {
+    return new DefaultWasmController();
+  }
   try {
     const controller = await import(
       /* @vite-ignore */ `/wasm/controller.js?version=${version}`

package/src/core/wasm/worker/save-worker.ts

@@ -103,5 +103,6 @@ const rpc = createRPC<SaveWorkerSchema, ParentSchema>({
 rpc.send("ready", {});
 
 function getMarimoVersion() {
-  return self.name; // We store the version in the worker name
+  // Worker name is "<version>" or "<version>::<capability>" — see bridge.ts.
+  return self.name.split("::")[0];
 }

package/src/core/wasm/worker/worker.ts

@@ -375,7 +375,8 @@ const namesThatRequireSync = new Set<keyof RawBridge>([
 ]);
 
 function getMarimoVersion() {
-  return self.name; // We store the version in the worker name
+  // Worker name is "<version>" or "<version>::<capability>" — see bridge.ts.
+  return self.name.split("::")[0];
 }
 
 const pyodideReadyPromise = t.wrapAsync(loadPyodideAndPackages)();

package/src/plugins/core/RenderHTML.tsx

@@ -6,6 +6,7 @@ import parse, {
   type HTMLReactParserOptions,
 } from "html-react-parser";
 import React, {
+  cloneElement,
   isValidElement,
   type JSX,
   type ReactNode,
@@ -169,6 +170,35 @@ const addCopyButtonToCodehilite: TransformFn = (
   }
 };
 
+// Decorator (not a match-and-replace transform): applies a src-based key
+// to <img> elements so they remount on src change. Reusing an <img> across
+// src changes can leave the previous image painted (e.g. when the new
+// request is slow/blocked, served stale by a CDN, or fails CORS), so the
+// user sees the old image even though the HTML source is up to date.
+//
+// Runs unconditionally after the match-and-replace transforms so it still
+// applies when an <img> was already wrapped by, say, wrapTooltipTargets.
+const keyImagesBySrc: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+  index: number,
+): JSX.Element | undefined => {
+  if (!(domNode instanceof Element) || domNode.name !== "img") {
+    return undefined;
+  }
+  const src = domNode.attribs?.src;
+  if (!src || !isValidElement(reactNode)) {
+    return undefined;
+  }
+  // data: URIs are inline — no network fetch — so they can't go stale.
+  // Skip to avoid bloating the React key with a megabyte base64 payload.
+  // URI schemes are case-insensitive per RFC 3986.
+  if (/^data:/i.test(src)) {
+    return undefined;
+  }
+  return cloneElement(reactNode, { key: `${src}-${index}` });
+};
+
 // Wrap elements with data-marimo-doc attribute in a DocHoverTarget
 const wrapDocHoverTargets: TransformFn = (
   reactNode: ReactNode,
@@ -281,6 +311,8 @@ function parseHtml({
     ...additionalReplacements,
   ];
 
+  // Match-and-replace transforms: the first one that returns a value wins
+  // (short-circuits the rest).
   const transformFunctions: TransformFn[] = [
     addCopyButtonToCodehilite,
     preserveQueryParamsInAnchorLinks,
@@ -290,6 +322,12 @@ function parseHtml({
     removeWrappingHtmlTags,
   ];
 
+  // Decorators: run unconditionally on the result of the transform pipeline
+  // and may further wrap/clone it. Used for cross-cutting concerns that
+  // should apply regardless of which (if any) match-and-replace transform
+  // ran above.
+  const decoratorFunctions: TransformFn[] = [keyImagesBySrc];
+
   return parse(html, {
     replace: (domNode: DOMNode, index: number) => {
       for (const renderFunction of renderFunctions) {
@@ -301,13 +339,21 @@ function parseHtml({
       return domNode;
     },
     transform: (reactNode: ReactNode, domNode: DOMNode, index: number) => {
+      let result: ReactNode = reactNode as JSX.Element;
       for (const transformFunction of transformFunctions) {
-        const transformed = transformFunction(reactNode, domNode, index);
+        const transformed = transformFunction(result, domNode, index);
         if (transformed) {
-          return transformed;
+          result = transformed;
+          break;
+        }
+      }
+      for (const decorate of decoratorFunctions) {
+        const decorated = decorate(result, domNode, index);
+        if (decorated) {
+          result = decorated;
         }
       }
-      return reactNode as JSX.Element;
+      return result as JSX.Element;
     },
   });
 }

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -60,6 +60,60 @@ describe("parseHtml", () => {
     `);
   });
 
+  test("img has key derived from src so React remounts on src change", () => {
+    const html = '<img src="https://cdn.example.com/a.png" alt="a">';
+    const result = parseHtml({ html }) as React.ReactElement;
+    expect(result.key).toBe("https://cdn.example.com/a.png-0");
+  });
+
+  test("multiple imgs each get distinct keys", () => {
+    const html =
+      '<div><img src="https://cdn.example.com/a.png"><img src="https://cdn.example.com/b.png"></div>';
+    const result = parseHtml({ html }) as React.ReactElement<{
+      children: React.ReactElement[];
+    }>;
+    const children = result.props.children;
+    expect(children[0].key).toBe("https://cdn.example.com/a.png-0");
+    expect(children[1].key).toBe("https://cdn.example.com/b.png-1");
+  });
+
+  test("img without src is left alone", () => {
+    const html = "<img>";
+    const result = parseHtml({ html }) as React.ReactElement;
+    expect(result.key).toBeNull();
+  });
+
+  test("img with data: URI is not keyed (inline, no network fetch)", () => {
+    const longPayload = "A".repeat(10_000);
+    const html = `<img src="data:image/png;base64,${longPayload}">`;
+    const result = parseHtml({ html }) as React.ReactElement;
+    // No remount-on-src needed for inline images, so we leave the key
+    // unset rather than bloat it with the base64 payload.
+    expect(result.key).toBeNull();
+  });
+
+  test("img with uppercase DATA: URI is also skipped (scheme is case-insensitive)", () => {
+    const html = `<img src="DATA:image/png;base64,${"A".repeat(100)}">`;
+    const result = parseHtml({ html }) as React.ReactElement;
+    expect(result.key).toBeNull();
+  });
+
+  test("img wrapped by data-tooltip is still keyed by src", () => {
+    const html =
+      '<img src="https://cdn.example.com/a.png" data-tooltip="hi" alt="a">';
+    const result = parseHtml({ html }) as React.ReactElement;
+    // Outer Tooltip carries the src-based key so it remounts on src change,
+    // forcing the inner <img> to remount as well.
+    expect(result.key).toBe("https://cdn.example.com/a.png-0");
+  });
+
+  test("img wrapped by data-marimo-doc is still keyed by src", () => {
+    const html =
+      '<img src="https://cdn.example.com/b.png" data-marimo-doc="foo.bar">';
+    const result = parseHtml({ html }) as React.ReactElement;
+    expect(result.key).toBe("https://cdn.example.com/b.png-0");
+  });
+
   test("codehilite with copy button", () => {
     const html =
       '<div class="codehilite"><pre><code>console.log("Hello");</code></pre></div>';

package/src/plugins/impl/common/labeled.tsx

@@ -44,7 +44,7 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
   }
 
   const labelElement = (
-    <div part="label" className="m-0 p-0">
+    <div part="label" className="inline-flex items-center m-0 p-0">
       <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
         {renderHTML({ html: label })}
       </Label>

package/dist/assets/__vite-browser-external-C4JkHbyY.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-D-EdLKct.js";var t=e(((e,t)=>{t.exports={}}));export default t();