react-element-builder.coffee

components = {}


addOne = (name, component) ->
  components[name] = component
  return


addMany = (obj) ->
  addOne name, component for own name, component of obj
  return


createFactory = (tagName) ->
  (props, children...) ->
    if typeof tagName is 'string'
      {tagName, id, className, refName} = parseTagName tagName

      if id?
        props ?= {}
        props.id ?= id

      if className?
        props ?= {}
        if props.className?
          props.className += " #{className}"
        else
          props.className = className

      if refName?
        props ?= {}
        props.ref ?= refName

      component = components[tagName] ? tagName
    else
      props ?= {}
      component = tagName

    #builder = components[tagName] ? tagName
    React.createElement component, props, children...


parseTagName = (tagName) ->
  [tagNameWithId, classNames...] = tagName.split '.'
  [tagNameWithRef, id] = tagNameWithId.split '#'
  [tagName, refName] = tagNameWithRef.split '%'

  if classNames.length > 0
    className = classNames.join ' '

  if !tagName or tagName is ''
    tagName = 'div'

  {tagName, className, id, refName}


createElement = (tagName, props, children...) ->
  createFactory(tagName)(props, children...)


Mixin = {
  createElement
  createFactory
  e: createElement
}


module.exports = {
  Mixin
  createElement
  createFactory
  addOne
  addMany
  parseTagName
}

zz-README.md

React is great. Coffeescript is great. JSX is good to but not what we're after.

Example:

ElementBuilder = require './react-element-builder'

HeaderComponent = React.createClass
  displayName: 'HeaderComponent'
  mixins: [ElementBuilder.Mixin]

  render: ->
    @e 'div#some-id.some-class', null, 'Hello world'

ElementBuilder.addMany { HeaderComponent }

AppComponent = React.createClass
  displayName: 'AppComponent'
  mixins: [ElementBuilder.Mixin]

  render: ->
    @e 'HeaderComponent'