npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aurelia-typed-observable-plugin

v0.5.1

Published

A plugin for @observable and @bindable value coercion

Downloads

7,600

Readme

Aurelia-typed-observable-plugin

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.date, @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 (https://github.com/aurelia/binding/pull/623) and aurelia-templating (https://github.com/aurelia/templating/pull/558)

Most common usecase

  • Boolean bindable properties to make custom elements behave like buit in boolean:
  // view model
  export class VideoPlayer {

    // do it yourself
    @bindable({
      coerce(val) {
        if (val || val === '') {
          return true;
        }
        return false;
      }
    })
    playing

    // or use built in
    @bindable.booleanAttr
    playing
  }

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

  <!-- app.html -->
  <template>
    <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>
  </template>

Usage

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 {
  @observable
  @Reflect.metadata(metadata.propertyType, Number)
  num;
}

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 {
      usePropertyTypeForBindable,
      usePropertyTypeForObservable
    } from 'aurelia-typed-observable-plugin';
    
    usePropertyTypeForBindable(true);
    usePropertyTypeForObservable(true);

    They are only needed to be called once.

Extension

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 {
  createTypedObservable
} 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 {
  @observable
  @Reflect.metatata('design:type', Point)
  point1

  // or like this
  @observable({ coerce: 'point' })
  point2
}

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 {
  coerceFunctions,
  createTypedObservable
} from 'aurelia-typed-observable-plugin'

coerceFunctions.point = function(value) {
  return value.split(' ').map(parseFloat);
}
createTypedObservable('point');

// usage:
class MyLine {
  @observable.point point1;
  @observable.point point2;
}