@marimo-team/islands 0.16.4 → 0.17.0

package/src/utils/__tests__/formatting.test.ts

@@ -0,0 +1,107 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { formatBytes, formatTime } from "../formatting";
+
+const locale = "en-US";
+
+describe("formatBytes", () => {
+  it("should format 0 bytes", () => {
+    expect(formatBytes(0, locale)).toBe("0 B");
+    expect(formatBytes(-1, locale)).toBe("0 B");
+  });
+
+  it("should format bytes", () => {
+    expect(formatBytes(100, locale)).toBe("100 B");
+    expect(formatBytes(512, locale)).toBe("512 B");
+    expect(formatBytes(1023, locale)).toBe("1,023 B");
+  });
+
+  it("should format kilobytes", () => {
+    expect(formatBytes(1024, locale)).toBe("1 KB");
+    expect(formatBytes(1536, locale)).toBe("1.5 KB");
+    expect(formatBytes(10240, locale)).toBe("10 KB");
+  });
+
+  it("should format megabytes", () => {
+    expect(formatBytes(1048576, locale)).toBe("1 MB"); // 1024^2
+    expect(formatBytes(1572864, locale)).toBe("1.5 MB"); // 1.5 * 1024^2
+    expect(formatBytes(10485760, locale)).toBe("10 MB");
+  });
+
+  it("should format gigabytes", () => {
+    expect(formatBytes(1073741824, locale)).toBe("1 GB"); // 1024^3
+    expect(formatBytes(1610612736, locale)).toBe("1.5 GB"); // 1.5 * 1024^3
+    expect(formatBytes(10737418240, locale)).toBe("10 GB");
+  });
+
+  it("should format terabytes", () => {
+    expect(formatBytes(1099511627776, locale)).toBe("1 TB"); // 1024^4
+    expect(formatBytes(1649267441664, locale)).toBe("1.5 TB"); // 1.5 * 1024^4
+  });
+
+  it("should respect locale parameter", () => {
+    // German locale uses different separators
+    const bytes = 1536; // 1.5 KB
+    expect(formatBytes(bytes, "de-DE")).toContain("1,5");
+    // US locale uses dot
+    expect(formatBytes(bytes, "en-US")).toContain("1.5");
+  });
+});
+
+describe("formatTime", () => {
+  it("should format 0 seconds", () => {
+    expect(formatTime(0, locale)).toBe("0s");
+  });
+
+  it("should format microseconds", () => {
+    expect(formatTime(0.0000001, locale)).toBe("0.1µs");
+    expect(formatTime(0.0000005, locale)).toBe("0.5µs");
+    expect(formatTime(0.000000999, locale)).toBe("1µs"); // rounded by prettyNumber
+  });
+
+  it("should format milliseconds", () => {
+    expect(formatTime(0.001, locale)).toBe("1ms");
+    expect(formatTime(0.0015, locale)).toBe("1.5ms");
+    expect(formatTime(0.1, locale)).toBe("100ms");
+    expect(formatTime(0.5, locale)).toBe("500ms");
+    expect(formatTime(0.999, locale)).toBe("999ms");
+  });
+
+  it("should format seconds", () => {
+    expect(formatTime(1, locale)).toBe("1s");
+    expect(formatTime(1.5, locale)).toBe("1.5s");
+    expect(formatTime(30, locale)).toBe("30s");
+    expect(formatTime(59.9, locale)).toBe("59.9s");
+  });
+
+  it("should format minutes and seconds", () => {
+    expect(formatTime(60, locale)).toBe("1m");
+    expect(formatTime(90, locale)).toBe("1m 30s");
+    expect(formatTime(150, locale)).toBe("2m 30s");
+    expect(formatTime(3540, locale)).toBe("59m");
+    expect(formatTime(3599, locale)).toBe("59m 59s");
+  });
+
+  it("should format hours and minutes", () => {
+    expect(formatTime(3600, locale)).toBe("1h");
+    expect(formatTime(3660, locale)).toBe("1h 1m");
+    expect(formatTime(5400, locale)).toBe("1h 30m");
+    expect(formatTime(7200, locale)).toBe("2h");
+    expect(formatTime(9000, locale)).toBe("2h 30m");
+  });
+
+  it("should respect locale parameter", () => {
+    // German locale uses comma for decimal separator
+    const time = 1.5;
+    expect(formatTime(time, "de-DE")).toContain("1,5");
+    // US locale uses dot
+    expect(formatTime(time, "en-US")).toContain("1.5");
+  });
+
+  it("should handle edge cases", () => {
+    expect(formatTime(0.0009999, locale)).toBe("999.9µs");
+    expect(formatTime(59.999, locale)).toBe("60s"); // rounded by prettyNumber
+    expect(formatTime(3599.999, locale)).toBe("59m 60s"); // rounded by prettyNumber
+  });
+});

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

