@marimo-team/islands 0.15.5 → 0.16.1

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/RenderHTML.tsx

@@ -5,7 +5,7 @@ import parse, {
   Element,
   type HTMLReactParserOptions,
 } from "html-react-parser";
-import React, { type JSX, type ReactNode, useId } from "react";
+import React, { isValidElement, type JSX, type ReactNode, useId } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 
 type ReplacementFn = NonNullable<HTMLReactParserOptions["replace"]>;
@@ -23,6 +23,36 @@ const replaceValidTags = (domNode: DOMNode) => {
   }
 };
 
+const removeWrappingBodyTags: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+) => {
+  // Remove body tags and just render their children
+  if (domNode instanceof Element && domNode.name === "body") {
+    if (isValidElement(reactNode) && "props" in reactNode) {
+      const props = reactNode.props as { children?: ReactNode };
+      const children = props.children;
+      return <>{children}</>; // eslint-disable-line react/jsx-no-useless-fragment
+    }
+    return;
+  }
+};
+
+const removeWrappingHtmlTags: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+) => {
+  // Remove html tags and just render their children
+  if (domNode instanceof Element && domNode.name === "html") {
+    if (isValidElement(reactNode) && "props" in reactNode) {
+      const props = reactNode.props as { children?: ReactNode };
+      const children = props.children;
+      return <>{children}</>; // eslint-disable-line react/jsx-no-useless-fragment
+    }
+    return;
+  }
+};
+
 const replaceValidIframes = (domNode: DOMNode) => {
   // For iframe, we just want to use dangerouslySetInnerHTML so:
   // 1) we can remount the iframe when the src changes
@@ -110,7 +140,11 @@ export const renderHTML = ({ html, additionalReplacements = [] }: Options) => {
     ...additionalReplacements,
   ];
 
-  const transformFunctions: TransformFn[] = [addCopyButtonToCodehilite];
+  const transformFunctions: TransformFn[] = [
+    addCopyButtonToCodehilite,
+    removeWrappingBodyTags,
+    removeWrappingHtmlTags,
+  ];
 
   return parse(html, {
     replace: (domNode: DOMNode, index: number) => {

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -121,6 +121,78 @@ describe("RenderHTML", () => {
       </p>
     `);
   });
+
+  test("removes body tags but preserves children", () => {
+    const html = "<body><h1>Hello</h1><p>World</p></body>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1>
+          Hello
+        </h1>
+        <p>
+          World
+        </p>
+      </React.Fragment>
+    `);
+  });
+
+  test("removes nested body tags", () => {
+    const html = "<div><body><span>Content</span></body></div>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <div>
+        <React.Fragment>
+          <span>
+            Content
+          </span>
+        </React.Fragment>
+      </div>
+    `);
+  });
+
+  test("removes html tags but preserves children", () => {
+    const html =
+      "<html><head><title>Test</title></head><body><p>Content</p></body></html>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <head>
+          <title>
+            Test
+          </title>
+        </head>
+        <React.Fragment>
+          <p>
+            Content
+          </p>
+        </React.Fragment>
+      </React.Fragment>
+    `);
+  });
+
+  test("removes nested html tags", () => {
+    const html = "<div><html><span>Content</span></html></div>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <div>
+        <React.Fragment>
+          <span>
+            Content
+          </span>
+        </React.Fragment>
+      </div>
+    `);
+  });
+
+  test("remove nested body in html", () => {
+    const html = "<html><body><span>Content</span></body></html>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <React.Fragment>
+          <span>
+            Content
+          </span>
+        </React.Fragment>
+      </React.Fragment>
+    `);
+  });
 });
 
 describe("RenderHTML with < nad >", () => {

package/src/plugins/core/registerReactComponent.tsx

@@ -1,4 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
+
 /* eslint-disable unicorn/prefer-spread */
 /**
  * WebComponent Factory for React Components
@@ -7,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,
@@ -21,16 +23,22 @@ import React, {
 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 { 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,
   useEventListener,
 } from "@/hooks/useEventListener";
 import { StyleNamespace } from "@/theme/namespace";
 import { useTheme } from "@/theme/useTheme";
+import { CellNotInitializedError } from "@/utils/errors.ts";
 import { Functions } from "@/utils/functions";
 import { shallowCompare } from "@/utils/shallow-compare";
 import { defineCustomElement } from "../../core/dom/defineCustomElement";
@@ -78,6 +86,7 @@ interface PluginSlotProps<T> {
 }
 
 /* Handles synchronization of value on behalf of the component */
+
 // eslint-disable-next-line react/function-component-definition
 function PluginSlotInternal<T>(
   { hostElement, plugin, children, getInitialValue }: PluginSlotProps<T>,
@@ -172,6 +181,27 @@ 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 response = await FUNCTIONS_REGISTRY.request({
           args: prettyParse(input, args[0]),
           functionName: key,
@@ -335,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/FileBrowserPlugin.tsx

@@ -12,7 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
-import { Table, TableCell, TableRow } from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
@@ -158,6 +158,10 @@ export const FileBrowser = ({
     return null;
   }
 
+  if (!data && error) {
+    return <Banner kind="danger">{error.message}</Banner>;
+  }
+
   let { files } = data || {};
   if (files === undefined) {
     files = [];
@@ -458,7 +462,9 @@ export const FileBrowser = ({
         className="mt-3 overflow-y-auto w-full border"
         style={{ height: "14rem" }}
       >
-        <Table className="cursor-pointer table-fixed">{fileRows}</Table>
+        <Table className="cursor-pointer table-fixed">
+          <TableBody>{fileRows}</TableBody>
+        </Table>
       </div>
       <div className="mt-4">
         {value.length > 0 && (

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>

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,5 +1,6 @@
 /* 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";
@@ -85,6 +86,7 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -138,7 +140,7 @@ const SliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {prettyScientificNumber(valueMap(internalValue))}
+            {prettyScientificNumber(valueMap(internalValue), { locale })}
           </div>
         )}
         {includeInput && (

package/src/plugins/impl/anywidget/model.ts

@@ -17,8 +17,10 @@ export type EventHandler = (...args: any[]) => void;
 
 class ModelManager {
   private models = new Map<string, Deferred<Model<any>>>();
-
-  constructor(private timeout = 10_000) {}
+  private timeout: number;
+  constructor(timeout = 10_000) {
+    this.timeout = timeout;
+  }
 
   get(key: string): Promise<Model<any>> {
     let deferred = this.models.get(key);
@@ -64,16 +66,25 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
   private ANY_CHANGE_EVENT = "change";
   private dirtyFields;
   public static _modelManager: ModelManager = MODEL_MANAGER;
+  private data: T;
+  private onChange: (value: Partial<T>) => void;
+  private sendToWidget: (req: {
+    content?: any;
+    buffers?: ArrayBuffer[] | ArrayBufferView[];
+  }) => Promise<null | undefined>;
 
   constructor(
-    private data: T,
-    private onChange: (value: Partial<T>) => void,
-    private sendToWidget: (req: {
+    data: T,
+    onChange: (value: Partial<T>) => void,
+    sendToWidget: (req: {
       content?: any;
       buffers?: ArrayBuffer[] | ArrayBufferView[];
     }) => Promise<null | undefined>,
     initialDirtyFields: Set<keyof T>,
   ) {
+    this.data = data;
+    this.onChange = onChange;
+    this.sendToWidget = sendToWidget;
     this.dirtyFields = new Set(initialDirtyFields);
   }
 

package/src/plugins/impl/data-editor/types.ts

@@ -10,11 +10,13 @@ export interface PositionalEdit {
   value: unknown;
 }
 
-export enum BulkEdit {
-  Insert = "insert",
-  Remove = "remove",
-  Rename = "rename",
-}
+export const BulkEdit = {
+  Insert: "insert",
+  Remove: "remove",
+  Rename: "rename",
+} as const;
+
+type BulkEdit = (typeof BulkEdit)[keyof typeof BulkEdit];
 
 export interface RowEdit {
   rowIdx: number;

package/src/plugins/impl/data-explorer/components/column-summary.tsx

@@ -3,6 +3,7 @@
 import type { Schema } from "compassql/build/src/schema";
 import { BarChartBigIcon } from "lucide-react";
 import React, { useState } from "react";
+import { useDateFormatter, useNumberFormatter } from "react-aria";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -131,7 +132,9 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
           {STAT_KEYS.map((key) => (
             <div key={key} className="flex flex-row gap-2 min-w-[100px]">
               <span className="font-semibold">{key}</span>
-              <span>{formatStat(stats?.[key])}</span>
+              <span>
+                <FormatStat value={stats?.[key]} />
+              </span>
             </div>
           ))}
         </div>
@@ -151,24 +154,28 @@ const STAT_KEYS = [
   "stdev",
 ];
 
-function formatStat(value: unknown) {
+const FormatStat = ({ value }: { value: unknown }) => {
+  // Decimal .2
+  const numberFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+
+  // Just day, month, year
+  const dateFormatter = useDateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
   if (typeof value === "number") {
-    // Decimal .2
-    return new Intl.NumberFormat("en-US", {
-      maximumFractionDigits: 2,
-    }).format(value);
+    return numberFormatter.format(value);
   }
   if (typeof value === "string") {
     return value;
   }
   if (typeof value === "object" && value instanceof Date) {
-    // Just day, month, year
-    return new Intl.DateTimeFormat("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }).format(value);
+    return dateFormatter.format(value);
   }
 
   return String(value);
-}
+};

package/src/plugins/impl/panel/utils.ts

@@ -57,11 +57,13 @@ export class EventBuffer<T> {
   private buffer: T[] = [];
   private isBlocked = false;
   private timeout: number | null = null;
+  private processEvents: () => void;
+  private blockDuration: number;
 
-  constructor(
-    private processEvents: () => void,
-    private blockDuration = 200,
-  ) {}
+  constructor(processEvents: () => void, blockDuration = 200) {
+    this.processEvents = processEvents;
+    this.blockDuration = blockDuration;
+  }
 
   add(event: T) {
     this.buffer.push(event);