@marimo-team/frontend 0.14.18-dev9 → 0.15.1-dev10

package/src/stories/vega.stories.tsx

@@ -0,0 +1,57 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { Meta } from "@storybook/react-vite";
+import type { VegaLiteSpec } from "@/plugins/impl/vega/types";
+import VegaComponent from "@/plugins/impl/vega/vega-component";
+import {
+  AREA_CHART,
+  BAR_CHART,
+  CIRCLE_2_CHART,
+  CIRCLE_CHART,
+  DONUT_CHART,
+  LINE_CHART,
+  PIE_CHART,
+  POINT_CHART,
+  RECT_CHART,
+  RULE_CHART,
+  SQUARE_CHART,
+  STACKED_BAR_CHART,
+  TICK_CHART,
+} from "./__fixtures__/vega";
+
+const meta: Meta = {
+  title: "Vega",
+  args: {},
+};
+export default meta;
+
+const selectionOptions = [true, false, "interval", "point"] as const;
+
+const chartWithData = (spec: VegaLiteSpec) => (
+  <div className="flex flex-col gap-4">
+    {selectionOptions.map((selection) => (
+      <VegaComponent
+        key={String(selection)}
+        setValue={console.log}
+        value={{}}
+        spec={spec}
+        chartSelection={selection}
+        fieldSelection={true}
+      />
+    ))}
+  </div>
+);
+
+export const AreaChart = () => chartWithData(AREA_CHART);
+export const BarChart = () => chartWithData(BAR_CHART);
+export const CircleChart = () => chartWithData(CIRCLE_CHART);
+export const Circle2Chart = () => chartWithData(CIRCLE_2_CHART);
+export const DonutChart = () => chartWithData(DONUT_CHART);
+export const LineChart = () => chartWithData(LINE_CHART);
+export const PieChart = () => chartWithData(PIE_CHART);
+export const PointScatterChart = () => chartWithData(POINT_CHART);
+export const RectChart = () => chartWithData(RECT_CHART);
+export const RuleChart = () => chartWithData(RULE_CHART);
+export const SquareChart = () => chartWithData(SQUARE_CHART);
+export const StackedBarChart = () => chartWithData(STACKED_BAR_CHART);
+export const TickChart = () => chartWithData(TICK_CHART);

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,32 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { memo, type PropsWithChildren, useLayoutEffect } from "react";
+import { useTheme } from "./useTheme";
+
+/**
+ * Marimo's theme provider.
+ */
+export const ThemeProvider: React.FC<PropsWithChildren> = memo(
+  ({ children }) => {
+    const { theme } = useTheme();
+    useLayoutEffect(() => {
+      document.body.classList.add(theme, `${theme}-theme`);
+      return () => {
+        document.body.classList.remove(theme, `${theme}-theme`);
+      };
+    }, [theme]);
+
+    return children;
+  },
+);
+ThemeProvider.displayName = "ThemeProvider";
+
+export const CssVariables: React.FC<{
+  variables: Record<`--marimo-${string}`, string>;
+  children: React.ReactNode;
+}> = ({ variables, children }) => {
+  return (
+    <div className="contents" style={variables}>
+      {children}
+    </div>
+  );
+};

package/src/theme/namespace.tsx

@@ -0,0 +1,23 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React, { type PropsWithChildren } from "react";
+
+const style = {
+  display: "contents",
+};
+
+/**
+ * Adds the 'marimo' className which serves as a namespace to its children,
+ * so that the styles are scoped to the DOM subtree.
+ */
+export const StyleNamespace = React.forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<{}>
+>(({ children }, ref) => {
+  return (
+    <div ref={ref} className="marimo" style={style}>
+      {children}
+    </div>
+  );
+});
+
+StyleNamespace.displayName = "StyleNamespace";

package/src/theme/useTheme.ts

