Hyperapp: How to use function for composition

[rbiggs]

In the checkin #77 you mention about returning a function for composition. This is not mentioned in the README. An example would be nice to illustrate how this works. Is this a feature that only works with JSX? Is so, could it also be implemented to work with Hyperx?

[tunnckoCore]

Nope, it isn't only JSX.

You could do

const { h } = require('hyperapp')

function Foo ({ name, title, children }) {
  return h('section', [
    h('h1.heading', title + ' ' + name),
    h('p', children)
  ])
}
const tree = h(Foo, { name: 'Charlike', title: 'Hello' }, 'Hello World')

[tunnckoCore]

and JSX variant, i believe

/** @jsx h */
const { h } = require('hyperapp')

const Foo = ({ name, title, children }) => (<section>
  <h1 className="heading">{title} {name}</h1>
  <p children={children} />
</section>)

const tree = <Foo name="Charlike" title="Hello">Hello World</Foo>

That <p /> may look kinda strange, but I believe it would work. Another way is as usual

<p>{children}</p>

Because children is just a Node. Maybe. For that virtual dom i'm not sure if all that will work. But in mich-h it works that way and looks fantastic, kinda love it :)

[jorgebucaran]

@rbiggs This feature only works for JSX. I'll update the docs to add an example.

In Hyperx you can do like @ungoldman's suggests in https://github.com/substack/hyperx/issues/9), but that's not nearly as convenient as <MyComponent propts=...>children</MyComponent>.

@niksy's fork of hyperxify seems to deal with this via Hyperx, but it hasn't been merged yet.

Our fork of hyperxify to support custom h functions hasn't been merged either:

• https://github.com/substack/hyperxify/pull/8

Maybe @substack's is busy? :wave:

If we can get that merged, we might be able to propose further changes, like <MyComponent></MyComponent>-style via Hyperx, which would be sweet.

[tunnckoCore]

@jbucaran This feature only works for JSX.

Why not to work for raw h calls? It would, since h can accept first argument to be function as what tags with uppercased first later is transformed/transpiled to. Nothing needed.

const tree = <Foo name="Charlike" title="Hello">Hello World</Foo>
// => h(Foo, { name: 'Charlike', title: 'Hello' }, 'Hello World')

if it is <foo ... instead of <Foo it will be h('foo' ...) instead of h(Foo ...)

edit: just to be clear if some ELI5 comes haha :) I just learned it yesterday, it got me few hours to understand what happens when is uppercased first letter and why my virtual dom fails, haha.

• <foo name="hello">world</foo> => h('foo', { name: 'hello' }, 'world')
• <Foo name="hello">world</Foo> => h(Foo, { name: 'hello' }, 'world')

[jorgebucaran]

@tunnckoCore Right. I overlooked it also works with raw h calls.

This is evident from the fact JSX is translated into h calls when using babel.

• https://github.com/hyperapp/hyperapp/issues/8#issuecomment-279199980

[tunnckoCore]

Yea just seen the slider. It looks great!

when using babel.

Or rollup-plugin-jsx

[jorgebucaran]

@rbiggs I think we can close now. Function composition is supported in HyperApp via h. As a result, it just works with JSX, but not with Hyperx, unfortunately, and there's nothing actionable we can do here.

It doesn't look like it will be supported any time soon, see:

• https://github.com/substack/hyperx/issues/9