@marimo-team/frontend 0.16.0 → 0.16.2

package/src/utils/__tests__/dom.test.ts

@@ -0,0 +1,167 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { ansiToPlainText, parseHtmlContent } from "../dom";
+
+describe("parseHtmlContent", () => {
+  test("strips HTML tags and returns plain text", () => {
+    const htmlString =
+      '<span style="color: red;">Error: Something went wrong</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
+  });
+
+  test("handles ANSI color span tags", () => {
+    const htmlString =
+      '<span style="color:#d03050;">ERROR</span>: <span style="color:#8ad03a;">File not found</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"ERROR: File not found"`);
+  });
+
+  test("normalizes whitespace", () => {
+    const htmlString = "<span>  Multiple   \n\n  spaces  and  \t tabs  </span>";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`
+      "  Multiple
+
+        spaces  and  	 tabs"
+    `);
+  });
+
+  test("handles empty HTML", () => {
+    const htmlString = "";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`""`);
+  });
+
+  test("handles plain text without HTML", () => {
+    const htmlString = "Simple error message";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"Simple error message"`);
+  });
+
+  test("handles nested HTML elements", () => {
+    const htmlString =
+      '<div><span>Traceback:</span><pre><code>  File "test.py", line 1\n    print("hello"</code></pre></div>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`
+      "Traceback:  File "test.py", line 1
+          print("hello""
+    `);
+  });
+
+  test("handles complex ANSI-converted HTML with styles", () => {
+    const htmlString =
+      '<span style="background:#fff;color:#000">  File "</span><span style="background:#fff;color:#0000ff">test.py</span><span style="background:#fff;color:#000">", line </span><span style="background:#fff;color:#008000">1</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"  File "test.py", line 1"`);
+  });
+});
+
+describe("ansiToPlainText", () => {
+  test("converts ANSI color codes to plain text", () => {
+    const ansiString = "\x1b[31mError:\x1b[0m Something went wrong";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
+  });
+
+  test("handles multiple ANSI color codes", () => {
+    const ansiString =
+      "\x1b[32mSUCCESS:\x1b[0m \x1b[34mOperation completed\x1b[0m successfully";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `"SUCCESS: Operation completed successfully"`,
+    );
+  });
+
+  test("handles ANSI bold and color combinations", () => {
+    const ansiString =
+      "\x1b[1;31mBOLD RED ERROR:\x1b[0m \x1b[33mWarning message\x1b[0m";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"BOLD RED ERROR: Warning message"`);
+  });
+
+  test("handles Python traceback with ANSI codes", () => {
+    const ansiString =
+      "\x1b[0;36m  File \"\x1b[0m\x1b[0;32mtest.py\x1b[0m\x1b[0;36m\", line \x1b[0m\x1b[0;32m1\x1b[0m\x1b[0;36m, in \x1b[0m\x1b[0;35m<module>\x1b[0m\n\x1b[0;31mNameError\x1b[0m: name 'undefined_var' is not defined";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "  File "test.py", line 1, in <module>
+      NameError: name 'undefined_var' is not defined"
+    `);
+  });
+
+  test("handles error messages with background colors", () => {
+    const ansiString =
+      "\x1b[41;37m CRITICAL ERROR \x1b[0m \x1b[31mSystem failure detected\x1b[0m";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `" CRITICAL ERROR  System failure detected"`,
+    );
+  });
+
+  test("handles complex stack trace with mixed formatting", () => {
+    const ansiString =
+      'Traceback (most recent call last):\n  \x1b[36mFile "\x1b[32m/path/to/file.py\x1b[36m", line \x1b[32m42\x1b[36m, in \x1b[35mfunction_name\x1b[0m\n    \x1b[31mraise ValueError("Something went wrong")\x1b[0m\n\x1b[31mValueError\x1b[0m: Something went wrong';
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "Traceback (most recent call last):
+        File "/path/to/file.py", line 42, in function_name
+          raise ValueError("Something went wrong")
+      ValueError: Something went wrong"
+    `);
+  });
+
+  test("handles empty string", () => {
+    const ansiString = "";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`""`);
+  });
+
+  test("handles plain text without ANSI codes", () => {
+    const ansiString = "Plain error message without colors";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `"Plain error message without colors"`,
+    );
+  });
+
+  test("handles whitespace and newlines correctly", () => {
+    const ansiString =
+      "\x1b[31m  Error:  \x1b[0m\n\n  \x1b[33m  Warning  \x1b[0m  ";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "  Error:
+
+          Warning"
+    `);
+  });
+
+  test("handles JavaScript error stack trace", () => {
+    const ansiString =
+      "\x1b[31mReferenceError\x1b[0m: \x1b[33mvariable\x1b[0m is not defined\n    at \x1b[36mObject.<anonymous>\x1b[0m (\x1b[32m/path/to/script.js\x1b[0m:\x1b[33m5\x1b[0m:\x1b[33m1\x1b[0m)";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "ReferenceError: variable is not defined
+          at Object.<anonymous> (/path/to/script.js:5:1)"
+    `);
+  });
+
+  test("handles Rust panic with ANSI formatting", () => {
+    const ansiString =
+      "thread '\x1b[32mmain\x1b[0m' panicked at '\x1b[31massertion failed: `(left == right)`\x1b[0m'\n  \x1b[36mleft\x1b[0m: `\x1b[33m5\x1b[0m`\n \x1b[36mright\x1b[0m: `\x1b[33m10\x1b[0m`";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "thread 'main' panicked at 'assertion failed: \`(left == right)\`'
+        left: \`5\`
+       right: \`10\`"
+    `);
+  });
+
+  test("handles mix of 8-bit and 256-color ANSI codes", () => {
+    const ansiString =
+      "\x1b[38;5;196mBright Red\x1b[0m and \x1b[38;5;46mBright Green\x1b[0m text";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"Bright Red and Bright Green text"`);
+  });
+});

package/src/utils/__tests__/numbers.test.ts

@@ -6,24 +6,32 @@ import {
   prettyScientificNumber,
 } from "../numbers";
 
+const locale = "en-US";
+
 describe("prettyNumber", () => {
   it("should format numbers", () => {
-    expect(prettyNumber(123_456_789)).toBe("123,456,789");
-    expect(prettyNumber(1234.567_89)).toBe("1,234.57");
-    expect(prettyNumber(0)).toBe("0");
+    expect(prettyNumber(123_456_789, locale)).toBe("123,456,789");
+    expect(prettyNumber(1234.567_89, locale)).toBe("1,234.57");
+    expect(prettyNumber(0, locale)).toBe("0");
   });
 });
 
+const options = { locale };
+
 describe("prettyScientificNumber", () => {
   it("should handle special cases", () => {
-    expect(prettyScientificNumber(0)).toBe("0");
-    expect(prettyScientificNumber(Number.NaN)).toBe("NaN");
-    expect(prettyScientificNumber(Number.POSITIVE_INFINITY)).toBe("Infinity");
-    expect(prettyScientificNumber(Number.NEGATIVE_INFINITY)).toBe("-Infinity");
+    expect(prettyScientificNumber(0, options)).toBe("0");
+    expect(prettyScientificNumber(Number.NaN, options)).toBe("NaN");
+    expect(prettyScientificNumber(Number.POSITIVE_INFINITY, options)).toBe(
+      "Infinity",
+    );
+    expect(prettyScientificNumber(Number.NEGATIVE_INFINITY, options)).toBe(
+      "-Infinity",
+    );
   });
 
   it("should format decimals with scientific notation, ignoring integer part rounding", () => {
-    const opts = { shouldRound: true };
+    const opts = { shouldRound: true, locale };
     expect(prettyScientificNumber(123_456, opts)).toBe("123,456");
     expect(prettyScientificNumber(123_456.7, opts)).toBe("123,456.7");
     expect(prettyScientificNumber(12_345.6789, opts)).toBe("12,345.68");
@@ -40,10 +48,10 @@ describe("prettyScientificNumber", () => {
   });
 
   it("should not round numbers when shouldRound is false", () => {
-    expect(prettyScientificNumber(123_456)).toBe("123,456");
-    expect(prettyScientificNumber(123_456.7)).toBe("123,456.7");
-    expect(prettyScientificNumber(12_345.6789)).toBe("12,345.6789");
-    expect(prettyScientificNumber(1.234_567_891_011_12)).toBe(
+    expect(prettyScientificNumber(123_456, options)).toBe("123,456");
+    expect(prettyScientificNumber(123_456.7, options)).toBe("123,456.7");
+    expect(prettyScientificNumber(12_345.6789, options)).toBe("12,345.6789");
+    expect(prettyScientificNumber(1.234_567_891_011_12, options)).toBe(
       "1.23456789101112",
     );
   });
@@ -51,26 +59,30 @@ describe("prettyScientificNumber", () => {
 
 describe("prettyEngineeringNumber", () => {
   it("should handle special cases", () => {
-    expect(prettyEngineeringNumber(0)).toBe("0");
-    expect(prettyEngineeringNumber(-0)).toBe("0"); // Test with negative zero
-    expect(prettyEngineeringNumber(Number.NaN)).toBe("NaN");
-    expect(prettyEngineeringNumber(Number.POSITIVE_INFINITY)).toBe("Infinity");
-    expect(prettyEngineeringNumber(Number.NEGATIVE_INFINITY)).toBe("-Infinity");
+    expect(prettyEngineeringNumber(0, locale)).toBe("0");
+    expect(prettyEngineeringNumber(-0, locale)).toBe("0"); // Test with negative zero
+    expect(prettyEngineeringNumber(Number.NaN, locale)).toBe("NaN");
+    expect(prettyEngineeringNumber(Number.POSITIVE_INFINITY, locale)).toBe(
+      "Infinity",
+    );
+    expect(prettyEngineeringNumber(Number.NEGATIVE_INFINITY, locale)).toBe(
+      "-Infinity",
+    );
   });
 
   it("should format decimals with engineering notation, ignoring integer part", () => {
-    expect(prettyEngineeringNumber(123_456)).toBe("123k");
-    expect(prettyEngineeringNumber(123_456.7)).toBe("123k");
-    expect(prettyEngineeringNumber(12_345.6789)).toBe("12.3k");
-    expect(prettyEngineeringNumber(1.2345)).toBe("1.23");
-    expect(prettyEngineeringNumber(1.000_001_234)).toBe("1");
-    expect(prettyEngineeringNumber(0.12)).toBe("120m");
-    expect(prettyEngineeringNumber(0.1234)).toBe("123m");
-    expect(prettyEngineeringNumber(0.000_123_4)).toBe("123µ");
-    expect(prettyEngineeringNumber(-1.2345)).toBe("-1.23"); // Test with negative numbers
-    expect(prettyEngineeringNumber(-1.000_001_234)).toBe("-1");
-    expect(prettyEngineeringNumber(-0.12)).toBe("-120m");
-    expect(prettyEngineeringNumber(-0.1234)).toBe("-123m");
-    expect(prettyEngineeringNumber(-0.000_123_4)).toBe("-123µ");
+    expect(prettyEngineeringNumber(123_456, locale)).toBe("123k");
+    expect(prettyEngineeringNumber(123_456.7, locale)).toBe("123k");
+    expect(prettyEngineeringNumber(12_345.6789, locale)).toBe("12.3k");
+    expect(prettyEngineeringNumber(1.2345, locale)).toBe("1.23");
+    expect(prettyEngineeringNumber(1.000_001_234, locale)).toBe("1");
+    expect(prettyEngineeringNumber(0.12, locale)).toBe("120m");
+    expect(prettyEngineeringNumber(0.1234, locale)).toBe("123m");
+    expect(prettyEngineeringNumber(0.000_123_4, locale)).toBe("123µ");
+    expect(prettyEngineeringNumber(-1.2345, locale)).toBe("-1.23"); // Test with negative numbers
+    expect(prettyEngineeringNumber(-1.000_001_234, locale)).toBe("-1");
+    expect(prettyEngineeringNumber(-0.12, locale)).toBe("-120m");
+    expect(prettyEngineeringNumber(-0.1234, locale)).toBe("-123m");
+    expect(prettyEngineeringNumber(-0.000_123_4, locale)).toBe("-123µ");
   });
 });

package/src/utils/__tests__/once.test.ts

@@ -0,0 +1,187 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it, vi } from "vitest";
+import { memoizeLastValue, once } from "../once";
+
+describe("once", () => {
+  it("should call function only once", () => {
+    const fn = vi.fn(() => "result");
+    const onceFn = once(fn);
+
+    const result1 = onceFn();
+    const result2 = onceFn();
+
+    expect(result1).toBe("result");
+    expect(result2).toBe("result");
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should return the same result on subsequent calls", () => {
+    let counter = 0;
+    const fn = () => ++counter;
+    const onceFn = once(fn);
+
+    expect(onceFn()).toBe(1);
+    expect(onceFn()).toBe(1);
+    expect(onceFn()).toBe(1);
+  });
+});
+
+describe("memoizeLastValue", () => {
+  it("should memoize result for same arguments", () => {
+    const fn = vi.fn((a: number, b: string) => `${a}-${b}`);
+    const memoizedFn = memoizeLastValue(fn);
+
+    const result1 = memoizedFn(1, "test");
+    const result2 = memoizedFn(1, "test");
+
+    expect(result1).toBe("1-test");
+    expect(result2).toBe("1-test");
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should recompute for different arguments", () => {
+    const fn = vi.fn((a: number) => a * 2);
+    const memoizedFn = memoizeLastValue(fn);
+
+    const result1 = memoizedFn(5);
+    const result2 = memoizedFn(10);
+    const result3 = memoizedFn(5); // Should recompute since args changed from previous call
+
+    expect(result1).toBe(10);
+    expect(result2).toBe(20);
+    expect(result3).toBe(10);
+    expect(fn).toHaveBeenCalledTimes(3);
+  });
+
+  it("should handle no arguments", () => {
+    const fn = vi.fn(() => "no-args");
+    const memoizedFn = memoizeLastValue(fn);
+
+    const result1 = memoizedFn();
+    const result2 = memoizedFn();
+
+    expect(result1).toBe("no-args");
+    expect(result2).toBe("no-args");
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle single argument", () => {
+    const fn = vi.fn((x: number) => x + 1);
+    const memoizedFn = memoizeLastValue(fn);
+
+    expect(memoizedFn(5)).toBe(6);
+    expect(memoizedFn(5)).toBe(6);
+    expect(memoizedFn(3)).toBe(4);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle multiple arguments", () => {
+    const fn = vi.fn((a: number, b: string, c: boolean) => ({ a, b, c }));
+    const memoizedFn = memoizeLastValue(fn);
+
+    const result1 = memoizedFn(1, "hello", true);
+    const result2 = memoizedFn(1, "hello", true);
+    const result3 = memoizedFn(1, "hello", false);
+
+    expect(result1).toEqual({ a: 1, b: "hello", c: true });
+    expect(result2).toEqual({ a: 1, b: "hello", c: true });
+    expect(result3).toEqual({ a: 1, b: "hello", c: false });
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("should use shallow comparison for objects", () => {
+    const fn = vi.fn((obj: { x: number }) => obj.x * 2);
+    const memoizedFn = memoizeLastValue(fn);
+
+    const obj1 = { x: 5 };
+    const obj2 = { x: 5 }; // Different reference but same content
+
+    const result1 = memoizedFn(obj1);
+    const result2 = memoizedFn(obj1); // Same reference
+    const result3 = memoizedFn(obj2); // Different reference
+
+    expect(result1).toBe(10);
+    expect(result2).toBe(10);
+    expect(result3).toBe(10);
+    expect(fn).toHaveBeenCalledTimes(2); // obj1 (twice with same ref) and obj2 (different ref)
+  });
+
+  it("should handle arrays", () => {
+    const fn = vi.fn((arr: number[]) => arr.reduce((sum, x) => sum + x, 0));
+    const memoizedFn = memoizeLastValue(fn);
+
+    const result1 = memoizedFn([1, 2, 3]);
+    const result2 = memoizedFn([1, 2, 3]); // Different array reference but same content
+    const result3 = memoizedFn([1, 2, 4]); // Different content
+
+    expect(result1).toBe(6);
+    expect(result2).toBe(6);
+    expect(result3).toBe(7);
+    expect(fn).toHaveBeenCalledTimes(3); // Each call has different array reference
+  });
+
+  it("should handle mixed argument types", () => {
+    const fn = vi.fn(
+      (num: number, str: string, arr: number[], obj: { key: string }) =>
+        `${num}-${str}-${arr.length}-${obj.key}`,
+    );
+    const memoizedFn = memoizeLastValue(fn);
+
+    const arr = [1, 2, 3];
+    const obj = { key: "test" };
+
+    const result1 = memoizedFn(42, "hello", arr, obj);
+    const result2 = memoizedFn(42, "hello", arr, obj); // Same references
+    const result3 = memoizedFn(42, "hello", [1, 2, 3], { key: "test" }); // Different references
+
+    expect(result1).toBe("42-hello-3-test");
+    expect(result2).toBe("42-hello-3-test");
+    expect(result3).toBe("42-hello-3-test");
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle undefined and null arguments", () => {
+    const fn = vi.fn((a?: string, b?: null) => `${a}-${b}`);
+    const memoizedFn = memoizeLastValue(fn);
+
+    const result1 = memoizedFn(undefined, null);
+    const result2 = memoizedFn(undefined, null);
+    const result3 = memoizedFn("test", null);
+
+    expect(result1).toBe("undefined-null");
+    expect(result2).toBe("undefined-null");
+    expect(result3).toBe("test-null");
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("should preserve function context", () => {
+    const context = {
+      value: 10,
+      fn: vi.fn(function (this: { value: number }, multiplier: number) {
+        return this.value * multiplier;
+      }),
+    };
+
+    const memoizedFn = memoizeLastValue(context.fn);
+
+    const result1 = memoizedFn.call(context, 2);
+    const result2 = memoizedFn.call(context, 2);
+
+    expect(result1).toBe(20);
+    expect(result2).toBe(20);
+    expect(context.fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle functions that throw errors", () => {
+    const error = new Error("test error");
+    const fn = vi.fn(() => {
+      throw error;
+    });
+    const memoizedFn = memoizeLastValue(fn);
+
+    expect(() => memoizedFn()).toThrow("test error");
+    expect(() => memoizedFn()).toThrow("test error"); // Should throw cached error
+    expect(fn).toHaveBeenCalledTimes(1); // Error should be memoized too
+  });
+});

package/src/utils/dates.ts

@@ -7,6 +7,7 @@ import { Logger } from "./Logger";
 export function prettyDate(
   value: string | number | null | undefined,
   type: "date" | "datetime",
+  locale: string,
 ): string {
   if (value == null) {
     return "";
@@ -16,7 +17,7 @@ export function prettyDate(
     // If type is date, drop the timezone by rendering in UTC
     // since dates are absolute
     if (type === "date") {
-      return new Date(value).toLocaleDateString(undefined, {
+      return new Date(value).toLocaleDateString(locale, {
         year: "numeric",
         month: "short",
         day: "numeric",
@@ -25,7 +26,7 @@ export function prettyDate(
     }
 
     // For datetime, we keep the original timezone
-    return new Date(value).toLocaleDateString(undefined, {
+    return new Date(value).toLocaleDateString(locale, {
       year: "numeric",
       month: "short",
       day: "numeric",
@@ -43,12 +44,13 @@ export function prettyDate(
 export function exactDateTime(
   value: Date,
   timezone: string | undefined,
+  locale: string,
 ): string {
   const hasSubSeconds = value.getUTCMilliseconds() !== 0;
   try {
     if (timezone) {
       const valueWithTimezone = new TZDate(value, timezone);
-      const shortTimeZone = getShortTimeZone(timezone);
+      const shortTimeZone = getShortTimeZone(timezone, locale);
       if (hasSubSeconds) {
         return `${formatDate(valueWithTimezone, "yyyy-MM-dd HH:mm:ss.SSS")} ${shortTimeZone}`;
       }
@@ -66,9 +68,9 @@ export function exactDateTime(
   }
 }
 
-export function getShortTimeZone(timezone: string): string {
+export function getShortTimeZone(timezone: string, locale: string): string {
   try {
-    const abbrev = new Intl.DateTimeFormat("en-US", {
+    const abbrev = new Intl.DateTimeFormat(locale, {
       timeZone: timezone,
       timeZoneName: "short",
     })
@@ -88,7 +90,10 @@ export function getShortTimeZone(timezone: string): string {
  *
  * If a date in the past, it should say "<date> at 8:00 AM".
  */
-export function timeAgo(value: string | number | null | undefined): string {
+export function timeAgo(
+  value: string | number | null | undefined,
+  locale: string,
+): string {
   if (value == null) {
     return "";
   }
@@ -103,22 +108,22 @@ export function timeAgo(value: string | number | null | undefined): string {
     yesterday.setDate(yesterday.getDate() - 1);
 
     if (date.toDateString() === today.toDateString()) {
-      return `Today at ${date.toLocaleTimeString(undefined, {
+      return `Today at ${date.toLocaleTimeString(locale, {
         hour: "numeric",
         minute: "numeric",
       })}`;
     }
     if (date.toDateString() === yesterday.toDateString()) {
-      return `Yesterday at ${date.toLocaleTimeString(undefined, {
+      return `Yesterday at ${date.toLocaleTimeString(locale, {
         hour: "numeric",
         minute: "numeric",
       })}`;
     }
-    return `${date.toLocaleDateString(undefined, {
+    return `${date.toLocaleDateString(locale, {
       year: "numeric",
       month: "short",
       day: "numeric",
-    })} at ${date.toLocaleTimeString(undefined, {
+    })} at ${date.toLocaleTimeString(locale, {
       hour: "numeric",
       minute: "numeric",
     })}`;

package/src/utils/dom.ts

@@ -0,0 +1,55 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AnsiUp } from "ansi_up";
+import { Logger } from "./Logger";
+
+// Create a shared AnsiUp instance
+const ansiUp = new AnsiUp();
+
+/**
+ * Extracts plain text content from HTML by removing all HTML tags and normalizing whitespace.
+ *
+ * @param htmlString The HTML string to parse
+ * @returns Plain text content with HTML tags removed and whitespace normalized
+ */
+export function parseHtmlContent(htmlString: string): string {
+  try {
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+
+    // Extract text content, removing HTML tags
+    const textContent = tempDiv.textContent || tempDiv.innerText || "";
+    const lines = textContent.split("\n");
+    return lines.map((line) => line.trimEnd()).join("\n");
+  } catch (error) {
+    Logger.error("Error parsing HTML content:", error);
+    // If parsing fails, return the original string
+    return htmlString;
+  }
+}
+
+/**
+ * Converts ANSI escape sequences to plain text by first converting to HTML and then stripping HTML tags.
+ * This is useful for console output that may contain ANSI color codes or formatting.
+ *
+ * @param ansiString String that may contain ANSI escape sequences
+ * @returns Plain text with ANSI codes removed and HTML stripped
+ */
+export function ansiToPlainText(ansiString: string): string {
+  if (!ansiString) {
+    return "";
+  }
+
+  try {
+    // Convert ANSI escape sequences to HTML
+    const htmlString = ansiUp.ansi_to_html(ansiString);
+
+    // Strip HTML tags and return clean text
+    return parseHtmlContent(htmlString);
+  } catch (error) {
+    Logger.error("Error converting ANSI to plain text:", error);
+    // If conversion fails, return the original string
+    return ansiString;
+  }
+}

package/src/utils/edit-distance.ts

@@ -1,11 +1,13 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-export enum OperationType {
-  INSERT = "insert",
-  DELETE = "delete",
-  SUBSTITUTE = "substitute",
-  MATCH = "match",
-}
+export const OperationType = {
+  INSERT: "insert",
+  DELETE: "delete",
+  SUBSTITUTE: "substitute",
+  MATCH: "match",
+};
+
+type OperationType = (typeof OperationType)[keyof typeof OperationType];
 
 export interface EditOperation {
   type: OperationType;

package/src/utils/errors.ts

@@ -64,7 +64,7 @@ function safeJSONParse(message: string): unknown {
 
 export class CellNotInitializedError extends Error {
   constructor(
-    message: string = "The cell containing this UI element has not been run yet. Please run the cell first.",
+    message = "The cell containing this UI element has not been run yet. Please run the cell first.",
   ) {
     super(message);
     this.name = "CellNotInitializedError";