@@ -0,0 +1,89 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { isIslands } from "@/core/islands/utils";
+import { store } from "@/core/state/jotai";
+
+export type Theme = "light" | "dark" | "system";
+export type ResolvedTheme = "light" | "dark";
+
+export const THEMES: Theme[] = ["light", "dark", "system"];
+
+const themeAtom = atom((get) => {
+  // If it is islands, try a few ways to infer if it is dark mode.
+  if (isIslands()) {
+    // If it has a dark mode class on the body, use dark mode.
+    if (
+      document.body.classList.contains("dark-mode") ||
+      document.body.classList.contains("dark")
+    ) {
+      return "dark";
+    }
+
+    // If it has data-theme=dark or data-mode=dark on the body, use dark mode.
+    if (
+      document.body.dataset.theme === "dark" ||
+      document.body.dataset.mode === "dark" ||
+      document.body.dataset.vscodeThemeKind === "vscode-dark" ||
+      document.body.dataset.vscodeThemeKind === "vscode-high-contrast"
+    ) {
+      return "dark";
+    }
+
+    // Check the computed style for color-scheme
+    const computedStyle = window.getComputedStyle(document.body);
+    const colorScheme = computedStyle.getPropertyValue("color-scheme").trim();
+    if (colorScheme) {
+      return colorScheme.includes("dark") ? "dark" : "light";
+    }
+
+    // Fallback: check for dark background color
+    const bgColor = computedStyle.getPropertyValue("background-color");
+    const rgb = bgColor.match(/\d+/g);
+    if (rgb) {
+      const [r, g, b] = rgb.map(Number);
+      const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+      return brightness < 128 ? "dark" : "light";
+    }
+
+    // We don't want to infer from the system theme,
+    // since the island consumer may not support dark mode.
+    return "light";
+  }
+
+  return get(resolvedMarimoConfigAtom).display.theme;
+});
+
+const prefersDarkModeAtom = atom(false);
+
+function setupThemeListener(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (!window.matchMedia) {
+    return;
+  }
+
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  store.set(prefersDarkModeAtom, media.matches);
+  media.addEventListener("change", (e) => {
+    store.set(prefersDarkModeAtom, e.matches);
+  });
+}
+setupThemeListener();
+
+export const resolvedThemeAtom = atom((get) => {
+  const theme = get(themeAtom);
+  const prefersDarkMode = get(prefersDarkModeAtom);
+  return theme === "system" ? (prefersDarkMode ? "dark" : "light") : theme;
+});
+
+/**
+ * React hook to get the theme of the app.
+ * This is stored in the user config.
+ */
+export function useTheme(): { theme: ResolvedTheme } {
+  const theme = useAtomValue(resolvedThemeAtom, { store });
+  return { theme };
+}

package/src/utils/Deferred.ts

@@ -0,0 +1,20 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+export class Deferred<T> {
+  promise: Promise<T>;
+  resolve!: (value: T | PromiseLike<T>) => void;
+  reject!: (reason?: unknown) => void;
+  status: "pending" | "resolved" | "rejected" = "pending";
+
+  constructor() {
+    this.promise = new Promise<T>((resolve, reject) => {
+      this.reject = (reason: unknown) => {
+        this.status = "rejected";
+        reject(reason as Error);
+      };
+      this.resolve = (value) => {
+        this.status = "resolved";
+        resolve(value);
+      };
+    });
+  }
+}

package/src/utils/Logger.ts

@@ -0,0 +1,91 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+/* eslint-disable no-console */
+
+import { Functions } from "./functions";
+
+declare global {
+  interface Window {
+    Logger?: ILogger;
+  }
+}
+
+interface ILogger {
+  debug: (typeof console)["debug"];
+  log: (typeof console)["log"];
+  warn: (typeof console)["warn"];
+  error: (typeof console)["error"];
+  trace: (typeof console)["trace"];
+  get: (namespace: string) => ILogger;
+  disabled: (disabled?: boolean) => ILogger;
+}
+
+const createNamespacedLogger = (
+  namespace: string,
+  baseLogger: ILogger,
+): ILogger => {
+  const prefix = `[${namespace}]`;
+  return {
+    debug: (...args) => baseLogger.debug(prefix, ...args),
+    log: (...args) => baseLogger.log(prefix, ...args),
+    warn: (...args) => baseLogger.warn(prefix, ...args),
+    error: (...args) => baseLogger.error(prefix, ...args),
+    trace: (...args) => baseLogger.trace(prefix, ...args),
+    get: (subNamespace: string) =>
+      createNamespacedLogger(`${namespace}.${subNamespace}`, baseLogger),
+    disabled: (disabled = true) => {
+      if (disabled) {
+        return DisabledLogger;
+      }
+      return baseLogger;
+    },
+  };
+};
+
+/**
+ * Wrapper around console.log that can be used to disable logging in production or add additional logging.
+ */
+const ConsoleLogger: ILogger = {
+  debug: (...args) => {
+    if (process.env.NODE_ENV !== "production") {
+      console.debug(...args);
+    }
+  },
+  log: (...args) => {
+    console.log(...args);
+  },
+  warn: (...args) => {
+    console.warn(...args);
+  },
+  error: (...args) => {
+    console.error(...args);
+  },
+  trace: (...args) => {
+    console.trace(...args);
+  },
+  get: (namespace: string) => createNamespacedLogger(namespace, ConsoleLogger),
+  disabled: (disabled = true) => {
+    if (disabled) {
+      return DisabledLogger;
+    }
+    return ConsoleLogger;
+  },
+};
+
+const DisabledLogger: ILogger = {
+  debug: () => Functions.NOOP,
+  log: () => Functions.NOOP,
+  warn: () => Functions.NOOP,
+  error: () => Functions.NOOP,
+  trace: () => Functions.NOOP,
+  get: () => DisabledLogger,
+  disabled: () => DisabledLogger,
+};
+
+function getLogger(): ILogger {
+  if (typeof window !== "undefined") {
+    return window.Logger || ConsoleLogger;
+  }
+  return ConsoleLogger;
+}
+
+export const Logger = getLogger();

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

