RFC: separate qrl loading from calling

[wmertens]

Champion

@wmertens

What's the motivation for this proposal?

Problems you are trying to solve:

• creating a qrl costs time and memory
• this is very noticeable in a hot loop

Goals you are trying to achieve:

• minimize time and memory

---

Proposed Solution / Feature

What do you propose?

add .$capture$([...]) to qrls that makes a shallow copy of the qrl and binds it to the captures

Benchmarking shows that this wrapper runs about equally fast as calling the qrl directly:

const newCaptures = ['foo', 123]
const captured = function (...args) { return origQrl.callWithCaptures.apply(this, newCaptures, ...args) }
Object,setPrototypeOf(captured, origQrl)

so when the optimizer would normally create qrls like this

export const app_component_QbmWc3TlyqA = ()=>{
    const count = useSignal(0);
    const debounced = useSignal(0);
    useTaskQrl(/*#__PURE__*/ qrlDEV(i_41mb3rLO0N0, "app_component_useTask_41mb3rLO0N0", {
        file: "/app.tsx",
        lo: 178,
        hi: 430,
        displayName: "app.tsx_app_component_useTask"
    }, [
        count,
        debounced
    ]));
// ...
}

instead it would do

const qrl_41mb3rLO0N0 = /*#__PURE__*/ qrlDEV(i_41mb3rLO0N0, "app_component_useTask_41mb3rLO0N0", {
        file: "/app.tsx",
        lo: 178,
        hi: 430,
        displayName: "app.tsx_app_component_useTask"
    })

export const app_component_QbmWc3TlyqA = ()=>{
    const count = useSignal(0);
    const debounced = useSignal(0);
    useTaskQrl(qrl_41mb3rLO0N0.$capture$([
        count,
        debounced
    ]));
// ...
}

This way, the lazy resolution would only happen once, and every instance of captured qrls would only need the memory to store the captures

PRs/ Links / References

No response

[wmertens]

QwikDev/qwik#8429