@marimo-team/islands 0.23.10-dev1 → 0.23.10-dev12

package/src/core/cells/__tests__/document-changes.test.ts

@@ -16,14 +16,32 @@
 import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { afterAll, beforeAll, beforeEach, describe, expect, it } from "vitest";
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
 import { cellId } from "@/__tests__/branded";
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import { adaptiveLanguageConfiguration } from "@/core/codemirror/language/extension";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
+import { requestClientAtom } from "@/core/network/requests";
+import type { EditRequests, RunRequests } from "@/core/network/types";
+import { store } from "@/core/state/jotai";
 import { MultiColumn } from "@/utils/id-tree";
 import { exportedForTesting, type NotebookState } from "../cells";
-import { type CellAction, toDocumentChanges } from "../document-changes";
+import {
+  type CellAction,
+  coalesceChanges,
+  type DocumentChange,
+  exportedForTesting as middlewareExports,
+  toDocumentChanges,
+} from "../document-changes";
 import { CellId } from "../ids";
 
 const { initialNotebookState, reducer } = exportedForTesting;
@@ -584,3 +602,184 @@ describe("toDocumentChanges", () => {
     });
   });
 });
+
+describe("coalesceChanges", () => {
+  const X = cellId("X");
+  const Y = cellId("Y");
+  const A = cellId("A");
+  const config = { column: null, disabled: false, hide_code: false };
+
+  it("drops set-code that precedes a delete of the same cell", () => {
+    const changes: DocumentChange[] = [
+      { type: "set-code", cellId: X, code: "x = 2" },
+      { type: "delete-cell", cellId: X },
+    ];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "delete-cell", cellId: X },
+    ]);
+  });
+
+  it("keeps create+delete for a created-then-deleted cell, dropping the edit", () => {
+    const changes: DocumentChange[] = [
+      { type: "create-cell", cellId: X, code: "", name: "_", config },
+      { type: "set-code", cellId: X, code: "x = 1" },
+      { type: "delete-cell", cellId: X },
+    ];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "create-cell", cellId: X, code: "", name: "_", config },
+      { type: "delete-cell", cellId: X },
+    ]);
+  });
+
+  it("drops set-code, set-name, set-config, and move-cell for a deleted cell", () => {
+    const changes: DocumentChange[] = [
+      { type: "create-cell", cellId: X, code: "", name: "_", config },
+      { type: "set-code", cellId: X, code: "x = 1" },
+      { type: "set-name", cellId: X, name: "foo" },
+      {
+        type: "set-config",
+        cellId: X,
+        column: null,
+        disabled: true,
+        hideCode: false,
+      },
+      { type: "move-cell", cellId: X, after: A },
+      { type: "delete-cell", cellId: X },
+    ];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "create-cell", cellId: X, code: "", name: "_", config },
+      { type: "delete-cell", cellId: X },
+    ]);
+  });
+
+  it("leaves a plain delete of an unedited cell unchanged", () => {
+    const changes: DocumentChange[] = [{ type: "delete-cell", cellId: X }];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "delete-cell", cellId: X },
+    ]);
+  });
+
+  it("does not touch set-* for cells that are not deleted, preserving order", () => {
+    const changes: DocumentChange[] = [
+      { type: "set-code", cellId: A, code: "a = 1" },
+      { type: "set-code", cellId: Y, code: "y = 1" },
+      { type: "delete-cell", cellId: X },
+    ];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "set-code", cellId: A, code: "a = 1" },
+      { type: "set-code", cellId: Y, code: "y = 1" },
+      { type: "delete-cell", cellId: X },
+    ]);
+  });
+
+  it("collapses repeated set-code for a surviving cell to the last value", () => {
+    const changes: DocumentChange[] = [
+      { type: "set-code", cellId: X, code: "x = 1" },
+      { type: "set-name", cellId: X, name: "foo" },
+      { type: "set-code", cellId: X, code: "x = 2" },
+    ];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "set-name", cellId: X, name: "foo" },
+      { type: "set-code", cellId: X, code: "x = 2" },
+    ]);
+  });
+
+  it("keeps both creates so a downstream anchor stays resolvable", () => {
+    const changes: DocumentChange[] = [
+      { type: "create-cell", cellId: X, code: "", name: "_", config, after: A },
+      { type: "create-cell", cellId: Y, code: "", name: "_", config, after: X },
+      { type: "delete-cell", cellId: X },
+    ];
+    expect(coalesceChanges(changes)).toEqual([
+      { type: "create-cell", cellId: X, code: "", name: "_", config, after: A },
+      { type: "create-cell", cellId: Y, code: "", name: "_", config, after: X },
+      { type: "delete-cell", cellId: X },
+    ]);
+  });
+});
+
+/**
+ * End-to-end of the debounced flush path: dispatch through the real middleware
+ * reducer, let the debounce fire, and inspect the batch that reaches
+ * sendDocumentTransaction. Coalescing only matters once edits actually share a
+ * debounce window, which drainChanges-based tests can't observe.
+ */
+describe("flush path coalescing", () => {
+  let sent: DocumentChange[][];
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    sent = [];
+    middlewareExports.cancelPendingChanges();
+    const captureClient: Pick<
+      EditRequests & RunRequests,
+      "sendDocumentTransaction"
+    > = {
+      sendDocumentTransaction: async ({ changes }) => {
+        sent.push(changes);
+        return null;
+      },
+    };
+    store.set(
+      requestClientAtom,
+      captureClient as unknown as EditRequests & RunRequests,
+    );
+  });
+
+  afterEach(() => {
+    middlewareExports.cancelPendingChanges();
+    store.set(requestClientAtom, null);
+    vi.useRealTimers();
+  });
+
+  it("coalesces edit + delete of the same cell within one debounce window", () => {
+    setup("x = 1");
+    const [x] = state.cellIds.inOrderIds;
+    // Discard the create-cell from setup; it would flush as its own batch.
+    middlewareExports.cancelPendingChanges();
+
+    // Same window: edit the cell, then delete it, with no timer advance.
+    state = dispatch(state, {
+      type: "updateCellCode",
+      payload: { cellId: x, code: "x = 2", formattingChange: false },
+    });
+    state = dispatch(state, {
+      type: "deleteCell",
+      payload: { cellId: x },
+    });
+
+    // Debounced: nothing on the wire yet.
+    expect(sent).toEqual([]);
+
+    vi.advanceTimersByTime(400);
+
+    // One transaction, and it is just the delete — the conflicting set-code
+    // has been dropped, so the server never sees edit+delete of one cell.
+    expect(sent).toHaveLength(1);
+    expect(sent[0]).toEqual([{ type: "delete-cell", cellId: x }]);
+  });
+
+  it("sends edit and delete as separate clean transactions across windows", () => {
+    setup("x = 1");
+    const [x] = state.cellIds.inOrderIds;
+    middlewareExports.cancelPendingChanges();
+
+    state = dispatch(state, {
+      type: "updateCellCode",
+      payload: { cellId: x, code: "x = 2", formattingChange: false },
+    });
+    vi.advanceTimersByTime(400);
+
+    state = dispatch(state, {
+      type: "deleteCell",
+      payload: { cellId: x },
+    });
+    vi.advanceTimersByTime(400);
+
+    // Two separate, individually-valid transactions: neither conflicts, which
+    // is why the bug only ever surfaced when both landed in the same window.
+    expect(sent).toHaveLength(2);
+    expect(sent[0]).toEqual([{ type: "set-code", cellId: x, code: "x = 2" }]);
+    expect(sent[1]).toEqual([{ type: "delete-cell", cellId: x }]);
+  });
+});

