A browserify transform for polymer web-component (a vulcanizer)
- Require polymer elements into your browserify bundle
require('../bower_components/paper-button/paper-button.html') - Inspired by Polymer/vulcanize
npm install --save polymerize cssyFirst install some Polymer components (see installing elements):
bower install Polymer/paper-buttonUse it as a browserify transform:
var b = require('browserify')();
b.transform('polymerize');
b.add('./myapp.js')
b.bundle().pipe(process.stdout);Or within your package.json (see browserify package field):
{
// ... package.json
"browserify": {
"transform": [ "polymerize" ]
}
}Then you can require any installed polymer component into your application
// myapp.js
require('../bower_components/paper-button/paper-button.html')<!-- myapp.html -->
<script src="myapp_bundle.js"></script>
<body><paper-button>Hello Polymer</paper-button>Restrict which sources should be transformed by polymerize. Default is to transform every html sources from bower_components: /bower_components.*\.html$/.
Match is a Regex applied against source filepath.
Change match options:
// Apply only on file under my_component folder
b.transform({match: /my_component.*\.html$/}, 'polymerize');Or in your package.json:
{
// ... package.json
"browserify": {
"transform": [
["polymerize", { "match": "my_component.*\\.html$"}]
]
}
}This project is just an experiment. There is some ugly patch on bundled polymer source to make it works... Polymer is great. Maybe, Polymer could be even better by using npm to publish its packages.