feat: support mock.delay (#73)

* feat: support mock.delay

* chore: add changelog

* chore: support url parameter

* chore(mock): use this.config, no need to pass from mock()

Author: Wu-kung

.changeset/eleven-snails-cry.md

@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: configure the delay of the mock globally.

README.md

@@ -122,6 +122,13 @@ An object that maps package names to their corresponding paths.
 
 The configuration passed to lessLoader.
 
+### mock
+
+- Type: `{ delay?: string | number }`
+- Default: `{ delay: 0 }`
+
+In addition to supporting numbers, delay also supports string ranges, such as delay: '500-1000', which randomly selects a value between 500ms and 1000ms.And allowing the configuration to be overridden by the url parameter, such as /api/users?delay=3000.
+
 ### plugins
 
 - Type: `Plugin[]`

examples/normal/.tnfrc.ts

@@ -26,4 +26,5 @@ export default defineConfig({
       },
     },
   ],
+  mock: { delay: '500-1000' },
 });

examples/normal/mock/foo.js

@@ -1,6 +1,153 @@
+const data = {
+  "users": [
+      {
+          "id": 1,
+          "firstName": "Emily",
+          "lastName": "Johnson",
+          "maidenName": "Smith",
+          "age": 28,
+          "gender": "female",
+          "email": "emily.johnson@x.dummyjson.com",
+          "phone": "+81 965-431-3024",
+          "username": "emilys",
+          "password": "emilyspass",
+          "birthDate": "1996-5-30",
+          "image": "https://dummyjson.com/icon/emilys/128",
+          "bloodGroup": "O-",
+          "height": 193.24,
+          "weight": 63.16,
+          "eyeColor": "Green",
+          "hair": {
+              "color": "Brown",
+              "type": "Curly"
+          },
+          "ip": "42.48.100.32",
+          "address": {
+              "address": "626 Main Street",
+              "city": "Phoenix",
+              "state": "Mississippi",
+              "stateCode": "MS",
+              "postalCode": "29112",
+              "coordinates": {
+                  "lat": -77.16213,
+                  "lng": -92.084824
+              },
+              "country": "United States"
+          },
+          "macAddress": "47:fa:41:18:ec:eb",
+          "university": "University of Wisconsin--Madison",
+          "bank": {
+              "cardExpire": "03/26",
+              "cardNumber": "9289760655481815",
+              "cardType": "Elo",
+              "currency": "CNY",
+              "iban": "YPUXISOBI7TTHPK2BR3HAIXL"
+          },
+          "company": {
+              "department": "Engineering",
+              "name": "Dooley, Kozey and Cronin",
+              "title": "Sales Manager",
+              "address": {
+                  "address": "263 Tenth Street",
+                  "city": "San Francisco",
+                  "state": "Wisconsin",
+                  "stateCode": "WI",
+                  "postalCode": "37657",
+                  "coordinates": {
+                      "lat": 71.814525,
+                      "lng": -161.150263
+                  },
+                  "country": "United States"
+              }
+          },
+          "ein": "977-175",
+          "ssn": "900-590-289",
+          "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36",
+          "crypto": {
+              "coin": "Bitcoin",
+              "wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
+              "network": "Ethereum (ERC20)"
+          },
+          "role": "admin"
+      },
+      {
+          "id": 2,
+          "firstName": "Michael",
+          "lastName": "Williams",
+          "maidenName": "",
+          "age": 35,
+          "gender": "male",
+          "email": "michael.williams@x.dummyjson.com",
+          "phone": "+49 258-627-6644",
+          "username": "michaelw",
+          "password": "michaelwpass",
+          "birthDate": "1989-8-10",
+          "image": "https://dummyjson.com/icon/michaelw/128",
+          "bloodGroup": "B+",
+          "height": 186.22,
+          "weight": 76.32,
+          "eyeColor": "Red",
+          "hair": {
+              "color": "Green",
+              "type": "Straight"
+          },
+          "ip": "12.13.116.142",
+          "address": {
+              "address": "385 Fifth Street",
+              "city": "Houston",
+              "state": "Alabama",
+              "stateCode": "AL",
+              "postalCode": "38807",
+              "coordinates": {
+                  "lat": 22.815468,
+                  "lng": 115.608581
+              },
+              "country": "United States"
+          },
+          "macAddress": "79:15:78:99:60:aa",
+          "university": "Ohio State University",
+          "bank": {
+              "cardExpire": "02/27",
+              "cardNumber": "6737807858721625",
+              "cardType": "Elo",
+              "currency": "SEK",
+              "iban": "83IDT77FWYLCJVR8ISDACFH0"
+          },
+          "company": {
+              "department": "Support",
+              "name": "Spinka - Dickinson",
+              "title": "Support Specialist",
+              "address": {
+                  "address": "395 Main Street",
+                  "city": "Los Angeles",
+                  "state": "New Hampshire",
+                  "stateCode": "NH",
+                  "postalCode": "73442",
+                  "coordinates": {
+                      "lat": 79.098326,
+                      "lng": -119.624845
+                  },
+                  "country": "United States"
+              }
+          },
+          "ein": "912-602",
+          "ssn": "108-953-962",
+          "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Edge/97.0.1072.76 Safari/537.36",
+          "crypto": {
+              "coin": "Bitcoin",
+              "wallet": "0xb9fc2fe63b2a6c003f1c324c3bfa53259162181a",
+              "network": "Ethereum (ERC20)"
+          },
+          "role": "admin"
+      },
+  ],
+  "total": 208,
+  "skip": 0,
+  "limit": 30
+}
 
 module.exports = {
   'GET /api/foo': (req, res) => {
-    res.json({ message: 'hello' });
+    res.json(data);
   },
 };

