fix(runtime-core): fix rendering error when Element and Teleport children are function

[Alfred-Skyblue]

fixed #9107

When the children of the Element or Teleport component are a function, we should execute this function and use its return value as the children.

Palyground

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	89.3 kB (+2.19 kB)	34 kB (+838 B)	30.6 kB (+719 B)
vue.global.prod.js	146 kB (+13.2 kB)	53.2 kB (+3.23 kB)	47.5 kB (+2.74 kB)

Usages

Name	Size	Gzip	Brotli
createApp	49.7 kB (+1.38 kB)	19.5 kB (+448 B)	17.8 kB (+378 B)
createSSRApp	53.1 kB (+1.47 kB)	20.8 kB (+468 B)	19 kB (+471 B)
defineCustomElement	52 kB (+1.27 kB)	20.2 kB (+420 B)	18.4 kB (+336 B)
overall	63.2 kB (+1.48 kB)	24.4 kB (+523 B)	22.2 kB (+426 B)

[baiwusanyu-c]

LGTM
cc/ @sxzz

[pikax]

Based on the comment on h.ts

/*
// type only
h('div')

// type + props
h('div', {})

// type + omit props + children
// Omit props does NOT support named slots
h('div', []) // array
h('div', 'foo') // text
h('div', h('br')) // vnode
h(Component, () => {}) // default slot

// type + props + children
h('div', {}, []) // array
h('div', {}, 'foo') // text
h('div', {}, h('br')) // vnode
h(Component, {}, () => {}) // default slot
h(Component, {}, {}) // named slots

// named slots without props requires explicit `null` to avoid ambiguity
h(Component, null, {})
**/

This is working as intended, this PR is requesting to change the API.

The only case where we could argue otherwise would be Teleport not supporting the function.

If the intention is for functions to be supported across the board h.ts needs to be updated

[Alfred-Skyblue]

@pikax
I believe we should offer comprehensive support for this, so that we can pass a function in situations where it's uncertain whether tag represents a component or an HTMLElement:

let tag: string | Component = 'div'

h(tag, {}, () => 'hello world')

If we only support Component, the above use case would result in the loss of child elements when dealing with HTMLElement or Teleport

[pikax]

I believe we should offer comprehensive support for this, so that we can pass a function in situations where it's uncertain whether tag represents a component or an HTMLElement:

I'm not saying otherwise, just saying this is a change of the current API, changing API is more cumbersome, there's typescript that needs to be updated which this PR hasn't done it, there's RFC.

I would argue logically it makes sense why Element to not support functions, the reason I say that is because functions are a sugar for default slot, but Element doesn't have slots per se, is just children, because slots implies a vue component.

[Alfred-Skyblue]

core/packages/runtime-core/src/h.ts

Lines 108 to 112 in 2857a59

	export function h(
	type: typeof Teleport,
	props: RawProps & TeleportProps,
	children: RawChildren | RawSlots
	): VNode

@pikax I see there are overloads for Teleport here.