From 53f67561785e564ecc9e2c8823c646b6cbfe83d7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 30 Jun 2021 11:53:10 +0100
Subject: [PATCH] feat(app): backwards-compatible options `asyncData` support
 (#286)

---
 examples/async-data/app.vue               | 13 ++++++++++
 examples/async-data/pages/options.vue     | 31 +++++++++++++++++++++++
 packages/app/src/composables/component.ts | 23 +++++++++++++++--
 3 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 examples/async-data/app.vue
 create mode 100644 examples/async-data/pages/options.vue

diff --git a/examples/async-data/app.vue b/examples/async-data/app.vue
new file mode 100644
index 0000000000..6342e486d6
--- /dev/null
+++ b/examples/async-data/app.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div>
+      <nuxt-page />
+    </div>
+    <nuxt-link to="/">
+      Home
+    </nuxt-link>
+    <nuxt-link to="/options">
+      Options
+    </nuxt-link>
+  </div>
+</template>
diff --git a/examples/async-data/pages/options.vue b/examples/async-data/pages/options.vue
new file mode 100644
index 0000000000..89172e8734
--- /dev/null
+++ b/examples/async-data/pages/options.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    About
+    {{ path }}
+    <button @click="path = 'newpath'">
+      Update path
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineNuxtComponent } from '@nuxt/app'
+import { ref } from 'vue'
+
+export default defineNuxtComponent({
+  fetchKey: 'custom',
+  asyncData ({ route }) {
+    return {
+      path: route.path
+    }
+  },
+  setup () {
+    // This will get overwritten with asyncData
+    const path = ref('original path')
+
+    return {
+      path
+    }
+  }
+})
+</script>
diff --git a/packages/app/src/composables/component.ts b/packages/app/src/composables/component.ts
index 06bc6fcad3..a50ce74fe4 100644
--- a/packages/app/src/composables/component.ts
+++ b/packages/app/src/composables/component.ts
@@ -1,4 +1,9 @@
+import { toRefs } from '@vue/reactivity'
 import { ComponentInternalInstance, DefineComponent, defineComponent, getCurrentInstance } from 'vue'
+import { useRoute } from 'vue-router'
+import type { LegacyContext } from '../legacy'
+import { useNuxt } from '../nuxt'
+import { asyncData } from './asyncData'
 
 export const NuxtComponentIndicator = '__nuxt_component'
 export const NuxtComponentPendingPromises = '_pendingPromises'
@@ -22,11 +27,21 @@ export function enqueueNuxtComponent (p: Promise<void>) {
   vm[NuxtComponentPendingPromises].push(p)
 }
 
+async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<string, any>>, fn: (context: LegacyContext) => Promise<Record<string, any>>) {
+  const nuxt = useNuxt()
+  const route = useRoute()
+  const vm = getCurrentNuxtComponentInstance()
+  const { fetchKey } = vm.proxy.$options
+  const key = typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey || route.fullPath
+  const { data } = await asyncData(`options:asyncdata:${key}`, () => fn(nuxt._legacyContext))
+  Object.assign(await res, toRefs(data))
+}
+
 export const defineNuxtComponent: typeof defineComponent =
   function defineNuxtComponent (options: any): any {
     const { setup } = options
 
-    if (!setup) {
+    if (!setup && !options.asyncData) {
       return {
         [NuxtComponentIndicator]: true,
         ...options
@@ -40,7 +55,11 @@ export const defineNuxtComponent: typeof defineComponent =
         const vm = getCurrentNuxtComponentInstance()
         let promises = vm[NuxtComponentPendingPromises] = vm[NuxtComponentPendingPromises] || []
 
-        const res = setup(props, ctx)
+        const res = setup?.(props, ctx) || {}
+
+        if (options.asyncData) {
+          promises.push(runLegacyAsyncData(res, options.asyncData))
+        }
 
         if (!promises.length && !(res instanceof Promise)) {
           return res