docs: updated visualization for dispatch request lifecycle

[wuiyang]

Updated visualization for dispatch request lifecycle to be clearer.

MiddlewareA has to be in vertical, or else it's too long to to see the details.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

📢 Thoughts on this report? Let us know!

[pi0]

Two suggestions from the current diagram:

• mentioning "beforre request"/"after request" might be a little confusing in this context, especially with global hooks, we could use an arrow like incoming request =>
• would be nice to draw (nested) boxes for each middleware, showing they kinda "wrap"

If it helps, this is actual code.

[wuiyang]

couldn't make mermaid display flowchart well, here are some attempts made, which graph suit the documentation most?

1. flowchart
   https://mermaid.live/edit#pako:eNqNk1FvmzAQx7-KdXtppTQBJ0DCQ6W1e8ikRZrYtIeNPrj4ClbBzoxZ2kX57rMdIEmnSXvjzr_73__OeA-F4ggp5PKpVruiYtqQT1kuCWm7x1KzbUU2P3LYCM5r3DGNbQ4P7vgcCC-I9yNBCBcaCyOUJF_vcjlkN-FnV_JRFqoRsiQZ_uywNb5uYE7q9EL97kz9X_q2A_UdlDyXPjukvr1BLVlNJL6Yq-uL7ij5hV3HZ9hulWxx1PLQGTtazhytOnNCs7VNaZeaVkzaUfQV_kJprnti1Lj3u2SmsCq9Arm5uSUbd-j2ZiOSA9sxYUbjR4J6hHrk1g95TBwrMjSdlsjJN1Z3ONSEPeSjzFkoalE8Wxu2ZFZ2guPskbWiaGfOvb2sHAbGu3lLNeNFXYD0_0C6dpztU1tAaXynpO63Xin1fCKz9V-C_V5zgAmUWnBIje5wAg3qhrkQ9m7UHEyFjW2a2k_OtBc92Jotk9-VaoYyO25ZQfrE6tZG3ZYzgx8Esxc8Iqwz6surLIbYKkC6hxdI6ZxOwyiO43C1TObBIpnAK6TxfBrHKxquVkmQBPOQRocJ_PY9g-kyjIIoWi3jaLmgC0ongFwYpTfH9-mfqXVlfxTU96qTBtIkOfwBgN0ssA

2. state diagram
   https://mermaid.live/edit#pako:eNqNU01v2zAM_SsCT93gBpH8EUeHAW126ID54u3Uugch4hKjsZTJ8touyH-fbMVJtCzAfLH5KL73SJk7WGqJwKG1wuLnWqyMaCpF3CNrg0tba0W-lpXyWFFyUgi7XJNSdxZHkNzefiLF8ZA7U0u5wVdhsPXYQE8KsvPhJf-IPn189mz0hBXUQ-wMYh6KPbQ_atNz8btAnP5b_fv9WOwJFo7iBn-hshFR-GY_BEnGiXgVtR1SN2Eu5sSg7Yz6m_DQ0YKFVCN80QQ7b-I-aIJdb-I0m97lF2XRKLG5Zpf1drUqsd1q1WJgmY3e2KW3-NzbIvAW_4e3uB9vL_uzw9YGieumw_rDzY_TPForH9z8-99yshbKGTT-Fg9NF0NZ-eAjiGBlagncmg4jaNA0og9h6KACu8YGK-DuUwrzUkGl9q5mK9Sj1s1Y5tRWa-A_xKZ1UbeVpx06oqKz-tu7Wo41jgL4Dt6A0ySf0DTLZjOWZNN5PEsjeAc-o5Msm7N0muQ5yylL9xH8HkSnk5ym0zSdJ0nm3jSfR4CyttoUfomHXXa2UEk0C90pCzxJ2P4PmGMWdA

3. sequence diagram
   https://mermaid.live/edit#pako:eNqFlMuOmzAUhl_FOtVIqQoJMOESNIo0oYtussnsKjYOuGAN2BljmqRR3r3mluIGZbyxbH3nP-c_vlwg4SmBECryUROWkO8UZwKXMUNq7JrNSprr9bctTdOCHLEgryHaYpnklGVox2tJYtbRe35C_7Cq22zGAQtJE3rATI6A18-ADcKVtnzZi8UazTjr6_r6mUL0QKE6cFaRXoKwdHAxKtA015ptXJ1ZgmbkN2HSQIychgrGMVqvNiroiKls4dkdvdEyKPhmbYrVlKMQUSaJYLh4mCJqwtpjehjQEgrtSdFM8xwzpSL-Z0ytivuEY09R56lr9nR1ptaBKdumdgoCHzc8PU913uy718jE7OkJJQVN3lFkoxgWWU1TstjjiibVojGoLnAMI2xrT4DlLYHOOpHTsEqlUBAX5AtnoveZc_6u0bsfd7p9b2MAAzJBUwilqIkBJRElbpZwaRzGIHNSqtzKEqRYtLpXFaNu-k_OyyFM-clyCH_holKr-pBiOTzl2y6uJX9TN3iIURIQXuAEob0M5rbreb7vLD1r9ey7Bpwh9O25560c11oGgRPYjns14E-b1JoHtmu57sp3PN8JAu_ZAJJSycW2-07aX0WVpR4WERGvmYTQsZbe9S98CXRz

[pi0]

Updated with simplified seq diagram. How do you think?

%%{init: {'theme':'neutral'}}%%
sequenceDiagram
    participant MiddlewareA as Middleware1(event, next)
    participant MiddlewareB as Middleware2(event, next)
    participant Route as RouteHandler(event)

    MiddlewareA-->MiddlewareA: onRequest(event)
    MiddlewareA->>+MiddlewareB: await next()
    MiddlewareB-->MiddlewareB: onRequest(event)
    MiddlewareB->>+Route: await next()
    Route->>Route: RouteHandler(event)
    Route-->>-MiddlewareB: rawBody
    MiddlewareB-->>-MiddlewareA: rawBody
    MiddlewareA-->MiddlewareA: sendResponse(event, rawBody)

Loading

[wuiyang]

This looks simpler and easier to understand than the one I suggested!
I got caught up with showing possible helper utils onRequest and onResponse, the version you suggested should make things easier to understand