A command line tool to organize your web components code.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
demo/counter
.gitignore
.npmignore
README.md
css-loader.js
index.js
package.json

README.md

componizer

NPM version Downloads

Organize your web components code, include js,css and html template, write a components more efficiently and simply.

Componizer use a node-style require() to organize your component code, so you need use it with browserify.

Installation

npm install componizer -g

Demo

Download the code and open demo/app.html you will get a simple demo.

5 Step to build your own component with componizer

1 Init

mkdir demo
cd demo
componizer init

After init your files:

index.js
css/index.css
tmpl/index.html

2 Build

componizer build

After build your files:

index.js # no changed
css/index.css # source code
css/index.js
tmpl/index.html # source code
tmpl/index.js

3 Add your App

touch app.html
touch app.js

app.html:

<!doctype html>
<html>
<head>
  <title>demo</title>
</head>
<body>
  <div id="demo"></div>
  <script type="text/javascript" src="app.build.js"></script>
</body>
</html>

app.js:

var demoCoponent = require('./index')
demoCoponent.render('demo')

5 Browserify

browserify app.js -o app.build.js

Then open app.html you will get the demo. You can edit index.js, index.css, index.tmpl to build your own app. Suggest to use watch to make auto build and browserify.

Wiki

componizer will build all template file in directory tmpl to a js CMD module.

componizer will build all css file in directory css to a js CMD module.

Options you can use:

-t, --tmplExt : appoint your template file ext.

License

License