aurelia-watch-decorator v0.0.9

Aurelia Watch Decorator

Installation

npm install aurelia-watch-decorator

API

Use @watch decorator on a custom element, or a custom attribute class:

import { watch } from 'aurelia-watch-decorator';

@watch(...)
class Abc {}

Or a method of a class:

import { watch } from 'aurelia-watch-decorator';

class Abc {
  @watch(...)
  log() {}
}

Watch parameters

// on class
@watch(expressionOrPropertyAccessFn, changeHandlerOrCallback)
class MyClass {}

// on method
class MyClass {
  @watch(expressionOrPropertyAccessFn)
  someMethod() {}
}

Usage examples

There is one main exports of this plugin: watch. watch is a decorator that can be used per following examples:

@watch('counter', (newValue, oldValue, app) => app.log(newValue))
class App {

  counter = 0;

  log(whatToLog) {
    console.log(whatToLog);
  }
}

❗❗❗❗ method name will be used to resolve the function ONCE, which means changing method after the instance has been created will not be recognised.

@watch('counter', 'log')
class App {

  counter = 0;

  log(whatToLog) {
    console.log(whatToLog);
  }
}

@watch('counter', function(newValue, oldValue, app) {
  app.log(newValue);
  // or use this, it will point to the instance of this class
  this.log(newValue);
})
class App {

  counter = 0;

  log(whatToLog) {
    console.log(whatToLog);
  }
}

@watch(function (abc) { return counter }, (newValue, oldValue, app) => app.log(newValue))
class App {

  counter = 0;

  log(whatToLog) {
    console.log(whatToLog);
  }
}

@watch(abc => abc.counter, (newValue, oldValue, app) => app.log(newValue))
class App {

  counter = 0;

  log(whatToLog) {
    console.log(whatToLog);
  }
}

class App {

  counter = 0;

  @watch('counter')
  log(whatToLog) {
    console.log(whatToLog);
  }
}

class App {

  counter = 0;

  @watch(function(abc) { return abc.counter })
  log(whatToLog) {
    console.log(whatToLog);
  }
}

class App {

  counter = 0;

  @watch(abc => abc.counter)
  log(whatToLog) {
    console.log(whatToLog);
  }
}

Notes

• The parser for function as watch expression is somewhat naive, it won't be able to handle complex expression. And it's discouraged to do so, if you need to observe a complex computed expression, maybe try a getter.
• This plugin is planned to be a core part of v2. Please help file issues for ergonomic value of this plugin, so we can evaluate it for v2.