@marimo-team/islands 0.17.0 → 0.17.1

package/src/plugins/impl/plotly/parse-from-template.ts

@@ -25,7 +25,7 @@ export interface PlotlyTemplateParser {
 export function createParser(hovertemplate: string): PlotlyTemplateParser {
   // Regular expression to match the pattern key=%{selector}
   // Match any characters except = for the key (non-greedy to avoid capturing previous content)
-  const regex = /([^=<>]+)=%{([^}]+)}/g;
+  const regex = /([^<=>]+)=%{([^}]+)}/g;
 
   // Create an object to hold the key-selector pairs
   const keySelectorPairs: Record<string, string> = {};

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

@@ -8,6 +8,7 @@ import {
   arrayMove,
   arrayShallowEquals,
   arrayToggle,
+  getNextIndex,
 } from "../arrays";
 
 describe("arrays", () => {
@@ -128,3 +129,44 @@ describe("arrays", () => {
     });
   });
 });
+
+describe("getNextIndex", () => {
+  it("should return 0 if listLength is 0", () => {
+    expect(getNextIndex(null, 0, "up")).toBe(0);
+    expect(getNextIndex(null, 0, "down")).toBe(0);
+    expect(getNextIndex(0, 0, "up")).toBe(0);
+    expect(getNextIndex(0, 0, "down")).toBe(0);
+  });
+
+  it("should return 0 if currentIndex is null and direction is up", () => {
+    expect(getNextIndex(null, 10, "up")).toBe(0);
+  });
+
+  it("should return last index if currentIndex is null and direction is down", () => {
+    expect(getNextIndex(null, 10, "down")).toBe(9);
+  });
+
+  it("should return the next index in the list", () => {
+    expect(getNextIndex(0, 10, "up")).toBe(1);
+  });
+
+  it("should wrap around to the start of the list", () => {
+    expect(getNextIndex(9, 10, "up")).toBe(0);
+  });
+
+  it("should return next index in middle of list", () => {
+    expect(getNextIndex(5, 10, "up")).toBe(6);
+  });
+
+  it("should return previous index in middle of list", () => {
+    expect(getNextIndex(5, 10, "down")).toBe(4);
+  });
+
+  it("should wrap around to the end of the list", () => {
+    expect(getNextIndex(0, 10, "down")).toBe(9);
+  });
+
+  it("should return the previous index in the list", () => {
+    expect(getNextIndex(1, 10, "down")).toBe(0);
+  });
+});

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

