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) | |:---------------------------------------------------:|:--------------------------------:|:------------------:|:----------------------------:| | ✓ | ✓ | ✓ | ✓ | | ✓ | ✓ | ✓ | | | ✓ | ✓ | | ✓ | | ✓ | | ✓ | ✓ | | | ✓ | ✓ | ✓ | | ✓ | ✓ | | | | ✓ | | ✓ | | | ✓ | | | ✓ | | | | ✓ | ✓ | | ✓ | | | |