@marimo-team/islands 0.25.1-dev4 → 0.25.1-dev40

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

@@ -45,21 +45,22 @@ function toArray<T>(value: T | T[] | undefined): T[] {
 
 export function getVegaFieldTypes(
   types: Record<string, DataType> | undefined | null,
+  { parseDates = false }: { parseDates?: boolean } = {},
 ): FieldTypes | "auto" {
   if (!types || Object.keys(types).length === 0) {
     // If fieldTypes is provided, use it to parse the data
     // Otherwise, infer the data types
     return "auto";
   }
-  // Convert all 'date' to 'string', because dates don't format back to
-  // the correct formatting. For example, a date like '2024-01-01' will
-  // be formatted to '2024-01-01T00:00:00.000Z'.
+  // Preserve date-only strings for callers such as the data editor.
+  // Parsing creates Date objects that JSON serializes as full timestamps.
+  // Charts opt into date parsing for temporal axes.
   return Objects.mapValues(types, (type): VegaDataType => {
     if (type === "geometry") {
       return "string";
     }
     if (type === "date") {
-      return "string";
+      return parseDates ? "date" : "string";
     }
     if (type === "time") {
       return "string";

package/src/plugins/layout/AccordionPlugin.tsx

@@ -27,15 +27,15 @@ interface Data {
 }
 
 export class AccordionPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-accordion";
+  public tagName = "marimo-accordion";
 
-  validator = z.object({
+  public validator = z.object({
     labels: z.array(z.string()),
     multiple: z.boolean(),
     expanded: z.array(z.string()).default([]),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): JSX.Element {
     return (
       <AccordionComponent {...props.data}>{props.children}</AccordionComponent>
     );

package/src/plugins/layout/CalloutPlugin.tsx

@@ -25,15 +25,15 @@ interface Data {
 }
 
 export class CalloutPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-callout-output";
+  public tagName = "marimo-callout-output";
 
-  validator = z.object({
+  public validator = z.object({
     html: z.string(),
     kind: zodIntent,
     title: z.string().optional(),
   });
 
-  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
+  public render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     return (
       <CalloutOutput html={data.html} kind={data.kind} title={data.title} />
     );

package/src/plugins/layout/ImageComparisonPlugin.tsx

@@ -12,9 +12,9 @@ const LazyImageComparisonComponent = React.lazy(
 );
 
 export class ImageComparisonPlugin implements IStatelessPlugin<ImageComparisonData> {
-  tagName = "marimo-image-comparison";
+  public tagName = "marimo-image-comparison";
 
-  validator = z.object({
+  public validator = z.object({
     beforeSrc: z.string(),
     afterSrc: z.string(),
     value: z.number().min(0).max(100).default(50),
@@ -23,7 +23,9 @@ export class ImageComparisonPlugin implements IStatelessPlugin<ImageComparisonDa
     height: z.string().optional(),
   });
 
-  render(props: IStatelessPluginProps<ImageComparisonData>): JSX.Element {
+  public render(
+    props: IStatelessPluginProps<ImageComparisonData>,
+  ): JSX.Element {
     return (
       <React.Suspense fallback={<div>Loading image comparison...</div>}>
         <LazyImageComparisonComponent {...props.data} />

package/src/plugins/layout/JsonOutputPlugin.tsx

@@ -21,15 +21,15 @@ interface Data {
 }
 
 export class JsonOutputPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-json-output";
+  public tagName = "marimo-json-output";
 
-  validator = z.object({
+  public validator = z.object({
     name: z.string().nullish(),
     jsonData: z.unknown(),
     valueTypes: z.enum(["json", "python"]).default("python"),
   });
 
-  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
+  public render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     // `false` defaults to no text label
     const name = data.name === undefined ? false : data.name || "";
     return (

package/src/plugins/layout/MimeRenderPlugin.tsx

@@ -15,9 +15,9 @@ interface Data {
 }
 
 export class MimeRendererPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-mime-renderer";
+  public tagName = "marimo-mime-renderer";
 
-  validator = z.object({
+  public validator = z.object({
     mime: z.string().transform((val) => val as OutputMessage["mimetype"]),
     data: z
       .union([
@@ -29,7 +29,7 @@ export class MimeRendererPlugin implements IStatelessPlugin<Data> {
       .transform((val) => val as OutputMessage["data"]),
   });
 
-  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
+  public render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     if (!data.data) {
       return <div />;
     }

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -195,7 +195,7 @@ const NavigationMenuViewportPortal = ({
 };
 
 export class NavigationMenuPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-nav-menu";
+  public tagName = "marimo-nav-menu";
 
   private menuItemValidator = z.object({
     label: z.string(),
@@ -208,14 +208,14 @@ export class NavigationMenuPlugin implements IStatelessPlugin<Data> {
     items: z.array(this.menuItemValidator),
   });
 
-  validator = z.object({
+  public validator = z.object({
     items: z.array(
       z.union([this.menuItemValidator, this.menuItemGroupValidator]),
     ),
     orientation: z.enum(["horizontal", "vertical"]),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): JSX.Element {
     return <NavMenuComponent {...props.data} />;
   }
 }

package/src/plugins/layout/OutlinePlugin.tsx

@@ -51,13 +51,13 @@ const OutlineContent: React.FC<{ label?: string }> = ({ label }) => {
 };
 
 export class OutlinePlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-outline";
+  public tagName = "marimo-outline";
 
-  validator = z.object({
+  public validator = z.object({
     label: z.string().optional(),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): JSX.Element {
     const { label } = props.data;
 
     return (

package/src/plugins/layout/ProgressPlugin.tsx

@@ -41,9 +41,9 @@ interface Data {
 }
 
 export class ProgressPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-progress";
+  public tagName = "marimo-progress";
 
-  validator = z.object({
+  public validator = z.object({
     title: z.string().optional(),
     subtitle: z.string().optional(),
     progress: z.union([z.number(), z.boolean()]),
@@ -52,7 +52,7 @@ export class ProgressPlugin implements IStatelessPlugin<Data> {
     rate: z.number().optional(),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): JSX.Element {
     return <ProgressComponent {...props.data} />;
   }
 }

package/src/plugins/layout/RoutesPlugin.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, {
-  type JSX,
   type PropsWithChildren,
   useEffect,
   useMemo,
@@ -22,13 +21,13 @@ interface Data {
 }
 
 export class RoutesPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-routes";
+  public tagName = "marimo-routes";
 
-  validator = z.object({
+  public validator = z.object({
     routes: z.array(z.string()),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): React.ReactElement {
     return <RoutesComponent {...props.data}>{props.children}</RoutesComponent>;
   }
 }
@@ -36,7 +35,7 @@ export class RoutesPlugin implements IStatelessPlugin<Data> {
 const RoutesComponent = ({
   routes,
   children,
-}: PropsWithChildren<Data>): JSX.Element => {
+}: PropsWithChildren<Data>): React.ReactNode => {
   const childCount = React.Children.count(children);
   if (childCount !== routes.length) {
     throw new Error(
@@ -69,12 +68,11 @@ const RoutesComponent = ({
   }, [handleFindMatch]);
 
   if (!matched) {
-    // oxlint-disable-next-line react/jsx-no-useless-fragment
-    return <></>;
+    return null;
   }
 
   const matchedIndex = routes.indexOf(matched);
   const child = React.Children.toArray(children)[matchedIndex];
 
-  return <>{child}</>;
+  return child;
 };

package/src/plugins/layout/StatPlugin.tsx

@@ -25,9 +25,9 @@ interface Data {
 }
 
 export class StatPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-stat";
+  public tagName = "marimo-stat";
 
-  validator = z.object({
+  public validator = z.object({
     value: z.union([z.string(), z.number(), z.boolean()]).optional(),
     label: z.string().optional(),
     caption: z.string().optional(),
@@ -37,7 +37,7 @@ export class StatPlugin implements IStatelessPlugin<Data> {
     slot: z.any().optional(),
   });
 
-  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
+  public render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     return <StatComponent {...data} />;
   }
 }

package/src/plugins/layout/TexPlugin.tsx

@@ -15,11 +15,11 @@ import type {
  * LaTeX.
  */
 export class TexPlugin implements IStatelessPlugin<{}> {
-  tagName = "marimo-tex";
+  public tagName = "marimo-tex";
 
-  validator = z.object({});
+  public validator = z.object({});
 
-  render(props: IStatelessPluginProps<{}>): JSX.Element {
+  public render(props: IStatelessPluginProps<{}>): JSX.Element {
     return (
       <TexComponent
         host={props.host}

package/src/plugins/layout/carousel/CarouselPlugin.tsx

@@ -20,15 +20,15 @@ interface Data {
 }
 
 export class CarouselPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-carousel";
+  public tagName = "marimo-carousel";
 
-  validator = z.object({
+  public validator = z.object({
     index: z.string().nullish(),
     height: z.union([z.string(), z.number()]).nullish(),
   });
 
   // TODO: Move async when we support async css
-  cssStyles = [
+  public cssStyles = [
     swiperCss,
     swiperCssVirtual,
     swiperCssNavigation,
@@ -38,7 +38,7 @@ export class CarouselPlugin implements IStatelessPlugin<Data> {
     swiperSlidesCss,
   ];
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): JSX.Element {
     return (
       <LazySlidesComponent {...props.data} wrapAround={true}>
         {props.children}

package/src/plugins/layout/mermaid/MermaidPlugin.tsx

@@ -14,15 +14,15 @@ interface Data {
 }
 
 export class MermaidPlugin implements IStatelessPlugin<Data> {
-  tagName = "marimo-mermaid";
+  public tagName = "marimo-mermaid";
 
-  validator = z.object({
+  public validator = z.object({
     diagram: z.string(),
     theme: z.string().optional(),
     theme_variables: z.record(z.string(), z.string()).optional(),
   });
 
-  render(props: IStatelessPluginProps<Data>): JSX.Element {
+  public render(props: IStatelessPluginProps<Data>): JSX.Element {
     return (
       <LazyMermaid
         diagram={props.data.diagram}

package/src/utils/Deferred.ts

@@ -7,13 +7,13 @@
  * cases where you need to check if a promise has settled without awaiting it.
  */
 export class Deferred<T> {
-  promise: Promise<T>;
-  resolve!: (value: T | PromiseLike<T>) => void;
-  reject!: (reason?: unknown) => void;
-  status: "pending" | "resolved" | "rejected" = "pending";
-  value: T | undefined = undefined;
+  public promise: Promise<T>;
+  public resolve!: (value: T | PromiseLike<T>) => void;
+  public reject!: (reason?: unknown) => void;
+  public status: "pending" | "resolved" | "rejected" = "pending";
+  public value: T | undefined = undefined;
 
-  constructor() {
+  public constructor() {
     this.promise = new Promise<T>((resolve, reject) => {
       this.reject = (reason: unknown) => {
         this.status = "rejected";

package/src/utils/async-capture-tracker.ts

@@ -66,7 +66,7 @@ export class AsyncCaptureTracker<K, R = unknown> {
    * - Captured with a different value
    * - In-flight with a different value (will be aborted on {@link startCapture})
    */
-  needsCapture(key: K, inputValue: unknown): boolean {
+  public needsCapture(key: K, inputValue: unknown): boolean {
     if (this.capturedInputs.get(key) === inputValue) {
       return false;
     }
@@ -82,7 +82,10 @@ export class AsyncCaptureTracker<K, R = unknown> {
    * that resolves when the capture completes (with the result, or `undefined`
    * on failure/abort). Returns `null` otherwise.
    */
-  waitForInFlight(key: K, inputValue: unknown): Promise<R | undefined> | null {
+  public waitForInFlight(
+    key: K,
+    inputValue: unknown,
+  ): Promise<R | undefined> | null {
     const flight = this.inFlight.get(key);
     if (flight && flight.inputValue === inputValue) {
       return flight.deferred.promise;
@@ -97,7 +100,7 @@ export class AsyncCaptureTracker<K, R = unknown> {
    *
    * @returns A {@link CaptureHandle} scoped to this attempt.
    */
-  startCapture(key: K, inputValue: unknown): CaptureHandle<R> {
+  public startCapture(key: K, inputValue: unknown): CaptureHandle<R> {
     const prev = this.inFlight.get(key);
     if (prev) {
       this.cancelEntry(prev);
@@ -133,7 +136,7 @@ export class AsyncCaptureTracker<K, R = unknown> {
    * Remove tracking for keys not in the given set.
    * Aborts in-flight captures and resolves their waiters with `undefined`.
    */
-  prune(currentKeys: Set<K>): void {
+  public prune(currentKeys: Set<K>): void {
     for (const key of this.capturedInputs.keys()) {
       if (!currentKeys.has(key)) {
         this.capturedInputs.delete(key);
@@ -148,12 +151,12 @@ export class AsyncCaptureTracker<K, R = unknown> {
   }
 
   /** Whether any captures are currently in-flight. */
-  get isCapturing(): boolean {
+  public get isCapturing(): boolean {
     return this.inFlight.size > 0;
   }
 
   /** Abort all in-flight captures. Resolves all waiters with `undefined`. */
-  abort(): void {
+  public abort(): void {
     for (const entry of this.inFlight.values()) {
       this.cancelEntry(entry);
     }
@@ -161,7 +164,7 @@ export class AsyncCaptureTracker<K, R = unknown> {
   }
 
   /** Reset all state. */
-  reset(): void {
+  public reset(): void {
     this.abort();
     this.capturedInputs.clear();
   }

package/src/utils/errors.ts

@@ -68,9 +68,9 @@ function safeJSONParse(message: string): unknown {
  * kept as `cause` so `prettyError` can surface its `detail`.
  */
 export class HTTPError extends Error {
-  readonly status: number;
+  public readonly status: number;
 
-  constructor(status: number, statusText: string, body?: unknown) {
+  public constructor(status: number, statusText: string, body?: unknown) {
     super(statusText, { cause: body });
     this.name = "HTTPError";
     this.status = status;
@@ -78,7 +78,7 @@ export class HTTPError extends Error {
 }
 
 export class CellNotInitializedError extends Error {
-  constructor(
+  public constructor(
     message = "The cell containing this UI element has not been run yet. Please run the cell first.",
   ) {
     super(message);
@@ -87,7 +87,7 @@ export class CellNotInitializedError extends Error {
 }
 
 export class FunctionNotFoundError extends Error {
-  constructor(
+  public constructor(
     message = "This UI element could not reach its function on the kernel. Try re-running the cell.",
   ) {
     super(message);
@@ -96,7 +96,7 @@ export class FunctionNotFoundError extends Error {
 }
 
 export class NoKernelConnectedError extends Error {
-  constructor(message = "Not yet connected to a kernel.") {
+  public constructor(message = "Not yet connected to a kernel.") {
     super(message);
     this.name = "NoKernelConnectedError";
   }