4.0.3 • Published 9 years ago
coffeex v4.0.3
CoffeeX
Coffee DSL for React Virtual DOM instead of JSX
This is inspired by coffeekup and vk
Usage
In JavaScript
React.createElement('div', {}, [
React.createElement('h1', { style: { textAlign: 'center' } }, [
React.createElement('span', {}, [
'text',
React.createElement('br'),
'text',
React.createElement('br'),
'text',
React.createElement('br')
])
]),
React.createElement('h2', {}, [
'text1',
React.createElement('br'),
'text2'
])
]);
In CoffeeX:
cfx ($, _) ->
$.div ->
$.h1 style: { textAlign: 'center' }, ->
$.span ->
for i in [1..3]
_ 'text'
$.br
$.h2 ->
_ 'text1'
$.br
_ 'text2'
API
cfx: Function
cfx(block: Function($, _))
$: Function
Example:
$ 'div', '#main.container', { style: { width: '960px' } }, ->
# children...
Arguments Pattern:
tag name (String) / component (ReactComponent) | id and class (CSSSelectorString) | attribute (Object) | children (Function / String) |
---|---|---|---|
✓ | ✓ | ✓ | ✓ |
✓ | ✓ | ✓ | |
✓ | ✓ | ✓ | |
✓ | ✓ | ✓ | |
✓ | ✓ | ✓ | |
✓ | ✓ | ||
✓ | ✓ | ||
✓ | ✓ | ||
✓ | ✓ | ||
✓ |