Nomadic elements

[wmertens]

What is it about?

Rendering children anywhere, also with SSR

What's the motivation for this proposal?

Problems you are trying to solve:

• qwik-react can only have 1 qwik child in the component
• modals, toasts etc (this might be obsolete with popovers)

Goals you are trying to achieve:

• reactified qwik components that can be used inside qwikified react

---

Proposed Solution / Feature

What do you propose?

in v2, vnodes can easily be moved around, they only need to some metadata in the vnode map.

we need an api that allows creating decoupled vnodes, and also allows ssr-rendering them.

Perhaps const element = createNomad(id, jsxNode) and then it is up to the user to put the element somewhere.

On the client this would return a DOM element, and on the server it would return something you can call toString on to get the html.

That way, you could create a reactifier like so:

const reactify$ = (cmpQrl) => {
  return isServer
    ? (props) => {
      const id = useId()
      const qwik = createNomad(id, qwikJsx(cmpQrl, props))
      return <div dangerouslySetInnerHTML={{ __html: qwik.toString() }} />
    }
    : (props) => {
      const id = useId()
      // Qwik should recover the vnode using the id
      const qwik = createNomad(id, qwikJsx(cmpQrl, props))
      // probably useEffect here to insert the qwik node?
      // how to render the div so that hydration succeeds?
      // maybe provide the html string, store the original qwik element, render and then replace?
      return <div>some React magic</div>
    }

Links / References

No response