@praxisjs/decorators 0.4.2 → 0.5.0

package/src/events/on-command.ts

@@ -1,54 +1,29 @@
-import type { StatefulComponent } from "@praxisjs/core";
 
+import { createLifecycleMethodDecorator } from "../create-lifecycle-method-decorator";
 import { readProp } from "./helper";
 
 import type { Command } from "./command";
 
 export function OnCommand(propName: string) {
-  return function (
-    value: (this: StatefulComponent, ...args: unknown[]) => void,
-    context: ClassMethodDecoratorContext<StatefulComponent>,
-  ): void {
-    const cleanups = new WeakMap<object, () => void>();
-
-    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);
-      };
-    });
-  };
+  return createLifecycleMethodDecorator({
+    register(callback, instance) {
+      const command = readProp(instance, propName) as Command<unknown> | undefined;
+
+      if (!command) {
+        console.warn(
+          `[OnCommand] prop "${propName}" was not provided to ${(instance.constructor as { name?: string }).name ?? "unknown"}`,
+        );
+        return;
+      }
+
+      if (typeof command.subscribe !== "function") {
+        console.warn(
+          `[OnCommand] prop "${propName}" is not a valid Command in ${(instance.constructor as { name?: string }).name ?? "unknown"}`,
+        );
+        return;
+      }
+
+      return command.subscribe((...args: unknown[]) => { callback(...args); });
+    },
+  });
 }

package/src/functions/bind.ts

@@ -1,18 +1,7 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createMethodDecorator } from "../create-method-decorator";
 
 export function Bind() {
-  return function (
-    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,
-      });
-    });
-  };
+  return createMethodDecorator({
+    wrap: (original, instance) => original.bind(instance),
+  });
 }

package/src/functions/debounce.ts

@@ -1,31 +1,16 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createMethodDecorator } from "../create-method-decorator";
 
 export function Debounce(ms: number) {
-  const timers = new WeakMap<object, ReturnType<typeof setTimeout>>();
-
-  return function (
-    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(instance);
-          value.apply(instance, args);
+  return createMethodDecorator({
+    wrap(original, instance) {
+      let timer: ReturnType<typeof setTimeout> | undefined;
+      return (...args: unknown[]) => {
+        if (timer !== undefined) clearTimeout(timer);
+        timer = setTimeout(() => {
+          timer = undefined;
+          original.apply(instance, args);
         }, ms);
-
-        timers.set(instance, timer);
       };
-      Object.defineProperty(instance, name, {
-        value: bound,
-        configurable: true,
-        writable: true,
-      });
-    });
-  };
+    },
+  });
 }

package/src/functions/log.ts

@@ -1,4 +1,4 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createMethodDecorator } from "../create-method-decorator";
 
 export interface LogOptions {
   level?: "log" | "warn" | "error" | "debug";
@@ -17,52 +17,49 @@ export function Log(options: LogOptions = {}) {
     devOnly = true,
   } = options;
 
-  return function (
-    value: (this: object, ...args: unknown[]) => unknown,
-    context: ClassMethodDecoratorContext<StatefulComponent>,
-  ): (this: object, ...args: unknown[]) => unknown {
-    const methodKey = context.name as string;
+  return createMethodDecorator({
+    wrap(original, instance, name) {
+      return (...args: unknown[]) => {
+        if (
+          devOnly &&
+          typeof process !== "undefined" &&
+          process.env.NODE_ENV === "production"
+        ) {
+          return original.apply(instance, args);
+        }
 
-    return function (this: object, ...args: unknown[]) {
-      if (
-        devOnly &&
-        typeof process !== "undefined" &&
-        process.env.NODE_ENV === "production"
-      ) {
-        return value.apply(this, args);
-      }
+        const className =
+          (instance.constructor as { name?: string }).name ?? "Unknown";
+        const label = `[${className}.${name}]`;
+        const logger = console[level].bind(console);
 
-      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);
 
-      if (logArgs) logger(`${label} args:`, args);
+        const start = time ? performance.now() : 0;
+        const output = original.apply(instance, args);
 
-      const start = time ? performance.now() : 0;
-      const output = value.apply(this, args);
+        if (output instanceof Promise) {
+          return (output as Promise<unknown>)
+            .then((resolved) => {
+              const elapsed = time
+                ? ` (${(performance.now() - start).toFixed(2)}ms)`
+                : "";
+              if (result) logger(`${label} resolved:`, resolved, elapsed);
+              return resolved;
+            })
+            .catch((e: unknown) => {
+              logger(`${label} rejected:`, e);
+              throw e;
+            });
+        }
 
-      if (output instanceof Promise) {
-        return (output as Promise<unknown>)
-          .then((resolved) => {
-            const elapsed = time
-              ? ` (${(performance.now() - start).toFixed(2)}ms)`
-              : "";
-            if (result) logger(`${label} resolved:`, resolved, elapsed);
-            return resolved;
-          })
-          .catch((e: unknown) => {
-            logger(`${label} rejected:`, e);
-            throw e;
-          });
-      }
+        const elapsed = time
+          ? ` (${(performance.now() - start).toFixed(2)}ms)`
+          : "";
+        if (result) logger(`${label} returned:`, output, elapsed);
 
-      const elapsed = time
-        ? ` (${(performance.now() - start).toFixed(2)}ms)`
-        : "";
-      if (result) logger(`${label} returned:`, output, elapsed);
-
-      return output;
-    };
-  };
+        return output;
+      };
+    },
+  });
 }

