Make composition more natural in syntax and closer to XML, HTML and JSX

[Nefcanto]

What is it about?

Syntax of Qwik components and slots

What's the motivation for this proposal?

Let's compare these two code snippets. Both try to render a Tab component, but provide different components for different parts:

Qwik way:

<Tab>
    <div q:slot="title">Qwik</div>
    <div>A resumable framework for building instant web applications</div>
    <span q:slot="footer">made with ❤️ by </span>
    <a q:slot="footer" href="https://builder.io">
        builder.io
    </a>
</Tab>

React way:

<Tab
    title={<div>Qwik</div>}
    footer={<>
      <span >made with ❤️ by </span>
      <a href="https://builder.io">
        builder.io
      </a>
    </>}
>
    <div>A resumable framework for building instant web applications</div>
</Tab>

Svelte way:

<Tab>
  <div slot="title">Qwik</div>
  A resumable framework for building instant web applications
  <span slot="footer">made with ❤️ by </span>
  <a slot="footer" href="https://builder.io">builder.io</a>
</Tab>

Either let's remove the q: part from the beginning of slots (the Svelte syntax), or let's make passing components as attributes/props possible (the React way).

Qwik's current syntax is not developer-friendly when it comes to writing everyday code that seems more natural, such as HTML, JSX, or XML.

Of course, XML namespaces are similar to this. But that can be justified. Qwik can not.

Proposed Solution / Feature

Either let us pass other components as attributes/props (since you are using JSX).

Or,

Drop the q: from the beginning of it.

Links / References

No response