From 3c87b75784a693157937aff51c0f548932c7fe6b Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Sun, 16 Apr 2023 22:59:55 +0200
Subject: [PATCH 1/6] feat(nuxt): add keep-fallback strategy

---
 docs/3.api/2.components/1.nuxt-client-fallback.md      |  3 +++
 .../nuxt/src/app/components/client-fallback.client.ts  | 10 +++++++++-
 .../nuxt/src/app/components/client-fallback.server.ts  |  4 ++++
 test/basic.test.ts                                     |  3 ++-
 test/fixtures/basic/pages/client-fallback.vue          | 10 ++++++++++
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/3.api/2.components/1.nuxt-client-fallback.md b/docs/3.api/2.components/1.nuxt-client-fallback.md
index 1707e139ef7b..c79bc368b2bd 100644
--- a/docs/3.api/2.components/1.nuxt-client-fallback.md
+++ b/docs/3.api/2.components/1.nuxt-client-fallback.md
@@ -30,6 +30,9 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `div`
 - **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
   - **type**: `string`
+- **strategy**: Specify a strategy to adopt once in client-side. By default it tries to render the slot if it fails in client-side but your can choose to keep the fallback content by setting this prop to `keep-fallback`
+  - **type**: `string`
+  - **default**: `default`
 
 ```vue
   <template>
diff --git a/packages/nuxt/src/app/components/client-fallback.client.ts b/packages/nuxt/src/app/components/client-fallback.client.ts
index 94605f7c0194..1a3fa881431d 100644
--- a/packages/nuxt/src/app/components/client-fallback.client.ts
+++ b/packages/nuxt/src/app/components/client-fallback.client.ts
@@ -21,6 +21,10 @@ export default defineComponent({
     },
     placeholderTag: {
       type: String
+    },
+    strategy: {
+      type: String as () => 'default'|'keep-fallback',
+      default: () => 'default'
     }
   },
   emits: ['ssr-error'],
@@ -33,7 +37,11 @@ export default defineComponent({
     }
 
     return () => {
-      if (mounted.value) { return ctx.slots.default?.() }
+      if (mounted.value) {
+        if (!ssrFailed.value || (ssrFailed.value && props.strategy === 'default')) {
+          return ctx.slots.default?.()
+        }
+      }
       if (ssrFailed.value) {
         const slot = ctx.slots.placeholder || ctx.slots.fallback
         if (slot) { return slot() }
diff --git a/packages/nuxt/src/app/components/client-fallback.server.ts b/packages/nuxt/src/app/components/client-fallback.server.ts
index 14bde96f4072..cc9ef771f526 100644
--- a/packages/nuxt/src/app/components/client-fallback.server.ts
+++ b/packages/nuxt/src/app/components/client-fallback.server.ts
@@ -23,6 +23,10 @@ const NuxtClientFallbackServer = defineComponent({
     },
     placeholderTag: {
       type: String
+    },
+    strategy: {
+      type: String as () => 'default'|'keep-fallback',
+      default: () => 'default'
     }
   },
   emits: ['ssr-error'],
diff --git a/test/basic.test.ts b/test/basic.test.ts
index b2f508fbd855..0c58e1a4f2fd 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -334,7 +334,8 @@ describe('pages', () => {
     // ensure components reactivity once mounted
     await page.locator('#increment-count').click()
     expect(await page.locator('#sugar-counter').innerHTML()).toContain('Sugar Counter 12 x 1 = 12')
-
+    // keep-fallback strategy
+    expect(await page.locator('#keep-fallback').all()).toHaveLength(1)
     await page.close()
   })
 })
diff --git a/test/fixtures/basic/pages/client-fallback.vue b/test/fixtures/basic/pages/client-fallback.vue
index c2b0fce213b5..33bac55dcf19 100644
--- a/test/fixtures/basic/pages/client-fallback.vue
+++ b/test/fixtures/basic/pages/client-fallback.vue
@@ -38,6 +38,16 @@
       <ClientFallbackStatefulSetup />
       <ClientFallbackNonStatefulSetup />
       <ClientFallbackNonStateful />
+      <NuxtClientFallback strategy="keep-fallback">
+        <div>
+          <BreakInSetup />
+        </div>
+        <template #fallback>
+          <div id="keep-fallback">
+            keep fallback in client
+          </div>
+        </template>
+      </NuxtClientFallback>
     </div>
     <button id="increment-count" @click="multiplier++">
       increment count

From 794cd7b9e3473869f53de3da32b932ee88757023 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 18 Apr 2023 19:54:07 +0200
Subject: [PATCH 2/6] docs: fix type

---
 docs/3.api/2.components/1.nuxt-client-fallback.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/3.api/2.components/1.nuxt-client-fallback.md b/docs/3.api/2.components/1.nuxt-client-fallback.md
index c79bc368b2bd..eae820fc183a 100644
--- a/docs/3.api/2.components/1.nuxt-client-fallback.md
+++ b/docs/3.api/2.components/1.nuxt-client-fallback.md
@@ -31,7 +31,7 @@ This component is experimental and in order to use it you must enable the `exper
 - **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
   - **type**: `string`
 - **strategy**: Specify a strategy to adopt once in client-side. By default it tries to render the slot if it fails in client-side but your can choose to keep the fallback content by setting this prop to `keep-fallback`
