https://github.com/ndreckshage/jsxtache
jsxtache >> jsx + mustache
https://github.com/ndreckshage/jsxtache
Last synced: 13 days ago
JSON representation
jsxtache >> jsx + mustache
- Host: GitHub
- URL: https://github.com/ndreckshage/jsxtache
- Owner: ndreckshage
- Created: 2014-11-10T09:02:57.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-11-21T13:31:15.000Z (over 10 years ago)
- Last Synced: 2025-03-29T03:33:57.461Z (about 1 month ago)
- Language: JavaScript
- Size: 258 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](http://facebook.github.io/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)*
```jsx
var React = require('react');
module.exports = React.createClass({
render: function() {
return;
},
_onClick: function() {
// do something
},
_onHover: function() {
// do something
}
});
```
*Matching JSXtache (.jsx.mustache)*
```mustache
{{> partials/partial_a}}
{{#this.props.arr}}
{{title}}
{{> partials/partial_b}}
{{/this.props.arr}}
{{^this.props.arr}}
Nothing in Arr
{{/this.props.arr}}
{{this.props.something}}
```
######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.
```bash
jsxtache
--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*
```bash
jsxtache app/components --mustache app/mustache --js app/js
```