@praxisjs/decorators 1.6.1 → 2.0.0

package/src/create-getter-decorator.ts

@@ -1,26 +1,56 @@
-export interface GetterBehavior {
+import { assertMemberKind, describeValue } from "./field";
+import { addLifecycleHooks, addMountRegistration, type LifecycleCleanup } from "./lifecycle";
+
+type Getter<This = object, Value = unknown> = (this: This) => Value;
+
+/** A getter decorator usable on getters of classes extending `Host` whose type is assignable to `Value`. */
+export type GetterDecorator<Host = object, Value = unknown> = <This extends Host, V extends Value>(
+  target: (this: This) => V,
+  context: ClassGetterDecoratorContext<This, V>,
+) => (this: This) => V;
+
+/**
+ * What a shared getter decorator installs: `get` (the original getter when absent) and `set` are
+ * shared by every instance (`this` is the instance), so per-instance state belongs in symbol slots
+ * created in `init`.
+ */
+export interface GetterSetup<This = object, Value = unknown> {
+  get?(this: This): Value;
+  set?(this: This, value: Value): void;
+  /** Runs once per instance, before the class's fields are initialized. */
+  init?: (instance: This) => void;
+  onMount?: (instance: This) => void;
+  onUnmount?: (instance: This) => void;
+}
+
+export interface SharedGetterBehavior<Host = object, Value = unknown> {
+  /** Names the decorator in error messages, e.g. `"@Clamp()"`. */
+  label?: string;
+  /**
+   * Runs once per decorated getter, when the class is defined: returns the replacement getter, or
+   * a `GetterSetup`.
+   */
+  setup(
+    original: Getter<Host, Value>,
+    context: ClassGetterDecoratorContext<Host, Value>,
+  ): Getter<Host, Value> | GetterSetup<Host, Value>;
+}
+
+export interface SharedWritableGetterBehavior<Host = object, Value = unknown> {
+  /** Names the decorator in error messages, e.g. `"@Overridable()"`. */
+  label?: string;
+  /** Runs once per decorated getter, when the class is defined. */
+  setup(original: Getter<Host, Value>, context: ClassGetterDecoratorContext<Host, Value>): GetterSetup<Host, Value>;
+}
+
+export interface GetterBehavior<T = object> {
+  /** Names the decorator in error messages. */
+  label?: string;
   /**
    * Given the original getter and the current instance, returns a function
    * that produces the getter value. Called on every property access.
    */
-  wrap(
-    original: (this: object) => unknown,
-    instance: object,
-  ): () => unknown;
-}
-
-export function createGetterDecorator(behavior: GetterBehavior) {
-  return function <This, T>(
-    target: (this: This) => T,
-    _context: ClassGetterDecoratorContext<This, T>,
-  ): (this: This) => T {
-    return function (this: This): T {
-      return behavior.wrap(
-        target as (this: object) => unknown,
-        this as object,
-      )() as T;
-    };
-  };
+  wrap(original: (this: object) => unknown, instance: T): () => unknown;
 }
 
 export interface WritableGetterBinding {
@@ -28,64 +58,231 @@ export interface WritableGetterBinding {
   set?: (value: unknown) => void;
 }
 
-export interface WritableGetterBehavior {
+export interface WritableGetterBehavior<T = object> {
+  /** Names the decorator in error messages. */
+  label?: string;
+  /**
+   * Called once per instance during construction. Returns the get/set pair the property reads and
+   * writes through for that instance. If `set` is omitted, assigning the property throws a
+   * `TypeError`, as for a getter without a setter.
+   */
+  bind(instance: T, name: string | symbol, original: (this: object) => unknown): WritableGetterBinding;
+}
+
+export interface GetterObserverBehavior<T = object, Value = unknown> {
+  /** Names the decorator in error messages. */
+  label?: string;
   /**
-   * Called once per instance during construction. Returns the get/set pair
-   * that will be installed on the instance via `Object.defineProperty`.
-   * If `set` is omitted, the property is read-only at runtime (though TypeScript
-   * may still see a setter if one is declared in the class body).
+   * Called once per instance, while it is built and before its fields are initialized. Use it to
+   * set up observation without changing the getter's value. A function it returns runs when the
+   * instance unmounts.
    */
-  bind(
-    instance: object,
-    name: string | symbol,
-    original: (this: object) => unknown,
-  ): WritableGetterBinding;
-}
-
-export function createWritableGetterDecorator(behavior: WritableGetterBehavior) {
-  return function <This, T>(
-    target: (this: This) => T,
-    context: ClassGetterDecoratorContext<This, T>,
-  ): (this: This) => T {
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  observe?(getter: (this: object) => Value, instance: T, name: string): (() => void) | undefined | void;
+  /**
+   * Called on every mount of each instance, once its fields are set. What it returns (a stop
+   * function or an effect) is undone on unmount.
+   */
+  register?(getter: (this: object) => Value, instance: T, name: string): LifecycleCleanup;
+}
+
+// Replacement getter -> the getter it wraps. Lets a setter added by an inner decorator find the
+// prototype entry after outer getter decorators replaced its getter again.
+const wraps = new WeakMap<Getter, Getter>();
+
+function isFrom(get: Getter | undefined, target: Getter): boolean {
+  for (let g = get; g !== undefined; g = wraps.get(g)) if (g === target) return true;
+  return false;
+}
+
+/**
+ * Adds `set` to the class entry of the getter `get`: on the prototype (the class itself for a
+ * static getter) where it lives, found from the first instance. Returns false when the getter was
+ * not found, i.e. a decorator applied by hand, and defines the pair on `target` alone instead.
+ */
+// A property descriptor, read as data: its functions are only passed along, never called here.
+interface FoundDescriptor {
+  get?: Getter;
+  enumerable?: boolean;
+}
+
+function addSetter(
+  target: object,
+  context: ClassGetterDecoratorContext,
+  get: Getter,
+  set: NonNullable<PropertyDescriptor["set"]>,
+): boolean {
+  const name = context.name;
+  let fallback: FoundDescriptor | undefined;
+  for (
+    let owner = (context.static ? target : Object.getPrototypeOf(target)) as object | null;
+    owner !== null;
+    owner = Object.getPrototypeOf(owner) as object | null
+  ) {
+    const descriptor = Object.getOwnPropertyDescriptor(owner, name) as FoundDescriptor | undefined;
+    if (descriptor === undefined) continue;
+    if (isFrom(descriptor.get, get)) {
+      Object.defineProperty(owner, name, { get: descriptor.get, set, enumerable: descriptor.enumerable, configurable: true });
+      return true;
+    }
+    fallback ??= descriptor;
+  }
+  Object.defineProperty(target, name, { get: fallback?.get ?? get, set, enumerable: false, configurable: true });
+  return false;
+}
+
+interface SharedGetterLike {
+  label?: string;
+  setup(original: Getter, context: ClassGetterDecoratorContext): unknown;
+}
+
+function sharedGetter(behavior: SharedGetterLike) {
+  const label = behavior.label ?? "This getter decorator";
+  return function (target: Getter, context: ClassGetterDecoratorContext): Getter {
+    assertMemberKind(context, "getter", label);
+    const result = behavior.setup(target, context);
+    if (typeof result !== "object" && typeof result !== "function") {
+      throw new TypeError(`${label}: setup() must return a getter or a GetterSetup object, got ${describeValue(result)}.`);
+    }
+    if (result === null) {
+      throw new TypeError(`${label}: setup() must return a getter or a GetterSetup object, got null.`);
+    }
+    const spec = (typeof result === "function" ? { get: result } : result) as GetterSetup;
+    // eslint-disable-next-line @typescript-eslint/unbound-method -- installed on the class, which calls them with the instance as `this`
+    const { get = target, set, init, onMount, onUnmount } = spec;
+    if (typeof get !== "function") {
+      throw new TypeError(`${label}: setup() returned a "get" that is not a function.`);
+    }
+    if (get !== target) wraps.set(get, target);
+    const hooks = onMount !== undefined || onUnmount !== undefined;
+    if (hooks && context.static) {
+      throw new TypeError(`${label}: onMount/onUnmount need an instance getter, not the static "${String(context.name)}".`);
+    }
+    if (set !== undefined || init !== undefined || hooks) {
+      let installed = set === undefined;
+      context.addInitializer(function (this: unknown) {
+        const instance = this as object;
+        if (!installed) installed = addSetter(instance, context, get, set as NonNullable<PropertyDescriptor["set"]>);
+        init?.(instance);
+        if (hooks) addLifecycleHooks(instance, onMount, onUnmount);
+      });
+    }
+    return get;
+  };
+}
+
+function wrapGetterDecorator(behavior: GetterBehavior) {
+  const label = behavior.label ?? "This getter decorator";
+  return function <This, T>(target: (this: This) => T, context: ClassGetterDecoratorContext<This, T>): (this: This) => T {
+    assertMemberKind(context, "getter", label);
+    const getter = function (this: This): T {
+      return behavior.wrap(target as (this: object) => unknown, this as object)() as T;
+    };
+    wraps.set(getter as Getter, target as Getter);
+    return getter;
+  };
+}
+
+/**
+ * Builds a getter decorator that changes what a getter returns.
+ *
+ * With `setup`, the recommended form, the replacement getter is created once per decorated getter
+ * and shared by every instance: neither building an instance nor reading the getter allocates.
+ *
+ * With `wrap`, a function is created on every read.
+ */
+export function createGetterDecorator<Host = object, Value = unknown>(
+  behavior: SharedGetterBehavior<Host, Value>,
+): GetterDecorator<Host, Value>;
+export function createGetterDecorator(
+  behavior: GetterBehavior,
+): <This, T>(target: (this: This) => T, context: ClassGetterDecoratorContext<This, T>) => (this: This) => T;
+export function createGetterDecorator(behavior: SharedGetterBehavior | GetterBehavior): unknown {
+  if (!("setup" in behavior)) return wrapGetterDecorator(behavior);
+  return sharedGetter(behavior as SharedGetterLike);
+}
+
+function bindWritableGetter(behavior: WritableGetterBehavior) {
+  const label = behavior.label ?? "This getter decorator";
+  return function <This, T>(target: (this: This) => T, context: ClassGetterDecoratorContext<This, T>): (this: This) => T {
+    assertMemberKind(context, "getter", label);
+    const name = context.name;
+    // Each instance's binding lives in this slot, read through one accessor pair on the class.
+    const slot = Symbol(`praxis.getter.${String(name)}`);
+    type Host = Record<symbol, WritableGetterBinding | undefined>;
+    const original = target as (this: object) => unknown;
+    const bindingOf = (instance: Host): WritableGetterBinding =>
+      (instance[slot] ??= behavior.bind(instance, name, original));
+    const get = function (this: Host): T {
+      return bindingOf(this).get() as T;
+    };
+    const set = function (this: Host, value: unknown): void {
+      const write = bindingOf(this).set;
+      if (write === undefined) throw new TypeError(`Cannot set property ${String(name)}, which has only a getter.`);
+      write(value);
+    };
+    wraps.set(get as Getter, original);
+    let installed = false;
     context.addInitializer(function (this: unknown) {
-      const instance = this as object;
-      const binding = behavior.bind(instance, context.name, target as (this: object) => unknown);
-      const descriptor: PropertyDescriptor = {
-        get: binding.get,
-        configurable: true,
-        enumerable: false,
-      };
-      if (binding.set !== undefined) descriptor.set = binding.set;
-      Object.defineProperty(instance, context.name, descriptor);
+      const instance = this as Host;
+      instance[slot] = behavior.bind(instance, name, original);
+      if (!installed) installed = addSetter(instance, context as ClassGetterDecoratorContext, get as Getter, set);
     });
-    return target;
+    return get as (this: This) => T;
   };
 }
 
-export interface GetterObserverBehavior {
-  /**
-   * Called once per instance when the class is initialized.
-   * Use this to set up observation side-effects on the getter without
-   * changing its return value (e.g. tracking changes for devtools).
-   */
-  observe(
-    getter: (this: object) => unknown,
-    instance: object,
-    name: string,
-  ): void;
+/**
+ * Builds a getter decorator that owns writes to the property as well as reads.
+ *
+ * With `setup`, the recommended form, `get` and `set` are created once per decorated getter and
+ * shared by every instance.
+ *
+ * With `bind`, a get/set pair is created for each instance while it is built.
+ */
+export function createWritableGetterDecorator<Host = object, Value = unknown>(
+  behavior: SharedWritableGetterBehavior<Host, Value>,
+): GetterDecorator<Host, Value>;
+export function createWritableGetterDecorator(
+  behavior: WritableGetterBehavior,
+): <This, T>(target: (this: This) => T, context: ClassGetterDecoratorContext<This, T>) => (this: This) => T;
+export function createWritableGetterDecorator(
+  behavior: SharedWritableGetterBehavior | WritableGetterBehavior,
+): unknown {
+  if (!("setup" in behavior)) return bindWritableGetter(behavior);
+  return sharedGetter(behavior as SharedGetterLike);
 }
 
-export function createGetterObserverDecorator(behavior: GetterObserverBehavior) {
-  return function <This, T>(
-    target: (this: This) => T,
-    context: ClassGetterDecoratorContext<This, T>,
+/**
+ * Builds a getter decorator that observes the getter (for logging, devtools, syncing) without
+ * changing its value: `observe` runs once per instance while it is built, `register` on every mount.
+ */
+export function createGetterObserverDecorator<T = object, Value = unknown>(
+  behavior: GetterObserverBehavior<T, Value>,
+) {
+  const label = behavior.label ?? "This getter decorator";
+  if (behavior.observe === undefined && behavior.register === undefined) {
+    throw new TypeError(`${label}: createGetterObserverDecorator() needs observe() or register().`);
+  }
+  return function <This extends T, V extends Value>(
+    target: (this: This) => V,
+    context: ClassGetterDecoratorContext<This, V>,
   ): void {
+    assertMemberKind(context, "getter", label);
+    const name = context.name as string;
+    const getter = target as unknown as (this: object) => Value;
+    const observes = behavior.observe !== undefined;
+    const mount =
+      behavior.register === undefined
+        ? undefined
+        : (instance: T, read: (this: object) => Value) => behavior.register?.(read, instance, name);
     context.addInitializer(function (this: unknown) {
-      behavior.observe(
-        target as (this: object) => unknown,
-        this as object,
-        context.name as string,
-      );
+      const instance = this as T & object;
+      if (observes) {
+        const cleanup = behavior.observe?.(getter, instance, name);
+        if (typeof cleanup === "function") addLifecycleHooks(instance, undefined, cleanup);
+      }
+      if (mount !== undefined) addMountRegistration(instance, mount, getter);
     });
   };
 }

package/src/create-lifecycle-method-decorator.ts

@@ -1,39 +1,61 @@
 import type { StatefulComponent } from "@praxisjs/core";
 
-export interface LifecycleMethodBehavior<
-  T extends StatefulComponent = StatefulComponent,
-> {
-  register(
-    callback: (...args: unknown[]) => void,
-    instance: T,
-  ): (() => void) | undefined;
+import { assertMemberKind } from "./field";
+import { addMountRegistration, type LifecycleCleanup } from "./lifecycle";
+
+export type { LifecycleCleanup };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface LifecycleMethodBehavior<T extends object = StatefulComponent, Args extends unknown[] = any[]> {
+  /** Names the decorator in error messages, e.g. `"@OnResize()"`. */
+  label?: string;
+  /**
+   * Runs on every mount of each instance with the method bound to it. Returns what undoes the
+   * registration on unmount, if anything.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  register(callback: (...args: Args) => void, instance: T, name: string): (() => void) | undefined | void;
 }
 
-export function createLifecycleMethodDecorator<
-  T extends StatefulComponent = StatefulComponent,
->(behavior: LifecycleMethodBehavior<T>) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyMethod = (this: any, ...args: any[]) => void;
+
+/**
+ * Builds a method decorator that calls `start` on every mount and undoes what it returned on
+ * unmount.
+ */
+export function lifecycleMethodDecorator<T extends object>(
+  start: (instance: T, method: AnyMethod, name: string) => LifecycleCleanup,
+  label = "This lifecycle method decorator",
+) {
   return function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: (this: T, ...args: any[]) => void,
-    _context: ClassMethodDecoratorContext<T>,
+    context: ClassMethodDecoratorContext<T>,
   ): void {
-    _context.addInitializer(function (this: unknown) {
-      const instance = this as T;
-      const prevMount = instance.onMount?.bind(instance);
-      const prevUnmount = instance.onUnmount?.bind(instance);
-      let cleanup: (() => void) | undefined;
-
-      instance.onMount = function (this: T) {
-        prevMount?.call(this);
-        const result = behavior.register(value.bind(this), this);
-        if (result) cleanup = result;
-      };
-
-      instance.onUnmount = function (this: T) {
-        prevUnmount?.call(this);
-        cleanup?.();
-        cleanup = undefined;
-      };
+    assertMemberKind(context, "method", label);
+    if (context.static) {
+      throw new TypeError(`${label} decorates instance methods only, not the static method "${String(context.name)}".`);
+    }
+    const name = String(context.name);
+    const run = (instance: T, method: AnyMethod) => start(instance, method, name);
+    context.addInitializer(function (this: T) {
+      addMountRegistration(this, run, value);
     });
   };
 }
+
+/**
+ * Builds a method decorator that registers the method somewhere on every mount (an event listener,
+ * a subscription) and undoes it on unmount.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createLifecycleMethodDecorator<T extends object = StatefulComponent, Args extends unknown[] = any[]>(
+  behavior: LifecycleMethodBehavior<T, Args>,
+): <This extends T>(value: (this: This, ...args: Args) => void, context: ClassMethodDecoratorContext<This>) => void {
+  const label = behavior.label ?? "This lifecycle method decorator";
+  return lifecycleMethodDecorator<T>(
+    (instance, method, name) => behavior.register(method.bind(instance) as (...args: Args) => void, instance, name),
+    label,
+  ) as never;
+}

package/src/create-method-decorator.ts

@@ -1,29 +1,135 @@
 import type { StatefulComponent } from "@praxisjs/core";
 
-export interface MethodBehavior {
+import { assertMemberKind, describeValue } from "./field";
+import { addLifecycleHooks } from "./lifecycle";
+import { type AnyMethod, sharedMethod } from "./shared-method";
+
+export type { AnyMethod };
+
+export interface MethodBehavior<T = object> {
+  /** Names the decorator in error messages, e.g. `"@Confirm()"`. */
+  label?: string;
+  /**
+   * Runs once per instance, while it is built: returns the function that runs in place of the
+   * method for that instance.
+   */
   wrap(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     original: (...args: any[]) => any,
-    instance: object,
+    instance: T,
     name: string,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): (...args: any[]) => any;
 }
 
-export function createMethodDecorator(behavior: MethodBehavior) {
+/** A replacement method, with hooks that run on every mount and unmount of each instance. */
+export interface MethodSetup<This = object, M extends AnyMethod = AnyMethod> {
+  method: M;
+  onMount?: (instance: This) => void;
+  onUnmount?: (instance: This) => void;
+}
+
+export interface SharedMethodBehavior<Host = object, M extends AnyMethod = AnyMethod> {
+  /** Names the decorator in error messages, e.g. `"@Confirm()"`. */
+  label?: string;
+  /**
+   * Runs once per decorated method, when the class is defined: returns the replacement, shared by
+   * every instance (`this` is the instance), or a `MethodSetup` that also has lifecycle hooks.
+   *
+   * `M` is never inferred from it, so a decorator fits every method unless `M` is given.
+   */
+  setup(
+    original: NoInfer<M>,
+    context: ClassMethodDecoratorContext<Host, NoInfer<M>>,
+  ): NoInfer<M> | MethodSetup<Host, NoInfer<M>>;
+}
+
+/** A method decorator usable on methods of classes extending `Host` whose type is assignable to `M`. */
+export type MethodDecorator<Host = object, M extends AnyMethod = AnyMethod> = <This extends Host, V extends M>(
+  value: V,
+  context: ClassMethodDecoratorContext<This, V>,
+) => V;
+
+const DEFAULT_LABEL = "This method decorator";
+
+function sharedMethodDecorator<Host, M extends AnyMethod>(
+  behavior: SharedMethodBehavior<Host, M>,
+): MethodDecorator<Host, M> {
+  const label = behavior.label ?? DEFAULT_LABEL;
+  return function (value, context) {
+    assertMemberKind(context, "method", label);
+    const result: unknown = behavior.setup(value, context as unknown as ClassMethodDecoratorContext<Host, M>);
+    const setup = typeof result === "object" && result !== null ? (result as MethodSetup) : undefined;
+    const method: unknown = setup === undefined ? result : setup.method;
+    if (typeof method !== "function") {
+      throw new TypeError(`${label}: setup() must return a function or { method }, got ${describeValue(method)}.`);
+    }
+    if (setup !== undefined && (setup.onMount !== undefined || setup.onUnmount !== undefined)) {
+      if (context.static) {
+        throw new TypeError(`${label}: onMount/onUnmount need an instance method, not the static "${String(context.name)}".`);
+      }
+      const { onMount, onUnmount } = setup;
+      context.addInitializer(function () {
+        addLifecycleHooks(this as object, onMount, onUnmount);
+      });
+    }
+    return sharedMethod(context, value, method as AnyMethod) as typeof value;
+  };
+}
+
+function wrapMethodDecorator<T>(behavior: MethodBehavior<T>) {
+  const label = behavior.label ?? DEFAULT_LABEL;
   return function (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: (this: object, ...args: any[]) => any,
-    context: ClassMethodDecoratorContext<StatefulComponent>,
-  ): void {
-    context.addInitializer(function (this: unknown) {
-      const instance = this as object;
-      const name = context.name as string;
-      Object.defineProperty(instance, name, {
-        value: behavior.wrap(value, instance, name),
-        configurable: true,
-        writable: true,
-      });
+    context: ClassMethodDecoratorContext,
+  ) {
+    assertMemberKind(context, "method", label);
+    const name = context.name as string;
+    // Each instance's wrapper lives in this slot, called through one replacement on the prototype:
+    // no property definition per instance, and decorators stacked around this one keep working.
+    const slot = Symbol(`praxis.method.${name}`);
+    type Host = Record<symbol, AnyMethod | undefined>;
+    const wrapFor = (instance: object): AnyMethod => {
+      const wrapped: unknown = behavior.wrap(value, instance as T, name);
+      if (typeof wrapped !== "function") {
+        throw new TypeError(`${label}: wrap() must return a function, got ${describeValue(wrapped)}.`);
+      }
+      return wrapped as AnyMethod;
+    };
+    const method = function (this: Host, ...args: unknown[]): unknown {
+      // An object the constructor did not build (Object.create(prototype)) gets its wrapper here.
+      return (this[slot] ??= wrapFor(this)).apply(this, args) as unknown;
+    };
+    context.addInitializer(function () {
+      (this as Host)[slot] = wrapFor(this as object);
     });
+    return sharedMethod(context, value, method);
   };
 }
+
+/**
+ * Builds a method decorator.
+ *
+ * With `setup`, the recommended form, the replacement is created once per decorated method and
+ * shared by every instance, which keeps any state in symbol slots: building an instance costs
+ * nothing.
+ *
+ * With `wrap`, a wrapper is created for each instance while it is built.
+ *
+ * Either way, reading the method from an instance returns it bound to that instance, the same
+ * function on every read, so `onClick={this.save}` works.
+ */
+export function createMethodDecorator<Host = object, M extends AnyMethod = AnyMethod>(
+  behavior: SharedMethodBehavior<Host, M>,
+): MethodDecorator<Host, M>;
+export function createMethodDecorator<T = object>(
+  behavior: MethodBehavior<T>,
+): (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: (this: object, ...args: any[]) => any,
+  context: ClassMethodDecoratorContext<StatefulComponent>,
+) => void;
+export function createMethodDecorator(behavior: SharedMethodBehavior | MethodBehavior): unknown {
+  return "setup" in behavior ? sharedMethodDecorator(behavior) : wrapMethodDecorator(behavior);
+}

package/src/events/command.ts

@@ -1,4 +1,4 @@
-import { createFieldDecorator } from "../create-field-decorator";
+import { type FieldDecorator, type FieldHost, sharedField } from "../field";
 
 export interface Command<T = void> {
   trigger(arg: T): void;
@@ -19,13 +19,15 @@ export function createCommand<T = void>(): Command<T> {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
-export function Command<T = void>() {
-  return createFieldDecorator({
-    bind(_instance, _name, _initialValue) {
-      const command = createCommand<T>();
-      return {
-        descriptor: { get: () => command },
-      };
-    },
+export function Command<T = void>(): FieldDecorator {
+  return sharedField((name) => {
+    const command = Symbol(`praxis.command.${name}`);
+    return {
+      descriptor: {
+        get(this: FieldHost) {
+          return (this[command] ??= createCommand<T>());
+        },
+      },
+    };
   });
 }