diff --git a/docs/content/2.app/3.data-fetching.md b/docs/content/2.app/3.data-fetching.md index 9bc37a4206..69046f97e2 100644 --- a/docs/content/2.app/3.data-fetching.md +++ b/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 `` 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` -- ` ``` - -If you don't want to use the ` -``` - - diff --git a/examples/async-data-setup/nuxt.config.ts b/examples/async-data-setup/nuxt.config.ts deleted file mode 100644 index e50dc842b0..0000000000 --- a/examples/async-data-setup/nuxt.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { defineNuxtConfig } from '@nuxt/kit' - -export default defineNuxtConfig({ - // vite: true -}) diff --git a/examples/async-data-setup/package.json b/examples/async-data-setup/package.json deleted file mode 100644 index 2f1a01336b..0000000000 --- a/examples/async-data-setup/package.json +++ /dev/null @@ -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" - } -} diff --git a/examples/async-data-setup/pages/index.vue b/examples/async-data-setup/pages/index.vue deleted file mode 100644 index 4d494d2d86..0000000000 --- a/examples/async-data-setup/pages/index.vue +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/examples/async-data-setup/server/api/count.js b/examples/async-data-setup/server/api/count.js deleted file mode 100644 index 678b2b2700..0000000000 --- a/examples/async-data-setup/server/api/count.js +++ /dev/null @@ -1,3 +0,0 @@ -let ctr = 0 - -export default () => ({ count: ++ctr }) diff --git a/examples/async-data/app.vue b/examples/async-data/app.vue deleted file mode 100644 index 6342e486d6..0000000000 --- a/examples/async-data/app.vue +++ /dev/null @@ -1,13 +0,0 @@ - diff --git a/examples/async-data/nuxt.config.ts b/examples/async-data/nuxt.config.ts index 854fc6bfc5..e50dc842b0 100644 --- a/examples/async-data/nuxt.config.ts +++ b/examples/async-data/nuxt.config.ts @@ -1,4 +1,5 @@ import { defineNuxtConfig } from '@nuxt/kit' export default defineNuxtConfig({ + // vite: true }) diff --git a/examples/async-data/pages/index.vue b/examples/async-data/pages/index.vue index a684367c14..26b183a29a 100644 --- a/examples/async-data/pages/index.vue +++ b/examples/async-data/pages/index.vue @@ -4,14 +4,6 @@ - diff --git a/examples/async-data/pages/options.vue b/examples/async-data/pages/options.vue deleted file mode 100644 index 81b240b4b4..0000000000 --- a/examples/async-data/pages/options.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - diff --git a/packages/nuxt3/src/app/composables/asyncData.ts b/packages/nuxt3/src/app/composables/asyncData.ts index c65d665988..7a500f3198 100644 --- a/packages/nuxt3/src/app/composables/asyncData.ts +++ b/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 = AsyncDataState & Promise> 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 res.data = state.data res.pending = state.pending diff --git a/packages/nuxt3/src/app/composables/component.ts b/packages/nuxt3/src/app/composables/component.ts index 5159052de7..ff80f830ce 100644 --- a/packages/nuxt3/src/app/composables/component.ts +++ b/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> -} - -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) { - const vm = getCurrentNuxtComponentInstance() - vm[NuxtComponentPendingPromises].push(p) -} async function runLegacyAsyncData (res: Record | Promise>, fn: (context: LegacyContext) => Promise>) { 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 diff --git a/packages/vite/src/client.ts b/packages/vite/src/client.ts index 3b1c10e35a..e65beb5f0e 100644 --- a/packages/vite/src/client.ts +++ b/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 diff --git a/packages/vite/src/plugins/transformSetup.ts b/packages/vite/src/plugins/transformSetup.ts deleted file mode 100644 index 40b7b14c5f..0000000000 --- a/packages/vite/src/plugins/transformSetup.ts +++ /dev/null @@ -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 { - 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() - } - } - } -} diff --git a/packages/vite/src/server.ts b/packages/vite/src/server.ts index fe690b3fab..17624a790c 100644 --- a/packages/vite/src/server.ts +++ b/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) diff --git a/packages/webpack/build.config.ts b/packages/webpack/build.config.ts index 2dfe994234..bf77753e35 100644 --- a/packages/webpack/build.config.ts +++ b/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', diff --git a/packages/webpack/src/loaders/nuxt-setup-loader.ts b/packages/webpack/src/loaders/nuxt-setup-loader.ts deleted file mode 100644 index 27fd747b3c..0000000000 --- a/packages/webpack/src/loaders/nuxt-setup-loader.ts +++ /dev/null @@ -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) -} diff --git a/packages/webpack/src/plugins/transform-setup.ts b/packages/webpack/src/plugins/transform-setup.ts deleted file mode 100644 index 0e254cf4f8..0000000000 --- a/packages/webpack/src/plugins/transform-setup.ts +++ /dev/null @@ -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')) - }] - }) - } -} diff --git a/packages/webpack/src/presets/vue.ts b/packages/webpack/src/presets/vue.ts index 73a9871a50..b0bd32d155 100644 --- a/packages/webpack/src/presets/vue.ts +++ b/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 diff --git a/yarn.lock b/yarn.lock index a1ed438245..efc3a7abdc 100644 --- a/yarn.lock +++ b/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"