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

fix(nuxt): remove unused prop in NuxtTeleportIslandComponent (#27093)

Browse Source
This commit is contained in:
Julien Huang 2024-05-07 22:55:54 +02:00 committed by GitHub
parent 4bf6060db6
commit a4d0958727
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 25 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/nuxt/src/app/components/nuxt-teleport-island-component.ts
View File

@ -27,14 +27,6 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
/**
* ONLY used in dev mode since we use build:manifest result in production
* do not pass any value in production
*/
rootDir: {
type: String,
default: null,
},
}, },
setup (props, { slots }) { setup (props, { slots }) {
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()

9
packages/nuxt/src/components/islandsTransform.ts
View File

@ -13,12 +13,6 @@ import { isVue } from '../core/utils'
interface ServerOnlyComponentTransformPluginOptions { interface ServerOnlyComponentTransformPluginOptions {
getComponents: () => Component[] getComponents: () => Component[]
/**
* passed down to `NuxtTeleportIslandComponent`
* should be done only in dev mode as we use build:manifest result in production
*/
rootDir?: string
isDev?: boolean
/** /**
* allow using `nuxt-client` attribute on components * allow using `nuxt-client` attribute on components
*/ */
@ -43,7 +37,6 @@ function wrapWithVForDiv (code: string, vfor: string): string {
export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions, meta) => { export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions, meta) => {
const isVite = meta.framework === 'vite' const isVite = meta.framework === 'vite'
const { isDev, rootDir } = options
return { return {
name: 'server-only-component-transform', name: 'server-only-component-transform',
enforce: 'pre', enforce: 'pre',
@ -115,7 +108,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
startTag = startTag.replaceAll(EXTRACTED_ATTRS_RE, '') startTag = startTag.replaceAll(EXTRACTED_ATTRS_RE, '')
} }
s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportIslandComponent${attributeToString(wrapperAttributes)} to="${node.name}-${uid}" ${rootDir && isDev ? `root-dir="${rootDir}"` : ''} :nuxt-client="${attributeValue}">`) s.appendLeft(startingIndex + loc[0].start, `<NuxtTeleportIslandComponent${attributeToString(wrapperAttributes)} to="${node.name}-${uid}" :nuxt-client="${attributeValue}">`)
s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, startTag) s.overwrite(startingIndex + loc[0].start, startingIndex + loc[0].end, startTag)
s.appendRight(startingIndex + loc[1].end, '</NuxtTeleportIslandComponent>') s.appendRight(startingIndex + loc[1].end, '</NuxtTeleportIslandComponent>')
} }

2
packages/nuxt/src/components/module.ts
View File

@ -260,8 +260,6 @@ export default defineNuxtModule<ComponentsOptions>({
if (isServer) { if (isServer) {
config.plugins.push(islandsTransform.vite({ config.plugins.push(islandsTransform.vite({
getComponents, getComponents,
rootDir: nuxt.options.rootDir,
isDev: nuxt.options.dev,
selectiveClient, selectiveClient,
})) }))
} }

90
packages/nuxt/test/islandTransform.test.ts
View File

@ -23,11 +23,9 @@ const pluginWebpack = islandsTransform.raw({
selectiveClient: true, selectiveClient: true,
}, { framework: 'webpack', webpack: { compiler: {} as any } }) }, { framework: 'webpack', webpack: { compiler: {} as any } })
const viteTransform = async (source: string, id: string, isDev = false, selectiveClient = false) => { const viteTransform = async (source: string, id: string, selectiveClient = false) => {
const vitePlugin = islandsTransform.raw({ const vitePlugin = islandsTransform.raw({
getComponents, getComponents,
rootDir: '/root',
isDev,
selectiveClient, selectiveClient,
}, { framework: 'vite' }) as Plugin }, { framework: 'vite' }) as Plugin
@ -193,7 +191,7 @@ describe('islandTransform - server and island components', () => {
<slot v-else-if="test" /> <slot v-else-if="test" />
<slot v-else /> <slot v-else />
</template> </template>
`, 'WithVif.vue', false, true) `, 'WithVif.vue', true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(` expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<script setup lang="ts"> "<script setup lang="ts">
@ -214,12 +212,10 @@ describe('islandTransform - server and island components', () => {
describe('nuxt-client', () => { describe('nuxt-client', () => {
describe('vite', () => { describe('vite', () => {
it('test transform with vite in dev', async () => { it('test transform with vite', async () => {
const result = await viteTransform(`<template> const result = await viteTransform(`<template>
<div> <div>
<!-- should not be wrapped by NuxtTeleportIslandComponent -->
<HelloWorld /> <HelloWorld />
<!-- should be wrapped by NuxtTeleportIslandComponent with a rootDir attr -->
<HelloWorld nuxt-client /> <HelloWorld nuxt-client />
</div> </div>
</template> </template>
@ -227,15 +223,13 @@ describe('islandTransform - server and island components', () => {
<script setup lang="ts"> <script setup lang="ts">
import HelloWorld from './HelloWorld.vue' import HelloWorld from './HelloWorld.vue'
</script> </script>
`, 'hello.server.vue', true, true) `, 'hello.server.vue', true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(` expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template> "<template>
<div> <div>
<!-- should not be wrapped by NuxtTeleportIslandComponent -->
<HelloWorld /> <HelloWorld />
<!-- should be wrapped by NuxtTeleportIslandComponent with a rootDir attr --> <NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
<NuxtTeleportIslandComponent to="HelloWorld-ZsRS8qEyqK" root-dir="/root" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div> </div>
</template> </template>
@ -247,42 +241,6 @@ describe('islandTransform - server and island components', () => {
</script> </script>
" "
`) `)
// root-dir prop should never be used in production
expect(result).toContain('root-dir="/root"')
})
it('test transform with vite in prod', async () => {
const result = await viteTransform(`<template>
<div>
<HelloWorld />
<HelloWorld nuxt-client />
</div>
</template>
<script setup lang="ts">
import HelloWorld from './HelloWorld.vue'
</script>
`, 'hello.server.vue', false, true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template>
<div>
<HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div>
</template>
<script setup lang="ts">
import { vforToArray as __vforToArray } from '#app/components/utils'
import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component'
import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'
import HelloWorld from './HelloWorld.vue'
</script>
"
`)
// root-dir prop should never be used in production
expect(result).not.toContain('root-dir="')
}) })
it('test dynamic nuxt-client', async () => { it('test dynamic nuxt-client', async () => {
@ -298,13 +256,13 @@ describe('islandTransform - server and island components', () => {
const nuxtClient = false const nuxtClient = false
</script> </script>
`, 'hello.server.vue', false, true) `, 'hello.server.vue', true)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(` expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template> "<template>
<div> <div>
<HelloWorld /> <HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-eo0XycWCUV" :nuxt-client="nuxtClient"><HelloWorld /></NuxtTeleportIslandComponent> <NuxtTeleportIslandComponent to="HelloWorld-eo0XycWCUV" :nuxt-client="nuxtClient"><HelloWorld /></NuxtTeleportIslandComponent>
</div> </div>
</template> </template>
@ -333,7 +291,7 @@ describe('islandTransform - server and island components', () => {
const nuxtClient = false const nuxtClient = false
</script> </script>
`, 'hello.server.vue', false, false) `, 'hello.server.vue', false)
expect(normalizeLineEndings(result)).toMatchInlineSnapshot(` expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template> "<template>
@ -363,21 +321,21 @@ describe('islandTransform - server and island components', () => {
</div> </div>
</template> </template>
`, 'hello.server.vue', false, true) `, 'hello.server.vue', true)
expect(result).toMatchInlineSnapshot(` expect(result).toMatchInlineSnapshot(`
"<script setup> "<script setup>
import { vforToArray as __vforToArray } from '#app/components/utils' import { vforToArray as __vforToArray } from '#app/components/utils'
import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component' import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component'
import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'</script><template> import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'</script><template>
<div> <div>
<HelloWorld /> <HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent> <NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div> </div>
</template> </template>
" "
`) `)
expect(result).toContain('import NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'') expect(result).toContain('import NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'')
}) })
@ -389,7 +347,7 @@ describe('islandTransform - server and island components', () => {
<HelloWorld v-else nuxt-client /> <HelloWorld v-else nuxt-client />
</div> </div>
</template> </template>
`, 'hello.server.vue', false, true) `, 'hello.server.vue', true)
expect(result).toMatchInlineSnapshot(` expect(result).toMatchInlineSnapshot(`
"<script setup> "<script setup>
@ -397,9 +355,9 @@ describe('islandTransform - server and island components', () => {
import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component' import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component'
import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'</script><template> import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'</script><template>
<div> <div>
<NuxtTeleportIslandComponent v-if="false" to="HelloWorld-D9uaHyzL7X" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent> <NuxtTeleportIslandComponent v-if="false" to="HelloWorld-D9uaHyzL7X" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
<NuxtTeleportIslandComponent v-else-if="true" to="HelloWorld-o4RZMtArnE" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent> <NuxtTeleportIslandComponent v-else-if="true" to="HelloWorld-o4RZMtArnE" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
<NuxtTeleportIslandComponent v-else to="HelloWorld-m1IbXHdd8O" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent> <NuxtTeleportIslandComponent v-else to="HelloWorld-m1IbXHdd8O" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div> </div>
</template> </template>
" "