no qrl creation in CSR

[wmertens]

What is it about?

QRLs are for serialization and code splitting only

What's the motivation for this proposal?

on the client, it's extra work to create qrls. It's way faster for the JS engine to create functions that capture the scope than for userspace to create QRL objects that do basically the same thing.

example:

const Foo = component$(() => {
  const [sig] = useSignal(0);
  return <button onClick$={() => sig.value++}>Hi</button>;
});

Right now, this creates a qrl for the arrow function every render, and it is similar to the server version:

const importer = () => import('./incrementer');
// ...
<button on:click={qrl(importer, 'incrementer', [sig])}>Hi</button>;

and incrementer.ts is:

export const incrementer = () => {
  const [sig] = useLexicalScope();
  sig.value++;
};

Instead, we should allow regular functions on the client, because we don't need to know what the qrl is, we won't serialize it, we just need to call it.

const importer = () => import('./incrementer');
// ...

<button on:click={() => importer().then(mod => mod.incrementer_direct(sig)))}>Hi</button>

and then incrementer.ts is:

export function incrementer() {
  incrementer_direct.apply(this, useLexicalScope());
}

export function incrementer_direct(sig) {
  sig.value++;
}

We can also memoize the importer:

const qrls = {
  get incrementer_direct() {
    const fnP = import('./incrementer').then(mod => mod.incrementer_direct);
    fnP.then(fn => {
      this.incrementer_direct = fn;
    });
    return (sig) => fnP.then(fn => fn(sig));
  }
}

// ...
<button on:click={() => qrls.incrementer_direct(sig)}>Hi</button>

Proposed Solution / Feature

and core could export a helper to create these memoized qrls

function createMemoizedQRLs(...importers) {
  const qrls = {};
  for (let i = 0; i < importers.length; i++) {
    const importer = importers[i++];
    const name = importers[i];
    Object.defineProperty(qrls, name, {
      get() {
        const fnP = importer().then((mod) => mod[name]);
        fnP.then((fn) => {
          Object.defineProperty(qrls, name, {
            value: fn,
          });
        });
        return function (...args) {
          return fnP.then((fn) => fn.apply(this, args));
        };
      },
    });
  }
  return qrls;
}

Which makes the final code:

const qrls = createMemoizedQRLs(import('./incrementer'), 'increment_direct');

<button on:click={() => qrls.increment_direct(sig)}>Hi</button>;

Links / References

No response

[maiieul]

Would we still be able to handle preload reprioritizations at QRL creation time? Currently we handle reprioritizations when the QRLs run. But with some changes in the optimizer it should be possible to eliminate waterfalls by handling them at QRL creation time. This will need to happen both on first page load and also after SPA route navigations.

[wmertens]

right, the optimizer should add in preload hints, good point.

Maybe like

<button on:click={preload('incrementer', 0.7), () => qrls.incrementer_direct(sig)}>Hi</button>

[maiieul]

Sounds good if it works. Can this wait until we are properly handling preload reprioritizations a QRL creation time? Otherwise we might realize a bit too late that it's not doable with this new approach for some unforseen reason.

[wmertens]

@maiieul what do you mean with preload reprioritizations?

In any case, with the example I gave, the preload is happening at the exact same time as before.

[maiieul]

I mean e.g. a user clicks a button, we need to reprioritize the bundles for that button with 100% probability.