feat(nuxt3): remove `<script setup>` transform and prefer top level await (#579)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

docs/content/2.app/3.data-fetching.md

@@ -20,37 +20,14 @@ asyncData(key: string, fn: () => Object, options?: { defer: boolean, server: boo
 
 Under the hood, `defer: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `defer: true` and implementing a loading state instead for a snappier user experience.
 
-This helper only works with:
-- a component defined with `defineNuxtComponent`
-- `<script setup nuxt>` syntax block
-
 ### Example
 
 ```vue
-<script setup nuxt>
-const { data } = asyncData('time', () => $fetch('/api/count'))
+<script setup>
+const { data } = await asyncData('time', () => $fetch('/api/count'))
 </script>
 
 <template>
   Page visits: {{ data.count }}
 </template>
 ```
-
-If you don't want to use the `<script setup>` syntax, you need to use the `defineNuxtComponent` method to define your component:
-
-```vue
-<template>
-  Page visits: {{ data.count }}
-</template>
-
-<script>
-export default defineNuxtComponent({
-  setup () {
-    const { data } = asyncData('time', () => $fetch('/api/count'))
-    return { data }
-  }
-})
-</script>
-```
-
-

examples/async-data-setup/nuxt.config.ts

@@ -1,5 +0,0 @@
-import { defineNuxtConfig } from '@nuxt/kit'
-
-export default defineNuxtConfig({
-  // vite: true
-})

examples/async-data-setup/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "example-async-data-setup",
-  "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
-  "scripts": {
-    "dev": "nuxt dev",
-    "build": "nuxt build",
-    "start": "node .output/server/index.mjs"
-  }
-}

examples/async-data-setup/pages/index.vue

@@ -1,10 +0,0 @@
-<script nuxt setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { data } = asyncData('time', () => $fetch('/api/count'))
-</script>
-
-<template>
-  <div>
-    Page visits: {{ data.count }}
-  </div>
-</template>

examples/async-data-setup/server/api/count.js

@@ -1,3 +0,0 @@
-let ctr = 0
-
-export default () => ({ count: ++ctr })

examples/async-data/app.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    <div>
-      <nuxt-page />
-    </div>
-    <nuxt-link to="/">
-      Home
-    </nuxt-link>
-    <nuxt-link to="/options">
-      Options
-    </nuxt-link>
-  </div>
-</template>

examples/async-data/nuxt.config.ts

@@ -1,4 +1,5 @@
 import { defineNuxtConfig } from '@nuxt/kit'
 
 export default defineNuxtConfig({
+  // vite: true
 })

examples/async-data/pages/index.vue

@@ -4,14 +4,6 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineNuxtComponent({
-  setup () {
-    const { data } = asyncData('time', () => $fetch('/api/count'))
-
-    return {
-      data
-    }
-  }
-})
+<script setup>
+const { data } = await asyncData('time', () => $fetch('/api/count'))
 </script>

examples/async-data/pages/options.vue

@@ -1,28 +0,0 @@
-<template>
-  <div>
-    About
-    {{ path }}
-    <button @click="path = 'newpath'">
-      Update path
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-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>

packages/nuxt3/src/app/composables/asyncData.ts

@@ -1,7 +1,6 @@
-import { getCurrentInstance, onBeforeMount, onUnmounted, ref, unref } from 'vue'
+import { onBeforeMount, onUnmounted, ref, unref } from 'vue'
 import type { UnwrapRef, Ref } from 'vue'
 
-import { NuxtComponentPendingPromises } from './component'
 import { ensureReactive, useGlobalData } from './data'
 import { NuxtApp, useNuxtApp } from '#app'
 
@@ -23,7 +22,6 @@ export type AsyncDataResult<T> = AsyncDataState<T> & Promise<AsyncDataState<T>>
 
 export function useAsyncData (defaults?: AsyncDataOptions) {
   const nuxt = useNuxtApp()
-  const vm = getCurrentInstance()
   const onBeforeMountCbs: Array<() => void> = []
 
   if (process.client) {
@@ -66,6 +64,7 @@ export function useAsyncData (defaults?: AsyncDataOptions) {
       state.pending.value = true
       nuxt._asyncDataPromises[key] = Promise.resolve(handler(nuxt)).then((result) => {
         for (const _key in result) {
+          // @ts-expect-error
           state.data[_key] = unref(result[_key])
         }
         return state.data
@@ -105,11 +104,6 @@ export function useAsyncData (defaults?: AsyncDataOptions) {
       }
     }
 
-    // Auto enqueue if within nuxt component instance
-    if (nuxt._asyncDataPromises[key] && vm[NuxtComponentPendingPromises]) {
-      vm[NuxtComponentPendingPromises].push(nuxt._asyncDataPromises[key])
-    }
-
     const res = Promise.resolve(nuxt._asyncDataPromises[key]).then(() => state) as AsyncDataResult<T>
     res.data = state.data
     res.pending = state.pending

packages/nuxt3/src/app/composables/component.ts

@@ -1,37 +1,17 @@
 import { toRefs } from '@vue/reactivity'
 import { defineComponent, getCurrentInstance } from 'vue'
-import type { ComponentInternalInstance, DefineComponent } from 'vue'
+import type { DefineComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import type { LegacyContext } from '../legacy'
 import { useNuxtApp } from '../nuxt'
 import { asyncData } from './asyncData'
 
 export const NuxtComponentIndicator = '__nuxt_component'
-export const NuxtComponentPendingPromises = '_pendingPromises'
-
-export interface NuxtComponentInternalInstance extends ComponentInternalInstance {
-  [NuxtComponentPendingPromises]: Array<Promise<void>>
-}
-
-export function getCurrentNuxtComponentInstance (): NuxtComponentInternalInstance {
-  const vm = getCurrentInstance() as NuxtComponentInternalInstance
-
-  if (!vm || !vm.proxy.$options[NuxtComponentIndicator]) {
-    throw new Error('This method can only be used within a component defined with `defineNuxtComponent()`.')
-  }
-
-  return vm
-}
-
-export function enqueueNuxtComponent (p: Promise<void>) {
-  const vm = getCurrentNuxtComponentInstance()
-  vm[NuxtComponentPendingPromises].push(p)
-}
 
 async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<string, any>>, fn: (context: LegacyContext) => Promise<Record<string, any>>) {
   const nuxt = useNuxtApp()
   const route = useRoute()
-  const vm = getCurrentNuxtComponentInstance()
+  const vm = getCurrentInstance()
   const { fetchKey } = vm.proxy.$options
   const key = typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey || route.fullPath
   const { data } = await asyncData(`options:asyncdata:${key}`, () => fn(nuxt._legacyContext))
@@ -42,6 +22,7 @@ export const defineNuxtComponent: typeof defineComponent =
   function defineNuxtComponent (options: any): any {
     const { setup } = options
 
+    // Avoid wrapping if no options api is used
     if (!setup && !options.asyncData) {
       return {
         [NuxtComponentIndicator]: true,
@@ -53,26 +34,20 @@ export const defineNuxtComponent: typeof defineComponent =
       [NuxtComponentIndicator]: true,
       ...options,
       setup (props, ctx) {
-        const vm = getCurrentNuxtComponentInstance()
-        let promises = vm[NuxtComponentPendingPromises] = vm[NuxtComponentPendingPromises] || []
-
         const res = setup?.(props, ctx) || {}
 
+        let promises: unknown[] | undefined = []
+        promises = promises || []
         if (options.asyncData) {
           promises.push(runLegacyAsyncData(res, options.asyncData))
         }
 
-        if (!promises.length && !(res instanceof Promise)) {
-          return res
-        }
-
         return Promise.resolve(res)
           .then(() => Promise.all(promises))
           .then(() => res)
           .finally(() => {
             promises.length = 0
             promises = null
-            delete vm[NuxtComponentPendingPromises]
           })
       }
     } as DefineComponent

packages/vite/src/client.ts

@@ -6,7 +6,6 @@ import vitePlugin from '@vitejs/plugin-vue'
 
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { replace } from './plugins/replace'
-import { transformNuxtSetup } from './plugins/transformSetup'
 import { wpfs } from './utils/wpfs'
 import type { ViteBuildContext, ViteOptions } from './vite'
 
@@ -37,8 +36,7 @@ export async function buildClient (ctx: ViteBuildContext) {
     plugins: [
       replace({ 'process.env': 'import.meta.env' }),
       cacheDirPlugin(ctx.nuxt.options.rootDir, 'client'),
-      vitePlugin(ctx.config.vue),
-      transformNuxtSetup()
+      vitePlugin(ctx.config.vue)
     ],
     server: {
       middlewareMode: true

packages/vite/src/plugins/transformSetup.ts

@@ -1,31 +0,0 @@
-import type { Plugin } from 'vite'
-import { getQuery } from 'ufo'
-import MagicString from 'magic-string'
-
-const DEFINE_COMPONENT_VUE = '_defineComponent('
-const DEFINE_COMPONENT_NUXT = '_defineNuxtComponent('
-
-export function transformNuxtSetup () {
-  return <Plugin> {
-    name: 'nuxt:transform-setup',
-    transform (code, id) {
-      const query = getQuery(id)
-      if (!(id.endsWith('.vue') || (query.nuxt && query.setup && query.type === 'script'))) {
-        return
-      }
-
-      const index = code.indexOf(DEFINE_COMPONENT_VUE)
-      if (index < 0) {
-        return
-      }
-
-      const s = new MagicString(code)
-      s.overwrite(index, index + DEFINE_COMPONENT_VUE.length, DEFINE_COMPONENT_NUXT)
-      s.prepend('import { defineNuxtComponent as _defineNuxtComponent } from "#app"\n')
-      return {
-        code: s.toString(),
-        map: s.generateMap()
-      }
-    }
-  }
-}

packages/vite/src/server.ts

@@ -5,7 +5,6 @@ import consola from 'consola'
 import { ViteBuildContext, ViteOptions } from './vite'
 import { wpfs } from './utils/wpfs'
 import { cacheDirPlugin } from './plugins/cache-dir'
-import { transformNuxtSetup } from './plugins/transformSetup'
 
 export async function buildServer (ctx: ViteBuildContext) {
   const serverConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
@@ -50,8 +49,7 @@ export async function buildServer (ctx: ViteBuildContext) {
     },
     plugins: [
       cacheDirPlugin(ctx.nuxt.options.rootDir, 'server'),
-      vuePlugin(),
-      transformNuxtSetup()
+      vuePlugin()
     ]
   } as ViteOptions)
 

packages/webpack/build.config.ts

@@ -3,8 +3,7 @@ import { defineBuildConfig } from 'unbuild'
 export default defineBuildConfig({
   declaration: true,
   entries: [
-    'src/index',
-    'src/loaders/nuxt-setup-loader'
+    'src/index'
   ],
   dependencies: [
     '@nuxt/kit',

packages/webpack/src/loaders/nuxt-setup-loader.ts

@@ -1,9 +0,0 @@
-const DEFINE_COMPONENT_VUE = '_defineComponent('
-const DEFINE_COMPONENT_NUXT = '_defineNuxtComponent('
-
-export default function NuxtSetupLoader (code: string, map: any) {
-  if (code && code.includes(DEFINE_COMPONENT_VUE)) {
-    code = 'import { defineNuxtComponent as _defineNuxtComponent } from "#app";' + code.replace(DEFINE_COMPONENT_VUE, DEFINE_COMPONENT_NUXT)
-  }
-  this.callback(null, code, map)
-}

packages/webpack/src/plugins/transform-setup.ts

@@ -1,18 +0,0 @@
-import { normalize } from 'pathe'
-import { getQuery } from 'ufo'
-
-export default class NuxtSetupTransformerPlugin {
-  apply (compiler) {
-    compiler.options.module.rules.push({
-      include (id) {
-        const query = getQuery(id)
-        return id.endsWith('.vue') || (query.nuxt && query.setup && query.type === 'script')
-      },
-      enforce: 'post',
-      use: [{
-        ident: 'NuxtSetupTransformerPlugin',
-        loader: normalize(require.resolve('@nuxt/webpack-builder/dist/nuxt-setup-loader.cjs'))
-      }]
-    })
-  }
-}

packages/webpack/src/presets/vue.ts

@@ -1,7 +1,6 @@
 import { resolve } from 'pathe'
 import VueLoaderPlugin from 'vue-loader/dist/pluginWebpack5'
 import { DefinePlugin } from 'webpack'
-import NuxtSetupTransformerPlugin from '../plugins/transform-setup'
 import VueSSRClientPlugin from '../plugins/vue/client'
 import VueSSRServerPlugin from '../plugins/vue/server'
 import { WebpackConfigContext } from '../utils/config'
@@ -27,8 +26,6 @@ export function vue (ctx: WebpackConfigContext) {
     }))
   }
 
-  config.plugins.push(new NuxtSetupTransformerPlugin())
-
   // Feature flags
   // https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
   // TODO: Provide options to toggle

yarn.lock

@@ -6717,14 +6717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"example-async-data-setup@workspace:examples/async-data-setup":
-  version: 0.0.0-use.local
-  resolution: "example-async-data-setup@workspace:examples/async-data-setup"
-  dependencies:
-    nuxt3: latest
-  languageName: unknown
-  linkType: soft
-
 "example-async-data@workspace:examples/async-data":
   version: 0.0.0-use.local
   resolution: "example-async-data@workspace:examples/async-data"