package/src/core/cells/cell.ts

@@ -73,7 +73,11 @@ export function transitionCell(
   nextCell.output = message.output ?? nextCell.output;
   nextCell.staleInputs = message.stale_inputs ?? nextCell.staleInputs;
   nextCell.status = message.status ?? nextCell.status;
-  nextCell.serialization = message.serialization;
+  // Tri-state partial update: an omitted field (undefined) leaves the hint
+  // unchanged; null explicitly clears it; a string sets it.
+  if (message.serialization !== undefined) {
+    nextCell.serialization = message.serialization;
+  }
 
   let didInterruptFromThisMessage = false;
 

package/src/core/cells/document-changes.ts

@@ -568,6 +568,64 @@ export function fromDocumentChanges(
   return actions;
 }
 
+// ---------------------------------------------------------------------------
+// Coalescing: reduce a buffered change sequence to its net effect
+// ---------------------------------------------------------------------------
+
+const COLLAPSIBLE_TYPES = new Set(["set-code", "set-name", "set-config"]);
+const DROPPABLE_ON_DELETE = new Set([
+  "set-code",
+  "set-name",
+  "set-config",
+  "move-cell",
+]);
+
+/**
+ * Reduce a buffered sequence of changes to an equivalent batch that reflects
+ * net effect rather than edit history. The server applies a transaction
+ * atomically and rejects internally contradictory batches (e.g. updating a
+ * cell that is also deleted in the same transaction), so a debounced sequence
+ * of edits must be reconciled before it is sent.
+ *
+ * Two reductions, both order-preserving:
+ * - For any cell deleted in the batch, drop its property/move changes. The
+ *   `create-cell` and `delete-cell` are kept so anchors referencing the cell
+ *   stay resolvable on the server; create+delete applies to a net no-op.
+ * - Collapse repeated `set-code`/`set-name`/`set-config` for a surviving cell
+ *   to the last occurrence.
+ */
+export function coalesceChanges(changes: DocumentChange[]): DocumentChange[] {
+  const deletedIds = new Set<CellId>();
+  for (const change of changes) {
+    if (change.type === "delete-cell") {
+      deletedIds.add(change.cellId);
+    }
+  }
+
+  const withoutEditsToDeletedCells = changes.filter(
+    (change) =>
+      !(
+        DROPPABLE_ON_DELETE.has(change.type) &&
+        "cellId" in change &&
+        deletedIds.has(change.cellId)
+      ),
+  );
+
+  const lastIndexByKey = new Map<string, number>();
+  withoutEditsToDeletedCells.forEach((change, index) => {
+    if (COLLAPSIBLE_TYPES.has(change.type) && "cellId" in change) {
+      lastIndexByKey.set(`${change.type}:${change.cellId}`, index);
+    }
+  });
+
+  return withoutEditsToDeletedCells.filter((change, index) => {
+    if (COLLAPSIBLE_TYPES.has(change.type) && "cellId" in change) {
+      return lastIndexByKey.get(`${change.type}:${change.cellId}`) === index;
+    }
+    return true;
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Middleware: debounced change dispatch to the server
 // ---------------------------------------------------------------------------
@@ -575,11 +633,11 @@ export function fromDocumentChanges(
 let pendingChanges: DocumentChange[] = [];
 
 const flushChanges = debounce(() => {
-  if (pendingChanges.length === 0) {
+  const changes = coalesceChanges(pendingChanges);
+  pendingChanges = [];
+  if (changes.length === 0) {
     return;
   }
-  const changes = pendingChanges;
-  pendingChanges = [];
   void getRequestClient().sendDocumentTransaction({ changes });
 }, 400);
 

package/src/core/codemirror/go-to-definition/__tests__/utils.test.ts

@@ -39,6 +39,43 @@ afterEach(() => {
 });
 
 describe("goToDefinitionAtCursorPosition", () => {
+  test("jumps to a reactive variable definition in another cell", async () => {
+    const definingCell = cellId("defining-cell");
+    const usageCell = cellId("usage-cell");
+    const definingCode = "a = 10";
+    const usageCode = "print(a)";
+
+    const definingView = createEditor(definingCode, definingCode.length);
+    const usageView = createEditor(usageCode, usageCode.indexOf("a"));
+    views.push(definingView, usageView);
+
+    const notebook = initialNotebookState();
+    notebook.cellHandles[definingCell] = {
+      current: { editorView: definingView, editorViewOrNull: definingView },
+    };
+    notebook.cellHandles[usageCell] = {
+      current: { editorView: usageView, editorViewOrNull: usageView },
+    };
+
+    store.set(notebookAtom, notebook);
+    store.set(variablesAtom, {
+      [variableName("a")]: {
+        dataType: "int",
+        declaredBy: [definingCell],
+        name: variableName("a"),
+        usedBy: [usageCell],
+        value: "10",
+      },
+    });
+
+    const result = goToDefinitionAtCursorPosition(usageView);
+
+    expect(result).toBe(true);
+    await tick();
+    expect(definingView.state.selection.main.head).toBe(0);
+    expect(usageView.state.selection.main.head).toBe(usageCode.indexOf("a"));
+  });
+
   test("prefers the current-cell local definition over a reactive global", async () => {
     const globalCell = cellId("global-cell");
     const localCell = cellId("local-cell");

package/src/core/codemirror/go-to-definition/commands.ts

@@ -28,10 +28,11 @@ interface VariableDeclaration {
 }
 
 function goToPosition(view: EditorView, from: number): void {
-  view.focus();
-  // Wait for the next frame, otherwise codemirror will
-  // add a cursor from a pointer click.
+  // Focus on the next frame: a synchronous focus is a no-op while a Radix
+  // context menu still owns focus, and codemirror would otherwise add a
+  // cursor from the pointer click.
   requestAnimationFrame(() => {
+    view.focus();
     view.dispatch({
       selection: {
         anchor: from,
@@ -403,22 +404,29 @@ function findScopedDefinitionPosition(
 }
 
 /**
- * This function will select the first occurrence of the given variable name,
- * for a given editor view.
+ * This function selects a scoped definition for the given variable name, when
+ * a usage position is available, or optionally falls back to the first matching
+ * variable name in the given editor view.
  * @param view The editor view which contains the variable name.
  * @param variableName The name of the variable to select, if found in the editor.
  * @param usagePosition The position of the variable usage, if available.
+ * @param fallbackToFirstMatch Whether to fall back to the first matching
+ * variable name when no scoped definition is found. Defaults to true.
  */
 export function goToVariableDefinition(
   view: EditorView,
   variableName: string,
   usagePosition?: number,
+  fallbackToFirstMatch = true,
 ): boolean {
   const { state } = view;
-  const from =
-    (usagePosition !== undefined
-      ? findScopedDefinitionPosition(state, variableName, usagePosition)
-      : null) ?? findFirstMatchingVariable(state, variableName);
+  let from: number | null = null;
+  if (usagePosition !== undefined) {
+    from = findScopedDefinitionPosition(state, variableName, usagePosition);
+  }
+  if (from === null && fallbackToFirstMatch) {
+    from = findFirstMatchingVariable(state, variableName);
+  }
 
   if (from === null) {
     return false;

package/src/core/codemirror/go-to-definition/utils.ts

@@ -82,6 +82,7 @@ export function goToDefinition(
       view,
       variableName,
       usagePosition,
+      false,
     );
     if (foundLocally) {
       return true;

package/src/core/network/__tests__/requests-static.test.ts

@@ -0,0 +1,30 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { toast } from "@/components/ui/use-toast";
+import { createStaticRequests } from "../requests-static";
+
+vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
+
+describe("createStaticRequests static-notebook toast", () => {
+  beforeEach(() => {
+    vi.mocked(toast).mockClear();
+  });
+
+  it("requests a once-toast with a stable id on component value updates", async () => {
+    const requests = createStaticRequests();
+    await requests.sendComponentValues({} as never);
+
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "static-notebook", once: true }),
+    );
+  });
+
+  it("uses the same once-toast for function requests", async () => {
+    const requests = createStaticRequests();
+    await requests.sendFunctionRequest({} as never);
+
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "static-notebook", once: true }),
+    );
+  });
+});

package/src/core/network/requests-static.ts

@@ -3,6 +3,18 @@ import { toast } from "@/components/ui/use-toast";
 import { Logger } from "@/utils/Logger";
 import type { EditRequests, RunRequests } from "./types";
 
+const STATIC_NOTEBOOK_TOAST_ID = "static-notebook";
+
+function showStaticNotebookToast() {
+  toast({
+    id: STATIC_NOTEBOOK_TOAST_ID,
+    once: true,
+    title: "Static notebook",
+    description:
+      "This notebook is not connected to a kernel. Any interactive elements will not work.",
+  });
+}
+
 export function createStaticRequests(): EditRequests & RunRequests {
   const throwNotInEditMode = () => {
     throw new Error("Unreachable. Expected to be in run mode");
@@ -10,11 +22,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
 
   return {
     sendComponentValues: async () => {
-      toast({
-        title: "Static notebook",
-        description:
-          "This notebook is not connected to a kernel. Any interactive elements will not work.",
-      });
+      showStaticNotebookToast();
       Logger.log("Updating UI elements is not supported in static mode");
       return null;
     },
@@ -27,11 +35,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
       return null;
     },
     sendFunctionRequest: async () => {
-      toast({
-        title: "Static notebook",
-        description:
-          "This notebook is not connected to a kernel. Any interactive elements will not work.",
-      });
+      showStaticNotebookToast();
       Logger.log("Function requests are not supported in static mode");
       return null;
     },

package/src/plugins/layout/DownloadPlugin.tsx

@@ -98,7 +98,7 @@ const DownloadButton = ({
     try {
       const loadedData = await load({});
       downloadByURL(
-        loadedData.data,
+        loadedData.data || data.data,
         loadedData.filename ?? data.filename ?? undefined,
       );
     } catch (error) {