@marimo-team/frontend 0.15.4 → 0.16.0-dev96986

package/src/core/codemirror/language/LanguageAdapters.ts

@@ -1,20 +1,26 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { once } from "@/utils/once";
 import { MarkdownLanguageAdapter } from "./languages/markdown";
 import { PythonLanguageAdapter } from "./languages/python";
 import { SQLLanguageAdapter } from "./languages/sql/sql";
 import type { LanguageAdapter, LanguageAdapterType } from "./types";
 
+// Create cached instances
+const createPythonAdapter = once(() => new PythonLanguageAdapter());
+const createMarkdownAdapter = once(() => new MarkdownLanguageAdapter());
+const createSqlAdapter = once(() => new SQLLanguageAdapter());
+
 export const LanguageAdapters: Record<LanguageAdapterType, LanguageAdapter> = {
   // Getters to prevent circular dependencies
   get python() {
-    return new PythonLanguageAdapter();
+    return createPythonAdapter();
   },
   get markdown() {
-    return new MarkdownLanguageAdapter();
+    return createMarkdownAdapter();
   },
   get sql() {
-    return new SQLLanguageAdapter();
+    return createSqlAdapter();
   },
 };
 

package/src/core/codemirror/lsp/federated-lsp.ts

@@ -4,7 +4,7 @@ import type { LanguageServerPlugin } from "@marimo-team/codemirror-languageserve
 import type * as LSP from "vscode-languageserver-protocol";
 import { Objects } from "@/utils/objects";
 import type { ILanguageServerClient } from "./types";
