[Feature Request]: Add way to easily listen to ALL hook events

[hirasso]

Describe the problem 🧐

For writing tests it would be very nice to have a way to collect all hooks ran by swup in an array. Could also be a nice feature to dramatically simplify the logging of hooks in debug plugin.

Describe the propsed solution 😎

I think the easiest would be to dispatch an additional CustomEvent each time swup dispatches a hook to the document:

protected dispatchDomEvent<T extends HookName>(hook: T, args?: HookArguments<T>): void {
	const detail = { hook, args, visit: this.swup.visit };
	document.dispatchEvent(new CustomEvent(`swup:*`, { detail })); // now we can listen to this!
	document.dispatchEvent(new CustomEvent(`swup:${hook}`, { detail }));
}

And this is how we could collect all hooks fired during a visit:

let hooks: string[] = [];

document.addEventListener("swup:*", (event: any) => {
  const hookName = event.detail.hook as string;
  hooks.push(hookName);
  if (hookName === "visit:start") {
    hooks = [];
  }
  if (hookName === "visit:end") {
    console.log("hooks fired:", hooks);
  }
})

The output right now is:

['page:load', 'animation:out:start', 'animation:out:await', 'animation:out:end', 'content:replace', 'content:scroll', 'page:view', 'link:hover', 'animation:in:start', 'animation:in:await', 'animation:in:end', 'visit:transition', 'visit:end']

Alternatives considered 🤔

• I thought about a way to do this directly, but was overwhelmed by the complexity of the hooks system. The DOM event approach seems simple and easy :)
• Naming of the hook:
  • I thought about calling the hook "swup:all" or "swup:hook", but "swup:*" felt the most intuitive, since it makes it very clear that this is a special kind of event.

How important is this feature to you? 🧭

Would make my life a lot easier

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

Great idea! I think we should implement this on the hook level, i.e. swup.hooks.on('*'), that way we'd still support custom dom events by extension as before.

[hirasso]

Very open to this. HOW? 😆

[hirasso]

I'll try myself on it. Also, need to check if the asterisk works with alpinejs' x-on directive.