@marimo-team/islands 0.23.14-dev56 → 0.23.14-dev59

package/dist/{reveal-component-bWXDKgVc.js → reveal-component-BLijd8xt.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom, pt as outputIsStale } from "./html-to-image-hevd6UWC.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 PanelGroup, i as DEFAULT_DECK_TRANSITION, lt as PanelResizeHandle, on as EyeOff, s as SlideSidebar, sn as Expand, st as Panel, t as useNotebookCodeAvailable, un as Code } from "./code-visibility-D7wWXyyp.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelGroup, i as DEFAULT_DECK_TRANSITION, lt as PanelResizeHandle, on as EyeOff, s as SlideSidebar, sn as Expand, st as Panel, t as useNotebookCodeAvailable, un as Code } from "./code-visibility-ChrxMIRR.js";
 import { X as useDebouncedCallback } from "./input-DtsN7xm-.js";
 import "./toDate-CWNNlFEX.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.14-dev56",
+  "version": "0.23.14-dev59",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^3.0.134",
-    "@anywidget/types": "^0.2.0",
+    "@anywidget/types": "^0.4.0",
     "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.2",
     "@codemirror/lang-markdown": "^6.5.0",

package/src/core/islands/bootstrap.ts

@@ -5,8 +5,8 @@ import { ISLAND_CSS_CLASSES, ISLAND_TAG_NAMES } from "@/core/islands/constants";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   handleWidgetMessage,
-  MODEL_MANAGER,
-} from "@/plugins/impl/anywidget/model";
+  WIDGET_REGISTRY,
+} from "@/plugins/impl/anywidget/registry";
 import { initializePlugins } from "@/plugins/plugins";
 import { Functions } from "@/utils/functions";
 import {
@@ -253,7 +253,7 @@ function handleMessage(
         return;
 
       case "model-lifecycle":
-        handleWidgetMessage(MODEL_MANAGER, msg.data);
+        handleWidgetMessage(WIDGET_REGISTRY, msg.data);
         return;
 
       case "consumer-capabilities":

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -16,8 +16,8 @@ import { useConnectionTransport } from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   handleWidgetMessage,
-  MODEL_MANAGER,
-} from "@/plugins/impl/anywidget/model";
+  WIDGET_REGISTRY,
+} from "@/plugins/impl/anywidget/registry";
 import { logNever } from "@/utils/assertNever";
 import { prettyError } from "@/utils/errors";
 import {
@@ -284,7 +284,7 @@ export function useMarimoKernelConnection(opts: {
       }
 
       case "model-lifecycle":
-        handleWidgetMessage(MODEL_MANAGER, msg.data);
+        handleWidgetMessage(WIDGET_REGISTRY, msg.data);
         return;
 
       case "remove-ui-elements":

package/src/mount.tsx

@@ -54,8 +54,8 @@ import { notebookFileStore } from "./core/wasm/store";
 import { WebSocketState } from "./core/websocket/types";
 import {
   handleWidgetMessage,
-  MODEL_MANAGER,
-} from "./plugins/impl/anywidget/model";
+  WIDGET_REGISTRY,
+} from "./plugins/impl/anywidget/registry";
 import { vegaLoader } from "./plugins/impl/vega/loader";
 import { initializePlugins } from "./plugins/plugins";
 import { ThemeProvider } from "./theme/ThemeProvider";
@@ -369,7 +369,7 @@ function hydrateStaticModels(): void {
     return;
   }
   for (const notification of notifications) {
-    handleWidgetMessage(MODEL_MANAGER, notification);
+    handleWidgetMessage(WIDGET_REGISTRY, notification);
   }
 }
 

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -1,32 +1,21 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable typescript/no-explicit-any */
 
-import type { AnyWidget } from "@anywidget/types";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
-import { useAsyncData } from "@/hooks/useAsyncData";
-import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
 import type { IPluginProps } from "@/plugins/types";
-import { prettyError } from "@/utils/errors";
-import { Logger } from "@/utils/Logger";
-import { hasFunctionProperty, isRecord } from "@/utils/records";
 import { ErrorBanner } from "../common/error-banner";