examples/normal/src/pages/foo.tsx

@@ -8,7 +8,8 @@ import {
 export const Route = createFileRoute('/foo')({
   component: Foo,
   loader: async ({ context }) => {
-    const res = await fetch('https://dummyjson.com/users');
+    // const res = await fetch('https://dummyjson.com/users');
+    const res = await fetch('/api/foo?delay=5000');
     const data = await res.json();
     return data;
   },

src/config/types.ts

@@ -93,6 +93,19 @@ export const ConfigSchema = z
         renderMode: z.enum(['stream', 'string']).optional(),
       })
       .optional(),
+    mock: z
+      .object({
+        delay: z
+          .union([
+            z.number().optional(),
+            z
+              .string()
+              .regex(/^\d+-\d+$/)
+              .optional(),
+          ])
+          .optional(),
+      })
+      .optional(),
   })
   .strict();
 

src/funplugins/mock/createMockMiddleware.ts

@@ -6,7 +6,7 @@ import pathToRegexp from 'path-to-regexp';
 import type { MockData } from './types';
 
 export function createMockMiddleware(context: MockData): RequestHandler {
-  return (req, res, next) => {
+  return async (req, res, next) => {
     const method = req.method.toUpperCase();
     for (const key of Object.keys(context.mocks)) {
       const mock = context.mocks[key]!;
@@ -26,6 +26,28 @@ export function createMockMiddleware(context: MockData): RequestHandler {
             }
           }
           req.params = params;
+
+          // parse delay from path, like /api/users?delay=3000
+          // delay in params url is greater than that configuration mock.delay
+          let delay = Number(req.query?.delay) || 0;
+          if (delay === 0) {
+            const delayValue = context.config?.mock?.delay;
+            if (typeof delayValue === 'string' && delayValue.includes('-')) {
+              const [min, max] = delayValue
+                .split('-')
+                .map(Number)
+                .filter((n) => !isNaN(n));
+              if (min !== undefined && max !== undefined) {
+                delay = Math.floor(Math.random() * (max - min + 1)) + min;
+              }
+            } else {
+              delay = Number(delayValue ?? 0);
+            }
+          }
+          if (delay > 0) {
+            await new Promise((resolve) => setTimeout(resolve, delay));
+          }
+
           // handler
           if (method === 'GET') {
             mock.handler(req, res, next);

src/funplugins/mock/mock.ts

@@ -1,3 +1,4 @@
+import type { Config } from '../../config/types';
 import type { Plugin } from '../../plugin/types';
 import { createMockMiddleware } from './createMockMiddleware';
 import { getMockData } from './getMockData';
@@ -11,6 +12,7 @@ export function mock(opts: MockOptions): Plugin {
       server.middlewares.use(
         createMockMiddleware({
           mocks,
+          config: this.config as Config,
         }),
       );
     },

src/funplugins/mock/types.ts

@@ -1,3 +1,5 @@
+import type { Config } from '../../config/types';
+
 export interface Mock {
   method: string;
   path: string;
@@ -13,4 +15,5 @@ export interface MockOptions {
 
 export interface MockData {
   mocks: Record<string, Mock>;
+  config?: Config;
 }