@marimo-team/frontend 0.16.0 → 0.16.1

package/src/core/i18n/__tests__/locale-provider.test.tsx

@@ -0,0 +1,176 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { cleanup, render } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { userConfigAtom } from "@/core/config/config";
+import { parseUserConfig } from "@/core/config/config-schema";
+import { LocaleProvider } from "../locale-provider";
+
+// Mock navigator.language with a getter
+let mockNavigatorLanguage: string | undefined;
+
+Object.defineProperty(window, "navigator", {
+  value: {
+    get language() {
+      return mockNavigatorLanguage;
+    },
+  },
+  writable: true,
+});
+
+// Mock react-aria-components I18nProvider
+vi.mock("react-aria-components", () => ({
+  I18nProvider: ({
+    children,
+    locale,
+  }: {
+    children: React.ReactNode;
+    locale: string;
+  }) => (
+    <div data-testid="i18n-provider" data-locale={locale}>
+      {children}
+    </div>
+  ),
+}));
+
+describe("LocaleProvider", () => {
+  beforeEach(() => {
+    // Reset the mock before each test
+    mockNavigatorLanguage = undefined;
+  });
+
+  afterEach(() => {
+    cleanup();
+    // Clear all mocks after each test
+    mockNavigatorLanguage = undefined;
+    vi.clearAllMocks();
+  });
+
+  it("should render I18nProvider without locale when locale is null", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: null } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(undefined);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider without locale when locale is undefined", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: undefined } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(undefined);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider with locale when locale is provided", () => {
+    const store = createStore();
+    const testLocale = "es-ES";
+    const config = parseUserConfig({ display: { locale: testLocale } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(testLocale);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider with different locale values", () => {
+    const testCases = ["en-US", "fr-FR", "de-DE", "ja-JP"];
+
+    testCases.forEach((locale) => {
+      const store = createStore();
+      const config = parseUserConfig({ display: { locale } });
+      store.set(userConfigAtom, config);
+
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <LocaleProvider>
+            <div>Test content for {locale}</div>
+          </LocaleProvider>
+        </Provider>,
+      );
+
+      const i18nProvider = getByTestId("i18n-provider");
+      expect(i18nProvider.dataset.locale).toBe(locale);
+      expect(i18nProvider).toHaveTextContent(`Test content for ${locale}`);
+
+      // Clean up after each iteration
+      cleanup();
+    });
+  });
+
+  it("should render children correctly", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: "en-US" } });
+    store.set(userConfigAtom, config);
+
+    const { getByText, getByRole } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>
+            <h1>Test Heading</h1>
+            <p>Test paragraph</p>
+            <button type="button">Test Button</button>
+          </div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    expect(getByText("Test Heading")).toBeInTheDocument();
+    expect(getByText("Test paragraph")).toBeInTheDocument();
+    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
+  });
+
+  it("should auto-detect locale when no locale is set in config", () => {
+    mockNavigatorLanguage = "de-DE";
+
+    const store = createStore();
+    const config = parseUserConfig({});
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    // When no locale is specified in config, it should use navigator.language
+    expect(i18nProvider.dataset.locale).toBe("de-DE");
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+});

package/src/core/i18n/locale-provider.tsx

