@marimo-team/frontend 0.15.4 → 0.16.0-dev96986

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/__tests__/path.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { EDGE_CASE_FILENAMES } from "../../__tests__/mocks";
 import { type FilePath, PathBuilder, Paths } from "../paths";
 
 describe("Paths", () => {
@@ -167,4 +168,41 @@ describe("PathBuilder", () => {
       expect(Paths.extension("file.tar.gz")).toBe("gz");
     });
   });
+
+  describe("edge case filenames", () => {
+    it.each(EDGE_CASE_FILENAMES)(
+      "should handle unicode and spaces in basename: %s",
+      (filename) => {
+        const basename = Paths.basename(filename);
+        expect(basename).toBe(filename);
+        expect(typeof basename).toBe("string");
+        expect(basename).not.toBe("");
+      },
+    );
+
+    it.each(EDGE_CASE_FILENAMES)(
+      "should handle unicode and spaces in dirname: %s",
+      (filename) => {
+        const fullPath = `/path/to/${filename}`;
+        const dirname = Paths.dirname(fullPath);
+        expect(dirname).toBe("/path/to");
+      },
+    );
+
+    it.each(EDGE_CASE_FILENAMES)(
+      "should handle unicode and spaces in path operations: %s",
+      (filename) => {
+        const baseName = Paths.basename(filename);
+        const extension = Paths.extension(filename);
+
+        // Should preserve unicode characters in basename
+        expect(baseName).toContain(filename.split(".")[0]);
+
+        // Should correctly extract extension
+        if (filename.includes(".")) {
+          expect(extension).toBe(filename.split(".").pop());
+        }
+      },
+    );
+  });
 });

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

@@ -1,6 +1,10 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { isUrl } from "../urls";
+import {
+  EDGE_CASE_FILENAMES,
+  URL_SPECIAL_CHAR_FILENAMES,
+} from "../../__tests__/mocks";
+import { isUrl, updateQueryParams } from "../urls";
 
 describe("isUrl", () => {
   it("should return true for a valid URL", () => {
@@ -8,3 +12,54 @@ describe("isUrl", () => {
     expect(isUrl("curl -X GET http://example.com")).toBe(false);
   });
 });
+
+describe("URL parameter handling with edge case filenames", () => {
+  it.each(EDGE_CASE_FILENAMES)(
+    "should handle unicode filenames in URL parameters: %s",
+    (filename) => {
+      // Test that updateQueryParams can handle unicode filenames
+      updateQueryParams((params) => {
+        params.set("file", filename);
+      });
+
+      // Verify URL encoding/decoding works with unicode
+      const encoded = encodeURIComponent(filename);
+      const decoded = decodeURIComponent(encoded);
+      expect(decoded).toBe(filename);
+
+      // Verify filename can be safely added to URL parameters
+      const url = new URL("https://example.com");
+      url.searchParams.set("file", filename);
+      expect(url.searchParams.get("file")).toBe(filename);
+    },
+  );
+
+  it("should preserve unicode in query string round-trip", () => {
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const url = new URL("https://example.com");
+      url.searchParams.set("filename", filename);
+
+      // Convert to string and back
+      const urlString = url.toString();
+      const reconstructed = new URL(urlString);
+      const retrievedFilename = reconstructed.searchParams.get("filename");
+
+      expect(retrievedFilename).toBe(filename);
+    });
+  });
+
+  it("should handle special characters in updateQueryParams", () => {
+    URL_SPECIAL_CHAR_FILENAMES.forEach((filename) => {
+      let res: string | null = null;
+      expect(() => {
+        updateQueryParams((params) => {
+          // To and from conversion
+          params.set("file", filename);
+          res = params.get("file");
+        });
+      }).not.toThrow();
+      expect(res).not.toBeNull();
+      expect(res).toBe(filename);
+    });
+  });
+});

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/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

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

package/src/utils/id-tree.tsx

