@marimo-team/frontend 0.17.4 → 0.17.5

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-q8eVuDDk.js"></script>
+    <script type="module" crossorigin src="./assets/index-DsdBxblV.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-DImqtvgl.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-DZLz74EQ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-BcIddLXZ.js">
@@ -138,12 +138,12 @@
     <link rel="modulepreload" crossorigin href="./assets/type-DVCC-93H.js">
     <link rel="modulepreload" crossorigin href="./assets/marked.esm-BB_RKOA5.js">
     <link rel="modulepreload" crossorigin href="./assets/main-CCaZmKLi.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-DNq9ng4B.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-CZmitpcp.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-BfBY_QKr.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-a-3t8sis.js">
     <link rel="modulepreload" crossorigin href="./assets/useEvent-itkPNnCe.js">
-    <link rel="modulepreload" crossorigin href="./assets/useDeleteCell-CJ4WX9R2.js">
-    <link rel="modulepreload" crossorigin href="./assets/lazy-tfeVHpGH.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDeleteCell-Bg8Hgk6e.js">
+    <link rel="modulepreload" crossorigin href="./assets/lazy-ijSQmhmN.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-DEWTIUVh.js">
     <link rel="modulepreload" crossorigin href="./assets/precisionRound-BLxyDkD7.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-B9-NA0ur.js">
@@ -160,24 +160,24 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-C2JVmCUi.js">
     <link rel="modulepreload" crossorigin href="./assets/input-DuVApvWu.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-ExH1h9et.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-DFNTDaPd.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-d9BMXpwm.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-B5fh2kMN.js">
     <link rel="modulepreload" crossorigin href="./assets/links-90C38wV6.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CIEHjRfF.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BMyX5A6l.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-7Nd5UYc6.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DKtP9DfP.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-1oeuzoUk.js">
     <link rel="modulepreload" crossorigin href="./assets/_arrayReduce-DV4IVFuG.js">
     <link rel="modulepreload" crossorigin href="./assets/startCase-RfubwhHM.js">
     <link rel="modulepreload" crossorigin href="./assets/strings-DRRWXNT2.js">
     <link rel="modulepreload" crossorigin href="./assets/command-DhuV6_de.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-BoRNi4dY.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DjmsNJ7r.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-BiWuvMY1.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-SPzF4B1M.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-CDDalEhv.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-Ckew1l1_.js">
-    <link rel="modulepreload" crossorigin href="./assets/mode-BWw7rz82.js">
+    <link rel="modulepreload" crossorigin href="./assets/mode-CtH3Xe58.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es-CmG1k0Cr.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-BUSbsjNK.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-B4Xlxz9Q.js">
     <link rel="modulepreload" crossorigin href="./assets/table-Bj1zHGNd.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-CGHt3Blh.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-BPaRR7vx.js">
@@ -194,8 +194,8 @@
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-CQ9jB95h.js">
     <link rel="modulepreload" crossorigin href="./assets/range-ZclXTdAh.js">
     <link rel="modulepreload" crossorigin href="./assets/table-CmDieCGZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/Output-pZgeySyq.js">
-    <link rel="modulepreload" crossorigin href="./assets/name-cell-input-F8bM4E5e.js">
+    <link rel="modulepreload" crossorigin href="./assets/Output-x6LACtkd.js">
+    <link rel="modulepreload" crossorigin href="./assets/name-cell-input-DZWpmHYT.js">
     <link rel="modulepreload" crossorigin href="./assets/useHotkey-Ca6pS8sJ.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-CNyONSoo.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-D8ZMWeYP.js">
@@ -298,18 +298,18 @@
     <link rel="modulepreload" crossorigin href="./assets/z80-CJYC52xh.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-DXHMyc8g.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-DpmcvlCC.js">
-    <link rel="modulepreload" crossorigin href="./assets/ConsoleOutput-CDSftFlX.js">
+    <link rel="modulepreload" crossorigin href="./assets/ConsoleOutput-C4nRvbNL.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-HGhpVPVr.js">
-    <link rel="modulepreload" crossorigin href="./assets/add-missing-import-BwGZ98W0.js">
+    <link rel="modulepreload" crossorigin href="./assets/add-missing-import-Cy6g_y6i.js">
     <link rel="modulepreload" crossorigin href="./assets/blob-B96v6VlX.js">
