From 0f839dd723367ce0181b5497e80e6b8bfd66a673 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Sun, 30 Jul 2023 23:36:11 +0200
Subject: [PATCH] feat(nuxt): environment-specific plugin execution for islands
 (#20726)

---
 packages/nuxt/src/app/nuxt.ts                        | 12 ++++++++++++
 test/basic.test.ts                                   |  2 +-
 test/bundle.test.ts                                  |  2 +-
 .../basic/components/islands/LongAsyncComponent.vue  |  5 +++++
 test/fixtures/basic/plugins/server-only.server.ts    | 12 ++++++++++++
 5 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 test/fixtures/basic/plugins/server-only.server.ts

diff --git a/packages/nuxt/src/app/nuxt.ts b/packages/nuxt/src/app/nuxt.ts
index 2c0bf250fc..9a104a1613 100644
--- a/packages/nuxt/src/app/nuxt.ts
+++ b/packages/nuxt/src/app/nuxt.ts
@@ -155,6 +155,16 @@ export interface PluginMeta {
   order?: number
 }
 
+export interface PluginEnvContext {
+  /**
+   * This enable the plugin for islands components.
+   * Require `experimental.componentsIslands`.
+   *
+   * @default true
+   */
+  islands?: boolean
+}
+
 export interface ResolvedPluginMeta {
   name?: string
   parallel?: boolean
@@ -169,6 +179,7 @@ export interface Plugin<Injections extends Record<string, unknown> = Record<stri
 export interface ObjectPlugin<Injections extends Record<string, unknown> = Record<string, unknown>> extends PluginMeta {
   hooks?: Partial<RuntimeNuxtHooks>
   setup?: Plugin<Injections>
+  env?: PluginEnvContext
   /**
    * Execute plugin in parallel with other parallel plugins.
    *
@@ -318,6 +329,7 @@ export async function applyPlugins (nuxtApp: NuxtApp, plugins: Array<Plugin & Ob
   const parallels: Promise<any>[] = []
   const errors: Error[] = []
   for (const plugin of plugins) {
+    if (process.server && nuxtApp.ssrContext?.islandContext && plugin.env?.islands === false) { continue }
     const promise = applyPlugin(nuxtApp, plugin)
     if (plugin.parallel) {
       parallels.push(promise.catch(e => errors.push(e)))
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 03d3df8d30..06968d32ab 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -1649,7 +1649,7 @@ describe('component islands', () => {
           "link": [],
           "style": [],
         },
-        "html": "<div nuxt-ssr-component-uid><div> count is above 2 </div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div> that was very long ... <div id=\\"long-async-component-count\\">3</div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"test\\" nuxt-ssr-slot-data=\\"[{&quot;count&quot;:3}]\\"></div><p>hello world !!!</p><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"hello\\" nuxt-ssr-slot-data=\\"[{&quot;t&quot;:0},{&quot;t&quot;:1},{&quot;t&quot;:2}]\\"><div nuxt-slot-fallback-start=\\"hello\\"></div><!--[--><div style=\\"display:contents;\\"><div> fallback slot -- index: 0</div></div><div style=\\"display:contents;\\"><div> fallback slot -- index: 1</div></div><div style=\\"display:contents;\\"><div> fallback slot -- index: 2</div></div><!--]--><div nuxt-slot-fallback-end></div></div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"fallback\\" nuxt-ssr-slot-data=\\"[{&quot;t&quot;:&quot;fall&quot;},{&quot;t&quot;:&quot;back&quot;}]\\"><div nuxt-slot-fallback-start=\\"fallback\\"></div><!--[--><div style=\\"display:contents;\\"><div>fall slot -- index: 0</div><div class=\\"fallback-slot-content\\"> wonderful fallback </div></div><div style=\\"display:contents;\\"><div>back slot -- index: 1</div><div class=\\"fallback-slot-content\\"> wonderful fallback </div></div><!--]--><div nuxt-slot-fallback-end></div></div></div>",
+        "html": "<div nuxt-ssr-component-uid><div> count is above 2 </div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"default\\"></div> that was very long ... <div id=\\"long-async-component-count\\">3</div>  <div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"test\\" nuxt-ssr-slot-data=\\"[{&quot;count&quot;:3}]\\"></div><p>hello world !!!</p><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"hello\\" nuxt-ssr-slot-data=\\"[{&quot;t&quot;:0},{&quot;t&quot;:1},{&quot;t&quot;:2}]\\"><div nuxt-slot-fallback-start=\\"hello\\"></div><!--[--><div style=\\"display:contents;\\"><div> fallback slot -- index: 0</div></div><div style=\\"display:contents;\\"><div> fallback slot -- index: 1</div></div><div style=\\"display:contents;\\"><div> fallback slot -- index: 2</div></div><!--]--><div nuxt-slot-fallback-end></div></div><div style=\\"display:contents;\\" nuxt-ssr-slot-name=\\"fallback\\" nuxt-ssr-slot-data=\\"[{&quot;t&quot;:&quot;fall&quot;},{&quot;t&quot;:&quot;back&quot;}]\\"><div nuxt-slot-fallback-start=\\"fallback\\"></div><!--[--><div style=\\"display:contents;\\"><div>fall slot -- index: 0</div><div class=\\"fallback-slot-content\\"> wonderful fallback </div></div><div style=\\"display:contents;\\"><div>back slot -- index: 1</div><div class=\\"fallback-slot-content\\"> wonderful fallback </div></div><!--]--><div nuxt-slot-fallback-end></div></div></div>",
         "state": {},
       }
     `)
diff --git a/test/bundle.test.ts b/test/bundle.test.ts
index 3c6f55bac6..2b4c07ba6e 100644
--- a/test/bundle.test.ts
+++ b/test/bundle.test.ts
@@ -32,7 +32,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
     const serverDir = join(rootDir, '.output/server')
 
     const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"64.2k"')
+    expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"64.4k"')
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"2330k"')
diff --git a/test/fixtures/basic/components/islands/LongAsyncComponent.vue b/test/fixtures/basic/components/islands/LongAsyncComponent.vue
index 59cefd9a04..dde35da8aa 100644
--- a/test/fixtures/basic/components/islands/LongAsyncComponent.vue
+++ b/test/fixtures/basic/components/islands/LongAsyncComponent.vue
@@ -8,6 +8,7 @@
     <div id="long-async-component-count">
       {{ count }}
     </div>
+    {{ headers['custom-head'] }}
     <slot name="test" :count="count" />
     <p>hello world !!!</p>
     <slot v-for="(t, index) in 3" name="hello" :t="t">
@@ -28,8 +29,12 @@
 </template>
 
 <script setup lang="ts">
+import { getResponseHeaders } from 'h3'
 defineProps<{
   count: number
 }>()
+
+const evt = useRequestEvent()
+const headers = getResponseHeaders(evt)
 const { data } = await useFetch('/api/very-long-request')
 </script>
diff --git a/test/fixtures/basic/plugins/server-only.server.ts b/test/fixtures/basic/plugins/server-only.server.ts
new file mode 100644
index 0000000000..f205d70ef1
--- /dev/null
+++ b/test/fixtures/basic/plugins/server-only.server.ts
@@ -0,0 +1,12 @@
+import { setHeader } from 'h3'
+
+export default defineNuxtPlugin({
+  name: 'server-only-plugin',
+  setup () {
+    const evt = useRequestEvent()
+    setHeader(evt, 'custom-head', 'hello')
+  },
+  env: {
+    islands: false
+  }
+})