fix(scripts): attempt resolving api before loading

Author: harlan-zw

examples/vite-ssr-vue/src/pages/gtag.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { useScript } from '@unhead/vue'
+
+const { dataLayer, $script } = useScript<{ dataLayer: any[] }>({
+  src: 'https://www.googletagmanager.com/gtm.js?id=GTM-MNJD4B',
+}, {
+  stub({ fn }) {
+    return fn === 'dataLayer' && typeof window === 'undefined' ? [] : undefined
+  },
+  beforeInit() {
+    if (typeof window !== 'undefined') {
+      window.dataLayer = window.dataLayer || []
+      window.dataLayer.push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'})
+    }
+  },
+  use() {
+    return {
+      dataLayer: window.dataLayer
+    }
+  },
+  trigger: typeof window !== 'undefined' ? window.requestIdleCallback : 'manual'
+})
+
+dataLayer.push({
+  event: 'page_view',
+  page_path: '/stripe',
+})
+
+$script.then((res) => {
+  console.log('ready!', res)
+})
+
+useHead({
+  title: $script.status,
+})
+</script>
+
+<template>
+<div>
+  <h1>gtm</h1>
+  <div>
+    script status: {{ $script.status }}
+  </div>
+  <div>
+    data layer:
+    <div v-for="data in dataLayer">
+      {{ data }}
+    </div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+h1,
+a {
+  color: green;
+}
+</style>

examples/vite-ssr-vue/src/pages/stripe.vue

@@ -4,7 +4,7 @@ import { useScript } from '@unhead/vue'
 const { elements, $script } = useScript<{ elements: (() => void) }>({
   src: 'https://js.stripe.com/v3/',
 }, {
-  use: () => window.Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'),
+  use: () => window.Stripe?.('pk_test_TYooMQauvdEDq54NiTphI7jx'),
   trigger: typeof window !== 'undefined' ? window.requestIdleCallback : 'manual'
 })
 

packages/schema/src/hooks.ts

@@ -55,5 +55,5 @@ export interface HeadHooks {
   'ssr:rendered': (ctx: SSRRenderContext) => HookResult
 
   'script:updated': (ctx: { script: ScriptInstance<any> }) => HookResult
-  'script:instance-fn': (ctx: { script: ScriptInstance<any>, fn: string | symbol, args: any }) => HookResult
+  'script:instance-fn': (ctx: { script: ScriptInstance<any>, fn: string | symbol, args: any, exists: boolean }) => HookResult
 }

packages/unhead/src/composables/useScript.ts

@@ -27,7 +27,7 @@ export function useScript<T>(_input: UseScriptInput, _options?: UseScriptOptions
   const key = `use-script.${id}`
   if (head._scripts?.[id])
     return head._scripts[id]
-
+  options.beforeInit?.()
   const syncStatus = (s: ScriptInstance<T>['status']) => {
     script.status = s
     head.hooks.callHook(`script:updated`, hookCtx)
@@ -44,9 +44,11 @@ export function useScript<T>(_input: UseScriptInput, _options?: UseScriptOptions
   const loadPromise = new Promise<T>((resolve, reject) => {
     const cleanUp = head.hooks.hook('script:updated', ({ script }: { script: ScriptInstance<T> }) => {
       if (script.id === id && (script.status === 'loaded' || script.status === 'error')) {
-        if (script.status === 'loaded')
-          resolve(options.use?.() as T)
-        else if (script.status === 'error')
+        if (script.status === 'loaded') {
+          const api = options.use?.()
+          api && resolve(api)
+        }
+        else if (script.status === 'error') {
           reject(new Error(`Failed to load script: ${input.src}`))
         cleanUp()
       }
@@ -105,16 +107,19 @@ export function useScript<T>(_input: UseScriptInput, _options?: UseScriptOptions
       // $script is stubbed by abstraction layers
       if (fn === '$script')
         return $script
-      return (...args: any[]) => {
-        const hookCtx = { script, fn, args }
+      const attempt = (args?: any[]) => {
+        if (head.ssr)
+          return
+        const api = options.use?.()
+        const exists = !!(api && fn in api)
+        const hookCtx = { script, fn, args, exists }
         // we can't await this, mainly used for debugging
         head.hooks.callHook('script:instance-fn', hookCtx)
-        // third party scripts only run on client-side, mock the function
-        if (head.ssr || !options.use)
-          return
-        // @ts-expect-error untyped
-        return script.status === 'loaded' ? options.use()[fn]?.(...args) : loadPromise.then(api => api[fn]?.(...args))
+        return exists && api[fn]
       }
+      // api may already be loaded
+      // for instance GTM will already have dataLayer available, we can expose it directly
+      return attempt() || ((...args: any[]) => loadPromise.then(() => attempt(args)(...args)))
     },
   }) as any as T & { $script: ScriptInstance<T> }
   // 4. Providing a unique context for the script

test/unhead/dom/useScript.test.ts

@@ -13,7 +13,7 @@ describe('dom useScript', () => {
     expect(await useDelayedSerializedDom()).toMatchInlineSnapshot(`
       "<!DOCTYPE html><html><head>
 
-      <script data-onload="" data-onerror="" defer="" fetchpriority="low" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://cdn.example.com/script.js" data-hid="438d65b"></script></head>
+      <script data-onload="" data-onerror="" defer="" fetchpriority="low" crossorigin="anonymous" referrerpolicy="no-referrer" src="https://cdn.example.com/script.js" data-hid="c5c65b0"></script></head>
       <body>
 
       <div>
@@ -26,19 +26,16 @@ describe('dom useScript', () => {
     `)
 
     let calledFn
-    let calledFnArgs
     const hookPromise = new Promise<void>((resolve) => {
       head.hooks.hook('script:instance-fn', ({ script, fn, args }) => {
         if (script.id === instance.$script.id) {
           calledFn = fn
-          calledFnArgs = args
           resolve()
         }
       })
     })
     instance.test('hello-world')
     await hookPromise
     expect(calledFn).toBe('test')
-    expect(calledFnArgs).toEqual(['hello-world'])
   })
 })