@marimo-team/frontend 0.16.0 → 0.16.2

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/bridge.ts

@@ -153,6 +153,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   previewSQLTable = throwNotImplemented;
   previewSQLTableList = throwNotImplemented;
   previewDataSourceConnection = throwNotImplemented;
+  validateSQL = throwNotImplemented;
   openFile = throwNotImplemented;
   sendListFiles = throwNotImplemented;
   sendSearchFiles = throwNotImplemented;

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

@@ -119,6 +119,7 @@ export async function initialize() {
       case "sql-table-list-preview":
       case "datasets":
       case "data-source-connections":
+      case "validate-sql-result":
       case "secret-keys-result":
       case "startup-logs":
         // Unsupported

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

@@ -38,6 +38,7 @@ export type DataColumnPreview = OperationMessageData<"data-column-preview">;
 export type SQLTablePreview = OperationMessageData<"sql-table-preview">;
 export type SQLTableListPreview =
   OperationMessageData<"sql-table-list-preview">;
+export type ValidateSQLResult = OperationMessageData<"validate-sql-result">;
 export type SecretKeysResult = OperationMessageData<"secret-keys-result">;
 export type StartupLogs = OperationMessageData<"startup-logs">;
 export type CellMessage = OperationMessageData<"cell-op">;
@@ -46,9 +47,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/network/requests-network.ts

@@ -207,6 +207,13 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
+    validateSQL: (request) => {
+      return getClient()
+        .POST("/api/sql/validate", {
+          body: request,
+        })
+        .then(handleResponseReturnNull);
+    },
     openFile: async (request) => {
       await waitForConnectionOpen();
       await getClient()

package/src/core/network/requests-static.ts

@@ -57,6 +57,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     previewSQLTable: throwNotInEditMode,
     previewSQLTableList: throwNotInEditMode,
     previewDataSourceConnection: throwNotInEditMode,
+    validateSQL: throwNotInEditMode,
     openFile: throwNotInEditMode,
     getUsageStats: throwNotInEditMode,
     sendListFiles: throwNotInEditMode,

package/src/core/network/requests-toasting.ts

@@ -35,6 +35,7 @@ export function createErrorToastingRequests(
     previewSQLTable: "Failed to fetch SQL table",
     previewSQLTableList: "Failed to fetch SQL table list",
     previewDataSourceConnection: "Failed to preview data source connection",
+    validateSQL: "Failed to validate SQL",
     openFile: "Failed to open file",
     getUsageStats: "", // No toast
     sendListFiles: "Failed to list files",

package/src/core/network/types.ts

@@ -62,6 +62,7 @@ export type PreviewSQLTableRequest = schemas["PreviewSQLTableRequest"];
 export type PreviewSQLTableListRequest = schemas["PreviewSQLTableListRequest"];
 export type PreviewDataSourceConnectionRequest =
   schemas["PreviewDataSourceConnectionRequest"];
+export type ValidateSQLRequest = schemas["ValidateSQLRequest"];
 export type PdbRequest = schemas["PdbRequest"];
 export type ReadCodeResponse = schemas["ReadCodeResponse"];
 export type RecentFilesResponse = schemas["RecentFilesResponse"];
@@ -140,6 +141,7 @@ export interface EditRequests {
   previewDataSourceConnection: (
     request: PreviewDataSourceConnectionRequest,
   ) => Promise<null>;
+  validateSQL: (request: ValidateSQLRequest) => Promise<null>;
   openFile: (request: { path: string }) => Promise<null>;
   getUsageStats: () => Promise<UsageResponse>;
   // Debugger

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

@@ -496,6 +496,11 @@ export class PyodideBridge implements RunRequests, EditRequests {
       return null;
     };
 
+  validateSQL: EditRequests["validateSQL"] = async (request) => {
+    await this.putControlRequest(request);
+    return null;
+  };
+
   sendModelValue: RunRequests["sendModelValue"] = async (request) => {
     await this.putControlRequest(request);
     return null;
@@ -576,7 +581,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/core/websocket/useMarimoWebSocket.tsx

@@ -32,6 +32,7 @@ import type { ConnectionName } from "../datasets/engines";
 import {
   PreviewSQLTable,
   PreviewSQLTableList,
+  ValidateSQL,
 } from "../datasets/request-registry";
 import { useDatasetsActions } from "../datasets/state";
 import { UI_ELEMENT_REGISTRY } from "../dom/uiregistry";
@@ -238,6 +239,9 @@ export function useMarimoWebSocket(opts: {
       case "sql-table-list-preview":
         PreviewSQLTableList.resolve(msg.data.request_id as RequestId, msg.data);
         return;
+      case "validate-sql-result":
+        ValidateSQL.resolve(msg.data.request_id as RequestId, msg.data);
+        return;
       case "secret-keys-result":
         SECRETS_REGISTRY.resolve(msg.data.request_id as RequestId, msg.data);
         return;

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,
@@ -23,12 +24,13 @@ import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import type { ZodSchema } from "zod";
 import { notebookAtom } from "@/core/cells/cells.ts";
-import { findCellId } from "@/core/cells/ids.ts";
+import { HTMLCellId } from "@/core/cells/ids.ts";
 import { isUninstantiated } from "@/core/cells/utils";
 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,
@@ -180,24 +182,28 @@ function PluginSlotInternal<T>(
         const objectId = getUIElementObjectId(hostElement);
         invariant(objectId, "Object ID should exist");
 
-        const cellId = findCellId(hostElement);
-        invariant(cellId, "Cell ID should exist");
-
-        const notebookState = store.get(notebookAtom);
-        const cellRuntime = notebookState.cellRuntime[cellId];
-        const cellData = notebookState.cellData[cellId];
-
-        const cellNotInitialized = isUninstantiated({
-          executionTime:
-            cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
-          status: cellRuntime.status,
-          errored: cellRuntime.errored,
-          interrupted: cellRuntime.interrupted,
-          stopped: cellRuntime.stopped,
-        });
-
-        if (cellNotInitialized) {
-          throw new CellNotInitializedError();
+        const htmlId = HTMLCellId.findElementThroughShadowDOMs(hostElement)?.id;
+        const cellId = htmlId ? HTMLCellId.parse(htmlId) : null;
+        if (cellId) {
+          // If the cell is not initialized, throw an error
+          const notebookState = store.get(notebookAtom);
+          const cellRuntime = notebookState.cellRuntime[cellId];
+          const cellData = notebookState.cellData[cellId];
+
+          const cellNotInitialized = isUninstantiated({
+            executionTime:
+              cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
+            status: cellRuntime.status,
+            errored: cellRuntime.errored,
+            interrupted: cellRuntime.interrupted,
+            stopped: cellRuntime.stopped,
+          });
+
+          if (cellNotInitialized) {
+            throw new CellNotInitializedError();
+          }
+        } else {
+          Logger.warn(`Cell ID ${cellId} cannot be found`);
         }
 
         const response = await FUNCTIONS_REGISTRY.request({
@@ -363,16 +369,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>,
       );
     }