package/src/functions/memo.ts

@@ -1,38 +1,7 @@
-import type { StatefulComponent } from "@praxisjs/core";
 import { computed } from "@praxisjs/core/internal";
 import type { Computed } from "@praxisjs/shared";
 
-const instanceCache = new WeakMap<
-  object,
-  Map<string, Map<string, Computed<unknown>>>
->();
-
-function getCache(
-  instance: object,
-  methodName: string,
-  argKey: string,
-  factory: () => unknown,
-): Computed<unknown> {
-  let methodMap = instanceCache.get(instance);
-  if (!methodMap) {
-    methodMap = new Map();
-    instanceCache.set(instance, methodMap);
-  }
-
-  let argMap = methodMap.get(methodName);
-  if (!argMap) {
-    argMap = new Map();
-    methodMap.set(methodName, argMap);
-  }
-
-  let cached = argMap.get(argKey);
-  if (!cached) {
-    cached = computed(factory);
-    argMap.set(argKey, cached);
-  }
-
-  return cached;
-}
+import { createMethodDecorator } from "../create-method-decorator";
 
 function serializeArgs(args: unknown[]) {
   if (args.length === 0) return "__no_args__";
@@ -46,17 +15,18 @@ function serializeArgs(args: unknown[]) {
 }
 
 export function Memo() {
-  return function (
-    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, () =>
-        value.apply(this, args),
-      );
-      return memoized();
-    };
-  };
+  return createMethodDecorator({
+    wrap(original, instance, _name) {
+      const cache = new Map<string, Computed<unknown>>();
+      return (...args: unknown[]) => {
+        const key = serializeArgs(args);
+        let memoized = cache.get(key);
+        if (!memoized) {
+          memoized = computed(() => original.apply(instance, args));
+          cache.set(key, memoized);
+        }
+        return memoized();
+      };
+    },
+  });
 }

package/src/functions/once.ts

@@ -1,19 +1,16 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createMethodDecorator } from "../create-method-decorator";
 
 export function Once() {
-  const called = new WeakMap<object, boolean>();
-  const results = new WeakMap<object, unknown>();
-
-  return function (
-    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 = value.apply(this, args);
-      called.set(this, true);
-      results.set(this, result);
-      return result;
-    };
-  };
+  return createMethodDecorator({
+    wrap(original, instance) {
+      let called = false;
+      let result: unknown;
+      return (...args: unknown[]) => {
+        if (called) return result;
+        result = original.apply(instance, args);
+        called = true;
+        return result;
+      };
+    },
+  });
 }

package/src/functions/retry.ts

