feat: automatically preload and preconnect relevant scripts

Closes #218

src/runtime/components/ScriptYouTubePlayer.vue

@@ -52,7 +52,7 @@ const { onLoaded, status } = useScriptYouTubePlayer({
 
 const player: Ref<YT.Player | undefined> = ref()
 let clickTriggered = false
-if (props.trigger === 'mousedown') {
+if (props.trigger === 'mousedown' && trigger instanceof Promise) {
  trigger.then(() => {
  clickTriggered = true
  })
@@ -126,12 +126,14 @@ if (import.meta.server) {
  useHead({
  link: [
  {
+ key: `nuxt-script-youtube-img`,
  rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
  href: 'https://i.ytimg.com',
  },
  props.aboveTheFold
  // we can preload the placeholder image
  ? {
+ key: `nuxt-script-youtube-img`,
  rel: 'preload',
  as: 'image',
  href: placeholder.value,

src/runtime/composables/useScript.ts

@@ -3,7 +3,7 @@ import type { UseScriptOptions, UseFunctionType, AsAsyncFunctionValues } from '@
 import { resolveScriptKey } from 'unhead'
 import { defu } from 'defu'
 import { useScript as _useScript } from '@unhead/vue'
-import { injectHead, onNuxtReady, useNuxtApp, useRuntimeConfig, reactive } from '#imports'
+import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig, reactive } from '#imports'
 import type { NuxtDevToolsScriptInstance, NuxtUseScriptOptions } from '#nuxt-scripts'
 
 function useNuxtScriptRuntimeConfig() {
@@ -25,11 +25,28 @@ export type UseScriptContext<T extends Record<symbol | string, any>> =
 export function useScript<T extends Record<symbol | string, any> = Record<symbol | string, any>, U = Record<symbol | string, any>>(input: UseScriptInput, options?: NuxtUseScriptOptions<T, U>): UseScriptContext<UseFunctionType<NuxtUseScriptOptions<T, U>, T>> {
  input = typeof input === 'string' ? { src: input } : input
  options = defu(options, useNuxtScriptRuntimeConfig()?.defaultScriptOptions) as NuxtUseScriptOptions<T, U>
-
- if (options.trigger === 'onNuxtReady')
+ // browser hint optimizations
+ const rel = options.trigger === 'onNuxtReady' ? 'preload' : 'preconnect'
+ const id = resolveScriptKey(input) as keyof typeof nuxtApp._scripts
+ if (options.trigger !== 'server' && (rel === 'preload' || !input.src.startsWith('/'))) {
+ useHead({
+ link: [
+ {
+ rel,
+ as: rel === 'preload' ? 'script' : undefined,
+ href: input.src,
+ crossorigin: typeof input.crossorigin !== 'undefined' ? input.crossorigin : 'anonymous',
+ key: `nuxt-script-${id}`,
+ tagPriority: rel === 'preload' ? 'high' : 0,
+ fetchpriority: 'low',
+ },
+ ],
+ })
+ }
+ if (options.trigger === 'onNuxtReady') {
  options.trigger = onNuxtReady
+ }
  const nuxtApp = useNuxtApp()
- const id = resolveScriptKey(input) as keyof typeof nuxtApp._scripts
  nuxtApp.$scripts = nuxtApp.$scripts! || reactive({})
  const exists = !!(nuxtApp.$scripts as Record<string, any>)?.[id]
  if (import.meta.client) {

src/runtime/composables/useScriptTriggerElement.ts

@@ -52,31 +52,29 @@ function useElementVisibilityPromise(element: MaybeComputedElementRef) {
 /**
  * Create a trigger for an element to load a script based on specific element events.
  */
-export function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void> {
+export function useScriptTriggerElement(options: ElementScriptTriggerOptions): Promise<void> | 'onNuxtReady' {
  const { el, trigger } = options
+ const triggers = (Array.isArray(options.trigger) ? options.trigger : [options.trigger]).filter(Boolean) as string[]
+ if (!trigger || triggers.includes('immediate') || triggers.includes('onNuxtReady')) {
+ return 'onNuxtReady'
+ }
  if (import.meta.server || !el)
  return new Promise<void>(() => {})
- const triggers = (Array.isArray(options.trigger) ? options.trigger : [options.trigger]).filter(Boolean) as string[]
- if (el && triggers.some(t => ['visibility', 'visible'].includes(t)))
+ if (triggers.some(t => ['visibility', 'visible'].includes(t)))
  return useElementVisibilityPromise(el)
- if (!trigger)
- return Promise.resolve()
- if (!triggers.includes('immediate')) {
  // TODO optimize this, only have 1 instance of intersection observer, stop on find
- return new Promise<void>((resolve, reject) => {
- const _ = useEventListener(
- typeof el !== 'undefined' ? (el as EventTarget) : document.body,
- triggers,
- () => {
- _()
- resolve()
- },
- { once: true, passive: true },
- )
- tryOnScopeDispose(reject)
- }).catch(() => {
- // it's okay
- })
- }
- return Promise.resolve()
+ return new Promise<void>((resolve, reject) => {
+ const _ = useEventListener(
+ typeof el !== 'undefined' ? (el as EventTarget) : document.body,
+ triggers,
+ () => {
+ _()
+ resolve()
+ },
+ { once: true, passive: true },
+ )
+ tryOnScopeDispose(reject)
+ }).catch(() => {
+ // it's okay
+ })
 }