@praxisjs/decorators 0.4.2 → 0.4.3

package/src/__tests__/memo.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from "vitest";
 
+import { signal } from "@praxisjs/core/internal";
 import { Memo } from "../functions/memo";
 
 function mockCtx(name: string) {
@@ -62,6 +63,21 @@ describe("Memo", () => {
     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"));

package/src/__tests__/properties.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 
 import { StatefulComponent } from "@praxisjs/core";
-import { signal } from "@praxisjs/core/internal";
+import { signal, computed } from "@praxisjs/core/internal";
 
 import { Watch } from "../functions/watch";
 import { When } from "../functions/when";
@@ -76,6 +76,36 @@ describe("State decorator", () => {
     (instance as unknown as Record<string, unknown>).value = "world";
     expect(instance._stateDirty).toBe(true);
   });
+
+  it("accepts null as initial value", () => {
+    const { ctx, run } = fieldCtx("nullable");
+    State()(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).nullable = null;
+    run(instance);
+
+    expect((instance as unknown as Record<string, unknown>).nullable).toBeNull();
+    (instance as unknown as Record<string, unknown>).nullable = "set";
+    expect((instance as unknown as Record<string, unknown>).nullable).toBe("set");
+  });
+
+  it("multiple State fields on same class are independent", () => {
+    const { ctx: ctxA, run: runA } = fieldCtx("a");
+    const { ctx: ctxB, run: runB } = fieldCtx("b");
+    State()(undefined, ctxA);
+    State()(undefined, ctxB);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).a = 1;
+    (instance as unknown as Record<string, unknown>).b = 2;
+    runA(instance);
+    runB(instance);
+
+    (instance as unknown as Record<string, unknown>).a = 10;
+    expect((instance as unknown as Record<string, unknown>).a).toBe(10);
+    expect((instance as unknown as Record<string, unknown>).b).toBe(2);
+  });
 });
 
 // ── Prop ──────────────────────────────────────────────────────────────────────
@@ -474,4 +504,222 @@ describe("When decorator", () => {
     expect(mountSpy).toHaveBeenCalled();
     expect(unmountSpy).toHaveBeenCalled();
   });