-    <link rel="modulepreload" crossorigin href="./assets/add-cell-with-ai-D5ovEhXx.js">
+    <link rel="modulepreload" crossorigin href="./assets/add-cell-with-ai-D94Om7DS.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-C2nGNVra.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DncO0xCM.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-Cdxt7KQF.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-BwMl5m5_.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-CUS3ckCE.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-B1IBfLxp.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BiiXdwvw.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-xX3fIjF2.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-BsCKvnq_.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-CWXmrhes.js">
     <link rel="modulepreload" crossorigin href="./assets/toggle-CPnmDQd7.js">
     <link rel="modulepreload" crossorigin href="./assets/api-qc-D7yz9.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-Bcw0dX52.js">
@@ -318,22 +318,22 @@
     <link rel="modulepreload" crossorigin href="./assets/memoize-DhF8x4Aa.js">
     <link rel="modulepreload" crossorigin href="./assets/_toKey-16owuO_q.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-L2qemYhz.js">
-    <link rel="modulepreload" crossorigin href="./assets/utilities.esm-D8HYU14D.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-DwAgRZTh.js">
+    <link rel="modulepreload" crossorigin href="./assets/utilities.esm-CCw2KKJk.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-BXSB3SQ6.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-BIDUS-iw.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-DWAWtOBJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-gmO6162d.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-Ba_IF_mK.js">
     <link rel="modulepreload" crossorigin href="./assets/file-video-camera-gcIrLbdD.js">
     <link rel="modulepreload" crossorigin href="./assets/file-text-Z92DzmMA.js">
     <link rel="modulepreload" crossorigin href="./assets/file-Cesos4Qp.js">
-    <link rel="modulepreload" crossorigin href="./assets/types-UoG2cq5J.js">
+    <link rel="modulepreload" crossorigin href="./assets/types-h5wz3HYN.js">
     <link rel="modulepreload" crossorigin href="./assets/label-FIGQlkj5.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-D69llIWP.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-nAUuUhu3.js">
     <link rel="modulepreload" crossorigin href="./assets/textarea-DA_SbCD5.js">
     <link rel="modulepreload" crossorigin href="./assets/circle-x-Bb-EcEyG.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-ETV_gv20.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-D1jEfGpj.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-CQCzdh1o.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-BlnK1x-p.js">
     <link rel="modulepreload" crossorigin href="./assets/field-mNGJv_67.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-p-zRh0zu.js">
     <link rel="modulepreload" crossorigin href="./assets/useBoolean-CG31RE8p.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -168,7 +168,7 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.5",
     "use-resize-observer": "^9.1.0",
-    "vega-lite": "^6.4.1",
+    "vega-lite": "6.2.0",
     "vega-loader": "^5.1.0",
     "vega-parser": "^7.1.0",
     "vega-tooltip": "^1.1.0",

package/src/core/codemirror/language/__tests__/markdown.test.ts

@@ -27,8 +27,10 @@ describe("MarkdownLanguageAdapter", () => {
       const out = adapter.transformOut(innerCode, metadata);
       expect(out).toMatchInlineSnapshot(`
         [
-          "mo.md(r""" """)",
-          10,
+          "mo.md(r"""
+         
+        """)",
+          12,
         ]
       `);
     });
