jsxtache
v0.0.14
Published
jsxtache >> jsx + mustache
Downloads
27
Maintainers
Readme
#EXPERIMENTAL! DON'T USE!
###jsxtache
Write React components with Mustache. Generate a Mustache version (for server) + JSX version (for client). For use when JS on server is not possible, but Mustache is.
npm install -g jsxtache
######Why?
Because React is awesome. But JS on the server is a tough argument. This dumbs down React to Mustache's level, so that it can cross-compile into both.
######Can I take advantage of React's smart server side rendering?
Not yet. Working on it.
######Info...
- Separates JS + template. Combined by convention.
- Mustache-like syntax.
{{* *}}
special signifier for 'JSXtache'.- YAML-like, white space significant attributes.
- Handles partials + passes down
{...this.props}
and{...this.state}
######Syntax
JSX (.jsx)
var React = require('react');
module.exports = React.createClass({
render: function() {
return;
},
_onClick: function() {
// do something
},
_onHover: function() {
// do something
}
});
Matching JSXtache (.jsx.mustache)
<div {{*
id: this.props.element_id
class:
"class-a": true
"class-b": this.props.b_show_class_b
"not-class-b": !this.props.b_show_class_b
this.props.class_c: this.props_b_show_class_c
"class-" this.props.class_d: this.props.b_show_class_d
"class-e class-f class-g": true
data-something: "something" + this.props.something + "-something"
onClick: this._onClick
*}}>
{{> partials/partial_a}}
{{#this.props.arr}}
<div {{*
key: scoped_val_OR_true
*}}>
<div {{*
id: element_id
class: "arr-element"
*}}>
<p>{{title}}</p>
{{> partials/partial_b}}
</div>
</div>
{{/this.props.arr}}
{{^this.props.arr}}
<span {{*
onDoubleClick: this._onDoubleClick
*}}>Nothing in Arr</span>
{{/this.props.arr}}
<span {{*
onClick: this._onClick
*}}>
{{this.props.something}}
</span>
</div>
######Project Structure
There are a few options for coordinating JSX / JSXtache. JSXtache syntax can be used, or this can manage duplication between mustache + JSX.
Manage Duplication:
- .jsx file; render + mustache method; inline jsx + mustache
- .jsx file + .mustache file; inline jsx; mustache by convention
JSXtache syntax:
- .jsx file -- render method -- inline jsxtache
- .jsx file + .jsx.mustache file; jsxtache by convention
Example
components/
components/component.jsx
components/component.jsx.mustache
components/partials/
components/partials/one.jsx
components/partials/one.mustache
components/partials/two.jsx
######CLI
Cross-compiles the strcuture from above into specified mustache / JSX / JS directories.
jsxtache <jsxtache dir> <options...>
--mustache (Default: null)
--jsx (Default: null)
--js (Default: null)
--mustache-out-ext (Default: .mustache)
--jsx-out-ext (Default: .jsx)
--js-out-ext (Default: .js)
--mustache-filename-append (Default: "")
--jsx-filename-append (Default: "")
--js-filename-append (Default: "")
jsxtache help
jsxtache version
Example
jsxtache app/components --mustache app/mustache --js app/js