@marimo-team/frontend 0.14.18-dev4 → 0.14.18-dev40

package/src/hooks/useResizeObserver.ts

@@ -0,0 +1,101 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+/*
+ * Simplified version of useResizeObserver from https://usehooks-ts.com/react-hook/use-resize-observer
+ * Use this when you want to attach a resize observer conditionally using the `skip` option.
+ */
+
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
+
+interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+interface UseResizeObserverOptions<T extends HTMLElement = HTMLElement> {
+  ref: RefObject<T | null>;
+  skip?: boolean;
+  onResize?: (size: Size) => void;
+  box?: "border-box" | "content-box" | "device-pixel-content-box";
+}
+
+const initialSize: Size = {
+  width: undefined,
+  height: undefined,
+};
+
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(
+  options: UseResizeObserverOptions<T>,
+): void {
+  const { ref, box = "content-box", skip } = options;
+  // eslint-disable-next-line react/hook-use-state
+  const previousSize = useRef<Size>({ ...initialSize });
+  const onResize = useRef<((size: Size) => void) | undefined>(undefined);
+  // eslint-disable-next-line react-hooks/react-compiler
+  onResize.current = options.onResize;
+
+  useEffect(() => {
+    if (!ref.current || skip) {
+      return;
+    }
+
+    if (typeof window === "undefined" || !("ResizeObserver" in window)) {
+      return;
+    }
+
+    const observer = new ResizeObserver(([entry]) => {
+      const boxProp =
+        box === "border-box"
+          ? "borderBoxSize"
+          : box === "device-pixel-content-box"
+            ? "devicePixelContentBoxSize"
+            : "contentBoxSize";
+
+      const newWidth = extractSize(entry, boxProp, "inlineSize");
+      const newHeight = extractSize(entry, boxProp, "blockSize");
+
+      const hasChanged =
+        previousSize.current.width !== newWidth ||
+        previousSize.current.height !== newHeight;
+
+      if (hasChanged) {
+        const newSize: Size = { width: newWidth, height: newHeight };
+        previousSize.current.width = newWidth;
+        previousSize.current.height = newHeight;
+
+        if (onResize.current) {
+          onResize.current(newSize);
+        }
+      }
+    });
+
+    observer.observe(ref.current, { box });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [box, ref, skip]);
+}
+
+type BoxSizesKey = keyof Pick<
+  ResizeObserverEntry,
+  "borderBoxSize" | "contentBoxSize" | "devicePixelContentBoxSize"
+>;
+
+function extractSize(
+  entry: ResizeObserverEntry,
+  box: BoxSizesKey,
+  sizeType: keyof ResizeObserverSize,
+): number | undefined {
+  if (!entry[box]) {
+    if (box === "contentBoxSize") {
+      return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+    }
+    return undefined;
+  }
+
+  return Array.isArray(entry[box])
+    ? entry[box][0][sizeType]
+    : // @ts-expect-error Support Firefox's non-standard behavior
+      (entry[box][sizeType] as number);
+}

package/src/hooks/useScript.ts

@@ -0,0 +1,90 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React from "react";
+
+type ScriptStatus = "loading" | "ready" | "error" | "unknown";
+interface ScriptOptions {
+  removeOnUnmount?: boolean;
+}
+
+const defaultOptions = { removeOnUnmount: false };
+
+export function useScript(
+  src: string,
+  options: ScriptOptions = defaultOptions,
+) {
+  const [status, setStatus] = React.useState<ScriptStatus>(() => {
+    const existingScript = document.querySelector<HTMLScriptElement>(
+      `script[src="${src}"]`,
+    );
+    return (existingScript?.dataset.status as ScriptStatus) || "unknown";
+  });
+
+  React.useEffect(() => {
+    let script = document.querySelector<HTMLScriptElement>(
+      `script[src="${src}"]`,
+    );
+
+    const updateStatus = (newStatus: ScriptStatus) => {
+      if (script) {
+        script.dataset.status = newStatus;
+        setStatus(newStatus);
+      }
+    };
+
+    const handleScriptLoad = () => updateStatus("ready");
+    const handleScriptError = () => updateStatus("error");
+
+    // observes DOM changes and updates the status
+    const observeScript = (script: HTMLScriptElement) => {
+      const observer = new MutationObserver(() => {
+        const newStatus = script.dataset.status;
+        if (newStatus) {
+          setStatus(newStatus as ScriptStatus);
+        }
+      });
+      observer.observe(script, {
+        attributes: true,
+        attributeFilter: ["data-status"],
+      });
+      return observer;
+    };
+
+    if (!script) {
+      script = document.createElement("script");
+      script.src = src;
+      script.async = true;
+      updateStatus("loading");
+      document.body.append(script);
+
+      script.addEventListener("load", handleScriptLoad);
+      script.addEventListener("error", handleScriptError);
+
+      const observer = observeScript(script);
+
+      return () => {
+        observer.disconnect();
+        if (script) {
+          script.removeEventListener("load", handleScriptLoad);
+          script.removeEventListener("error", handleScriptError);
+
+          if (options.removeOnUnmount) {
+            script.remove();
+          }
+        }
+      };
+    }
+
+    const domStatus = script.dataset.status;
+    if (domStatus) {
+      if (domStatus === "ready" || domStatus === "error") {
+        return;
+      }
+      const observer = observeScript(script);
+      return () => observer.disconnect();
+    }
+
+    setStatus("unknown");
+  }, [src, options.removeOnUnmount]);
+
+  return status;
+}

package/src/hooks/useSelectAllContent.ts

@@ -0,0 +1,42 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+/**
+ * Hook that enables Ctrl/Cmd-A to select all text content within a specific element
+ * @param ref - React ref to the element whose content should be selectable
+ * @param enabled - Whether the hook should be active (defaults to true)
+ */
+export function useSelectAllContent<T extends HTMLElement>(enabled = true) {
+  const handleKeyDown = (event: React.KeyboardEvent<T>) => {
+    if (!enabled) {
+      return;
+    }
+
+    const element = event.currentTarget;
+
+    // Check for Ctrl-A (Windows/Linux) or Cmd-A (Mac)
+    const isSelectAll =
+      event.key.toLowerCase() === "a" && (event.ctrlKey || event.metaKey);
+
+    if (!isSelectAll) {
+      return;
+    }
+
+    // Prevent default browser select-all behavior
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Create selection of all content within the element
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+
+    const range = document.createRange();
+    range.selectNodeContents(element);
+
+    selection.removeAllRanges();
+    selection.addRange(range);
+  };
+
+  return { onKeyDown: handleKeyDown };
+}

package/src/hooks/useTimer.ts

@@ -0,0 +1,48 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useEffect, useRef, useState } from "react";
+import useEvent from "react-use-event-hook";
+
+/**
+ * Creates a timer that counts returns the time in seconds.
+ * Interval is 100ms.
+ */
+export function useTimer() {
+  const [time, setTime] = useState(0);
+  const interval = useRef<number>(undefined);
+
+  const start = useEvent(() => {
+    interval.current = window.setInterval(() => {
+      setTime((time) => time + 0.1);
+    }, 100);
+  });
+
+  const stop = useEvent(() => {
+    if (interval.current != null) {
+      window.clearInterval(interval.current);
+      interval.current = undefined;
+    }
+  });
+
+  const clear = useEvent(() => {
+    setTime(0);
+  });
+
+  // Clear on unmount
+  useEffect(() => {
+    return () => {
+      window.clearInterval(interval.current);
+    };
+  }, []);
+
+  return {
+    // one decimal place, exactly
+    time: new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    }).format(time),
+    start,
+    stop,
+    clear,
+  };
+}