+
+  it("works when the watched prop is a computed value", () => {
+    const { ctx, run } = methodCtxFor("onComputed");
+    const handler = vi.fn();
+    When("doubled")(handler, ctx as unknown as ClassMethodDecoratorContext);
+
+    const s = signal(0);
+    const c = computed(() => s() * 2);
+    const instance = new TestComponent();
+    // Store the computed itself (not the result) so When can call isComputed on it
+    (instance as unknown as Record<string, unknown>).doubled = c;
+    run(instance);
+
+    (instance as unknown as { onMount: () => void }).onMount?.();
+
+    s.set(5); // doubled becomes 10 (truthy)
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ── Prop (additional branches) ────────────────────────────────────────────────
+
+describe("Prop decorator — additional branches", () => {
+  it("set() updates the default value (used when no _rawProps entry)", () => {
+    const { ctx, run } = fieldCtx("size");
+    Prop()(undefined, ctx);
+
+    const instance = new TestComponent();
+    (instance as unknown as Record<string, unknown>).size = "sm";
+    run(instance);
+
+    // Setter path: updates _defaults
+    (instance as unknown as Record<string, unknown>).size = "lg";
+    expect((instance as unknown as Record<string, unknown>).size).toBe("lg");
+  });
+});
+
+// ── History (additional branches) ────────────────────────────────────────────
+
+describe("History decorator — undo with no previous value", () => {
+  it("undo() does nothing when there is no previous value", () => {
+    const { ctx, run } = fieldCtx("pts");
+    History()(undefined, ctx);
+
+    const s = signal(0);
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "pts", {
+      get: () => s(),
+      set: (v: number) => { s.set(v); },
+      configurable: true,
+    });
+    run(instance);
+
+    const h = (instance as unknown as Record<string, unknown>).ptsHistory as {
+      undo: () => void;
+      canUndo: () => boolean;
+    };
+
+    // No changes yet — undo should be a no-op
+    expect(h.canUndo()).toBe(false);
+    expect(() => h.undo()).not.toThrow();
+    expect(s()).toBe(0);
+  });
+});
+
+// ── History decorator — multiple fields ───────────────────────────────────────
+
+describe("History decorator — multiple History properties on same instance", () => {
+  it("two History fields are independent", () => {
+    const { ctx: ctxX, run: runX } = fieldCtx("x");
+    const { ctx: ctxY, run: runY } = fieldCtx("y");
+    History()(undefined, ctxX);
+    History()(undefined, ctxY);
+
+    const sx = signal(0);
+    const sy = signal(0);
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "x", {
+      get: () => sx(), set: (v: number) => { sx.set(v); }, configurable: true,
+    });
+    Object.defineProperty(instance, "y", {
+      get: () => sy(), set: (v: number) => { sy.set(v); }, configurable: true,
+    });
+    runX(instance);
+    runY(instance);
+
+    // Access history first to trigger lazy creation and subscribe to signals
+    const hx = (instance as unknown as Record<string, unknown>).xHistory as {
+      canUndo: () => boolean; current: () => number;
+    };
+    const hy = (instance as unknown as Record<string, unknown>).yHistory as {
+      canUndo: () => boolean; current: () => number;
+    };
+
+    sx.set(5);
+    sy.set(10);
+
+    expect(hx.canUndo()).toBe(true);
+    expect(hy.canUndo()).toBe(true);
+    expect(hx.current()).toBe(5);
+    expect(hy.current()).toBe(10);
+  });
+
+  it("clear() after undo removes redo entries", () => {
+    const { ctx, run } = fieldCtx("val");
+    History()(undefined, ctx);
+
+    const s = signal(0);
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "val", {
+      get: () => s(), set: (v: number) => { s.set(v); }, configurable: true,
+    });
+    run(instance);
+
+    const h = (instance as unknown as Record<string, unknown>).valHistory as {
+      undo: () => void; clear: () => void;
+      canUndo: () => boolean; canRedo: () => boolean;
+    };
+
+    s.set(1);
+    s.set(2);
+    h.undo();
+    expect(h.canRedo()).toBe(true);
+    h.clear();
+    expect(h.canRedo()).toBe(false);
+    expect(h.canUndo()).toBe(false);
+  });
+});
+
+// ── Watch (cleanup + multi-prop non-watched) ──────────────────────────────────
+
+describe("Watch decorator — onUnmount cleanup", () => {
+  it("stops firing after onUnmount is called", () => {
+    const { ctx, run } = methodCtx("onCount");
+    const handler = vi.fn();
+    Watch("count" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
+
+    const s = signal(0);
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "count", { get: () => s(), configurable: true });
+    run(instance);
+    (instance as unknown as { onMount: () => void }).onMount?.();
+
+    s.set(1);
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    (instance as unknown as { onUnmount: () => void }).onUnmount?.();
+    s.set(2);
+
+    // After unmount the effect is stopped — handler must NOT fire again
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("preserves existing onUnmount when adding cleanup", () => {
+    const { ctx, run } = methodCtx("onVal");
+    const handler = vi.fn();
+    Watch("val" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
+
+    const s = signal(0);
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "val", { get: () => s(), configurable: true });
+    run(instance);
+
+    const unmountSpy = vi.fn();
+    const prevUnmount = instance.onUnmount?.bind(instance);
+    instance.onUnmount = function () { unmountSpy(); prevUnmount?.(); };
+
+    (instance as unknown as { onMount: () => void }).onMount?.();
+    instance.onUnmount?.();
+    expect(unmountSpy).toHaveBeenCalled();
+  });
+
+  it("multi-prop watch does NOT fire when an unwatched prop changes", () => {
+    const { ctx, run } = methodCtx("onAB");
+    const handler = vi.fn();
+    Watch("a" as never, "b" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
+
+    const sa = signal(0);
+    const sb = signal(0);
+    const sc = signal(0); // not watched
+
+    const instance = new TestComponent();
+    Object.defineProperty(instance, "a", { get: () => sa(), configurable: true });
+    Object.defineProperty(instance, "b", { get: () => sb(), configurable: true });
+    Object.defineProperty(instance, "c", { get: () => sc(), configurable: true });
+    run(instance);
+    (instance as unknown as { onMount: () => void }).onMount?.();
+
+    sc.set(99); // unwatched prop — handler must NOT fire
+    expect(handler).not.toHaveBeenCalled();
+
+    sa.set(1); // watched — handler fires
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ── Watch (additional branches — computed readValue) ──────────────────────────
+
+describe("Watch decorator — reading computed values", () => {
+  it("reads the value of a computed field (not the computed object)", () => {
+    const { ctx, run } = methodCtx("onDoubled");
+    const handler = vi.fn();
+    Watch("doubled" as never)(handler, ctx as unknown as ClassMethodDecoratorContext);
+
+    const s = signal(1);
+    const c = computed(() => s() * 2);
+    const instance = new TestComponent();
+    // Watch reads instance["doubled"] — if it's a computed, it calls it
+    Object.defineProperty(instance, "doubled", {
+      get: () => c,
+      configurable: true,
+    });
+    run(instance);
+    (instance as unknown as { onMount: () => void }).onMount?.();
+
+    s.set(5); // c() goes from 2 to 10 → triggers handler
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
 });

package/src/__tests__/slot.test.ts

@@ -0,0 +1,141 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+
+import { initSlots, getSlot, Slot } from "../properties/slot";
+import { StatefulComponent } from "@praxisjs/core";
+
+// ── initSlots / getSlot ──────────────────────────────────────────────────────
+
+describe("initSlots / getSlot", () => {
+  it("returns empty default slot when children is null", () => {
+    const instance = {};
+    initSlots(instance, null);
+    expect(getSlot(instance, "default")).toEqual([]);
+  });
+
+  it("returns empty array for unknown slot", () => {
+    const instance = {};
+    initSlots(instance, null);
+    expect(getSlot(instance, "unknown")).toEqual([]);
+  });
+
+  it("puts plain children into the default slot", () => {
+    const instance = {};
+    const child = document.createElement("span");
+    initSlots(instance, child);
+    expect(getSlot(instance, "default")).toEqual([child]);
+  });
+
+  it("flattens array children into the default slot", () => {
+    const instance = {};
+    const a = document.createElement("p");
+    const b = document.createElement("div");
+    initSlots(instance, [a, b]);
+    expect(getSlot(instance, "default")).toEqual([a, b]);
+  });
+
+  it("routes element with slot attribute to named slot", () => {
+    const instance = {};
+    const el = document.createElement("div");
+    el.setAttribute("slot", "header");
+    initSlots(instance, el);
+    expect(getSlot(instance, "header")).toEqual([el]);
+    expect(getSlot(instance, "default")).toEqual([]);
+    // slot attribute should be removed
+    expect(el.hasAttribute("slot")).toBe(false);
+  });
+
+  it("handles mixed named and default children", () => {
+    const instance = {};
+    const named = document.createElement("aside");
+    named.setAttribute("slot", "sidebar");
+    const plain = document.createElement("main");
+    initSlots(instance, [named, plain]);
+    expect(getSlot(instance, "sidebar")).toEqual([named]);
+    expect(getSlot(instance, "default")).toEqual([plain]);
+  });
+
+  it("skips null children in array", () => {
+    const instance = {};
+    const el = document.createElement("span");
+    initSlots(instance, [null, el, undefined]);
+    expect(getSlot(instance, "default")).toEqual([el]);
+  });
+});
+
+// ── Slot decorator ───────────────────────────────────────────────────────────
+
+describe("Slot decorator", () => {
+  it("provides the default slot via field decorator", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      name: "default",
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext<StatefulComponent>;
+
+    Slot()(undefined, ctx);
+
+    const instance = new MyComp() as unknown as Record<string, unknown>;
+    initializers.forEach((fn) => { fn.call(instance); });
+
+    // No children initialized — slot should be empty
+    const children = document.createElement("p");
+    initSlots(instance as object, children);
+
+    expect(Array.isArray((instance as Record<string, unknown>).default)).toBe(true);
+  });
+
+  it("uses custom slot name when provided", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      name: "content",
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext<StatefulComponent>;
+
+    Slot("header")(undefined, ctx);
+
+    const instance = new MyComp() as unknown as Record<string, unknown>;
+    initializers.forEach((fn) => { fn.call(instance); });
+
+    const el = document.createElement("nav");
+    el.setAttribute("slot", "header");
+    initSlots(instance as object, el);
+
+    const slot = (instance as Record<string, unknown>).content as unknown[];
+    expect(slot).toHaveLength(1);
+    expect(slot[0]).toBe(el);
+  });
+
+  it("warns on direct assignment in non-production", () => {
+    class MyComp extends StatefulComponent {
+      render() { return null; }
+    }
+
+    const initializers: Array<(this: unknown) => void> = [];
+    const ctx = {
+      name: "default",
+      kind: "field" as const,
+      addInitializer(fn: (this: unknown) => void) { initializers.push(fn); },
+    } as ClassFieldDecoratorContext<StatefulComponent>;
+
+    Slot()(undefined, ctx);
+
+    const instance = new MyComp() as unknown as Record<string, unknown>;
+    initializers.forEach((fn) => { fn.call(instance); });
+
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    (instance as Record<string, unknown>).default = "bad";
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("[Slot]"));
+    warn.mockRestore();
+  });
+});

package/src/__tests__/virtual.test.ts

@@ -0,0 +1,241 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+
+import { StatefulComponent } from "@praxisjs/core";
+import { Virtual } from "../component/virtual";
+
+type AnyConstructor = new (...args: unknown[]) => StatefulComponent;
+
+function applyVirtual<T extends AnyConstructor>(cls: T, itemHeight: number, buffer?: number): T {
+  return buffer !== undefined
+    ? Virtual(itemHeight, buffer)(cls, {} as ClassDecoratorContext)
+    : Virtual(itemHeight)(cls, {} as ClassDecoratorContext);
+}
+
+// A base component with items and renderItem for virtual scrolling
+class ListComp extends StatefulComponent {
+  items: unknown[] = [];
+  renderItem(item: unknown, _index: number) {
+    const div = document.createElement("div");
+    (div as HTMLElement).textContent = String(item);
+    return div;
+  }
+  render() { return null; }
+}
+
+describe("Virtual decorator", () => {
+  it("warns and returns null when renderItem is not defined", () => {
+    class NoRenderItem extends StatefulComponent {
+      items = ["a", "b"];
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(NoRenderItem as AnyConstructor, 50);
+    const instance = new Wrapped() as unknown as { render: () => unknown };
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const result = instance.render();
+    expect(result).toBeNull();
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("[Virtual]"));
+    warn.mockRestore();
+  });
+
+  it("renders a container div with the total height", () => {
+    class MyList extends StatefulComponent {
+      items = ["a", "b", "c"];
+      renderItem(item: unknown) {
+        const el = document.createElement("div");
+        el.textContent = String(item);
+        return el;
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(MyList as AnyConstructor, 50);
+    const instance = new Wrapped();
+
+    const result = instance.render() as HTMLElement;
+    expect(result).toBeInstanceOf(HTMLElement);
+    expect(result.tagName.toLowerCase()).toBe("div");
+    // Total height = 3 items * 50px
+    expect(result.getAttribute("style")).toContain("150px");
+  });
+
+  it("renders visible items within the viewport", () => {
+    class MyList extends StatefulComponent {
+      items = [1, 2, 3, 4, 5];
+      renderItem(item: unknown) {
+        const el = document.createElement("div");
+        el.textContent = String(item);
+        return el;
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(MyList as AnyConstructor, 100, 0);
+    const instance = new Wrapped();
+
+    const outer = instance.render() as HTMLElement;
+    // Should render some content
+    expect(outer).not.toBeNull();
+    expect(outer.children.length).toBeGreaterThan(0);
+  });
+
+  it("handles empty items list without errors", () => {
+    class EmptyList extends StatefulComponent {
+      items: unknown[] = [];
+      renderItem(_item: unknown) {
+        return document.createElement("div");
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(EmptyList as AnyConstructor, 50);
+    const instance = new Wrapped();
+    expect(() => instance.render()).not.toThrow();
+  });
+
+  it("onMount sets container styles when _anchor has a parent", () => {
+    const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
+    const instance = new Wrapped();
+    (instance as unknown as { items: unknown[] }).items = ["a", "b"];
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const anchor = document.createComment("end");
+    container.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    expect(container.style.overflowY).toBe("auto");
+    expect(container.style.position).toBe("relative");
+    document.body.removeChild(container);
+  });
+
+  it("onMount does nothing when _anchor has no parent", () => {
+    const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
+    const instance = new Wrapped();
+
+    const anchor = document.createComment("end");
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    expect(() => instance.onMount?.()).not.toThrow();
+  });
+
+  it("onUnmount disconnects scroll listener and cleans up effects", () => {
+    const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
+    const instance = new Wrapped();
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const anchor = document.createComment("end");
+    container.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    // Should not throw
+    expect(() => instance.onUnmount?.()).not.toThrow();
+    document.body.removeChild(container);
+  });
+
+  it("re-renders visible items when scrollTop changes (covers while loop cleanup)", () => {
+    class ScrollList extends StatefulComponent {
+      items = Array.from({ length: 20 }, (_, i) => i);
+      renderItem(item: unknown) {
+        const el = document.createElement("div");
+        el.textContent = String(item);
+        return el;
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(ScrollList as AnyConstructor, 50, 0);
+    const instance = new Wrapped();
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const anchor = document.createComment("end");
+    container.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+    // First render - populates the itemsSlot
+    instance.render();
+
+    // Change scrollTop to trigger effect re-run (covers the while loop removing old nodes)
+    Object.defineProperty(container, "scrollTop", { configurable: true, value: 500 });
+    container.dispatchEvent(new Event("scroll"));
+
+    // Verify scrollTop was updated (effect should have re-run)
+    const scrollTop = (instance as unknown as { _scrollTop: () => number })._scrollTop;
+    expect(scrollTop()).toBe(500);
+
+    document.body.removeChild(container);
+  });
+
+  it("renderItem returning an array appends all child nodes", () => {
+    class ArrayItemList extends StatefulComponent {
+      items = ["item"];
+      renderItem(item: unknown) {
+        const a = document.createElement("span");
+        a.textContent = String(item) + "-1";
+        const b = document.createElement("span");
+        b.textContent = String(item) + "-2";
+        return [a, b];
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(ArrayItemList as AnyConstructor, 50, 0);
+    const instance = new Wrapped();
+    const outer = instance.render() as HTMLElement;
+    // outer structure: spacerTop, itemsSlot, spacerBottom
+    const itemsSlot = outer.children[1] as HTMLElement;
+    const wrapper = itemsSlot.children[0] as HTMLElement;
+    expect(wrapper.children.length).toBe(2);
+  });
+
+  it("renderItem returning null produces an empty wrapper div", () => {
+    class NullItemList extends StatefulComponent {
+      items = ["x"];
+      renderItem() { return null; }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(NullItemList as AnyConstructor, 50, 0);
+    const instance = new Wrapped();
+    expect(() => instance.render()).not.toThrow();
+    const outer = instance.render() as HTMLElement;
+    const itemsSlot = outer.children[1] as HTMLElement;
+    const wrapper = itemsSlot.children[0] as HTMLElement;
+    // rendered is null — no child nodes appended
+    expect(wrapper.children.length).toBe(0);
+  });
+
+  it("onUnmount without prior onMount does not throw", () => {
+    const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
+    const instance = new Wrapped();
+    // _container is undefined — onUnmount should be a no-op
+    expect(() => instance.onUnmount?.()).not.toThrow();
+  });
+
+  it("updates scrollTop on scroll event", () => {
+    const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
+    const instance = new Wrapped();
+    (instance as unknown as { items: unknown[] }).items = Array.from({ length: 20 }, (_, i) => i);
+
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const anchor = document.createComment("end");
+    container.appendChild(anchor);
+    (instance as unknown as { _anchor: Comment })._anchor = anchor;
+
+    instance.onMount?.();
+
+    Object.defineProperty(container, "scrollTop", { configurable: true, value: 200 });
+    container.dispatchEvent(new Event("scroll"));
+
+    const scrollTop = (instance as unknown as { _scrollTop: () => number })._scrollTop;
+    expect(scrollTop()).toBe(200);
+    document.body.removeChild(container);
+  });
+});

package/src/component/lazy.ts

@@ -2,7 +2,7 @@ import { type RootComponent, signal } from "@praxisjs/core/internal";
 
 export function Lazy(placeholder = 200) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function <T extends new (...args: any[]) => RootComponent>(
+  return function <T extends new (...args: any[]) => RootComponent<Record<string, any>>>(
     constructor: T,
     _context: ClassDecoratorContext,
   ): T {
@@ -10,7 +10,9 @@ export function Lazy(placeholder = 200) {
       private readonly _lazyVisible = signal(false);
       private _observer?: IntersectionObserver;
       private readonly _originalRender: () => Node | Node[] | null =
-        this.render.bind(this);
+        // Capture the *parent* class render, not LazyWrapper's own override,
+        // to avoid infinite recursion when render() delegates here.
+        (constructor.prototype as { render(): Node | Node[] | null }).render.bind(this);
 
       onMount() {
         super.onMount?.();