@@ -1,4 +1,4 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createMethodDecorator } from "../create-method-decorator";
 
 export interface RetryOptions {
   delay?: number;
@@ -9,30 +9,29 @@ export interface RetryOptions {
 export function Retry(maxAttempts: number, options: RetryOptions = {}) {
   const { delay = 0, backoff = 1, onRetry } = options;
 
-  return function (
-    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;
+  return createMethodDecorator({
+    wrap(original, instance) {
+      return async (...args: unknown[]) => {
+        let lastError: Error = new Error("Unknown error");
+        let currentDelay = delay;
 
-      for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-        try {
-          return await value.apply(this, args);
-        } catch (e: unknown) {
-          lastError = e instanceof Error ? e : new Error(String(e));
-          if (attempt === maxAttempts) break;
-          onRetry?.(lastError, attempt);
+        for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+          try {
+            return await (original.apply(instance, args) as Promise<unknown>);
+          } catch (e: unknown) {
+            lastError = e instanceof Error ? e : new Error(String(e));
+            if (attempt === maxAttempts) break;
+            onRetry?.(lastError, attempt);
 
-          if (currentDelay > 0) {
-            await new Promise((res) => setTimeout(res, currentDelay));
-            currentDelay = Math.round(currentDelay * backoff);
+            if (currentDelay > 0) {
+              await new Promise((res) => setTimeout(res, currentDelay));
+              currentDelay = Math.round(currentDelay * backoff);
+            }
           }
         }
-      }
 
-      throw lastError;
-    };
-  };
+        throw lastError;
+      };
+    },
+  });
 }

package/src/functions/throttle.ts

@@ -1,29 +1,15 @@
-import type { StatefulComponent } from "@praxisjs/core";
+import { createMethodDecorator } from "../create-method-decorator";
 
 export function Throttle(ms: number) {
-  const lastRun = new WeakMap<object, number>();
-
-  return function (
-    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[]) => {
+  return createMethodDecorator({
+    wrap(original, instance) {
+      let last = 0;
+      return (...args: unknown[]) => {
         const now = Date.now();
-        const last = lastRun.get(instance) ?? 0;
-
         if (now - last < ms) return;
-
-        lastRun.set(instance, now);
-        return value.apply(instance, args);
+        last = now;
+        return original.apply(instance, args);
       };
-      Object.defineProperty(instance, name, {
-        value: bound,
-        configurable: true,
-        writable: true,
-      });
-    });
-  };
+    },
+  });
 }

package/src/functions/watch.ts

@@ -3,6 +3,8 @@ import { effect } from "@praxisjs/core/internal";
 import type { Computed } from "@praxisjs/shared";
 import { isComputed } from "@praxisjs/shared/internal";
 
+import { createLifecycleMethodDecorator } from "../create-lifecycle-method-decorator";
+
 type BaseComponentKeys = keyof StatefulComponent;
 
 type WatchableKeys<T> = {
@@ -54,42 +56,33 @@ export function Watch<
   T extends StatefulComponent,
   const Keys extends ReadonlyArray<WatchableKeys<T>>,
 >(...propNames: ValidateKeys<T, Keys>) {
-  return function (
-    value: (this: T, ...args: unknown[]) => void,
-    context: ClassMethodDecoratorContext<T>,
-  ): void {
-    const props = propNames as unknown as string[];
+  const props = propNames as unknown as string[];
 
-    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;
+  return createLifecycleMethodDecorator<T>({
+    register(callback, instance) {
+      const inst = instance as T & Record<string, unknown>;
 
-      instance.onMount = function (this: T & Record<string, unknown>) {
-        originalOnMount?.call(this);
+      if (props.length === 1) {
+        let oldVal = readValue(inst, props[0]);
+        return effect(() => {
+          const newVal = readValue(inst, props[0]);
+          if (!Object.is(newVal, oldVal)) {
+            callback(newVal, oldVal);
+            oldVal = newVal;
+          }
+        });
+      }
 
-        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;
-            }
-          });
+      const read = () =>
+        Object.fromEntries(props.map((p) => [p, readValue(inst, p)]));
+      let oldVals = read();
+      return effect(() => {
+        const newVals = read();
+        if (props.some((p) => !Object.is(newVals[p], oldVals[p]))) {
+          callback(newVals, oldVals);
+          oldVals = newVals;
         }
-      };
-    });
-  };
+      });
+    },
+  });
 }

