test/fixtures/basic/pages/client-only-page/index.client.vue (1)

8-8: Consider error handling for async data fetching.

The async data fetching could benefit from error handling to gracefully handle failures.

-const { data } = await useAsyncData(() => new Promise(resolve => setTimeout(() => resolve('async data'), 40)))
+const { data, error } = await useAsyncData(() => new Promise((resolve, reject) => {
+  try {
+    setTimeout(() => resolve('async data'), 40)
+  } catch (err) {
+    reject(err)
+  }
+}))

test/basic.test.ts (1)

601-607: Consider simplifying the async data placeholder check.

The current implementation uses a complex waitForFunction with error throwing. Consider using a more straightforward approach.

-await normalInitialPage.waitForFunction(() => {
-  if (document.querySelector('#async-data-placeholder')) {
-    throw new Error('Should not contain async data placeholder due to blocking nav behaviour')
-  } else if (document.querySelector('#async-data')) {
-    return true
-  }
-})
+await normalInitialPage.waitForSelector('#async-data')
+const placeholder = await normalInitialPage.$('#async-data-placeholder')
+expect(placeholder).toBeNull()

Configuration used: CodeRabbit UI
Review profile: CHILL

test/nuxt/client.test.ts (5)

6-8: Fix formatting issues in import statements.

The imports are correctly added for the new test functionality, but there are some minor formatting inconsistencies.

Apply these formatting fixes:

-import { flushPromises, mount} from "@vue/test-utils"
-import { Suspense } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import { Suspense } from 'vue'
 import { createClientPage } from '../../packages/nuxt/dist/components/runtime/client-component'

🧰 Tools

🪛 eslint

[error] 6-6: Expected indentation of 0 spaces but found 1.

(@stylistic/indent)

---

[error] 6-6: A space is required before '}'.

(@stylistic/object-curly-spacing)

---

[error] 6-6: Strings must use singlequote.

(@stylistic/quotes)

---

[error] 7-7: Expected indentation of 0 spaces but found 1.

(@stylistic/indent)

---

[error] 7-7: '/home/jailuser/git/node_modules/vue/dist/vue.runtime.esm-bundler.js' imported multiple times.

(import/no-duplicates)

---

[error] 8-8: Expected 1 empty line after import statement not followed by another import.

(import/newline-after-import)

---

34-35: Fix test description and formatting.

The test description could be more descriptive, and there are formatting issues in the test declaration.

