babel-plugin-app-decorators-component

babel-plugin-app-decorators-component

Babel Plugin for extend HTMLElement by options for Babeljs v6.x

Installation

$ npm install babel-plugin-app-decorators-component --save

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["app-decorators-component"]
}

Note: Order of Plugins Matters!

If you including your plugin app-decorators-component, make sure that app-decorators-component comes before all plugins or if you using transform-decorators-legacy before that.

// WRONG
"plugins": [
    "plugin-1",
    "plugin-2",
    "plugin-3",
    "app-decorators-component"
]

// RIGHT
"plugins": [
    "app-decorators-component",
    "plugin-1",
    "plugin-2",
    "plugin-3"
]

See also notes: https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

Via CLI

$ babel --plugins app-decorators-component script.js

Via Node API

require('babel').transform('code', {
  plugins: ['app-decorators-component']
});

The goal of this babel-plugin for app-decorators @component:

Example 1

code:

@component()
class Helloworld {

}

transformed:

import _elementToFunc from 'app-decorators-element-to-function';
@component()
class Helloworld extends _elementToFunc(HTMLElement) {

}

Example 2

code:

@component({
   extends: 'img'
})
class Helloworld {

}

transformed:

import _elementToFunc from 'app-decorators-element-to-function';
@component({
   extends: 'img'
})
class Helloworld extends _elementToFunc(HTMLImageElement) {
    static get extends() {
        return 'img';
    }
}

Not possible at the moment:

class Bar {}

@component()
class Foo extends Bar {

}

Use dependency-Injection instead:

• https://en.wikipedia.org/wiki/Dependency_injection

Tests

git clone https://github.com/SerkanSipahi/app-decorators.git
cd app-decorators/packages/babel-plugin-app-decorators-component
make install
make test