-import { getMarimoInternal, MODEL_MANAGER, type Model } from "./model";
-import type { ModelState, WidgetModelId } from "./types";
-import { BINDING_MANAGER, WIDGET_DEF_REGISTRY } from "./widget-binding";
+import { WIDGET_REGISTRY } from "./registry";
+import { isWidgetModelId, type WidgetModelId } from "./types";
 
 /**
- * AnyWidget asset data
+ * The component's only data attribute; everything else arrives through
+ * the model's comm messages, keyed by this id.
  */
 interface Data {
-  jsUrl: string;
-  jsHash: string;
   modelId: WidgetModelId;
 }
 
-type AnyWidgetState = ModelState;
-
 /**
  * Value payload sent by the frontend on state updates.
  *
@@ -37,315 +26,54 @@ interface ModelIdRef {
   model_id?: WidgetModelId;
 }
 
-export function useAnyWidgetModule(opts: { jsUrl: string; jsHash: string }) {
-  const { jsUrl, jsHash } = opts;
-
-  // JS is an ESM file with a render function on it
-  // export function render({ model, el }) {
-  //   ...
-  const {
-    data: jsModule,
-    error,
-    refetch,
-  } = useAsyncData(async () => {
-    return await WIDGET_DEF_REGISTRY.getModule(jsUrl, jsHash);
-    // Re-render on jsHash change (which is a hash of the contents of the file)
-    // instead of a jsUrl change because URLs may change without the contents
-    // actually changing (and we don't want to re-render on every change).
-    // If there is an error loading the URL (e.g. maybe an invalid or old URL),
-    // we also want to re-render.
-  }, [jsHash]);
-
-  // If there is an error and the jsUrl has changed, we want to re-render
-  // because the URL may have changed to a valid URL.
-  const hasError = Boolean(error);
-  useEffect(() => {
-    if (hasError && jsUrl) {
-      WIDGET_DEF_REGISTRY.invalidate(jsHash);
-      refetch();
-    }
-  }, [hasError, jsUrl]);
-
-  return {
-    jsModule,
-    error,
-  };
-}
-
-export function useMountCss(css: string | null | undefined, host: HTMLElement) {
-  // Mount the CSS
-  useEffect(() => {
-    const shadowRoot = host.shadowRoot;
-    if (!css || !shadowRoot) {
-      return;
-    }
-
-    // Try constructed stylesheets first
-    if (
-      "adoptedStyleSheets" in Document.prototype &&
-      "replace" in CSSStyleSheet.prototype
-    ) {
-      const sheet = new CSSStyleSheet();
-      try {
-        sheet.replaceSync(css);
-        if (shadowRoot) {
-          shadowRoot.adoptedStyleSheets = [
-            ...shadowRoot.adoptedStyleSheets,
-            sheet,
-          ];
-        }
-        return () => {
-          if (shadowRoot) {
-            shadowRoot.adoptedStyleSheets =
-              shadowRoot.adoptedStyleSheets.filter((s) => s !== sheet);
-          }
-        };
-      } catch {
-        // Fall through to inline styles if constructed sheets fail
-      }
-    }
-
-    // Fallback to inline styles
-    const style = document.createElement("style");
-    style.innerHTML = css;
-    shadowRoot.append(style);
-    return () => {
-      style.remove();
-    };
-  }, [css, host]);
-}
-
 export const AnyWidgetPlugin = createPlugin<ModelIdRef>("marimo-anywidget")
   .withData(
     z.object({
-      jsUrl: z.string(),
-      jsHash: z.string(),
-      modelId: z.string().transform((v) => v as WidgetModelId),
+      modelId: z.custom<WidgetModelId>(isWidgetModelId, {
+        message: "Expected a non-empty widget model id",
+      }),
     }),
   )
   .withFunctions({})
   .renderer((props) => <AnyWidgetSlot {...props} />);
 
-const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
-  const { jsUrl, jsHash, modelId } = props.data;
-  const host = props.host as HTMLElementNotDerivedFromRef;
-
-  const { jsModule, error } = useAnyWidgetModule({ jsUrl, jsHash });
-
-  if (error) {
-    return <ErrorBanner error={error} />;
-  }
-
-  if (!jsModule) {
-    return null;
-  }
-
-  const widget = resolveAnyWidget(jsModule, jsUrl);
-  if (!widget) {
-    return (
-      <ErrorBanner error={getInvalidAnyWidgetModuleError(jsModule, jsUrl)} />
-    );
-  }
-
-  return (
-    <LoadedSlot
-      // Force remount when the widget module or model changes (cell re-run).
-      key={`${jsHash}:${modelId}`}
-      widget={widget}
-      modelId={modelId}
-      host={host}
-    />
-  );
-};
-
-/**
- * Run the anywidget module
- *
- * Per AFM spec (anywidget.dev/en/afm):
- * - initialize() is called once per model lifetime
- * - render() is called once per view (can be multiple per model)
- */
-async function runAnyWidgetModule<T extends AnyWidgetState>(
-  widgetDef: AnyWidget<T>,
-  model: Model<T>,
-  modelId: WidgetModelId,
-  el: HTMLElement,
-  signal: AbortSignal,
-): Promise<void> {
-  // Clear the element, in case the widget is re-rendering
-  el.innerHTML = "";
-
-  try {
-    const binding = BINDING_MANAGER.getOrCreate(modelId);
-    const render = await binding.bind(widgetDef, model);
-    await render(el, signal);
-    // Replay current model values so render listeners observe hydrated state
-    // even if backend updates arrived before listeners were attached.
-    getMarimoInternal(model).reemitState();
-  } catch (error) {
-    Logger.error("Error rendering anywidget", error);
-    el.classList.add("text-error");
-    el.innerHTML = `Error rendering anywidget: ${prettyError(error)}`;
-  }
-}
-
-function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
-  if (!mod.default) {
-    return false;
-  }
-
-  return (
-    typeof mod.default === "function" ||
-    typeof mod.default?.render === "function" ||
-    typeof mod.default?.initialize === "function"
-  );
-}
-
-const warnedLegacyNamedExportUrls = new Set<string>();
-// Cache the synthesized widget per module namespace so its identity stays
-// stable across re-renders (like a default export), avoiding needless
-// WidgetBinding re-initialization.
-const legacyWidgetCache = new WeakMap<object, AnyWidget>();
-
 /**
- * Resolve the AnyWidget from a loaded module: prefer the AFM-spec default
- * export, otherwise synthesize one from legacy named `render`/`initialize`
- * exports. Returns null if neither is present.
+ * React adapter for a runtime-owned view. React supplies only the render
+ * target and its lifetime; the runtime owns models, generations, CSS,
+ * composition, and hot reload.
  */