-describe('client page', () => {
-  it('Should be suspensed when out of hydration',async  () =>{
+describe('client page', () => {
+  it('should show fallback while component is suspended during hydration', async () => {

🧰 Tools

🪛 eslint

[error] 35-35: A space is required after ','.

(@stylistic/comma-spacing)

---

[error] 35-35: Multiple spaces found before '('.

(@stylistic/no-multi-spaces)

---

[error] 35-35: Missing space after =>.

(@stylistic/arrow-spacing)

---

36-39: Consider using a more structured approach for Promise control.

The current Promise setup could be improved using a helper function for better reusability and clarity.

-let resolve
-const promise = new Promise((_resolve) => {
-  resolve = _resolve
-})
+function createControlledPromise() {
+  let resolve: (value?: unknown) => void
+  const promise = new Promise((_resolve) => {
+    resolve = _resolve
+  })
+  return { promise, resolve: () => resolve() }
+}
+
+const { promise, resolve } = createControlledPromise()

---

41-46: Improve component definition clarity and type safety.

The test component could be more explicit and type-safe.

-const comp = defineComponent({
-  async setup() {
-    await promise
-    return () => h('div', {id: 'async'}, 'async resolved')
-  }
-})
+const AsyncTestComponent = defineComponent({
+  name: 'AsyncTestComponent',
+  async setup() {
+    await promise
+    return () => h('div', { id: 'async' }, 'async resolved')
+  },
+})

🧰 Tools

🪛 eslint

[error] 42-42: Missing space before function parentheses.

(@stylistic/space-before-function-paren)

---

[error] 44-44: A space is required after '{'.

(@stylistic/object-curly-spacing)

---

[error] 44-44: A space is required before '}'.

(@stylistic/object-curly-spacing)

---

[error] 45-46: Missing trailing comma.

(@stylistic/comma-dangle)

---

48-57: Improve test wrapper component structure.

The wrapper component could be more explicit and better formatted.

-const wrapper = mount({
-  setup() {
-    return () => h('div', {}, [
-      h(Suspense, {}, {
-        default: () => h(createClientPage(() => Promise.resolve(comp)), {}),
-        fallback: () => h('div', {id: 'fallback'}, 'loading')
-      })
-    ])
-  }
-})
+const TestWrapper = defineComponent({
+  name: 'TestWrapper',
+  setup() {
+    return () => h('div', {}, [
+      h(Suspense, {}, {
+        default: () => h(createClientPage(() => Promise.resolve(AsyncTestComponent))),
+        fallback: () => h('div', { id: 'fallback' }, 'loading'),
+      }),
+    ])
+  },
+})
+
+const wrapper = mount(TestWrapper)

🧰 Tools

🪛 eslint

[error] 49-49: Missing space before function parentheses.

(@stylistic/space-before-function-paren)

---

[error] 53-53: A space is required after '{'.

(@stylistic/object-curly-spacing)

---

[error] 53-53: A space is required before '}'.

(@stylistic/object-curly-spacing)

---

[error] 53-54: Missing trailing comma.

(@stylistic/comma-dangle)

---

[error] 54-55: Missing trailing comma.

(@stylistic/comma-dangle)

---

[error] 56-57: Missing trailing comma.

(@stylistic/comma-dangle)

Configuration used: CodeRabbit UI
Review profile: CHILL

test/nuxt/client.test.ts (2)

34-34: Consider a more descriptive test name

The current test name "Should be suspensed when out of hydration" could be more descriptive. Consider something like "should show fallback content while async setup resolves and render component after resolution".

---

33-67: Consider adding more test cases for comprehensive coverage

The current test effectively verifies the happy path, but consider adding tests for:

1. Error handling when the promise rejects
2. Component cleanup on unmount
3. Multiple concurrent transitions

Here's a suggested test case for error handling:

it('Should handle rejected promises gracefully', async () => {
  let reject
  const promise = new Promise((_, _reject) => {
    reject = _reject
  })

  const comp = defineComponent({
    async setup () {
      await promise
      return () => h('div', { id: 'async' }, 'async resolved')
    },
  })

  const wrapper = mount({
    setup () {
      return () => h('div', {}, [
        h(Suspense, {}, {
          default: () => h(createClientPage(() => Promise.resolve(comp)), {}),
          fallback: () => h('div', { id: 'fallback' }, 'loading'),
          error: () => h('div', { id: 'error' }, 'error occurred')
        }),
      ])
    },
  })

  await flushPromises()
  expect(wrapper.find('#fallback').exists()).toBe(true)

  reject!(new Error('Test error'))
  await flushPromises()
  expect(wrapper.find('#error').exists()).toBe(true)
  expect(wrapper.find('#fallback').exists()).toBe(false)
  expect(wrapper.find('#async').exists()).toBe(false)
})

Configuration used: CodeRabbit UI
Review profile: CHILL

packages/nuxt/src/components/runtime/client-component.ts (1)

19-27: Document this pattern for consistent implementation

This implementation introduces a significant pattern for handling client-side navigation states. Consider:

1. Adding inline documentation explaining the rationale behind different rendering strategies
2. Updating Nuxt.js docs to reflect this pattern for handling client-only pages
3. Creating a guide for implementing similar functionality in other parts of the application

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Search for style-related code that might be affected
ast-grep --pattern 'style={$_}'
rg -g '*.vue' -g '*.css' "client-only"

#!/bin/bash
# Look for direct styling on page components and potential wrapper-sensitive styles
rg -g '*.vue' -g '*.css' '(^\s*>|first-child|last-child|nth-child|direct descendant|:first|:last)'

# Check for any styling specifically targeting the page component
rg -g '*.vue' -g '*.css' 'page\s*{|\.page\s*{|#page\s*{'

# Look for any margin/padding reset patterns that might be affected
rg -g '*.vue' -g '*.css' '(margin|padding):\s*0'

#!/bin/bash
# Look for page-specific styling with fixed pattern
rg -g '*.vue' -g '*.css' '(\.page|#page|\[data-page\])'

# Check for styles that might be affected by wrapper div
rg -g '*.vue' -g '*.css' '(display:\s*flex|display:\s*grid|position:\s*absolute|position:\s*fixed)'

#!/bin/bash
# Search for related navigation handling code and tests
rg -A 5 "useAsyncData.*client.*page" 
rg -A 5 "navigation.*client.*only"

#!/bin/bash
# Let's search for client-side navigation and transition related code
rg -A 10 "client.*transition" packages/nuxt/
rg -A 10 "ClientOnly.*page" packages/nuxt/

# Search for tests related to client-side navigation
fd "test|spec" -e ts -e js | xargs rg -l "client.*navigation"

# Look for other usages of ClientOnly component
ast-grep --pattern 'h(ClientOnly, $_, $_)'

#!/bin/bash
# Let's check the test file that mentions client navigation
cat test/basic.test.ts

# Let's also check for any existing issues or discussions about client-side navigation
rg -A 5 "blank.*page.*navigation"
rg -A 5 "hydration.*navigation"

# Look for any related router or navigation handling code
ast-grep --pattern 'export function useRouter() {
  $$$
}'

#!/bin/bash
# Let's check for any issues with blank pages during navigation
rg -A 5 "blank.*during.*navigation"
rg -A 5 "transition.*blank"

# Look for any hydration-related code in client-component
ast-grep --pattern 'if ($isHydrating || $nuxtApp.isHydrating) {
  $$$
}'

# Check for any related tests
rg -A 5 "test.*client.*navigation" test/