nuxt · pi0 · Jul 7, 2022 · May 12, 2022 · May 12, 2022 · May 12, 2022
diff --git a/.eslintrc b/.eslintrc
@@ -22,6 +22,7 @@
     "jsdoc/require-param": "off",
     "jsdoc/require-returns": "off",
     "jsdoc/require-param-type": "off",
+    "no-redeclare": "off",
     "import/no-restricted-paths": [
       "error",
       {

diff --git a/docs/content/3.api/1.composables/use-async-data.md b/docs/content/3.api/1.composables/use-async-data.md
@@ -5,13 +5,17 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 ## Type
 
 ```ts [Signature]
+function useAsyncData(
+  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+  options?: AsyncDataOptions<DataT>
+): AsyncData<DataT>
 function useAsyncData(
   key: string,
   handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
-  options?: AsyncDataOptions
-): Promise<DataT>
+  options?: AsyncDataOptions<DataT>
+): AsyncData<DataT>
 
-type AsyncDataOptions = {
+type AsyncDataOptions<DataT> = {
   server?: boolean
   lazy?: boolean
   default?: () => DataT | Ref<DataT>
@@ -21,7 +25,7 @@ type AsyncDataOptions = {
   initialCache?: boolean
 }
 
-type DataT = {
+type AsyncData<DataT> = {
   data: Ref<DataT>
   pending: Ref<boolean>
   refresh: () => Promise<void>
@@ -31,7 +35,7 @@ type DataT = {
 
 ## Params
 
-* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests
+* **key**: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of `useAsyncData` will be generated for you.
 * **handler**: an asynchronous function that returns a value
 * **options**:
   * _lazy_: whether to resolve the async function after loading the route, instead of blocking navigation (defaults to `false`)

diff --git a/docs/content/3.api/1.composables/use-fetch.md b/docs/content/3.api/1.composables/use-fetch.md
@@ -6,23 +6,23 @@ This composable provides a convenient wrapper around [`useAsyncData`](/api/compo
 
 ```ts [Signature]
 function useFetch(
-  url: string | Request,
-  options?: UseFetchOptions
-): Promise<DataT>
+  url: string | Request | Ref<string | Request> | () => string | Request,
+  options?: UseFetchOptions<DataT>
+): AsyncData<DataT>
 
 type UseFetchOptions = {
-  method?: string,
-  params?: SearchParams,
-  headers?: {key: string, value: string}[],
-  baseURL?: string,
+  method?: string
+  params?: SearchParams
+  headers?: {key: string, value: string}[]
+  baseURL?: string
   server?: boolean
   lazy?: boolean
   default?: () => DataT
   transform?: (input: DataT) => DataT
   pick?: string[]
 }
 
-type DataT = {
+type AsyncData<DataT> = {
   data: Ref<DataT>
   pending: Ref<boolean>
   refresh: () => Promise<void>
@@ -45,6 +45,10 @@ type DataT = {
   * `pick`: Only pick specified keys in this array from the `handler` function result.
   * `transform`: A function that can be used to alter `handler` function result after resolving.
 
+::alert{type=warning}
+If you provide a function or ref as the `url` parameter, or if you provide functions as arguments to the `options` parameter, then the `useFetch` call will not match other `useFetch` calls elsewhere in your codebase, even if the options seem to be identical. If you wish to force a match, you may provide your own key in `options`.
+::
+
 ## Return values
 
 * **data**: the result of the asynchronous function that is passed in

diff --git a/docs/content/3.api/1.composables/use-state.md b/docs/content/3.api/1.composables/use-state.md
@@ -1,10 +1,11 @@
 # `useState`
 
 ```ts
+useState<T>(init?: () => T | Ref<T>): Ref<T>
 useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
 ```
 
-* **key**: A unique key ensuring that data fetching is properly de-duplicated across requests
+* **key**: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of `useState` will be generated for you.
 * **init**: A function that provides initial value for the state when not initiated. This function can also return a `Ref`.
 * **T**: (typescript only) Specify the type of state
 

diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
@@ -39,7 +39,15 @@ export interface _AsyncData<DataT, ErrorT> {
 export type AsyncData<Data, Error> = _AsyncData<Data, Error> & Promise<_AsyncData<Data, Error>>
 
 const getDefault = () => null
-
+export function useAsyncData<
+  DataT,
+  DataE = Error,
+  Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
+> (
+  handler: (ctx?: NuxtApp) => Promise<DataT>,
+  options?: AsyncDataOptions<DataT, Transform, PickKeys>
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true>
 export function useAsyncData<
   DataT,
   DataE = Error,
@@ -48,8 +56,21 @@ export function useAsyncData<
 > (
   key: string,
   handler: (ctx?: NuxtApp) => Promise<DataT>,
-  options: AsyncDataOptions<DataT, Transform, PickKeys> = {}
+  options?: AsyncDataOptions<DataT, Transform, PickKeys>
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true>
+export function useAsyncData<
+  DataT,
+  DataE = Error,
+  Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
+> (
+  _key: string | ((ctx?: NuxtApp) => Promise<DataT>),
+  _handler?: ((ctx?: NuxtApp) => Promise<DataT>) | AsyncDataOptions<DataT, Transform, PickKeys> | string,
+  _options?: AsyncDataOptions<DataT, Transform, PickKeys> | string,
+  fallback?: string
 ): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true> {
+  // eslint-disable-next-line prefer-const
+  let [key, handler, options] = (typeof _key === 'string' ? [_key, _handler, _options] : typeof _options === 'string' ? [_options, _key, {}] : [fallback, _key, _options]) as [string, (ctx?: NuxtApp) => Promise<DataT>, AsyncDataOptions<DataT, Transform, PickKeys>]
   // Validate arguments
   if (typeof key !== 'string') {
     throw new TypeError('asyncData key must be a string')
@@ -171,7 +192,15 @@ export function useAsyncData<
 
   return asyncDataPromise as AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE>
 }
-
+export function useLazyAsyncData<
+  DataT,
+  DataE = Error,
+  Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
+> (
+  handler: (ctx?: NuxtApp) => Promise<DataT>,
+  options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true>
 export function useLazyAsyncData<
   DataT,
   DataE = Error,
@@ -180,8 +209,21 @@ export function useLazyAsyncData<
 > (
   key: string,
   handler: (ctx?: NuxtApp) => Promise<DataT>,
-  options: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'> = {}
+  options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true>
+export function useLazyAsyncData<
+  DataT,
+  DataE = Error,
+  Transform extends _Transform<DataT> = _Transform<DataT, DataT>,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
+> (
+  _key: string | ((ctx?: NuxtApp) => Promise<DataT>),
+  _handler?: ((ctx?: NuxtApp) => Promise<DataT>) | AsyncDataOptions<DataT, Transform, PickKeys> | string,
+  _options?: Omit<AsyncDataOptions<DataT, Transform, PickKeys>, 'lazy'>,
+  fallback?: string
 ): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, DataE | null | true> {
+  // eslint-disable-next-line prefer-const
+  let [key, handler, options] = (typeof _key === 'string' ? [_key, _handler, _options] : typeof _options === 'string' ? [_options, _key, {}] : [fallback, _key, _options]) as [string, (ctx?: NuxtApp) => Promise<DataT>, AsyncDataOptions<DataT, Transform, PickKeys>]
   return useAsyncData(key, handler, { ...options, lazy: true })
 }
 

diff --git a/packages/nuxt/src/app/composables/fetch.ts b/packages/nuxt/src/app/composables/fetch.ts
@@ -2,7 +2,7 @@ import type { FetchOptions, FetchRequest } from 'ohmyfetch'
 import type { TypedInternalResponse, NitroFetchRequest } from 'nitropack'
 import { hash } from 'ohash'
 import { computed, isRef, Ref } from 'vue'
-import type { AsyncDataOptions, _Transform, KeyOfRes } from './asyncData'
+import type { AsyncDataOptions, _Transform, KeyOfRes, AsyncData, PickFrom } from './asyncData'
 import { useAsyncData } from './asyncData'
 
 export type FetchResult<ReqT extends NitroFetchRequest> = TypedInternalResponse<ReqT, unknown>
@@ -24,12 +24,22 @@ export function useFetch<
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
-  opts: UseFetchOptions<_ResT, Transform, PickKeys> = {}
+  opts?: UseFetchOptions<_ResT, Transform, PickKeys>
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null | true>
+export function useFetch<
+  ResT = void,
+  ErrorT = Error,
+  ReqT extends NitroFetchRequest = NitroFetchRequest,
+  _ResT = ResT extends void ? FetchResult<ReqT> : ResT,
+  Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
+> (
+  request: Ref<ReqT> | ReqT | (() => ReqT),
+  _opts?: string | UseFetchOptions<_ResT, Transform, PickKeys>,
+  _fallback?: string
 ) {
-  if (process.dev && opts.transform && !opts.key) {
-    console.warn('[nuxt] You should provide a key for `useFetch` when using a custom transform function.')
-  }
-  const key = '$f_' + (opts.key || hash([request, { ...opts, transform: null }]))
+  const [opts, fallback] = (typeof _opts === 'string' ? [{}, _opts] : [_opts, _fallback])
+  const key = '$f_' + (typeof opts.key === 'string' ? opts.key : typeof request === 'string' && !opts.transform && !opts.default ? hash([request, opts]) : fallback)
   const _request = computed(() => {
     let r = request as Ref<FetchRequest> | FetchRequest | (() => FetchRequest)
     if (typeof r === 'function') {
@@ -67,10 +77,25 @@ export function useLazyFetch<
   PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
 > (
   request: Ref<ReqT> | ReqT | (() => ReqT),
-  opts: Omit<UseFetchOptions<_ResT, Transform, PickKeys>, 'lazy'> = {}
+  opts?: Omit<UseFetchOptions<_ResT, Transform, PickKeys>, 'lazy'>
+): AsyncData<PickFrom<ReturnType<Transform>, PickKeys>, ErrorT | null | true>
+export function useLazyFetch<
+  ResT = void,
+  ErrorT = Error,
+  ReqT extends NitroFetchRequest = NitroFetchRequest,
+  _ResT = ResT extends void ? FetchResult<ReqT> : ResT,
+  Transform extends (res: _ResT) => any = (res: _ResT) => _ResT,
+  PickKeys extends KeyOfRes<Transform> = KeyOfRes<Transform>
+> (
+  request: Ref<ReqT> | ReqT | (() => ReqT),
+  _opts?: string | Omit<UseFetchOptions<_ResT, Transform, PickKeys>, 'lazy'>,
+  _fallback?: string
 ) {
+  const [opts, fallback] = (typeof _opts === 'string' ? [{}, _opts] : [_opts, _fallback])
   return useFetch<ResT, ErrorT, ReqT, _ResT, Transform, PickKeys>(request, {
     ...opts,
     lazy: true
-  })
+  },
+  // @ts-ignore
+  fallback)
 }
diff --git a/packages/nuxt/src/app/composables/state.ts b/packages/nuxt/src/app/composables/state.ts
@@ -8,7 +8,10 @@ import { useNuxtApp } from '#app'
  * @param key a unique key ensuring that data fetching can be properly de-duplicated across requests
  * @param init a function that provides initial value for the state when it's not initiated
  */
-export const useState = <T> (key: string, init?: (() => T | Ref<T>)): Ref<T> => {
+export function useState <T> (key: string, init?: (() => T | Ref<T>)): Ref<T>
+export function useState <T> (init?: (() => T | Ref<T>)): Ref<T>
+export function useState <T> (_key?: string | (() => T | Ref<T>), _init?: string | (() => T | Ref<T>)): Ref<T> {
+  const [key, init] = (typeof _key === 'string' ? [_key, _init] : [_init, _key]) as [string, (() => T | Ref<T>)]
   const nuxt = useNuxtApp()
   const state = toRef(nuxt.payload.state, key)
   if (state.value === undefined && init) {

diff --git a/packages/vite/build.config.ts b/packages/vite/build.config.ts
@@ -10,6 +10,7 @@ export default defineBuildConfig({
     'vue'
   ],
   externals: [
+    'acorn',
     '@nuxt/schema'
   ]
 })
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -28,6 +28,7 @@
     "defu": "^6.0.0",
     "esbuild": "^0.14.39",
     "escape-string-regexp": "^5.0.0",
+    "estree-walker": "^3.0.1",
     "externality": "^0.2.1",
     "fs-extra": "^10.1.0",
     "get-port-please": "^2.5.0",

diff --git a/packages/vite/src/plugins/magic-keys.ts b/packages/vite/src/plugins/magic-keys.ts
@@ -0,0 +1,61 @@
+import crypto from 'node:crypto'
+import { pathToFileURL } from 'node:url'
+import type { Plugin } from 'vite'
+import { parse } from 'acorn'
+import { walk } from 'estree-walker'
+import MagicString from 'magic-string'
+import type { CallExpression } from 'estree'
+import { parseURL } from 'ufo'
+
+export interface MagicKeysOptions {
+  sourcemap?: boolean
+  useAcorn?: boolean
+}
+
+function createKey (source: string) {
+  const hash = crypto.createHash('md5')
+  hash.update(source)
+  return hash.digest('base64').toString()
+}
+
+const keyedFunctions = [
+  'useState', 'useFetch', 'useAsyncData', 'useLazyAsyncData', 'useLazyFetch'
+]
+
+export const magicKeysPlugin = (options: MagicKeysOptions = {}): Plugin => {
+  return {
+    name: 'nuxt:magic-keys',
+    enforce: 'post',
+    transform (code, id) {
+      const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+      if (!pathname.match(/\.([cm][jt]sx?|vue)/)) { return }
+      if (!keyedFunctions.some(f => code.includes(f))) { return }
+      const { 0: script = code, index: codeIndex = 0 } = code.match(/(?<=<script[^>]*>)[\S\s.]*?(?=<\/script>)/) || []
+      const s = new MagicString(code)
+      // https://github.com/unjs/unplugin/issues/90
+      walk(options.useAcorn
+        ? parse(script, {
+          sourceType: 'module',
+          ecmaVersion: 'latest'
+        })
+        : this.parse(script), {
+        enter (node: CallExpression) {
+          if (node.type !== 'CallExpression' || node.callee.type !== 'Identifier') { return }
+          if (keyedFunctions.includes(node.callee.name)) {
+            const end = (node as any).end
+            s.appendLeft(
+              codeIndex + end - 1,
+              (node.arguments.length ? ', ' : '') + "'" + createKey(`${id}-${codeIndex + end}`) + "'"
+            )
+          }
+        }
+      })
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: options.sourcemap && s.generateMap({ source: id, includeContent: true })
+        }
+      }
+    }
+  }
+}
diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts
@@ -12,6 +12,7 @@ import virtual from './plugins/virtual'
 import { DynamicBasePlugin } from './plugins/dynamic-base'
 import { warmupViteServer } from './utils/warmup'
 import { resolveCSSOptions } from './css'
+import { magicKeysPlugin } from './plugins/magic-keys'
 
 export interface ViteOptions extends InlineConfig {
   vue?: Options
@@ -64,6 +65,7 @@ export async function bundle (nuxt: Nuxt) {
           }
         },
         plugins: [
+          magicKeysPlugin({ sourcemap: nuxt.options.sourcemap }),
           virtual(nuxt.vfs),
           DynamicBasePlugin.vite({ sourcemap: nuxt.options.sourcemap })
         ],

diff --git a/packages/webpack/package.json b/packages/webpack/package.json
@@ -19,12 +19,14 @@
     "@babel/core": "^7.17.10",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.2",
     "@nuxt/kit": "^3.0.0-rc.3",
+    "acorn": "^8.7.1",
     "autoprefixer": "^10.4.7",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "cssnano": "^5.1.7",
     "esbuild-loader": "^2.18.0",
     "escape-string-regexp": "^5.0.0",
+    "estree-walker": "^3.0.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.2.11",
     "fs-extra": "^10.1.0",

diff --git a/packages/webpack/src/webpack.ts b/packages/webpack/src/webpack.ts
@@ -8,7 +8,9 @@ import type { Compiler, Watching } from 'webpack'
 import type { Nuxt } from '@nuxt/schema'
 import { joinURL } from 'ufo'
 import { logger, useNuxt } from '@nuxt/kit'
+import { createUnplugin } from 'unplugin'
 import { DynamicBasePlugin } from '../../vite/src/plugins/dynamic-base'
+import { magicKeysPlugin as _magicKeysPlugin } from '../../vite/src/plugins/magic-keys'
 import { createMFS } from './utils/mfs'
 import { registerVirtualModules } from './virtual-modules'
 import { client, server } from './configs'
@@ -17,6 +19,8 @@ import { createWebpackConfigContext, applyPresets, getWebpackConfig } from './ut
 // TODO: Support plugins
 // const plugins: string[] = []
 
+const magicKeysPlugin = createUnplugin(_magicKeysPlugin as any)
+
 export async function bundle (nuxt: Nuxt) {
   await registerVirtualModules()
 
@@ -37,6 +41,7 @@ export async function bundle (nuxt: Nuxt) {
       sourcemap: nuxt.options.sourcemap,
       globalPublicPath: '__webpack_public_path__'
     }))
+    config.plugins.push(magicKeysPlugin.webpack({ useAcorn: true, sourcemap: nuxt.options.sourcemap }))
 
     // Create compiler
     const compiler = webpack(config)