@marimo-team/islands 0.16.1 → 0.16.3

package/src/utils/id-tree.tsx

@@ -25,9 +25,9 @@ export type CellIndex = number & { __brand?: "CellIndex" };
 export class TreeNode<T> {
   public value: T;
   public isCollapsed: boolean;
-  public children: Array<TreeNode<T>>;
+  public children: TreeNode<T>[];
 
-  constructor(value: T, isCollapsed: boolean, children: Array<TreeNode<T>>) {
+  constructor(value: T, isCollapsed: boolean, children: TreeNode<T>[]) {
     this.value = value;
     this.isCollapsed = isCollapsed;
     this.children = children;
@@ -77,15 +77,17 @@ export class TreeNode<T> {
   @Memoize()
   get inOrderIds(): T[] {
     const result: T[] = [];
-    const queue = [...this.children];
 
-    while (queue.length > 0) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const node = queue.shift()!;
+    // Use depth-first traversal to preserve logical document order
+    const traverse = (node: TreeNode<T>) => {
       result.push(node.value);
+      for (const child of node.children) {
+        traverse(child);
+      }
+    };
 
-      // Add children to queue to maintain breadth-first traversal
-      queue.push(...node.children);
+    for (const child of this.children) {
+      traverse(child);
     }
 
     return result;
@@ -106,10 +108,10 @@ export class TreeNode<T> {
 let uniqueId = 0;
 
 export class CollapsibleTree<T> {
-  public readonly nodes: Array<TreeNode<T>>;
+  public readonly nodes: TreeNode<T>[];
   public readonly id: CellColumnId;
 
-  private constructor(nodes: Array<TreeNode<T>>, id: CellColumnId) {
+  private constructor(nodes: TreeNode<T>[], id: CellColumnId) {
     this.nodes = nodes;
     this.id = id;
   }
@@ -160,7 +162,7 @@ export class CollapsibleTree<T> {
     return newTree;
   }
 
-  withNodes(nodes: Array<TreeNode<T>>): CollapsibleTree<T> {
+  withNodes(nodes: TreeNode<T>[]): CollapsibleTree<T> {
     return new CollapsibleTree(nodes, this.id);
   }
 
@@ -305,7 +307,7 @@ export class CollapsibleTree<T> {
    * Does not collapse the children of already collapsed nodes
    */
   collapseAll(
-    collapseRanges: Array<{ id: T; until: T | undefined } | null>,
+    collapseRanges: ({ id: T; until: T | undefined } | null)[],
   ): CollapsibleTree<T> {
     const nodes = [...this.nodes];
     if (collapseRanges.length === 0) {
@@ -539,7 +541,7 @@ export class CollapsibleTree<T> {
    */
   find(id: T): T[] {
     // We need to recursively find the node
-    function findNode(nodes: Array<TreeNode<T>>, path: T[]): T[] {
+    function findNode(nodes: TreeNode<T>[], path: T[]): T[] {
       for (const node of nodes) {
         if (node.value === id) {
           return [...path, id];
@@ -585,7 +587,7 @@ export class CollapsibleTree<T> {
   toString(): string {
     let depth = 0;
     let result = "";
-    const asString = (nodes: Array<TreeNode<T>>) => {
+    const asString = (nodes: TreeNode<T>[]) => {
       for (const node of nodes) {
         result += `${" ".repeat(depth * 2)}${node.toString()}\n`;
         depth += 1;
@@ -599,9 +601,9 @@ export class CollapsibleTree<T> {
 }
 
 export class MultiColumn<T> {
-  private readonly columns: ReadonlyArray<CollapsibleTree<T>>;
+  private readonly columns: readonly CollapsibleTree<T>[];
 
-  constructor(columns: ReadonlyArray<CollapsibleTree<T>>) {
+  constructor(columns: readonly CollapsibleTree<T>[]) {
     this.columns = columns;
 
     // Ensure there is always at least one column
@@ -662,7 +664,7 @@ export class MultiColumn<T> {
   }
 
   static fromIdsAndColumns<T>(
-    idAndColumns: Array<[T, number | undefined | null]>,
+    idAndColumns: [T, number | undefined | null][],
   ): MultiColumn<T> {
     // If column is undefined, use the previous column
     // Ensure there is always at least one column
@@ -744,7 +746,7 @@ export class MultiColumn<T> {
     return this.columns.length === 1;
   }
 
-  getColumns(): ReadonlyArray<CollapsibleTree<T>> {
+  getColumns(): readonly CollapsibleTree<T>[] {
     return this.columns;
   }
 

package/src/utils/json/base64.ts

@@ -1,4 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
+
+import type { OperationMessageData } from "@/core/kernel/messages";
 import type { TypedString } from "../typed";
 
 export type JsonString<T = unknown> = TypedString<"Json"> & {
@@ -52,3 +54,14 @@ export function extractBase64FromDataURL(str: DataURLString): Base64String {
 export function byteStringToBinary(bytes: ByteString): Uint8Array {
   return Uint8Array.from(bytes, (c) => c.charCodeAt(0));
 }
+
+export function safeExtractSetUIElementMessageBuffers(
+  op: OperationMessageData<"send-ui-element-message">,
+): readonly DataView[] {
+  // @ts-expect-error - TypeScript doesn't know that these strings are actually base64 strings
+  const strs: Base64String[] = op.buffers ?? [];
+  return strs.map((str) => {
+    const bytes = byteStringToBinary(typedAtob(str));
+    return new DataView(bytes.buffer);
+  });
+}

package/src/utils/json/json-parser.ts

@@ -34,7 +34,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
       /(?<=\s|^|\[|,|:)(NaN|-Infinity|Infinity)(?=(?:[^"'\\]*(\\.|'([^'\\]*\\.)*[^'\\]*'|"([^"\\]*\\.)*[^"\\]*"))*[^"']*$)/g,
       `"${CHAR}$1${CHAR}"`,
     );
-    return JSON.parse(value, (key, v) => {
+    return JSON.parse(value, (_key, v) => {
       if (typeof v !== "string") {
         return v;
       }
@@ -54,7 +54,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
   }
 }
 
-export function jsonToTSV(json: Array<Record<string, unknown>>) {
+export function jsonToTSV(json: Record<string, unknown>[]) {
   if (json.length === 0) {
     return "";
   }

package/src/utils/lru.ts

@@ -65,4 +65,8 @@ export class LRUCache<K, V> {
   public entries() {
     return this.cache.entries();
   }
+
+  public delete(key: K) {
+    this.cache.delete(key);
+  }
 }

package/src/utils/mergeRefs.ts

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 export function mergeRefs<T>(
-  ...refs: Array<React.Ref<T>>
+  ...refs: React.Ref<T>[]
 ): (value: T | null) => void {
   return (value) => {
     refs.forEach((ref) => {

package/src/utils/objects.ts

@@ -17,14 +17,14 @@ export const Objects = {
   /**
    * Type-safe Object.fromEntries
    */
-  fromEntries<K extends string | number, V>(obj: Array<[K, V]>): Record<K, V> {
+  fromEntries<K extends string | number, V>(obj: [K, V][]): Record<K, V> {
     return Object.fromEntries(obj) as Record<K, V>;
   },
   /**
    * Type-safe Object.entries
    */
-  entries<K extends string | number, V>(obj: Record<K, V>): Array<[K, V]> {
-    return Object.entries(obj) as Array<[K, V]>;
+  entries<K extends string | number, V>(obj: Record<K, V>): [K, V][] {
+    return Object.entries(obj) as [K, V][];
   },
   /**
    * Type-safe Object.keys

package/src/utils/pluralize.ts

@@ -25,7 +25,7 @@ export class PluralWords {
     this.words = words;
   }
 
-  static of(...words: Array<PluralWord | string>) {
+  static of(...words: (PluralWord | string)[]) {
     return new PluralWords(
       words.map((word) => {
         if (typeof word === "string") {

package/src/utils/routes.ts

@@ -8,10 +8,10 @@ import {
 } from "path-to-regexp";
 
 export class TinyRouter {
-  private routes: Array<{
+  private routes: {
     template: string;
     pathFunction: MatchFunction<ParamData>;
-  }>;
+  }[];
 
   constructor(templates: string[]) {
     this.routes = templates.map((template) => {

package/src/utils/sets.ts

@@ -3,7 +3,7 @@ export const Sets = {
   /**
    * Merge multiple iterables into a single set.
    */
-  merge<T>(...sets: Array<Iterable<T>>): Set<T> {
+  merge<T>(...sets: Iterable<T>[]): Set<T> {
     const result = new Set<T>();
     for (const set of sets) {
       for (const item of set) {

package/src/utils/traceback.ts

@@ -28,13 +28,38 @@ export const elementContainsMarimoCellFile = (domNode: Element) => {
   );
 };
 
-export interface TracebackInfo {
-  cellId: CellId;
-  lineNumber: number;
-}
+export type TracebackInfo =
+  | {
+      kind: "file";
+      filePath: string;
+      lineNumber: number;
+    }
+  | {
+      kind: "cell";
+      cellId: CellId;
+      lineNumber: number;
+    };
 
 /**
  * Extract the cell id and line number from a traceback DOM node.
+ *
+ * Example transformation:
+ *
+ *   File <span class="nb">"/tmp/marimo_<number>/__marimo__cell_<CellId>.py"</span>
+ *   , line <span class="n">1</span>...
+ *
+ *   becomes
+ *
+ *   { kind: "cell", cellId: <CellID>, lineNumber: 1 }
+ *
+ *   or for files:
+ *
+ *   File <span class="nb">"/path/to/file.py"</span>
+ *   , line <span class="n">42</span>...
+ *
+ *   becomes
+ *
+ *   { kind: "file", filePath: "/path/to/file.py", lineNumber: 42 }
  */
 export function getTracebackInfo(domNode: DOMNode): TracebackInfo | null {
   // The traceback can be manipulated either in output render or in the pygments
@@ -57,7 +82,7 @@ export function getTracebackInfo(domNode: DOMNode): TracebackInfo | null {
   if (
     domNode instanceof Element &&
     domNode.firstChild instanceof Text &&
-    elementContainsMarimoCellFile(domNode)
+    matchesSelector(domNode, "span.nb")
   ) {
     const nextSibling = domNode.next;
     if (nextSibling && nextSibling instanceof Text) {
@@ -68,14 +93,22 @@ export function getTracebackInfo(domNode: DOMNode): TracebackInfo | null {
         lineSibling.firstChild instanceof Text &&
         matchesSelector(lineSibling, "span.m")
       ) {
-        const cellId = /__marimo__cell_(\w+)_/.exec(
-          domNode.firstChild.nodeValue,
-        )?.[1];
         const lineNumber = Number.parseInt(
           lineSibling.firstChild.nodeValue || "0",
+          10,
         );
-        if (cellId && lineNumber) {
-          return { cellId: cellId as CellId, lineNumber };
+        if (domNode.firstChild.nodeValue?.includes("__marimo__")) {
+          const cellId = /__marimo__cell_(\w+)_/.exec(
+            domNode.firstChild.nodeValue,
+          )?.[1] as CellId;
+          if (cellId && lineNumber) {
+            return { kind: "cell", cellId, lineNumber };
+          }
+        } else {
+          const filePath = /"(.+?)"/.exec(domNode.firstChild.nodeValue)?.[1];
+          if (filePath && lineNumber) {
+            return { kind: "file", filePath, lineNumber };
+          }
         }
       }
     }
@@ -92,11 +125,8 @@ export function extractAllTracebackInfo(traceback: string): TracebackInfo[] {
     replace: (domNode) => {
       const info = getTracebackInfo(domNode);
       if (info) {
-        infos.push({
-          cellId: info.cellId,
-          lineNumber: info.lineNumber,
-        });
-        return `${info.cellId}:${info.lineNumber}`;
+        infos.push(info);
+        return "dummy";
       }
     },
   });

package/src/utils/tracer.ts

@@ -1,7 +1,9 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-/* eslint-disable no-console */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+/** biome-ignore-all lint/suspicious/noConsole: for debugging */
+
+import { Logger } from "./Logger";
 
 type SpanStatus = "ok" | "error";
 
@@ -88,19 +90,19 @@ export class Tracer {
           s.startTime < span.endTime,
       );
       if (childSpans.length > 0) {
-        console.log("Child Spans:");
+        Logger.log("Child Spans:");
         childSpans.forEach((childSpan) => {
-          console.log(`  - ${childSpan.name}`);
+          Logger.log(`  - ${childSpan.name}`);
         });
       }
-      console.log(`Start Time: ${new Date(span.startTime).toISOString()}`);
+      Logger.log(`Start Time: ${new Date(span.startTime).toISOString()}`);
       if (span.endTime) {
-        console.log(`End Time: ${new Date(span.endTime).toISOString()}`);
-        console.log(`Duration: ${span.endTime - span.startTime}ms`);
+        Logger.log(`End Time: ${new Date(span.endTime).toISOString()}`);
+        Logger.log(`Duration: ${span.endTime - span.startTime}ms`);
       }
-      console.log(`Status: ${span.status}`);
-      console.log(`Attributes: ${JSON.stringify(span.attributes)}`);
-      console.log("---");
+      Logger.log(`Status: ${span.status}`);
+      Logger.log(`Attributes: ${JSON.stringify(span.attributes)}`);
+      Logger.log("---");
     });
   }
 }