Using hyperx instead of JSX

README.md

Some notes on how to use hyperx as a replacement for JSX. Need to try this out.

example.js

const React = require('react')
const hyperx = require('hyperx')
const h = require('./h.js')
const hx = hyperx(h)

const Slider = require('react-slider')

module.exports = const MySlider = ({volume}) => hx`<div>
  <Slider value=${volume} withBars=true></Slider>
</div>`

h.js

const React = require('react')

module.exports = function h (tagName, attrs, children) {
  if (typeof tagName === 'string' && /[A-Z]/.test(tagName[0])) {
    tagName = eval(tagName)
  }
  return React.createElement(tagName, attrs, children)
}

hyperx.patch

From 1256120f4856a2aea94c587214457a087794c445 Mon Sep 17 00:00:00 2001
From: James Kyburz <james.kyburz@gmail.com>
Date: Thu, 12 May 2016 14:00:40 +0200
Subject: [PATCH] Allow custom elements start with capital

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 5a4ce9f..a98d836 100644
--- a/index.js
+++ b/index.js
@@ -17,7 +17,7 @@ module.exports = function (file, opts) {
         sopts.push(JSON.stringify(key) + ':' + JSON.stringify(opts[key]))
       }
     })
-    return { _expr: h + '(' + JSON.stringify(tagName)
+    return { _expr: h + '(' + (/[A-Z]/.test(tagName[0]) ? tagName : JSON.stringify(tagName))
       + ',{' + sopts.join(',') + '}'
       + (children && children.length ? (',[' + children.map(child).join(',') + ']') : '')
       + ')' }