@@ -227,8 +229,10 @@ describe("MarkdownLanguageAdapter", () => {
     it("empty string", () => {
       const code = "";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      expect(wrappedCode).toBe(`mo.md(""" """)`);
-      expect(offset).toBe(9);
+      expect(wrappedCode).toBe(`mo.md("""
+ 
+""")`);
+      expect(offset).toBe(11);
     });
 
     it("defaults to r-string when there is no last quote prefix", () => {
@@ -236,15 +240,19 @@ describe("MarkdownLanguageAdapter", () => {
       const code = "Hello world";
       metadata.quotePrefix = "r";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      expect(wrappedCode).toBe(`mo.md(r"""Hello world""")`);
-      expect(offset).toBe(10);
+      expect(wrappedCode).toBe(`mo.md(r"""
+Hello world
+""")`);
+      expect(offset).toBe(12);
     });
 
     it("single line", () => {
       const code = "Hello world";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      expect(wrappedCode).toBe(`mo.md("""Hello world""")`);
-      expect(offset).toBe(9);
+      expect(wrappedCode).toBe(`mo.md("""
+Hello world
+""")`);
+      expect(offset).toBe(11);
     });
 
     it("starts with quote", () => {
@@ -283,21 +291,36 @@ describe("MarkdownLanguageAdapter", () => {
     });
 
     it("should escape triple quotes in the Markdown code", () => {
-      const code = 'Markdown with an escaped """quote"""!!';
+      const code = 'Markdown with an escaped """quote""""!!';
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
       expect(wrappedCode).toBe(
-        `mo.md("""Markdown with an escaped \\"""quote\\"""!!""")`,
+        `mo.md("""
+Markdown with an escaped "\\""quote"\\""\\"!!
+""")`,
       );
-      expect(offset).toBe(9);
+      expect(offset).toBe(11);
+    });
+
+    it("should escape triple quotes in the Markdown code with backslash", () => {
+      const code = 'Markdown with an escaped \\"""quote\\""""!!';
+      const [wrappedCode, offset] = adapter.transformOut(code, metadata);
+      expect(wrappedCode).toBe(
+        `mo.md("""
+Markdown with an escaped \\"\\""quote\\"\\""\\"!!
+""")`,
+      );
+      expect(offset).toBe(11);
     });
 
     it("should preserve r strings", () => {
       const code = String.raw`$\nu = \mathllap{}\cdot\mathllap{\alpha}$`;
       metadata.quotePrefix = "r";
       const [wrappedCode, offset] = adapter.transformOut(code, metadata);
-      const pythonCode = `mo.md(r"""$\\nu = \\mathllap{}\\cdot\\mathllap{\\alpha}$""")`;
+      const pythonCode = `mo.md(r"""
+$\\nu = \\mathllap{}\\cdot\\mathllap{\\alpha}$
+""")`;
       expect(wrappedCode).toBe(pythonCode);
-      expect(offset).toBe(10);
+      expect(offset).toBe(12);
     });
 
     it("should handle f-strings in transformOut", () => {

package/src/core/codemirror/language/__tests__/utils.test.ts

@@ -146,8 +146,12 @@ describe("splitEditor", () => {
       selection: { anchor: "Hello,".length },
     });
     const result = splitEditor(mockEditor);
-    expect(result.beforeCursorCode).toEqual('mo.md("""Hello,""")');
-    expect(result.afterCursorCode).toEqual('mo.md(""" World!""")');
+    expect(result.beforeCursorCode).toEqual(`mo.md("""
+Hello,
+""")`);
+    expect(result.afterCursorCode).toEqual(`mo.md("""
+ World!
+""")`);
   });
 
   // f-strings not currently supported

package/src/plugins/layout/TexPlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { type JSX, useLayoutEffect, useRef } from "react";
+import { type JSX, useLayoutEffect, useRef, useState } from "react";
 
 import { z } from "zod";
 import { once } from "@/utils/once";
@@ -21,7 +21,10 @@ export class TexPlugin implements IStatelessPlugin<{}> {
 
   render(props: IStatelessPluginProps<{}>): JSX.Element {
     return (
-      <TexComponent tex={props.host.textContent || props.host.innerHTML} />
+      <TexComponent
+        host={props.host}
+        tex={props.host.textContent || props.host.innerHTML}
+      />
     );
   }
 }
@@ -67,8 +70,33 @@ async function renderLatex(mount: HTMLElement, tex: string): Promise<void> {
   }
 }
 
-const TexComponent = ({ tex }: { tex: string }): JSX.Element => {
+const TexComponent = ({
+  host,
+  tex,
+}: {
+  host: HTMLElement;
+  tex: string;
+}): JSX.Element => {
   const ref = useRef<HTMLSpanElement>(null);
+  const [currentTex, setCurrentTex] = useState(tex);
+
+  // Watch for changes to the host element's direct children
+  useLayoutEffect(() => {
+    const observer = new MutationObserver(() => {
+      const newTex = host.textContent || host.innerHTML;
+      setCurrentTex(newTex);
+    });
+
+    observer.observe(host, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [host]);
 
   // The arithmatex markdown extension we use in Python produces nested
   // marimo-tex tags when $$...$$ math is used in a paragraph, with dummy
@@ -94,9 +122,9 @@ const TexComponent = ({ tex }: { tex: string }): JSX.Element => {
   // Re-render when the text content changes.
   useLayoutEffect(() => {
     if (ref.current) {
-      renderLatex(ref.current, tex);
+      renderLatex(ref.current, currentTex);
     }
-  }, [tex]);
+  }, [currentTex]);
 
   return <span ref={ref} />;
 };