@@ -0,0 +1,38 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { Deferred } from "../Deferred";
+
+describe("Deferred", () => {
+  it("should resolve correctly", async () => {
+    const deferred = new Deferred<number>();
+    expect(deferred.status).toBe("pending");
+
+    const value = 42;
+    deferred.resolve(value);
+    expect(deferred.status).toBe("resolved");
+
+    const result = await deferred.promise;
+    expect(result).toBe(value);
+  });
+
+  it("should reject correctly", async () => {
+    const deferred = new Deferred<number>();
+    expect(deferred.status).toBe("pending");
+
+    const error = new Error("test error");
+    deferred.reject(error);
+    expect(deferred.status).toBe("rejected");
+
+    await expect(deferred.promise).rejects.toThrow(error);
+  });
+
+  it("should handle promise-like values in resolve", async () => {
+    const deferred = new Deferred<string>();
+    const promiseValue = Promise.resolve("test");
+    deferred.resolve(promiseValue);
+    expect(deferred.status).toBe("resolved");
+
+    const result = await deferred.promise;
+    expect(result).toBe("test");
+  });
+});

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

@@ -0,0 +1,130 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import {
+  Arrays,
+  arrayDelete,
+  arrayInsert,
+  arrayInsertMany,
+  arrayMove,
+  arrayShallowEquals,
+  arrayToggle,
+} from "../arrays";
+
+describe("arrays", () => {
+  describe("arrayDelete", () => {
+    it("should delete an element at the specified index", () => {
+      expect(arrayDelete([1, 2, 3], 1)).toEqual([1, 3]);
+    });
+
+    it("should handle first and last elements", () => {
+      expect(arrayDelete([1, 2, 3], 0)).toEqual([2, 3]);
+      expect(arrayDelete([1, 2, 3], 2)).toEqual([1, 2]);
+    });
+  });
+
+  describe("arrayInsert", () => {
+    it("should insert an element at the specified index", () => {
+      expect(arrayInsert([1, 2, 3], 1, 4)).toEqual([1, 4, 2, 3]);
+    });
+
+    it("should clamp index to array bounds", () => {
+      expect(arrayInsert([1, 2, 3], -1, 4)).toEqual([4, 1, 2, 3]);
+      expect(arrayInsert([1, 2, 3], 5, 4)).toEqual([1, 2, 3, 4]);
+    });
+
+    it("should handle empty arrays", () => {
+      expect(arrayInsert([], 0, 1)).toEqual([1]);
+    });
+  });
+
+  describe("arrayMove", () => {
+    it("should move an element from one index to another", () => {
+      expect(arrayMove([1, 2, 3], 0, 2)).toEqual([2, 3, 1]);
+      expect(arrayMove([1, 2, 3], 2, 0)).toEqual([3, 1, 2]);
+    });
+
+    it("should handle adjacent moves", () => {
+      expect(arrayMove([1, 2, 3], 0, 1)).toEqual([2, 1, 3]);
+      expect(arrayMove([1, 2, 3], 1, 0)).toEqual([2, 1, 3]);
+    });
+  });
+
+  describe("arrayInsertMany", () => {
+    it("should insert multiple elements at the specified index", () => {
+      expect(arrayInsertMany([1, 2, 3], 1, [4, 5])).toEqual([1, 4, 5, 2, 3]);
+    });
+
+    it("should handle empty target array", () => {
+      expect(arrayInsertMany([], 0, [1, 2])).toEqual([1, 2]);
+    });
+
+    it("should handle empty insert array", () => {
+      expect(arrayInsertMany([1, 2, 3], 1, [])).toEqual([1, 2, 3]);
+    });
+
+    it("should clamp index to array bounds", () => {
+      expect(arrayInsertMany([1, 2, 3], -1, [4, 5])).toEqual([4, 5, 1, 2, 3]);
+      expect(arrayInsertMany([1, 2, 3], 5, [4, 5])).toEqual([1, 2, 3, 4, 5]);
+    });
+  });
+
+  describe("arrayShallowEquals", () => {
+    it("should return true for identical arrays", () => {
+      expect(arrayShallowEquals([1, 2, 3], [1, 2, 3])).toBe(true);
+    });
+
+    it("should return false for arrays with different lengths", () => {
+      expect(arrayShallowEquals([1, 2], [1, 2, 3])).toBe(false);
+    });
+
+    it("should return false for arrays with same length but different elements", () => {
+      expect(arrayShallowEquals([1, 2, 3], [1, 2, 4])).toBe(false);
+    });
+
+    it("should handle empty arrays", () => {
+      expect(arrayShallowEquals([], [])).toBe(true);
+    });
+
+    it("should use strict equality for objects", () => {
+      const obj = { a: 1 };
+      expect(arrayShallowEquals([obj], [obj])).toBe(true);
+      expect(arrayShallowEquals([obj], [{ a: 1 }])).toBe(false);
+    });
+  });
+
+  describe("Arrays.zip", () => {
+    it("should zip two arrays of equal length", () => {
+      expect(Arrays.zip([1, 2], ["a", "b"])).toEqual([
+        [1, "a"],
+        [2, "b"],
+      ]);
+    });
+
+    it("should throw for arrays of different lengths", () => {
+      expect(() => Arrays.zip([1, 2], ["a"])).toThrow();
+    });
+
+    it("should handle empty arrays", () => {
+      expect(Arrays.zip([], [])).toEqual([]);
+    });
+  });
+
+  describe("arrayToggle", () => {
+    it("should add item if not present", () => {
+      expect(arrayToggle([1, 2], 3)).toEqual([1, 2, 3]);
+    });
+
+    it("should remove item if present", () => {
+      expect(arrayToggle([1, 2, 3], 2)).toEqual([1, 3]);
+    });
+
+    it("should handle undefined/null array", () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(arrayToggle(undefined as any, 1)).toEqual([1]);
+    });
+
+    it("should handle empty array", () => {
+      expect(arrayToggle([], 1)).toEqual([1]);
+    });
+  });
+});

