Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-31 07:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/nuxt/package.json
View File

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

10
packages/nuxt/src/head/runtime/plugins/unhead.ts
View File

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

7
pnpm-lock.yaml
View File

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