[Bug?]: V2 middleware functions do not execute in order

[sabercoy]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

onRequest functions execute in order
onBeforeResponse functions execute in inconsistent (backwards?) order

Expected behavior 🤔

onBeforeResponse functions execute in order

Steps to reproduce 🕹

Steps:

1. create new V2 project
2. create middleware file with this code

import { createMiddleware } from '@solidjs/start/middleware'

const one = async () => {
  console.log('begin one')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end one')
}

const two = async () => {
  console.log('begin two')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end two')
}

const three = async () => {
  console.log('begin three')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end three')
}

const four = async () => {
  console.log('begin four')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end four')
}

const five = async () => {
  console.log('begin five')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end five')
}

const six = async () => {
  console.log('begin six')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end six')
}

const seven = async () => {
  console.log('begin seven')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end seven')
}

const eight = async () => {
  console.log('begin eight')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end eight')
}

const nine = async () => {
  console.log('begin nine')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end nine')
}

const ten = async () => {
  console.log('begin ten')
  await new Promise(resolve => setTimeout(resolve, Math.random() * 1000))
  console.log('end ten')
}

export default createMiddleware({
  onRequest: [
    one,
    two,
    three,
    four,
  ],
  onBeforeResponse: [
    five,
    six,
    seven,
    eight,
    nine,
    ten,
  ]
})

3. observe how it is different than V1

Context 🔦

trying to migrate to V2 and realized some middleware functions were breaking because values they expected were supposed to be populated by previous functions, but those functions were not called yet because it is happening out of order

Your environment 🌎

[sabercoy]

I see it is due to the next() being called at the top of the function

function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware): Middleware {
  return async (h3Event, next) => {
    const resp = await next(); // <-----------------------------------------

    const fetchEvent = getFetchEvent(h3Event);
    const mwResponse = await onBeforeResponse(fetchEvent, {
      body: resp,
    });
    if (mwResponse) return mwResponse;
  };
}

if this is intended, can we make a note in the migration guide that people will need to change their middeware?