@marimo-team/islands 0.15.5 → 0.16.1

package/src/core/i18n/__tests__/locale-provider.test.tsx

@@ -0,0 +1,176 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { cleanup, render } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { userConfigAtom } from "@/core/config/config";
+import { parseUserConfig } from "@/core/config/config-schema";
+import { LocaleProvider } from "../locale-provider";
+
+// Mock navigator.language with a getter
+let mockNavigatorLanguage: string | undefined;
+
+Object.defineProperty(window, "navigator", {
+  value: {
+    get language() {
+      return mockNavigatorLanguage;
+    },
+  },
+  writable: true,
+});
+
+// Mock react-aria-components I18nProvider
+vi.mock("react-aria-components", () => ({
+  I18nProvider: ({
+    children,
+    locale,
+  }: {
+    children: React.ReactNode;
+    locale: string;
+  }) => (
+    <div data-testid="i18n-provider" data-locale={locale}>
+      {children}
+    </div>
+  ),
+}));
+
+describe("LocaleProvider", () => {
+  beforeEach(() => {
+    // Reset the mock before each test
+    mockNavigatorLanguage = undefined;
+  });
+
+  afterEach(() => {
+    cleanup();
+    // Clear all mocks after each test
+    mockNavigatorLanguage = undefined;
+    vi.clearAllMocks();
+  });
+
+  it("should render I18nProvider without locale when locale is null", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: null } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(undefined);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider without locale when locale is undefined", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: undefined } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(undefined);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider with locale when locale is provided", () => {
+    const store = createStore();
+    const testLocale = "es-ES";
+    const config = parseUserConfig({ display: { locale: testLocale } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(testLocale);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider with different locale values", () => {
+    const testCases = ["en-US", "fr-FR", "de-DE", "ja-JP"];
+
+    testCases.forEach((locale) => {
+      const store = createStore();
+      const config = parseUserConfig({ display: { locale } });
+      store.set(userConfigAtom, config);
+
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <LocaleProvider>
+            <div>Test content for {locale}</div>
+          </LocaleProvider>
+        </Provider>,
+      );
+
+      const i18nProvider = getByTestId("i18n-provider");
+      expect(i18nProvider.dataset.locale).toBe(locale);
+      expect(i18nProvider).toHaveTextContent(`Test content for ${locale}`);
+
+      // Clean up after each iteration
+      cleanup();
+    });
+  });
+
+  it("should render children correctly", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: "en-US" } });
+    store.set(userConfigAtom, config);
+
+    const { getByText, getByRole } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>
+            <h1>Test Heading</h1>
+            <p>Test paragraph</p>
+            <button type="button">Test Button</button>
+          </div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    expect(getByText("Test Heading")).toBeInTheDocument();
+    expect(getByText("Test paragraph")).toBeInTheDocument();
+    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
+  });
+
+  it("should auto-detect locale when no locale is set in config", () => {
+    mockNavigatorLanguage = "de-DE";
+
+    const store = createStore();
+    const config = parseUserConfig({});
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    // When no locale is specified in config, it should use navigator.language
+    expect(i18nProvider.dataset.locale).toBe("de-DE");
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+});

package/src/core/i18n/locale-provider.tsx

@@ -0,0 +1,35 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import type { ReactNode } from "react";
+import { I18nProvider } from "react-aria-components";
+import { localeAtom } from "@/core/config/config";
+
+interface LocaleProviderProps {
+  children: ReactNode;
+}
+
+export const LocaleProvider = ({ children }: LocaleProviderProps) => {
+  const locale = useAtomValue(localeAtom);
+
+  return <I18nProvider locale={safeLocale(locale)}>{children}</I18nProvider>;
+};
+
+function safeLocale(locale: string | null | undefined) {
+  if (!locale) {
+    return navigator.language;
+  }
+  if (isValidLocale(locale)) {
+    return locale;
+  }
+  return navigator.language;
+}
+
+function isValidLocale(locale: string) {
+  try {
+    new Intl.NumberFormat(locale);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/core/i18n/with-locale.tsx

@@ -0,0 +1,12 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useLocale } from "react-aria";
+
+export const WithLocale = ({
+  children,
+}: {
+  children: (locale: string) => React.ReactNode;
+}) => {
+  const { locale } = useLocale();
+  return children(locale);
+};

package/src/core/islands/components/web-components.tsx

@@ -7,6 +7,7 @@ import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
 import { UI_ELEMENT_REGISTRY } from "@/core/dom/uiregistry";
+import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { invariant } from "@/utils/invariant";
 import type { CellId } from "../../cells/ids";
@@ -80,16 +81,18 @@ export class MarimoIslandElement extends HTMLElement {
     this.root?.render(
       <ErrorBoundary>
         <Provider store={store}>
-          <TooltipProvider>
-            <MarimoOutputWrapper
-              cellId={this.cellId}
-              codeCallback={codeCallback}
-              alwaysShowRun={alwaysShowRun}
-            >
-              {initialHtml}
-            </MarimoOutputWrapper>
-            {editor}
-          </TooltipProvider>
+          <LocaleProvider>
+            <TooltipProvider>
+              <MarimoOutputWrapper
+                cellId={this.cellId}
+                codeCallback={codeCallback}
+                alwaysShowRun={alwaysShowRun}
+              >
+                {initialHtml}
+              </MarimoOutputWrapper>
+              {editor}
+            </TooltipProvider>
+          </LocaleProvider>
         </Provider>
       </ErrorBoundary>,
     );

package/src/core/islands/main.ts

@@ -103,7 +103,7 @@ export async function initialize() {
   // Consume messages from the kernel
   IslandsPyodideBridge.INSTANCE.consumeMessages((message) => {
     const msg = jsonParseWithSpecialChar(message);
-    switch (msg.op) {
+    switch (msg.data.op) {
       case "banner":
       case "missing-package-alert":
       case "installing-package-alert":
@@ -185,7 +185,7 @@ export async function initialize() {
       case "reconnected":
         return;
       default:
-        logNever(msg);
+        logNever(msg.data);
     }
   });
 

package/src/core/kernel/RuntimeState.ts

@@ -29,8 +29,11 @@ export class RuntimeState {
    * ObjectIds of UIElements whose values need to be updated in the kernel
    */
   private _sendComponentValues: RunRequests["sendComponentValues"] | undefined;
+  private uiElementRegistry: UIElementRegistry;
 
-  constructor(private uiElementRegistry: UIElementRegistry) {}
+  constructor(uiElementRegistry: UIElementRegistry) {
+    this.uiElementRegistry = uiElementRegistry;
+  }
 
   private get sendComponentValues(): RunRequests["sendComponentValues"] {
     if (!this._sendComponentValues) {

package/src/core/kernel/messages.ts

@@ -40,21 +40,17 @@ export type SQLTableListPreview =
   OperationMessageData<"sql-table-list-preview">;
 export type SecretKeysResult = OperationMessageData<"secret-keys-result">;
 export type StartupLogs = OperationMessageData<"startup-logs">;
-export type MessageOperation = schemas["KnownUnions"]["operation"];
+export type CellMessage = OperationMessageData<"cell-op">;
+export type Capabilities = OperationMessageData<"kernel-ready">["capabilities"];
 
-export type OperationMessageType = MessageOperation["op"];
-export type OperationMessage = {
-  [Type in OperationMessageType]: {
-    op: Type;
-    data: Omit<Extract<MessageOperation, { op: Type }>, "op">;
-  };
-}[OperationMessageType];
+export type MessageOperationUnion = schemas["KnownUnions"]["operation"];
 
-export type CellMessage = OperationMessageData<"cell-op">;
+export type OperationMessageType = MessageOperationUnion["op"];
+export interface OperationMessage {
+  data: MessageOperationUnion;
+}
 
 export type OperationMessageData<T extends OperationMessageType> = Omit<
-  Extract<MessageOperation, { op: T }>,
+  Extract<MessageOperationUnion, { op: T }>,
   "op"
 >;
-
-export type Capabilities = OperationMessageData<"kernel-ready">["capabilities"];

package/src/core/network/DeferredRequestRegistry.ts

@@ -18,17 +18,29 @@ export const RequestId = {
  */
 export class DeferredRequestRegistry<REQ, RES> {
   public requests = new Map<RequestId, Deferred<RES>>();
+  public operation: string;
+  private makeRequest: (id: RequestId, req: REQ) => Promise<void>;
+  private opts: {
+    /**
+     * Resolve existing requests with an empty response.
+     */
+    resolveExistingRequests?: () => RES;
+  };
 
   constructor(
-    public operation: string,
-    private makeRequest: (id: RequestId, req: REQ) => Promise<void>,
-    private opts: {
+    operation: string,
+    makeRequest: (id: RequestId, req: REQ) => Promise<void>,
+    opts: {
       /**
        * Resolve existing requests with an empty response.
        */
       resolveExistingRequests?: () => RES;
     } = {},
-  ) {}
+  ) {
+    this.operation = operation;
+    this.makeRequest = makeRequest;
+    this.opts = opts;
+  }
 
   async request(opts: REQ): Promise<RES> {
     if (this.opts.resolveExistingRequests) {

package/src/core/runtime/runtime.ts

@@ -10,11 +10,12 @@ import type { RuntimeConfig } from "./types";
 
 export class RuntimeManager {
   private initialHealthyCheck = new Deferred<void>();
+  private config: RuntimeConfig;
+  private lazy: boolean;
 
-  constructor(
-    private config: RuntimeConfig,
-    private lazy = false,
-  ) {
+  constructor(config: RuntimeConfig, lazy = false) {
+    this.config = config;
+    this.lazy = lazy;
     // Validate the URL on construction
     try {
       new URL(this.config.url);

package/src/core/saving/__tests__/filename.test.ts

@@ -0,0 +1,37 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { EDGE_CASE_FILENAMES } from "../../../__tests__/mocks";
+import { Paths } from "../../../utils/paths";
+
+describe("filename handling logic", () => {
+  it.each(EDGE_CASE_FILENAMES)(
+    "should extract basename correctly for document title: %s",
+    (filename) => {
+      const basename = Paths.basename(filename);
+      expect(basename).toBe(filename); // Since no path separator
+    },
+  );
+
+  it("should handle full paths with unicode filenames", () => {
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const fullPath = `/path/to/${filename}`;
+
+      const basename = Paths.basename(fullPath);
+      expect(basename).toBe(filename);
+    });
+  });
+
+  it("should handle document title setting with unicode", () => {
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const originalTitle = document.title;
+
+      // In case this does any conversions, we want to simulate reading/writing the title
+      document.title = filename;
+      expect(document.title).toBe(filename);
+
+      // Restore
+      document.title = originalTitle;
+    });
+  });
+});

package/src/core/static/__tests__/download-html.test.ts

@@ -1,5 +1,8 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+import { EDGE_CASE_FILENAMES } from "../../../__tests__/mocks";
+import { Filenames } from "../../../utils/filenames";
+import { Paths } from "../../../utils/paths";
 import { visibleForTesting } from "../download-html";
 
 const { updateAssetUrl } = visibleForTesting;
@@ -39,3 +42,42 @@ describe("updateAssetUrl", () => {
     expect(updateAssetUrl(existingUrl, assetBaseUrl)).toBe(existingUrl);
   });
 });
+
+describe("filename handling for downloads", () => {
+  it.each(EDGE_CASE_FILENAMES)(
+    "should handle edge case filenames in download operations: %s",
+    (filename) => {
+      // Test that basename extraction works correctly for downloads
+      const basename = Paths.basename(filename);
+      expect(basename).toBe(filename);
+
+      // Test filename conversion for HTML downloads
+      const htmlFilename = Filenames.toHTML(filename);
+      expect(htmlFilename).toMatch(/\.html$/);
+      expect(htmlFilename).toContain(Filenames.withoutExtension(filename));
+
+      // Ensure unicode and spaces are preserved in basename
+      const withoutExt = Filenames.withoutExtension(filename);
+      expect(withoutExt).not.toBe("");
+      expect(typeof withoutExt).toBe("string");
+    },
+  );
+
+  it("should handle blob download filename generation", () => {
+    // Mock URL.createObjectURL for blob testing
+    const mockCreateObjectURL = vi.fn().mockReturnValue("blob:mock-url");
+    global.URL.createObjectURL = mockCreateObjectURL;
+
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const htmlFilename = Filenames.toHTML(filename);
+
+      // Verify blob can be created with unicode filenames
+      expect(() => new Blob(["test"], { type: "text/html" })).not.toThrow();
+      expect(htmlFilename).toMatch(/\.html$/);
+
+      // Verify filename maintains unicode characters
+      const baseName = Filenames.withoutExtension(filename);
+      expect(htmlFilename).toContain(baseName);
+    });
+  });
+});

package/src/core/wasm/bridge.ts

@@ -576,7 +576,11 @@ export class PyodideWebsocket implements IReconnectingWebSocket {
   messageSubscriptions = new Set<(event: MessageEvent) => void>();
   errorSubscriptions = new Set<(event: Event) => void>();
 
-  constructor(private bridge: Pick<PyodideBridge, "consumeMessages">) {}
+  private bridge: Pick<PyodideBridge, "consumeMessages">;
+
+  constructor(bridge: Pick<PyodideBridge, "consumeMessages">) {
+    this.bridge = bridge;
+  }
 
   private consumeMessages() {
     this.bridge.consumeMessages((message) => {

package/src/core/wasm/store.ts

@@ -87,7 +87,10 @@ const emptyFileStore: FileStore = {
 };
 
 export class CompositeFileStore implements FileStore {
-  constructor(private stores: FileStore[]) {}
+  private stores: FileStore[];
+  constructor(stores: FileStore[]) {
+    this.stores = stores;
+  }
 
   insert(index: number, store: FileStore) {
     this.stores.splice(index, 0, store);

package/src/core/wasm/worker/message-buffer.ts

@@ -7,8 +7,9 @@
 export class MessageBuffer<T> {
   private buffer: T[];
   private started = false;
-
-  constructor(private onMessage: (data: T) => void) {
+  private onMessage: (data: T) => void;
+  constructor(onMessage: (data: T) => void) {
+    this.onMessage = onMessage;
     this.buffer = [];
   }
 

package/src/core/websocket/types.ts

@@ -2,22 +2,28 @@
 
 import type ReconnectingWebSocket from "partysocket/ws";
 
-export enum WebSocketState {
-  CONNECTING = "CONNECTING",
-  OPEN = "CONNECTED",
-  CLOSING = "CLOSING",
-  CLOSED = "CLOSED",
-}
-
-export enum WebSocketClosedReason {
-  KERNEL_DISCONNECTED = "KERNEL_DISCONNECTED",
-  ALREADY_RUNNING = "ALREADY_RUNNING",
-  MALFORMED_QUERY = "MALFORMED_QUERY",
-}
+export const WebSocketState = {
+  CONNECTING: "CONNECTING",
+  OPEN: "OPEN",
+  CLOSING: "CLOSING",
+  CLOSED: "CLOSED",
+} as const;
+
+export type WebSocketState =
+  (typeof WebSocketState)[keyof typeof WebSocketState];
+
+export const WebSocketClosedReason = {
+  KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
+  ALREADY_RUNNING: "ALREADY_RUNNING",
+  MALFORMED_QUERY: "MALFORMED_QUERY",
+} as const;
+
+export type WebSocketClosedReason =
+  (typeof WebSocketClosedReason)[keyof typeof WebSocketClosedReason];
 
 export type ConnectionStatus =
   | {
-      state: WebSocketState.CLOSED;
+      state: typeof WebSocketState.CLOSED;
       code: WebSocketClosedReason;
       /**
        * Human-readable reason for closing the connection.
@@ -31,9 +37,9 @@ export type ConnectionStatus =
     }
   | {
       state:
-        | WebSocketState.CONNECTING
-        | WebSocketState.OPEN
-        | WebSocketState.CLOSING;
+        | typeof WebSocketState.CONNECTING
+        | typeof WebSocketState.OPEN
+        | typeof WebSocketState.CLOSING;
     };
 
 type PublicInterface<T> = {

package/src/core/websocket/useMarimoWebSocket.tsx

@@ -86,7 +86,7 @@ export function useMarimoWebSocket(opts: {
 
   const handleMessage = (e: MessageEvent<JsonString<OperationMessage>>) => {
     const msg = jsonParseWithSpecialChar(e.data);
-    switch (msg.op) {
+    switch (msg.data.op) {
       case "reload":
         reloadSafe();
         return;
@@ -267,7 +267,7 @@ export function useMarimoWebSocket(opts: {
         setCellIds({ cellIds: msg.data.cell_ids as CellId[] });
         return;
       default:
-        logNever(msg);
+        logNever(msg.data);
     }
   };
 

package/src/css/app/Cell.css

@@ -23,6 +23,17 @@
     outline: none;
   }
 
+  &:has(.mo-ai-generated-cell)::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 10px;
+    pointer-events: none;
+    opacity: 0.5;
+    box-shadow: 0px 0px 10px 0px var(--cyan-9);
+    z-index: 1;
+  }
+
   &:focus-within {
     z-index: 20;
   }