From f8a23564c3f1c0b87fcd25eb57e73ae68ee9c6a9 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 20 Sep 2022 07:24:45 +0100
Subject: [PATCH] fix(nuxt): don't treeshake client-only fallback templates
 (#7659)

---
 packages/nuxt/src/components/tree-shake.ts           | 12 ++++++++----
 test/basic.test.ts                                   |  2 ++
 test/fixtures/basic/pages/client-only-components.vue |  6 ++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/components/tree-shake.ts b/packages/nuxt/src/components/tree-shake.ts
index 1cb14dde5c..23d869ddde 100644
--- a/packages/nuxt/src/components/tree-shake.ts
+++ b/packages/nuxt/src/components/tree-shake.ts
@@ -6,7 +6,7 @@ import type { Component } from '@nuxt/schema'
 
 interface TreeShakeTemplatePluginOptions {
   sourcemap?: boolean
-  getComponents(): Component[]
+  getComponents (): Component[]
 }
 
 export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplatePluginOptions) => {
@@ -26,7 +26,7 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
           .filter(c => c.mode === 'client' && !components.some(other => other.mode !== 'client' && other.pascalName === c.pascalName))
           .map(c => `${c.pascalName}|${c.kebabName}`)
           .concat('ClientOnly|client-only')
-          .map(component => `<(${component})[^>]*>[\\s\\S]*?<\\/(${component})>`)
+          .map(component => `<(${component})(| [^>]*)>[\\s\\S]*?<\\/(${component})>`)
 
         regexpMap.set(components, new RegExp(`(${clientOnlyComponents.join('|')})`, 'g'))
       }
@@ -34,8 +34,12 @@ export const TreeShakeTemplatePlugin = createUnplugin((options: TreeShakeTemplat
       const COMPONENTS_RE = regexpMap.get(components)!
       const s = new MagicString(code)
 
-      // Do not render client-only slots on SSR, but preserve attributes
-      s.replace(COMPONENTS_RE, r => r.replace(/<([^>]*[^/])\/?>[\s\S]*$/, '<$1 />'))
+      // Do not render client-only slots on SSR, but preserve attributes and fallback/placeholder slots
+      s.replace(COMPONENTS_RE, r => r.replace(/<([^>]*[^/])\/?>[\s\S]*$/, (chunk: string, el: string) => {
+        const fallback = chunk.match(/<template[^>]*(#|v-slot:)(fallback|placeholder)[^>]*>[\s\S]*?<\/template>/)?.[0] || ''
+        const tag = el.split(' ').shift()
+        return `<${el}>${fallback}</${tag}>`
+      }))
 
       if (s.hasChanged()) {
         return {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 554d2bb8a1..9116bc51db 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -137,6 +137,8 @@ describe('pages', () => {
     const html = await $fetch('/client-only-components')
     expect(html).toContain('<div class="client-only-script" foo="bar">')
     expect(html).toContain('<div class="client-only-script-setup" foo="hello">')
+    expect(html).toContain('<div>Fallback</div>')
+    expect(html).not.toContain('Should not be server rendered')
 
     await expectNoClientErrors('/client-only-components')
   })
diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index 940ce2fcd6..f020ea1cfc 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -8,5 +8,11 @@
         </div>
       </template>
     </ClientOnlySetupScript>
+    <ClientOnly>
+      Should not be server rendered.
+      <template #fallback>
+        <div>Fallback</div>
+      </template>
+    </ClientOnly>
   </div>
 </template>