observable

observable

Import

import { observable } from '@dev-suite/decorators/observable'

Category

• property

Use Case

React to property changes via callback.

Replaces

• Manual setter callback/event emission
• Repeated on-change wiring for fields

Example 1

Without decorator

class ThemeState {
  private _theme = 'light';

  get theme() { return this._theme; }
  set theme(next: string) {
    const prev = this._theme;
    this._theme = next;
    this.events.emit('theme_changed', { prev, next });
  }
}

With decorator

import { observable } from '@dev-suite/decorators/observable';

class ThemeState {
  @observable(({ previousValue, value }) => events.emit('theme_changed', { previousValue, value }))
  theme = 'light';
}

Why better

• Centralizes cross-cutting behavior.
• Method/class/property code stays focused on domain logic.

Example 2

Without decorator

class FormState {
  private _email = '';

  set email(next: string) {
    this._email = next;
    this.validator.schedule('email');
  }
}

With decorator

import { observable } from '@dev-suite/decorators/observable';

class FormState {
  @observable(() => validator.schedule('email'))
  email = '';
}

Why better

• Second scenario reuses same policy without duplication.
• Behavior is more consistent and easier to audit.