feat(nuxt): sort numbered middleware/plugins from all layers

packages/nuxt/src/core/app.ts

@@ -2,7 +2,7 @@
 import { dirname, join, relative, resolve } from 'pathe'
 import { defu } from 'defu'
 import { compileTemplate, findPath, logger, normalizePlugin, normalizeTemplate, resolveAlias, resolveFiles, resolvePath, templateUtils, tryResolveModule } from '@nuxt/kit'
-import type { Nuxt, NuxtApp, NuxtPlugin, NuxtTemplate, ResolvedNuxtTemplate } from 'nuxt/schema'
+import type { Nuxt, NuxtApp, NuxtMiddleware, NuxtPlugin, NuxtTemplate, ResolvedNuxtTemplate } from 'nuxt/schema'
 
 import * as defaultTemplates from './templates'
 import { getNameFromPath, hasSuffix, uniqueBy } from './utils'
@@ -141,6 +141,7 @@
       app.middleware.push({ name, path: file, global: hasSuffix(file, '.global') })
     }
   }
+  app.middleware = sortMiddleware(app.middleware)
 
   // Resolve plugins, first extended layers and then base
   app.plugins = []
@@ -220,7 +221,7 @@
   for (const plugin of _plugins) {
     // Make sure dependency plugins are registered
     if (plugin.dependsOn && plugin.dependsOn.some(name => !pluginNames.includes(name))) {
       console.error(`Plugin \`${plugin.name}\` depends on \`${plugin.dependsOn.filter(name => !pluginNames.includes(name)).join(', ')}\` but they are not registered.`)
     }
     // Make graph to detect circular dependencies
     if (plugin.name) {
@@ -229,7 +230,7 @@
   }
   const checkDeps = (name: string, visited: string[] = []): string[] => {
     if (visited.includes(name)) {
       console.error(`Circular dependency detected in plugins: ${visited.join(' -> ')} -> ${name}`)
       return []
     }
     visited.push(name)
@@ -239,3 +240,19 @@
     checkDeps(name)
   }
 }
+
+
+function sortMiddleware(middleware: NuxtMiddleware[]) {
+  const globalMiddleware = middleware.filter(mw => mw.global)
+  const namedMiddleware = middleware.filter(mw => !mw.global)
+  return [
+    ...sortOrderedMiddleware(globalMiddleware),
+    ...sortOrderedMiddleware(namedMiddleware)
+  ]
+  function sortOrderedMiddleware (middleware: NuxtMiddleware[]) {
+    const reg = /^\d/
+    const orderedMiddleware = middleware.filter(m => reg.test(m.name)).toSorted((l, r) => l.name > r.name ? 1 : -1)
+    const unorderedMiddleware = middleware.filter(m => !reg.test(m.name))
+    return  [...orderedMiddleware, ...unorderedMiddleware]
+  }
+}

packages/nuxt/test/app.test.ts

@@ -152,17 +152,20 @@ describe('resolveApp', () => {
   it('resolves layer middleware in correct order', async () => {
     const app = await getResolvedApp([
       // layer 1
+      'layer1/middleware/01.order.global.ts',
       'layer1/middleware/global.global.ts',
       'layer1/middleware/named-from-layer.ts',
       'layer1/middleware/named-override.ts',
       'layer1/nuxt.config.ts',
       // layer 2
+      'layer2/middleware/02.order.global.ts',
       'layer2/middleware/global.global.ts',
       'layer2/middleware/named-from-layer.ts',
       'layer2/middleware/named-override.ts',
       'layer2/plugins/override-test.ts',
       'layer2/nuxt.config.ts',
       // final (user) layer
+      'middleware/00.order.global.ts',
       'middleware/named-override.ts',
       'middleware/named.ts',
       {
@@ -171,9 +174,12 @@ describe('resolveApp', () => {
       }
     ])
     const fixtureMiddleware = app.middleware.filter(p => p.path.includes('<rootDir>')).map(p => p.path)
-    // TODO: fix this
+
     expect(fixtureMiddleware).toMatchInlineSnapshot(`
       [
+        "<rootDir>/middleware/00.order.global.ts",
+        "<rootDir>/layer1/middleware/01.order.global.ts",
+        "<rootDir>/layer2/middleware/02.order.global.ts",
         "<rootDir>/layer2/middleware/global.global.ts",
         "<rootDir>/layer2/middleware/named-from-layer.ts",
         "<rootDir>/middleware/named-override.ts",