-  - **type**: `string`
+  - **type**: `'default'|'fallback'`
   - **default**: `default`
 
 ```vue

From 503273f7edc4f0ac2f286d8cae057e83ab2ed70a Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 18 Apr 2023 19:54:26 +0200
Subject: [PATCH 3/6] refactor: change render function

---
 .../app/components/client-fallback.client.ts    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/nuxt/src/app/components/client-fallback.client.ts b/packages/nuxt/src/app/components/client-fallback.client.ts
index 1a3fa881431d..572751757c1c 100644
--- a/packages/nuxt/src/app/components/client-fallback.client.ts
+++ b/packages/nuxt/src/app/components/client-fallback.client.ts
@@ -37,17 +37,14 @@ export default defineComponent({
     }
 
     return () => {
-      if (mounted.value) {
-        if (!ssrFailed.value || (ssrFailed.value && props.strategy === 'default')) {
-          return ctx.slots.default?.()
-        }
-      }
       if (ssrFailed.value) {
-        const slot = ctx.slots.placeholder || ctx.slots.fallback
-        if (slot) { return slot() }
-        const fallbackStr = props.placeholder || props.fallback
-        const fallbackTag = props.placeholderTag || props.fallbackTag
-        return createElementBlock(fallbackTag, null, fallbackStr)
+        if (!mounted.value || props.strategy === 'keep-fallback') {
+          const slot = ctx.slots.placeholder || ctx.slots.fallback
+          if (slot) { return slot() }
+          const fallbackStr = props.placeholder || props.fallback
+          const fallbackTag = props.placeholderTag || props.fallbackTag
+          return createElementBlock(fallbackTag, null, fallbackStr)
+        }
       }
       return ctx.slots.default?.()
     }

From 4e1229826797f4ae9f10b9f468e05c05e014fde1 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 11 May 2023 23:26:01 +0100
Subject: [PATCH 4/6] docs: small wording tweaks

---
 docs/3.api/2.components/1.nuxt-client-fallback.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/3.api/2.components/1.nuxt-client-fallback.md b/docs/3.api/2.components/1.nuxt-client-fallback.md
index eae820fc183a..e767dd745d95 100644
--- a/docs/3.api/2.components/1.nuxt-client-fallback.md
+++ b/docs/3.api/2.components/1.nuxt-client-fallback.md
@@ -30,8 +30,8 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `div`
 - **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
   - **type**: `string`
-- **strategy**: Specify a strategy to adopt once in client-side. By default it tries to render the slot if it fails in client-side but your can choose to keep the fallback content by setting this prop to `keep-fallback`
-  - **type**: `'default'|'fallback'`
+- **strategy**: Specify a strategy to adopt once client-side. By default it tries to re-render the slot on the client but you can choose to keep the fallback content by setting this prop to `keep-fallback`
+  - **type**: `'default' | 'fallback'`
   - **default**: `default`
 
 ```vue

From 530fff1244074eb67156a465a2c0ba7ef267aa8c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 11 May 2023 23:26:25 +0100
Subject: [PATCH 5/6] docs: add space

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

