React.hiccup
React 0% JSX, 100% hiccup
Dig React but JSX feels a bit weird? React.hiccup to the rescue!
React.hiccup is a complete replacement for JSX written in sweet.js.
React.hiccup uses a very clean, minimalistic notation - no HTML tags and no curly braces in HTML elements.
Syntax
React.hiccup syntax is heavily inspired by hiccup, a popular Clojure HTML rendering library.
In short, the syntax for a React.hiccup element is
hiccup tag#idclass1class2 property1: value1 property2: value2 child1 child2 ...
e.g.
hiccup div#foobarbaz some: "property" another: thispropsanothervalue p "A child element" "Child text"
where the id, classes, property object and children are all optional. The className can be also specified among the properties, in this case it will be merged with the class names given after the tag.
A child can be a string, a number or a multiline string (use the backtick)
hiccup div#foobarbaz `Thisis a multiline comment`
A child can also be a JavaScript variable identifier
var comment = "Some comment";hiccup div#foobarbaz "The comment is: " comment
but in case it is anything more complex, e.g. an expression, it needs to be surrounded by parentheses
hiccup div#foobarbaz "The comment is: " thisstatecomment
or
var one_or_two = 1;var comment1 = "First comment";var comment2 = "Second comment";hiccup div#foobarbaz "The comment is: " one_or_two == 1 ? comment1 : comment2
Note that this is not required in the property object
var one_or_two = 1;var comment1 = "First comment";var comment2 = "Second comment";hiccup div#foobarbaz someprop: 1 > 0 ? true : false someother: "other" + "prop" "A child"
Shorthand react class declaration
React.hiccup also comes with an optional macro rclass
for declaring a React class
rclass FooBar = { ... }
expands to (omitting the sweet.js gensym)
var FooBar = React;
while
rclass windowFooBar = { ... }
expands to
windowFooBar = React;
Get it
First install sweet.js if you don't have it already
$ npm install -g sweet.js
If you do have it, update it (0.4.0 is required)
$ npm update -g sweet.js
Then
$ npm install react.hiccup
All set. Now to compile a React.hiccup js file into a plain js file do
$ sjs -m react.hiccup/macros -o foo_build.js foo.js
To watch the file and have it automatically compiled whenever the file changes on disk
$ sjs -m react.hiccup/macros -o foo_build.js -w foo.js
Examples
React frontpage examples
Here's how React frontpage examples can be written using React.hiccup.
React tutorial
For something more involved you can take a look at the React tutorial.
Here's the code in JSX, and here's the same code in React.hiccup.
License
MIT license http://www.opensource.org/licenses/mit-license.php/
Copyright (C) 2014 Luca Antiga http://lantiga.github.io