diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts index b129f88dea..ef3f5e608e 100644 --- a/packages/nuxt/src/app/components/nuxt-island.ts +++ b/packages/nuxt/src/app/components/nuxt-island.ts @@ -126,7 +126,7 @@ export default defineComponent({ if (import.meta.client && !canLoadClientComponent.value) { for (const [key, value] of Object.entries(payloadComponents || {})) { - html = html.replace(new RegExp(` data-island-uid="${uid.value}" data-island-client="${key}"[^>]*>`), (full) => { + html = html.replace(new RegExp(` data-island-uid="${uid.value}" data-island-component="${key}"[^>]*>`), (full) => { return full + value.html }) } @@ -267,7 +267,7 @@ export default defineComponent({ const { props } = info const component = components!.get(id)! // use different selectors for even and odd teleportKey to force trigger the teleport - const vnode = createVNode(Teleport, { to: `${isKeyOdd ? 'div' : ''}[data-island-uid='${uid.value}'][data-island-client="${id}"]` }, { + const vnode = createVNode(Teleport, { to: `${isKeyOdd ? 'div' : ''}[data-island-uid='${uid.value}'][data-island-component="${id}"]` }, { default: () => { return [h(component, props)] } diff --git a/packages/nuxt/src/app/components/nuxt-teleport-island-client.ts b/packages/nuxt/src/app/components/nuxt-teleport-island-component.ts similarity index 94% rename from packages/nuxt/src/app/components/nuxt-teleport-island-client.ts rename to packages/nuxt/src/app/components/nuxt-teleport-island-component.ts index aca5f791ed..5d527c3bdb 100644 --- a/packages/nuxt/src/app/components/nuxt-teleport-island-client.ts +++ b/packages/nuxt/src/app/components/nuxt-teleport-island-component.ts @@ -14,7 +14,7 @@ type ExtendedComponent = Component & { * this teleport the component in SSR only if it needs to be hydrated on client */ export default defineComponent({ - name: 'NuxtTeleportIslandClient', + name: 'NuxtTeleportIslandComponent', props: { to: { type: String, @@ -53,7 +53,7 @@ export default defineComponent({ return [h('div', { style: 'display: contents;', 'data-island-uid': '', - 'data-island-client': props.to + 'data-island-component': props.to }, []), h(Teleport, { to: props.to }, slot)] } } diff --git a/packages/nuxt/src/components/islandsTransform.ts b/packages/nuxt/src/components/islandsTransform.ts index a3b6875b8f..9a84865007 100644 --- a/packages/nuxt/src/components/islandsTransform.ts +++ b/packages/nuxt/src/components/islandsTransform.ts @@ -13,7 +13,7 @@ import { isVue } from '../core/utils' interface ServerOnlyComponentTransformPluginOptions { getComponents: () => Component[] /** - * passed down to `NuxtTeleportIslandClient` + * passed down to `NuxtTeleportIslandComponent` * should be done only in dev mode as we use build:manifest result in production */ rootDir?: string @@ -33,7 +33,7 @@ const SCRIPT_RE = /]*>/g const HAS_SLOT_OR_CLIENT_RE = /(]*>)|(nuxt-client)/ const TEMPLATE_RE = / - + - + " `) - expect(result).toContain(`import NuxtTeleportIslandClient from '#app/components/nuxt-teleport-island-client'`) + expect(result).toContain(`import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component'`) }) }) @@ -360,37 +360,37 @@ describe('islandTransform - server and island components', () => { const spyOnWarn = vi.spyOn(console, 'warn') const result = await webpackTransform(` - + `, 'hello.server.vue') expect(normalizeLineEndings(result)).toMatchInlineSnapshot(` " - + " diff --git a/test/basic.test.ts b/test/basic.test.ts index 48128f50b8..473e74c235 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -1558,12 +1558,12 @@ describe('server components/islands', () => { await page.waitForLoadState('networkidle') await page.getByText('Go to page without lazy server component').click() - const text = (await page.innerText('pre')).replaceAll(/ data-island-uid="([^"]*)"/g, '').replace(/data-island-client="([^"]*)"/g, (_, content) => `data-island-client="${content.split('-')[0]}"`) + const text = (await page.innerText('pre')).replaceAll(/ data-island-uid="([^"]*)"/g, '').replace(/data-island-component="([^"]*)"/g, (_, content) => `data-island-component="${content.split('-')[0]}"`) if (isWebpack) { expect(text).toMatchInlineSnapshot('" End page
This is a .server (20ms) async component that was very long ...
42
Sugar Counter 12 x 1 = 12
This is a .server (20ms) async component that was very long ...
42
Sugar Counter 12 x 1 = 12
ServerWithClient.server.vue :

count: 0

This component should not be preloaded
a
b
c
This is not interactive
Sugar Counter 12 x 1 = 12
The component bellow is not a slot but declared as interactive
Sugar Counter 12 x 1 = 12
"') } else { - expect(text).toMatchInlineSnapshot(`" End page
This is a .server (20ms) async component that was very long ...
42
Sugar Counter 12 x 1 = 12
This is a .server (20ms) async component that was very long ...
42
Sugar Counter 12 x 1 = 12
ServerWithClient.server.vue :

count: 0

This component should not be preloaded
a
b
c
This is not interactive
Sugar Counter 12 x 1 = 12
The component bellow is not a slot but declared as interactive
"`) + expect(text).toMatchInlineSnapshot(`" End page
This is a .server (20ms) async component that was very long ...
42
Sugar Counter 12 x 1 = 12
This is a .server (20ms) async component that was very long ...
42
Sugar Counter 12 x 1 = 12
ServerWithClient.server.vue :

count: 0

This component should not be preloaded
a
b
c
This is not interactive
Sugar Counter 12 x 1 = 12
The component bellow is not a slot but declared as interactive
"`) } expect(text).toContain('async component that was very long') @@ -1804,7 +1804,7 @@ describe('component islands', () => { if (isDev()) { result.head.link = result.head.link.filter(l => !l.href.includes('@nuxt+ui-templates') && (l.href.startsWith('_nuxt/components/islands/') && l.href.includes('_nuxt/components/islands/LongAsyncComponent'))) } - result.html = result.html.replaceAll(/ (data-island-uid|data-island-client)="([^"]*)"/g, '') + result.html = result.html.replaceAll(/ (data-island-uid|data-island-component)="([^"]*)"/g, '') expect(result).toMatchInlineSnapshot(` { "components": {}, @@ -1869,7 +1869,7 @@ describe('component islands', () => { result.props = {} result.components = {} result.slots = {} - result.html = result.html.replaceAll(/ (data-island-uid|data-island-client)="([^"]*)"/g, '') + result.html = result.html.replaceAll(/ (data-island-uid|data-island-component)="([^"]*)"/g, '') expect(result).toMatchInlineSnapshot(` { @@ -1895,7 +1895,7 @@ describe('component islands', () => { const { components } = result result.components = {} result.slots = {} - result.html = result.html.replace(/ data-island-client="([^"]*)"/g, (_, content) => ` data-island-client="${content.split('-')[0]}"`) + result.html = result.html.replace(/ data-island-component="([^"]*)"/g, (_, content) => ` data-island-component="${content.split('-')[0]}"`) const teleportsEntries = Object.entries(components || {}) @@ -1906,7 +1906,7 @@ describe('component islands', () => { "link": [], "style": [], }, - "html": "
ServerWithClient.server.vue :

count: 0

This component should not be preloaded
a
b
c
This is not interactive
Sugar Counter 12 x 1 = 12
The component bellow is not a slot but declared as interactive
", + "html": "
ServerWithClient.server.vue :

count: 0

This component should not be preloaded
a
b
c
This is not interactive
Sugar Counter 12 x 1 = 12
The component bellow is not a slot but declared as interactive
", "slots": {}, "state": {}, }