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 = ;moduleexports = React;
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 --jsx --js --mustache-out-ext --jsx-out-ext --js-out-ext --mustache-filename-append --jsx-filename-append --js-filename-append jsxtache helpjsxtache version
Example
jsxtache app/components --mustache app/mustache --js app/js