@@ -0,0 +1,453 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+import type { IframeCapabilities } from "../capabilities";
+
+describe("capabilities", () => {
+  let Logger: { log: Mock; warn: Mock };
+  let getIframeCapabilities: () => IframeCapabilities;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    vi.resetModules();
+    vi.unstubAllGlobals();
+
+    // Mock Logger before importing capabilities
+    vi.doMock("../Logger", () => ({
+      Logger: {
+        log: vi.fn(),
+        warn: vi.fn(),
+      },
+    }));
+
+    // Re-import the modules after mocking
+    const loggerModule = await import("../Logger");
+    Logger = loggerModule.Logger as unknown as { log: Mock; warn: Mock };
+
+    const capabilitiesModule = await import("../capabilities");
+    getIframeCapabilities = capabilitiesModule.getIframeCapabilities;
+  });
+
+  describe("testStorage", () => {
+    it("should detect available localStorage", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(),
+        getItem: vi.fn((key) => (key === "__storage_test__" ? "test" : null)),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("localStorage", mockStorage);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasLocalStorage).toBe(true);
+      expect(mockStorage.setItem).toHaveBeenCalledWith(
+        "__storage_test__",
+        "test",
+      );
+      expect(mockStorage.getItem).toHaveBeenCalledWith("__storage_test__");
+      expect(mockStorage.removeItem).toHaveBeenCalledWith("__storage_test__");
+    });
+
+    it("should detect unavailable localStorage when getItem returns wrong value", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(),
+        getItem: vi.fn(() => "wrong-value"),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("localStorage", mockStorage);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasLocalStorage).toBe(false);
+    });
+
+    it("should detect available sessionStorage", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(),
+        getItem: vi.fn((key) => (key === "__storage_test__" ? "test" : null)),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("sessionStorage", mockStorage);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasSessionStorage).toBe(true);
+    });
+  });
+
+  describe("testDownloadCapability", () => {
+    it("should detect download capability when anchor supports download attribute", async () => {
+      const mockAnchor = {
+        download: "",
+      };
+
+      const mockDocument = {
+        ...document,
+        createElement: vi.fn(() => mockAnchor as unknown as HTMLElement),
+        fullscreenEnabled: true,
+      };
+
+      vi.stubGlobal("document", mockDocument);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasDownloads).toBe(true);
+      expect(mockDocument.createElement).toHaveBeenCalledWith("a");
+    });
+
+    it("should detect no download capability when anchor doesn't support download", async () => {
+      const mockAnchor = {};
+
+      const mockDocument = {
+        ...document,
+        createElement: vi.fn(() => mockAnchor as unknown as HTMLElement),
+        fullscreenEnabled: false,
+      };
+
+      vi.stubGlobal("document", mockDocument);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasDownloads).toBe(false);
+    });
+  });
+
+  describe("detectIframeCapabilities", () => {
+    it("should detect not embedded when window.parent === window", async () => {
+      // In test environment, window.parent === window by default
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.isEmbedded).toBe(false);
+      expect(Logger.log).not.toHaveBeenCalled();
+    });
+
+    it("should detect embedded when window.parent !== window", async () => {
+      const mockWindow = {
+        ...window,
+        parent: {} as Window,
+      };
+
+      vi.stubGlobal("window", mockWindow);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.isEmbedded).toBe(true);
+      expect(Logger.log).toHaveBeenCalledWith(
+        "[iframe] Running in embedded context",
+      );
+    });
+
+    it("should detect clipboard availability", async () => {
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        clipboard: {},
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasClipboard).toBe(true);
+    });
+
+    it("should detect no clipboard when undefined", async () => {
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        clipboard: undefined,
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasClipboard).toBe(false);
+    });
+
+    it("should detect fullscreen availability", async () => {
+      vi.stubGlobal("document", {
+        ...document,
+        fullscreenEnabled: true,
+        createElement: vi.fn(
+          () => ({ download: "" }) as unknown as HTMLElement,
+        ),
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasFullscreen).toBe(true);
+    });
+
+    it("should detect no fullscreen when disabled", async () => {
+      vi.stubGlobal("document", {
+        ...document,
+        fullscreenEnabled: false,
+        createElement: vi.fn(
+          () => ({ download: "" }) as unknown as HTMLElement,
+        ),
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasFullscreen).toBe(false);
+    });
+
+    it("should detect media devices availability", async () => {
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        mediaDevices: { getUserMedia: vi.fn() },
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasMediaDevices).toBe(true);
+    });
+
+    it("should detect no media devices when undefined", async () => {
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        mediaDevices: undefined,
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasMediaDevices).toBe(false);
+    });
+
+    it("should detect no media devices when getUserMedia is not a function", async () => {
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        mediaDevices: {},
+      });
+
+      const capabilities = getIframeCapabilities();
+      expect(capabilities.hasMediaDevices).toBe(false);
+    });
+
+    it("should log warnings for missing capabilities when embedded", async () => {
+      const mockWindow = {
+        ...window,
+        parent: {} as Window,
+      };
+
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(() => {
+          throw new Error("blocked");
+        }),
+        getItem: vi.fn(),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("window", mockWindow);
+      vi.stubGlobal("localStorage", mockStorage);
+      vi.stubGlobal("sessionStorage", mockStorage);
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        clipboard: undefined,
+        mediaDevices: undefined,
+      });
+      vi.stubGlobal("document", {
+        ...document,
+        fullscreenEnabled: false,
+        createElement: vi.fn(() => {
+          throw new Error("blocked");
+        }),
+      });
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.isEmbedded).toBe(true);
+      expect(Logger.warn).toHaveBeenCalledWith(
+        "[iframe] localStorage unavailable - using fallback storage",
+      );
+      expect(Logger.warn).toHaveBeenCalledWith(
+        "[iframe] Clipboard API unavailable",
+      );
+      expect(Logger.warn).toHaveBeenCalledWith(
+        "[iframe] Download capability may be restricted",
+      );
+      expect(Logger.warn).toHaveBeenCalledWith(
+        "[iframe] Fullscreen API unavailable",
+      );
+      expect(Logger.warn).toHaveBeenCalledWith(
+        "[iframe] Media devices API unavailable",
+      );
+    });
+
+    it("should not log warnings when not embedded even if capabilities missing", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(() => {
+          throw new Error("blocked");
+        }),
+        getItem: vi.fn(),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("localStorage", mockStorage);
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        clipboard: undefined,
+      });
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.isEmbedded).toBe(false);
+      expect(Logger.warn).not.toHaveBeenCalled();
+    });
+
+    it("should return all capabilities as expected structure", async () => {
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities).toMatchObject({
+        isEmbedded: expect.any(Boolean),
+        hasLocalStorage: expect.any(Boolean),
+        hasSessionStorage: expect.any(Boolean),
+        hasClipboard: expect.any(Boolean),
+        hasDownloads: expect.any(Boolean),
+        hasFullscreen: expect.any(Boolean),
+        hasMediaDevices: expect.any(Boolean),
+      });
+    });
+  });
+
+  describe("getIframeCapabilities caching", () => {
+    it("should cache capabilities after first call", async () => {
+      const mockDocument = {
+        ...document,
+        createElement: vi.fn(
+          () => ({ download: "" }) as unknown as HTMLElement,
+        ),
+        fullscreenEnabled: true,
+      };
+
+      vi.stubGlobal("document", mockDocument);
+
+      const capabilities1 = getIframeCapabilities();
+      const capabilities2 = getIframeCapabilities();
+
+      expect(capabilities1).toBe(capabilities2);
+      // Should only call detection functions once due to once wrapper
+      expect(mockDocument.createElement).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("complete capability detection scenarios", () => {
+    it("should handle fully sandboxed iframe", async () => {
+      const mockWindow = {
+        ...window,
+        parent: {} as Window,
+      };
+
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(() => {
+          throw new Error("blocked");
+        }),
+        getItem: vi.fn(),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("window", mockWindow);
+      vi.stubGlobal("localStorage", mockStorage);
+      vi.stubGlobal("sessionStorage", mockStorage);
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        clipboard: undefined,
+        mediaDevices: undefined,
+      });
+      vi.stubGlobal("document", {
+        ...document,
+        fullscreenEnabled: false,
+        createElement: vi.fn(() => {
+          throw new Error("blocked");
+        }),
+      });
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities).toMatchObject({
+        isEmbedded: true,
+        hasLocalStorage: false,
+        hasSessionStorage: false,
+        hasClipboard: false,
+        hasDownloads: false,
+        hasFullscreen: false,
+        hasMediaDevices: false,
+      });
+    });
+
+    it("should handle fully capable standalone context", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(),
+        getItem: vi.fn((key) => (key === "__storage_test__" ? "test" : null)),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("localStorage", mockStorage);
+      vi.stubGlobal("sessionStorage", mockStorage);
+      vi.stubGlobal("navigator", {
+        ...navigator,
+        clipboard: {},
+        mediaDevices: { getUserMedia: vi.fn() },
+      });
+      vi.stubGlobal("document", {
+        ...document,
+        fullscreenEnabled: true,
+        createElement: vi.fn(
+          () => ({ download: "" }) as unknown as HTMLElement,
+        ),
+      });
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities).toMatchObject({
+        isEmbedded: false,
+        hasLocalStorage: true,
+        hasSessionStorage: true,
+        hasClipboard: true,
+        hasDownloads: true,
+        hasFullscreen: true,
+        hasMediaDevices: true,
+      });
+    });
+  });
+
+  describe("edge cases", () => {
+    it("should handle localStorage that returns null on getItem", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(),
+        getItem: vi.fn(() => null),
+        removeItem: vi.fn(),
+      };
+
+      vi.stubGlobal("localStorage", mockStorage);
+
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasLocalStorage).toBe(false);
+    });
+
+    it("should handle document.createElement returning null", async () => {
+      const mockDocument = {
+        ...document,
+        createElement: vi.fn(() => null as unknown as HTMLElement),
+        fullscreenEnabled: false,
+      };
+
+      vi.stubGlobal("document", mockDocument);
+
+      const capabilities = getIframeCapabilities();
+
+      // Should handle gracefully
+      expect(capabilities.hasDownloads).toBe(false);
+    });
+
+    it("should handle storage.removeItem throwing", async () => {
+      const mockStorage: Partial<Storage> = {
+        setItem: vi.fn(),
+        getItem: vi.fn((key) => (key === "__storage_test__" ? "test" : null)),
+        removeItem: vi.fn(() => {
+          throw new Error("Cannot remove");
+        }),
+      };
+
+      vi.stubGlobal("localStorage", mockStorage);
+
+      // Should not throw, should handle error gracefully
+      const capabilities = getIframeCapabilities();
+
+      expect(capabilities.hasLocalStorage).toBe(false);
+    });
+  });
+});

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

