Can't use keys on custom components.

For now if you try to specify a key for JSX component it won’t be actually used by hyperapp’s diff/patch algorithm:

const state = {
  posts: [
    'Hello',
    'world'
  ]
}

const actions = {}

const Post = (props, children) => <h1>{children}</h1>

const view = (state, actions) => (
  <main>
    {state.posts.map(post =>
      <Post key={post}>{post}</Post> // <= the `key` prop is not used by diff algorithm
    )}
  </main>
)

app(state, actions, view, document.body)

console.log(view(state, actions)) // =>
// { name: 'main', props: {}, children: [
//   { name: 'h1', props: { no key here }, children: ['Hello'] },
//   { name: 'h1', props: { no key here }, children: ['World'] }
// ] }

Demo: https://codepen.io/frenzzy/pen/dJmEOm?editors=0010

Let’s discuss, should we automatically pass the key down into actual virtual DOM node or user must do it manually? How not to forget to do it?

[zaceno]

@frenzzy You can easily achieve this behavior, by defining your own “higher order” version of the h function, such as like this:

import {h as _h, app} from 'hyperapp'

const h = (tag, props, children) => {
    if (typeof tag === 'function') {
        const node = tag(props, children)
        node.props.key = props.key
        return node
    } else {
        return _h(tag, props, children)
    }
}

You could augment that to also pass along lifecycle events but you’d have to take care to compose them with any lifecycle events the component itself might define on the root node

---

Edit: On closer reading, maybe the above was already clear. Now we’re discussing wether to add this behavior into the actual h, is that right?

[Swizz]

Sounds like @frenzzy is asking to pass down the key property automatically.

This is as far as I know a default behavior in Vue. All properties given to a component are passed down to the root child (a component must have a root child == no component that return an array of children).

But this behavior is not really hard to get in userland. I personnaly took the habit to pass down all properties.

const Component = (props) => (
  <section {...props}>
    <h1>Hi.</h1>
  </section>
)

This basically allow Component user to set class property when it is needed and the class will be set on the root child of the component.

const view= (state, actions) => (
  <main>
    <Component class="bg-red"/>
  </main>
)