')
76 | t.end()
77 | })
78 |
79 | test('rendering custom components works correctly without props', function(t) {
80 | var tree = d('section#stuff',
81 | d(Greeting),
82 | d('span', '!')
83 | )
84 | t.equal(render(tree), '
hi
!')
85 | t.end()
86 | })
87 |
88 | test('Readme example', function(t) {
89 | var noop = function() {}
90 | var tree = d('form[method=POST]', { onSubmit: noop },
91 | d('h1.form-header', 'Login'),
92 | d('input:email[name=email]'),
93 | d('input:password[name=pass]'),
94 | d(Greeting, { text: 'yo' }),
95 | d('button:submit', 'Login')
96 | )
97 |
98 | var expected = ''
99 | t.equal(render(tree), expected)
100 | t.end()
101 | })
102 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](http://travis-ci.org/af/JSnoX)
2 |
3 | # JSnoX
4 |
5 | Enjoy [React.js](http://facebook.github.io/react/), but not a fan of the JSX?
6 | JSnoX gives you a concise, expressive way to build ReactElement trees in pure JavaScript.
7 |
8 |
9 | ## Works with
10 | * React.js v0.12 and above
11 | * React Native
12 |
13 |
14 | ## Example
15 |
16 | ```js
17 | var React = require('react')
18 | var MyOtherComponent = require('./some/path.js')
19 | var d = require('jsnox')(React)
20 |
21 | var LoginForm = React.createClass({
22 | submitLogin: function() { ... },
23 |
24 | render: function() {
25 | return d('form[method=POST]', { onSubmit: this.submitLogin },
26 | d('h1.form-header', 'Login'),
27 | d('input:email[name=email]'),
28 | d('input:password[name=pass]'),
29 | d(MyOtherComponent, { myProp: 'foo' }),
30 | d('button:submit', 'Login')
31 | )
32 | }
33 | })
34 | ```
35 |
36 |
37 | ## API
38 |
39 | ```js
40 | // Create a function, d, that parses spec strings into React DOM:
41 | var React = require('react')
42 | var ReactDOM = require('react-dom')
43 | var d = require('jsnox')(React)
44 |
45 | // The function returned by JSnoX takes 3 arguments:
46 | // specString (required) - Specifies the tagName and (optionally) attributes
47 | // props (optional) - Additional props (can override output from specString)
48 | // children (optional) - String, or an array of ReactElements
49 | var myDom = d('div.foo', {}, 'hello')
50 |
51 | ReactDOM.render(myDom, myElement) // renders
hello
52 | ```
53 |
54 | JSnoX's specStrings let you specify your components' HTML in a way resembling
55 | CSS selectors:
56 |
57 | 
58 |
59 | Each property referenced in the string is passed along in the props argument to
60 | `React.createElement()`. You can pass along additional props in the second argument
61 | (a JavaScript object). jsnox will merge the className attribute from both arguments
62 | automatically, useful if the element has a mix of static and dynamic classes.
63 |
64 |
65 | ## Bonus features
66 |
67 | * append a `^` to your specString to have a `key` prop automatically generated
68 | from the spec string. This can help when you have [dynamic
69 | children](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children)
70 | where they all have unique specStrings, eg:
71 |
72 | ```js
73 | render() {
74 | return d('ul',
75 | // The ^ suffix below will give each
a unique key:
76 | categories.map(cat => d(`li.category.${cat.id}^`, cat.title))
77 | )
78 | }
79 | ```
80 |
81 | * you can add '@foo' to a specString to point
82 | a [ref](http://facebook.github.io/react/docs/more-about-refs.html) named foo
83 | to that element:
84 |
85 | ```js
86 | // in render():
87 | return d('input:email@emailAddr')
88 |
89 | // elsewhere in the component (after rendering):
90 | var email = this.refs.emailAddr.value
91 | ```
92 |
93 | * You can pass a special `$renderIf` prop to your components or DOM elements.
94 | If it evaluates to false, the element won't be rendered:
95 |
96 | ```js
97 | // in render():
98 | return d('div.debugOutput', { $renderIf: DEV_MODE }, 'hi')
99 | ```
100 |
101 |
102 | ## Install
103 |
104 | ```
105 | npm install jsnox
106 | ```
107 |
108 | Npm is the recommended way to install. You can also include `jsnox.js` in your
109 | project directly and it will fall back to exporting a global variable as
110 | `window.jsnox`.
111 |
112 |
113 | ## Why this instead of JSX?
114 |
115 | * No weird XML dialect in the middle of your JavaScript
116 | * All your existing tooling (linter, minifier, editor, etc) works as it does
117 | with regular JavaScript
118 | * No forced build step
119 |
120 |
121 | ## Why this instead of plain JS with `React.DOM`?
122 |
123 | * More concise code; specify classes/ids/attributes in a way similar to CSS selectors
124 | * Use your custom ReactComponent instances on React 0.12+ without [needing
125 | to wrap them](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
126 | with `React.createFactory()` everywhere
127 |
128 |
129 | ## Notes/gotchas
130 |
131 | * Your top-level component should also be wrapped by the jsnox client, to
132 | prevent [warnings about `createFactory`](https://gist.github.com/sebmarkbage/ae327f2eda03bf165261). For example:
133 |
134 | ```js
135 | var d = require('jsnox')(React)
136 |
137 | // Good:
138 | React.render(d(MyTopLevelComponent, { prop1: 'foo'}), document.body)
139 |
140 | // Bad (will trigger a warning, and break in future React versions):
141 | React.render(MyTopLevelComponent({ prop1: 'foo'}), document.body)
142 | ```
143 |
144 | * All attributes you specify should be the ones that React understands. So, for
145 | example, you want to type `'input[readOnly]'` (camel-cased), instead of
146 | `'readonly'` like you'd be used to with html.
147 | * JSnoX gives you a saner default `type` for `button` elements– unless you specify
148 | `'button:submit'` their type will be `"button"` (unintentionally form-submitting
149 | buttons is a personal pet peeve).
150 |
151 |
152 | ## See also
153 |
154 | * [react-hyperscript](https://github.com/mlmorg/react-hyperscript) is a similar
155 | module that converts [hyperscript](https://github.com/dominictarr/hyperscript)
156 | to ReactElements.
157 | * [react-no-jsx](https://github.com/jussi-kalliokoski/react-no-jsx) provides
158 | another way to write plain JS instead of JSX.
159 | * [r-dom](https://github.com/uber/r-dom) is a similar wrapper for `React.DOM`
160 |
--------------------------------------------------------------------------------
/jsnox.js:
--------------------------------------------------------------------------------
1 | ;(function(global) { // IIFE for legacy non-module usage
2 | 'use strict'
3 |
4 | var tagNameRegex = /^([a-z1-6]+)(?:\:([a-z]+))?/ // matches 'input' or 'input:text'
5 | var propsRegex = /((?:#|\.|@)[\w-]+)|(\[.*?\])/g // matches all further properties
6 | var attrRegex = /\[([\w-]+)(?:=([^\]]+))?\]/ // matches '[foo=bar]' or '[foo]'
7 | var autoKeyGenRegex = /\^$/ // matches 'anything^'
8 | var protoSlice = Array.prototype.slice
9 |
10 | // Error subclass to throw for parsing errors
11 | function ParseError(input) {
12 | this.message = input
13 | this.stack = new Error().stack
14 | }
15 | ParseError.prototype = Object.create(Error.prototype)
16 | ParseError.prototype.name = 'JSnoXParseError'
17 |
18 |
19 | // A simple module-level cache for parseTagSpec().
20 | // Subsequent re-parsing of the same input string will be pulled
21 | // from this cache for an increase in performance.
22 | var specCache = {}
23 |
24 | // Convert a tag specification string into an object
25 | // eg. 'input:checkbox#foo.bar[name=asdf]' produces the output:
26 | // {
27 | // tagName: 'input',
28 | // props: {
29 | // type: 'checkbox',
30 | // id: 'foo',
31 | // className: 'bar',
32 | // name: 'asdf'
33 | // }
34 | // }
35 | function parseTagSpec(specString) {
36 | if (!specString || !specString.match) throw new ParseError(specString)
37 | if (specCache[specString]) return specCache[specString]
38 |
39 | // Parse tagName, and optional type attribute
40 | var tagMatch = specString.match(tagNameRegex)
41 | if (!tagMatch) {
42 | if (specString.match(propsRegex)) tagMatch = ['div', 'div'] // create
if tagname omitted
43 | else throw new ParseError(specString)
44 | }
45 | var tagName = tagMatch[1]
46 | var props = {}
47 | var classes = []
48 |
49 | if (specString.match(autoKeyGenRegex)) props.key = specString
50 | if (tagMatch[2]) props.type = tagMatch[2]
51 | else if (tagName === 'button') props.type = 'button' // Saner default for