@marimo-team/frontend 0.19.8-dev5 → 0.19.8-dev50

package/src/core/static/files.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Loader } from "@/plugins/impl/vega/vega-loader";
+import { deserializeBlob } from "@/utils/blob";
+import type { DataURLString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { getStaticVirtualFiles } from "./static-state";
 import type { StaticVirtualFiles } from "./types";
@@ -120,6 +122,24 @@ function withoutLeadingDot(path: string): string {
   return path.startsWith(".") ? path.slice(1) : path;
 }
 
+/**
+ * Resolve a URL to a blob URL if it's a virtual file, for use with dynamic import().
+ * Unlike fetch, import() can't be patched, so we need to convert data URLs to blob URLs.
+ *
+ * @returns The original URL if not a virtual file, or a blob URL if it is
+ */
+export function resolveVirtualFileURL(
+  url: string,
+  files: StaticVirtualFiles = getStaticVirtualFiles(),
+): string {
+  const vfile = maybeGetVirtualFile(url, files);
+  if (!vfile) {
+    return url;
+  }
+  const blob = deserializeBlob(vfile as DataURLString);
+  return URL.createObjectURL(blob);
+}
+
 function maybeGetVirtualFile(
   url: string,
   files: StaticVirtualFiles,
@@ -130,14 +150,11 @@ function maybeGetVirtualFile(
   }
   const pathname = new URL(url, base).pathname;
 
-  // If if the URL starts with file://, then using the document.baseURI
-  // will not work. In this case, should just chop off from /@file/...
-  if (url.startsWith("file://")) {
-    const indexOfFile = url.indexOf("/@file/");
-    if (indexOfFile !== -1) {
-      url = url.slice(indexOfFile);
-    }
-  }
+  // Extract the /@file/... suffix from the URL or pathname
+  // This handles URLs like https://example.com/prefix/@file/foo.js
+  // or file:///path/to/@file/foo.js
+  const filePathFromUrl = extractFilePath(url);
+  const filePathFromPathname = extractFilePath(pathname);
 
   // Few variations to grab the URL.
   // This can happen if a static file was open at file:// or https://
@@ -145,6 +162,19 @@ function maybeGetVirtualFile(
     files[url] ||
     files[withoutLeadingDot(url)] ||
     files[pathname] ||
-    files[withoutLeadingDot(pathname)]
+    files[withoutLeadingDot(pathname)] ||
+    (filePathFromUrl && files[filePathFromUrl]) ||
+    (filePathFromPathname && files[filePathFromPathname])
   );
 }
+
+/**
+ * Extract the /@file/... path from a URL string
+ */
+function extractFilePath(url: string): string | null {
+  const indexOfFile = url.indexOf("/@file/");
+  if (indexOfFile !== -1) {
+    return url.slice(indexOfFile);
+  }
+  return null;
+}

package/src/core/wasm/bridge.ts

@@ -541,7 +541,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
 
   sendModelValue: RunRequests["sendModelValue"] = async (request) => {
     await this.putControlRequest({
-      type: "update-widget-model",
+      type: "model",
       ...request,
     });
     return null;

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -11,7 +11,6 @@ import { useConnectionTransport } from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   handleWidgetMessage,
-  isMessageWidgetState,
   MODEL_MANAGER,
 } from "@/plugins/impl/anywidget/model";
 import { logNever } from "@/utils/assertNever";
@@ -141,31 +140,22 @@ export function useMarimoKernelConnection(opts: {
         return;
 
       case "send-ui-element-message": {
-        const modelId = msg.data.model_id;
         const uiElement = msg.data.ui_element;
-        const message = msg.data.message;
-        const buffers = safeExtractSetUIElementMessageBuffers(msg.data);
-
-        if (modelId && isMessageWidgetState(message)) {
-          handleWidgetMessage({
-            modelId,
-            msg: message,
-            buffers,
-            modelManager: MODEL_MANAGER,
-          });
-        }
-
         if (uiElement) {
+          const buffers = safeExtractSetUIElementMessageBuffers(msg.data);
           UI_ELEMENT_REGISTRY.broadcastMessage(
             uiElement as UIElementId,
             msg.data.message,
             buffers,
           );
         }
-
         return;
       }
 
+      case "model-lifecycle":
+        handleWidgetMessage(MODEL_MANAGER, msg.data);
+        return;
+
       case "remove-ui-elements":
         handleRemoveUIElements(msg.data);
         return;

package/src/plugins/core/registerReactComponent.tsx

@@ -101,10 +101,17 @@ function PluginSlotInternal<T>(
     return plugin.validator.safeParse(parseDataset(hostElement));
   });
 
+  // Incremented on each reset to invalidate memoized function references.
+  // This ensures that plugin functions (e.g., search) are re-created when
+  // the underlying UI element instance changes (new object-id), even if
+  // the element's data attributes haven't changed.
+  const [resetNonce, setResetNonce] = useState(0);
+
   useImperativeHandle(ref, () => ({
     reset: () => {
       setValue(getInitialValue());
       setParsedResult(plugin.validator.safeParse(parseDataset(hostElement)));
+      setResetNonce((n) => n + 1);
     },
     setChildren: (children) => {
       setChildNodes(children);
@@ -224,7 +231,8 @@ function PluginSlotInternal<T>(
     }
 
     return methods;
-  }, [plugin.functions, hostElement]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plugin.functions, hostElement, resetNonce]);
 
   // If we failed to parse the initial value, render an error
   if (!parsedResult.success) {

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

@@ -0,0 +1,164 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { store } from "@/core/state/jotai";
+import {
+  type GetDataUrl,
+  type GetRowIds,
+  LoadingDataTableComponent,
+} from "../DataTablePlugin";
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+describe("LoadingDataTableComponent", () => {
+  /**
+   * Regression test for https://github.com/marimo-team/marimo/issues/8023
+   *
+   * When a table is replaced via mo.output.replace() with updated data,
+   * but the initial page data (unsorted first page) hasn't changed,
+   * the useAsyncData hook's deps may all remain the same.
+   * Previously, the `search` function reference was memoized on
+   * [plugin.functions, hostElement] and wouldn't change on reset(),
+   * so the useAsyncData effect wouldn't re-fire.
+   *
+   * The fix adds a resetNonce to the functionMethods memo deps,
+   * so when the plugin is reset (table instance changes), the search
+   * function reference changes, triggering useAsyncData to re-fetch.
+   *
+   * This test verifies that when the search function reference changes
+   * (simulating reset()), the component re-fetches data even if
+   * props.data hasn't changed.
+   */
+  it("should refetch data when search function reference changes", async () => {
+    const host = document.createElement("div");
+    const setValue = vi.fn();
+
+    // The initial page data string - identical for both renders.
+    // This simulates the case where only a row on page 2 changed,
+    // so the first page data is the same.
+    const initialPageData = JSON.stringify([
+      { id: 1, status: "pending", value: 10 },
+      { id: 2, status: "pending", value: 20 },
+      { id: 3, status: "pending", value: 30 },
+    ]);
+
+    const searchResult = {
+      data: [
+        { id: 1, status: "pending", value: 10 },
+        { id: 2, status: "pending", value: 20 },
+        { id: 3, status: "pending", value: 30 },
+      ],
+      total_rows: 4,
+      cell_styles: null,
+      cell_hover_texts: null,
+    };
+
+    const searchFn1 = vi.fn().mockResolvedValue(searchResult);
+    const searchFn2 = vi.fn().mockResolvedValue(searchResult);
+
+    const fieldTypes: FieldTypesWithExternalType = [
+      ["id", ["integer", "integer"]],
+      ["status", ["string", "string"]],
+      ["value", ["integer", "integer"]],
+    ];
+
+    const commonProps = {
+      label: null,
+      totalRows: 4,
+      pagination: true,
+      pageSize: 3,
+      selection: "single" as const,
+      showDownload: false,
+      showFilters: false,
+      showColumnSummaries: false as const,
+      showDataTypes: false,
+      showPageSizeSelector: false,
+      showColumnExplorer: false,
+      showRowExplorer: false,
+      showChartBuilder: false,
+      rowHeaders: [] as FieldTypesWithExternalType,
+      fieldTypes,
+      totalColumns: 3,
+      maxColumns: "all" as const,
+      hasStableRowId: false,
+      lazy: false,
+      host,
+      enableSearch: true,
+      value: [] as (number | string | { rowId: string; columnName?: string })[],
+      setValue,
+      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,
+    };
+
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>
+        <TooltipProvider>{children}</TooltipProvider>
+      </Provider>
+    );
+
+    // Render with first search function
+    const { rerender } = render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...commonProps}
+          data={initialPageData}
+          search={searchFn1}
+        />
+      </Wrapper>,
+    );
+
+    // Wait for the table to render with data
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    // Search was called on initial load (fire-and-forget for canShowInitialPage)
+    expect(searchFn1).toHaveBeenCalled();
+
+    // Now rerender with the same data but a NEW search function reference.
+    // This simulates what happens after reset() when resetNonce increments
+    // and functionMethods is recreated.
+    await act(async () => {
+      rerender(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...commonProps}
+            data={initialPageData}
+            search={searchFn2}
+          />
+        </Wrapper>,
+      );
+    });
+
+    // The new search function should be called because the search
+    // dependency changed in useAsyncData.
+    await waitFor(() => {
+      expect(searchFn2).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -1,99 +1,58 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { AnyWidget, Experimental } from "@anywidget/types";
-import { isEqual } from "lodash-es";
-import { useEffect, useMemo, useRef } from "react";
-import useEvent from "react-use-event-hook";
+import type { AnyWidget } from "@anywidget/types";
+import { useEffect, useRef } from "react";
 import { z } from "zod";
-import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { asRemoteURL } from "@/core/runtime/config";
+import { resolveVirtualFileURL } from "@/core/static/files";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { useAsyncData } from "@/hooks/useAsyncData";
-import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
-import {
-  type HTMLElementNotDerivedFromRef,
-  useEventListener,
-} from "@/hooks/useEventListener";
+import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
-import { rpc } from "@/plugins/core/rpc";
 import type { IPluginProps } from "@/plugins/types";
-import {
-  decodeFromWire,
-  isWireFormat,
-  serializeBuffersToBase64,
-  type WireFormat,
-} from "@/utils/data-views";
 import { prettyError } from "@/utils/errors";
-import type { Base64String } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { ErrorBanner } from "../common/error-banner";
-import { MODEL_MANAGER, Model } from "./model";
+import { getMarimoInternal, MODEL_MANAGER, type Model } from "./model";
+import type { ModelState, WidgetModelId } from "./types";
 
+/**
+ * AnyWidget asset data
+ */
 interface Data {
   jsUrl: string;
   jsHash: string;
   css?: string | null;
 }
 
-type T = Record<string, unknown>;
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type PluginFunctions = {
-  send_to_widget: <T>(req: {
-    content: unknown;
-    buffers: Base64String[];
-  }) => Promise<null | undefined>;
-};
+type AnyWidgetState = ModelState;
 
-export const AnyWidgetPlugin = createPlugin<WireFormat<T>>("marimo-anywidget")
-  .withData(
-    z.object({
-      jsUrl: z.string(),
-      jsHash: z.string(),
-      css: z.string().nullish(),
-    }),
-  )
-  .withFunctions<PluginFunctions>({
-    send_to_widget: rpc
-      .input(
-        z.object({
-          content: z.unknown(),
-          buffers: z.array(z.string().transform((v) => v as Base64String)),
-        }),
-      )
-      .output(z.null().optional()),
-  })
-  .renderer((props) => <AnyWidgetSlot {...props} />);
-
-const AnyWidgetSlot = (
-  props: IPluginProps<WireFormat<T>, Data, PluginFunctions>,
-) => {
-  const { css, jsUrl, jsHash } = props.data;
+/**
+ * Initial value is a model_id reference.
+ * The backend sends just { model_id: string } and the frontend
+ * retrieves the actual state from the 'open' message.
+ */
+interface ModelIdRef {
+  model_id: WidgetModelId;
+}
 
-  // Decode wire format { state, bufferPaths, buffers } to state with DataViews
-  const valueWithBuffers = useMemo(() => {
-    if (isWireFormat(props.value)) {
-      const decoded = decodeFromWire(props.value);
-      Logger.debug("AnyWidget decoded wire format:", {
-        bufferPaths: props.value.bufferPaths,
-        buffersCount: props.value.buffers?.length,
-        decodedKeys: Object.keys(decoded),
-      });
-      return decoded;
-    }
-    Logger.warn("AnyWidget value is not wire format:", props.value);
-    return props.value;
-  }, [props.value]);
+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: module,
+    data: jsModule,
     error,
     refetch,
   } = useAsyncData(async () => {
-    const url = asRemoteURL(jsUrl).toString();
+    let url = asRemoteURL(jsUrl).toString();
+    // In static notebooks, resolve virtual files to blob URLs for import()
+    if (isStaticNotebook()) {
+      url = resolveVirtualFileURL(url);
+    }
     return await import(/* @vite-ignore */ url);
     // 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
@@ -111,9 +70,16 @@ const AnyWidgetSlot = (
     }
   }, [hasError, jsUrl]);
 
+  return {
+    jsModule,
+    error,
+  };
+}
+
+export function useMountCss(css: string | null | undefined, host: HTMLElement) {
   // Mount the CSS
   useEffect(() => {
-    const shadowRoot = props.host.shadowRoot;
+    const shadowRoot = host.shadowRoot;
     if (!css || !shadowRoot) {
       return;
     }
@@ -150,23 +116,38 @@ const AnyWidgetSlot = (
     return () => {
       style.remove();
     };
-  }, [css, props.host]);
+  }, [css, host]);
+}
 
-  // Wrap setValue to serialize DataViews back to base64 before sending
-  // Structure matches ipywidgets protocol: { state, bufferPaths, buffers }
-  const wrappedSetValue = useEvent((partialValue: Partial<T>) =>
-    props.setValue(serializeBuffersToBase64(partialValue)),
-  );
+export const AnyWidgetPlugin = createPlugin<ModelIdRef>("marimo-anywidget")
+  .withData(
+    z.object({
+      jsUrl: z.string(),
+      jsHash: z.string(),
+      css: z.string().nullish(),
+    }),
+  )
+  .withFunctions({})
+  .renderer((props) => <AnyWidgetSlot {...props} />);
+
+const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
+  const { css, jsUrl, jsHash } = props.data;
+  const { model_id: modelId } = props.value;
+  const host = props.host as HTMLElementNotDerivedFromRef;
+
+  const { jsModule, error } = useAnyWidgetModule({ jsUrl, jsHash });
+
+  useMountCss(css, host);
 
   if (error) {
     return <ErrorBanner error={error} />;
   }
 
-  if (!module) {
+  if (!jsModule) {
     return null;
   }
 
-  if (!isAnyWidgetModule(module)) {
+  if (!isAnyWidgetModule(jsModule)) {
     const error = new Error(
       `Module at ${jsUrl} does not appear to be a valid anywidget`,
     );
@@ -183,10 +164,8 @@ const AnyWidgetSlot = (
       // Plugins may be stateful and we cannot make assumptions that we won't be
       // so it is safer to just re-render.
       key={key}
-      {...props}
-      widget={module.default}
-      setValue={wrappedSetValue}
-      value={valueWithBuffers}
+      widget={jsModule.default}
+      modelId={modelId}
     />
   );
 };
@@ -194,125 +173,72 @@ const AnyWidgetSlot = (
 /**
  * Run the anywidget module
  *
- * @param widgetDef - The anywidget definition
- * @param model - The model to pass to the widget
+ * 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(
-  widgetDef: AnyWidget,
+async function runAnyWidgetModule<T extends AnyWidgetState>(
+  widgetDef: AnyWidget<T>,
   model: Model<T>,
   el: HTMLElement,
-): Promise<() => void> {
-  const experimental: Experimental = {
-    invoke: async (_name, _msg, _options) => {
-      const message =
-        "anywidget.invoke not supported in marimo. Please file an issue at https://github.com/marimo-team/marimo/issues";
-      Logger.warn(message);
-      throw new Error(message);
-    },
-  };
+  signal: AbortSignal,
+): Promise<void> {
   // Clear the element, in case the widget is re-rendering
   el.innerHTML = "";
-  const widget =
-    typeof widgetDef === "function" ? await widgetDef() : widgetDef;
-  await widget.initialize?.({ model, experimental });
+
   try {
-    const unsub = await widget.render?.({ model, el, experimental });
-    return () => {
-      unsub?.();
-    };
+    const render = await getMarimoInternal(model).resolveWidget(widgetDef);
+    await render(el, signal);
   } catch (error) {
     Logger.error("Error rendering anywidget", error);
     el.classList.add("text-error");
     el.innerHTML = `Error rendering anywidget: ${prettyError(error)}`;
-    return () => {
-      // No-op
-    };
   }
 }
 
 function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
-  return (
-    mod.default &&
-    (typeof mod.default === "function" ||
-      mod.default?.render ||
-      mod.default?.initialize)
-  );
-}
-
-export function getDirtyFields(value: T, initialValue: T): Set<keyof T> {
-  return new Set(
-    Object.keys(value).filter((key) => !isEqual(value[key], initialValue[key])),
-  );
-}
+  if (!mod.default) {
+    return false;
+  }
 
-function hasModelId(message: unknown): message is { model_id: string } {
   return (
-    typeof message === "object" && message !== null && "model_id" in message
+    typeof mod.default === "function" ||
+    typeof mod.default?.render === "function" ||
+    typeof mod.default?.initialize === "function"
   );
 }
 
-interface Props
-  extends Omit<IPluginProps<T, Data, PluginFunctions>, "setValue"> {
-  widget: AnyWidget;
-  value: T;
-  setValue: (value: Partial<T>) => void;
+interface Props<T extends AnyWidgetState> {
+  widget: AnyWidget<T>;
+  modelId: WidgetModelId;
 }
 
-const LoadedSlot = ({
-  value,
-  setValue,
+const LoadedSlot = <T extends AnyWidgetState>({
   widget,
-  functions,
-  data,
-  host,
-}: Props & { widget: AnyWidget }) => {
+  modelId,
+}: Props<T> & { widget: AnyWidget<T> }) => {
   const htmlRef = useRef<HTMLDivElement>(null);
 
-  // value is already decoded from wire format
-  const model = useRef<Model<T>>(
-    new Model(value, setValue, functions.send_to_widget, new Set()),
-  );
+  // value is already decoded from wire format, may be null if waiting for open message
+  const model = MODEL_MANAGER.getSync(modelId);
 
-  // Listen to incoming messages
-  useEventListener(
-    host as HTMLElementNotDerivedFromRef,
-    MarimoIncomingMessageEvent.TYPE,
-    (e) => {
-      const message = e.detail.message;
-      if (hasModelId(message)) {
-        MODEL_MANAGER.get(message.model_id).then((model) => {
-          model.receiveCustomMessage(message, e.detail.buffers);
-        });
-      } else {
-        model.current.receiveCustomMessage(message, e.detail.buffers);
-      }
-    },
-  );
+  if (!model) {
+    Logger.error("Model not found for modelId", modelId);
+  }
 
   useEffect(() => {
-    if (!htmlRef.current) {
+    if (!htmlRef.current || !model) {
       return;
     }
-    const unsubPromise = runAnyWidgetModule(
-      widget,
-      model.current,
-      htmlRef.current,
-    );
-    return () => {
-      unsubPromise.then((unsub) => unsub());
-    };
-    // We re-run the widget when the jsUrl changes, which means the cell
+    const controller = new AbortController();
+    runAnyWidgetModule(widget, model, htmlRef.current, controller.signal);
+    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, data.jsUrl]);
-
-  // When the value changes, update the model
-  const valueMemo = useDeepCompareMemoize(value);
-  useEffect(() => {
-    model.current.updateAndEmitDiffs(valueMemo);
-  }, [valueMemo]);
+  }, [widget, modelId, model]);
 
   return <div ref={htmlRef} />;
 };
@@ -321,5 +247,4 @@ export const visibleForTesting = {
   LoadedSlot,
   runAnyWidgetModule,
   isAnyWidgetModule,
-  getDirtyFields,
 };