fix(scripts): hook into proxy calls with script:instance-fn

Author: harlan-zw

packages/schema/src/hooks.ts

@@ -56,4 +56,5 @@ export interface HeadHooks {
 
   'script:transform': (ctx: { script: UseScriptResolvedInput }) => HookResult
   'script:updated': (ctx: { script: ScriptInstance<any> }) => HookResult
+  'script:instance-fn': (ctx: { script: ScriptInstance<any>, fn: string | symbol, args: any }) => HookResult
 }

packages/unhead/src/composables/useScript.ts

@@ -179,12 +179,15 @@ export function useScript<T>(_input: UseScriptInput, _options?: UseScriptOptions
   // 3. Proxy the script API
   const instance = new Proxy({}, {
     get(_, fn) {
+      if (fn === '$script')
+        return script
       const stub = options.stub?.({ script, fn })
       if (stub)
         return stub
-      if (fn === '$script')
-        return script
       return (...args: any[]) => {
+        const hookCtx = { script, fn, args }
+        // 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

test/unhead/dom/useScript.test.ts

@@ -4,9 +4,9 @@ import { useDOMHead, useDelayedSerializedDom } from './util'
 
 describe('dom useScript', () => {
   it('basic', async () => {
-    useDOMHead()
+    const head = useDOMHead()
 
-    useScript({
+    const instance = useScript<{ test: (foo: string) => void }>({
       src: 'https://cdn.example.com/script.js',
     })
 
@@ -24,5 +24,21 @@ describe('dom useScript', () => {
 
       </body></html>"
     `)
+
+    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'])
   })
 })