Using JSX with Bel

I was wondering if its possible to use JSX instead of hyperx to create elements with Bel. I like to use Bel and Yo-yo, but sometimes its convenient to go JSX route, because then components could be re-used between Yo-yo/Choo and React projects.

I tried to set jsx pragma to h and then use it like so:

var h = require('bel').createElement

var el = <h1 class="a">Hi</h1>
document.body.appendChild(el)

But children (Hi) never appear, and if you omit class, bel complaints: Cannot read property 'namespace' of null. Got confused, probably missing something.

[nichoth]

Sometimes I have wished that all the h modules were more interoperable. They all have slight differences that make them incompatible. bel, virtual-hyperscript, hyperscript, and react all have slight differences, though they do basically the same thing.

[tunnckoCore]

kinda such thing

function arrayify (val) {
  if (!val) return [];
  if (Array.isArray(val)) return val;
  return [val];
}

function isObject (val) {
  return val && typeof val === 'object' && !Array.isArray(val)
}

function belCreateElement (tag, props, children) {
  var el

  children = arrayify(children)
  props = isObject(props) ? props : {}

  if (typeof tag === 'function') {
    // not sure for the order
    // but we should have `children` on `props` object
    props.children = children || arrayify(props.children)
    var _ele = tag(props, props.children)
    
    // should remove `_ele._attributes.null.children`
    return _ele
  }

  // not changed code below ...
}

seems to be working

examples

function Link (props) {
  return belCreateElement('a', props, props.children.concat(' world!!'))
}

var el = belCreateElement(Link, { className: 'foo' }, 'Hello')

console.log(el.toString())

Ahref, not using props argument directly (important to test both above and below cases!)

function Ahref ({ className, children }) {
  return belCreateElement('a', { className }, children.concat(' world!!'))
}

var el = belCreateElement(Ahref, { className: 'foo' }, 'Hello')

console.log(el.toString())

MOAR

var hx = require('hyperx')(belCreateElement)

function Link (props) {
  // JSX
  // <a { ...props }>{ props.children.concat(' world...').join('') }</a>
  return hx`<a ${ /* ...props */ } >${ props.children.concat(' world...').join('') }</a>`
}

// JSX
// var el = <Link className="foobar">Hello</Link>
var el = belCreateElement(Link, { className: 'foobar' }, 'Hello')

console.log(el.toString())
// expected
// => '<a class="foobar">Hello world...</a>'