Decorators

This version is deprecated

This documentation is for use-less-react v0.x, which has been deprecated.
See v1.0 documentation for the current API.

Decorators for reactive classes in use-less-react v0.x.

---

@Notifies

The @Notifies decorator automatically triggers updates for one or more reactive properties when a method executes.

Example

import { PubSub, Notifies } from '@dxbox/use-less-react/classes';

class Counter extends PubSub {
  count = 0;

  @Notifies('count')
  increment() {
    this.count++;
  }
}

When increment() is called, any subscribed components will automatically re-render with the updated count value.

When not to use @Notifies

You should not use @Notifies when properties should be notified conditionally:

class Counter extends PubSub {
  count = 0;

  setCount(value: number) {
    if (value > 0) {
      this.count = value;
      this.notify('count'); // call notify manually
    }
  }
}

---

@DependsOn

The @DependsOn decorator establishes reactive dependencies between getters. When dependent properties are updated, computed properties are automatically notified.

Example

import { PubSub, DependsOn } from '@dxbox/use-less-react/classes';

class Person extends PubSub {
  firstName = '';
  lastName = '';

  @DependsOn('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Whenever firstName or lastName is notified, fullName will also be notified.

Note: Works only on classes extending or mixing in PubSub. Circular dependencies must be avoided.

---

@SerializableClass

The @SerializableClass decorator marks classes as serializable. It's a meta-decorator that serves as a developer hint and validation tool.

Example

import { SerializableClass } from '@dxbox/use-less-react/classes';

@SerializableClass()
class UserStore {
  name = 'John';

  static readonly serialName: string = 'UserStore';

  static hydrate(data: object): UserStore {
    const store = new UserStore();
    store.name = data.name;
    return store;
  }

  dehydrate(): object {
    return { name: this.name };
  }
}

The decorator ensures the class has serialName, hydrate, and dehydrate methods.

---

Next: See Client API for React hooks.

Migration: See v1.0 Decorators for the modern equivalent.