@marimo-team/frontend 0.23.6-dev13 → 0.23.6-dev16

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

@@ -203,6 +203,8 @@ describe("toDocumentChanges", () => {
         [
           {
             "cellId": "0",
+            "column": null,
+            "disabled": false,
             "hideCode": true,
             "type": "set-config",
           },
@@ -246,6 +248,8 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -273,11 +277,15 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
             "cellId": "2",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -310,11 +318,15 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 0,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
             "cellId": "2",
             "column": 0,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -358,6 +370,8 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {

package/src/core/cells/cells.ts

@@ -29,6 +29,7 @@ import { isErrorMime } from "../mime";
 import type { CellConfig } from "../network/types";
 import { isRtcEnabled } from "../rtc/state";
 import { createDeepEqualAtom, store } from "../state/jotai";
+import { isWasm } from "../wasm/utils";
 import { prepareCellForExecution, transitionCell } from "./cell";
 import { documentTransactionMiddleware } from "./document-changes";
 import { CellId, SCRATCH_CELL_ID, SETUP_CELL_ID } from "./ids";
@@ -1032,8 +1033,20 @@ const {
   setCells: (state, cells: CellData[]) => {
     const cellData = Object.fromEntries(cells.map((cell) => [cell.id, cell]));
 
+    // WASM has no server-side SessionView to replay outputs, so the
+    // snapshot hydrated by notebookStateFromSession is the only source.
+    const preserveSnapshot = isWasm();
+    const runtimeFor = (cellId: CellId): CellRuntimeState => {
+      if (!preserveSnapshot) {
+        return createCellRuntimeState();
+      }
+      const prev = state.cellRuntime[cellId];
+      const hasSnapshot =
+        prev && (prev.output != null || prev.consoleOutputs.length > 0);
+      return hasSnapshot ? prev : createCellRuntimeState();
+    };
     const cellRuntime = Object.fromEntries(
-      cells.map((cell) => [cell.id, createCellRuntimeState()]),
+      cells.map((cell) => [cell.id, runtimeFor(cell.id)]),
     );
 
     return withScratchCell({

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

@@ -156,10 +156,13 @@ function columnChanges(
   for (const [cellId, newCol] of newColumns) {
     const prevCol = prevColumns.get(cellId);
     if (prevCol !== newCol) {
+      const cell = getCell(cellId, newState);
       changes.push({
         type: "set-config",
         cellId: cellId,
         column: newCol,
+        disabled: cell?.config.disabled ?? false,
+        hideCode: cell?.config.hide_code ?? false,
       });
     }
   }
@@ -257,18 +260,21 @@ export function toDocumentChanges(
     }
 
     // updateCellConfig → set-config
-    // Maps CellConfig's snake_case hide_code to the change's camelCase hideCode.
-    // Only includes fields that were actually specified in the partial config
-    // (from the action payload, not the full cell config).
+    // SetConfig is full-replacement: emit the cell's complete config from
+    // newState (which already merged the action's partial payload).
     case "updateCellConfig": {
-      const { cellId, config } = action.payload;
+      const { cellId } = action.payload;
+      const cell = getCell(cellId, newState);
+      if (!cell) {
+        return [];
+      }
       return [
         {
           type: "set-config",
           cellId: cellId,
-          ...(config.hide_code != null && { hideCode: config.hide_code }),
-          ...(config.disabled != null && { disabled: config.disabled }),
-          ...(config.column != null && { column: config.column }),
+          column: cell.config.column ?? null,
+          disabled: cell.config.disabled ?? false,
+          hideCode: cell.config.hide_code ?? false,
         },
       ];
     }
@@ -538,18 +544,15 @@ export function fromDocumentChanges(
         break;
 
       // set-config → updateCellConfig
-      // Maps the change's camelCase hideCode back to CellConfig's snake_case
-      // hide_code. Only includes fields that are non-null (null means
-      // "not specified" on the wire, not "clear the value").
       case "set-config":
         actions.push({
           type: "updateCellConfig",
           payload: {
             cellId: change.cellId,
             config: {
-              ...(change.hideCode != null && { hide_code: change.hideCode }),
-              ...(change.disabled != null && { disabled: change.disabled }),
-              ...(change.column != null && { column: change.column }),
+              column: change.column,
+              disabled: change.disabled,
+              hide_code: change.hideCode,
             },
           },
         });
@@ -650,7 +653,7 @@ export function applyTransactionChanges(
     ) {
       continue;
     }
-    if (change.type === "set-config" && change.column != null) {
+    if (change.type === "set-config") {
       hasColumnChange = true;
     }
     if (change.type === "create-cell" && change.config?.column != null) {

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/dist/assets/RenderHTML-8cI8zL5y.js

@@ -1 +0,0 @@
-import{s as x}from"./chunk-LvLJmgfZ.js";import{i as g,p as T,u as C}from"./useEvent-D91BmmQi.js";import{t as M}from"./react-Bj1aDYRI.js";import{Sn as H,ci as I,it as j,li as c,m as L,vn as N,yt as k}from"./cells-CcBfzJ1Z.js";import{t as E}from"./compiler-runtime-B3qBwwSJ.js";import{_ as w}from"./useEventListener-BR0C1MaI.js";import{o as _}from"./utils-DIGrmLDO.js";import{t as A}from"./jsx-runtime-BqBOg78p.js";import{t as F}from"./tooltip-Gcwqb_SK.js";import{t as O}from"./copy-icon-BYNydU7b.js";import{t as W}from"./usePress-CfcdTqJM.js";import{n as q}from"./useDebounce-CLMpJfhX.js";import{t as R}from"./useRunCells-CgXnbA14.js";var z=E(),m=x(M(),1),l=x(A(),1);const V=e=>{let t=(0,z.c)(16),r,n,i;t[0]===e?(r=t[1],n=t[2],i=t[3]):({href:n,children:r,...i}=e,t[0]=e,t[1]=r,t[2]=n,t[3]=i);let a=(0,m.useRef)(null),o;t[4]===n?o=t[5]:(o=()=>{let p=new URL(globalThis.location.href);p.hash=n,globalThis.history.pushState({},"",p.toString()),globalThis.dispatchEvent(new HashChangeEvent("hashchange"));let S=n.slice(1),y=document.getElementById(S);y&&y.scrollIntoView({behavior:"smooth",block:"start"})},t[4]=n,t[5]=o);let s=o,f;t[6]===s?f=t[7]:(f={onPress:()=>{s()}},t[6]=s,t[7]=f);let{pressProps:h}=W(f),u;t[8]===s?u=t[9]:(u=p=>{p.preventDefault(),s()},t[8]=s,t[9]=u);let b=u,d;return t[10]!==r||t[11]!==b||t[12]!==n||t[13]!==h||t[14]!==i?(d=(0,l.jsx)("a",{ref:a,href:n,...h,onClick:b,...i,children:r}),t[10]=r,t[11]=b,t[12]=n,t[13]=h,t[14]=i,t[15]=d):d=t[15],d};async function P(e){let t=L().inOrderIds.at(0);if(t)try{let r=await N.request({document:e,cellId:t});if(!r||r.options.length===0)return;let n=e.split(".").pop()??e,i=r.options[0],a=r.options.find(o=>o.name===n)??i;a!=null&&a.completion_info&&g.set(H,{documentation:a.completion_info})}catch(r){w.debug(`Doc lookup failed for "${e}"`,r)}}var D=E();const $=e=>{let t=(0,D.c)(8),{qualifiedName:r,children:n}=e,i;t[0]===r?i=t[1]:(i=()=>{P(r)},t[0]=r,t[1]=i);let a=q(i,100),o;t[2]===a?o=t[3]:(o=()=>a.cancel(),t[2]=a,t[3]=o);let s;return t[4]!==n||t[5]!==a||t[6]!==o?(s=(0,l.jsx)("span",{onMouseEnter:a,onMouseLeave:o,children:n}),t[4]=n,t[5]=a,t[6]=o,t[7]=s):s=t[7],s};function B(e){if(typeof e!="object"||!e)return!1;let t=e;return!(t.trusted!==!0||t.notebookCode!==void 0&&typeof t.notebookCode!="string")}function U(){let e=window==null?void 0:window.__MARIMO_EXPORT_CONTEXT__;return B(e)?e:void 0}function v(){var e;return((e=U())==null?void 0:e.trusted)===!0}function X(){if(g.get(R)||v()||g.get(_))return!0;try{if(j()==="read")return!0}catch{}return!1}var G=T(e=>{let t=e(R),r=e(_);if(t||r||v())return!1;let n=!0;try{n=j()==="read"}catch{return!0}return!n});function K(){return C(G)}var Z=E(),J=e=>{if(e instanceof c.Element&&!/^[A-Za-z][\w-]*$/.test(e.name))return m.createElement(m.Fragment)},Q=(e,t)=>{if(t instanceof c.Element&&t.name==="body"){if((0,m.isValidElement)(e)&&"props"in e){let r=e.props.children;return(0,l.jsx)(l.Fragment,{children:r})}return}},Y=(e,t)=>{if(t instanceof c.Element&&t.name==="html"){if((0,m.isValidElement)(e)&&"props"in e){let r=e.props.children;return(0,l.jsx)(l.Fragment,{children:r})}return}},tt=e=>{if(e instanceof c.Element&&e.attribs&&e.name==="iframe"){let t=document.createElement("iframe");return Object.entries(e.attribs).forEach(([r,n])=>{r.startsWith('"')&&r.endsWith('"')&&(r=r.slice(1,-1)),t.setAttribute(r,n)}),(0,l.jsx)("div",{dangerouslySetInnerHTML:{__html:t.outerHTML}})}},et=e=>{if(e instanceof c.Element&&e.name==="script"){let t=e.attribs.src;if(!t)return;if(!X())return w.warn(`[RenderHTML] refusing <script src> in untrusted context: ${t}`),(0,l.jsx)(l.Fragment,{});if(![...document.querySelectorAll("script[src]")].some(r=>r.getAttribute("src")===t)){let r=document.createElement("script");r.src=t,document.head.append(r)}return(0,l.jsx)(l.Fragment,{})}},rt=(e,t)=>{if(t instanceof c.Element&&t.name==="a"){let r=t.attribs.href;if(r!=null&&r.startsWith("#")&&!r.startsWith("#code/")){let n=null;return(0,m.isValidElement)(e)&&"props"in e&&(n=e.props.children),(0,l.jsx)(V,{href:r,...t.attribs,children:n})}}},nt=(e,t,r)=>{var n,i;if(t instanceof c.Element&&t.name==="div"&&((i=(n=t.attribs)==null?void 0:n.class)!=null&&i.includes("codehilite")))return(0,l.jsx)(ot,{children:e},r)},it=(e,t)=>{var r;if(t instanceof c.Element&&((r=t.attribs)!=null&&r["data-marimo-doc"])){let n=t.attribs["data-marimo-doc"];return(0,l.jsx)($,{qualifiedName:n,children:e})}},at=(e,t)=>{var r,n;if(t instanceof c.Element&&((r=t.attribs)!=null&&r["data-tooltip"])){if((((n=t.name)==null?void 0:n.toLowerCase())??"").startsWith("marimo-"))return;let i=t.attribs["data-tooltip"];return(0,l.jsx)(F,{content:i,children:e})}},ot=e=>{let t=(0,Z.c)(3),{children:r}=e,n=(0,m.useRef)(null),i;t[0]===Symbol.for("react.memo_cache_sentinel")?(i=(0,l.jsx)("div",{className:"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",children:(0,l.jsx)(O,{tooltip:!1,className:"p-1",value:()=>{var s;let o=(s=n.current)==null?void 0:s.firstChild;return o&&o.textContent||""}})}),t[0]=i):i=t[0];let a;return t[1]===r?a=t[2]:(a=(0,l.jsxs)("div",{className:"relative group codehilite-wrapper",ref:n,children:[r,i]}),t[1]=r,t[2]=a),a};const st=({html:e,additionalReplacements:t=[],alwaysSanitizeHtml:r=!0})=>(0,l.jsx)(lt,{html:e,alwaysSanitizeHtml:r,additionalReplacements:t});var lt=({html:e,additionalReplacements:t=[],alwaysSanitizeHtml:r})=>{let n=K();return ct({html:(0,m.useMemo)(()=>r||n?k(e):e,[e,r,n]),additionalReplacements:t})};function ct({html:e,additionalReplacements:t=[]}){let r=[J,tt,et,...t],n=[nt,rt,it,at,Q,Y];return I(e,{replace:(i,a)=>{for(let o of r){let s=o(i,a);if(s)return s}return i},transform:(i,a,o)=>{for(let s of n){let f=s(i,a,o);if(f)return f}return i}})}export{v as n,st as t};