@praxisjs/decorators 0.4.1 → 0.4.3

package/src/__tests__/lazy.test.ts

@@ -0,0 +1,220 @@
+// @vitest-environment jsdom
+import { beforeEach, afterEach, describe, it, expect, vi } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { Lazy } from "../component/lazy";
+
+type AnyConstructor = new (...args: unknown[]) => StatefulComponent;
+
+function applyLazy<T extends AnyConstructor>(cls: T, placeholder?: number): T {
+  return placeholder !== undefined
+    ? Lazy(placeholder)(cls, {} as ClassDecoratorContext)
+    : Lazy()(cls, {} as ClassDecoratorContext);
+}
+
+class BaseComp extends StatefulComponent {
+  render() {
+    return document.createTextNode("content");
+  }
+}
+
+describe("Lazy decorator", () => {
+  let intersectionCallback: IntersectionObserverCallback = () => {};
+  let mockObserve: ReturnType<typeof vi.fn>;
+  let mockDisconnect: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    intersectionCallback = () => {};
+    mockObserve = vi.fn();
+    mockDisconnect = vi.fn();
+
+    globalThis.IntersectionObserver = class {
+      constructor(cb: IntersectionObserverCallback) {
+        intersectionCallback = cb;
+      }
+      observe = mockObserve;
+      disconnect = mockDisconnect;
+    } as unknown as typeof IntersectionObserver;
+  });
+
+  afterEach(() => {
+    // @ts-expect-error – removing test stub
+    delete globalThis.IntersectionObserver;
+  });
+
+  it("returns null from render before visibility", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor);
+    const instance = new Wrapped();
+    expect(instance.render()).toBeNull();
+  });
+
+  it("sets _lazyVisible to true when IntersectionObserver is not supported", () => {
+    // Remove IntersectionObserver to simulate unsupported environment
+    // @ts-expect-error – removing test stub
+    delete globalThis.IntersectionObserver;
+
+    const Wrapped = applyLazy(BaseComp as AnyConstructor);
+    const instance = new Wrapped();
+
+    // Simulate anchor with parent element
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    // Without IntersectionObserver, _lazyVisible should be set to true
+    const lazyVisible = (instance as unknown as { _lazyVisible: () => boolean })._lazyVisible;
+    expect(lazyVisible()).toBe(true);
+    document.body.removeChild(parent);
+  });
+
+  it("sets minHeight placeholder on mount", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, 300);
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(parent.style.minHeight).toBe("300px");
+    document.body.removeChild(parent);
+  });
+
+  it("sets _lazyVisible and clears minHeight when intersecting", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, 200);
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(instance.render()).toBeNull();
+
+    intersectionCallback(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      null as unknown as IntersectionObserver,
+    );
+
+    expect(parent.style.minHeight).toBe("");
+    const lazyVisible = (instance as unknown as { _lazyVisible: () => boolean })._lazyVisible;
+    expect(lazyVisible()).toBe(true);
+    expect(mockDisconnect).toHaveBeenCalled();
+    document.body.removeChild(parent);
+  });
+
+  it("does nothing when _anchor has no parent", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor);
+    const instance = new Wrapped();
+
+    const anchor = document.createComment("end");
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    // Should not throw even though anchor has no parent
+    expect(() => instance.onMount?.()).not.toThrow();
+  });
+
+  it("disconnects observer on unmount", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor);
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    instance.onUnmount?.();
+    expect(mockDisconnect).toHaveBeenCalled();
+    document.body.removeChild(parent);
+  });
+
+  it("onMount does nothing when _anchor is undefined", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor);
+    const instance = new Wrapped();
+    // _anchor is undefined by default
+    expect(() => instance.onMount?.()).not.toThrow();
+  });
+
+  it("render() returns original content after becoming visible", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, 200);
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(instance.render()).toBeNull(); // not yet visible
+
+    intersectionCallback(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      null as unknown as IntersectionObserver,
+    );
+
+    // Now visible: render() must delegate to the original render()
+    const result = instance.render();
+    expect(result).not.toBeNull();
+    document.body.removeChild(parent);
+  });
+
+  it("observer stays active and minHeight is preserved when entry is not intersecting", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, 200);
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+
+    // Fire callback with isIntersecting=false — should be a no-op
+    intersectionCallback(
+      [{ isIntersecting: false } as IntersectionObserverEntry],
+      null as unknown as IntersectionObserver,
+    );
+
+    expect(instance.render()).toBeNull();
+    expect(mockDisconnect).not.toHaveBeenCalled();
+    expect(parent.style.minHeight).toBe("200px");
+    document.body.removeChild(parent);
+  });
+
+  it("does not re-apply minHeight on remount when already visible", () => {
+    const Wrapped = applyLazy(BaseComp as AnyConstructor, 300);
+    const instance = new Wrapped();
+
+    const parent = document.createElement("div");
+    document.body.appendChild(parent);
+    const anchor = document.createComment("end");
+    parent.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    // First mount — become visible
+    instance.onMount?.();
+    intersectionCallback(
+      [{ isIntersecting: true } as IntersectionObserverEntry],
+      null as unknown as IntersectionObserver,
+    );
+    instance.onUnmount?.();
+
+    // Second mount — _lazyVisible is already true
+    instance.onMount?.();
+
+    // minHeight must NOT be re-applied because _lazyVisible() is true
+    expect(parent.style.minHeight).toBe("");
+    document.body.removeChild(parent);
+  });
+});

