[🐞] Mindblowing way to render JSXNode or Component

[piscopancer]

Which component is affected?

Qwik Runtime

Describe the bug

What I am going to describe works in react. ⚛

I have a hook 🏗 (testing stuff) 🧪

function useContextMenu({items}: {items: string[]}) {
  const Component: JSXNode =
    <div class={'flex flex-col p-2 gap-2 rounded-lg bg-white shadow-lg shadow-slate-300/20'}>
      {
        items.map((item, i) => 
          <div class={'bg-red-100'}>{item}</div>
        )
      }
    </div>
  
  return {Component}
}

These are 3 attempts I took to render this component 📦 and you must know why (but I do not) I have to let's say return this component so that qwik can see it.

export default component$(() => {
    const { Component } = useContextMenu({ items: ['home', 'profile', 'project', 'about'] })
    console.log(Component);
    
    return (
        <div class={'m-4 p-4 flex flex-col rounded-2xl shadow-slate-300/20 shadow-lg bg-white gap-2'}>
            {(() => Component)() /** This works */}
            {[Component].map(c => c) /** This works */}
            {Component /** This doesn't work */}
        </div>
    );
})

So what is it? 🤔

Reproduction

no no no, it's just two components, nothing else. I asked people on qwik discord copy paste and try this code, turns out it does not work for them either.

Steps to reproduce

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 1.33 GB / 7.34 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.6.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (112.0.1722.68)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @builder.io/qwik: 1.0.0 => 1.0.0
    @builder.io/qwik-city: ^1.0.0 => 1.0.0
    undici: 5.22.0 => 5.22.0
    vite: 4.3.3 => 4.3.3

Additional Information

No response

[manucorporat]

We can probably fix this corner cases, qwik tries to do its best to optimize rendering, this "cool" patterns while they should work, will destroy all ability for the optimizer to understand what's going on.

[piscopancer]

We can probably fix this corner cases, qwik tries to do its best to optimize rendering, this "cool" patterns while they should work, will destroy all ability for the optimizer to understand what's going on.

yes, the way I am rendering JSX in the code above is obviously a substitute. I do not know how to render JSX in Qwik properly. In case of

{Component /** This doesn't work */}

The component is rendered as [Object object] and I these two working approaches are the only I have come up with so far. Do you know any other better or let's say more intuitive way or proper way how to maybe "cache" components and not do a return statement like I showed above? 🙄

[PatrickJS]

this should work now. please reopen if it doesn't