2.0.0 • Published 9 years ago
neowidget v2.0.0
Virtual DOM based Widget for Neon.js
Requirements
NeoWidget uses JSX to define DOM Trees, so you will need jsx-transform-loader for webpack, jsxtransformify for Browserify or something based on jsx-transform to preprocess JSX.
Setup:
npm install -save neowidget
Webpack Example
webpack.config.js
{..., loader: 'jsx-transform-loader'}
Browserify Example
npm install -save jsxtransformify
browserify -t jsxtransformify file.js -o output.js
Usage Example
You need to specify the @docblock in the files where you use JSX: /* @jsx NeoWidget.h /
/** @jsx NeoWidget.h */
var Heading = Class('Heading').inherits(NeoWidget)({
data : {
title : 'Heading Title'
}
template : function() {
return <div>
<h2>{this.data.title}</h2>
</div>
}
});
Class('Button').inherits(NeoWidget)({
prototype : {
data : {
title : 'Click Me!',
count : 0
},
template : function() {
return <div>
{new <Heading />.virtualNode}
<button onclick={this.clickHandler.bind(this)}>{this.data.title}</button>
<p>{'Clicks: ' + this.data.count}</p>
</div>
},
clickHandler : function() {
this.data.count++
this.update(this.data);
}
}
});
var widget = new Button()
widget.render(document.body);