Merge branch 'main' into fix/watch-more-things

Author: pi0

docs/content/2.guide/3.directory-structure/6.layouts.md

@@ -8,7 +8,7 @@ head.title: Layouts directory
 
 Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components.
 
-Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by using the `<NuxtLayout>` component.
+Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by using the `<NuxtLayout>` component. (**Note**: The layout name is normalized to kebab-case, so `someLayout` becomes `some-layout`.)
 
 If you only have a single layout in your application, we recommend using [app.vue](/guide/directory-structure/app) instead.
 

docs/content/2.guide/3.directory-structure/7.middleware.md

@@ -15,7 +15,7 @@ Route middleware run within the Vue part of your Nuxt app. Despite the similar n
 There are three kinds of route middleware:
 
 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used.
-2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page.
+2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
 3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
 
 The first two kinds of route middleware can be [defined in `definePageMeta`](/guide/directory-structure/pages).

docs/content/3.api/1.composables/use-cookie.md

@@ -143,18 +143,16 @@ You can use `useCookie` and `setCookie` from [`h3`](https://github.com/unjs/h3)
 **Example:**
 
 ```js
-import { useCookie, setCookie } from 'h3'
-
-export default (req, res) => {
+export default defineEventHandler(event => {
   // Read counter cookie
-  let counter = useCookie(req, 'counter') || 0
+  let counter = useCookie(event, 'counter') || 0
 
   // Increase counter cookie by 1
-  setCookie(res, 'counter', ++counter)
+  setCookie(event, 'counter', ++counter)
 
   // Send JSON response
   return { counter }
-}
+})
 ```
 
 :LinkExample{link="/examples/composables/use-cookie"}

package.json

@@ -42,6 +42,7 @@
     "nuxi": "link:./packages/nuxi",
     "nuxt": "link:./packages/nuxt",
     "nuxt3": "link:./packages/nuxt",
+    "vite": "^2.9.11",
     "unbuild": "^0.7.4"
   },
   "devDependencies": {
@@ -63,7 +64,7 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.7.3",
     "unbuild": "^0.7.4",
-    "vitest": "^0.14.1",
+    "vitest": "^0.14.2",
     "vue-tsc": "^0.37.3"
   },
   "packageManager": "[email protected]",

packages/kit/package.json

@@ -21,7 +21,7 @@
     "hash-sum": "^2.0.0",
     "ignore": "^5.2.0",
     "jiti": "^1.13.0",
-    "knitwork": "^0.1.1",
+    "knitwork": "^0.1.2",
     "lodash.template": "^4.5.0",
     "mlly": "^0.5.2",
     "pathe": "^0.3.0",

packages/kit/src/internal/template.ts

@@ -1,9 +1,6 @@
 import { promises as fsp } from 'node:fs'
 import lodashTemplate from 'lodash.template'
-import hash from 'hash-sum'
-import { camelCase } from 'scule'
-import { basename, extname } from 'pathe'
-import { genDynamicImport, genImport } from 'knitwork'
+import { genSafeVariableName, genDynamicImport, genImport } from 'knitwork'
 
 import type { NuxtTemplate } from '@nuxt/schema'
 
@@ -26,18 +23,16 @@ export async function compileTemplate (template: NuxtTemplate, ctx: any) {
 
 const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))
 
-const importName = (src: string) => `${camelCase(basename(src, extname(src))).replace(/[^a-zA-Z?\d\s:]/g, '')}_${hash(src)}`
-
 const importSources = (sources: string | string[], { lazy = false } = {}) => {
   if (!Array.isArray(sources)) {
     sources = [sources]
   }
   return sources.map((src) => {
     if (lazy) {
-      return `const ${importName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
+      return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
     }
-    return genImport(src, importName(src))
+    return genImport(src, genSafeVariableName(src))
   }).join('\n')
 }
 
-export const templateUtils = { serialize, importName, importSources }
+export const templateUtils = { serialize, importName: genSafeVariableName, importSources }

packages/kit/src/resolve.ts

@@ -148,5 +148,5 @@ async function existsSensitive (path: string) {
 
 export async function resolveFiles (path: string, pattern: string | string[]) {
   const files = await globby(pattern, { cwd: path, followSymbolicLinks: true })
-  return files.filter(p => !isIgnored(p)).map(p => resolve(path, p))
+  return files.map(p => resolve(path, p)).filter(p => !isIgnored(p))
 }

packages/nuxt/package.json

@@ -46,10 +46,10 @@
     "escape-string-regexp": "^5.0.0",
     "fs-extra": "^10.1.0",
     "globby": "^13.1.1",
-    "h3": "^0.7.8",
+    "h3": "^0.7.9",
     "hash-sum": "^2.0.0",
     "hookable": "^5.1.1",
-    "knitwork": "^0.1.1",
+    "knitwork": "^0.1.2",
     "magic-string": "^0.26.2",
     "mlly": "^0.5.2",
     "nitropack": "^0.4.4",
@@ -66,7 +66,7 @@
     "unplugin": "^0.7.0",
     "untyped": "^0.4.4",
     "vue": "^3.2.37",
-    "vue-bundle-renderer": "^0.3.8",
+    "vue-bundle-renderer": "^0.3.9",
     "vue-router": "^4.0.16"
   },
   "devDependencies": {

packages/nuxt/src/auto-imports/module.ts

@@ -16,6 +16,7 @@ export default defineNuxtModule<Partial<AutoImportsOptions>>({
     imports: [],
     dirs: [],
     transform: {
+      include: [],
       exclude: undefined
     }
   },

packages/nuxt/src/auto-imports/transform.ts

@@ -15,16 +15,16 @@ export const TransformPlugin = createUnplugin(({ ctx, options, sourcemap }: {ctx
       const exclude = options.transform?.exclude || [/[\\/]node_modules[\\/]/]
       const include = options.transform?.include || []
 
-      // Exclude node_modules by default
-      if (exclude.some(pattern => id.match(pattern))) {
-        return false
-      }
-
       // Custom includes
       if (include.some(pattern => id.match(pattern))) {
         return true
       }
 
+      // Exclude node_modules by default
+      if (exclude.some(pattern => id.match(pattern))) {
+        return false
+      }
+
       // vue files
       if (
         pathname.endsWith('.vue') &&