-function resolveAnyWidget(mod: any, jsUrl: string): AnyWidget | null {
-  if (isAnyWidgetModule(mod)) {
-    return mod.default;
-  }
-
-  // Only fall back to legacy (pre-AFM) named exports when there is no default
-  // export at all; a present-but-invalid default should surface an error
-  // rather than be masked.
-  if (mod?.default != null) {
-    return null;
-  }
-
-  const hasNamedRender = typeof mod?.render === "function";
-  const hasNamedInitialize = typeof mod?.initialize === "function";
-  if (!hasNamedRender && !hasNamedInitialize) {
-    return null;
-  }
-
-  const cached = legacyWidgetCache.get(mod);
-  if (cached) {
-    return cached;
-  }
-
-  if (!warnedLegacyNamedExportUrls.has(jsUrl)) {
-    warnedLegacyNamedExportUrls.add(jsUrl);
-    Logger.warn(
-      `Anywidget module at ${jsUrl} uses deprecated top-level named ` +
-        "exports (`render`/`initialize`). Per the AFM spec, use a default " +
-        "export instead: `export default { render }`. " +
-        "See https://anywidget.dev/en/afm/",
-    );
-  }
-
-  const widget: AnyWidget = { render: mod.render, initialize: mod.initialize };
-  legacyWidgetCache.set(mod, widget);
-  return widget;
-}
-
-function getInvalidAnyWidgetModuleError(mod: unknown, jsUrl: string): Error {
-  const afmDocs = "https://anywidget.dev/en/afm/";
-  const hasNamedRender = isRecord(mod) && hasFunctionProperty(mod, "render");
-  const hasNamedInitialize =
-    isRecord(mod) && hasFunctionProperty(mod, "initialize");
-
-  if (hasNamedRender || hasNamedInitialize) {
-    const namedExports = [
-      hasNamedRender ? "`render`" : null,
-      hasNamedInitialize ? "`initialize`" : null,
-    ]
-      .filter(Boolean)
-      .join(" and ");
-    const lifecycleHooks = [
-      hasNamedRender ? "render" : null,
-      hasNamedInitialize ? "initialize" : null,
-    ].filter((hook): hook is string => hook !== null);
-    const defaultExportExample = `export default { ${lifecycleHooks.join(", ")} }`;
-    const namedExportExample =
-      lifecycleHooks.length === 1
-        ? `export function ${lifecycleHooks[0]}`
-        : "named export function ...";
-    return new Error(
-      `Anywidget module at ${jsUrl} uses named exports (${namedExports}). ` +
-        "Per the AFM spec, use a default export instead: " +
-        `\`${defaultExportExample}\` (not \`${namedExportExample}\`). ` +
-        `See ${afmDocs}`,
-    );
-  }
-
-  if (!isRecord(mod) || mod.default === undefined) {
-    return new Error(
-      `Anywidget module at ${jsUrl} is missing a default export. ` +
-        "Per the AFM spec, use `export default { render }` or " +
-        "`export default async () => ({ render })`. " +
-        `See ${afmDocs}`,
-    );
-  }
-
-  return new Error(
-    `Anywidget module at ${jsUrl} has an invalid default export. ` +
-      "Expected a factory function or an object with `render` or `initialize`. " +
-      `See ${afmDocs}`,
-  );
-}
-
-interface Props<T extends AnyWidgetState> {
-  widget: AnyWidget<T>;
-  modelId: WidgetModelId;
-  host: HTMLElementNotDerivedFromRef;
-}
-
-const LoadedSlot = <T extends AnyWidgetState>({
-  widget,
-  modelId,
-  host,
-}: Props<T> & { widget: AnyWidget<T> }) => {
+const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
+  const { modelId } = props.data;
   const htmlRef = useRef<HTMLDivElement>(null);
-
-  // value is already decoded from wire format, may be null if waiting for open message
-  const model = MODEL_MANAGER.getSync(modelId);
-
-  if (!model) {
-    Logger.error("Model not found for modelId", modelId);
-  }
-
-  const css = model?.get("_css");
-  useMountCss(css, host);
+  const [error, setError] = useState<Error>();
 
   useEffect(() => {
-    if (!htmlRef.current || !model) {
+    const el = htmlRef.current;
+    if (!el) {
       return;
     }
     const controller = new AbortController();
-    runAnyWidgetModule(
-      widget,
-      model,
+    setError(undefined);
+    WIDGET_REGISTRY.createView({
       modelId,
-      htmlRef.current,
-      controller.signal,
-    );
+      el,
+      signal: controller.signal,
+    }).catch((error) => {
+      if (!controller.signal.aborted) {
+        setError(error instanceof Error ? error : new Error(String(error)));
+      }
+    });
     return () => controller.abort();
-    // We re-run the widget when the modelId changes, which means the cell
-    // that created the Widget has been re-run.
-    // We need to re-run the widget because it may contain initialization code
-    // that could be reset by the new widget.
-    // See example: https://github.com/marimo-team/marimo/issues/3962#issuecomment-2703184123
-  }, [widget, modelId, model]);
+  }, [modelId]);
 
-  return <div ref={htmlRef} />;
+  return (
+    <>
+      {error ? <ErrorBanner error={error} /> : null}
+      <div ref={htmlRef} />
+    </>
+  );
 };
 
 export const visibleForTesting = {
-  LoadedSlot,
-  runAnyWidgetModule,
-  isAnyWidgetModule,
-  resolveAnyWidget,
-  getInvalidAnyWidgetModuleError,
+  AnyWidgetSlot,
 };