fix(runtime-utils): support options api data, computed + methods (#963)

nuxt · Oct 7, 2024 · 9ec23da · 9ec23da
1 parent cf1b48f
commit 9ec23da
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 2 deletions.
diff --git a/examples/app-vitest-full/pages/other/options-api.vue b/examples/app-vitest-full/pages/other/options-api.vue
@@ -0,0 +1,75 @@
+<template>
+  <ul>
+    <li data-testid="greetingInSetup">
+      {{ greetingInSetup }}
+    </li>
+    <li data-testid="greetingInData1">
+      {{ greetingInData1 }}
+    </li>
+    <li data-testid="greetingInData2">
+      {{ greetingInData2 }}
+    </li>
+    <li data-testid="greetingInComputed">
+      {{ greetingInComputed }}
+    </li>
+    <li data-testid="computedData1">
+      {{ computedData1 }}
+    </li>
+    <li data-testid="computedGreetingInMethods">
+      {{ computedGreetingInMethods }}
+    </li>
+    <li data-testid="greetingInMethods">
+      {{ greetingInMethods() }}
+    </li>
+    <li data-testid="returnData1">
+      {{ returnData1() }}
+    </li>
+    <li data-testid="returnComputedData1">
+      {{ returnComputedData1() }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+export default defineNuxtComponent({
+  name: 'OptionsApiPage',
+  setup() {
+    return {
+      greetingInSetup: 'Hello, setup',
+    }
+  },
+  async asyncData() {
+    return {
+      greetingInData2: 'Hello, overwritten by asyncData',
+    }
+  },
+  data() {
+    return {
+      greetingInData1: 'Hello, data1',
+      greetingInData2: 'Hello, data2',
+    }
+  },
+  computed: {
+    greetingInComputed() {
+      return 'Hello, computed property'
+    },
+    computedData1() {
+      return this.greetingInData1
+    },
+    computedGreetingInMethods() {
+      return this.greetingInMethods()
+    },
+  },
+  methods: {
+    greetingInMethods() {
+      return 'Hello, method'
+    },
+    returnData1() {
+      return this.greetingInData1
+    },
+    returnComputedData1() {
+      return this.computedData1
+    },
+  },
+})
+</script>
diff --git a/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts
@@ -13,6 +13,7 @@ import ExportDefaultComponent from '~/components/ExportDefaultComponent.vue'
 import ExportDefineComponent from '~/components/ExportDefineComponent.vue'
 import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue'
 import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue'
+import OptionsApiPage from '~/pages/other/options-api.vue'
 
 import { BoundAttrs } from '#components'
 import DirectiveComponent from '~/components/DirectiveComponent.vue'
@@ -81,6 +82,19 @@ describe('mountSuspended', () => {
     )
   })
 
+  it('should render asyncData and other options api properties within nuxt suspense', async () => {
+    const component = await mountSuspended(OptionsApiPage)
+    expect(component.find('[data-testid="greetingInSetup"]').text()).toBe('Hello, setup')
+    expect(component.find('[data-testid="greetingInData1"]').text()).toBe('Hello, data1')
+    expect(component.find('[data-testid="greetingInData2"]').text()).toBe('Hello, overwritten by asyncData')
+    expect(component.find('[data-testid="greetingInComputed"]').text()).toBe('Hello, computed property')
+    expect(component.find('[data-testid="computedData1"]').text()).toBe('Hello, data1')
+    expect(component.find('[data-testid="computedGreetingInMethods"]').text()).toBe('Hello, method')
+    expect(component.find('[data-testid="greetingInMethods"]').text()).toBe('Hello, method')
+    expect(component.find('[data-testid="returnData1"]').text()).toBe('Hello, data1')
+    expect(component.find('[data-testid="returnComputedData1"]').text()).toBe('Hello, data1')
+  })
+
   it('can receive emitted events from components mounted within nuxt suspense', async () => {
     const component = await mountSuspended(WrapperTests)
     component.find('button#emitCustomEvent').trigger('click')

diff --git a/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts b/examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts
@@ -13,6 +13,7 @@ import ExportDefaultComponent from '~/components/ExportDefaultComponent.vue'
 import ExportDefineComponent from '~/components/ExportDefineComponent.vue'
 import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue'
 import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue'
+import OptionsApiPage from '~/pages/other/options-api.vue'
 
 import { BoundAttrs } from '#components'
 
@@ -97,6 +98,19 @@ describe('renderSuspended', () => {
     expect(screen.getByText(text)).toBeDefined()
   })
 
+  it('should render asyncData and other options api properties within nuxt suspense', async () => {
+    const { getByTestId } = await renderSuspended(OptionsApiPage)
+    expect(getByTestId('greetingInSetup').textContent).toBe('Hello, setup')
+    expect(getByTestId('greetingInData1').textContent).toBe('Hello, data1')
+    expect(getByTestId('greetingInData2').textContent).toBe('Hello, overwritten by asyncData')
+    expect(getByTestId('greetingInComputed').textContent).toBe('Hello, computed property')
+    expect(getByTestId('computedData1').textContent).toBe('Hello, data1')
+    expect(getByTestId('computedGreetingInMethods').textContent).toBe('Hello, method')
+    expect(getByTestId('greetingInMethods').textContent).toBe('Hello, method')
+    expect(getByTestId('returnData1').textContent).toBe('Hello, data1')
+    expect(getByTestId('returnComputedData1').textContent).toBe('Hello, data1')
+  })
+
   it('can receive emitted events from components rendered within nuxt suspense', async () => {
     const { emitted } = await renderSuspended(WrapperTests)
     const button = screen.getByRole('button', { name: 'Click me!' })

diff --git a/src/runtime-utils/mount.ts b/src/runtime-utils/mount.ts
@@ -59,7 +59,7 @@ export async function mountSuspended<T>(
   const vueApp = tryUseNuxtApp()?.vueApp
     // @ts-expect-error untyped global __unctx__
     || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
-  const { render, setup } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
+  const { render, setup, data, computed, methods } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
 
   let setupContext: SetupContext
   let setupState: Record<string, unknown>
@@ -116,6 +116,14 @@ export async function mountSuspended<T>(
                         ...component,
                         render: render
                           ? function (this: unknown, _ctx: Record<string, unknown>, ...args: unknown[]) {
+                            // Set before setupState set to allow asyncData to overwrite data
+                            if (data && typeof data === 'function') {
+                              // @ts-expect-error error TS2554: Expected 1 arguments, but got 0
+                              const dataObject: Record<string, unknown> = data()
+                              for (const key in dataObject) {
+                                renderContext[key] = dataObject[key]
+                              }
+                            }
                             for (const key in setupState || {}) {
                               renderContext[key] = isReadonly(setupState[key]) ? unref(setupState[key]) : setupState[key]
                             }
@@ -125,6 +133,17 @@ export async function mountSuspended<T>(
                             for (const key in passedProps || {}) {
                               renderContext[key] = passedProps[key]
                             }
+                            if (methods && typeof methods === 'object') {
+                              for (const key in methods) {
+                                renderContext[key] = methods[key]
+                              }
+                            }
+                            if (computed && typeof computed === 'object') {
+                              for (const key in computed) {
+                                // @ts-expect-error error TS2339: Property 'call' does not exist on type 'ComputedGetter<any> | WritableComputedOptions<any, any>'
+                                renderContext[key] = computed[key].call(renderContext)
+                              }
+                            }
                             return render.call(this, renderContext, ...args)
                           }
                           : undefined,

diff --git a/src/runtime-utils/render.ts b/src/runtime-utils/render.ts
@@ -66,7 +66,7 @@ export async function renderSuspended<T>(
   const vueApp = tryUseNuxtApp()?.vueApp
     // @ts-expect-error untyped global __unctx__
     || globalThis.__unctx__.get('nuxt-app').tryUse().vueApp
-  const { render, setup } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
+  const { render, setup, data, computed, methods } = component as DefineComponent<Record<string, unknown>, Record<string, unknown>>
 
   let setupContext: SetupContext
   let setupState: SetupState
@@ -138,6 +138,14 @@ export async function renderSuspended<T>(
                         ...component,
                         render: render
                           ? function (this: unknown, _ctx: Record<string, unknown>, ...args: unknown[]) {
+                            // Set before setupState set to allow asyncData to overwrite data
+                            if (data && typeof data === 'function') {
+                              // @ts-expect-error error TS2554: Expected 1 arguments, but got 0
+                              const dataObject: Record<string, unknown> = data()
+                              for (const key in dataObject) {
+                                renderContext[key] = dataObject[key]
+                              }
+                            }
                             for (const key in setupState || {}) {
                               renderContext[key] = isReadonly(setupState[key]) ? unref(setupState[key]) : setupState[key]
                             }
@@ -147,6 +155,17 @@ export async function renderSuspended<T>(
                             for (const key in passedProps || {}) {
                               renderContext[key] = passedProps[key]
                             }
+                            if (methods && typeof methods === 'object') {
+                              for (const key in methods) {
+                                renderContext[key] = methods[key]
+                              }
+                            }
+                            if (computed && typeof computed === 'object') {
+                              for (const key in computed) {
+                                // @ts-expect-error error TS2339: Property 'call' does not exist on type 'ComputedGetter<any> | WritableComputedOptions<any, any>'
+                                renderContext[key] = computed[key].call(renderContext)
+                              }
+                            }
                             return render.call(this, renderContext, ...args)
                           }
                           : undefined,