package/src/main.tsx

@@ -0,0 +1,20 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { mount } from "@/mount";
+
+declare global {
+  interface Window {
+    __MARIMO_MOUNT_CONFIG__: unknown;
+  }
+}
+
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+const el = document.getElementById("root");
+if (el) {
+  if (!window.__MARIMO_MOUNT_CONFIG__) {
+    throw new Error("[marimo] mount config not found");
+  }
+  mount(window.__MARIMO_MOUNT_CONFIG__, el);
+} else {
+  throw new Error("[marimo] root element not found");
+}

package/src/mount.tsx

@@ -0,0 +1,331 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type * as api from "@marimo-team/marimo-api";
+import { Provider } from "jotai";
+import { createRoot } from "react-dom/client";
+import { z } from "zod";
+import {
+  appConfigAtom,
+  configOverridesAtom,
+  userConfigAtom,
+} from "@/core/config/config";
+import { KnownQueryParams } from "@/core/constants";
+import { getFilenameFromDOM } from "@/core/dom/htmlUtils";
+import { getMarimoCode } from "@/core/meta/globals";
+import {
+  marimoVersionAtom,
+  serverTokenAtom,
+  showCodeInRunModeAtom,
+} from "@/core/meta/state";
+import { Logger } from "@/utils/Logger";
+import { ErrorBoundary } from "./components/editor/boundary/ErrorBoundary";
+import { notebookAtom } from "./core/cells/cells";
+import { notebookStateFromSession } from "./core/cells/session";
+import {
+  parseAppConfig,
+  parseConfigOverrides,
+  parseUserConfig,
+} from "./core/config/config-schema";
+import { MarimoApp, preloadPage } from "./core/MarimoApp";
+import { type AppMode, initialModeAtom, viewStateAtom } from "./core/mode";
+import { cleanupAuthQueryParams } from "./core/network/auth";
+import { requestClientAtom } from "./core/network/requests";
+import { resolveRequestClient } from "./core/network/resolve";
+import {
+  DEFAULT_RUNTIME_CONFIG,
+  runtimeConfigAtom,
+} from "./core/runtime/config";
+import { codeAtom, filenameAtom } from "./core/saving/file-state";
+import { store } from "./core/state/jotai";
+import { patchFetch, patchVegaLoader } from "./core/static/files";
+import { isStaticNotebook } from "./core/static/static-state";
+import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
+import type { FileStore } from "./core/wasm/store";
+import { notebookFileStore } from "./core/wasm/store";
+import { vegaLoader } from "./plugins/impl/vega/loader";
+import { initializePlugins } from "./plugins/plugins";
+import { ThemeProvider } from "./theme/ThemeProvider";
+import { reportVitals } from "./utils/vitals";
+
+let hasMounted = false;
+
+/**
+ * Main entry point for the mairmo app.
+ *
+ * Sets up the mairmo app with a theme provider.
+ */
+export function mount(options: unknown, el: Element): Error | undefined {
+  if (hasMounted) {
+    Logger.warn("marimo app has already been mounted.");
+    return new Error("marimo app has already been mounted.");
+  }
+
+  hasMounted = true;
+
+  const root = createRoot(el);
+
+  try {
+    // Init side-effects
+    maybeRegisterVSCodeBindings();
+    initializePlugins();
+    cleanupAuthQueryParams();
+
+    // Patches
+    if (isStaticNotebook()) {
+      // If we're in static mode, we need to patch fetch to use the virtual file
+      patchFetch();
+      patchVegaLoader(vegaLoader);
+    }
+
+    // Init store
+    initStore(options);
+
+    root.render(
+      <Provider store={store}>
+        <ThemeProvider>
+          <MarimoApp />
+        </ThemeProvider>
+      </Provider>,
+    );
+  } catch (error) {
+    // Most likely, configuration failed to parse.
+    const Throw = () => {
+      throw error;
+    };
+    root.render(
+      <ErrorBoundary>
+        <Throw />
+      </ErrorBoundary>,
+    );
+    return error as Error;
+  } finally {
+    reportVitals();
+  }
+}
+
+const passthroughObject = z
+  .object({})
+  .passthrough() // Allow any extra fields
+  .nullish()
+  .default({}) // Default to empty object
+  .transform((val) => {
+    if (val) {
+      return val;
+    }
+    if (typeof val === "string") {
+      Logger.warn(
+        "[marimo] received JSON string instead of object. Parsing...",
+      );
+      return JSON.parse(val);
+    }
+    Logger.warn("[marimo] missing config data");
+    return {};
+  });
+
+// This should be extremely backwards compatible and require no options
+const mountOptionsSchema = z.object({
+  /**
+   * filename of the notebook to open
+   */
+  filename: z
+    .string()
+    .nullish()
+    .transform((val) => {
+      if (val) {
+        return val;
+      }
+      Logger.warn("No filename provided, using fallback");
+      return getFilenameFromDOM();
+    }),
+  /**
+   * notebook code
+   */
+  code: z
+    .string()
+    .nullish()
+    .transform((val) => val ?? getMarimoCode() ?? ""),
+  /**
+   * marimo version
+   */
+  version: z
+    .string()
+    .nullish()
+    .transform((val) => val ?? "unknown"),
+  /**
+   * 'edit' or 'read'/'run' or 'home'
+   */
+  mode: z.enum(["edit", "read", "home", "run"]).transform((val): AppMode => {
+    if (val === "run") {
+      return "read";
+    }
+    return val;
+  }),
+  /**
+   * marimo config
+   */
+  config: passthroughObject,
+  /**
+   * marimo config overrides
+   */
+  configOverrides: passthroughObject,
+  /**
+   * marimo app config
+   */
+  appConfig: passthroughObject,
+  /**
+   * show code in run mode
+   */
+  view: z
+    .object({
+      showAppCode: z.boolean().default(true),
+    })
+    .nullish()
+    .transform((val) => val ?? { showAppCode: true }),
+
+  /**
+   * server token
+   */
+  serverToken: z
+    .string()
+    .nullish()
+    .transform((val) => val ?? ""),
+
+  /**
+   * File stores for persistence
+   */
+  fileStores: z.array(z.custom<FileStore>()).optional(),
+
+  /**
+   * Serialized Session["NotebookSessionV1"] snapshot
+   */
+  session: z.union([
+    z.null().optional(),
+    z
+      .object({
+        // Rough shape, we don't need to validate the full schema
+        version: z.literal("1"),
+        metadata: z.any(),
+        cells: z.array(z.any()),
+      })
+      .passthrough()
+      .transform((val) => val as api.Session["NotebookSessionV1"]),
+  ]),
+
+  /**
+   * Serialized Notebook["NotebookV1"] snapshot
+   */
+  notebook: z.union([
+    z.null().optional(),
+    z
+      .object({
+        // Rough shape, we don't need to validate the full schema
+        version: z.literal("1"),
+        metadata: z.any(),
+        cells: z.array(z.any()),
+      })
+      .passthrough()
+      .transform((val) => val as api.Notebook["NotebookV1"]),
+  ]),
+
+  /**
+   * Runtime configs
+   */
+  runtimeConfig: z
+    .array(
+      z
+        .object({
+          url: z.string(),
+          authToken: z.string().nullish(),
+        })
+        .passthrough(),
+    )
+    .nullish()
+    .transform((val) => val ?? []),
+});
+
+function initStore(options: unknown) {
+  const parsedOptions = mountOptionsSchema.safeParse(options);
+  if (!parsedOptions.success) {
+    Logger.error("Invalid marimo mount options", parsedOptions.error);
+    throw new Error("Invalid marimo mount options");
+  }
+  const mode = parsedOptions.data.mode;
+  preloadPage(mode);
+
+  // Initialize file stores if provided
+  if (
+    parsedOptions.data.fileStores &&
+    parsedOptions.data.fileStores.length > 0
+  ) {
+    Logger.log("🗄️ Initializing file stores via mount...");
+    // Insert file stores at the beginning (highest priority)
+    // Insert in reverse order so first in array gets highest priority
+    for (let i = parsedOptions.data.fileStores.length - 1; i >= 0; i--) {
+      notebookFileStore.insert(0, parsedOptions.data.fileStores[i]);
+    }
+    Logger.log(
+      `🗄️ Injected ${parsedOptions.data.fileStores.length} file store(s) into notebookFileStore`,
+    );
+  }
+
+  // Configure networking layer
+  store.set(requestClientAtom, resolveRequestClient());
+
+  // Files
+  store.set(filenameAtom, parsedOptions.data.filename);
+  store.set(codeAtom, parsedOptions.data.code);
+  store.set(initialModeAtom, mode);
+
+  // Meta
+  store.set(marimoVersionAtom, parsedOptions.data.version);
+  store.set(showCodeInRunModeAtom, parsedOptions.data.view.showAppCode);
+
+  // Check for view-as parameter to start in present mode
+  const shouldStartInPresentMode = (() => {
+    const url = new URL(window.location.href);
+    return url.searchParams.get(KnownQueryParams.viewAs) === "present";
+  })();
+
+  const initialViewMode =
+    mode === "edit" && shouldStartInPresentMode ? "present" : mode;
+  store.set(viewStateAtom, { mode: initialViewMode, cellAnchor: null });
+  store.set(serverTokenAtom, parsedOptions.data.serverToken);
+
+  // Config
+  store.set(
+    configOverridesAtom,
+    parseConfigOverrides(parsedOptions.data.configOverrides),
+  );
+  store.set(userConfigAtom, parseUserConfig(parsedOptions.data.config));
+  store.set(appConfigAtom, parseAppConfig(parsedOptions.data.appConfig));
+
+  // Runtime config
+  if (parsedOptions.data.runtimeConfig.length > 0) {
+    const firstRuntimeConfig = parsedOptions.data.runtimeConfig[0];
+    Logger.debug("⚡ Runtime URL", firstRuntimeConfig.url);
+    store.set(runtimeConfigAtom, {
+      ...firstRuntimeConfig,
+      serverToken: parsedOptions.data.serverToken,
+    });
+  } else {
+    store.set(runtimeConfigAtom, {
+      ...DEFAULT_RUNTIME_CONFIG,
+      serverToken: parsedOptions.data.serverToken,
+    });
+  }
+
+  // Session/notebook
+  const notebook = notebookStateFromSession(
+    parsedOptions.data.session,
+    parsedOptions.data.notebook,
+  );
+  if (notebook) {
+    store.set(notebookAtom, notebook);
+  }
+}
+
+export const visibleForTesting = {
+  reset: () => {
+    hasMounted = false;
+  },
+};