package/src/functions/when.ts

@@ -1,42 +1,17 @@
-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 (
-    value: (this: StatefulComponent, val: unknown) => void,
-    context: ClassMethodDecoratorContext<StatefulComponent>,
-  ): void {
-    const cancels = new WeakMap<object, () => void>();
-
-    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 raw = (this as unknown as Record<string, unknown>)[propName];
-        const source = isComputed(raw)
-          ? (raw as Computed<unknown>)
-          : (raw as Signal<unknown>);
+import { createLifecycleMethodDecorator } from "../create-lifecycle-method-decorator";
 
-        const cancel = when(source, (val) => {
-          value.call(this, val);
-        });
-
-        cancels.set(this, cancel);
-      };
-
-      instance.onUnmount = function (this: StatefulComponent) {
-        originalOnUnmount?.call(this);
-        cancels.get(this)?.();
-        cancels.delete(this);
-      };
-    });
-  };
+export function When(propName: string) {
+  return createLifecycleMethodDecorator({
+    register(callback, instance) {
+      const raw = (instance as unknown as Record<string, unknown>)[propName];
+      const source = isComputed(raw)
+        ? (raw as Computed<unknown>)
+        : (raw as Signal<unknown>);
+      return when(source, (val) => { callback(val); });
+    },
+  });
 }

package/src/index.ts

@@ -21,5 +21,33 @@ export {
   initSlots,
   History,
   type WithHistory,
+  Compose,
+  Resource,
+  type ResourceInstance,
+  type ResourceOptions,
 } from "./properties";
 export { type Command, createCommand, Emit, OnCommand } from "./events";
+export {
+  createFieldDecorator,
+  type FieldBehavior,
+  type FieldBinding,
+} from "./create-field-decorator";
+export {
+  createClassDecorator,
+  ClassBehavior,
+  type ClassEnhancement,
+} from "./create-class-decorator";
+export {
+  createMethodDecorator,
+  type MethodBehavior,
+} from "./create-method-decorator";
+export {
+  createLifecycleMethodDecorator,
+  type LifecycleMethodBehavior,
+} from "./create-lifecycle-method-decorator";
+export {
+  createGetterDecorator,
+  type GetterBehavior,
+  createGetterObserverDecorator,
+  type GetterObserverBehavior,
+} from "./create-getter-decorator";

package/src/properties/compose.ts

@@ -0,0 +1,53 @@
+import type { StatefulComponent, Composable } from "@praxisjs/core";
+
+import { createFieldDecorator } from "../create-field-decorator";
+
+function isReactive(
+  value: unknown,
+): value is () => unknown {
+  return (
+    typeof value === "function" &&
+    ("__isSignal" in (value as object) || "__isComputed" in (value as object))
+  );
+}
+
+function buildView(bindings: Record<string, unknown>): object {
+  const view: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(bindings)) {
+    if (isReactive(value)) {
+      Object.defineProperty(view, key, {
+        get: () => (value as () => unknown)(),
+        enumerable: true,
+        configurable: true,
+      });
+    } else {
+      view[key] = value;
+    }
+  }
+  return view;
+}
+
+export function Compose(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ComposableClass: new (...args: any[]) => Composable,
+  ...ctorArgs: unknown[]
+) {
+  return createFieldDecorator({
+    bind(instance: StatefulComponent, _name: string, _initialValue: unknown) {
+      const resolvedArgs = ctorArgs.map((arg) =>
+        typeof arg === "string"
+          ? (instance as unknown as Record<string, unknown>)[arg]
+          : arg,
+      );
+
+      const composable = new ComposableClass(...resolvedArgs);
+      const view = buildView(composable.setup());
+
+      return {
+        descriptor: { get: () => view },
+        onMount: composable.onMount?.bind(composable),
+        onUnmount: composable.onUnmount?.bind(composable),
+      };
+    },
+  });
+}