@praxisjs/decorators 0.5.0 → 0.6.1

package/src/__tests__/resource.test.ts

@@ -110,4 +110,32 @@ describe("@Resource", () => {
     const r = instance.r as { data: () => string };
     expect(r.data()).toBe("default");
   });
+
+  it("cancel() called when not pending — no-op, no crash", () => {
+    const { ctx, run } = makeFieldCtx("r");
+    Resource(() => Promise.resolve(42), { immediate: false })(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.r as { cancel: () => void; status: () => string };
+    // Not pending (immediate=false → idle)
+    expect(r.status()).toBe("idle");
+    expect(() => r.cancel()).not.toThrow();
+    expect(r.status()).toBe("idle");
+  });
+
+  it("refetch() called after successful load — re-fetches", async () => {
+    let callCount = 0;
+    const { ctx, run } = makeFieldCtx("r");
+    Resource(() => Promise.resolve(++callCount))(undefined, ctx);
+    const instance: Record<string, unknown> = {};
+    run(instance);
+    const r = instance.r as { refetch: () => void; data: () => number; status: () => string };
+
+    await vi.waitFor(() => r.status() === "success");
+    expect(r.data()).toBe(1);
+
+    r.refetch();
+    await vi.waitFor(() => r.status() === "success" && r.data() === 2);
+    expect(callCount).toBe(2);
+  });
 });

package/src/__tests__/until.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect } from "vitest";
+
+import { signal, computed } from "@praxisjs/core/internal";
+
+import { Until } from "../functions/until";
+
+// Simulates TC39 decorator context for a method decorator
+function mockMethodContext(name: string) {
+  const initializers: Array<(this: object) => void> = [];
+  const ctx = {
+    name,
+    kind: "method" as const,
+    addInitializer(fn: (this: object) => void) {
+      initializers.push(fn);
+    },
+    runInitializers(instance: object) {
+      initializers.forEach((fn) => { fn.call(instance); });
+    },
+  };
+  return ctx;
+}
+
+// ── @Until ────────────────────────────────────────────────────────────────────
+
+describe("Until", () => {
+  it("resolves immediately when the signal is already truthy", async () => {
+    const s = signal(42);
+    const obj: Record<string, unknown> = { count: s };
+
+    const ctx = mockMethodContext("wait");
+    Until("count")(() => {}, ctx as unknown as ClassMethodDecoratorContext);
+    ctx.runInitializers(obj);
+
+    const result = await (obj.wait as () => Promise<number>)();
+    expect(result).toBe(42);
+  });
+
+  it("resolves when the signal becomes truthy", async () => {
+    const s = signal<number>(0);
+    const obj: Record<string, unknown> = { count: s };
+
+    const ctx = mockMethodContext("wait");
+    Until("count")(() => {}, ctx as unknown as ClassMethodDecoratorContext);
+    ctx.runInitializers(obj);
+
+    const promise = (obj.wait as () => Promise<number>)();
+    s.set(5);
+    expect(await promise).toBe(5);
+  });
+
+  it("resolves with a computed signal", async () => {
+    const s = signal(0);
+    const doubled = computed(() => s() * 2);
+    const obj: Record<string, unknown> = { doubled };
+
+    const ctx = mockMethodContext("waitDoubled");
+    Until("doubled")(() => {}, ctx as unknown as ClassMethodDecoratorContext);
+    ctx.runInitializers(obj);
+
+    const promise = (obj.waitDoubled as () => Promise<number>)();
+    s.set(3); // doubled becomes 6 (truthy)
+    expect(await promise).toBe(6);
+  });
+
+  it("each call returns a new promise", async () => {
+    const s = signal<string>("");
+    const obj: Record<string, unknown> = { name: s };
+
+    const ctx = mockMethodContext("waitName");
+    Until("name")(() => {}, ctx as unknown as ClassMethodDecoratorContext);
+    ctx.runInitializers(obj);
+
+    const wait = obj.waitName as () => Promise<string>;
+
+    const p1 = wait();
+    const p2 = wait();
+    expect(p1).not.toBe(p2);
+
+    s.set("alice");
+    expect(await p1).toBe("alice");
+    expect(await p2).toBe("alice");
+  });
+
+  it("does not resolve when signal stays falsy", async () => {
+    const s = signal<number>(0);
+    const obj: Record<string, unknown> = { count: s };
+
+    const ctx = mockMethodContext("wait");
+    Until("count")(() => {}, ctx as unknown as ClassMethodDecoratorContext);
+    ctx.runInitializers(obj);
+
+    let resolved = false;
+    (obj.wait as () => Promise<number>)().then(() => { resolved = true; });
+
+    await new Promise((res) => { setTimeout(res, 10); });
+    expect(resolved).toBe(false);
+  });
+
+  it("ignores the original method body", async () => {
+    const s = signal("hello");
+    const obj: Record<string, unknown> = { value: s };
+
+    let bodyCalled = false;
+    const original = () => { bodyCalled = true; };
+
+    const ctx = mockMethodContext("wait");
+    Until("value")(original, ctx as unknown as ClassMethodDecoratorContext);
+    ctx.runInitializers(obj);
+
+    await (obj.wait as () => Promise<string>)();
+    expect(bodyCalled).toBe(false);
+  });
+});

