Merge branch 'main' into fix/transpile-extends

Author: pi0

package.json

@@ -63,7 +63,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

@@ -49,7 +49,7 @@
     "h3": "^0.7.8",
     "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/core/templates.ts

@@ -1,6 +1,6 @@
 import { templateUtils } from '@nuxt/kit'
 import type { Nuxt, NuxtApp, NuxtTemplate } from '@nuxt/schema'
-import { genArrayFromRaw, genDynamicImport, genExport, genImport, genObjectFromRawEntries, genString } from 'knitwork'
+import { genArrayFromRaw, genDynamicImport, genExport, genImport, genObjectFromRawEntries, genString, genSafeVariableName } from 'knitwork'
 
 import { isAbsolute, join, relative } from 'pathe'
 import { resolveSchema, generateTypes } from 'untyped'
@@ -50,7 +50,7 @@ export const clientPluginTemplate = {
     const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server')
     return [
       templateUtils.importSources(clientPlugins.map(p => p.src)),
-      `export default ${genArrayFromRaw(clientPlugins.map(p => templateUtils.importName(p.src)))}`
+      `export default ${genArrayFromRaw(clientPlugins.map(p => genSafeVariableName(p.src)))}`
     ].join('\n')
   }
 }
@@ -64,7 +64,7 @@ export const serverPluginTemplate = {
       templateUtils.importSources(serverPlugins.map(p => p.src)),
       `export default ${genArrayFromRaw([
         'preload',
-        ...serverPlugins.map(p => templateUtils.importName(p.src))
+        ...serverPlugins.map(p => genSafeVariableName(p.src))
       ])}`
     ].join('\n')
   }

packages/nuxt/src/pages/module.ts

@@ -1,10 +1,10 @@
 import { existsSync } from 'node:fs'
 import { defineNuxtModule, addTemplate, addPlugin, addVitePlugin, addWebpackPlugin, findPath } from '@nuxt/kit'
 import { resolve } from 'pathe'
-import { genDynamicImport, genString, genArrayFromRaw, genImport, genObjectFromRawEntries } from 'knitwork'
+import { genDynamicImport, genString, genArrayFromRaw, genImport, genObjectFromRawEntries, genSafeVariableName } from 'knitwork'
 import escapeRE from 'escape-string-regexp'
 import { distDir } from '../dirs'
