feat: usePreloaderInfo

[maiieul]

What is it?

• Feature / enhancement

Description

Draft PR for QwikDev/qwik-evolution#311

Checklist

• My code follows the developer guidelines of this project
• I performed a self-review of my own code
• I added a changeset with pnpm change
• I made corresponding changes to the Qwik docs
• I added new tests to cover the fix / functionality

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5130bea

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[GrandSchtroumpf]

That would be a great addition. I think emitting event on internal task is a great way to expose new features with a low maintenance cost. I left some small comments

[GrandSchtroumpf]

I would rename it qpreload for consistency

[GrandSchtroumpf]

Personally I would not expose this as an public API, for maintenance purpose, but would let dev implement it as they want.
The event and its CustomEvent should be included in packages/qwik/src/core/render/jsx/types/jsx-qwik-attributes.ts to expose it inside useOnWindow

This could be added in the doc:

useOnWindow('newPreloaderInfo', $((ev) => {
  const { userEventPreloads, activePreloads } = ev.details;
  // Do something
}))

[GrandSchtroumpf]

I would keep the item just removed and send it in the event:

Suggested change

	activePreloads.shift();
	const lastPreload = activePreloads.shift();

[GrandSchtroumpf]

Maybe also dispatch last preload. I know it could be deduce from the diff of previous and next activePreloads, but since we've got it in the this scope I think it would be an easy devX win.

Suggested change

	detail: { userEventPreloads, activePreloads },
	detail: { userEventPreloads, activePreloads, lastPreload },

[GrandSchtroumpf]

Just adding an example of how this feature could be leveraged:

const LoadingStyle = () => {
  useOnWindow('qpreload', sync$((e) => {
    const selectors = e.details.activePreloads.map(({ url }) => `[on:click~=${url}]`);
    const selectorStr = Array.from(new Set(selectors)).join(',');
    const style = document.getElementById('loading-style');
    style.innerHTML = `${selector} {cursor: wait}`
  }));
  return <style id="loading-style"></style>
}

This will add a waiting cursor to all element that have on:click attribute which include a URL currently preloading.