@marimo-team/islands 0.23.12-dev8 → 0.23.12

package/src/core/islands/parse.ts

@@ -3,8 +3,10 @@
 import {
   ISLAND_DATA_ATTRIBUTES,
   ISLAND_TAG_NAMES,
+  ISLANDS_JSON_SCRIPT_TYPE,
 } from "@/core/islands/constants";
 import { Logger } from "@/utils/Logger";
+import { isRecord } from "@/utils/records";
 
 /**
  * DOM elements look like this:
@@ -23,6 +25,10 @@ export interface MarimoIslandApp {
    * ID since we allow multiple apps on the same page.
    */
   id: string;
+  /**
+   * Whether cells came from a supported JSON payload instead of DOM parsing.
+   */
+  payloadBacked?: boolean;
   /**
    * Cells in the app.
    */
@@ -42,6 +48,30 @@ interface MarimoIslandCell {
    * Index of the cell.
    */
   idx: number;
+  /**
+   * Stable cell identifier, when provided by the island payload.
+   */
+  cellId?: string;
+  /**
+   * Whether the generated marimo cell should be present but not executed.
+   */
+  disabled?: boolean;
+}
+
+interface MarimoIslandPayload {
+  schemaVersion: 1;
+  appId: string;
+  cells: MarimoIslandPayloadCell[];
+}
+
+interface MarimoIslandPayloadCell {
+  cellId: string;
+  code: string;
+  outputHtml: string;
+  outputMimetype: string;
+  reactive: boolean;
+  displayCode: boolean;
+  displayOutput: boolean;
 }
 
 /**
@@ -51,14 +81,20 @@ interface MarimoIslandCell {
 export function parseMarimoIslandApps(
   root: Document | Element = document,
 ): MarimoIslandApp[] {
-  const embeds = root.querySelectorAll<HTMLElement>(ISLAND_TAG_NAMES.ISLAND);
+  const embeds = [
+    ...root.querySelectorAll<HTMLElement>(ISLAND_TAG_NAMES.ISLAND),
+  ];
+  const payloads = parseMarimoIslandPayloads(root);
   if (embeds.length === 0) {
     Logger.warn("No embedded marimo apps found.");
     return [];
   }
 
-  // eslint-disable-next-line prefer-spread
-  return parseIslandElementsIntoApps(Array.from(embeds));
+  if (payloads.length > 0) {
+    return parsePayloadBackedApps(embeds, payloads);
+  }
+
+  return parseIslandElementsIntoApps(embeds);
 }
 
 /**
@@ -90,11 +126,12 @@ export function parseIslandElementsIntoApps(
       continue;
     }
 
-    if (!apps.has(appId)) {
-      apps.set(appId, { id: appId, cells: [] });
+    let app = apps.get(appId);
+    if (!app) {
+      app = { id: appId, cells: [] };
+      apps.set(appId, app);
     }
 
-    const app = apps.get(appId)!;
     const idx = app.cells.length;
     app.cells.push({
       output: cellData.output,
@@ -109,6 +146,159 @@ export function parseIslandElementsIntoApps(
   return [...apps.values()];
 }
 
+function parsePayloadBackedApps(
+  embeds: HTMLElement[],
+  payloads: MarimoIslandPayload[],
+): MarimoIslandApp[] {
+  const apps = new Map<string, MarimoIslandApp>();
+  const matchedPayloadCells = new Map<MarimoIslandPayloadCell, HTMLElement>();
+  const consumedEmbeds = new Set<HTMLElement>();
+  const acceptedPayloads: MarimoIslandPayload[] = [];
+
+  for (const payload of payloads) {
+    let hasMatchedIsland = false;
+    for (const cell of payload.cells) {
+      const embed = findMatchingIsland({
+        embeds,
+        appId: payload.appId,
+        cell,
+        consumedEmbeds,
+      });
+      if (!embed) {
+        continue;
+      }
+      consumedEmbeds.add(embed);
+      matchedPayloadCells.set(cell, embed);
+      materializeIslandPayload(embed, cell);
+      hasMatchedIsland = true;
+    }
+    // Only payloads matched to island anchors can start runtime apps.
+    if (hasMatchedIsland) {
+      acceptedPayloads.push(payload);
+    }
+  }
+
+  const payloadAppIds = new Set(
+    acceptedPayloads.map((payload) => payload.appId),
+  );
+  const reactivePayloadAppIds = new Set(
+    acceptedPayloads
+      .filter((payload) => payload.cells.some((cell) => cell.reactive))
+      .map((payload) => payload.appId),
+  );
+
+  for (const payload of acceptedPayloads) {
+    for (const cell of payload.cells) {
+      const embed = matchedPayloadCells.get(cell);
+      // Static-only payload apps render from HTML and do not need a Pyodide
+      // session.
+      if (!reactivePayloadAppIds.has(payload.appId)) {
+        continue;
+      }
+
+      let app = apps.get(payload.appId);
+      if (!app) {
+        app = { id: payload.appId, payloadBacked: true, cells: [] };
+        apps.set(payload.appId, app);
+      }
+
+      const idx = app.cells.length;
+      const appCell: MarimoIslandCell = {
+        cellId: cell.cellId,
+        output: cell.outputHtml,
+        code: cell.reactive ? cell.code : "",
+        idx: idx,
+      };
+      // Keep static cells in the generated file so later reactive cells keep
+      // stable runtime indices without executing static code.
+      if (!cell.reactive) {
+        appCell.disabled = true;
+      }
+      app.cells.push(appCell);
+      if (cell.reactive) {
+        embed?.setAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX, idx.toString());
+      }
+    }
+  }
+
+  // A supported payload is the runtime source for its app. Extra same-app DOM
+  // islands are disconnected from runtime binding.
+  for (const embed of embeds) {
+    const appId = embed.getAttribute(ISLAND_DATA_ATTRIBUTES.APP_ID);
+    if (appId && payloadAppIds.has(appId) && !consumedEmbeds.has(embed)) {
+      embed.removeAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID);
+      embed.removeAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX);
+      embed.setAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE, "false");
+    }
+  }
+
+  const domOnlyEmbeds = embeds.filter((embed) => {
+    const appId = embed.getAttribute(ISLAND_DATA_ATTRIBUTES.APP_ID);
+    return !appId || !payloadAppIds.has(appId);
+  });
+
+  return [...apps.values(), ...parseIslandElementsIntoApps(domOnlyEmbeds)];
+}
+
+function findMatchingIsland({
+  embeds,
+  appId,
+  cell,
+  consumedEmbeds,
+}: {
+  embeds: HTMLElement[];
+  appId: string;
+  cell: MarimoIslandPayloadCell;
+  consumedEmbeds: Set<HTMLElement>;
+}): HTMLElement | undefined {
+  return embeds.find((embed) => {
+    if (consumedEmbeds.has(embed)) {
+      return false;
+    }
+    return (
+      embed.getAttribute(ISLAND_DATA_ATTRIBUTES.APP_ID) === appId &&
+      embed.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID) === cell.cellId
+    );
+  });
+}
+
+function materializeIslandPayload(
+  embed: HTMLElement,
+  cell: MarimoIslandPayloadCell,
+): void {
+  embed.setAttribute(
+    ISLAND_DATA_ATTRIBUTES.REACTIVE,
+    JSON.stringify(cell.reactive),
+  );
+  // The runtime file is synthesized from payload order, so DOM anchors bind
+  // by index.
+  embed.removeAttribute(ISLAND_DATA_ATTRIBUTES.CELL_ID);
+  if (!cell.reactive) {
+    embed.removeAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX);
+  }
+
+  const output = ensureIslandChild(embed, ISLAND_TAG_NAMES.CELL_OUTPUT);
+  output.innerHTML = cell.displayOutput ? cell.outputHtml : "";
+
+  const code = ensureIslandChild(embed, ISLAND_TAG_NAMES.CELL_CODE);
+  code.hidden = true;
+  code.textContent = encodeURIComponent(cell.code);
+
+  const editor = embed.querySelector<HTMLElement>(ISLAND_TAG_NAMES.CODE_EDITOR);
+  if (editor) {
+    editor.setAttribute("data-initial-value", JSON.stringify(cell.code));
+  }
+}
+
+function ensureIslandChild(embed: HTMLElement, tagName: string): HTMLElement {
+  let child = embed.querySelector<HTMLElement>(tagName);
+  if (!child) {
+    child = embed.ownerDocument.createElement(tagName);
+    embed.appendChild(child);
+  }
+  return child;
+}
+
 /**
  * Parses a single island element into cell data
  * @param embed - The island HTML element
@@ -132,26 +322,35 @@ export function parseIslandElement(
   };
 }
 
-export function createMarimoFile(app: { cells: { code: string }[] }): string {
+export function createMarimoFile(app: {
+  cells: { code: string; disabled?: boolean }[];
+}): string {
   const lines = [
     "import marimo",
     "app = marimo.App()",
     app.cells
       .map((cell) => {
-        // Add 4 spaces to each line
-        const code = cell.code
-          .split("\n")
-          .map((line) => `    ${line}`)
-          .join("\n");
+        // Disabled payload cells are placeholders. Emit pass so static code
+        // does not define names in the runtime graph.
+        const sourceCode = cell.disabled ? "" : cell.code;
+        const code = sourceCode
+          ? sourceCode
+              .split("\n")
+              .map((line) => `    ${line}`)
+              .join("\n")
+          : "    pass";
 
         // TODO: Handle async cells better
         // This is probably not the best way to check if the code is async
         // Ideally this is pushed into the Python code
         const isAsync = code.includes("await ");
         const prefix = isAsync ? "async def" : "def";
+        const decorator = cell.disabled
+          ? "@app.cell(disabled=True)"
+          : "@app.cell";
 
         // Wrap in a function
-        return `@app.cell\n${prefix} __():\n${code}\n    return`;
+        return `${decorator}\n${prefix} __():\n${code}\n    return`;
       })
       .join("\n"),
   ];
@@ -204,3 +403,81 @@ export function extractIslandCodeFromEmbed(embed: HTMLElement): string {
 
   return "";
 }
+
+function parseMarimoIslandPayloads(
+  root: Document | Element,
+): MarimoIslandPayload[] {
+  const scripts = root.querySelectorAll<HTMLScriptElement>(
+    `script[type="${ISLANDS_JSON_SCRIPT_TYPE}"]`,
+  );
+  const payloads: MarimoIslandPayload[] = [];
+
+  for (const script of scripts) {
+    if (isNestedIslandPayloadScript(script)) {
+      continue;
+    }
+    const payload = parseMarimoIslandPayload(script.textContent);
+    if (payload) {
+      payloads.push(payload);
+    }
+  }
+
+  return payloads;
+}
+
+function isNestedIslandPayloadScript(script: HTMLScriptElement): boolean {
+  return Boolean(
+    script.closest(ISLAND_TAG_NAMES.ISLAND) ||
+    script.closest(ISLAND_TAG_NAMES.CELL_OUTPUT),
+  );
+}
+
+function parseMarimoIslandPayload(
+  text: string | undefined | null,
+): MarimoIslandPayload | null {
+  if (!text) {
+    return null;
+  }
+
+  try {
+    const payload = JSON.parse(text);
+    if (isMarimoIslandPayload(payload)) {
+      return payload;
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+}
+
+function isMarimoIslandPayload(
+  payload: unknown,
+): payload is MarimoIslandPayload {
+  if (!isRecord(payload)) {
+    return false;
+  }
+  return (
+    payload.schemaVersion === 1 &&
+    typeof payload.appId === "string" &&
+    Array.isArray(payload.cells) &&
+    payload.cells.every(isMarimoIslandPayloadCell)
+  );
+}
+
+function isMarimoIslandPayloadCell(
+  cell: unknown,
+): cell is MarimoIslandPayloadCell {
+  if (!isRecord(cell)) {
+    return false;
+  }
+  return (
+    typeof cell.cellId === "string" &&
+    typeof cell.code === "string" &&
+    typeof cell.outputHtml === "string" &&
+    typeof cell.outputMimetype === "string" &&
+    typeof cell.reactive === "boolean" &&
+    typeof cell.displayCode === "boolean" &&
+    typeof cell.displayOutput === "boolean"
+  );
+}

package/src/plugins/impl/DataTablePlugin.tsx

@@ -21,6 +21,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { useLocale } from "react-aria";
 import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import type { CellSelectionState } from "@/components/data-table/cell-selection/types";
@@ -75,6 +76,7 @@ import { useEffectSkipFirstRender } from "@/hooks/useEffectSkipFirstRender";
 import { Arrays } from "@/utils/arrays";
 import { Functions } from "@/utils/functions";
 import { Logger } from "@/utils/Logger";
+import { prettyNumber } from "@/utils/numbers";
 import {
   generateColumns,
   inferFieldTypes,
@@ -699,7 +701,9 @@ export const LoadingDataTableComponent = memo(
     >(async () => {
       // TODO: props.get_column_summaries is always true,
       // so we are unable to detect if the function is registered
-      if (props.totalRows === 0 || !props.showColumnSummaries) {
+      // Column summaries come from a kernel RPC, absent in static exports.
+      const isStatic = isStaticNotebook();
+      if (props.totalRows === 0 || !props.showColumnSummaries || isStatic) {
         return {
           data: null,
           stats: {},
@@ -875,10 +879,13 @@ const DataTableComponent = ({
     sizeBytesIsLoading?: boolean;
   }): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
   const { isPanelOpen, isAnyPanelOpen, togglePanel, panelType, setPanelType } =
     usePanelOwnership(id, cellId);
 
+  const isStatic = isStaticNotebook();
+
   const chartSpecModel = useMemo(() => {
     if (!columnSummaries) {
       return ColumnChartSpecModel.EMPTY;
@@ -949,6 +956,11 @@ const DataTableComponent = ({
     showDataTypes = false;
   }
 
+  // Row/cell selection writes back to the kernel, absent in static exports.
+  if (isStatic) {
+    selection = null;
+  }
+
   const columns = useMemo(
     () =>
       generateColumns({
@@ -1109,6 +1121,13 @@ const DataTableComponent = ({
           Result clipped. Showing {shownColumns} of {totalColumns} columns.
         </Banner>
       )}
+      {isStatic && typeof totalRows === "number" && data.length < totalRows && (
+        <Banner className="mb-1 rounded">
+          Showing the first <strong>{prettyNumber(data.length, locale)}</strong>{" "}
+          of <strong>{prettyNumber(totalRows, locale)}</strong> rows. Increase
+          the table's <code>page_size</code> to embed more in the static export.
+        </Banner>
+      )}
       {columnSummaries?.is_disabled && (
         // Note: Keep the text in sync with the constant defined in table_manager.py
         //       This hard-code can be removed when Functions can pass structural

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -6,7 +6,7 @@ const TooltipProvider = Tooltip.Provider;
 
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { Provider } from "jotai";
-import { beforeAll, describe, expect, it, vi } from "vitest";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import type { DownloadAsArgs } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
@@ -17,6 +17,14 @@ import {
   LoadingDataTableComponent,
 } from "../DataTablePlugin";
 
+// Default to normal (non-static) mode; individual tests flip this on.
+const mockIsStatic = vi.fn().mockReturnValue(false);
+vi.mock("@/core/static/static-state", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/core/static/static-state")>();
+  return { ...actual, isStaticNotebook: () => mockIsStatic() };
+});
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
 });
@@ -157,3 +165,135 @@ describe("LoadingDataTableComponent", () => {
     });
   });
 });
+
+describe("static notebook control suppression", () => {
+  const fieldTypes: FieldTypesWithExternalType = [
+    ["id", ["integer", "integer"]],
+    ["name", ["string", "string"]],
+  ];
+
+  // Only the first page is embedded in a static export; the total is larger.
+  const TOTAL_ROWS = 50;
+  const PAGE_SIZE = 10;
+  const firstPage = JSON.stringify(
+    Array.from({ length: PAGE_SIZE }, (_, i) => ({
+      id: i + 1,
+      name: `item-${i + 1}`,
+    })),
+  );
+
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </Provider>
+  );
+
+  const makeProps = () => {
+    const host = document.createElement("div");
+    return {
+      label: null,
+      totalRows: TOTAL_ROWS,
+      pagination: true,
+      pageSize: PAGE_SIZE,
+      selection: "multi" as const,
+      showDownload: true,
+      showFilters: true,
+      showColumnSummaries: true as const,
+      showDataTypes: true,
+      showPageSizeSelector: true,
+      showColumnExplorer: false,
+      showRowExplorer: false,
+      showChartBuilder: false,
+      rowHeaders: [] as FieldTypesWithExternalType,
+      fieldTypes,
+      totalColumns: 2,
+      maxColumns: "all" as const,
+      hasStableRowId: true,
+      lazy: false,
+      host,
+      showSearch: true,
+      value: [] as (number | string | { rowId: string; columnName?: string })[],
+      setValue: vi.fn(),
+      data: firstPage,
+      search: vi.fn().mockResolvedValue({
+        data: firstPage,
+        total_rows: TOTAL_ROWS,
+        cell_styles: null,
+        cell_hover_texts: null,
+      }),
+      download_as: vi.fn() as DownloadAsArgs,
+      get_column_summaries: vi.fn().mockResolvedValue({
+        data: null,
+        stats: {},
+        bin_values: {},
+        value_counts: {},
+        show_charts: false,
+      }),
+      get_data_url: vi.fn() as GetDataUrl,
+      get_row_ids: vi.fn() as GetRowIds,
+      get_size_bytes: vi.fn().mockResolvedValue({ size_bytes: null }),
+    };
+  };
+
+  beforeEach(() => {
+    mockIsStatic.mockReturnValue(false);
+  });
+
+  it("renders kernel-dependent controls in normal mode", async () => {
+    const props = makeProps();
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent {...props} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+    expect(screen.getByTestId("next-page-button")).toBeInTheDocument();
+    expect(screen.getByTestId("select-all-checkbox")).toBeInTheDocument();
+    expect(props.get_column_summaries).toHaveBeenCalled();
+    expect(screen.queryByText(/Showing the first/)).not.toBeInTheDocument();
+  });
+
+  it("suppresses kernel-dependent controls in static mode", async () => {
+    mockIsStatic.mockReturnValue(true);
+    const props = makeProps();
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent {...props} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    // Top bar (search), pagination, and the selection column are gone.
+    expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("next-page-button")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("select-all-checkbox")).not.toBeInTheDocument();
+    // Column summaries never hit the kernel.
+    expect(props.get_column_summaries).not.toHaveBeenCalled();
+    // The truncation banner explains the missing rows.
+    expect(screen.getByText(/Showing the first/)).toBeInTheDocument();
+  });
+
+  it("suppresses search even when the author opts in via showSearch", async () => {
+    mockIsStatic.mockReturnValue(true);
+    const props = makeProps();
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent {...props} showSearch={true} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument();
+  });
+});

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

@@ -10,8 +10,9 @@ 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 { MODEL_MANAGER, type Model } from "./model";
+import { getMarimoInternal, MODEL_MANAGER, type Model } from "./model";
 import type { ModelState, WidgetModelId } from "./types";
 import { BINDING_MANAGER, WIDGET_DEF_REGISTRY } from "./widget-binding";
 
@@ -140,10 +141,9 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
   }
 
   if (!isAnyWidgetModule(jsModule)) {
-    const error = new Error(
-      `Module at ${jsUrl} does not appear to be a valid anywidget`,
+    return (
+      <ErrorBanner error={getInvalidAnyWidgetModuleError(jsModule, jsUrl)} />
     );
-    return <ErrorBanner error={error} />;
   }
 
   return (
@@ -178,6 +178,9 @@ async function runAnyWidgetModule<T extends AnyWidgetState>(
     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");
@@ -197,6 +200,52 @@ function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
   );
 }
 
+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;
@@ -247,4 +296,5 @@ export const visibleForTesting = {
   LoadedSlot,
   runAnyWidgetModule,
   isAnyWidgetModule,
+  getInvalidAnyWidgetModuleError,
 };