@marimo-team/frontend 0.16.0-dev96986 → 0.16.0

package/src/core/ai/context/providers/variable.ts

@@ -20,13 +20,11 @@ export class VariableContextProvider extends AIContextProvider<VariableContextIt
   readonly mentionPrefix = "@";
   readonly contextType = "variable";
 
-  private variables: Variables;
-  private tablesMap: DatasetTablesMap;
-
-  constructor(variables: Variables, tablesMap: DatasetTablesMap) {
+  constructor(
+    private variables: Variables,
+    private tablesMap: DatasetTablesMap,
+  ) {
     super();
-    this.variables = variables;
-    this.tablesMap = tablesMap;
   }
 
   getItems(): VariableContextItem[] {

package/src/core/cells/logs.ts

@@ -102,7 +102,7 @@ export function formatLogTimestamp(timestamp: number): string {
   try {
     // parse from UTC
     const date = fromUnixTime(timestamp);
-    return date.toLocaleTimeString(undefined, {
+    return date.toLocaleTimeString("en-US", {
       hour12: true,
       hour: "numeric",
       minute: "numeric",

package/src/core/codemirror/find-replace/search-highlight.ts

@@ -91,10 +91,8 @@ const HighlightMargin = 250;
 export const searchHighlighter = ViewPlugin.fromClass(
   class {
     decorations: DecorationSet;
-    readonly view: EditorView;
 
-    constructor(view: EditorView) {
-      this.view = view;
+    constructor(readonly view: EditorView) {
       this.decorations = this.highlight(view.state.field(searchState));
     }
 

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

@@ -1,26 +1,20 @@
 /* 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 createPythonAdapter();
+    return new PythonLanguageAdapter();
   },
   get markdown() {
-    return createMarkdownAdapter();
+    return new MarkdownLanguageAdapter();
   },
   get sql() {
-    return createSqlAdapter();
+    return new SQLLanguageAdapter();
   },
 };
 

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

@@ -18,19 +18,13 @@ import { getLSPDocument } from "./utils";
 
 class Snapshotter {
   private documentVersion = 0;
-  private readonly getNotebookCode: () => {
-    cellIds: CellId[];
-    codes: Record<CellId, string>;
-  };
 
   constructor(
-    getNotebookCode: () => {
+    private readonly 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: typeof WebSocketState.CONNECTING | typeof WebSocketState.OPEN,
+  state: WebSocketState.CONNECTING | WebSocketState.OPEN,
 ) {
   const store = createStore();
   store.set(connectionAtom, { state });

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

@@ -202,25 +202,13 @@ 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(
-    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;
-  }
+    private left: number,
+    private top: number,
+    private height: number,
+    private name: string,
+    private colorClassName: string,
+  ) {}
 
   draw(): HTMLElement {
     const elt = document.createElement("div");
@@ -365,30 +353,16 @@ 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(
-    view: EditorView,
-    doc: LoroDoc,
-    user: UserState,
-    awareness: Awareness<AwarenessState>,
-    getTextFromDoc: (doc: LoroDoc) => LoroText,
-    scopeId: ScopeId,
-    getUserId?: () => Uid,
+    public view: EditorView,
+    public doc: LoroDoc,
+    public user: UserState,
+    public awareness: Awareness<AwarenessState>,
+    private getTextFromDoc: (doc: LoroDoc) => LoroText,
+    private scopeId: ScopeId,
+    private 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
@@ -461,21 +435,12 @@ 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(
-    view: EditorView,
-    doc: LoroDoc,
-    awareness: Awareness<AwarenessState>,
-    scopeId: ScopeId,
+    public view: EditorView,
+    public doc: LoroDoc,
+    public awareness: Awareness<AwarenessState>,
+    private 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,21 +40,13 @@ 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(
-    view: EditorView,
-    doc: LoroDoc,
-    docPath: string[],
-    getTextFromDoc: (doc: LoroDoc) => LoroText,
+    private view: EditorView,
+    private doc: LoroDoc,
+    private docPath: string[],
+    private 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,7 +144,6 @@ 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,10 +82,6 @@ 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,13 +452,10 @@ export class HotkeyProvider implements IHotkeyProvider {
     return new HotkeyProvider(DEFAULT_HOT_KEY, { platform });
   }
 
-  private hotkeys: Record<HotkeyAction, Hotkey>;
-
   constructor(
-    hotkeys: Record<HotkeyAction, Hotkey>,
+    private hotkeys: Record<HotkeyAction, Hotkey>,
     options: HotkeyProviderOptions = {},
   ) {
-    this.hotkeys = hotkeys;
     this.platform = options.platform ?? resolvePlatform();
     this.mod = this.platform === "mac" ? "Cmd" : "Ctrl";
   }
@@ -506,14 +503,13 @@ export class HotkeyProvider implements IHotkeyProvider {
 }
 
 export class OverridingHotkeyProvider extends HotkeyProvider {
-  private readonly overrides: Partial<Record<HotkeyAction, string | undefined>>;
-
   constructor(
-    overrides: Partial<Record<HotkeyAction, string | undefined>>,
+    private readonly overrides: Partial<
+      Record<HotkeyAction, string | undefined>
+    >,
     options: HotkeyProviderOptions = {},
   ) {
     super(DEFAULT_HOT_KEY, options);
-    this.overrides = overrides;
   }
 
   override getHotkey(action: HotkeyAction): ResolvedHotkey {

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

@@ -7,7 +7,6 @@ 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";
@@ -81,18 +80,16 @@ export class MarimoIslandElement extends HTMLElement {
     this.root?.render(
       <ErrorBoundary>
         <Provider store={store}>
-          <LocaleProvider>
-            <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>
         </Provider>
       </ErrorBoundary>,
     );

package/src/core/kernel/RuntimeState.ts

@@ -29,11 +29,8 @@ export class RuntimeState {
    * ObjectIds of UIElements whose values need to be updated in the kernel
    */
   private _sendComponentValues: RunRequests["sendComponentValues"] | undefined;
-  private uiElementRegistry: UIElementRegistry;
 
-  constructor(uiElementRegistry: UIElementRegistry) {
-    this.uiElementRegistry = uiElementRegistry;
-  }
+  constructor(private 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 interface OperationMessage {
+export type OperationMessage = {
   data: MessageOperationUnion;
-}
+};
 
 export type OperationMessageData<T extends OperationMessageType> = Omit<
   Extract<MessageOperationUnion, { op: T }>,

package/src/core/network/DeferredRequestRegistry.ts

@@ -18,29 +18,17 @@ 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(
-    operation: string,
-    makeRequest: (id: RequestId, req: REQ) => Promise<void>,
-    opts: {
+    public operation: string,
+    private makeRequest: (id: RequestId, req: REQ) => Promise<void>,
+    private 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,12 +10,11 @@ import type { RuntimeConfig } from "./types";
 
 export class RuntimeManager {
   private initialHealthyCheck = new Deferred<void>();
-  private config: RuntimeConfig;
-  private lazy: boolean;
 
-  constructor(config: RuntimeConfig, lazy = false) {
-    this.config = config;
-    this.lazy = lazy;
+  constructor(
+    private config: RuntimeConfig,
+    private lazy = false,
+  ) {
     // Validate the URL on construction
     try {
       new URL(this.config.url);

package/src/core/wasm/bridge.ts

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

package/src/core/wasm/store.ts

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

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

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

package/src/core/websocket/types.ts

@@ -2,28 +2,22 @@
 
 import type ReconnectingWebSocket from "partysocket/ws";
 
-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 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 type ConnectionStatus =
   | {
-      state: typeof WebSocketState.CLOSED;
+      state: WebSocketState.CLOSED;
       code: WebSocketClosedReason;
       /**
        * Human-readable reason for closing the connection.
@@ -37,9 +31,9 @@ export type ConnectionStatus =
     }
   | {
       state:
-        | typeof WebSocketState.CONNECTING
-        | typeof WebSocketState.OPEN
-        | typeof WebSocketState.CLOSING;
+        | WebSocketState.CONNECTING
+        | WebSocketState.OPEN
+        | WebSocketState.CLOSING;
     };
 
 type PublicInterface<T> = {

package/src/hooks/useTimer.ts

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

package/src/plugins/core/registerReactComponent.tsx

@@ -8,7 +8,6 @@
  * 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,
@@ -30,7 +29,6 @@ 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,
@@ -365,20 +363,16 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
 
       invariant(this.root, "Root must be defined");
       this.root.render(
-        <Provider store={store}>
-          <LocaleProvider>
-            <PluginSlot
-              hostElement={this}
-              plugin={plugin}
-              ref={this.pluginRef}
-              getInitialValue={() => {
-                return parseInitialValue(this, UIElementRegistry.INSTANCE);
-              }}
-            >
-              {this.getChildren()}
-            </PluginSlot>
-          </LocaleProvider>
-        </Provider>,
+        <PluginSlot
+          hostElement={this}
+          plugin={plugin}
+          ref={this.pluginRef}
+          getInitialValue={() => {
+            return parseInitialValue(this, UIElementRegistry.INSTANCE);
+          }}
+        >
+          {this.getChildren()}
+        </PluginSlot>,
       );
     }
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -254,7 +254,6 @@ 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
@@ -386,7 +385,6 @@ interface DataTableProps<T> extends Data<T>, DataTableFunctions {
   // Filters
   enableFilters?: boolean;
   cellStyles?: CellStyleState | null;
-  hoverTemplate?: string | null;
   toggleDisplayHeader?: () => void;
   host: HTMLElement;
   cellId?: CellId | null;
@@ -709,7 +707,6 @@ const DataTableComponent = ({
   totalColumns,
   get_row_ids,
   cellStyles,
-  hoverTemplate,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -907,7 +904,6 @@ 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,7 +2,6 @@
 
 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";
@@ -83,7 +82,6 @@ const RangeSliderComponent = ({
   valueMap,
 }: RangeSliderProps): JSX.Element => {
   const id = useId();
-  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -152,9 +150,9 @@ const RangeSliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {`${prettyScientificNumber(valueMap(internalValue[0]), {
-              locale,
-            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
+            {`${prettyScientificNumber(
+              valueMap(internalValue[0]),
+            )}, ${prettyScientificNumber(valueMap(internalValue[1]))}`}
           </div>
         )}
       </div>

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { type JSX, useEffect, useId, useState } from "react";
-import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { cn } from "@/utils/cn";
@@ -86,7 +85,6 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
-  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -140,7 +138,7 @@ const SliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {prettyScientificNumber(valueMap(internalValue), { locale })}
+            {prettyScientificNumber(valueMap(internalValue))}
           </div>
         )}
         {includeInput && (