@praxisjs/decorators 0.2.0 → 0.3.0

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,
+      });
+    });
   };
 }

package/src/functions/watch.ts

@@ -1,7 +1,9 @@
-import { type BaseComponent, effect } from "@praxisjs/core";
-import { type Computed, isComputed } from "@praxisjs/shared";
+import type { StatefulComponent } from "@praxisjs/core";
+import { effect } from "@praxisjs/core/internal";
+import type { Computed } from "@praxisjs/shared";
+import { isComputed } from "@praxisjs/shared/internal";
 
-type BaseComponentKeys = keyof BaseComponent;
+type BaseComponentKeys = keyof StatefulComponent;
 
 type WatchableKeys<T> = {
   [K in Exclude<keyof T, BaseComponentKeys>]: T[K] extends (
@@ -29,15 +31,17 @@ type NoDuplicates<
   : Keys;
 
 type ValidateKeys<
-  T extends BaseComponent,
+  T extends StatefulComponent,
   Keys extends ReadonlyArray<WatchableKeys<T>>,
 > = NoDuplicates<[...Keys]> extends Keys ? Keys : NoDuplicates<[...Keys]>;
 
 type Unwrap<T> =
   T extends Computed<infer U> ? U : T extends () => infer U ? U : T;
 
-export type WatchVal<T extends BaseComponent, K extends keyof T> = Unwrap<T[K]>;
-export type WatchVals<T extends BaseComponent, K extends keyof T> = {
+export type WatchVal<T extends StatefulComponent, K extends keyof T> = Unwrap<
+  T[K]
+>;
+export type WatchVals<T extends StatefulComponent, K extends keyof T> = {
   [P in K]: Unwrap<T[P]>;
 };
 
@@ -46,54 +50,46 @@ function readValue(instance: Record<string, unknown>, key: string): unknown {
   return isComputed(raw) ? (raw as Computed<unknown>)() : raw;
 }
 
-function injectOnMount(
-  target: object,
-  fn: (this: Record<string, unknown>) => void,
-): void {
-  const t = target as { onMount?: () => void };
-  const originalMethod = t.onMount;
-  t.onMount = function (this: Record<string, unknown>) {
-    originalMethod?.call(this);
-    fn.call(this);
-  };
-}
-
 export function Watch<
-  T extends BaseComponent,
+  T extends StatefulComponent,
   const Keys extends ReadonlyArray<WatchableKeys<T>>,
 >(...propNames: ValidateKeys<T, Keys>) {
   return function (
-    target: T,
-    _key: string,
-    descriptor: PropertyDescriptor,
-  ): PropertyDescriptor {
+    value: (this: T, ...args: unknown[]) => void,
+    context: ClassMethodDecoratorContext<T>,
+  ): void {
     const props = propNames as unknown as string[];
-    const method = descriptor.value as (this: Record<string, unknown>, ...args: unknown[]) => void;
 
-    injectOnMount(target, function (this) {
-      if (props.length === 1) {
-        let oldVal = readValue(this, props[0]);
-        effect(() => {
-          const newVal = readValue(this, props[0]);
-          if (!Object.is(newVal, oldVal)) {
-            method.call(this, newVal, oldVal);
-            oldVal = newVal;
-          }
-        });
-      } else {
-        const read = () =>
-          Object.fromEntries(props.map((p) => [p, readValue(this, p)]));
-        let oldVals = read();
-        effect(() => {
-          const newVals = read();
-          if (props.some((p) => !Object.is(newVals[p], oldVals[p]))) {
-            method.call(this, newVals, oldVals);
-            oldVals = newVals;
-          }
-        });
-      }
-    });
+    context.addInitializer(function (this: unknown) {
+      const instance = this as T & Record<string, unknown>;
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const originalOnMount = instance.onMount;
+
+      instance.onMount = function (this: T & Record<string, unknown>) {
+        originalOnMount?.call(this);
 
-    return descriptor;
+        if (props.length === 1) {
+          let oldVal = readValue(this, props[0]);
+          effect(() => {
+            const newVal = readValue(this, props[0]);
+            if (!Object.is(newVal, oldVal)) {
+              value.call(this as T, newVal, oldVal);
+              oldVal = newVal;
+            }
+          });
+        } else {
+          const read = () =>
+            Object.fromEntries(props.map((p) => [p, readValue(this, p)]));
+          let oldVals = read();
+          effect(() => {
+            const newVals = read();
+            if (props.some((p) => !Object.is(newVals[p], oldVals[p]))) {
+              value.call(this as T, newVals, oldVals);
+              oldVals = newVals;
+            }
+          });
+        }
+      };
+    });
   };
 }

package/src/functions/when.ts

@@ -1,44 +1,42 @@
-import { type BaseComponent, when } from "@praxisjs/core";
-import { isComputed } from "@praxisjs/shared";
+import type { StatefulComponent } from "@praxisjs/core";
+import { when } from "@praxisjs/core/internal";
+import type { Computed, Signal } from "@praxisjs/shared";
+import { isComputed } from "@praxisjs/shared/internal";
 
 export function When(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 (value: unknown) => void;
+    value: (this: StatefulComponent, val: unknown) => void,
+    context: ClassMethodDecoratorContext<StatefulComponent>,
+  ): void {
     const cancels = new WeakMap<object, () => void>();
 
-    (target as { onMount?(): void }).onMount = function (this: BaseComponent) {
-      originalOnMount?.call(this);
+    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;
 
-      const instance = this as unknown as Record<string, unknown>;
-      const source = () => {
-        const raw = instance[propName];
-        return isComputed(raw) ? (raw as unknown as () => unknown)() : raw;
-      };
+      instance.onMount = function (this: StatefulComponent) {
+        originalOnMount?.call(this);
 
-      const cancel = when(source, (value) => {
-        method.call(this, value);
-      });
+        const raw = (this as unknown as Record<string, unknown>)[propName];
+        const source = isComputed(raw)
+          ? (raw as Computed<unknown>)
+          : (raw as Signal<unknown>);
 
-      cancels.set(this, cancel);
-    };
+        const cancel = when(source, (val) => {
+          value.call(this, val);
+        });
 
-    (target as { onUnmount?(): void }).onUnmount = function (
-      this: BaseComponent,
-    ) {
-      originalOnUnmount?.call(this);
-      cancels.get(this)?.();
-      cancels.delete(this);
-    };
+        cancels.set(this, cancel);
+      };
 
-    return descriptor;
+      instance.onUnmount = function (this: StatefulComponent) {
+        originalOnUnmount?.call(this);
+        cancels.get(this)?.();
+        cancels.delete(this);
+      };
+    });
   };
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-export { Component, Memoize, Lazy, Virtual } from "./component";
+export { Component, Lazy, Virtual } from "./component";
 export {
   Memo,
   Bind,
@@ -12,5 +12,13 @@ export {
   type WatchVal,
   type WatchVals,
 } from "./functions";
-export { Prop, State, Persisted, Slot, initSlots, History, type WithHistory } from "./properties";
+export {
+  Prop,
+  State,
+  Persisted,
+  Slot,
+  initSlots,
+  History,
+  type WithHistory,
+} from "./properties";
 export { type Command, createCommand, Emit, OnCommand } from "./events";