jsxtache: A JavaScript repository from ndreckshage

#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

ndreckshage/jsxtache