fix(nuxt): trigger immediate DOM update on page:finish (#22566)

This commit is contained in:
Harlan Wilton 2023-08-11 13:24:23 +03:00 committed by GitHub
parent 20efac7d57
commit 89ad88bd38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 7 deletions

View File

@ -60,6 +60,7 @@
"@nuxt/vite-builder": "workspace:../vite",
"@unhead/ssr": "^1.2.2",
"@unhead/vue": "^1.2.2",
"@unhead/dom": "^1.2.2",
"@vue/shared": "^3.3.4",
"acorn": "8.10.0",
"c12": "^1.4.2",

View File

@ -1,4 +1,5 @@
import { createHead as createClientHead } from '@unhead/vue'
import { renderDOMHead } from '@unhead/dom'
import { defineNuxtPlugin } from '#app/nuxt'
export default defineNuxtPlugin({
@ -11,17 +12,16 @@ export default defineNuxtPlugin({
if (import.meta.client) {
// pause dom updates until page is ready and between page transitions
let pauseDOMUpdates = true
const unpauseDom = () => {
const syncHead = async () => {
pauseDOMUpdates = false
// trigger the debounced DOM update
head.hooks.callHook('entries:updated', head)
await renderDOMHead(head)
}
head.hooks.hook('dom:beforeRender', (context) => { context.shouldRender = !pauseDOMUpdates })
nuxtApp.hooks.hook('page:start', () => { pauseDOMUpdates = true })
// wait for new page before unpausing dom updates (triggered after suspense resolved)
nuxtApp.hooks.hook('page:finish', unpauseDom)
nuxtApp.hooks.hook('page:finish', syncHead)
// unpause the DOM once the mount suspense is resolved
nuxtApp.hooks.hook('app:suspense:resolve', unpauseDom)
nuxtApp.hooks.hook('app:suspense:resolve', syncHead)
}
}
})

View File

@ -364,6 +364,9 @@ importers:
'@types/node':
specifier: ^14.18.0 || >=16.10.0
version: 18.17.4
'@unhead/dom':
specifier: ^1.2.2
version: 1.2.2
'@unhead/ssr':
specifier: ^1.2.2
version: 1.2.2
@ -7189,7 +7192,7 @@ packages:
graceful-fs: 4.2.11
/jstransformer@1.0.0:
resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==}
resolution: {integrity: sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=}
dependencies:
is-promise: 2.2.2
promise: 7.3.1
@ -10320,7 +10323,7 @@ packages:
engines: {node: '>=0.6'}
/token-stream@1.0.0:
resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=}
dev: false
/totalist@1.1.0: