@jant/core 0.6.16 → 0.7.0

package/src/client/__tests__/image-processor.test.ts

@@ -1,5 +1,13 @@
-import { describe, expect, it } from "vitest";
-import { planImageProcessing } from "../image-processor.js";
+// @vitest-environment happy-dom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  blurhashDimensions,
+  planImageProcessing,
+  resolveEncodedMimeType,
+  type ImageWorkerRequest,
+  type ImageWorkerResponse,
+} from "../image-plan.js";
 
 const OPTS = { maxShortSide: 1920, maxLongSide: 8192 };
 
@@ -62,3 +70,317 @@ describe("planImageProcessing", () => {
     expect(planImageProcessing(1080, 8193, OPTS).passthrough).toBe(true);
   });
 });
+
+describe("resolveEncodedMimeType", () => {
+  it("keeps the requested format when the encoder produced it", () => {
+    expect(resolveEncodedMimeType("image/webp", "image/webp")).toBe(
+      "image/webp",
+    );
+    expect(resolveEncodedMimeType("image/png", "image/png")).toBe("image/png");
+  });
+
+  it("switches to JPEG when the encoder silently fell back to PNG", () => {
+    expect(resolveEncodedMimeType("image/webp", "image/png")).toBe(
+      "image/jpeg",
+    );
+  });
+
+  it("switches to JPEG when the encoder produced nothing recognizable", () => {
+    expect(resolveEncodedMimeType("image/webp", "")).toBe("image/jpeg");
+  });
+});
+
+describe("blurhashDimensions", () => {
+  it("scales the longest side down to 32px", () => {
+    expect(blurhashDimensions(4032, 3024)).toEqual({ width: 32, height: 24 });
+    expect(blurhashDimensions(3024, 4032)).toEqual({ width: 24, height: 32 });
+  });
+
+  it("never scales up and never drops below one pixel", () => {
+    expect(blurhashDimensions(10, 10)).toEqual({ width: 10, height: 10 });
+    expect(blurhashDimensions(100, 6000)).toEqual({ width: 1, height: 32 });
+  });
+});
+
+// ── The facade: worker first, page canvas as fallback ────────────────────
+
+const { FakeWorker, createdWorkers, workerScript, workerSupport } = vi.hoisted(
+  () => {
+    type WorkerEvent = { data?: unknown; message?: string };
+    type Listener = (event: WorkerEvent) => void;
+
+    class FakeWorker {
+      posted: unknown[] = [];
+      terminated = false;
+      private listeners = new Map<string, Listener[]>();
+
+      addEventListener(type: string, listener: Listener) {
+        const list = this.listeners.get(type) ?? [];
+        list.push(listener);
+        this.listeners.set(type, list);
+      }
+
+      postMessage(request: unknown) {
+        this.posted.push(request);
+        const reply = workerScript.reply;
+        if (!reply) return;
+        queueMicrotask(() => this.emit("message", { data: reply(request) }));
+      }
+
+      terminate() {
+        this.terminated = true;
+      }
+
+      emit(type: string, event: WorkerEvent) {
+        for (const listener of this.listeners.get(type) ?? []) listener(event);
+      }
+    }
+
+    const workerScript: { reply: ((request: unknown) => unknown) | null } = {
+      reply: null,
+    };
+
+    return {
+      FakeWorker,
+      createdWorkers: [] as FakeWorker[],
+      workerScript,
+      workerSupport: { supported: true },
+    };
+  },
+);
+
+vi.mock("../image-worker-client.js", () => ({
+  supportsImageWorker: () => workerSupport.supported,
+  createImageWorker: () => {
+    const worker = new FakeWorker();
+    createdWorkers.push(worker);
+    return worker;
+  },
+}));
+
+const originalCreateObjectURL = URL.createObjectURL;
+const originalRevokeObjectURL = URL.revokeObjectURL;
+const originalImage = globalThis.Image;
+const originalGetContext = HTMLCanvasElement.prototype.getContext;
+const originalToBlob = HTMLCanvasElement.prototype.toBlob;
+
+const imagesDecodedOnPage = vi.fn();
+
+/** Stand in for `<img>` + `<canvas>` — the in-page path, WebP-capable. */
+function installPageCanvasMocks() {
+  URL.createObjectURL = vi.fn(() => "blob:image-source");
+  URL.revokeObjectURL = vi.fn();
+
+  class MockImage {
+    width = 4032;
+    height = 3024;
+    onload: null | (() => void) = null;
+    onerror: null | (() => void) = null;
+    private _src = "";
+
+    constructor() {
+      imagesDecodedOnPage();
+    }
+
+    set src(value: string) {
+      this._src = value;
+      queueMicrotask(() => this.onload?.());
+    }
+
+    get src() {
+      return this._src;
+    }
+  }
+  globalThis.Image = MockImage as unknown as typeof Image;
+
+  HTMLCanvasElement.prototype.getContext = vi.fn(function (
+    this: HTMLCanvasElement,
+  ) {
+    return {
+      drawImage: vi.fn(),
+      getImageData: (_x: number, _y: number, w: number, h: number) => ({
+        data: new Uint8ClampedArray(w * h * 4),
+      }),
+    };
+  }) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+  HTMLCanvasElement.prototype.toBlob = vi.fn(function (
+    callback: BlobCallback,
+    type?: string,
+  ) {
+    callback(new Blob(["encoded"], { type: type ?? "image/png" }));
+  }) as typeof HTMLCanvasElement.prototype.toBlob;
+}
+
+function restorePageCanvasMocks() {
+  URL.createObjectURL = originalCreateObjectURL;
+  URL.revokeObjectURL = originalRevokeObjectURL;
+  globalThis.Image = originalImage;
+  HTMLCanvasElement.prototype.getContext = originalGetContext;
+  HTMLCanvasElement.prototype.toBlob = originalToBlob;
+}
+
+function asRequest(posted: unknown): ImageWorkerRequest {
+  return posted as ImageWorkerRequest;
+}
+
+function workerResult(request: unknown): ImageWorkerResponse {
+  return {
+    id: asRequest(request).id,
+    ok: true,
+    blob: new Blob(["from-worker"], { type: "image/webp" }),
+    width: 2560,
+    height: 1920,
+    processed: true,
+    blurhash: "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+  };
+}
+
+async function loadProcessor() {
+  const { ImageProcessor } = await import("../image-processor.js");
+  return ImageProcessor;
+}
+
+describe("ImageProcessor", () => {
+  const photo = new File(["raw"], "photo.jpg", { type: "image/jpeg" });
+
+  beforeEach(() => {
+    vi.resetModules();
+    createdWorkers.length = 0;
+    workerScript.reply = workerResult;
+    workerSupport.supported = true;
+    imagesDecodedOnPage.mockClear();
+    installPageCanvasMocks();
+  });
+
+  afterEach(() => {
+    restorePageCanvasMocks();
+  });
+
+  it("processes in the worker and never decodes on the page", async () => {
+    const processor = await loadProcessor();
+
+    const result = await processor.processToFile(photo);
+
+    expect(createdWorkers).toHaveLength(1);
+    const request = asRequest(createdWorkers[0].posted[0]);
+    expect(request.file).toBe(photo);
+    expect(request.options).toMatchObject({
+      maxShortSide: 1920,
+      maxLongSide: 8192,
+      mimeType: "image/webp",
+    });
+    expect(result.file.name).toBe("photo.webp");
+    expect(result.file.type).toBe("image/webp");
+    expect(result).toMatchObject({
+      width: 2560,
+      height: 1920,
+      blurhash: "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+    });
+    expect(imagesDecodedOnPage).not.toHaveBeenCalled();
+  });
+
+  it("keeps one worker warm across images", async () => {
+    const processor = await loadProcessor();
+
+    await processor.processToFile(photo);
+    await processor.processToFile(photo);
+
+    expect(createdWorkers).toHaveLength(1);
+    expect(createdWorkers[0].posted).toHaveLength(2);
+  });
+
+  it("hands the original through when the worker says it is too large", async () => {
+    workerScript.reply = (request) => ({
+      id: asRequest(request).id,
+      ok: true,
+      blob: photo,
+      width: 1080,
+      height: 12000,
+      processed: false,
+      blurhash: "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+    });
+    const processor = await loadProcessor();
+
+    const result = await processor.processToFile(photo);
+
+    expect(result.file).toBe(photo);
+    expect(result).toMatchObject({ width: 1080, height: 12000 });
+  });
+
+  it("falls back to the page canvas for a file the worker cannot decode", async () => {
+    workerScript.reply = (request) => ({
+      id: asRequest(request).id,
+      ok: false,
+      error: "The source image could not be decoded.",
+    });
+    const processor = await loadProcessor();
+
+    const result = await processor.processToFile(photo);
+
+    expect(imagesDecodedOnPage).toHaveBeenCalledTimes(1);
+    expect(result.file.name).toBe("photo.webp");
+    expect(result.file.type).toBe("image/webp");
+    expect(result).toMatchObject({ width: 2560, height: 1920 });
+    expect(typeof result.blurhash).toBe("string");
+    // The worker is still fine — one bad file does not cost it.
+    expect(createdWorkers[0].terminated).toBe(false);
+  });
+
+  it("fails in-flight images over to the page when the worker dies, then starts a new one", async () => {
+    workerScript.reply = null;
+    const processor = await loadProcessor();
+
+    const inFlight = processor.processToFile(photo);
+    await Promise.resolve();
+    createdWorkers[0].emit("error", { message: "worker crashed" });
+    const result = await inFlight;
+
+    expect(result.file.type).toBe("image/webp");
+    expect(imagesDecodedOnPage).toHaveBeenCalledTimes(1);
+    expect(createdWorkers[0].terminated).toBe(true);
+
+    workerScript.reply = workerResult;
+    await processor.processToFile(photo);
+    expect(createdWorkers).toHaveLength(2);
+  });
+
+  it("uses the page canvas where the browser has no OffscreenCanvas", async () => {
+    workerSupport.supported = false;
+    const processor = await loadProcessor();
+
+    const result = await processor.processToFile(photo);
+
+    expect(createdWorkers).toHaveLength(0);
+    expect(imagesDecodedOnPage).toHaveBeenCalledTimes(1);
+    expect(result.file.type).toBe("image/webp");
+  });
+
+  it("probes the encoder once and encodes each image once on the page", async () => {
+    workerSupport.supported = false;
+    const processor = await loadProcessor();
+
+    await processor.processToFile(photo);
+    await processor.processToFile(photo);
+
+    // One 1×1 probe, then one real encode per image — never PNG-then-JPEG.
+    expect(HTMLCanvasElement.prototype.toBlob).toHaveBeenCalledTimes(3);
+  });
+
+  it("encodes JPEG on the page when the browser cannot encode WebP", async () => {
+    workerSupport.supported = false;
+    HTMLCanvasElement.prototype.toBlob = vi.fn(function (
+      callback: BlobCallback,
+      type?: string,
+    ) {
+      // Safari: asked for WebP, silently hands back PNG.
+      const produced = type === "image/webp" ? "image/png" : type;
+      callback(new Blob(["encoded"], { type: produced ?? "image/png" }));
+    }) as typeof HTMLCanvasElement.prototype.toBlob;
+    const processor = await loadProcessor();
+
+    const result = await processor.processToFile(photo);
+
+    expect(result.file.type).toBe("image/jpeg");
+    expect(result.file.name).toBe("photo.jpg");
+  });
+});

package/src/client/__tests__/lazy-entries.test.ts

@@ -0,0 +1,92 @@
+// @vitest-environment happy-dom
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const loaded = {
+  compose: vi.fn(),
+  settings: vi.fn(),
+  manage: vi.fn(),
+};
+
+/**
+ * One turn of the event loop — enough for the observer to see a mutation, and
+ * all a negative assertion needs. A load that is expected to happen is waited
+ * for with `vi.waitFor` instead: a dynamic import can take more than a tick
+ * when the whole suite is running.
+ */
+async function settle(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+/**
+ * A fresh module per test: the loaders remember what they have loaded, and a
+ * mock's factory runs once per module registry, so both are re-registered.
+ */
+async function freshLazyEntries() {
+  vi.resetModules();
+  vi.doMock("../../client-compose.js", () => {
+    loaded.compose();
+    return {};
+  });
+  vi.doMock("../../client-settings.js", () => {
+    loaded.settings();
+    return {};
+  });
+  vi.doMock("../../client-manage.js", () => {
+    loaded.manage();
+    return {};
+  });
+  return import("../lazy-entries.js");
+}
+
+describe("lazy entries", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    loaded.compose.mockClear();
+    loaded.settings.mockClear();
+    loaded.manage.mockClear();
+  });
+
+  it("loads an entry once however often it is asked for", async () => {
+    const { ensureCompose } = await freshLazyEntries();
+
+    await Promise.all([ensureCompose(), ensureCompose()]);
+    await ensureCompose();
+
+    expect(loaded.compose).toHaveBeenCalledTimes(1);
+  });
+
+  it("loads the entries whose markup is on the page, and only those", async () => {
+    document.body.innerHTML = `
+      <jant-compose-dialog></jant-compose-dialog>
+      <jant-settings-general></jant-settings-general>`;
+
+    const { loadEntriesForPage } = await freshLazyEntries();
+    loadEntriesForPage();
+
+    await vi.waitFor(() => expect(loaded.settings).toHaveBeenCalledTimes(1));
+    expect(loaded.manage).not.toHaveBeenCalled();
+  });
+
+  it("loads the composer at once on the compose page", async () => {
+    document.body.innerHTML = `<section data-page="compose"></section>`;
+
+    const { loadEntriesForPage } = await freshLazyEntries();
+    loadEntriesForPage();
+
+    await vi.waitFor(() => expect(loaded.compose).toHaveBeenCalledTimes(1));
+  });
+
+  it("keeps watching for markup that arrives after load", async () => {
+    const { loadEntriesForPage } = await freshLazyEntries();
+    loadEntriesForPage();
+    await settle();
+    expect(loaded.manage).not.toHaveBeenCalled();
+
+    const hook = document.createElement("div");
+    hook.setAttribute("data-collection-page-actions", "");
+    document.body.appendChild(hook);
+
+    await vi.waitFor(() => expect(loaded.manage).toHaveBeenCalledTimes(1));
+  });
+});

package/src/client/__tests__/media-scroll-hint.test.ts

@@ -0,0 +1,155 @@
+// @vitest-environment happy-dom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { __testOnly } from "../media-scroll-hint.js";
+
+class TestResizeObserver {
+  static instances: TestResizeObserver[] = [];
+  readonly observed = new Set<globalThis.Element>();
+
+  constructor(private readonly callback: () => void) {
+    TestResizeObserver.instances.push(this);
+  }
+
+  observe(target: globalThis.Element): void {
+    this.observed.add(target);
+  }
+
+  unobserve(target: globalThis.Element): void {
+    this.observed.delete(target);
+  }
+
+  disconnect(): void {
+    this.observed.clear();
+  }
+
+  trigger(): void {
+    this.callback();
+  }
+}
+
+/** happy-dom reports every layout box as zero, so stub the metrics we read. */
+function setMetrics(
+  el: HTMLElement,
+  metrics: { clientWidth: number; scrollWidth: number; scrollLeft?: number },
+): void {
+  Object.defineProperty(el, "clientWidth", {
+    value: metrics.clientWidth,
+    configurable: true,
+  });
+  Object.defineProperty(el, "scrollWidth", {
+    value: metrics.scrollWidth,
+    configurable: true,
+  });
+  Object.defineProperty(el, "scrollLeft", {
+    value: metrics.scrollLeft ?? 0,
+    configurable: true,
+    writable: true,
+  });
+}
+
+function renderGallery(): { wrap: HTMLElement; scroller: HTMLElement } {
+  document.body.innerHTML = `
+    <div class="media-gallery-scroll-wrap">
+      <div data-post-media tabindex="0">
+        <a class="media-visual-frame"></a>
+        <a class="media-visual-frame"></a>
+      </div>
+      <button class="media-gallery-nav media-gallery-nav-prev"></button>
+      <button class="media-gallery-nav media-gallery-nav-next"></button>
+    </div>
+  `;
+
+  const wrap = document.querySelector<HTMLElement>(
+    ".media-gallery-scroll-wrap",
+  );
+  const scroller = document.querySelector<HTMLElement>("[data-post-media]");
+  if (!wrap || !scroller) throw new Error("Expected a gallery in the document");
+  return { wrap, scroller };
+}
+
+/** Let happy-dom deliver its (microtask-scheduled) MutationObserver records. */
+async function flushMutations(): Promise<void> {
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe("media scroll hint", () => {
+  beforeEach(() => {
+    TestResizeObserver.instances = [];
+    vi.stubGlobal("ResizeObserver", TestResizeObserver);
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      (cb: globalThis.FrameRequestCallback) => {
+        cb(0);
+        return 0;
+      },
+    );
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("marks the end edge while the strip overflows", () => {
+    const { wrap, scroller } = renderGallery();
+    setMetrics(scroller, { clientWidth: 400, scrollWidth: 760 });
+
+    __testOnly.initWrap(wrap);
+
+    expect(wrap.classList.contains("can-scroll-end")).toBe(true);
+    expect(wrap.classList.contains("can-scroll-start")).toBe(false);
+  });
+
+  it("clears the end edge once the strip grows wide enough to fit", () => {
+    const { wrap, scroller } = renderGallery();
+    setMetrics(scroller, { clientWidth: 400, scrollWidth: 760 });
+
+    __testOnly.initWrap(wrap);
+    expect(wrap.classList.contains("can-scroll-end")).toBe(true);
+
+    // A wider window (or a late-settling layout). Nothing overflows any more,
+    // so no scroll event can fire — only the resize observer can correct it.
+    setMetrics(scroller, { clientWidth: 760, scrollWidth: 760 });
+    TestResizeObserver.instances[0]?.trigger();
+
+    expect(wrap.classList.contains("can-scroll-end")).toBe(false);
+  });
+
+  it("observes the strip and each of its items", () => {
+    const { wrap, scroller } = renderGallery();
+    setMetrics(scroller, { clientWidth: 760, scrollWidth: 760 });
+
+    __testOnly.initWrap(wrap);
+
+    const observer = TestResizeObserver.instances[0];
+    expect(observer?.observed.has(scroller)).toBe(true);
+    for (const item of scroller.children) {
+      expect(observer?.observed.has(item)).toBe(true);
+    }
+  });
+
+  it("re-observes items swapped in after a morph", async () => {
+    const { wrap, scroller } = renderGallery();
+    setMetrics(scroller, { clientWidth: 760, scrollWidth: 760 });
+
+    __testOnly.initWrap(wrap);
+    expect(wrap.classList.contains("can-scroll-end")).toBe(false);
+
+    scroller.innerHTML = `
+      <a class="media-visual-frame"></a>
+      <a class="media-visual-frame"></a>
+      <a class="media-visual-frame"></a>
+    `;
+    setMetrics(scroller, { clientWidth: 760, scrollWidth: 1140 });
+    await flushMutations();
+
+    const observer = TestResizeObserver.instances[0];
+    for (const item of scroller.children) {
+      expect(observer?.observed.has(item)).toBe(true);
+    }
+    expect(wrap.classList.contains("can-scroll-end")).toBe(true);
+  });
+});

package/src/client/__tests__/runtime-paths.test.ts

@@ -0,0 +1,84 @@
+// @vitest-environment happy-dom
+
+/**
+ * `publicPath` vs `viewPath` — the client-side half of the language-view rule.
+ *
+ * The distinction is the same one the server draws with `toPublicPath` and
+ * `toViewPath`: one address site-wide, or one address per language view.
+ */
+
+import { afterEach, describe, expect, it } from "vitest";
+import { navPath, publicPath, viewPath } from "../runtime-paths.js";
+
+afterEach(() => {
+  delete document.documentElement.dataset.sitePathPrefix;
+  delete document.documentElement.dataset.viewBasePath;
+});
+
+describe("viewPath", () => {
+  it("carries the language prefix of the view being rendered", () => {
+    document.documentElement.dataset.viewBasePath = "/en";
+    expect(viewPath("/collections")).toBe("/en/collections");
+    expect(viewPath("/recipes")).toBe("/en/recipes");
+  });
+
+  it("leaves publicPath alone, so site-wide addresses stay site-wide", () => {
+    document.documentElement.dataset.viewBasePath = "/en";
+    expect(publicPath("/collections")).toBe("/collections");
+  });
+
+  it("carries the site path prefix under it", () => {
+    document.documentElement.dataset.sitePathPrefix = "/blog";
+    document.documentElement.dataset.viewBasePath = "/blog/en";
+    expect(viewPath("/collections")).toBe("/blog/en/collections");
+    expect(publicPath("/collections")).toBe("/blog/collections");
+  });
+
+  it("falls back to the site path prefix when no view base is published", () => {
+    // Pages rendered before the attribute existed, and any surface with no
+    // language view: both must keep working as plain public paths.
+    document.documentElement.dataset.sitePathPrefix = "/blog";
+    expect(viewPath("/collections")).toBe("/blog/collections");
+  });
+
+  it("is a no-op at the root of a single-language site", () => {
+    document.documentElement.dataset.viewBasePath = "";
+    expect(viewPath("/collections")).toBe("/collections");
+  });
+
+  it("prefixes a root-namespace target the caller vouched for", () => {
+    // A collection page lives at /{slug}, alongside post permalinks. Only the
+    // call site can tell them apart, so viewPath takes its word for it.
+    document.documentElement.dataset.viewBasePath = "/en";
+    expect(viewPath("/recipes")).toBe("/en/recipes");
+  });
+});
+
+describe("navPath", () => {
+  afterEach(() => {
+    delete document.documentElement.dataset.viewBasePath;
+  });
+
+  it("keeps per-language surfaces in the reader's view", () => {
+    document.documentElement.dataset.viewBasePath = "/en";
+    expect(navPath("/archive?media=any")).toBe("/en/archive?media=any");
+    expect(navPath("/search?q=hello")).toBe("/en/search?q=hello");
+    expect(navPath("/collections")).toBe("/en/collections");
+    expect(navPath("/collections/a+b")).toBe("/en/collections/a+b");
+  });
+
+  it("leaves site-wide addresses alone, where a prefix would 404", () => {
+    document.documentElement.dataset.viewBasePath = "/en";
+    expect(navPath("/settings")).toBe("/settings");
+    expect(navPath("/settings/language")).toBe("/settings/language");
+    expect(navPath("/collections/recipes/edit")).toBe(
+      "/collections/recipes/edit",
+    );
+  });
+
+  it("leaves the root namespace alone, since a post has one address", () => {
+    document.documentElement.dataset.viewBasePath = "/en";
+    expect(navPath("/my-post")).toBe("/my-post");
+    expect(navPath("/preview/my-post?edit=1")).toBe("/preview/my-post?edit=1");
+  });
+});