fix(h): wrong html with Fragment

[ivanheral]

Hi @yyx990803

This solution is a little better.
Hope this works into the final release and can be implemented.

Example with the problem:
https://github.com/ivanheral/vue3_fix

[yyx990803]

I'm sorry but this is not a fix. Vue's h function has its own signature and it doesn't try to be compatible with JSX implementations that expect children to be arg-based. This is by design.

If you want to use Vue's h with htm you can create a wrapper function that passes its rest arguments as an array to Vue's h:

const html = htm.bind((tag, props, ...children) => h(tag, props, children));

[yyx990803]

Also - you don't need to explicitly use Fragment. Vue 3 render function accepts returning an array so you can just do:

    render() {
        return html`
        <p>Hello</p>
        <p>World</p>
        <p>${this.count}</p>
        <button onClick=${this.increase}>increase</button>
        `
    }

[yyx990803]

I found a way to directly support htm.bind(h) without breaking Vue's idiomatic h usage in 54d06ec.

Also, a few notes:

1. There is no need for defineComponent if you are not using TS
2. you can return the render function from setup()

So your code can be further simplified to:

const html = htm.bind(h) // this only works after 54d06ec4 is released

const App = {
  setup() {
    const count = ref(0)
    const increase = () => {
        count.value++
    }
    return () => html`
      <p>Hello</p>
      <p>World</p>
      <p>${count.value}</p>
      <button onClick=${increase}>increase</button>
    `
  }
}

createApp(App).mount("#app")