package/src/__tests__/virtual.test.ts

@@ -257,4 +257,113 @@ describe("Virtual decorator", () => {
     expect(spacerTop.getAttribute("style")).toContain("50px");
     document.body.removeChild(container);
   });
+
+  it("itemHeight = 0 throws a descriptive error on onMount", () => {
+    class ZeroHeightList extends StatefulComponent {
+      items = ["a", "b"];
+      renderItem(item: unknown) {
+        const el = document.createElement("div");
+        el.textContent = String(item);
+        return el;
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(ZeroHeightList as AnyConstructor, 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;
+
+    expect(() => instance.onMount?.()).toThrow(/itemHeight must be a positive number/);
+    document.body.removeChild(container);
+  });
+
+  it("itemHeight = 0 in render() does not divide by zero (no container)", () => {
+    class ZeroHeightList2 extends StatefulComponent {
+      items = ["a", "b"];
+      renderItem(item: unknown) {
+        return document.createElement("div");
+      }
+      render() { return null; }
+    }
+    // render() is called before onMount, so no throw yet — but it still computes total height
+    const Wrapped = applyVirtual(ZeroHeightList2 as AnyConstructor, 0);
+    const instance = new Wrapped();
+    // Render without mounting — no onMount guard triggered, but division happens in computed
+    // The guard is in onMount, so render still runs. Verify it doesn't produce NaN/Infinity
+    expect(() => instance.render()).not.toThrow();
+  });
+
+  it("renderItem() that throws — does not crash the entire component", () => {
+    class ThrowingList extends StatefulComponent {
+      items = ["x"];
+      renderItem(): Node {
+        throw new Error("render item failed");
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(ThrowingList as AnyConstructor, 50, 0);
+    const instance = new Wrapped();
+    // Render triggers the effect which calls renderItem — it should propagate the error
+    expect(() => instance.render()).toThrow("render item failed");
+  });
+
+  it("scrollTop > totalHeight renders last visible items without crash", () => {
+    class ShortList extends StatefulComponent {
+      items = [1, 2, 3]; // only 3 items × 50px = 150px total
+      renderItem(item: unknown) {
+        const el = document.createElement("div");
+        el.textContent = String(item);
+        return el;
+      }
+      render() { return null; }
+    }
+
+    const Wrapped = applyVirtual(ShortList 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?.();
+    const outer = instance.render() as HTMLElement;
+
+    // Simulate scrollTop way past end of list (e.g., 9999px for a 150px list)
+    Object.defineProperty(container, "scrollTop", { configurable: true, value: 9999 });
+    expect(() => container.dispatchEvent(new Event("scroll"))).not.toThrow();
+
+    // The outer container should still be present
+    expect(outer).toBeInstanceOf(HTMLElement);
+    document.body.removeChild(container);
+  });
+
+  it("buffer applied correctly — renders extra items beyond visible area", () => {
+    class BufferList 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; }
+    }
+
+    // itemHeight=100, buffer=2, viewHeight defaults to 600 → visible=6 items + 2 buffer each side
+    const Wrapped = applyVirtual(BufferList as AnyConstructor, 100, 2);
+    const instance = new Wrapped();
+    const outer = instance.render() as HTMLElement;
+
+    // With scrollTop=0, buffer=2: startIdx=max(0, 0-2)=0, endIdx=min(19, ceil(600/100)+2)=8
+    // So 9 items should be rendered (indices 0..8)
+    const itemsSlot = outer.children[1] as HTMLElement;
+    expect(itemsSlot.children.length).toBe(9);
+  });
 });

package/src/component/virtual.tsx

@@ -27,6 +27,11 @@ class VirtualBehavior extends ClassBehavior {
 
     return {
       onMount() {
+        if (itemHeight <= 0) {
+          throw new Error(
+            `[Virtual] itemHeight must be a positive number, got ${String(itemHeight)}`,
+          );
+        }
         container = host._anchor?.parentElement ?? undefined;
         if (!container) return;
 

package/src/create-method-decorator.ts

@@ -2,15 +2,18 @@ import type { StatefulComponent } from "@praxisjs/core";
 
 export interface MethodBehavior {
   wrap(
-    original: (...args: unknown[]) => unknown,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    original: (...args: any[]) => any,
     instance: object,
     name: string,
-  ): (...args: unknown[]) => unknown;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): (...args: any[]) => any;
 }
 
 export function createMethodDecorator(behavior: MethodBehavior) {
   return function (
-    value: (this: object, ...args: unknown[]) => unknown,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: (this: object, ...args: any[]) => any,
     context: ClassMethodDecoratorContext<StatefulComponent>,
   ): void {
     context.addInitializer(function (this: unknown) {

package/src/functions/debounce.ts

@@ -1,9 +1,22 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 import { createMethodDecorator } from "../create-method-decorator";
 
 export function Debounce(ms: number) {
   return createMethodDecorator({
-    wrap(original, instance) {
+    wrap(original, instance, _name) {
       let timer: ReturnType<typeof setTimeout> | undefined;
+
+      const comp = instance as StatefulComponent;
+      const prevUnmount = comp.onUnmount?.bind(comp);
+      comp.onUnmount = function (this: StatefulComponent) {
+        prevUnmount?.call(this);
+        if (timer !== undefined) {
+          clearTimeout(timer);
+          timer = undefined;
+        }
+      };
+
       return (...args: unknown[]) => {
         if (timer !== undefined) clearTimeout(timer);
         timer = setTimeout(() => {

package/src/functions/index.ts

@@ -6,4 +6,5 @@ export { Retry } from "./retry";
 export { Debounce } from "./debounce";
 export { Throttle } from "./throttle";
 export { When } from "./when";
+export { Until } from "./until";
 export { Watch, type WatchVal, type WatchVals } from "./watch";

package/src/functions/memo.ts

@@ -3,11 +3,27 @@ import type { Computed } from "@praxisjs/shared";
 
 import { createMethodDecorator } from "../create-method-decorator";
 
+const objectIdMap = new WeakMap<object, number>();
+let objectIdCounter = 0;
+
+function objectIdentityKey(obj: object): string {
+  if (!objectIdMap.has(obj)) {
+    objectIdMap.set(obj, ++objectIdCounter);
+  }
+  return `__obj_${String(objectIdMap.get(obj))}__`;
+}
+
 function serializeArgs(args: unknown[]) {
   if (args.length === 0) return "__no_args__";
   return args
     .map((a) => {
-      if (a === null || typeof a === "object") return JSON.stringify(a);
+      if (a === null || typeof a === "object") {
+        try {
+          return JSON.stringify(a);
+        } catch {
+          return a === null ? "null" : objectIdentityKey(a);
+        }
+      }
       if (typeof a === "symbol") return a.toString();
       return String(a as string | number | boolean | bigint | undefined);
     })

package/src/functions/throttle.ts

@@ -3,10 +3,11 @@ import { createMethodDecorator } from "../create-method-decorator";
 export function Throttle(ms: number) {
   return createMethodDecorator({
     wrap(original, instance) {
+      const clampedMs = Math.max(0, ms);
       let last = 0;
       return (...args: unknown[]) => {
         const now = Date.now();
-        if (now - last < ms) return;
+        if (now - last < clampedMs) return;
         last = now;
         return original.apply(instance, args);
       };

package/src/functions/until.ts

@@ -0,0 +1,19 @@
+import { until } from "@praxisjs/core/internal";
+import type { Computed, Signal } from "@praxisjs/shared";
+import { isComputed } from "@praxisjs/shared/internal";
+
+import { createMethodDecorator } from "../create-method-decorator";
+
+export function Until(propName: string) {
+  return createMethodDecorator({
+    wrap(_original, instance) {
+      return () => {
+        const raw = (instance as Record<string, unknown>)[propName];
+        const source = isComputed(raw)
+          ? (raw as Computed<unknown>)
+          : (raw as Signal<unknown>);
+        return until(source);
+      };
+    },
+  });
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export {
   Debounce,
   Throttle,
   When,
+  Until,
   Watch,
   type WatchVal,
   type WatchVals,