Merge branch 'refactor/nuxt-island' of https://github.com/nuxt/nuxt into refactor/nuxt-island

packages/nuxt/src/app/components/nuxt-island.client.ts

@@ -85,12 +85,6 @@ export default defineComponent({
     // If not hydrating, fetchComponent() will set it
     const rawPayload = nuxtApp.isHydrating ? toRaw(nuxtApp.payload.data)?.[`${props.name}_${hashId.value}`] ?? emptyPayload() : emptyPayload()
 
-    const nonReactivePayload: Pick<NuxtIslandResponse, 'chunks'| 'props' | 'teleports'> = {
-      chunks: rawPayload.chunks,
-      props: rawPayload.props,
-      teleports: rawPayload.teleports
-    }
-
     const ssrHTML = ref<string>(getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || '')
 
     const slotProps = computed(() => getSlotProps(ssrHTML.value))
@@ -103,8 +97,7 @@ export default defineComponent({
       let html = ssrHTML.value
 
       if (!canLoadClientComponent.value) {
-        // replace all client components with their static content
-        for (const [key, value] of Object.entries(nonReactivePayload.teleports || {})) {
+        for (const [key, value] of Object.entries(rawPayload.teleports || {})) {
           html = html.replace(new RegExp(`<div [^>]*nuxt-ssr-client="${key}"[^>]*>`), (full) => {
             return full + value
           })
@@ -168,10 +161,10 @@ export default defineComponent({
           if (canLoadClientComponent.value && res.chunks) {
             await loadComponents(props.source, res.chunks)
           }
-          nonReactivePayload.props = res.props
+          rawPayload.props = res.props
         }
-        nonReactivePayload.teleports = res.teleports
-        nonReactivePayload.chunks = res.chunks
+        rawPayload.teleports = res.teleports
+        rawPayload.chunks = res.chunks
 
         // must await next tick for Teleport to work correctly so vue can teleport the content to the new static node
         // teleport update is based on uid
@@ -199,8 +192,8 @@ export default defineComponent({
       fetchComponent()
     } else if (!nuxtApp.isHydrating || !nuxtApp.payload.serverRendered) {
       await fetchComponent()
-    } else if (selectiveClient && canLoadClientComponent.value && nonReactivePayload.chunks) {
-      await loadComponents(props.source, nonReactivePayload.chunks)
+    } else if (selectiveClient && canLoadClientComponent.value && rawPayload.chunks) {
+      await loadComponents(props.source, rawPayload.chunks)
     }
 
     return () => {
@@ -213,6 +206,7 @@ export default defineComponent({
       }, [h(createStaticVNode(html.value || '<div></div>', 1))])]
 
       if (uid.value && (mounted.value || nuxtApp.isHydrating) && html.value) {
+        // render slots
         for (const slot in slots) {
           if (availableSlots.value.includes(slot)) {
             nodes.push(createVNode(Teleport, { to:  `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-slot-name='${slot}']` }, {
@@ -220,8 +214,10 @@ export default defineComponent({
             }))
           }
         }
+
+        // render components
         if (selectiveClient && canLoadClientComponent.value) {
-          for (const [id, props] of Object.entries(nonReactivePayload.props ?? {})) {
+          for (const [id, props] of Object.entries(rawPayload.props ?? {})) {
             const component = components!.get(id.split('-')[0])!
             const vnode = createVNode(Teleport, { to: `[nuxt-ssr-component-uid='${uid.value}'] [nuxt-ssr-client="${id}"]` }, {
               default: () => {

packages/nuxt/src/app/components/nuxt-island.server.ts

@@ -9,7 +9,7 @@ import { joinURL, withQuery } from 'ufo'
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
 import { useNuxtApp, useRuntimeConfig } from '../nuxt'
 import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
-import { SLOTNAME_RE, SSR_UID_RE, UID_ATTR, getSlotProps, nuxtIslandProps, pKey } from './utils'
+import { SLOTNAME_RE, SSR_UID_RE, UID_ATTR, getSlotProps, pKey, nuxtIslandProps } from './utils'
 
 // @ts-expect-error virtual file
 import { remoteComponentIslands, selectiveClient } from '#build/nuxt.config.mjs'

packages/nuxt/src/app/components/utils.ts

@@ -213,4 +213,4 @@ export const nuxtIslandProps = {
     type: Boolean,
     default: false
   }
-}
+}