@@ -23,11 +23,15 @@ export type CellIndex = number & { __brand?: "CellIndex" };
  * Tree data structure for handling ids with nested children
  */
 export class TreeNode<T> {
-  constructor(
-    public value: T,
-    public isCollapsed: boolean,
-    public children: Array<TreeNode<T>>,
-  ) {}
+  public value: T;
+  public isCollapsed: boolean;
+  public children: Array<TreeNode<T>>;
+
+  constructor(value: T, isCollapsed: boolean, children: Array<TreeNode<T>>) {
+    this.value = value;
+    this.isCollapsed = isCollapsed;
+    this.children = children;
+  }
 
   /**
    * Recursively count the number of nodes in the tree
@@ -102,10 +106,13 @@ export class TreeNode<T> {
 let uniqueId = 0;
 
 export class CollapsibleTree<T> {
-  private constructor(
-    public readonly nodes: Array<TreeNode<T>>,
-    public readonly id: CellColumnId,
-  ) {}
+  public readonly nodes: Array<TreeNode<T>>;
+  public readonly id: CellColumnId;
+
+  private constructor(nodes: Array<TreeNode<T>>, id: CellColumnId) {
+    this.nodes = nodes;
+    this.id = id;
+  }
 
   static from<T>(ids: T[]): CollapsibleTree<T> {
     const id = `tree_${uniqueId++}` as CellColumnId;
@@ -592,7 +599,11 @@ export class CollapsibleTree<T> {
 }
 
 export class MultiColumn<T> {
-  constructor(private readonly columns: ReadonlyArray<CollapsibleTree<T>>) {
+  private readonly columns: ReadonlyArray<CollapsibleTree<T>>;
+
+  constructor(columns: ReadonlyArray<CollapsibleTree<T>>) {
+    this.columns = columns;
+
     // Ensure there is always at least one column
     if (columns.length === 0) {
       this.columns = [CollapsibleTree.from([])];

package/src/utils/localStorage.ts

@@ -12,7 +12,10 @@ interface Storage<T> {
 }
 
 export class TypedLocalStorage<T> implements Storage<T> {
-  constructor(private defaultValue: T) {}
+  private defaultValue: T;
+  constructor(defaultValue: T) {
+    this.defaultValue = defaultValue;
+  }
 
   get(key: string): T {
     try {
@@ -33,10 +36,16 @@ export class TypedLocalStorage<T> implements Storage<T> {
 }
 
 export class ZodLocalStorage<T> implements Storage<T> {
+  private schema: ZodType<T, ZodTypeDef, unknown>;
+  private getDefaultValue: () => T;
+
   constructor(
-    private schema: ZodType<T, ZodTypeDef, unknown>,
-    private getDefaultValue: () => T,
-  ) {}
+    schema: ZodType<T, ZodTypeDef, unknown>,
+    getDefaultValue: () => T,
+  ) {
+    this.schema = schema;
+    this.getDefaultValue = getDefaultValue;
+  }
 
   get(key: string): T {
     try {

package/src/utils/numbers.ts

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-export function prettyNumber(value: unknown): string {
+export function prettyNumber(value: unknown, locale: string): string {
   if (value === undefined || value === null) {
     return "";
   }
@@ -18,7 +18,7 @@ export function prettyNumber(value: unknown): string {
   }
 
   if (typeof value === "number" || typeof value === "bigint") {
-    return value.toLocaleString(undefined, {
+    return value.toLocaleString(locale, {
       minimumFractionDigits: 0,
       maximumFractionDigits: 2,
     });
@@ -45,9 +45,9 @@ function scientificSpecialCase(value: number): string | null {
 export function prettyScientificNumber(
   value: number,
   opts: {
-    // Default to false
-    shouldRound?: boolean;
-  } = {},
+    shouldRound?: boolean; // Default to false
+    locale: string;
+  },
 ): string {
   // Handle special cases first
   const specialCase = scientificSpecialCase(value);
@@ -58,7 +58,7 @@ export function prettyScientificNumber(
   // Determine if the number should be in scientific notation
   const absValue = Math.abs(value);
   if (absValue < 1e-2 || absValue >= 1e6) {
-    return new Intl.NumberFormat(undefined, {
+    return new Intl.NumberFormat(opts.locale, {
       minimumFractionDigits: 1,
       maximumFractionDigits: 1,
       notation: "scientific",
@@ -67,18 +67,18 @@ export function prettyScientificNumber(
       .toLowerCase();
   }
 
-  const { shouldRound } = opts;
+  const { shouldRound, locale } = opts;
 
   if (shouldRound) {
     // Number has an integer part, format with 2 decimal places
-    return new Intl.NumberFormat(undefined, {
+    return new Intl.NumberFormat(locale, {
       minimumFractionDigits: 0,
       maximumFractionDigits: 2,
     }).format(value);
   }
 
   // Don't round
-  return value.toLocaleString(undefined, {
+  return value.toLocaleString(locale, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 100,
   });
@@ -104,14 +104,14 @@ const prefixes = {
   "-24": "y",
 };
 
-export function prettyEngineeringNumber(value: number): string {
+export function prettyEngineeringNumber(value: number, locale: string): string {
   // Handle special cases first
   const specialCase = scientificSpecialCase(value);
   if (specialCase !== null) {
     return specialCase;
   }
 
-  const [mant, exp] = new Intl.NumberFormat("en-us", {
+  const [mant, exp] = new Intl.NumberFormat(locale, {
     notation: "engineering",
     maximumSignificantDigits: 3,
   })

package/src/utils/once.ts

@@ -1,5 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { arrayShallowEquals } from "./arrays";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function once<T extends (...args: any[]) => any>(fn: T): T {
   let result: ReturnType<T>;
@@ -15,3 +17,33 @@ export function once<T extends (...args: any[]) => any>(fn: T): T {
     return result;
   } as T;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function memoizeLastValue<T extends (...args: any[]) => any>(fn: T): T {
+  let result: ReturnType<T>;
+  let lastArgs: Parameters<T> | undefined;
+  let lastError: unknown;
+  let hasError = false;
+
+  return function (
+    this: ThisParameterType<T>,
+    ...args: Parameters<T>
+  ): ReturnType<T> {
+    if (lastArgs === undefined || !arrayShallowEquals(args, lastArgs)) {
+      try {
+        result = fn.apply(this, args) as ReturnType<T>;
+        hasError = false;
+        lastError = undefined;
+      } catch (error) {
+        hasError = true;
+        lastError = error;
+      }
+      lastArgs = args;
+    }
+
+    if (hasError) {
+      throw lastError;
+    }
+    return result;
+  } as T;
+}

package/src/utils/paths.ts

@@ -32,7 +32,10 @@ export const Paths = {
 };
 
 export class PathBuilder {
-  constructor(public readonly deliminator: "/" | "\\") {}
+  public readonly deliminator: string;
+  constructor(deliminator: "/" | "\\") {
+    this.deliminator = deliminator;
+  }
 
   static guessDeliminator(path: string): PathBuilder {
     return path.includes("/") ? new PathBuilder("/") : new PathBuilder("\\");

package/src/utils/pluralize.ts

@@ -1,10 +1,13 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 export class PluralWord {
-  constructor(
-    public singular: string,
-    public _plural?: string,
-  ) {}
+  public singular: string;
+  public _plural?: string;
+
+  constructor(singular: string, _plural?: string) {
+    this.singular = singular;
+    this._plural = _plural;
+  }
 
   public pluralize(count: number) {
     return count === 1 ? this.singular : this.plural;
@@ -16,7 +19,11 @@ export class PluralWord {
 }
 
 export class PluralWords {
-  constructor(private words: PluralWord[]) {}
+  private words: PluralWord[];
+
+  constructor(words: PluralWord[]) {
+    this.words = words;
+  }
 
   static of(...words: Array<PluralWord | string>) {
     return new PluralWords(