@praxisjs/decorators 0.2.0 → 0.4.0

package/src/component/virtual.tsx

@@ -1,24 +1,30 @@
-import { type BaseComponent, computed, signal } from "@praxisjs/core";
-import type { VNode } from "@praxisjs/shared";
+import { computed, effect, type RootComponent, signal } from "@praxisjs/core/internal";
+
+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[]) => BaseComponent>(
+  return function <T extends new (...args: any[]) => RootComponent>(
     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> = [];
 
       onMount() {
         super.onMount?.();
 
+        // Use the end anchor set by the runtime to locate the parent element
         this._container =
-          document.querySelector<HTMLElement>(
-            `[data-component="${constructor.name}"]`,
-          ) ?? undefined;
+          (this as unknown as VirtualHost)._anchor?.parentElement ?? undefined;
 
         if (!this._container) return;
 
@@ -39,24 +45,25 @@ export function Virtual(itemHeight: number, buffer = 3) {
         if (this._container && this._scrollHandler) {
           this._container.removeEventListener("scroll", this._scrollHandler);
         }
+        this._cleanups.forEach((c) => { c(); });
+        this._cleanups = [];
       }
 
       render() {
-        const instance = this as unknown as Record<string, unknown>;
-        const items = (instance.items as unknown[] | undefined) ?? [];
+        const host = this as unknown as VirtualHost;
+        const items = host.items ?? [];
         const total = items.length;
         const totalH = total * itemHeight;
 
-        const renderItem = instance.renderItem as
-          | ((item: unknown, i: number) => VNode | null)
-          | undefined;
-        if (!renderItem) {
+        if (typeof host.renderItem !== "function") {
           console.warn(
             `[Virtual] ${constructor.name} must implement renderItem(item, index)`,
           );
           return null;
         }
 
+        const renderItem = host.renderItem.bind(host);
+
         const startIdx = computed(() => {
           const start = Math.floor(this._scrollTop() / itemHeight) - buffer;
           return Math.max(0, start);
@@ -70,7 +77,7 @@ export function Virtual(itemHeight: number, buffer = 3) {
         });
 
         const visibleItems = computed(() => {
-          const result = [];
+          const result: Array<{ item: unknown; index: number }> = [];
           for (let i = startIdx(); i <= endIdx(); i++) {
             result.push({ item: items[i], index: i });
           }
@@ -82,22 +89,58 @@ export function Virtual(itemHeight: number, buffer = 3) {
           () => (total - 1 - endIdx()) * itemHeight,
         );
 
-        return (
-          <div style={`height:${String(totalH)}px; position:relative;`}>
-            <div style={() => `height:${String(offsetTop())}px;`} />
-            {() =>
-              visibleItems().map(({ item, index }) => (
-                <div
-                  key={String(index)}
-                  style={`height:${String(itemHeight)}px; overflow:hidden;`}
-                >
-                  {renderItem.call(this, item, index)}
-                </div>
-              ))
+        const outer = document.createElement("div");
+        outer.setAttribute(
+          "style",
+          `height:${String(totalH)}px; position:relative;`,
+        );
+
+        const spacerTop = document.createElement("div");
+        this._cleanups.push(
+          effect(() => {
+            spacerTop.setAttribute("style", `height:${String(offsetTop())}px;`);
+          }),
+        );
+
+        const itemsSlot = document.createElement("div");
+        this._cleanups.push(
+          effect(() => {
+            while (itemsSlot.firstChild) {
+              itemsSlot.removeChild(itemsSlot.firstChild);
             }
-            <div style={() => `height:${String(offsetBottom())}px;`} />
-          </div>
-        ) as unknown as VNode;
+            visibleItems().forEach(({ item, index }) => {
+              const wrapper = document.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                `height:${String(itemHeight)}px; overflow:hidden;`,
+              );
+              const rendered = renderItem(item, index);
+              if (rendered) {
+                const nodes = (
+                  Array.isArray(rendered) ? rendered.flat() : [rendered]
+                );
+                nodes.forEach((n) => wrapper.appendChild(n));
+              }
+              itemsSlot.appendChild(wrapper);
+            });
+          }),
+        );
+
+        const spacerBottom = document.createElement("div");
+        this._cleanups.push(
+          effect(() => {
+            spacerBottom.setAttribute(
+              "style",
+              `height:${String(offsetBottom())}px;`,
+            );
+          }),
+        );
+
+        outer.appendChild(spacerTop);
+        outer.appendChild(itemsSlot);
+        outer.appendChild(spacerBottom);
+
+        return outer;
       }
     } as unknown as T;
   };

package/src/events/emit.ts

@@ -1,20 +1,17 @@
-import type { BaseComponent } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
 
 import { readProp } from "./helper";
 
 export function Emit(propName: string) {
   return function (
-    _target: object,
-    methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
-
+    value: (this: StatefulComponent, ...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
     const wrapped = function (
-      this: BaseComponent,
+      this: StatefulComponent,
       ...args: unknown[]
     ): unknown {
-      const result = originalMethod.apply(this, args);
+      const result = value.apply(this, args);
 
       const callback = readProp(this, propName);
       if (typeof callback !== "function") return result;
@@ -30,18 +27,14 @@ export function Emit(propName: string) {
       return result;
     };
 
-    return {
-      configurable: true,
-      enumerable: false,
-      get(this: BaseComponent) {
-        const bound = wrapped.bind(this);
-        Object.defineProperty(this, methodKey, {
-          value: bound,
-          configurable: true,
-          writable: true,
-        });
-        return bound;
-      },
-    };
+    context.addInitializer(function (this: unknown) {
+      const name = context.name as string;
+      const bound = wrapped.bind(this as StatefulComponent);
+      Object.defineProperty(this as object, name, {
+        value: bound,
+        configurable: true,
+        writable: true,
+      });
+    });
   };
 }

package/src/events/helper.ts

@@ -1,6 +1,9 @@
-import type { BaseComponent } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
 
-export function readProp(instance: BaseComponent, propName: string): unknown {
+export function readProp(
+  instance: StatefulComponent,
+  propName: string,
+): unknown {
   const fromParent = instance._rawProps[propName];
   if (fromParent !== undefined) return fromParent;
   return instance._defaults[propName];

package/src/events/on-command.ts

@@ -1,4 +1,4 @@
-import type { BaseComponent } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
 
 import { readProp } from "./helper";
 
@@ -6,50 +6,49 @@ import type { Command } from "./command";
 
 export function OnCommand(propName: string) {
   return function (
-    target: object,
-    _methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalOnMount = (target as { onMount?(): void }).onMount;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const originalOnUnmount = (target as { onUnmount?(): void }).onUnmount;
-
-    const method = descriptor.value as (...args: unknown[]) => void;
+    value: (this: StatefulComponent, ...args: unknown[]) => void,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
     const cleanups = new WeakMap<object, () => void>();
 
-    (target as { onMount?(): void }).onMount = function (this: BaseComponent) {
-      originalOnMount?.call(this);
-
-      const command = readProp(this, propName) as Command<unknown> | undefined;
-
-      if (!command) {
-        console.warn(
-          `[OnCommand] prop "${propName}" was not provided to ${this.constructor.name}`,
-        );
-        return;
-      }
-
-      if (typeof command.subscribe !== "function") {
-        console.warn(
-          `[OnCommand] prop "${propName}" is not a valid Command in ${this.constructor.name}`,
-        );
-        return;
-      }
-
-      const bound = method.bind(this);
-      const unsub = command.subscribe((...args: unknown[]) => { bound(...args); });
-      cleanups.set(this, unsub);
-    };
-
-    (target as { onUnmount?(): void }).onUnmount = function (
-      this: BaseComponent,
-    ) {
-      originalOnUnmount?.call(this);
-      cleanups.get(this)?.();
-      cleanups.delete(this);
-    };
-
-    return descriptor;
+    context.addInitializer(function (this: unknown) {
+      const instance = this as StatefulComponent;
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const originalOnMount = instance.onMount;
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const originalOnUnmount = instance.onUnmount;
+
+      instance.onMount = function (this: StatefulComponent) {
+        originalOnMount?.call(this);
+
+        const command = readProp(this, propName) as Command<unknown> | undefined;
+
+        if (!command) {
+          console.warn(
+            `[OnCommand] prop "${propName}" was not provided to ${this.constructor.name}`,
+          );
+          return;
+        }
+
+        if (typeof command.subscribe !== "function") {
+          console.warn(
+            `[OnCommand] prop "${propName}" is not a valid Command in ${this.constructor.name}`,
+          );
+          return;
+        }
+
+        const bound = value.bind(this);
+        const unsub = command.subscribe((...args: unknown[]) => {
+          bound(...args);
+        });
+        cleanups.set(this, unsub);
+      };
+
+      instance.onUnmount = function (this: StatefulComponent) {
+        originalOnUnmount?.call(this);
+        cleanups.get(this)?.();
+        cleanups.delete(this);
+      };
+    });
   };
 }

package/src/functions/bind.ts

@@ -1,22 +1,18 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 export function Bind() {
   return function (
-    _target: object,
-    methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
-    return {
-      enumerable: false,
-      configurable: true,
-      get(this: object) {
-        const bound = originalMethod.bind(this);
-        Object.defineProperty(this, methodKey, {
-          value: bound,
-          configurable: true,
-          writable: true,
-        });
-        return bound;
-      },
-    };
+    value: (this: object, ...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
+    context.addInitializer(function (this: unknown) {
+      const name = context.name as string;
+      const bound = value.bind(this as object);
+      Object.defineProperty(this as object, name, {
+        value: bound,
+        configurable: true,
+        writable: true,
+      });
+    });
   };
 }

package/src/functions/debounce.ts

@@ -1,34 +1,31 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 export function Debounce(ms: number) {
   const timers = new WeakMap<object, ReturnType<typeof setTimeout>>();
 
   return function (
-    _target: object,
-    methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
-    return {
-      enumerable: false,
-      configurable: true,
-      get(this: object) {
-        const bound = (...args: unknown[]) => {
-          const existing = timers.get(this);
-          if (existing !== undefined) clearTimeout(existing);
+    value: (this: object, ...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
+    context.addInitializer(function (this: unknown) {
+      const instance = this as object;
+      const name = context.name as string;
+      const bound = (...args: unknown[]) => {
+        const existing = timers.get(instance);
+        if (existing !== undefined) clearTimeout(existing);
 
-          const timer = setTimeout(() => {
-            timers.delete(this);
-            originalMethod.apply(this, args);
-          }, ms);
+        const timer = setTimeout(() => {
+          timers.delete(instance);
+          value.apply(instance, args);
+        }, ms);
 
-          timers.set(this, timer);
-        };
-        Object.defineProperty(this, methodKey, {
-          value: bound,
-          configurable: true,
-          writable: true,
-        });
-        return bound;
-      },
-    };
+        timers.set(instance, timer);
+      };
+      Object.defineProperty(instance, name, {
+        value: bound,
+        configurable: true,
+        writable: true,
+      });
+    });
   };
 }

package/src/functions/log.ts

@@ -1,3 +1,5 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 export interface LogOptions {
   level?: "log" | "warn" | "error" | "debug";
   args?: boolean;
@@ -16,29 +18,29 @@ export function Log(options: LogOptions = {}) {
   } = options;
 
   return function (
-    _target: object,
-    methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
+    value: (this: object, ...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): (this: object, ...args: unknown[]) => unknown {
+    const methodKey = context.name as string;
 
-    descriptor.value = function (this: object, ...args: unknown[]) {
+    return function (this: object, ...args: unknown[]) {
       if (
         devOnly &&
         typeof process !== "undefined" &&
         process.env.NODE_ENV === "production"
       ) {
-        return originalMethod.apply(this, args);
+        return value.apply(this, args);
       }
 
-      const className = (this.constructor as { name?: string }).name ?? "Unknown";
+      const className =
+        (this.constructor as { name?: string }).name ?? "Unknown";
       const label = `[${className}.${methodKey}]`;
       const logger = console[level].bind(console);
 
       if (logArgs) logger(`${label} args:`, args);
 
       const start = time ? performance.now() : 0;
-      const output = originalMethod.apply(this, args);
+      const output = value.apply(this, args);
 
       if (output instanceof Promise) {
         return (output as Promise<unknown>)
@@ -62,7 +64,5 @@ export function Log(options: LogOptions = {}) {
 
       return output;
     };
-
-    return descriptor;
   };
 }

package/src/functions/memo.ts

@@ -1,4 +1,5 @@
-import { computed } from "@praxisjs/core";
+import type { StatefulComponent } from "@praxisjs/core";
+import { computed } from "@praxisjs/core/internal";
 import type { Computed } from "@praxisjs/shared";
 
 const instanceCache = new WeakMap<
@@ -46,18 +47,16 @@ function serializeArgs(args: unknown[]) {
 
 export function Memo() {
   return function (
-    _target: object,
-    methodName: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
-    descriptor.value = function (this: object, ...args: unknown[]) {
+    value: (this: object, ...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): (this: object, ...args: unknown[]) => unknown {
+    const methodName = context.name as string;
+    return function (this: object, ...args: unknown[]) {
       const argKey = serializeArgs(args);
       const memoized = getCache(this, methodName, argKey, () =>
-        originalMethod.apply(this, args),
+        value.apply(this, args),
       );
       return memoized();
     };
-    return descriptor;
   };
 }

package/src/functions/once.ts

@@ -1,22 +1,19 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 export function Once() {
   const called = new WeakMap<object, boolean>();
   const results = new WeakMap<object, unknown>();
 
   return function (
-    _target: object,
-    _methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
-
-    descriptor.value = function (this: object, ...args: unknown[]) {
+    value: (this: object, ...args: unknown[]) => unknown,
+    _context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): (this: object, ...args: unknown[]) => unknown {
+    return function (this: object, ...args: unknown[]) {
       if (called.get(this)) return results.get(this);
-      const result = originalMethod.apply(this, args);
+      const result = value.apply(this, args);
       called.set(this, true);
       results.set(this, result);
       return result;
     };
-
-    return descriptor;
   };
 }

package/src/functions/retry.ts

@@ -1,3 +1,5 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 export interface RetryOptions {
   delay?: number;
   backoff?: number;
@@ -8,21 +10,16 @@ export function Retry(maxAttempts: number, options: RetryOptions = {}) {
   const { delay = 0, backoff = 1, onRetry } = options;
 
   return function (
-    _target: object,
-    _methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (
-      ...args: unknown[]
-    ) => Promise<unknown>;
-
-    descriptor.value = async function (this: object, ...args: unknown[]) {
+    value: (this: object, ...args: unknown[]) => Promise<unknown>,
+    _context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): (this: object, ...args: unknown[]) => Promise<unknown> {
+    return async function (this: object, ...args: unknown[]) {
       let lastError: Error = new Error("Unknown error");
       let currentDelay = delay;
 
       for (let attempt = 1; attempt <= maxAttempts; attempt++) {
         try {
-          return await originalMethod.apply(this, args);
+          return await value.apply(this, args);
         } catch (e: unknown) {
           lastError = e instanceof Error ? e : new Error(String(e));
           if (attempt === maxAttempts) break;
@@ -37,7 +34,5 @@ export function Retry(maxAttempts: number, options: RetryOptions = {}) {
 
       throw lastError;
     };
-
-    return descriptor;
   };
 }

package/src/functions/throttle.ts

@@ -1,32 +1,29 @@
+import type { StatefulComponent } from "@praxisjs/core";
+
 export function Throttle(ms: number) {
   const lastRun = new WeakMap<object, number>();
 
   return function (
-    _target: object,
-    methodKey: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
-    const originalMethod = descriptor.value as (...args: unknown[]) => unknown;
-    return {
-      enumerable: false,
-      configurable: true,
-      get(this: object) {
-        const bound = (...args: unknown[]) => {
-          const now = Date.now();
-          const last = lastRun.get(this) ?? 0;
+    value: (this: object, ...args: unknown[]) => unknown,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
+    context.addInitializer(function (this: unknown) {
+      const instance = this as object;
+      const name = context.name as string;
+      const bound = (...args: unknown[]) => {
+        const now = Date.now();
+        const last = lastRun.get(instance) ?? 0;
 
-          if (now - last < ms) return;
+        if (now - last < ms) return;
 
-          lastRun.set(this, now);
-          return originalMethod.apply(this, args);
-        };
-        Object.defineProperty(this, methodKey, {
-          value: bound,
-          configurable: true,
-          writable: true,
-        });
-        return bound;
-      },
-    };
+        lastRun.set(instance, now);
+        return value.apply(instance, args);
+      };
+      Object.defineProperty(instance, name, {
+        value: bound,
+        configurable: true,
+        writable: true,
+      });
+    });
   };
 }