fix!: property debounce dom updates

Author: harlan-zw

packages/angular/src/unhead/install.ts

@@ -4,6 +4,7 @@ import { InjectionToken, makeEnvironmentProviders } from '@angular/core'
 import { BEFORE_APP_SERIALIZED } from '@angular/platform-server'
 import { createHead as _createClientHead } from 'unhead/client'
 import { createHead as _createServerHead } from 'unhead/server'
+import { createDebouncedDomRender } from 'unhead/src/client'
 import { Unhead } from '../lib/unhead.service'
 import { ReactivityPlugin } from '../unhead/ReactivityPlugin'
 
@@ -36,7 +37,7 @@ export function provideServerHead(options: Omit<CreateHeadOptions, 'domDelayFn'
 export function provideClientHead(options: Omit<CreateHeadOptions, 'domOptions' | 'document'> = {}) {
   const head = _createClientHead<AngularUnhead>({
     domOptions: {
-      delayFn: fn => setTimeout(() => fn(), 10),
+      render: createDebouncedDomRender(fn => setTimeout(() => fn(), 0)),
     },
     ...options,
     plugins: [

packages/schema/src/plugins.ts

@@ -1,3 +1,5 @@
+import type { Unhead } from '@unhead/schema/src/head'
+
 export interface RenderDomHeadOptions {
   /**
    * Document to use for rendering. Allows stubbing for testing.
@@ -6,5 +8,5 @@ export interface RenderDomHeadOptions {
 }
 
 export interface DomPluginOptions extends RenderDomHeadOptions {
-  delayFn?: (fn: () => void) => void
+  render: ((head: Unhead<any>) => Promise<void>)
 }

packages/unhead/src/client/createHead.ts

@@ -3,14 +3,18 @@ import { IsBrowser } from '@unhead/shared'
 import { createHeadCore } from '../createHead'
 import { DomPlugin } from './plugins/domPlugin'
 import { ClientEventHandlerPlugin } from './plugins/eventHandlers'
+import { renderDOMHead } from './renderDOMHead'
 
 export function createHead<T extends Record<string, any> = Head>(options: CreateClientHeadOptions = {}) {
   return createHeadCore<T>({
     document: (IsBrowser ? document : undefined),
     ...options,
     plugins: [
       ...(options.plugins || []),
-      DomPlugin(options.domOptions),
+      DomPlugin({
+        render: renderDOMHead,
+        ...options.domOptions,
+      }),
       ClientEventHandlerPlugin,
     ],
   })

packages/unhead/src/client/debounced.ts

@@ -1,16 +1,26 @@
-import type { DomPluginOptions, Unhead } from '@unhead/schema'
+import type { Unhead } from '@unhead/schema'
 import { renderDOMHead } from './renderDOMHead'
 
 /**
  * Queue a debounced update of the DOM head.
  */
-export function debouncedRenderDOMHead<T extends Unhead<any>>(head: T, options: DomPluginOptions = {}) {
-  const fn = options.delayFn || (fn => setTimeout(fn, 10))
-  return head._domDebouncedUpdatePromise = head._domDebouncedUpdatePromise || new Promise<void>(resolve => fn(() => {
-    return renderDOMHead(head, options)
-      .then(() => {
-        delete head._domDebouncedUpdatePromise
-        resolve()
-      })
-  }))
+export function createDebouncedDomRender(delayFunction: (fn: () => void) => void): ((head: Unhead<any>) => Promise<void>) {
+  let pendingCallback: (() => void) | null = null
+
+  return (head: Unhead<any>) => {
+    if (pendingCallback) {
+      pendingCallback = null
+    }
+
+    return head._domDebouncedUpdatePromise = head._domDebouncedUpdatePromise || new Promise<void>((resolve) => {
+      pendingCallback = () => {
+        renderDOMHead(head)
+          .then(() => {
+            delete head._domDebouncedUpdatePromise
+            resolve()
+          })
+      }
+      delayFunction(pendingCallback)
+    })
+  }
 }

packages/unhead/src/client/plugins/domPlugin.ts

@@ -1,8 +1,7 @@
 import type { DomPluginOptions } from '@unhead/schema'
 import { defineHeadPlugin } from '@unhead/shared'
-import { debouncedRenderDOMHead } from '../debounced'
 
-export function DomPlugin(options?: DomPluginOptions) {
+export function DomPlugin(options: DomPluginOptions) {
   return defineHeadPlugin((head) => {
     // restore initial entry from payload (titleTemplate and templateParams)
     const initialPayload = head.resolvedOptions.document?.head.querySelector('script[id="unhead:payload"]')?.innerHTML || false
@@ -14,7 +13,7 @@ export function DomPlugin(options?: DomPluginOptions) {
       hooks: {
         'entries:updated': (head) => {
           // async load the renderDOMHead function
-          debouncedRenderDOMHead(head, options)
+          options.render(head)
         },
       },
     }

packages/vue/src/client.ts

@@ -1,6 +1,6 @@
 import type { CreateClientHeadOptions, MergeHead } from '@unhead/schema'
 import type { MaybeComputedRef, ReactiveHead, VueHeadClient } from '@unhead/vue'
-import { createHead as _createHead } from 'unhead/client'
+import { createHead as _createHead, createDebouncedDomRender } from 'unhead/client'
 import { nextTick } from 'vue'
 import { vueInstall } from './install'
 import { VueReactivityPlugin } from './VueReactivityPlugin'
@@ -11,7 +11,7 @@ export * from 'unhead/client'
 export function createHead<T extends MergeHead>(options: CreateClientHeadOptions = {}): VueHeadClient<T> {
   const head = _createHead<MaybeComputedRef<ReactiveHead<T>>>({
     domOptions: {
-      delayFn: fn => nextTick(() => setTimeout(() => fn(), 0)),
+      render: createDebouncedDomRender(nextTick),
     },
     ...options,
     plugins: [