Merge branch 'main' into fix/21721-spa-loading

nuxt · Nov 29, 2024 · 24a0253 · 24a0253
2 parents ef927bb + 1c418d0
commit 24a0253
Show file tree

Hide file tree

Showing 29 changed files with 954 additions and 713 deletions.
diff --git a/docs/1.getting-started/4.assets.md b/docs/1.getting-started/4.assets.md
@@ -46,59 +46,3 @@ For example, referencing an image file that will be processed if a build tool is
 ::note
 Nuxt won't serve files in the [`assets/`](/docs/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
 ::
-
-### Global Styles Imports
-
-To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/docs/api/nuxt-config#vite) option at your [`nuxt.config`](/docs/api/nuxt-config) file.
-
-#### Example
-
-In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/docs/guide/directory-structure/pages) and [components](/docs/guide/directory-structure/components)
-
-::code-group
-
-```scss [assets/_colors.scss]
-$primary: #49240F;
-$secondary: #E4A79D;
-```
-
-```sass [assets/_colors.sass]
-$primary: #49240F
-$secondary: #E4A79D
-```
-
-::
-
-In your `nuxt.config`
-
-::code-group
-
-```ts twoslash [SCSS]
-export default defineNuxtConfig({
-  vite: {
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: '@use "~/assets/_colors.scss" as *;'
-        }
-      }
-    }
-  }
-})
-```
-
-```ts twoslash [SASS]
-export default defineNuxtConfig({
-  vite: {
-    css: {
-      preprocessorOptions: {
-        sass: {
-          additionalData: '@use "~/assets/_colors.sass" as *\n'
-        }
-      }
-    }
-  }
-})
-```
-
-::
diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
@@ -1,5 +1,5 @@
 ---
-title: 'Data fetching'
+title: 'Data Fetching'
 description: Nuxt provides composables to handle data fetching within your application.
 navigation.icon: i-ph-plugs-connected
 ---

diff --git a/docs/2.guide/1.concepts/8.typescript.md b/docs/2.guide/1.concepts/8.typescript.md
@@ -35,7 +35,7 @@ Then, run [`nuxi typecheck`](/docs/api/commands/typecheck) command to check your
 npx nuxi typecheck
 ```
 
-To enable type-checking at build time, you can also use the [`typescript.typeCheck`](/docs/api/nuxt-config#typecheck) option in your `nuxt.config` file:
+To enable type-checking at build or development time, you can also use the [`typescript.typeCheck`](/docs/api/nuxt-config#typecheck) option in your `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

diff --git a/docs/2.guide/2.directory-structure/1.server.md b/docs/2.guide/2.directory-structure/1.server.md
@@ -363,6 +363,26 @@ Headers that are **not meant to be forwarded** will **not be included** in the r
 `transfer-encoding`, `connection`, `keep-alive`, `upgrade`, `expect`, `host`, `accept`
 ::
 
+### Awaiting Promises After Response
+
+When handling server requests, you might need to perform asynchronous tasks that shouldn't block the response to the client (for example, caching and logging). You can use `event.waitUntil` to await a promise in the background without delaying the response.
+
+The `event.waitUntil` method accepts a promise that will be awaited before the handler terminates, ensuring the task is completed even if the server would otherwise terminate the handler right after the response is sent. This integrates with runtime providers to leverage their native capabilities for handling asynchronous operations after the response is sent.
+
+```ts [server/api/background-task.ts]
+const timeConsumingBackgroundTask = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+};
+
+export default eventHandler((event) => {
+  // schedule a background task without blocking the response
+  event.waitUntil(timeConsumingBackgroundTask())
+
+  // immediately send the response to the client
+  return 'done'
+});
+```
+
 ## Advanced Usage
 
 ### Nitro Config

diff --git a/docs/2.guide/3.going-further/1.experimental-features.md b/docs/2.guide/3.going-further/1.experimental-features.md
@@ -395,6 +395,35 @@ In addition, any changes to files within `srcDir` will trigger a rebuild of the
 A maximum of 10 cache tarballs are kept.
 ::
 
+## extraPageMetaExtractionKeys
+
+The `definePageMeta()` macro is a useful way to collect build-time meta about pages. Nuxt itself provides a set list of supported keys which is used to power some of the internal features such as redirects, page aliases and custom paths.
+
+This option allows passing additional keys to extract from the page metadata when using `scanPageMeta`.
+
+```vue
+<script lang="ts" setup>
+definePageMeta({
+  foo: 'bar'
+})
+</script>
+```
+
+```ts
+export default defineNuxtConfig({
+  experimental: {
+    extraPageMetaExtractionKeys: ['foo'],
+  },
+  hooks: {
+    'pages:resolved' (ctx) {
+      // ✅ foo is available
+    },
+  },
+})
+```
+
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/guide/directory-structure/pages#typing-custom-metadata).
+
 ## normalizeComponentNames
 
 Ensure that auto-generated Vue component names match the full component name

diff --git a/docs/3.api/2.composables/use-fetch.md b/docs/3.api/2.composables/use-fetch.md
@@ -30,7 +30,7 @@ If you're using a custom useFetch wrapper, do not await it in the composable, as
 ::
 
 ::note
-`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions..
+`data`, `status`, and `error` are Vue refs, and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
 ::
 
 Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ofetch](https://github.com/unjs/ofetch) and is using [unjs/ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@nuxt/schema": "workspace:*",
     "@nuxt/vite-builder": "workspace:*",
     "@nuxt/webpack-builder": "workspace:*",
-    "@types/node": "22.10.0",
+    "@types/node": "22.10.1",
     "@unhead/dom": "1.11.13",
     "@unhead/schema": "1.11.13",
     "@unhead/shared": "1.11.13",
@@ -72,7 +72,7 @@
     "@nuxt/test-utils": "3.14.4",
     "@nuxt/webpack-builder": "workspace:*",
     "@testing-library/vue": "8.1.0",
-    "@types/node": "22.10.0",
+    "@types/node": "22.10.1",
     "@types/semver": "7.5.8",
     "@unhead/schema": "1.11.13",
     "@unhead/vue": "1.11.13",
@@ -90,14 +90,14 @@
     "eslint-plugin-perfectionist": "4.1.2",
     "eslint-typegen": "0.3.2",
     "h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
-    "happy-dom": "15.11.6",
+    "happy-dom": "15.11.7",
     "jiti": "2.4.0",
-    "knip": "5.38.1",
+    "knip": "5.38.2",
     "markdownlint-cli": "0.43.0",
     "nitro": "npm:nitro-nightly@3.0.0-beta-28796231.359af68d",
-    "nuxi": "3.15.0",
+    "nuxi": "3.16.0",
     "nuxt": "workspace:*",
-    "nuxt-content-twoslash": "0.1.1",
+    "nuxt-content-twoslash": "0.1.2",
     "ofetch": "1.4.1",
     "pathe": "1.1.2",
     "playwright-core": "1.49.0",

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -95,7 +95,7 @@
     "mlly": "^1.7.3",
     "nanotar": "^0.1.1",
     "nitro": "npm:nitro-nightly@3.0.0-beta-28796231.359af68d",
-    "nuxi": "^3.15.0",
+    "nuxi": "^3.16.0",
     "nypm": "^0.4.0",
     "ofetch": "^1.4.1",
     "ohash": "^1.1.4",

diff --git a/packages/nuxt/src/components/plugins/component-names.ts b/packages/nuxt/src/components/plugins/component-names.ts
@@ -1,7 +1,8 @@
 import { createUnplugin } from 'unplugin'
 import MagicString from 'magic-string'
 import type { Component } from 'nuxt/schema'
-import type { Program } from 'acorn'
+import { parseAndWalk, withLocations } from '../../core/utils/parse'
+
 import { SX_RE, isVue } from '../../core/utils'
 
 interface NameDevPluginOptions {
@@ -37,12 +38,15 @@ export const ComponentNamePlugin = (options: NameDevPluginOptions) => createUnpl
 
       // Without setup function, vue compiler does not generate __name
       if (!s.hasChanged()) {
-        const ast = this.parse(code) as Program
-        const exportDefault = ast.body.find(node => node.type === 'ExportDefaultDeclaration')
-        if (exportDefault) {
-          const { start, end } = exportDefault.declaration
+        parseAndWalk(code, id, function (node) {
+          if (node.type !== 'ExportDefaultDeclaration') {
+            return
+          }
+
+          const { start, end } = withLocations(node.declaration)
           s.overwrite(start, end, `Object.assign(${code.slice(start, end)}, { __name: ${JSON.stringify(component.pascalName)} })`)
-        }
+          this.skip()
+        })
       }
 
       if (s.hasChanged()) {
-Original file line number
+Diff line change
@@ Expand Up @@
     ::
     ::note
-    `data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions..
+    `data`, `status`, and `error` are Vue refs, and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
     ::
     Using the `query` option, you can add search parameters to your query. This option is extended from [unjs/ofetch](https://github.com/unjs/ofetch) and is using [unjs/ufo](https://github.com/unjs/ufo) to create the URL. Objects are automatically stringified.
@@ Expand Down @@