Automatic code extraction #3 — conditional jsx

[maiieul]

What is it about?

Automatically extracting conditional jsx and remove the need for vDOM/vNodes

What's the motivation for this proposal?

Problems you are trying to solve:

vdOM/vNodes slows down reactivity.

We currrently need them in order to rerun the component in case of component level subscriptions triggered by conditional jsx in the component.

Goals you are trying to achieve:

• Get closer to Solid / Svelte Runes / Vue Vapor reactivity speed -> It is not mandatory as the cases where such speed matters are quite limited, but it would make adopting Qwik even more convincing.

Proposed Solution / Feature

What do you propose?

We can automatically extract any conditional jsx into a qrl. This way there is no need for vNode diffing as each conditional jsx will produce its own piece of code that can subscribe and update directly to signal changes.

Code examples

See the diff here.

Basically the same as wrapping each conditional jsx into a $() today

...
export const ImporterButton = component$<PropsOf<"button">>(({ onClick$ }) => {
 ...

  return (
    <>
      <button>
        Import Button {$(() => counter.value > 1 ? counter.value : computed.value)}
        {$(() => contextCounter.value > 10 && contextCounter.value)}
      </button>
      <br />
      {$(() => counter.value > 1 && counter.value < 50 && asyncCounter.value)}
      {$(() => counter.value > 1 && counter.value < 50 && computedCounter.value)}
      {$(() => counter.value > 1 && counter.value < 50 ? <div>Hi there</div> : null)}
      {$(() => counter.value > 1 && counter.value < 50 && (
        <TestButton onTripleClick$={() => console.log("TRIPLE CLICKED!")} />
      ))}
      {$(() => counter.value > 1 && counter.value < 50 && QrlComponent())}
      {$(() => counter.value > 1 && counter.value < 50 && componentSignal.value)}
      {$(() => counter.value > 1 && counter.value < 50 && <InlinedComponent />)}
    </>
  );
});

---

Links / References

No response