@@ -55,6 +55,19 @@ it("can fail to jsonParseWithSpecialChar", () => {
   expect(jsonParseWithSpecialChar("[nan]")).toMatchInlineSnapshot("{}");
 });
 
+it("can parse bigInts", () => {
+  const bigint = JSON.stringify({ bigint: { $bigint: "123456" } });
+  expect(jsonParseWithSpecialChar(bigint)).toEqual({ bigint: BigInt(123_456) });
+
+  const arrayOfBigInts = JSON.stringify([{ $bigint: "123456" }]);
+  expect(jsonParseWithSpecialChar(arrayOfBigInts)).toEqual([BigInt(123_456)]);
+
+  const nestedBigInt = JSON.stringify({ bigint: [{ $bigint: "123456" }] });
+  expect(jsonParseWithSpecialChar(nestedBigInt)).toEqual({
+    bigint: [BigInt(123_456)],
+  });
+});
+
 it("can convert json to tsv", () => {
   expect(jsonToTSV([])).toEqual("");
 

package/src/utils/copy.ts

@@ -9,6 +9,12 @@ import { Logger } from "./Logger";
  * when running localhost http.
  */
 export async function copyToClipboard(text: string) {
+  if (navigator.clipboard === undefined) {
+    Logger.warn("navigator.clipboard is not supported");
+    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
+    return;
+  }
+
   await navigator.clipboard.writeText(text).catch(async () => {
     // Fallback to prompt
     Logger.warn("Failed to copy to clipboard using navigator.clipboard");

package/src/utils/formatting.ts

@@ -0,0 +1,51 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { prettyNumber } from "./numbers";
+
+/**
+ * Format bytes to human-readable format
+ * @param bytes - Number of bytes to format
+ * @param locale - Optional locale for number formatting
+ * @returns Formatted string (e.g., "1.5 MB")
+ */
+export function formatBytes(bytes: number, locale: string): string {
+  if (bytes === 0 || bytes === -1) {
+    return "0 B";
+  }
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const value = bytes / k ** i;
+  return `${prettyNumber(value, locale)} ${sizes[i]}`;
+}
+
+/**
+ * Format seconds to human-readable time format
+ * @param seconds - Number of seconds to format
+ * @param locale - Optional locale for number formatting
+ * @returns Formatted string (e.g., "1m 30s", "2h 15m", "500ms", "100µs")
+ */
+export function formatTime(seconds: number, locale: string): string {
+  if (seconds === 0) {
+    return "0s";
+  }
+  if (seconds < 0.001) {
+    return `${prettyNumber(seconds * 1_000_000, locale)}µs`;
+  }
+  if (seconds < 1) {
+    return `${prettyNumber(seconds * 1000, locale)}ms`;
+  }
+  if (seconds < 60) {
+    return `${prettyNumber(seconds, locale)}s`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (minutes < 60) {
+    return secs > 0
+      ? `${minutes}m ${prettyNumber(secs, locale)}s`
+      : `${minutes}m`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const remainingMins = minutes % 60;
+  return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`;
+}

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

@@ -2,6 +2,18 @@
 
 import type { JsonString } from "./base64";
 
+declare global {
+  interface BigInt {
+    toJSON(): unknown;
+  }
+}
+
+// Treat BigInts as numbers
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON#using_json_numbers
+BigInt.prototype.toJSON = function () {
+  return JSON.rawJSON(this.toString());
+};
+
 /**
  * Parse an attribute value as JSON.
  * This also handles NaN, Infinity, and -Infinity.
@@ -12,7 +24,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
   // This regex handling is expensive and often not needed.
   // We try to parse with JSON.parse first, and if that fails, we use the regex.
   try {
-    return JSON.parse(value) as T;
+    return JSON.parse(value, (_key, value) => sanitizeBigInt(value)) as T;
   } catch {
     // Do nothing
   }
@@ -36,7 +48,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
     );
     return JSON.parse(value, (_key, v) => {
       if (typeof v !== "string") {
-        return v;
+        return sanitizeBigInt(v);
       }
       if (v === `${CHAR}NaN${CHAR}`) {
         return Number.NaN;
@@ -47,7 +59,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
       if (v === `${CHAR}-Infinity${CHAR}`) {
         return Number.NEGATIVE_INFINITY;
       }
-      return v;
+      return sanitizeBigInt(v);
     }) as T;
   } catch {
     return {} as T;
@@ -63,3 +75,16 @@ export function jsonToTSV(json: Record<string, unknown>[]) {
   const values = json.map((row) => keys.map((key) => row[key]).join("\t"));
   return `${keys.join("\t")}\n${values.join("\n")}`;
 }
+
+/** Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json */
+function sanitizeBigInt(value: unknown): unknown {
+  if (
+    value !== null &&
+    typeof value === "object" &&
+    "$bigint" in value &&
+    typeof value.$bigint === "string"
+  ) {
+    return BigInt(value.$bigint);
+  }
+  return value;
+}

package/src/utils/numbers.ts

@@ -1,5 +1,28 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { Logger } from "./Logger";
+import { memoizeLastValue } from "./once";
+
+/**
+ * Browsers have a limit on the maximum number of fractional digits they can display.
+ * This function finds the maximum number of fractional digits that can be displayed for a given locale.
+ */
+export const maxFractionalDigits = memoizeLastValue((locale: string) => {
+  const options = [100, 20, 2, 0];
+  for (const option of options) {
+    try {
+      new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: option,
+      }).format(1);
+      return option;
+    } catch (e) {
+      Logger.error(e);
+    }
+  }
+  return 0;
+});
+
 export function prettyNumber(value: unknown, locale: string): string {
   if (value === undefined || value === null) {
     return "";
@@ -80,7 +103,7 @@ export function prettyScientificNumber(
   // Don't round
   return value.toLocaleString(locale, {
     minimumFractionDigits: 0,
-    maximumFractionDigits: 100,
+    maximumFractionDigits: maxFractionalDigits(locale),
   });
 }
 

package/dist/any-language-editor-CVFQlioK.js

@@ -1,156 +0,0 @@
-import { s as __toESM } from "./chunk-DgPTj83v.js";
-import { t as require_react } from "./react-DHL_F5hS.js";
-import { t as require_jsx_runtime } from "./jsx-runtime-DZyWJV5b.js";
-import "./copy-C5RFg7ok.js";
-import "./fullscreen-D1yTiBlu.js";
-import "./check-BK9zDfQk.js";
-import "./button-CEcjneWG.js";
-import { s as Logger } from "./hotkeys-yFrUwyJK.js";
-import "./react-dom-CpBooCbY.js";
-import { n as ErrorBanner } from "./error-banner-OQIGTqFR.js";
-import { d as CopyClipboardIcon, n as loadLanguage, r as esm_default, t as langs } from "./esm-DxFkg7a6.js";
-import "./zod-UPQf9SGn.js";
-import "./dist-DPF5TTUg.js";
-import "./dist-CxD5E6Sh.js";
-import "./dist-DW9er3Zq.js";
-import "./dist-CdE2C2In.js";
-import "./dist-BEvIw5Nh.js";
-import "./dist-CUnh_3Ii.js";
-import "./dist-C3WYsf4K.js";
-import "./stex-BiFc8QAu.js";
-import "./dist-C7ASiFxI.js";
-import "./tslib.es6-DofFyd9S.js";
-import "./dist-BQmQQqFH.js";
-import "./dist-Cib4sGDA.js";
-import "./dist-BBlFk9ki.js";
-import "./dist-CutXTm8t.js";
-import "./dist-elblfNXO.js";
-import "./dist-CGIZPq3J.js";
-import "./dist-DNnYAdRE.js";
-import "./dist-DL_ci7Yc.js";
-import "./dist-DzOpMdwb.js";
-import "./dist-BZBitvuL.js";
-import "./dist-JCAky9ND.js";
-import "./dist-CLvpViod.js";
-import "./apl-DZqo8Elt.js";
-import "./asciiarmor-DTzHAIeX.js";
-import "./asn1-DrAXKsZH.js";
-import "./brainfuck-BYgLey30.js";
-import "./cobol-BQyrWo72.js";
-import "./clike-Cg_DBrJ0.js";
-import "./clojure-Bs2M3OUY.js";
-import "./css-BzTU9lNO.js";
-import "./cmake-DpI8vxJN.js";
-import "./coffeescript-9ke9UHmw.js";
-import "./commonlisp-DghUdrUH.js";
-import "./cypher-a2v0c11S.js";
-import "./python-B6FKOVIv.js";
-import "./crystal-DEf_SInh.js";
-import "./d-SAswny-M.js";
-import "./diff-OJ-xLXcG.js";
-import "./dtd-BsUf-rer.js";
-import "./dylan-C0ZYngjn.js";
-import "./ecl-Bsuvoouq.js";
-import "./eiffel-DgfSpLi-.js";
-import "./elm-GNxDj-5E.js";
-import "./erlang-Ds3uY1kL.js";
-import "./simple-mode-Cgyya8F-.js";
-import "./factor-CdgiDGiu.js";
-import "./forth-JCaLysGk.js";
-import "./fortran-Dc2AoKAl.js";
-import "./mllike-DEjvHvNV.js";
-import "./gas-Q4Uz82YW.js";
-import "./gherkin-Dpxe49sQ.js";
-import "./groovy-D8mTRCu6.js";
-import "./haskell-2_8cC4wY.js";
-import "./haxe-Bl9zkZlz.js";
-import "./idl-Dn-HNfGW.js";
-import "./javascript-Dfq1qI35.js";
-import "./jinja2-JjFiAGKk.js";
-import "./julia-R5wne8eu.js";
-import "./livescript-DSwokrYj.js";
-import "./lua-CgXfrp2-.js";
-import "./mirc-BkW04Zpc.js";
-import "./mathematica-BVli92MR.js";
-import "./modelica-CxDn-oje.js";
-import "./mumps-Bi0IvPOV.js";
-import "./mbox-CMFlocdS.js";
-import "./nsis-BW6_XagK.js";
-import "./ntriples-Btyp6wRL.js";
-import "./octave-CZA6-2F8.js";
-import "./oz-Bm6LSNfE.js";
-import "./pascal-B4J6a9BH.js";
-import "./perl-CzVqxS08.js";
-import "./pig-Clh03cnn.js";
-import "./powershell-3rK_nRRJ.js";
-import "./properties-D7ch1Wyb.js";
-import "./protobuf-DrkdrMPK.js";
-import "./pug-Bmups_z0.js";
-import "./puppet-BtZG8zdO.js";
-import "./q-BzWcnVri.js";
-import "./r-Dnvo5-96.js";
-import "./rpm-B1DrgfnX.js";
-import "./ruby-CelfUg17.js";
-import "./sas-DfSQFMWG.js";
-import "./scheme-BplhaWuO.js";
-import "./shell-DqU5OS2c.js";
-import "./sieve-BE4_IyGa.js";
-import "./smalltalk-B_WPL8Nx.js";
-import "./sparql-7XIlcOgW.js";
-import "./stylus-DlSH9xpH.js";
-import "./swift-e3tMTZgJ.js";
-import "./verilog-DrDOMiJq.js";
-import "./tcl-DfZMC20G.js";
-import "./textile-DaSeca5U.js";
-import "./toml-CIUkU1CP.js";
-import "./troff-FN_FrCXR.js";
-import "./ttcn-7_i4HlyB.js";
-import "./ttcn-cfg-B46AlBUV.js";
-import "./turtle-QQfeFveR.js";
-import "./webidl-Or6d1ZfA.js";
-import "./vb-DToPVnLa.js";
-import "./vbscript-CtsNaTz4.js";
-import "./velocity-CAoNe6ns.js";
-import "./vhdl-DnO0OEPh.js";
-import "./xquery-CEp_Mcpr.js";
-import "./yacas-DgnYrSlp.js";
-import "./z80-DlG_kyeB.js";
-import "./mscgen-D78wmE-w.js";
-import "./dist-Bar1QnNM.js";
-var import_react = /* @__PURE__ */ __toESM(require_react()), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime());
-const LANGUAGE_MAP = {
-  python: "py",
-  javascript: "js",
-  typescript: "ts"
-};
-var any_language_editor_default = ({ language: e, showCopyButton: u, extensions: d = [], ...f }) => {
-  e = LANGUAGE_MAP[e || ""] || e;
-  let p = e && !(e in langs);
-  p && Logger.warn(`Language ${e} not found in CodeMirror.`);
-  let m = (0, import_react.useMemo)(() => e ? [loadLanguage(e), ...d].filter(Boolean) : d, [e, d]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-    className: "relative w-full group hover-actions-parent",
-    children: [
-      p && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, {
-        className: "mb-1 rounded-sm",
-        error: `Language ${e} not supported. 
-
-Supported languages are: ${Object.keys(langs).join(", ")}`
-      }),
-      u && !p && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyClipboardIcon, {
-        tooltip: false,
-        className: "absolute top-2 right-2 p-1 hover-action z-10 text-muted-foreground",
-        value: f.value || "",
-        toastTitle: "Copied to clipboard"
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(esm_default, {
-        ...f,
-        extensions: m
-      })
-    ]
-  });
-};
-export {
-  LANGUAGE_MAP,
-  any_language_editor_default as default
-};

package/dist/apl-ChlaBfxB.js

@@ -1,4 +0,0 @@
-import { t as apl } from "./apl-DZqo8Elt.js";
-export {
-  apl
-};

package/dist/architecture-O4VJ6CD3-BVeaxUcM.js

@@ -1,21 +0,0 @@
-import "./isArrayLikeObject-DiDsNamC.js";
-import "./isSymbol-BxF-_8BA.js";
-import "./toString-BvCd3yJc.js";
-import "./toNumber-efKT08hh.js";
-import "./_basePickBy-CYvzhRjy.js";
-import "./_baseIsEqual-oN7pRNcM.js";
-import "./_baseUniq-B5gfSl8S.js";
-import "./chunk-4KMFLZZN-CloTfTwP.js";
-import "./_baseProperty-DGUdIBuu.js";
-import "./memoize-Dq87l1O_.js";
-import "./_baseSlice-OgpvpOOJ.js";
-import "./_arrayReduce-CVwxyrBP.js";
-import "./clone-Dk4FkKH0.js";
-import "./min-BzhKOmZo.js";
-import "./isEmpty-BBG-u1GM.js";
-import "./main-Czi9-LVy.js";
-import { n as createArchitectureServices, t as ArchitectureModule } from "./chunk-JEIROHC2-BGnFkSVq.js";
-export {
-  ArchitectureModule,
-  createArchitectureServices
-};

package/dist/asciiarmor-CcJmm3l_.js

@@ -1,4 +0,0 @@
-import { t as asciiArmor } from "./asciiarmor-DTzHAIeX.js";
-export {
-  asciiArmor
-};

package/dist/asn1-ThRYxoBE.js

@@ -1,4 +0,0 @@
-import { t as asn1 } from "./asn1-DrAXKsZH.js";
-export {
-  asn1
-};

package/dist/assets/__vite-browser-external-BeNtI_tJ.js

@@ -1 +0,0 @@
-import{__commonJSMin as e}from"./worker-DnuXpGWN.js";var t=e(((e,t)=>{t.exports={}}));export default t();