package/src/__tests__/memo.test.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from "vitest";
+
+import { signal } from "@praxisjs/core/internal";
+import { Memo } from "../functions/memo";
+
+function mockCtx(name: string) {
+  return { name, kind: "method" as const } as ClassMethodDecoratorContext;
+}
+
+describe("Memo", () => {
+  it("returns the computed value", () => {
+    const fn = vi.fn((x: unknown) => (x as number) * 2);
+    const wrapped = Memo()(fn, mockCtx("double"));
+    const obj = {};
+    expect(wrapped.call(obj, 5)).toBe(10);
+  });
+
+  it("caches result for same args — calls original only once", () => {
+    const fn = vi.fn((x: unknown) => (x as number) + 1);
+    const wrapped = Memo()(fn, mockCtx("inc"));
+    const obj = {};
+    wrapped.call(obj, 3);
+    wrapped.call(obj, 3);
+    wrapped.call(obj, 3);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("computes separately for different args", () => {
+    const fn = vi.fn((x: unknown) => (x as number) * 10);
+    const wrapped = Memo()(fn, mockCtx("mul"));
+    const obj = {};
+    expect(wrapped.call(obj, 2)).toBe(20);
+    expect(wrapped.call(obj, 3)).toBe(30);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("is per-instance — different instances have separate caches", () => {
+    const fn = vi.fn(() => Math.random());
+    const wrapped = Memo()(fn, mockCtx("rand"));
+    const a = {};
+    const b = {};
+    const v1 = wrapped.call(a);
+    const v2 = wrapped.call(b);
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(v1).not.toBe(v2); // different random values per instance
+  });
+
+  it("serializes no-args calls with __no_args__ key", () => {
+    const fn = vi.fn(() => 42);
+    const wrapped = Memo()(fn, mockCtx("noop"));
+    const obj = {};
+    wrapped.call(obj);
+    wrapped.call(obj);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("serializes object args via JSON.stringify", () => {
+    const fn = vi.fn((o: unknown) => JSON.stringify(o));
+    const wrapped = Memo()(fn, mockCtx("obj"));
+    const obj = {};
+    wrapped.call(obj, { a: 1 });
+    wrapped.call(obj, { a: 1 }); // same key
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("re-evaluates when a reactive signal read inside the method changes", () => {
+    const s = signal(1);
+    const fn = vi.fn(() => s() * 10);
+    const wrapped = Memo()(fn, mockCtx("reactive"));
+    const obj = {};
+
+    expect(wrapped.call(obj)).toBe(10);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    s.set(5);
+    // The computed tracks s() — next read triggers recomputation
+    expect(wrapped.call(obj)).toBe(50);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("serializes symbol args via toString()", () => {
+    const fn = vi.fn((s: unknown) => String(s));
+    const wrapped = Memo()(fn, mockCtx("sym"));
+    const obj = {};
+    const sym = Symbol("test");
+    wrapped.call(obj, sym);
+    wrapped.call(obj, sym);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});

package/src/__tests__/properties-browser.test.ts

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+
+import { Persisted } from "../properties/persisted";
+import { Slot, initSlots, getSlot } from "../properties/slot";
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+// Helper: creates a ClassFieldDecoratorContext mock
+function fieldCtx(name: string) {
+  const initializers: Array<(this: unknown) => void> = [];
+  return {
+    ctx: {
+      name,
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) {
+        initializers.push(fn);
+      },
+    } as ClassFieldDecoratorContext,
+    run(instance: unknown) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+}
+
+// Minimal concrete component
+class TestComponent extends StatefulComponent {
+  render() { return null; }
+}
+
+// ── Persisted ─────────────────────────────────────────────────────────────────
+
+describe("Persisted decorator", () => {
+  it("reads back the initial value when nothing is stored", () => {
+    const { ctx, run } = fieldCtx("theme");
+    Persisted<string>("theme")(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).theme = "light";
+    run(instance);
+
+    expect((instance as unknown as Record<string, unknown>).theme).toBe("light");
+  });
+
+  it("persists set value to localStorage", () => {
+    const { ctx, run } = fieldCtx("lang");
+    Persisted<string>("lang")(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).lang = "en";
+    run(instance);
+
+    (instance as unknown as Record<string, unknown>).lang = "pt";
+    expect(localStorage.getItem("lang")).toBe('"pt"');
+    expect((instance as unknown as Record<string, unknown>).lang).toBe("pt");
+  });
+
+  it("reads existing localStorage value over the initialValue", () => {
+    localStorage.setItem("color", '"red"');
+    const { ctx, run } = fieldCtx("color");
+    Persisted<string>("color")(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).color = "blue";
+    run(instance);
+
+    expect((instance as unknown as Record<string, unknown>).color).toBe("red");
+  });
+
+  it("uses the property name as storage key when no explicit key given", () => {
+    const { ctx, run } = fieldCtx("count");
+    Persisted<number>()(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).count = 0;
+    run(instance);
+
+    (instance as unknown as Record<string, unknown>).count = 7;
+    expect(localStorage.getItem("count")).toBe("7");
+  });
+
+  it("returns separate values per instance", () => {
+    const { ctx: ctxA, run: runA } = fieldCtx("val");
+    Persisted<number>("valA")(undefined, ctxA);
+
+    const { ctx: ctxB, run: runB } = fieldCtx("val");
+    Persisted<number>("valB")(undefined, ctxB);
+
+    const a = new TestComponent();
+    (a as unknown as Record<string, unknown>).val = 1;
+    runA(a);
+
+    const b = new TestComponent();
+    (b as unknown as Record<string, unknown>).val = 2;
+    runB(b);
+
+    (a as unknown as Record<string, unknown>).val = 10;
+    (b as unknown as Record<string, unknown>).val = 20;
+
+    expect((a as unknown as Record<string, unknown>).val).toBe(10);
+    expect((b as unknown as Record<string, unknown>).val).toBe(20);
+  });
+});
+
+// ── Slot ──────────────────────────────────────────────────────────────────────
+
+describe("Slot decorator", () => {
+  it("returns an empty array before initSlots is called", () => {
+    const { ctx, run } = fieldCtx("default");
+    Slot()(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    expect((instance as unknown as Record<string, unknown>).default).toEqual([]);
+  });
+
+  it("returns default slot children after initSlots", () => {
+    const { ctx, run } = fieldCtx("default");
+    Slot()(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const el = document.createElement("span");
+    initSlots(instance, [el]);
+
+    expect((instance as unknown as Record<string, unknown>).default).toContain(el);
+  });
+
+  it("resolves named slot children", () => {
+    const { ctx, run } = fieldCtx("header");
+    Slot("header")(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const el = document.createElement("div");
+    el.setAttribute("slot", "header");
+    initSlots(instance, [el]);
+
+    const result = (instance as unknown as Record<string, unknown>).header as unknown[];
+    expect(result).toHaveLength(1);
+    expect(result[0]).toBe(el);
+  });
+
+  it("named slot element has slot attribute removed", () => {
+    const { ctx, run } = fieldCtx("footer");
+    Slot("footer")(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const el = document.createElement("div");
+    el.setAttribute("slot", "footer");
+    initSlots(instance, [el]);
+
+    expect(el.getAttribute("slot")).toBeNull();
+  });
+
+  it("warns when attempting to set a slot directly (dev mode)", () => {
+    const originalEnv = process.env.NODE_ENV;
+    process.env.NODE_ENV = "development";
+
+    const { ctx, run } = fieldCtx("content");
+    Slot("content")(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    (instance as unknown as Record<string, unknown>).content = ["something"];
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("[Slot]"));
+    warn.mockRestore();
+
+    process.env.NODE_ENV = originalEnv;
+  });
+
+  it("uses property name as slot name when no name given and prop is not 'default'", () => {
+    const { ctx, run } = fieldCtx("sidebar");
+    Slot()(undefined, ctx);
+
+    const instance = new TestComponent();
+    run(instance);
+
+    const el = document.createElement("aside");
+    el.setAttribute("slot", "sidebar");
+    initSlots(instance, [el]);
+
+    const result = (instance as unknown as Record<string, unknown>).sidebar as unknown[];
+    expect(result).toHaveLength(1);
+  });
+});
+
+// ── initSlots / getSlot helpers ───────────────────────────────────────────────
+
+describe("initSlots / getSlot", () => {
+  it("splits children into named and default slots", () => {
+    const named = document.createElement("div");
+    named.setAttribute("slot", "header");
+
+    const plain = document.createElement("p");
+
+    const instance = {};
+    initSlots(instance, [named, plain]);
+
+    expect(getSlot(instance, "header")).toContain(named);
+    expect(getSlot(instance, "default")).toContain(plain);
+  });
+
+  it("handles null children gracefully", () => {
+    const instance = {};
+    initSlots(instance, null);
+    expect(getSlot(instance, "default")).toEqual([]);
+  });
+
+  it("flattens nested arrays", () => {
+    const a = document.createElement("span");
+    const b = document.createElement("span");
+    const instance = {};
+    initSlots(instance, [[a, b]]);
+    expect(getSlot(instance, "default")).toHaveLength(2);
+  });
+
+  it("returns empty array for unknown slot", () => {
+    const instance = {};
+    initSlots(instance, []);
+    expect(getSlot(instance, "nonexistent")).toEqual([]);
+  });
+});