@@ -20,24 +20,24 @@ describe("formatBytes", () => {
   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");
+    expect(formatBytes(10_240, 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");
+    expect(formatBytes(1_048_576, locale)).toBe("1 MB"); // 1024^2
+    expect(formatBytes(1_572_864, locale)).toBe("1.5 MB"); // 1.5 * 1024^2
+    expect(formatBytes(10_485_760, 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");
+    expect(formatBytes(1_073_741_824, locale)).toBe("1 GB"); // 1024^3
+    expect(formatBytes(1_610_612_736, locale)).toBe("1.5 GB"); // 1.5 * 1024^3
+    expect(formatBytes(10_737_418_240, 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
+    expect(formatBytes(1_099_511_627_776, locale)).toBe("1 TB"); // 1024^4
+    expect(formatBytes(1_649_267_441_664, locale)).toBe("1.5 TB"); // 1.5 * 1024^4
   });
 
   it("should respect locale parameter", () => {
@@ -55,9 +55,9 @@ describe("formatTime", () => {
   });
 
   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
+    expect(formatTime(0.000_000_1, locale)).toBe("0.1µs");
+    expect(formatTime(0.000_000_5, locale)).toBe("0.5µs");
+    expect(formatTime(0.000_000_999, locale)).toBe("1µs"); // rounded by prettyNumber
   });
 
   it("should format milliseconds", () => {
@@ -100,7 +100,7 @@ describe("formatTime", () => {
   });
 
   it("should handle edge cases", () => {
-    expect(formatTime(0.0009999, locale)).toBe("999.9µs");
+    expect(formatTime(0.000_999_9, 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__/local-storage.test.ts

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { TestUtils } from "@/__tests__/test-helpers";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { NotebookScopedLocalStorage } from "../localStorage";
+import { NotebookScopedLocalStorage } from "../storage/typed";
 
 describe("NotebookScopedLocalStorage", () => {
   const schema = z.object({

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

@@ -1,19 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { adaptForLocalStorage } from "../storage";
-
-// Mock localStorage
-const localStorageMock = {
-  getItem: vi.fn(),
-  setItem: vi.fn(),
-  removeItem: vi.fn(),
-};
-
-Object.defineProperty(global, "localStorage", {
-  value: localStorageMock,
-  writable: true,
-});
+
+// Mock the storage module to return our mock
+// This must be before the import of adaptForLocalStorage
+vi.mock("../storage/storage", () => ({
+  availableStorage: {
+    getItem: vi.fn(),
+    setItem: vi.fn(),
+    removeItem: vi.fn(),
+  },
+}));
 
 // Mock Logger
 vi.mock("../Logger", () => ({
@@ -22,6 +19,9 @@ vi.mock("../Logger", () => ({
   },
 }));
 
+import { adaptForLocalStorage } from "../storage/jotai";
+import { availableStorage } from "../storage/storage";
+
 interface TestValue {
   id: string;
   data: Map<string, number>;
@@ -70,18 +70,18 @@ describe("adaptForLocalStorage", () => {
           ["key2", 2],
         ],
       });
-      localStorageMock.getItem.mockReturnValue(serialized);
+      vi.mocked(availableStorage.getItem).mockReturnValue(serialized);
 
       const result = storage.getItem("test-key", initialValue);
 
-      expect(localStorageMock.getItem).toHaveBeenCalledWith("test-key");
+      expect(availableStorage.getItem).toHaveBeenCalledWith("test-key");
       expect(result.id).toBe("test");
       expect(result.data.get("key1")).toBe(1);
       expect(result.data.get("key2")).toBe(2);
     });
 
     it("should return initial value when localStorage returns null", () => {
-      localStorageMock.getItem.mockReturnValue(null);
+      vi.mocked(availableStorage.getItem).mockReturnValue(null);
 
       const result = storage.getItem("test-key", initialValue);
 
@@ -89,7 +89,7 @@ describe("adaptForLocalStorage", () => {
     });
 
     it("should return initial value when localStorage returns empty string", () => {
-      localStorageMock.getItem.mockReturnValue("");
+      vi.mocked(availableStorage.getItem).mockReturnValue("");
 
       const result = storage.getItem("test-key", initialValue);
 
@@ -97,7 +97,7 @@ describe("adaptForLocalStorage", () => {
     });
 
     it("should return initial value and log warning when JSON parsing fails", () => {
-      localStorageMock.getItem.mockReturnValue("invalid-json");
+      vi.mocked(availableStorage.getItem).mockReturnValue("invalid-json");
 
       const result = storage.getItem("test-key", initialValue);
 
@@ -107,7 +107,7 @@ describe("adaptForLocalStorage", () => {
 
     it("should return initial value and log warning when deserialization fails", () => {
       // This JSON is parseable but will cause the Map constructor to throw
-      localStorageMock.getItem.mockReturnValue(
+      vi.mocked(availableStorage.getItem).mockReturnValue(
         '{"id": "test", "data": "not-an-array"}',
       );
 
@@ -121,7 +121,7 @@ describe("adaptForLocalStorage", () => {
     it("should serialize and store value in localStorage", () => {
       storage.setItem("test-key", testValue);
 
-      expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      expect(availableStorage.setItem).toHaveBeenCalledWith(
         "test-key",
         JSON.stringify({
           id: "test",
@@ -138,7 +138,7 @@ describe("adaptForLocalStorage", () => {
     it("should call localStorage.removeItem with the correct key", () => {
       storage.removeItem("test-key");
 
-      expect(localStorageMock.removeItem).toHaveBeenCalledWith("test-key");
+      expect(availableStorage.removeItem).toHaveBeenCalledWith("test-key");
     });
   });
 });