@@ -0,0 +1,35 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import type { ReactNode } from "react";
+import { I18nProvider } from "react-aria-components";
+import { localeAtom } from "@/core/config/config";
+
+interface LocaleProviderProps {
+  children: ReactNode;
+}
+
+export const LocaleProvider = ({ children }: LocaleProviderProps) => {
+  const locale = useAtomValue(localeAtom);
+
+  return <I18nProvider locale={safeLocale(locale)}>{children}</I18nProvider>;
+};
+
+function safeLocale(locale: string | null | undefined) {
+  if (!locale) {
+    return navigator.language;
+  }
+  if (isValidLocale(locale)) {
+    return locale;
+  }
+  return navigator.language;
+}
+
+function isValidLocale(locale: string) {
+  try {
+    new Intl.NumberFormat(locale);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/core/i18n/with-locale.tsx

@@ -0,0 +1,12 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useLocale } from "react-aria";
+
+export const WithLocale = ({
+  children,
+}: {
+  children: (locale: string) => React.ReactNode;
+}) => {
+  const { locale } = useLocale();
+  return children(locale);
+};

package/src/core/islands/components/web-components.tsx

@@ -7,6 +7,7 @@ import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
 import { UI_ELEMENT_REGISTRY } from "@/core/dom/uiregistry";
+import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { invariant } from "@/utils/invariant";
 import type { CellId } from "../../cells/ids";
@@ -80,16 +81,18 @@ export class MarimoIslandElement extends HTMLElement {
     this.root?.render(
       <ErrorBoundary>
         <Provider store={store}>
-          <TooltipProvider>
-            <MarimoOutputWrapper
-              cellId={this.cellId}
-              codeCallback={codeCallback}
-              alwaysShowRun={alwaysShowRun}
-            >
-              {initialHtml}
-            </MarimoOutputWrapper>
-            {editor}
-          </TooltipProvider>
+          <LocaleProvider>
+            <TooltipProvider>
+              <MarimoOutputWrapper
+                cellId={this.cellId}
+                codeCallback={codeCallback}
+                alwaysShowRun={alwaysShowRun}
+              >
+                {initialHtml}
+              </MarimoOutputWrapper>
+              {editor}
+            </TooltipProvider>
+          </LocaleProvider>
         </Provider>
       </ErrorBoundary>,
     );

package/src/core/kernel/RuntimeState.ts

@@ -29,8 +29,11 @@ export class RuntimeState {
    * ObjectIds of UIElements whose values need to be updated in the kernel
    */
   private _sendComponentValues: RunRequests["sendComponentValues"] | undefined;
+  private uiElementRegistry: UIElementRegistry;
 
-  constructor(private uiElementRegistry: UIElementRegistry) {}
+  constructor(uiElementRegistry: UIElementRegistry) {
+    this.uiElementRegistry = uiElementRegistry;
+  }
 
   private get sendComponentValues(): RunRequests["sendComponentValues"] {
     if (!this._sendComponentValues) {

package/src/core/kernel/messages.ts

@@ -46,9 +46,9 @@ export type Capabilities = OperationMessageData<"kernel-ready">["capabilities"];
 export type MessageOperationUnion = schemas["KnownUnions"]["operation"];
 
 export type OperationMessageType = MessageOperationUnion["op"];
-export type OperationMessage = {
+export interface OperationMessage {
   data: MessageOperationUnion;
-};
+}
 
 export type OperationMessageData<T extends OperationMessageType> = Omit<
   Extract<MessageOperationUnion, { op: T }>,

package/src/core/network/DeferredRequestRegistry.ts

@@ -18,17 +18,29 @@ export const RequestId = {
  */
 export class DeferredRequestRegistry<REQ, RES> {
   public requests = new Map<RequestId, Deferred<RES>>();
+  public operation: string;
+  private makeRequest: (id: RequestId, req: REQ) => Promise<void>;
+  private opts: {
+    /**
+     * Resolve existing requests with an empty response.
+     */
+    resolveExistingRequests?: () => RES;
+  };
 
   constructor(
-    public operation: string,
-    private makeRequest: (id: RequestId, req: REQ) => Promise<void>,
-    private opts: {
+    operation: string,
+    makeRequest: (id: RequestId, req: REQ) => Promise<void>,
+    opts: {
       /**
        * Resolve existing requests with an empty response.
        */
       resolveExistingRequests?: () => RES;
     } = {},
-  ) {}
+  ) {
+    this.operation = operation;
+    this.makeRequest = makeRequest;
+    this.opts = opts;
+  }
 
   async request(opts: REQ): Promise<RES> {
     if (this.opts.resolveExistingRequests) {

package/src/core/runtime/runtime.ts

@@ -10,11 +10,12 @@ import type { RuntimeConfig } from "./types";
 
 export class RuntimeManager {
   private initialHealthyCheck = new Deferred<void>();
+  private config: RuntimeConfig;
+  private lazy: boolean;
 
-  constructor(
-    private config: RuntimeConfig,
-    private lazy = false,
-  ) {
+  constructor(config: RuntimeConfig, lazy = false) {
+    this.config = config;
+    this.lazy = lazy;
     // Validate the URL on construction
     try {
       new URL(this.config.url);

package/src/core/wasm/bridge.ts

@@ -576,7 +576,11 @@ export class PyodideWebsocket implements IReconnectingWebSocket {
   messageSubscriptions = new Set<(event: MessageEvent) => void>();
   errorSubscriptions = new Set<(event: Event) => void>();
 
-  constructor(private bridge: Pick<PyodideBridge, "consumeMessages">) {}
+  private bridge: Pick<PyodideBridge, "consumeMessages">;
+
+  constructor(bridge: Pick<PyodideBridge, "consumeMessages">) {
+    this.bridge = bridge;
+  }
 
   private consumeMessages() {
     this.bridge.consumeMessages((message) => {

package/src/core/wasm/store.ts

@@ -87,7 +87,10 @@ const emptyFileStore: FileStore = {
 };
 
 export class CompositeFileStore implements FileStore {
-  constructor(private stores: FileStore[]) {}
+  private stores: FileStore[];
+  constructor(stores: FileStore[]) {
+    this.stores = stores;
+  }
 
   insert(index: number, store: FileStore) {
     this.stores.splice(index, 0, store);

package/src/core/wasm/worker/message-buffer.ts

@@ -7,8 +7,9 @@
 export class MessageBuffer<T> {
   private buffer: T[];
   private started = false;
-
-  constructor(private onMessage: (data: T) => void) {
+  private onMessage: (data: T) => void;
+  constructor(onMessage: (data: T) => void) {
+    this.onMessage = onMessage;
     this.buffer = [];
   }
 

package/src/core/websocket/types.ts

@@ -2,22 +2,28 @@
 
 import type ReconnectingWebSocket from "partysocket/ws";
 
-export enum WebSocketState {
-  CONNECTING = "CONNECTING",
-  OPEN = "CONNECTED",
-  CLOSING = "CLOSING",
-  CLOSED = "CLOSED",
-}
-
-export enum WebSocketClosedReason {
-  KERNEL_DISCONNECTED = "KERNEL_DISCONNECTED",
-  ALREADY_RUNNING = "ALREADY_RUNNING",
-  MALFORMED_QUERY = "MALFORMED_QUERY",
-}
+export const WebSocketState = {
+  CONNECTING: "CONNECTING",
+  OPEN: "OPEN",
+  CLOSING: "CLOSING",
+  CLOSED: "CLOSED",
+} as const;
+
+export type WebSocketState =
+  (typeof WebSocketState)[keyof typeof WebSocketState];
+
+export const WebSocketClosedReason = {
+  KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
+  ALREADY_RUNNING: "ALREADY_RUNNING",
+  MALFORMED_QUERY: "MALFORMED_QUERY",
+} as const;
+
+export type WebSocketClosedReason =
+  (typeof WebSocketClosedReason)[keyof typeof WebSocketClosedReason];
 
 export type ConnectionStatus =
   | {
-      state: WebSocketState.CLOSED;
+      state: typeof WebSocketState.CLOSED;
       code: WebSocketClosedReason;
       /**
        * Human-readable reason for closing the connection.
@@ -31,9 +37,9 @@ export type ConnectionStatus =
     }
   | {
       state:
-        | WebSocketState.CONNECTING
-        | WebSocketState.OPEN
-        | WebSocketState.CLOSING;
+        | typeof WebSocketState.CONNECTING
+        | typeof WebSocketState.OPEN
+        | typeof WebSocketState.CLOSING;
     };
 
 type PublicInterface<T> = {

package/src/hooks/useFormatting.ts

@@ -0,0 +1,97 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useCallback } from "react";
+import { useLocale } from "react-aria";
+import { getShortTimeZone, prettyDate, timeAgo } from "@/utils/dates";
+import {
+  prettyEngineeringNumber,
+  prettyNumber,
+  prettyScientificNumber,
+} from "@/utils/numbers";
+
+/**
+ * Hook that provides locale-aware number formatting using the prettyNumber utility
+ */
+export function usePrettyNumber() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: unknown): string => {
+      return prettyNumber(value, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware scientific number formatting
+ */
+export function usePrettyScientificNumber() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: number, opts: { shouldRound?: boolean } = {}): string => {
+      return prettyScientificNumber(value, { ...opts, locale });
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware engineering number formatting
+ */
+export function usePrettyEngineeringNumber() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: number): string => {
+      return prettyEngineeringNumber(value, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware date formatting
+ */
+export function usePrettyDate() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (
+      value: string | number | null | undefined,
+      type: "date" | "datetime",
+    ): string => {
+      return prettyDate(value, type, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware relative time formatting
+ */
+export function useTimeAgo() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: string | number | null | undefined): string => {
+      return timeAgo(value, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware timezone abbreviation
+ */
+export function useShortTimeZone() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (timezone: string): string => {
+      return getShortTimeZone(timezone, locale);
+    },
+    [locale],
+  );
+}

package/src/hooks/useTimer.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useEffect, useRef, useState } from "react";
+import { useNumberFormatter } from "react-aria";
 import useEvent from "react-use-event-hook";
 
 /**
@@ -11,6 +12,12 @@ export function useTimer() {
   const [time, setTime] = useState(0);
   const interval = useRef<number>(undefined);
 
+  // one decimal place, exactly
+  const numberFormatter = useNumberFormatter({
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
   const start = useEvent(() => {
     interval.current = window.setInterval(() => {
       setTime((time) => time + 0.1);
@@ -36,11 +43,7 @@ export function useTimer() {
   }, []);
 
   return {
-    // one decimal place, exactly
-    time: new Intl.NumberFormat("en-US", {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 1,
-    }).format(time),
+    time: numberFormatter.format(time),
     start,
     stop,
     clear,

package/src/plugins/core/registerReactComponent.tsx

@@ -8,6 +8,7 @@
  * component. The factory handles the logic of communicating UI element values
  * to and from the rest of marimo.
  */
+import { Provider } from "jotai";
 import React, {
   createRef,
   type JSX,
@@ -29,6 +30,7 @@ import { createInputEvent, MarimoValueUpdateEvent } from "@/core/dom/events";
 import { getUIElementObjectId } from "@/core/dom/ui-element";
 import { UIElementRegistry } from "@/core/dom/uiregistry";
 import { FUNCTIONS_REGISTRY } from "@/core/functions/FunctionRegistry";
+import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { store } from "@/core/state/jotai";
 import {
   type HTMLElementNotDerivedFromRef,
@@ -363,16 +365,20 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
 
       invariant(this.root, "Root must be defined");
       this.root.render(
-        <PluginSlot
-          hostElement={this}
-          plugin={plugin}
-          ref={this.pluginRef}
-          getInitialValue={() => {
-            return parseInitialValue(this, UIElementRegistry.INSTANCE);
-          }}
-        >
-          {this.getChildren()}
-        </PluginSlot>,
+        <Provider store={store}>
+          <LocaleProvider>
+            <PluginSlot
+              hostElement={this}
+              plugin={plugin}
+              ref={this.pluginRef}
+              getInitialValue={() => {
+                return parseInitialValue(this, UIElementRegistry.INSTANCE);
+              }}
+            >
+              {this.getChildren()}
+            </PluginSlot>
+          </LocaleProvider>
+        </Provider>,
       );
     }
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -254,6 +254,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       cellStyles: z.record(z.record(z.object({}).passthrough())).optional(),
+      hoverTemplate: z.string().optional(),
       // Whether to load the data lazily.
       lazy: z.boolean().default(false),
       // If lazy, this will preload the first page of data
@@ -385,6 +386,7 @@ interface DataTableProps<T> extends Data<T>, DataTableFunctions {
   // Filters
   enableFilters?: boolean;
   cellStyles?: CellStyleState | null;
+  hoverTemplate?: string | null;
   toggleDisplayHeader?: () => void;
   host: HTMLElement;
   cellId?: CellId | null;
@@ -707,6 +709,7 @@ const DataTableComponent = ({
   totalColumns,
   get_row_ids,
   cellStyles,
+  hoverTemplate,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -904,6 +907,7 @@ const DataTableComponent = ({
             rowSelection={rowSelection}
             cellSelection={cellSelection}
             cellStyling={cellStyles}
+            hoverTemplate={hoverTemplate}
             downloadAs={showDownload ? downloadAs : undefined}
             enableSearch={enableSearch}
             searchQuery={searchQuery}

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -2,6 +2,7 @@
 
 import { isEqual } from "lodash-es";
 import { type JSX, useEffect, useId, useState } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
@@ -82,6 +83,7 @@ const RangeSliderComponent = ({
   valueMap,
 }: RangeSliderProps): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -150,9 +152,9 @@ const RangeSliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {`${prettyScientificNumber(
-              valueMap(internalValue[0]),
-            )}, ${prettyScientificNumber(valueMap(internalValue[1]))}`}
+            {`${prettyScientificNumber(valueMap(internalValue[0]), {
+              locale,
+            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
           </div>
         )}
       </div>