react-kup

react-kup is a simple, nonintrusive alternative to JSX for coffeescript

react-kup

react-kup is a simple, nonintrusive alternative to JSX for coffeescript

0.4.0 introduced some breaking changes. see changelog below !

TodoItem = React.createClass
  render: ->
    # when called with a callback `reactKup`  
    # calls the callback with `k` and 
    # returns result of all calls on `k` 
    reactKup (k) =>
      if that.props.item.isDone
        k.li {
 
TodoList = React.createClass
  render: ->
    # when called without a callback `reactKup` returns a builder `k` 
    = reactKup()
 
    if @props.isHello
      k.div "Hello #{that.props.name}"
    else
      k.div "Goodbye #{that.props.name}"
 
    k.ul ->
      for i in [1...5]
        k.li i
 
    k.build
 
    # return result explicitely 
    return k.result()
 

see the full examples below

easy: use all javascript/coffeescript features naturally when building a react component's virtual-DOM. as opposed to

flexible https://github.com/kalasjocke/react-coffee-elements

lightweight: single file (lib/react-kup.js) with just under 100 lines.

nonintrusive: [no mixins.]( no compilation. no this magic. integration with react.

portable: works with CommonJS (NodeJS), AMD or without any module system.

stable: extensive tests. and used in production.

it uses the same concept as kup (kup is an html builder for nodejs) but builds up nested react elements instead of html strings.

  • works
  • no additional build step required
  • no mixin. though you could build one yourself.
npm install react-kup

has all the methods of React.DOM

var reactKup = require('react-kup');
define('my-module', ['react-kup'], function(reactKup) {
  // ... 
});

when no module system is present including lib/react-kup.js sets the global reactKup:

<script src="react.js" type="text/javascript"></script>
<script src="react-kup.js" type="text/javascript"></script>

its best to fetch react with bower, react-kup with npm and then use a build system like gulp to bring everything together

reactKup = require('react-kup')
 
HelloMessage = React.createClass
  render: ->
    that = this
    reactKup (k) ->
      k.div "Hello #{that.props.name}"
 
component = new HelloMessage({name: 'John'})
 
React.renderComponentToString component
# => <div>Hello John</div> 
HelloMessage = React.createClass
  render: ->
    that = this
    reactKup (k) ->
      k.div "Hello #{that.props.name}"
 
init = ->
  mountNode = document.getElementById('my-app')
  component = new HelloMessage({name: 'John'})
 
  React.renderComponent componentmountNode
HelloMessage = React.createClass
  render: ->
    that = this
    = reactKup()
    k.div "Hello #{that.props.name}"
    # throws 
    k.div k
    k.element()
    k.peek()
 
init = ->
  mountNode = document.getElementById('my-app')
  component = new HelloMessage({name: 'John'})
 
  React.renderComponent componentmountNode
  • .component method renamed to .build
  • the .text method now uses React.DOM.text which gets wrapped in a span tag.
  • added AMD support
  • removed deprecation warnings for react 0.12.2
  • react-kup now comes with a version of react (0.12.0) caused confusion
  • supports both react-classes and react-elements as arguments to .build
  • supports react elements as content

TL;DR: bugfixes, issues and discussion are always welcome. ask me before implementing new features.

i will happily merge pull requests that fix bugs with reasonable code.

i will only merge pull requests that modify/add functionality if the changes align with my goals for this package and only if the changes are well written, documented and tested.

communicate: write an issue to start a discussion before writing code that may or may not get merged.

license: MIT