From ebfea1684059c3953f87c059e9922ece6da16f42 Mon Sep 17 00:00:00 2001
From: Inesh Bose <2504266b@student.gla.ac.uk>
Date: Fri, 12 May 2023 17:14:49 +0100
Subject: [PATCH 1/3] feat(dev-only): allow fallback

---
 docs/2.guide/2.directory-structure/1.components.md | 5 +++++
 packages/nuxt/src/app/components/dev-only.ts       | 2 +-
 packages/nuxt/src/core/plugins/dev-only.ts         | 4 ++--
 test/basic.test.ts                                 | 2 ++
 test/fixtures/basic/pages/index.vue                | 8 ++++++++
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index 7a39da99f66f..f9000e45fdba 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/2.guide/2.directory-structure/1.components.md
@@ -336,6 +336,11 @@ The content will not be included in production builds and tree-shaken.
     <DevOnly>
       <!-- this component will only be rendered during development -->
       <LazyDebugBar />
+
+      <!-- if you ever require to have a replacement during production -->
+      <template #fallback>
+        <div><!-- empty div for flex.justify-between --></div>
+      </template>
     </DevOnly>
   </div>
 </template>
diff --git a/packages/nuxt/src/app/components/dev-only.ts b/packages/nuxt/src/app/components/dev-only.ts
index ba7cd22deaf5..3c88ccae2cf5 100644
--- a/packages/nuxt/src/app/components/dev-only.ts
+++ b/packages/nuxt/src/app/components/dev-only.ts
@@ -6,6 +6,6 @@ export default defineComponent({
     if (process.dev) {
       return () => props.slots.default?.()
     }
-    return () => null
+    return () => props.slots.fallback
   }
 })
diff --git a/packages/nuxt/src/core/plugins/dev-only.ts b/packages/nuxt/src/core/plugins/dev-only.ts
index b0c6226cc3bf..ce6207c14c32 100644
--- a/packages/nuxt/src/core/plugins/dev-only.ts
+++ b/packages/nuxt/src/core/plugins/dev-only.ts
@@ -9,7 +9,7 @@ interface DevOnlyPluginOptions {
 }
 
 export const DevOnlyPlugin = createUnplugin((options: DevOnlyPluginOptions) => {
-  const DEVONLY_COMP_RE = /<(dev-only|DevOnly)>[\s\S]*?<\/(dev-only|DevOnly)>/g
+  const DEVONLY_COMP_RE = /<(?:dev-only|DevOnly)>[^<]*(?:<template\s+#fallback>(?<fallback>[\s\S]*?)<\/template>)?[\s\S]*?<\/(?:dev-only|DevOnly)>/g
 
   return {
     name: 'nuxt:server-devonly:transform',
@@ -29,7 +29,7 @@ export const DevOnlyPlugin = createUnplugin((options: DevOnlyPluginOptions) => {
       const s = new MagicString(code)
       const strippedCode = stripLiteral(code)
       for (const match of strippedCode.matchAll(DEVONLY_COMP_RE) || []) {
-        s.remove(match.index!, match.index! + match[0].length)
+        s.overwrite(match.index!, match.index! + match[0].length, match.groups?.fallback || '')
       }
 
       if (s.hasChanged()) {
diff --git a/test/basic.test.ts b/test/basic.test.ts
index c7d2a94d0071..322437db161c 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -83,6 +83,8 @@ describe('pages', () => {
     expect(html).toContain('Composable | star: auto imported from ~/composables/nested/bar.ts via star export')
     // should import components
     expect(html).toContain('This is a custom component with a named export.')
+    // should remove dev-only and replace with any fallback content
+    expect(html).toContain('Some prod-only info')
     // should apply attributes to client-only components
     expect(html).toContain('<div style="color:red;" class="client-only"></div>')
     // should render server-only components
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index 7b6c4bb7349d..2b31da638015 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -11,6 +11,14 @@
     <div>Composable | star: {{ useNestedBar() }}</div>
     <DevOnly>Some dev-only info</DevOnly>
     <div><DevOnly>Some dev-only info</DevOnly></div>
+    <div>
+      <DevOnly>
+        Some dev-only info
+        <template #fallback>
+          Some prod-only info
+        </template>
+      </DevOnly>
+    </div>
     <div>Path: {{ $route.fullPath }}</div>
     <NuxtLink to="/">
       Link

From a23a75fc97d207a6dcea1c62666b9319ba25a9d4 Mon Sep 17 00:00:00 2001
From: Inesh Bose <2504266b@student.gla.ac.uk>
Date: Fri, 12 May 2023 17:44:09 +0100
Subject: [PATCH 2/3] fix: tests

---
 test/basic.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 322437db161c..cee3345af9f0 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -84,7 +84,7 @@ describe('pages', () => {
     // should import components
     expect(html).toContain('This is a custom component with a named export.')
     // should remove dev-only and replace with any fallback content
-    expect(html).toContain('Some prod-only info')
+    expect(html).toContain(isDev() ? 'Some dev-only info' : 'Some prod-only info')
     // should apply attributes to client-only components
     expect(html).toContain('<div style="color:red;" class="client-only"></div>')
     // should render server-only components

From 5f9b25ae0ad2afcd030c8881eb027867e7894d69 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 13 May 2023 22:50:17 +0100
Subject: [PATCH 3/3] fix: invoke slot

---
 packages/nuxt/src/app/components/dev-only.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/app/components/dev-only.ts b/packages/nuxt/src/app/components/dev-only.ts
index 3c88ccae2cf5..914ba6f6e445 100644
--- a/packages/nuxt/src/app/components/dev-only.ts
+++ b/packages/nuxt/src/app/components/dev-only.ts
@@ -6,6 +6,6 @@ export default defineComponent({
     if (process.dev) {
       return () => props.slots.default?.()
     }
-    return () => props.slots.fallback
+    return () => props.slots.fallback?.()
   }
 })