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

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
Anthony Fu 2021-10-01 02:19:55 +08:00 committed by GitHub
parent a5f446ca6a
commit e13baf9867
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 15 additions and 221 deletions

View File

@ -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>
```

View File

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

View File

@ -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"
}
}

View File

@ -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>

View File

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

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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()
}
}
}
}

View File

@ -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)

View File

@ -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',

View File

@ -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)
}

View File

@ -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'))
}]
})
}
}

View File

@ -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

View File

@ -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"