[Bug?]: Hydration Mismatch for passed JSX elements

[illiaChaban]

[Bug?]: Hydration Mismatch for passed JSX elements

[doeixd]

Related Issue

[illiaChaban]

Update: if i pass a function that returns JSXElement instead of JSXElement instead, it works
Although i don't think it's a fully expected behavior and I would still expect passing JSXElements to work
i.e

<Separate items={[() => <span>Hello</span>, () => <span>world</span>]} />

[mdynnl]

This is expected with current state of hydration.

<Separate items={[<span>Hello</span>, <span>world</span>]} />

compiles to

_$createComponent(Separate, {
  get items() {
    return [_tmpl$(), _tmpl$2()];
  }
})

and accessing p.items generates new elements.
as far as the hydration is concerned, there is nothing wrong with that as long as these elements can be found in the DOM.

👉 But new elements created while evaluating p.items.length won't exist in the dom hence the hydration error.

i() === p.items.length - 1 ? <>{item}</> : <>{item} • </>

this doesn't happen with

<Separate items={[() => <span>Hello</span>, () => <span>world</span>]} />

or

/* 🛑 use at your own risk */
const items = [<span>Hello</span>, <span>world</span>]
<Separate items={items} /> // no getter

or

function Separate(p) {
	/* ❌ don't do this */
	const items = p.items // just for the sake of the point

	const slightlyCorrect = createMemo(() => p.items)

	/* ✅ do this */
	const correct = children(() => p.items)
}

[illiaChaban]

@mdynnl how is this expected? From the DX point of view it doesn't make much sense and this behavior is not documented anywhere.
Thanks for explaining on why it doesn't work due to some internal implementation details, however, IMO this is not an expected behavior, since i would expect SSR and SPA versions of Solid to work the same way

[illiaChaban]

why can't i generate a new elements and not append them to the DOM? Why can't they be hydrated as part of the javascript?