Provide easier way to use React and similar createElement functions

Mainly creating this so we don’t have to hunt for it in the gitter chat later.

For React this interface function below will work. Should we provide this in pcb-stackup? Or maybe lower down in gerber-to-svg? The lack of unique key properties on some tags is also an issue.

var React = require('react')
var camelCase = require('lodash.camelcase')

function createElement(type, props, children) {
  Object.keys(props).forEach(key => {
    var newKey

    if (key === 'xmlns:xlink') {
      newKey = 'xmlnsXlink'
    }
    else if (key === 'xlink:href') {
      newKey = 'xlinkHref'
    }
    else if (key === 'class') {
      newKey = 'className'
    }
    else if (/-/.test(key)) {
      newKey = camelCase(key)
    }
    if (newKey && newKey !== key) {
      props[newKey] = props[key]
      delete props[key]
    }
  })

  return React.createElement(type, props, children)
}

[mcous]

If you want to specify that a stackup should use external styles, it probably makes more sense to specify that via the stackup color option rather than the createElement function:

const stackup = pcbStackup(layers, {
  id: 'some-id',
  colors: {
    fr4: false,
    cu: false,
    cf: false,
    sm: false,
    ss: false,
    sp: false,
    out: false
  }
})

Each element can be individually set to a color or set to a falsey value to use an external style

[kasbah]

Yeah, makes sense. Maybe we should actually remove createElement from pcb-stackup options (can still stay in core of course)?