Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(nuxt): use simple incrementing id on client (#20992)

Browse Source
This commit is contained in:
Daniel Roe 2023-05-22 21:25:04 +01:00 committed by GitHub
parent 1f0d64c128
commit f94984e5cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/nuxt/src/app/components/nuxt-island.ts
View File

@ -16,6 +16,9 @@ const UID_ATTR = /nuxt-ssr-component-uid(="([^"]*)")?/
const SLOTNAME_RE = /nuxt-ssr-slot-name="([^"]*)"/g
const SLOT_FALLBACK_RE = /<div nuxt-slot-fallback-start="([^"]*)"[^>]*><\/div>(((?!<div nuxt-slot-fallback-end[^>]*>)[\s\S])*)<div nuxt-slot-fallback-end[^>]*><\/div>/g
let id = 0
const getId = process.client ? () => (id++).toString() : randomUUID
export default defineComponent({
name: 'NuxtIsland',
props: {
@ -56,7 +59,7 @@ export default defineComponent({
})
})
function setUid () {
uid.value = ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID() as string
uid.value = ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId() as string
}
const cHead = ref<Record<'link' | 'style', Array<Record<string, string>>>>({ link: [], style: [] })
useHead(cHead)
@ -90,7 +93,7 @@ export default defineComponent({
cHead.value.link = res.head.link
cHead.value.style = res.head.style
ssrHTML.value = res.html.replace(UID_ATTR, () => {
return `nuxt-ssr-component-uid="${randomUUID()}"`
return `nuxt-ssr-component-uid="${getId()}"`
})
key.value++
if (process.client) {

9
packages/nuxt/src/components/runtime/server-component.ts
View File

@ -17,6 +17,9 @@ const SLOTNAME_RE = /nuxt-ssr-slot-name="([^"]*)"/g
const SLOT_FALLBACK_RE = /<div nuxt-slot-fallback-start="([^"]*)"[^>]*><\/div>(((?!<div nuxt-slot-fallback-end[^>]*>)[\s\S])*)<div nuxt-slot-fallback-end[^>]*><\/div>/g
const SSR_UID_RE = /nuxt-ssr-component-uid="([^"]*)"/
let id = 0
const getId = process.client ? () => (id++).toString() : randomUUID
export const createServerComponent = (name: string) => {
return defineComponent({
name,
@ -48,7 +51,7 @@ const NuxtServerComponent = defineComponent({
},
async setup (props, { slots }) {
const instance = getCurrentInstance()!
const uid = ref(getFragmentHTML(instance.vnode?.el)[0]?.match(SSR_UID_RE)?.[1] ?? randomUUID())
const uid = ref(getFragmentHTML(instance.vnode?.el)[0]?.match(SSR_UID_RE)?.[1] ?? getId())
const nuxtApp = useNuxtApp()
const mounted = ref(false)
@ -125,7 +128,7 @@ const NuxtServerComponent = defineComponent({
const html = computed(() => {
const currentSlots = Object.keys(slots)
return res.data.value!.html
.replace(UID_ATTR, () => `nuxt-ssr-component-uid="${randomUUID()}"`)
.replace(UID_ATTR, () => `nuxt-ssr-component-uid="${getId()}"`)
.replace(SLOT_FALLBACK_RE, (full, slotName, content) => {
// remove fallback to insert slots
if (currentSlots.includes(slotName)) {
@ -135,7 +138,7 @@ const NuxtServerComponent = defineComponent({
})
})
function setUid () {
uid.value = html.value.match(SSR_UID_RE)?.[1] ?? randomUUID() as string
uid.value = html.value.match(SSR_UID_RE)?.[1] ?? getId() as string
}
await res