package/src/plugins/core/BadPlugin.tsx

@@ -0,0 +1,72 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@radix-ui/react-accordion";
+import type { JSX } from "react";
+import { ZodError } from "zod";
+import { EmotionCacheProvider } from "@/components/editor/output/EmotionCacheProvider";
+import { JsonOutput } from "@/components/editor/output/JsonOutput";
+import { Alert, AlertTitle } from "../../components/ui/alert";
+
+interface Props {
+  error: ZodError | Error;
+  shadowRoot: ShadowRoot | null;
+  badData: Record<string, unknown>;
+}
+
+export const BadPluginData: React.FC<Props> = ({
+  error,
+  badData,
+  shadowRoot,
+}) => {
+  if (error instanceof ZodError) {
+    return (
+      <Alert variant="destructive">
+        <AlertTitle>Bad Data</AlertTitle>
+        <div className="text-md prose dark:prose-invert">
+          <ul>
+            {error.issues.map((issue) => {
+              const path = issue.path.join(".");
+              return (
+                <li key={path}>
+                  <span className="font-bold">{path}</span>: {issue.message}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <Accordion type="single" collapsible={true}>
+          <AccordionItem
+            value="item-1"
+            className="text-muted-foreground border-muted-foreground-20"
+          >
+            <AccordionTrigger className="py-2 text-[0.84375rem]">
+              View Data:
+            </AccordionTrigger>
+            <AccordionContent className="text-[0.84375rem]">
+              <EmotionCacheProvider container={shadowRoot}>
+                <JsonOutput data={badData} />
+              </EmotionCacheProvider>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </Alert>
+    );
+  }
+
+  return <div>{error.message}</div>;
+};
+
+export function renderError(
+  error: ZodError | Error,
+  badData: Record<string, unknown>,
+  shadowRoot: ShadowRoot | null,
+): JSX.Element {
+  return (
+    <BadPluginData error={error} badData={badData} shadowRoot={shadowRoot} />
+  );
+}