@praxisjs/decorators 0.4.3 → 0.5.0

package/src/__tests__/resource.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi } from "vitest";
+
+import { Resource } from "../properties/resource";
+
+function makeFieldCtx(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); }); },
+  };
+}
+
+describe("@Resource", () => {
+  it("binds a Resource object to the field", () => {
+    const { ctx, run } = makeFieldCtx("users");
+    Resource(() => Promise.resolve([]))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.users as Record<string, unknown>;
+    expect(typeof r.data).toBe("function");
+    expect(typeof r.pending).toBe("function");
+    expect(typeof r.error).toBe("function");
+    expect(typeof r.status).toBe("function");
+    expect(typeof r.refetch).toBe("function");
+    expect(typeof r.cancel).toBe("function");
+    expect(typeof r.mutate).toBe("function");
+  });
+
+  it("starts in pending state when immediate=true (default)", () => {
+    const { ctx, run } = makeFieldCtx("data");
+    Resource(() => new Promise(() => {}))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.data as { pending: () => boolean; status: () => string };
+    expect(r.pending()).toBe(true);
+    expect(r.status()).toBe("pending");
+  });
+
+  it("starts idle when immediate=false", () => {
+    const { ctx, run } = makeFieldCtx("data");
+    Resource(() => Promise.resolve(42), { immediate: false })(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.data as { status: () => string; pending: () => boolean };
+    expect(r.status()).toBe("idle");
+    expect(r.pending()).toBe(false);
+  });
+
+  it("resolves data asynchronously", async () => {
+    const { ctx, run } = makeFieldCtx("items");
+    Resource(() => Promise.resolve([1, 2, 3]))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.items as { data: () => unknown; status: () => string };
+    await vi.waitFor(() => r.status() === "success");
+    expect(r.data()).toEqual([1, 2, 3]);
+  });
+
+  it("sets error state on rejection", async () => {
+    const { ctx, run } = makeFieldCtx("items");
+    Resource(() => Promise.reject(new Error("fetch failed")))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.items as { error: () => Error | null; status: () => string };
+    await new Promise((res) => setTimeout(res, 0));
+    expect(r.status()).toBe("error");
+    expect((r.error() as Error).message).toBe("fetch failed");
+  });
+
+  it("each instance gets its own resource", () => {
+    const { ctx, run } = makeFieldCtx("r");
+    Resource(() => Promise.resolve(0))(undefined, ctx);
+    const a: Record<string, unknown> = {};
+    const b: Record<string, unknown> = {};
+    run(a);
+    run(b);
+    expect(a.r).not.toBe(b.r);
+  });
+
+  it("mutate() updates data immediately", async () => {
+    const { ctx, run } = makeFieldCtx("r");
+    Resource(() => Promise.resolve(1))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.r as { mutate: (v: number) => void; data: () => number; status: () => string };
+    r.mutate(99);
+    expect(r.data()).toBe(99);
+    expect(r.status()).toBe("success");
+  });
+
+  it("cancel() stops a pending fetch", async () => {
+    const { ctx, run } = makeFieldCtx("r");
+    Resource(() => new Promise(() => {}))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.r as { cancel: () => void; status: () => string };
+    r.cancel();
+    expect(r.status()).toBe("idle");
+  });
+
+  it("uses initialData option", () => {
+    const { ctx, run } = makeFieldCtx("r");
+    Resource(() => Promise.resolve("new"), { initialData: "default", immediate: false })(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.r as { data: () => string };
+    expect(r.data()).toBe("default");
+  });
+});

package/src/__tests__/slot.test.ts

@@ -61,6 +61,19 @@ describe("initSlots / getSlot", () => {
     initSlots(instance, [null, el, undefined]);
     expect(getSlot(instance, "default")).toEqual([el]);
   });
+
+  it("appends to existing named slot when same slot name appears twice", () => {
+    const instance = {};
+    const a = document.createElement("div");
+    a.setAttribute("slot", "header");
+    const b = document.createElement("div");
+    b.setAttribute("slot", "header");
+    initSlots(instance, [a, b]);
+    const headerSlot = getSlot(instance, "header");
+    expect(headerSlot).toHaveLength(2);
+    expect(headerSlot[0]).toBe(a);
+    expect(headerSlot[1]).toBe(b);
+  });
 });
 
 // ── Slot decorator ───────────────────────────────────────────────────────────
