Hyperapp: Missing children in JSX

[VictorWinberg]

When using JSX, only the first child of every element is visible.

Because h function is not using the spread operator, or the arguments method

[zaceno]

@VictorWinberg Sorry you've had to wait for a response. Since v 2.0.5 Hyperapp's built in h function has intentionally dropped JSX compatibility (for performance reasons). What you need to do, in order to use JSX, is to define a custom JSX pragma based on both h and text:

jsx-hyperapp-pragma.js:

import { h, text } from "hyperapp"
export default (type, props, ...children) =>
  typeof type === "function"
    ? type(props, children)
    : h(
        type,
        props || {},
        []
          .concat(...children)
          .map((any) =>
            typeof any === "string" || typeof any === "number" ? text(any) : any
          )
      )

Now in any .jsx file:

//instead of this:
// import {h} from 'hyperapp'
//do this:
import h from '../util/jsx-hyperapp-pragma.js'

Of course (as you probably already did) you need to set "pragma": "h" in your babel config as well (or if you're using parceljs, that is probably working automatically)

[zaceno]

Let me also take this moment to plug my jsx-like ttl for hyperapp: https://github.com/zaceno/hyperlit
– it might be a more convenient option for you.

[VictorWinberg]

@zaceno Cool, cool! I think I prefer the non-jsx syntax anyways (not sure though), but I didn't find out that JSX was dropped ... until you told me some weeks ago 😄

Therefore, closing the issue!