package/src/utils/__tests__/batch-requests.test.ts

@@ -0,0 +1,60 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { describe, expect, it, vi } from "vitest";
+import { batch } from "../batch-requests";
+
+async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+describe("batch", () => {
+  it("should return the same promise for calls with the same key", async () => {
+    const loader = vi.fn().mockImplementation(async (arg) => {
+      await sleep(10);
+      return "response";
+    });
+    const batchedLoader = batch(loader, JSON.stringify);
+
+    const promise1 = batchedLoader("arg1");
+    const promise2 = batchedLoader("arg1");
+
+    expect(promise1).toBe(promise2);
+    expect(loader).toHaveBeenCalledTimes(1);
+
+    const result = await promise1;
+    expect(result).toBe("response");
+  });
+
+  it("should call loader again after the first promise resolves", async () => {
+    const loader = vi.fn().mockImplementation(async (arg) => {
+      await sleep(10);
+      return "response";
+    });
+    const batchedLoader = batch(loader, JSON.stringify);
+
+    const promise1 = batchedLoader("arg1");
+    await promise1;
+
+    const promise2 = batchedLoader("arg1");
+    expect(promise1).not.toBe(promise2);
+    expect(loader).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle different keys separately", async () => {
+    const loader = vi.fn().mockImplementation(async (arg) => {
+      await sleep(10);
+      return "response";
+    });
+    const batchedLoader = batch(loader, JSON.stringify);
+
+    const promise1 = batchedLoader("arg1");
+    const promise2 = batchedLoader("arg2");
+
+    expect(promise1).not.toBe(promise2);
+    expect(loader).toHaveBeenCalledTimes(2);
+
+    const result1 = await promise1;
+    const result2 = await promise2;
+    expect(result1).toBe("response");
+    expect(result2).toBe("response");
+  });
+});

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