diff --git a/packages/nuxt/src/app/components/client-fallback.client.ts b/packages/nuxt/src/app/components/client-fallback.client.ts
index 572751757c1c..4856792392e0 100644
--- a/packages/nuxt/src/app/components/client-fallback.client.ts
+++ b/packages/nuxt/src/app/components/client-fallback.client.ts
@@ -23,7 +23,7 @@ export default defineComponent({
       type: String
     },
     strategy: {
-      type: String as () => 'default'|'keep-fallback',
+      type: String as () => 'default' | 'keep-fallback',
       default: () => 'default'
     }
   },

From a223dc6cbb6cf2b1e1ef2bf43737b0c0c21851d4 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Fri, 12 May 2023 19:48:13 +0200
Subject: [PATCH 6/6] refactor: change strategy to keepFallback

---
 docs/3.api/2.components/1.nuxt-client-fallback.md         | 6 +++---
 .../nuxt/src/app/components/client-fallback.client.ts     | 8 ++++----
 .../nuxt/src/app/components/client-fallback.server.ts     | 6 +++---
 test/fixtures/basic/pages/client-fallback.vue             | 2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/3.api/2.components/1.nuxt-client-fallback.md b/docs/3.api/2.components/1.nuxt-client-fallback.md
index e767dd745d95..4abdc0d4970a 100644
--- a/docs/3.api/2.components/1.nuxt-client-fallback.md
+++ b/docs/3.api/2.components/1.nuxt-client-fallback.md
@@ -30,9 +30,9 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `div`
 - **placeholder** | **fallback**: Specify fallback content to be rendered if the slot fails to render.
   - **type**: `string`
-- **strategy**: Specify a strategy to adopt once client-side. By default it tries to re-render the slot on the client but you can choose to keep the fallback content by setting this prop to `keep-fallback`
-  - **type**: `'default' | 'fallback'`
-  - **default**: `default`
+- **keepFallback**: Keep the fallback content if it failed to render server-side.
+  - **type**: `boolean`
+  - **default**: `false`
 
 ```vue
   <template>
diff --git a/packages/nuxt/src/app/components/client-fallback.client.ts b/packages/nuxt/src/app/components/client-fallback.client.ts
index 4856792392e0..f0a14d65ecac 100644
--- a/packages/nuxt/src/app/components/client-fallback.client.ts
+++ b/packages/nuxt/src/app/components/client-fallback.client.ts
@@ -22,9 +22,9 @@ export default defineComponent({
     placeholderTag: {
       type: String
     },
-    strategy: {
-      type: String as () => 'default' | 'keep-fallback',
-      default: () => 'default'
+    keepFallback: {
+      type: Boolean,
+      default: () => false
     }
   },
   emits: ['ssr-error'],
@@ -38,7 +38,7 @@ export default defineComponent({
 
     return () => {
       if (ssrFailed.value) {
-        if (!mounted.value || props.strategy === 'keep-fallback') {
+        if (!mounted.value || props.keepFallback) {
           const slot = ctx.slots.placeholder || ctx.slots.fallback
           if (slot) { return slot() }
           const fallbackStr = props.placeholder || props.fallback
diff --git a/packages/nuxt/src/app/components/client-fallback.server.ts b/packages/nuxt/src/app/components/client-fallback.server.ts
index cc9ef771f526..3f30f32b5f40 100644
--- a/packages/nuxt/src/app/components/client-fallback.server.ts
+++ b/packages/nuxt/src/app/components/client-fallback.server.ts
@@ -24,9 +24,9 @@ const NuxtClientFallbackServer = defineComponent({
     placeholderTag: {
       type: String
     },
-    strategy: {
-      type: String as () => 'default'|'keep-fallback',
-      default: () => 'default'
+    keepFallback: {
+      type: Boolean,
+      default: () => false
     }
   },
   emits: ['ssr-error'],
diff --git a/test/fixtures/basic/pages/client-fallback.vue b/test/fixtures/basic/pages/client-fallback.vue
index 33bac55dcf19..9b4d7c5db830 100644
--- a/test/fixtures/basic/pages/client-fallback.vue
+++ b/test/fixtures/basic/pages/client-fallback.vue
@@ -38,7 +38,7 @@
       <ClientFallbackStatefulSetup />
       <ClientFallbackNonStatefulSetup />
       <ClientFallbackNonStateful />
-      <NuxtClientFallback strategy="keep-fallback">
+      <NuxtClientFallback keep-fallback>
         <div>
           <BreakInSetup />
         </div>