cellx-decorators

ES.Next decorators for cellx.

Installation

npm install babel-plugin-transform-decorators-legacy --save-dev
npm install cellx-decorators --save

Usage

import { EventEmitter } from 'cellx';
import { Observable, Computed } from 'cellx-decorators';
import formatPhone from '../../utils/formatPhone';

class User extends EventEmitter {
    id = null;

    @Observable firstName = null;
    @Observable lastName = null;
    @Computed get fullName() {
        return [this.firstName, this.lastName].join(' ').trim() || null;
    }

    @Observable phone = null;

    @Computed({
        put(value) {
            this.phone = value.replace(/\D+/g, '');
        }
    }) get formattedPhone() {
        return this.phone && formatPhone(this.phone);
    }
}

let u = new User();

u.phone = '79161234567';
console.log(u.formattedPhone);
// => '[phone]'

u.formattedPhone = '[phone]';
console.log(u.phone);
// => '79167654321'

Webpack config

module.exports = {
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(?:node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015'],
                    plugins: [
                        'transform-decorators-legacy',
                        'transform-class-properties'
                    ]
                }
            }
        ]
    }
};