Nearly Past Midnight

    TypeScript icon, indicating that this package has built-in type declarations

    0.5.1 • Public • Published


    A plugin that provides enhanced @bindable and @observable decorators for Aurelia applications

    • Provides coercion support for decorator @observable, @bindable
    • Provides ability to create custom @observable with fluent syntax: @observable.custom / @observable.custom()
    • provide 4 base custom observables:, @observable.number, @observable.string, @observable.boolean, 5 for @bindable with extra built-in: @bindable.booleanAttr

    Installation & Reminder

    npm i aurelia-typed-observable-plugin

    The decorators (@observable and @bindable) should be imported from this plugin, not the built in one of aurelia, like the following:

    // from Aurelia
    import { bindable, observable } from 'aurelia-framework';
    // from plugin
    import { bindable, observable } from 'aurelia-typed-observable-plugin';

    The two decorators are drop-in replacement for built-in decorators of Aurelia, no extra work needed to use them beside importing them from this plugin. This plugin is an attempt to request for comment from anyone who interested in the features feature. It was originally intended to be part of the core, but there is concern it would be hard to support down the road. You can find original PR at aurelia-binding ( and aurelia-templating (

    Most common usecase

    • Boolean bindable properties to make custom elements behave like buit in boolean:
      // view model
      export class VideoPlayer {
        // do it yourself
          coerce(val) {
            if (val || val === '') {
              return true;
            return false;
        // or use built in

    All of the following, will be converted to true, which matches native behavior.

      <!-- app.html -->
        <video-player playing></video-player>
        <video-player playing=''></video-player>
        <video-player playing='true'></video-player>
        <video-player playing='playing'></video-player>
        <!-- instead of specifying command to make it a boolean -->
        <video-player playing.bind='true'></video-player>


    With normal syntax

    class MyViewModel {
      @observable({ coerce: 'number' }) numProp;
      @observable({ coerce: 'boolean' }) boolProp;
      @observable({ coerce: val => convertValue(val) }) customCoerceProp;

    Using metadata

    import {metadata} from 'aurelia-metadata';
    class MyViewModel {
      @Reflect.metadata(metadata.propertyType, Number)
    var instance = new MyViewModel();
    instance.num = '4';
    instance.num; // <====== 4

    TypeScript users can achieve above result (metadata) by simpler code:

    class MyViewModel {
      @observable num: number;
    var instance = new MyViewModel();
    instance.num = '4';
    instance.num; // <===== 4 , with compile error though

    ---- steps For using metadata:

    1. Enable emit decorator metadata, instruction: Instruction for the compiler to emit decorator metadata TypeScript decorator doc

    2. Enable property type flag for each deorator, as by default, it is off to avoid breaking your code when opt-ed in, like following:

      import {
      } from 'aurelia-typed-observable-plugin';

      They are only needed to be called once.


    All coerce type will be resolved to a string, which then is used to get the converter function in coerceFunctions export of this module. So, to extend or modify basic implementations:

    import {coerceFunctions} from 'aurelia-typed-observable-plugin';
    // Modify built in
    coerceFunctions.string = function(a) {
      return a === null || a === undefined ? '' : a.toString();
    // Extend
    coerceFunctions.point = function(a) {
      return a.split(' ').map(parseFloat).slice(0, 2);
    // Usage of 'point' coerces defined above:
    class MyLine {
      @observable({ coerce: 'point' }) point1;
      @observable({ coerce: 'point' }) point2;

    For TS users or JS users who want to use metadata, to extend coerce mapping:

    import {
    } from 'aurelia-typed-observable-plugin';
    // use static class method
    class Point {
      static coerce(value) {
        return new Point(value);
    mapCoerceFunction(Point, 'point');
    // or just pass a 3rd parameter, fallback to static coerce method when 3rd param omitted:
    mapCoerceFunction(Point, 'point', val => new Point(val));
    // decorator usage:
    // TypeScript
    class MyLine {
      @observable point1: Point
      @observable point2: Point
    // JavaScript
    class MyLine {
      @Reflect.metatata('design:type', Point)
      // or like this
      @observable({ coerce: 'point' })

    With fluent syntax

    class MyLine {
      @observable.number x1
      @observable.number() y1
      @observable.number() x2
      @observable.number y2
    var line = new MyLine();
    line.x1 = '15';
    line.x1; // <======= 15

    To built your own fluent syntax observable:

    import {
    } from 'aurelia-typed-observable-plugin'
    coerceFunctions.point = function(value) {
      return value.split(' ').map(parseFloat);
    // usage:
    class MyLine {
      @observable.point point1;
      @observable.point point2;


    npm i aurelia-typed-observable-plugin

    DownloadsWeekly Downloads






    Unpacked Size

    351 kB

    Total Files


    Last publish


    • aureliaeffect
    • bigopon