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

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

@@ -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()

packages/nuxt/src/components/islandsTransform.ts

@@ -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
    */
@@ -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',
@@ -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>')
             }

packages/nuxt/src/components/module.ts

@@ -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,
           }))
         }

packages/nuxt/test/islandTransform.test.ts

@@ -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
 
@@ -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">
@@ -214,44 +212,7 @@ describe('islandTransform - server and island components', () => {
 
   describe('nuxt-client', () => {
     describe('vite', () => {
-      it('test transform with vite in dev', async () => {
+      it('test transform with vite', 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 () => {
         const result = await viteTransform(`<template>
         <div>
           <HelloWorld />
@@ -262,7 +223,7 @@ 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>
@@ -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 () => {
@@ -298,7 +256,7 @@ describe('islandTransform - server and island components', () => {
 
       const nuxtClient = false
       </script>
-      `, 'hello.server.vue', false, true)
+      `, 'hello.server.vue', true)
 
         expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
           "<template>
@@ -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>
@@ -363,7 +321,7 @@ describe('islandTransform - server and island components', () => {
         </div>
       </template>
 
-      `, 'hello.server.vue', false, true)
+      `, 'hello.server.vue', true)
 
         expect(result).toMatchInlineSnapshot(`
           "<script setup>
@@ -389,7 +347,7 @@ 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>