wcpack
is a utility for packaging WebComponents are an emerging standard that makes it easy to create reuseable components for the browser. Just imagine creating your own tags that are simple for others to use as adding the <my-tag></my-tag>
to their page.
As great as WebComponents are, they are best packaged as a single file, and that isn't necessarily the most convenient way to develop thing. This is where wcpack
comes in; it allows you to develop your components as a single file, and then package them together for distribution.
wcpack
will take all of your component's HTML, JavaScript, and CSS files and concatenate them together and package them as a single .html file.
To install the command line tool:
npm install -g wcpack
To install as an node
module in your own project:
npm install wcpack
The command line tool is where you will package your components together. A typical usage:
Let's say you have a directory structure with these files:
tabs.html
<element name="tabs" constructor="TabsHTMLElement">
<section>
I'm tabs!
</section>
<script src="tabs.js"></script>
</element>
tabs.js
if(this !== window) {
var section = this.querySelector('section');
this.register({
prototype: {
readyCallback: function() {
this.innerHTML = section.innerHTML;
}
}
});
}
You would package these files together with this command:
wcpack -o component.html tabs.html
This simply tells wcpack to package the component defined in tabs.html and write the results to component.html. You'd wind up with this output:
<element name="tabs" constructor="TabsHTMLElement">
<section>I'm tabs!</section>
<script>
if (this !== window) {
var section = this.querySelector('section');
this.register({
prototype: {
readyCallback: function() {
this.innerHTML = section.innerHTML;
}
}
});
}
</script>
</element>
Additionally wcpack allows for multiple input files to pack into a single .html
file. This is useful when you have a group of components that are related. For example with a tabs
component you would likely want to allow for tab
elements to be nested. In this case you want to pack these into a single component.
To pack multiple components into one simply path multiple files from the command line:
wcpack -o component.html tab.html tabs.html
or from Node:
var pack = require('wcpack'),
fs = require('fs');
pack('tabs.html', 'tab.html')
.end(function(output) {
fs.writeFile('component.html', output, 'utf8', function() {
// All done!
});
});
Or as an array from Node:
pack(['tab.html', 'tabs.html']).end(function(output){ ...
Everything that can be down from the command line tool can also be done from node
. Here's a simple example:
var pack = require('wcpack');
pack('./mycomponent.html')
.indent(2)
.minify()
.end(function(output) {
console.log(output);
});