-import { resolvePagesRoutes, normalizeRoutes, resolveMiddleware, getImportName } from './utils'
+import { resolvePagesRoutes, normalizeRoutes, resolveMiddleware } from './utils'
 import { TransformMacroPlugin, TransformMacroPluginOptions } from './macros'
 
 export default defineNuxtModule({
@@ -113,8 +113,8 @@ export default defineNuxtModule({
         const namedMiddleware = middleware.filter(mw => !mw.global)
         const namedMiddlewareObject = genObjectFromRawEntries(namedMiddleware.map(mw => [mw.name, genDynamicImport(mw.path)]))
         return [
-          ...globalMiddleware.map(mw => genImport(mw.path, getImportName(mw.name))),
-          `export const globalMiddleware = ${genArrayFromRaw(globalMiddleware.map(mw => getImportName(mw.name)))}`,
+          ...globalMiddleware.map(mw => genImport(mw.path, genSafeVariableName(mw.name))),
+          `export const globalMiddleware = ${genArrayFromRaw(globalMiddleware.map(mw => genSafeVariableName(mw.name)))}`,
           `export const namedMiddleware = ${namedMiddlewareObject}`
         ].join('\n')
       }

packages/nuxt/src/pages/utils.ts

@@ -2,8 +2,8 @@ import { basename, extname, normalize, relative, resolve } from 'pathe'
 import { encodePath } from 'ufo'
 import { NuxtMiddleware, NuxtPage } from '@nuxt/schema'
 import { resolveFiles, useNuxt } from '@nuxt/kit'
-import { kebabCase, pascalCase } from 'scule'
-import { genImport, genDynamicImport, genArrayFromRaw } from 'knitwork'
+import { kebabCase } from 'scule'
+import { genImport, genDynamicImport, genArrayFromRaw, genSafeVariableName } from 'knitwork'
 import escapeRE from 'escape-string-regexp'
 
 enum SegmentParserState {
@@ -88,15 +88,11 @@ export function generateRoutesFromFiles (files: string[], pagesDir: string): Nux
     }
 
     parent.push(route)
-    // TODO: https://github.com/vuejs/router/issues/1435
-    parent.sort((a, b) => getSortablePath(a.path).localeCompare(getSortablePath(b.path)))
   }
 
   return prepareRoutes(routes)
 }
 
-const getSortablePath = (path: string) => path.replace(/^\//, '').replace(/:/, 'Z')
-
 function getRoutePath (tokens: SegmentToken[]): string {
   return tokens.reduce((path, token) => {
     return (
@@ -233,7 +229,7 @@ export function normalizeRoutes (routes: NuxtPage[], metaImports: Set<string> =
     imports: metaImports,
     routes: genArrayFromRaw(routes.map((route) => {
       const file = normalize(route.file)
-      const metaImportName = getImportName(file) + 'Meta'
+      const metaImportName = genSafeVariableName(file) + 'Meta'
       metaImports.add(genImport(`${file}?macro=true`, [{ name: 'meta', as: metaImportName }]))
       return {
         ...Object.fromEntries(Object.entries(route).map(([key, value]) => [key, JSON.stringify(value)])),
@@ -271,10 +267,6 @@ function hasSuffix (path: string, suffix: string) {
   return basename(path).replace(extname(path), '').endsWith(suffix)
 }
 
-export function getImportName (name: string) {
-  return pascalCase(name).replace(/[^\w]/g, r => '_' + r.charCodeAt(0))
-}
-
 function uniqueBy <T, K extends keyof T> (arr: T[], key: K) {
   const res: T[] = []
   const seen = new Set<T[K]>()

packages/nuxt/test/pages.test.ts

@@ -112,23 +112,11 @@ describe('pages:generateRoutesFromFiles', () => {
           file: `${pagesDir}/index.vue`,
           children: []
         },
-        {
-          name: 'nonopt-slug',
-          path: '/nonopt/:slug',
-          file: `${pagesDir}/nonopt/[slug].vue`,
-          children: []
-        },
-        {
-          name: 'opt-slug',
-          path: '/opt/:slug?',
-          file: `${pagesDir}/opt/[[slug]].vue`,
-          children: []
-        },
         {
           children: [],
-          name: 'bar',
-          file: 'pages/[bar]/index.vue',
-          path: '/:bar'
+          name: 'slug',
+          file: 'pages/[slug].vue',
+          path: '/:slug'
         },
         {
           children: [
@@ -144,9 +132,21 @@ describe('pages:generateRoutesFromFiles', () => {
           path: '/:foo?'
         },
         {
-          name: 'slug',
-          path: '/:slug',
-          file: `${pagesDir}/[slug].vue`,
+          children: [],
+          name: 'bar',
+          file: 'pages/[bar]/index.vue',
+          path: '/:bar'
+        },
+        {
+          name: 'nonopt-slug',
+          path: '/nonopt/:slug',
+          file: `${pagesDir}/nonopt/[slug].vue`,
+          children: []
+        },
+        {
+          name: 'opt-slug',
+          path: '/opt/:slug?',
+          file: `${pagesDir}/opt/[[slug]].vue`,
           children: []
         },
         {
@@ -161,17 +161,17 @@ describe('pages:generateRoutesFromFiles', () => {
       description: 'should generate correct catch-all route',
       files: [`${pagesDir}/[...slug].vue`, `${pagesDir}/index.vue`],
       output: [
-        {
-          name: 'index',
-          path: '/',
-          file: `${pagesDir}/index.vue`,
-          children: []
-        },
         {
           name: 'slug',
           path: '/:slug(.*)*',
           file: `${pagesDir}/[...slug].vue`,
           children: []
+        },
+        {
+          name: 'index',
+          path: '/',
+          file: `${pagesDir}/index.vue`,
+          children: []
         }
       ]
     },

packages/test-utils/package.json

@@ -24,7 +24,7 @@
   "devDependencies": {
     "playwright": "^1.22.2",
     "unbuild": "latest",
-    "vitest": "^0.14.1"
+    "vitest": "^0.14.2"
   },
   "peerDependencies": {
     "vue": "^3.2.37"