feat(scripts): safer lifecycle hooks onLoaded, onError

[harlan-zw]

Currently we can wait for a script to load like so

const script = useScript('/script.js')
script.then(() => {
  // script loaded!
})

This provides a simple promise-based interface that is concise and fairly easy to work with, however, this has several issues:

• Awaiting the script may brick the page if called at the wrong time
• No way to de-register the callback
• Bypasses any contextual lifecycle hooks such as Vue's component mounting
• Promise handles use more memory, especially if they're staying open

To address this we move to a lifecycle register setup, where callbacks are provided to onLoaded and onError.

const script = useScript('/script.js')
// ✅ no promise handles left open, can't await as it's not a promise
const deregister = script.onLoaded(() => {
  // script loaded!
  // ✅ we can have this automatically hook into lifecycle events like Vue mounting
})
// ...
deregister() // ✅ we can deregister the callback