lantiga / react.hiccup

React 0% JSX, 100% hiccup

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#id.class1.class2 {property1: value1, property2: value2} child1 child2 ...]

e.g.

hiccup [div#foo.bar.baz {some: "property", another: this.props.anothervalue} 
         [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#foo.bar.baz `This
is a
  multiline 
  comment`]

A child can also be a JavaScript variable identifier

var comment = "Some comment";
hiccup [div#foo.bar.baz "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#foo.bar.baz "The comment is: " (this.state.comment)]

or

var one_or_two = 1;
var comment1 = "First comment";
var comment2 = "Second comment";
hiccup [div#foo.bar.baz "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#foo.bar.baz {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 = {
  render: function() { ... }
}

expands to (omitting the sweet.js gensym)

var FooBar = React.createClass({
  render: function() { ... }
});

while

rclass window.FooBar = {
  render: function() { ... }
}

expands to

window.FooBar = React.createClass({
  render: function() { ... }
});

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

react.hiccup's Issues

Is it possible to use pass a string for the css selector?

sometime I would like to be able to write this:
var elem = "div." + myClassName; return hiccup[elem "abc"];

ie the value of the class (or id) is known at runtime only. Can you please support this?

Implement multiline strings

Relevant sweet.js discussion and another one

hiccup to jsx?

Is it possible to have the possibility to translate hiccup to jsx? Since jsx is more popular and is officially supported by FB, posting an example/question/bug report in jsx would increase the chance for react.hiccup users to get an answer to their question.

parameterize props

I have this code:

hiccup
  [div
    [ComponentA {prop1: "abc", prop2: def"} 123]
    [ComponentB {prop1: "abc", prop2: def"} 456]
  ]

is it possible to have {prop1: "abc", prop2: def"} as a variable?

how to split large hiccup files?

my hiccup files are getting large, so I would like to split them. What is the recommended way to do it? Simply splitting and including them all in the html doesn't work since the classes are renamed after translation.

typo for tag `button`

the tag button is written as butto

Have you thought about babel ?

This project is a great idea.

But have you thought about using babel instead of sweet.js ?
I assume most people who use react also use babel.

So it would be easier to adopt as a depedecy.

Just like babel has a react preset, we could have a react-hipccup preset. And there you don't even need a function/macro call.

Wouldn't it be perfect?

Have rclass generate the displayName specification automatically

please publish an npm module

this is really awesome by the way, would love to see or help out with a grunt task for this as well

Is it possible to have hyphen in classname?

I would like to be able to write eg: hiccup [div.abc-def "xyz"], however it seems the classname must be an id. A workaround is to write hiccup [div {className="abc-def"} "xyz"], but it's not so convenient and readable as the css selector version.