@marimo-team/islands 0.17.8 → 0.18.0

package/src/plugins/layout/StatPlugin.tsx

@@ -17,6 +17,7 @@ interface Data {
   caption?: string;
   bordered?: boolean;
   direction?: "increase" | "decrease";
+  target_direction?: "increase" | "decrease";
 }
 
 export class StatPlugin implements IStatelessPlugin<Data> {
@@ -28,6 +29,7 @@ export class StatPlugin implements IStatelessPlugin<Data> {
     caption: z.string().optional(),
     bordered: z.boolean().default(false),
     direction: z.enum(["increase", "decrease"]).optional(),
+    target_direction: z.enum(["increase", "decrease"]).default("increase"),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
@@ -41,6 +43,7 @@ export const StatComponent: React.FC<Data> = ({
   caption,
   bordered,
   direction,
+  target_direction,
 }) => {
   const { locale } = useLocale();
 
@@ -64,6 +67,10 @@ export const StatComponent: React.FC<Data> = ({
     return String(value);
   };
 
+  const onTarget = direction === target_direction;
+  const fillColor = onTarget ? "var(--grass-8)" : "var(--red-8)";
+  const strokeColor = onTarget ? "var(--grass-9)" : "var(--red-9)";
+
   return (
     <div
       className={cn(
@@ -83,15 +90,15 @@ export const StatComponent: React.FC<Data> = ({
             {direction === "increase" && (
               <TriangleIcon
                 className="w-4 h-4 mr-1 p-0.5"
-                fill="var(--grass-8)"
-                stroke="var(--grass-9)"
+                fill={fillColor}
+                stroke={strokeColor}
               />
             )}
             {direction === "decrease" && (
               <TriangleIcon
                 className="w-4 h-4 mr-1 p-0.5 transform rotate-180"
-                fill="var(--red-8)"
-                stroke="var(--red-9)"
+                fill={fillColor}
+                stroke={strokeColor}
               />
             )}
             {caption}

package/src/plugins/layout/__test__/ProgressPlugin.test.ts

@@ -2,25 +2,41 @@
 import { expect, test } from "vitest";
 import { prettyTime } from "../ProgressPlugin";
 
-// examples of expected output
-test("prettyTime", () => {
-  // exact
-  expect(prettyTime(0)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(1)).toMatchInlineSnapshot('"1s"');
-  expect(prettyTime(60)).toMatchInlineSnapshot('"1m"');
-  expect(prettyTime(60 * 60)).toMatchInlineSnapshot('"1h"');
-  expect(prettyTime(60 * 60 * 24)).toMatchInlineSnapshot('"1d"');
-
-  // decimal
-  expect(prettyTime(0.5)).toMatchInlineSnapshot('"0.5s"');
-  expect(prettyTime(1.5)).toMatchInlineSnapshot('"1.5s"');
-  expect(prettyTime(60 * 1.5)).toMatchInlineSnapshot('"1m, 30s"');
-  expect(prettyTime(60 * 60 * 1.5)).toMatchInlineSnapshot('"1h, 30m"');
-  expect(prettyTime(60 * 60 * 24 * 1.5)).toMatchInlineSnapshot('"1d, 12h"');
-
+const Cases: Array<[number, string]> = [
+  // exact values
+  [0, "0s"],
+  [1, "1s"],
+  [5, "5s"],
+  [15, "15s"],
+  [60, "1m"],
+  [100, "1m, 40s"],
+  [60 * 60, "1h"],
+  [60 * 60 * 24, "1d"],
+  [60 * 60 * 24 * 7, "1w"],
+  [60 * 60 * 24 * 8, "1w, 1d"],
+  [60 * 60 * 24 * 30, "4w, 2d"],
+  [60 * 60 * 24 * 366, "1y, 18h"],
+  [60 * 60 * 24 * 466, "1y, 3mo"],
+  // decimal values
+  [0.5, "0.5s"],
+  [1.5, "1.5s"],
+  [5.2, "5.2s"],
+  [5.33, "5.33s"],
+  [15.2, "15s"],
+  [60 * 1.5, "1m, 30s"],
+  [100.2, "1m, 40s"],
+  [60 * 60 * 1.5, "1h, 30m"],
+  [60 * 60 * 24 * 1.5, "1d, 12h"],
   // edge cases
-  expect(prettyTime(0)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.0001)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.001)).toMatchInlineSnapshot('"0s"');
-  expect(prettyTime(0.01)).toMatchInlineSnapshot('"0.01s"');
-});
+  [0, "0s"],
+  [0.0001, "0s"],
+  [0.001, "0s"],
+  [0.01, "0.01s"],
+];
+
+// generate one test per pair
+for (const [input, expected] of Cases) {
+  test(`prettyTime(${input}) → ${expected}`, () => {
+    expect(prettyTime(input)).toBe(expected);
+  });
+}

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

@@ -4,7 +4,7 @@ import {
   EDGE_CASE_FILENAMES,
   URL_SPECIAL_CHAR_FILENAMES,
 } from "../../__tests__/mocks";
-import { isUrl, updateQueryParams } from "../urls";
+import { appendQueryParams, isUrl, updateQueryParams } from "../urls";
 
 describe("isUrl", () => {
   it("should return true for a valid URL", () => {
@@ -63,3 +63,167 @@ describe("URL parameter handling with edge case filenames", () => {
     });
   });
 });
+
+describe("appendQueryParams", () => {
+  it("should append params to a simple path", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: new URLSearchParams("file=test.py"),
+    });
+    expect(result).toBe("/about?file=test.py");
+  });
+
+  it("should append params to a hash-based path", () => {
+    const result = appendQueryParams({
+      href: "#/about",
+      queryParams: new URLSearchParams("file=test.py"),
+    });
+    expect(result).toBe("/?file=test.py#/about");
+  });
+
+  it("should accept query string instead of URLSearchParams", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: "file=test.py&mode=edit",
+    });
+    expect(result).toBe("/about?file=test.py&mode=edit");
+  });
+
+  it("should filter params by keys when provided", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: "file=test.py&mode=edit&extra=data",
+      keys: ["file", "mode"],
+    });
+    expect(result).toBe("/about?file=test.py&mode=edit");
+  });
+
+  it("should filter params by keys in the middle of the query string", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: "file=test.py&mode=edit&extra=data",
+      keys: ["file", "extra"],
+    });
+    expect(result).toBe("/about?file=test.py&extra=data");
+  });
+
+  it("should preserve existing query params", () => {
+    const result = appendQueryParams({
+      href: "/about?existing=1",
+      queryParams: "file=test.py",
+    });
+    expect(result).toBe("/about?existing=1&file=test.py");
+  });
+
+  it("should overwrite existing params with same key", () => {
+    const result = appendQueryParams({
+      href: "/about?file=old.py",
+      queryParams: "file=new.py",
+    });
+    expect(result).toBe("/about?file=new.py");
+  });
+
+  it("should preserve hash fragment and put params before it", () => {
+    const result = appendQueryParams({
+      href: "/about#section",
+      queryParams: "file=test.py",
+    });
+    expect(result).toBe("/about?file=test.py#section");
+  });
+
+  it("should handle hash-based path with existing params and hash", () => {
+    const result = appendQueryParams({
+      href: "#/about?existing=1",
+      queryParams: "file=test.py",
+    });
+    expect(result).toBe("#/about?existing=1&file=test.py");
+  });
+
+  it("should handle hash-based path", () => {
+    const result = appendQueryParams({
+      href: "#/about",
+      queryParams: "file=test.py",
+    });
+    expect(result).toBe("/?file=test.py#/about");
+  });
+
+  it("should not modify external links", () => {
+    const httpUrl = "http://example.com/page";
+    const httpsUrl = "https://example.com/page";
+
+    expect(
+      appendQueryParams({
+        href: httpUrl,
+        queryParams: "file=test.py",
+      }),
+    ).toBe(httpUrl);
+
+    expect(
+      appendQueryParams({
+        href: httpsUrl,
+        queryParams: "file=test.py",
+      }),
+    ).toBe(httpsUrl);
+  });
+
+  it("should return original href when no params to append", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: new URLSearchParams(),
+    });
+    expect(result).toBe("/about");
+  });
+
+  it("should handle complex scenarios with all features", () => {
+    const result = appendQueryParams({
+      href: "#/dashboard?view=grid#top",
+      queryParams: "file=notebook.py&view=list&mode=edit",
+      keys: ["file", "mode"],
+    });
+    // view=grid should remain, file and mode should be added (view is not in keys)
+    expect(result).toBe("#/dashboard?view=grid&file=notebook.py&mode=edit#top");
+  });
+
+  it("should handle empty path", () => {
+    const result = appendQueryParams({
+      href: "",
+      queryParams: "file=test.py",
+    });
+    expect(result).toBe("?file=test.py");
+  });
+
+  it("should handle just a hash", () => {
+    const result = appendQueryParams({
+      href: "#",
+      queryParams: "file=test.py",
+    });
+    expect(result).toBe("/?file=test.py#");
+  });
+
+  it("should handle unicode filenames in params", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: new URLSearchParams([
+        ["file", "文件.py"],
+        ["name", "テスト"],
+      ]),
+    });
+    expect(result).toContain("/about?");
+    // Verify the params are properly encoded
+    const url = new URL(result, "http://example.com");
+    expect(url.searchParams.get("file")).toBe("文件.py");
+    expect(url.searchParams.get("name")).toBe("テスト");
+  });
+
+  it("should handle special characters in param values", () => {
+    const result = appendQueryParams({
+      href: "/about",
+      queryParams: new URLSearchParams([
+        ["path", "folder/file with spaces.py"],
+      ]),
+    });
+    expect(result).toContain("/about?");
+    const url = new URL(result, "http://example.com");
+    expect(url.searchParams.get("path")).toBe("folder/file with spaces.py");
+  });
+});