@@ -116,6 +129,31 @@ describe("Slot decorator", () => {
     expect(slot[0]).toBe(el);
   });
 
+  it("skips warn on direct assignment in production mode", () => {
+    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(() => {});
+    vi.stubEnv("NODE_ENV", "production");
+    (instance as Record<string, unknown>).default = "bad";
+    expect(warn).not.toHaveBeenCalled();
+    vi.unstubAllEnvs();
+    warn.mockRestore();
+  });
+
   it("warns on direct assignment in non-production", () => {
     class MyComp extends StatefulComponent {
       render() { return null; }

package/src/__tests__/virtual.test.ts

@@ -158,16 +158,16 @@ describe("Virtual decorator", () => {
     (instance as unknown as { _anchor: Comment })._anchor = anchor;
 
     instance.onMount?.();
-    // First render - populates the itemsSlot
-    instance.render();
+    // First render - sets up effects with the spacerTop/itemsSlot/spacerBottom elements
+    const outer = instance.render() as HTMLElement;
 
     // 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);
+    // buffer=0, itemHeight=50, scrollTop=500 → startIdx=10 → offsetTop=500px
+    const spacerTop = outer.children[0] as HTMLElement;
+    expect(spacerTop.getAttribute("style")).toContain("500px");
 
     document.body.removeChild(container);
   });
@@ -211,6 +211,22 @@ describe("Virtual decorator", () => {
     expect(wrapper.children.length).toBe(0);
   });
 
+  it("uses empty array when items is undefined (host.items ?? [])", () => {
+    class NoItems extends StatefulComponent {
+      // items is intentionally not defined
+      renderItem() { return document.createElement("div"); }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(NoItems as AnyConstructor, 50, 0);
+    const instance = new Wrapped();
+    // render() should work fine with 0 items
+    const result = instance.render() as HTMLElement;
+    expect(result).toBeInstanceOf(HTMLElement);
+    const style = result.getAttribute("style") ?? "";
+    expect(style).toContain("0px"); // totalH = 0 * 50 = 0
+  });
+
   it("onUnmount without prior onMount does not throw", () => {
     const Wrapped = applyVirtual(ListComp as AnyConstructor, 50);
     const instance = new Wrapped();
@@ -230,12 +246,15 @@ describe("Virtual decorator", () => {
     (instance as unknown as { _anchor: Comment })._anchor = anchor;
 
     instance.onMount?.();
+    // Render to set up effects that observe scrollTop
+    const outer = instance.render() as HTMLElement;
 
     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);
+    // buffer=3, itemHeight=50, scrollTop=200 → startIdx=1 → offsetTop=50px
+    const spacerTop = outer.children[0] as HTMLElement;
+    expect(spacerTop.getAttribute("style")).toContain("50px");
     document.body.removeChild(container);
   });
 });

package/src/component/component.ts

@@ -1,25 +1,40 @@
 import { StatelessComponent } from "@praxisjs/core";
+import type { RootComponent } from "@praxisjs/core/internal";
 import type {
   ComponentConstructor,
   ComponentInstance,
 } from "@praxisjs/shared/internal";
 
+import {
+  ClassBehavior,
+  createClassDecorator,
+  type ClassEnhancement,
+} from "../create-class-decorator";
+
+class ComponentBehavior extends ClassBehavior {
+  create(_instance: RootComponent): ClassEnhancement {
+    return {};
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialize(Enhanced: new (...args: any[]) => unknown, original: new (...args: any[]) => unknown): void {
+    const isStateless = (original.prototype as object) instanceof StatelessComponent;
+    Object.defineProperty(Enhanced, "__isComponent", { value: true, configurable: true });
+    Object.defineProperty(Enhanced, "__isStateless", { value: isStateless, configurable: true });
+  }
+}
+
+const behavior = new ComponentBehavior();
+
 export function Component() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return function <T extends new (...args: any[]) => ComponentInstance>(
     constructor: T,
-    _context: ClassDecoratorContext,
+    context: ClassDecoratorContext,
   ): T & ComponentConstructor {
-    const isStateless = constructor.prototype instanceof StatelessComponent;
-    const Enhanced = class extends constructor {
-      static __isComponent = true as const;
-      static __isStateless = isStateless;
-    } as unknown as T & ComponentConstructor;
-
-    Object.defineProperty(Enhanced, "name", {
-      value: constructor.name,
-    });
-
-    return Enhanced;
+    return createClassDecorator(behavior)(
+      constructor as unknown as T & (new(...args: unknown[]) => RootComponent<Record<string, unknown>>),
+      context,
+    ) as unknown as T & ComponentConstructor;
   };
 }

package/src/component/lazy.ts

@@ -1,60 +1,56 @@
 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<Record<string, any>>>(
-    constructor: T,
-    _context: ClassDecoratorContext,
-  ): T {
-    return class LazyWrapper extends constructor {
-      private readonly _lazyVisible = signal(false);
-      private _observer?: IntersectionObserver;
-      private readonly _originalRender: () => Node | Node[] | null =
-        // 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);
+import { ClassBehavior, createClassDecorator, type ClassEnhancement } from "../create-class-decorator";
 
-      onMount() {
-        super.onMount?.();
+class LazyBehavior extends ClassBehavior {
+  constructor(private readonly placeholder: number) {
+    super();
+  }
 
-        // Use the end anchor to find the parent element
+  create(instance: RootComponent): ClassEnhancement {
+    const placeholder = this.placeholder;
+    const visible = signal(false);
+    let observer: IntersectionObserver | undefined;
+
+    return {
+      onMount() {
         const el =
-          (this as unknown as { _anchor?: Comment })._anchor
-            ?.parentElement ?? null;
+          (instance as { _anchor?: Comment })._anchor?.parentElement ?? null;
         if (!el) return;
 
         if (!("IntersectionObserver" in window)) {
-          this._lazyVisible.set(true);
+          visible.set(true);
           return;
         }
 
-        if (!this._lazyVisible()) {
-          el.style.minHeight = `${String(placeholder)}px`;
-        }
+        if (!visible()) el.style.minHeight = `${String(placeholder)}px`;
 
-        this._observer = new IntersectionObserver(
+        observer = new IntersectionObserver(
           (entries) => {
             if (entries[0]?.isIntersecting) {
-              this._lazyVisible.set(true);
+              visible.set(true);
               el.style.minHeight = "";
-              this._observer?.disconnect();
+              observer?.disconnect();
             }
           },
           { rootMargin: "100px" },
         );
 
-        this._observer.observe(el);
-      }
+        observer.observe(el);
+      },
 
       onUnmount() {
-        super.onUnmount?.();
-        this._observer?.disconnect();
-      }
-
-      render(): Node | Node[] | null {
-        if (!this._lazyVisible()) return null;
-        return this._originalRender();
-      }
-    } as unknown as T;
-  };
+        observer?.disconnect();
+      },
+
+      render(originalRender) {
+        if (!visible()) return null;
+        return originalRender();
+      },
+    };
+  }
+}
+
+export function Lazy(placeholder = 200) {
+  return createClassDecorator(new LazyBehavior(placeholder));
 }

package/src/component/virtual.tsx

@@ -1,81 +1,76 @@
 import { computed, effect, type RootComponent, signal } from "@praxisjs/core/internal";
 
+import { ClassBehavior, createClassDecorator, type ClassEnhancement } from "../create-class-decorator";
+
 interface VirtualHost {
   _anchor?: Comment;
   items?: unknown[];
   renderItem(item: unknown, index: number): Node | Node[] | null;
 }
 
-export function Virtual(itemHeight: number, buffer = 3) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function <T extends new (...args: any[]) => RootComponent<Record<string, any>>>(
-    constructor: T,
-    _context: ClassDecoratorContext,
-  ): T {
-    return class VirtualWrapper extends constructor {
-      private readonly _scrollTop = signal(0);
-      private readonly _viewHeight = signal(600);
-      private _container?: HTMLElement;
-      private _scrollHandler?: () => void;
-      private _cleanups: Array<() => void> = [];
-
+class VirtualBehavior extends ClassBehavior {
+  constructor(
+    private readonly itemHeight: number,
+    private readonly buffer: number,
+  ) {
+    super();
+  }
+
+  create(instance: RootComponent): ClassEnhancement {
+    const { itemHeight, buffer } = this;
+    const host = instance as unknown as VirtualHost;
+    const scrollTop = signal(0);
+    const viewHeight = signal(600);
+    let container: HTMLElement | undefined;
+    let scrollHandler: (() => void) | undefined;
+    const cleanups: Array<() => void> = [];
+
+    return {
       onMount() {
-        super.onMount?.();
-
-        // Use the end anchor set by the runtime to locate the parent element
-        this._container =
-          (this as unknown as VirtualHost)._anchor?.parentElement ?? undefined;
-
-        if (!this._container) return;
+        container = host._anchor?.parentElement ?? undefined;
+        if (!container) return;
 
-        this._container.style.overflowY = "auto";
-        this._container.style.position = "relative";
+        container.style.overflowY = "auto";
+        container.style.position = "relative";
+        viewHeight.set(container.clientHeight || 600);
 
-        this._viewHeight.set(this._container.clientHeight || 600);
-
-        this._scrollHandler = () => {
-          if (this._container) this._scrollTop.set(this._container.scrollTop);
+        scrollHandler = () => {
+          if (container) scrollTop.set(container.scrollTop);
         };
-
-        this._container.addEventListener("scroll", this._scrollHandler);
-      }
+        container.addEventListener("scroll", scrollHandler);
+      },
 
       onUnmount() {
-        super.onUnmount?.();
-        if (this._container && this._scrollHandler) {
-          this._container.removeEventListener("scroll", this._scrollHandler);
+        if (container && scrollHandler) {
+          container.removeEventListener("scroll", scrollHandler);
         }
-        this._cleanups.forEach((c) => { c(); });
-        this._cleanups = [];
-      }
+        cleanups.forEach((c) => { c(); });
+        cleanups.length = 0;
+      },
 
-      render() {
-        const host = this as unknown as VirtualHost;
+      render(originalRender) {
         const items = host.items ?? [];
         const total = items.length;
         const totalH = total * itemHeight;
 
         if (typeof host.renderItem !== "function") {
           console.warn(
-            `[Virtual] ${constructor.name} must implement renderItem(item, index)`,
+            `[Virtual] component must implement renderItem(item, index)`,
           );
-          return null;
+          return originalRender();
         }
 
         const renderItem = host.renderItem.bind(host);
 
-        const startIdx = computed(() => {
-          const start = Math.floor(this._scrollTop() / itemHeight) - buffer;
-          return Math.max(0, start);
-        });
-
-        const endIdx = computed(() => {
-          const end =
-            Math.ceil((this._scrollTop() + this._viewHeight()) / itemHeight) +
-            buffer;
-          return Math.min(total - 1, end);
-        });
-
+        const startIdx = computed(() =>
+          Math.max(0, Math.floor(scrollTop() / itemHeight) - buffer),
+        );
+        const endIdx = computed(() =>
+          Math.min(
+            total - 1,
+            Math.ceil((scrollTop() + viewHeight()) / itemHeight) + buffer,
+          ),
+        );
         const visibleItems = computed(() => {
           const result: Array<{ item: unknown; index: number }> = [];
           for (let i = startIdx(); i <= endIdx(); i++) {
@@ -83,31 +78,23 @@ export function Virtual(itemHeight: number, buffer = 3) {
           }
           return result;
         });
-
         const offsetTop = computed(() => startIdx() * itemHeight);
-        const offsetBottom = computed(
-          () => (total - 1 - endIdx()) * itemHeight,
-        );
+        const offsetBottom = computed(() => (total - 1 - endIdx()) * itemHeight);
 
         const outer = document.createElement("div");
-        outer.setAttribute(
-          "style",
-          `height:${String(totalH)}px; position:relative;`,
-        );
+        outer.setAttribute("style", `height:${String(totalH)}px; position:relative;`);
 
         const spacerTop = document.createElement("div");
-        this._cleanups.push(
+        cleanups.push(
           effect(() => {
             spacerTop.setAttribute("style", `height:${String(offsetTop())}px;`);
           }),
         );
 
         const itemsSlot = document.createElement("div");
-        this._cleanups.push(
+        cleanups.push(
           effect(() => {
-            while (itemsSlot.firstChild) {
-              itemsSlot.removeChild(itemsSlot.firstChild);
-            }
+            while (itemsSlot.firstChild) itemsSlot.removeChild(itemsSlot.firstChild);
             visibleItems().forEach(({ item, index }) => {
               const wrapper = document.createElement("div");
               wrapper.setAttribute(
@@ -116,10 +103,9 @@ export function Virtual(itemHeight: number, buffer = 3) {
               );
               const rendered = renderItem(item, index);
               if (rendered) {
-                const nodes = (
-                  Array.isArray(rendered) ? rendered.flat() : [rendered]
+                (Array.isArray(rendered) ? rendered.flat() : [rendered]).forEach(
+                  (n) => { wrapper.appendChild(n); },
                 );
-                nodes.forEach((n) => wrapper.appendChild(n));
               }
               itemsSlot.appendChild(wrapper);
             });
@@ -127,12 +113,9 @@ export function Virtual(itemHeight: number, buffer = 3) {
         );
 
         const spacerBottom = document.createElement("div");
-        this._cleanups.push(
+        cleanups.push(
           effect(() => {
-            spacerBottom.setAttribute(
-              "style",
-              `height:${String(offsetBottom())}px;`,
-            );
+            spacerBottom.setAttribute("style", `height:${String(offsetBottom())}px;`);
           }),
         );
 
@@ -141,7 +124,11 @@ export function Virtual(itemHeight: number, buffer = 3) {
         outer.appendChild(spacerBottom);
 
         return outer;
-      }
-    } as unknown as T;
-  };
+      },
+    };
+  }
+}
+
+export function Virtual(itemHeight: number, buffer = 3) {
+  return createClassDecorator(new VirtualBehavior(itemHeight, buffer));
 }

package/src/create-class-decorator.ts

@@ -0,0 +1,61 @@
+import type { RootComponent } from "@praxisjs/core/internal";
+
+export interface ClassEnhancement {
+  onMount?(): void;
+  onUnmount?(): void;
+  render?(
+    originalRender: () => Node | Node[] | null,
+  ): Node | Node[] | null;
+}
+
+export abstract class ClassBehavior {
+  abstract create(instance: RootComponent): ClassEnhancement;
+
+  /**
+   * Called once after the enhanced class is created.
+   * Use this to set static properties on the class constructor itself.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialize?(_Enhanced: new (...args: any[]) => unknown, _original: new (...args: any[]) => unknown): void;
+}
+
+export function createClassDecorator(behavior: ClassBehavior) {
+  return function <
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    T extends new (...args: any[]) => RootComponent<Record<string, any>>,
+  >(constructor: T, _context: ClassDecoratorContext): T {
+    const Enhanced = class extends constructor {
+      private readonly _enh: ClassEnhancement = behavior.create(
+        this as unknown as RootComponent,
+      );
+
+      onMount() {
+        super.onMount?.();
+        this._enh.onMount?.();
+      }
+
+      onUnmount() {
+        super.onUnmount?.();
+        this._enh.onUnmount?.();
+      }
+
+      render(...args: unknown[]): Node | Node[] | null {
+        const originalRender = () =>
+          (constructor.prototype as { render: (...a: unknown[]) => Node | Node[] | null }).render.apply(this, args);
+        if (this._enh.render) {
+          return this._enh.render(originalRender);
+        }
+        return originalRender();
+      }
+    };
+
+    // If the original class has no render, remove the wrapper so instances see `undefined`.
+    if (typeof (constructor.prototype as { render?: unknown }).render !== "function") {
+      delete (Enhanced.prototype as { render?: unknown }).render;
+    }
+
+    Object.defineProperty(Enhanced, "name", { value: constructor.name });
+    behavior.initialize?.(Enhanced, constructor);
+    return Enhanced as unknown as T;
+  };
+}