yutingzhao1991 / polymer-ext

A extentsion for Polymer1.x. Use Polymer with CommonJS Modules ( CMD ) and webpack or browserify.

PolymerExt

Want to use polymer with CMD and webpack?

Want separate HTML, CSS, JS from a polymer component?

Want add a asynchronous observers and trigger only once when multiple properties changes?

Just use PolymerExt

Simple and Effective

DEMO

DEMO SRC

Ext API

template && stylesheet

PolymerExt Extended two options template and stylesheet, Recommend ues PolymerExt with webpack and raw-loader.

var PolymerExt = require('polymer-ext')

var t = require('raw!./test.tmpl')
var s = require('raw!./test.css')

PolymerExt({
  is: 'card-panel',
  template: t,
  stylesheet: s, // stylesheet accept a array for multiple style.
  ... // other polymer options
})

asyncObservers

asyncObservers declare format same as observers, but it will be trigger asynchronous and trigger only once when multiple properties changes.

var PolymerExt = require('polymer-ext')

PolymerExt({
  is: 'card-panel',
  asyncObservers: ['functionName(argA, argB)'],
  ... // other polymer options
})

setConfig

For better performance, you can init your components only when your need use it.

By default, components will be auto init. But you can set it with setConfig

var PolymerExt = require('polymer-ext')
PolymerExt.setConifg({
  autoInit: false
})

var ChildrenComponent = PolymerExt({ /* ... */ })

var t = require('raw!./test.tmpl')
var s = require('raw!./test.css')

var CardPanel = PolymerExt({
  is: 'card-panel',
  template: t,
  stylesheet: s, // stylesheet accept a array for multiple style.
  components: [ChildrenComponent] // components's methods 'init' will be called before this component inited.
  ... // other polymer options
})

// ...

CardPanel.init()

License