package/src/utils/urls.ts

@@ -31,3 +31,123 @@ const urlRegex = /^(https?:\/\/\S+)$/;
 export function isUrl(value: unknown): boolean {
   return typeof value === "string" && urlRegex.test(value);
 }
+
+/**
+ * Appends query parameters to an href, handling various edge cases.
+ *
+ * @param href - The href to append params to (e.g., "/path", "#/hash", "/path?existing=1", "/path#hash")
+ * @param queryParams - URLSearchParams or query string to append
+ * @param keys - Optional array of keys to filter which params to append
+ * @returns The href with appended query parameters
+ *
+ * @example
+ * appendQueryParams({ href: "/about", queryParams: new URLSearchParams("file=test.py") })
+ * // Returns: "/about?file=test.py"
+ *
+ * @example
+ * appendQueryParams({ href: "#/about", queryParams: "file=test.py&mode=edit", keys: ["file"] })
+ * // Returns: "/?file=test.py#/about"
+ *
+ * @example
+ * appendQueryParams({ href: "#/about?existing=1", queryParams: "file=test.py" })
+ * // Returns: "#/about?existing=1&file=test.py"
+ *
+ * @example
+ * appendQueryParams({ href: "/about?existing=1", queryParams: "file=test.py" })
+ * // Returns: "/about?existing=1&file=test.py"
+ *
+ * @example
+ * appendQueryParams({ href: "/about#section", queryParams: "file=test.py" })
+ * // Returns: "/about?file=test.py#section"
+ */
+export function appendQueryParams({
+  href,
+  queryParams,
+  keys,
+}: {
+  href: string;
+  queryParams: URLSearchParams | string;
+  keys?: string[];
+}): string {
+  // Convert queryParams to URLSearchParams if it's a string
+  const params =
+    typeof queryParams === "string"
+      ? new URLSearchParams(queryParams)
+      : queryParams;
+
+  // If no params to append, return as is
+  if (params.size === 0) {
+    return href;
+  }
+
+  // Don't modify external links (full URLs)
+  if (href.startsWith("http://") || href.startsWith("https://")) {
+    return href;
+  }
+
+  // Special handling for hash-based routing
+  const isHashBased = href.startsWith("#");
+  const hasQueryInHash = isHashBased && href.includes("?");
+
+  if (isHashBased && !hasQueryInHash) {
+    // For hash-based hrefs without query params (e.g., #/about),
+    // put query params on the main path before the hash: /?params#/route
+    // This is common in SPAs where query params on the main URL need to be preserved
+    const paramsToAdd = keys
+      ? [...params.entries()].filter(([key]) => keys.includes(key))
+      : [...params.entries()];
+
+    const queryParams = new URLSearchParams();
+    for (const [key, value] of paramsToAdd) {
+      queryParams.set(key, value);
+    }
+
+    const queryString = queryParams.toString();
+    if (!queryString) {
+      return href;
+    }
+
+    return `/?${queryString}${href}`;
+  }
+
+  // Parse the href to extract parts for all other cases
+  let basePath = href;
+  let hash = "";
+  let existingParams = new URLSearchParams();
+
+  // For hash-based routing with query params, look for a second # to find actual hash fragment
+  const hashSearchStart = isHashBased ? 1 : 0;
+  const hashIndex = href.indexOf("#", hashSearchStart);
+
+  if (hashIndex !== -1) {
+    hash = href.slice(hashIndex);
+    basePath = href.slice(0, hashIndex);
+  }
+
+  // Extract existing query params
+  const queryIndex = basePath.indexOf("?");
+  if (queryIndex !== -1) {
+    existingParams = new URLSearchParams(basePath.slice(queryIndex + 1));
+    basePath = basePath.slice(0, queryIndex);
+  }
+
+  // Merge params (new params overwrite existing ones with same key)
+  const mergedParams = new URLSearchParams(existingParams);
+
+  // Filter params by keys if provided
+  const paramsToAdd = keys
+    ? [...params.entries()].filter(([key]) => keys.includes(key))
+    : [...params.entries()];
+
+  for (const [key, value] of paramsToAdd) {
+    mergedParams.set(key, value);
+  }
+
+  // Build the final URL
+  const queryString = mergedParams.toString();
+  if (!queryString) {
+    return href;
+  }
+
+  return `${basePath}?${queryString}${hash}`;
+}

package/src/utils/vitals.ts

@@ -7,7 +7,7 @@ export async function reportVitals() {
   }
 
   const { onLCP, onINP, onCLS } = await import("web-vitals");
-  Logger.log("Reporting vitals");
+  Logger.debug("Reporting vitals");
   const logMetric = (metric: {
     name: string;
     value: number;

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

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