@@ -0,0 +1,52 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { beforeEach, describe, expect, test } from "vitest";
+import { deserializeBlob, serializeBlob } from "../blob";
+
+describe("Blob serialization and deserialization", () => {
+  const testString = "Hello, world!";
+  const mimeType = "text/plain";
+  let testBlob: Blob;
+
+  beforeEach(() => {
+    testBlob = new Blob([testString], { type: mimeType });
+  });
+
+  test("serializeBlob should serialize a Blob to a base64 string", async () => {
+    const serialized = await serializeBlob(testBlob);
+    expect(serialized).toBeDefined();
+    expect(serialized).toContain(`data:${mimeType};base64,`);
+  });
+
+  test("deserializeBlob should deserialize a base64 string to a Blob", async () => {
+    const serialized = await serializeBlob(testBlob);
+    const deserialized = await deserializeBlob(serialized);
+    expect(deserialized).toBeDefined();
+    expect(deserialized.size).toBe(testBlob.size);
+    expect(deserialized.type).toBe(testBlob.type);
+  });
+
+  test("deserialized Blob should contain the original content", async () => {
+    const serialized = await serializeBlob(testBlob);
+    const deserialized = await deserializeBlob(serialized);
+    const reader = new FileReader();
+    // eslint-disable-next-line unicorn/prefer-blob-reading-methods
+    reader.readAsText(deserialized);
+    await new Promise((resolve) => {
+      reader.onload = () => {
+        expect(reader.result).toBe(testString);
+        resolve(null);
+      };
+    });
+  });
+
+  test("image Blobs should be deserialized correctly", async () => {
+    const imageBlob = new Blob([new Uint8Array([1, 2, 3])], {
+      type: "image/png",
+    });
+    const serialized = await serializeBlob(imageBlob);
+    const deserialized = await deserializeBlob(serialized);
+    expect(deserialized).toBeDefined();
+    expect(deserialized.size).toBe(imageBlob.size);
+    expect(deserialized.type).toBe(imageBlob.type);
+  });
+});

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

@@ -0,0 +1,92 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  canLinkToCell,
+  createCellLink,
+  extractCellNameFromHash,
+} from "../cell-urls";
+
+describe("cell-urls utilities", () => {
+  const originalLocation = window.location;
+
+  beforeEach(() => {
+    // Mock window.location for testing
+    Object.defineProperty(window, "location", {
+      value: {
+        href: "https://example.com/notebook?file=test.py",
+        hash: "",
+      },
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    // Restore original location
+    Object.defineProperty(window, "location", {
+      value: originalLocation,
+      writable: true,
+    });
+  });
+
+  describe("createCellLink", () => {
+    it("should create a URL with the cell name in the hash", () => {
+      const url = createCellLink("myCellName");
+      expect(url).toBe(
+        "https://example.com/notebook?file=test.py#scrollTo=myCellName",
+      );
+    });
+
+    it("should encode special characters in cell name", () => {
+      const url = createCellLink("cell name with spaces & symbols");
+      expect(url).toBe(
+        "https://example.com/notebook?file=test.py#scrollTo=cell%20name%20with%20spaces%20%26%20symbols",
+      );
+    });
+  });
+
+  describe("extractCellNameFromHash", () => {
+    it("should extract cell name from hash", () => {
+      expect(extractCellNameFromHash("#scrollTo=cell1")).toBe("cell1");
+      expect(extractCellNameFromHash("#scrollTo=cell1&other=param")).toBe(
+        "cell1",
+      );
+      expect(extractCellNameFromHash("#other=param&scrollTo=cell1")).toBe(
+        "cell1",
+      );
+    });
+
+    it("should return null if no cell name is found", () => {
+      expect(extractCellNameFromHash("")).toBeNull();
+      expect(extractCellNameFromHash("#other=param")).toBeNull();
+    });
+
+    it("should decode special characters in cell name", () => {
+      const cellName = extractCellNameFromHash(
+        "#scrollTo=cell%20name%20with%20spaces%20%26%20symbols",
+      );
+      expect(cellName).toBe("cell name with spaces & symbols");
+    });
+  });
+
+  describe("canLinkToCell", () => {
+    it("should return true for valid cell name", () => {
+      expect(canLinkToCell("myCellName")).toBe(true);
+    });
+
+    it("should return false for empty cell name", () => {
+      expect(canLinkToCell("")).toBe(false);
+    });
+
+    it("should return false for undefined cell name", () => {
+      expect(canLinkToCell(undefined)).toBe(false);
+    });
+
+    it("should return false for whitespace-only cell name", () => {
+      expect(canLinkToCell("   ")).toBe(false);
+    });
+
+    it("should return false for default cell name", () => {
+      expect(canLinkToCell("_")).toBe(false);
+    });
+  });
+});