Skip to content

Commit

Permalink
fix(nuxt): remove unused prop in NuxtTeleportIslandComponent (#27093)
Browse files Browse the repository at this point in the history
  • Loading branch information
@huang-julien
huang-julien committed May 7, 2024
1 parent 4bf6060 commit a4d0958
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 84 deletions.
8 changes: 0 additions & 8 deletions packages/nuxt/src/app/components/nuxt-teleport-island-component.ts
View file
Expand Up @@ -27,14 +27,6 @@ export default defineComponent({
type: Boolean,
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 }) {
const nuxtApp = useNuxtApp()
Expand Down
9 changes: 1 addition & 8 deletions packages/nuxt/src/components/islandsTransform.ts
View file
Expand Up @@ -13,12 +13,6 @@ import { isVue } from '../core/utils'

interface ServerOnlyComponentTransformPluginOptions {
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
*/
Expand All @@ -43,7 +37,6 @@ function wrapWithVForDiv (code: string, vfor: string): string {

export const islandsTransform = createUnplugin((options: ServerOnlyComponentTransformPluginOptions, meta) => {
const isVite = meta.framework === 'vite'
const { isDev, rootDir } = options
return {
name: 'server-only-component-transform',
enforce: 'pre',
Expand Down Expand Up @@ -115,7 +108,7 @@ export const islandsTransform = createUnplugin((options: ServerOnlyComponentTran
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.appendRight(startingIndex + loc[1].end, '</NuxtTeleportIslandComponent>')
}
Expand Down
2 changes: 0 additions & 2 deletions packages/nuxt/src/components/module.ts
View file
Expand Up @@ -260,8 +260,6 @@ export default defineNuxtModule<ComponentsOptions>({
if (isServer) {
config.plugins.push(islandsTransform.vite({
getComponents,
rootDir: nuxt.options.rootDir,
isDev: nuxt.options.dev,
selectiveClient,
}))
}
Expand Down
90 changes: 24 additions & 66 deletions packages/nuxt/test/islandTransform.test.ts
View file
Expand Up @@ -23,11 +23,9 @@ const pluginWebpack = islandsTransform.raw({
selectiveClient: true,
}, { 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({
getComponents,
rootDir: '/root',
isDev,
selectiveClient,
}, { framework: 'vite' }) as Plugin

Expand Down Expand Up @@ -193,7 +191,7 @@ describe('islandTransform - server and island components', () => {
<slot v-else-if="test" />
<slot v-else />
</template>
`, 'WithVif.vue', false, true)
`, 'WithVif.vue', true)

expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<script setup lang="ts">
Expand All @@ -214,44 +212,7 @@ describe('islandTransform - server and island components', () => {

describe('nuxt-client', () => {
describe('vite', () => {
it('test transform with vite in dev', async () => {
const result = await viteTransform(`<template>
<div>
<!-- should not be wrapped by NuxtTeleportIslandComponent -->
<HelloWorld />
<!-- should be wrapped by NuxtTeleportIslandComponent with a rootDir attr -->
<HelloWorld nuxt-client />
</div>
</template>
<script setup lang="ts">
import HelloWorld from './HelloWorld.vue'
</script>
`, 'hello.server.vue', true, true)

expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template>
<div>
<!-- should not be wrapped by NuxtTeleportIslandComponent -->
<HelloWorld />
<!-- should be wrapped by NuxtTeleportIslandComponent with a rootDir attr -->
<NuxtTeleportIslandComponent to="HelloWorld-ZsRS8qEyqK" root-dir="/root" :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).toContain('root-dir="/root"')
})

it('test transform with vite in prod', async () => {
it('test transform with vite', async () => {
const result = await viteTransform(`<template>
<div>
<HelloWorld />
Expand All @@ -262,13 +223,13 @@ describe('islandTransform - server and island components', () => {
<script setup lang="ts">
import HelloWorld from './HelloWorld.vue'
</script>
`, 'hello.server.vue', false, true)
`, 'hello.server.vue', true)

expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template>
<div>
<HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
<NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div>
</template>
Expand All @@ -280,9 +241,6 @@ describe('islandTransform - server and island components', () => {
</script>
"
`)

// root-dir prop should never be used in production
expect(result).not.toContain('root-dir="')
})

it('test dynamic nuxt-client', async () => {
Expand All @@ -298,13 +256,13 @@ describe('islandTransform - server and island components', () => {
const nuxtClient = false
</script>
`, 'hello.server.vue', false, true)
`, 'hello.server.vue', true)

expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template>
<div>
<HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-eo0XycWCUV" :nuxt-client="nuxtClient"><HelloWorld /></NuxtTeleportIslandComponent>
<NuxtTeleportIslandComponent to="HelloWorld-eo0XycWCUV" :nuxt-client="nuxtClient"><HelloWorld /></NuxtTeleportIslandComponent>
</div>
</template>
Expand Down Expand Up @@ -333,7 +291,7 @@ describe('islandTransform - server and island components', () => {
const nuxtClient = false
</script>
`, 'hello.server.vue', false, false)
`, 'hello.server.vue', false)

expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
"<template>
Expand Down Expand Up @@ -363,21 +321,21 @@ describe('islandTransform - server and island components', () => {
</div>
</template>
`, 'hello.server.vue', false, true)
`, 'hello.server.vue', true)

expect(result).toMatchInlineSnapshot(`
"<script setup>
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'</script><template>
<div>
<HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div>
</template>
"<script setup>
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'</script><template>
<div>
<HelloWorld />
<NuxtTeleportIslandComponent to="HelloWorld-CyH3UXLuYA" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div>
</template>
"
`)
"
`)
expect(result).toContain('import NuxtTeleportIslandComponent from \'#app/components/nuxt-teleport-island-component\'')
})

Expand All @@ -389,17 +347,17 @@ describe('islandTransform - server and island components', () => {
<HelloWorld v-else nuxt-client />
</div>
</template>
`, 'hello.server.vue', false, true)
`, 'hello.server.vue', true)

expect(result).toMatchInlineSnapshot(`
"<script setup>
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'</script><template>
<div>
<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 to="HelloWorld-m1IbXHdd8O" :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 to="HelloWorld-m1IbXHdd8O" :nuxt-client="true"><HelloWorld /></NuxtTeleportIslandComponent>
</div>
</template>
"
Expand Down

0 comments on commit a4d0958

Please sign in to comment.