-import { getLSPDocument } from "./utils.ts";
+import { getLSPDocument } from "./utils";
 
 function removeFalseyValues<T extends object>(obj: T): T {
   return Objects.filter(obj, (value) => value !== false && value !== null) as T;

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -18,13 +18,19 @@ import { getLSPDocument } from "./utils";
 
 class Snapshotter {
   private documentVersion = 0;
+  private readonly getNotebookCode: () => {
+    cellIds: CellId[];
+    codes: Record<CellId, string>;
+  };
 
   constructor(
-    private readonly getNotebookCode: () => {
+    getNotebookCode: () => {
       cellIds: CellId[];
       codes: Record<CellId, string>;
     },
-  ) {}
+  ) {
+    this.getNotebookCode = getNotebookCode;
+  }
 
   /**
    * Map from the global document version to the cell id and version.

package/src/core/codemirror/readonly/__tests__/extension.test.ts

@@ -9,7 +9,7 @@ import { connectionAtom } from "../../../network/connection";
 import { dynamicReadonly, isEditorReadonly } from "../extension";
 
 function makeStoreWithConnection(
-  state: WebSocketState.CONNECTING | WebSocketState.OPEN,
+  state: typeof WebSocketState.CONNECTING | typeof WebSocketState.OPEN,
 ) {
   const store = createStore();
   store.set(connectionAtom, { state });

package/src/core/codemirror/rtc/loro/awareness.ts

@@ -202,13 +202,25 @@ export const createSelectionLayer = (): Extension =>
  * Renders a blinking cursor to indicate the cursor of another user.
  */
 export class RemoteCursorMarker implements LayerMarker {
+  private left: number;
+  private top: number;
+  private height: number;
+  private name: string;
+  private colorClassName: string;
+
   constructor(
-    private left: number,
-    private top: number,
-    private height: number,
-    private name: string,
-    private colorClassName: string,
-  ) {}
+    left: number,
+    top: number,
+    height: number,
+    name: string,
+    colorClassName: string,
+  ) {
+    this.left = left;
+    this.top = top;
+    this.height = height;
+    this.name = name;
+    this.colorClassName = colorClassName;
+  }
 
   draw(): HTMLElement {
     const elt = document.createElement("div");
@@ -353,16 +365,30 @@ export interface CursorPosition {
 
 export class AwarenessPlugin implements PluginValue {
   sub: Subscription;
+  public view: EditorView;
+  public doc: LoroDoc;
+  public user: UserState;
+  public awareness: Awareness<AwarenessState>;
+  private getTextFromDoc: (doc: LoroDoc) => LoroText;
+  private scopeId: ScopeId;
+  private getUserId?: () => Uid;
 
   constructor(
-    public view: EditorView,
-    public doc: LoroDoc,
-    public user: UserState,
-    public awareness: Awareness<AwarenessState>,
-    private getTextFromDoc: (doc: LoroDoc) => LoroText,
-    private scopeId: ScopeId,
-    private getUserId?: () => Uid,
+    view: EditorView,
+    doc: LoroDoc,
+    user: UserState,
+    awareness: Awareness<AwarenessState>,
+    getTextFromDoc: (doc: LoroDoc) => LoroText,
+    scopeId: ScopeId,
+    getUserId?: () => Uid,
   ) {
+    this.view = view;
+    this.doc = doc;
+    this.user = user;
+    this.awareness = awareness;
+    this.getTextFromDoc = getTextFromDoc;
+    this.scopeId = scopeId;
+    this.getUserId = getUserId;
     this.sub = this.doc.subscribe((e) => {
       if (e.by === "local") {
         // update remote cursor position
@@ -435,12 +461,21 @@ export class AwarenessPlugin implements PluginValue {
 }
 export class RemoteAwarenessPlugin implements PluginValue {
   _awarenessListener?: AwarenessListener;
+  public view: EditorView;
+  public doc: LoroDoc;
+  public awareness: Awareness<AwarenessState>;
+  private scopeId: ScopeId;
+
   constructor(
-    public view: EditorView,
-    public doc: LoroDoc,
-    public awareness: Awareness<AwarenessState>,
-    private scopeId: ScopeId,
+    view: EditorView,
+    doc: LoroDoc,
+    awareness: Awareness<AwarenessState>,
+    scopeId: ScopeId,
   ) {
+    this.view = view;
+    this.doc = doc;
+    this.awareness = awareness;
+    this.scopeId = scopeId;
     const listener: AwarenessListener = async (arg, origin) => {
       if (origin === "local") {
         return;

package/src/core/codemirror/rtc/loro/sync.ts

@@ -40,13 +40,21 @@ export const loroSyncAnnotation = Annotation.define();
 export class LoroSyncPluginValue implements PluginValue {
   sub?: Subscription;
   private isInitDispatch = false;
+  private view: EditorView;
+  private doc: LoroDoc;
+  private docPath: string[];
+  private getTextFromDoc: (doc: LoroDoc) => LoroText;
 
   constructor(
-    private view: EditorView,
-    private doc: LoroDoc,
-    private docPath: string[],
-    private getTextFromDoc: (doc: LoroDoc) => LoroText,
+    view: EditorView,
+    doc: LoroDoc,
+    docPath: string[],
+    getTextFromDoc: (doc: LoroDoc) => LoroText,
   ) {
+    this.view = view;
+    this.doc = doc;
+    this.docPath = docPath;
+    this.getTextFromDoc = getTextFromDoc;
     this.sub = doc.subscribe(this.onRemoteUpdate);
     Promise.resolve().then(() => {
       this.isInitDispatch = true;

package/src/core/config/config-schema.ts

@@ -144,6 +144,7 @@ export const UserConfigSchema = z
             }
             return width;
           }),
+        locale: z.string().nullable().optional(),
         reference_highlighting: z.boolean().default(false),
       })
       .passthrough()

package/src/core/config/config.ts

@@ -82,6 +82,10 @@ export const editorFontSizeAtom = atom<number>((get) => {
   return get(resolvedMarimoConfigAtom).display.code_editor_font_size;
 });
 
+export const localeAtom = atom<string | null | undefined>((get) => {
+  return get(resolvedMarimoConfigAtom).display.locale;
+});
+
 export function isAiEnabled(config: UserConfig) {
   return (
     Boolean(config.ai?.models?.chat_model) ||

package/src/core/hotkeys/hotkeys.ts

@@ -452,10 +452,13 @@ export class HotkeyProvider implements IHotkeyProvider {
     return new HotkeyProvider(DEFAULT_HOT_KEY, { platform });
   }
 
+  private hotkeys: Record<HotkeyAction, Hotkey>;
+
   constructor(
-    private hotkeys: Record<HotkeyAction, Hotkey>,
+    hotkeys: Record<HotkeyAction, Hotkey>,
     options: HotkeyProviderOptions = {},
   ) {
+    this.hotkeys = hotkeys;
     this.platform = options.platform ?? resolvePlatform();
     this.mod = this.platform === "mac" ? "Cmd" : "Ctrl";
   }
@@ -503,13 +506,14 @@ export class HotkeyProvider implements IHotkeyProvider {
 }
 
 export class OverridingHotkeyProvider extends HotkeyProvider {
+  private readonly overrides: Partial<Record<HotkeyAction, string | undefined>>;
+
   constructor(
-    private readonly overrides: Partial<
-      Record<HotkeyAction, string | undefined>
-    >,
+    overrides: Partial<Record<HotkeyAction, string | undefined>>,
     options: HotkeyProviderOptions = {},
   ) {
     super(DEFAULT_HOT_KEY, options);
+    this.overrides = overrides;
   }
 
   override getHotkey(action: HotkeyAction): ResolvedHotkey {

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/islands/main.ts

@@ -103,7 +103,7 @@ export async function initialize() {
   // Consume messages from the kernel
   IslandsPyodideBridge.INSTANCE.consumeMessages((message) => {
     const msg = jsonParseWithSpecialChar(message);
-    switch (msg.op) {
+    switch (msg.data.op) {
       case "banner":
       case "missing-package-alert":
       case "installing-package-alert":
@@ -185,7 +185,7 @@ export async function initialize() {
       case "reconnected":
         return;
       default:
-        logNever(msg);
+        logNever(msg.data);
     }
   });
 

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

@@ -40,21 +40,17 @@ export type SQLTableListPreview =
   OperationMessageData<"sql-table-list-preview">;
 export type SecretKeysResult = OperationMessageData<"secret-keys-result">;
 export type StartupLogs = OperationMessageData<"startup-logs">;
-export type MessageOperation = schemas["KnownUnions"]["operation"];
+export type CellMessage = OperationMessageData<"cell-op">;
+export type Capabilities = OperationMessageData<"kernel-ready">["capabilities"];
 
-export type OperationMessageType = MessageOperation["op"];
-export type OperationMessage = {
-  [Type in OperationMessageType]: {
-    op: Type;
-    data: Omit<Extract<MessageOperation, { op: Type }>, "op">;
-  };
-}[OperationMessageType];
+export type MessageOperationUnion = schemas["KnownUnions"]["operation"];
 
-export type CellMessage = OperationMessageData<"cell-op">;
+export type OperationMessageType = MessageOperationUnion["op"];
+export interface OperationMessage {
+  data: MessageOperationUnion;
+}
 
 export type OperationMessageData<T extends OperationMessageType> = Omit<
-  Extract<MessageOperation, { op: T }>,
+  Extract<MessageOperationUnion, { op: T }>,
   "op"
 >;
-
-export type Capabilities = OperationMessageData<"kernel-ready">["capabilities"];

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

@@ -0,0 +1,37 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { EDGE_CASE_FILENAMES } from "../../../__tests__/mocks";
+import { Paths } from "../../../utils/paths";
+
+describe("filename handling logic", () => {
+  it.each(EDGE_CASE_FILENAMES)(
+    "should extract basename correctly for document title: %s",
+    (filename) => {
+      const basename = Paths.basename(filename);
+      expect(basename).toBe(filename); // Since no path separator
+    },
+  );
+
+  it("should handle full paths with unicode filenames", () => {
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const fullPath = `/path/to/${filename}`;
+
+      const basename = Paths.basename(fullPath);
+      expect(basename).toBe(filename);
+    });
+  });
+
+  it("should handle document title setting with unicode", () => {
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const originalTitle = document.title;
+
+      // In case this does any conversions, we want to simulate reading/writing the title
+      document.title = filename;
+      expect(document.title).toBe(filename);
+
+      // Restore
+      document.title = originalTitle;
+    });
+  });
+});