RFC: Allow q:args for extra arguments to event handlers

[shairez]

Discussed in #310

^{Originally posted by wmertens October 6, 2025}

What is it about?

optimizing qrl creation

What's the motivation for this proposal?

Problems you are trying to solve:

• In loops, every handler becomes a separate qrl object

Goals you are trying to achieve:

• minimize object creation

---

Proposed Solution / Feature

What do you propose?

The optimizer could rewrite

item => <button onClick$={() => selected.value = item.key} />
// whic optimizes to
item => jsx('button', {onClick$: qrl(()=>import('./abc.js'), 'abc', [selected, item])})

into

item => <button q:args={[item, selected]} onClick$={(ev, el, item, selected) => selected.value = item.key} />
// whic optimizes to
item => jsx('button', {"q:args": [item, selected], onClick$: qrl(()=>import('./abc.js'), 's_abc')})

and Qwik Core would make sure to call the event handlers with (event, target, ...qArgs).
This also works with qwikloader because we use the core _run qrl to run handlers.

Because now the handler doesn't capture scope directly, it can be moved up into module scope

const s_abc = qrl(()=>import('./abc.js'), 's_abc')
item => jsx('button', {"q:args": [item, selected], onClick$: s_abc})

This means that loops will no longer create a qrl object per item.

Also, because the qrl has no more scope, it can even be a sync qrl if it's short. That saves a module import, smaller bundlegraph etc.

const s_abc = syncQrl("(a,b,c,d)=>d.value=c.key")
item => jsx('button', {"q:args": [item, selected], onClick$: s_abc})

Implementation

• optimizer: implement qrl moving to highest possible scope capture
• core: implement q:args on _run
• optimizer: move all handler scope of tags into q:args
• optimizer: convert to syncqrl if short

Links / References

No response

[wmertens]

This is implemented in beta