Hook for scripts being loaded

[joachimhviid]

It would be helpful to be able to react to a script getting loaded. Currently the module has a scripts:updated hook that can be used for searching for the loaded event, but it is will be inefficient to iterate through the events to find the 'loaded' event, every time there is an update.
Instead I propose a scripts:loaded hook that will be called once when the script reaches that status. This allows the developer to react to the specific event and run some logic in response. For instance, you might want to run a consent update or a custom event once a script has been loaded via a consent banner.
An example implementation could look something like the following inside the useScript composable:

head.hooks.hook('script:updated', (ctx) => {
  if (ctx.script.id !== instance.$script.id)
    return
  if (ctx.script.status === 'loaded') {
    nuxtApp.callHook('scripts:loaded', { [ctx.script.id]: true })
  }
  // convert the status to a timestamp
  payload.events.push({
    type: 'status',
    status: ctx.script.status,
    at: Date.now(),
  })
  payload.$script = instance.$script
  syncScripts()
})

[harlan-zw]

Hi @joachimhviid

Thanks for the issue. I think maybe the docs aren't clear as useScript is designed to expose this really simply, you shouldn't need to use these hooks, they're mostly for internal or lower level usage.

// useScript (and registry scripts) always return a `$script` object which is a wrapper for the <script> tag
const { $script } = useScript('/script.js')

// Option 1: The $script object can be used as a promise that resolves when the script is loaded
$script.then(() => {
  // script is loaded!
})

// Option 2: Watch the script status
watch($script.status, (status) => {
  if (status === 'loaded') {
   // do something
  }
})

Maybe the Unhead useScript docs are clearer.

For the consent, see the Consent Management API.

Let me know if any of that isn't clear either way.

[joachimhviid]

Thanks for clearing it up. That approach worked great, thanks!
I've really enjoyed using the module so far, I'm looking forwards to the full release.