feat: mock msw

examples/mock/mock/app.ts

@@ -0,0 +1,99 @@
+import { Request, Response } from 'express';
+import { umimock2msw } from './umimock2msw';
+
+export default umimock2msw({
+  'POST /api/hello': {
+    text: 'Alita',
+  },
+  'POST /api/list': (req: Request, res: Response) => {
+    const dataSource = [
+      {
+        id: 1,
+        title: 'Ant Design Title 1',
+      },
+      {
+        id: 2,
+        title: 'Ant Design Title 2',
+      },
+      {
+        id: 3,
+        title: 'Ant Design Title 3',
+      },
+      {
+        id: 4,
+        title: 'Ant Design Title 4',
+      },
+      {
+        id: 5,
+        title: 'Ant Design Title 5',
+      },
+      {
+        id: 6,
+        title: 'Ant Design Title 6',
+      },
+      {
+        id: 7,
+        title: 'Ant Design Title 7',
+      },
+      {
+        id: 8,
+        title: 'Ant Design Title 8',
+      },
+      {
+        id: 9,
+        title: 'Ant Design Title 9',
+      },
+      {
+        id: 10,
+        title: 'Ant Design Title 10',
+      },
+      {
+        id: 11,
+        title: 'Ant Design Title 11',
+      },
+      {
+        id: 12,
+        title: 'Ant Design Title 12',
+      },
+      {
+        id: 13,
+        title: 'Ant Design Title 13',
+      },
+      {
+        id: 14,
+        title: 'Ant Design Title 14',
+      },
+      {
+        id: 15,
+        title: 'Ant Design Title 15',
+      },
+      {
+        id: 16,
+        title: 'Ant Design Title 16',
+      },
+      {
+        id: 17,
+        title: 'Ant Design Title 17',
+      },
+      {
+        id: 18,
+        title: 'Ant Design Title 18',
+      },
+      {
+        id: 19,
+        title: 'Ant Design Title 19',
+      },
+      {
+        id: 20,
+        title: 'Ant Design Title 20',
+      },
+    ];
+    const { body } = req;
+
+    const { pageSize, offset } = body;
+    return res.json({
+      total: dataSource.length,
+      data: dataSource.slice(offset, offset + pageSize),
+    });
+  },
+});

examples/mock/mock/browser.ts

@@ -0,0 +1,5 @@
+import { setupWorker } from 'msw/browser';
+import app from './app';
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers, ...app);

examples/mock/mock/handlers.ts

@@ -0,0 +1,27 @@
+import { HttpResponse, graphql, http } from 'msw';
+
+export const handlers = [
+  http.get('/user', () => {
+    return HttpResponse.json({
+      firstName: 'John',
+      lastName: 'Maverick',
+    });
+  }),
+  graphql.query('ListMovies', () => {
+    return HttpResponse.json({
+      data: {
+        movies: [
+          {
+            title: 'The Lord of The Rings',
+          },
+          {
+            title: 'The Matrix',
+          },
+          {
+            title: 'Star Wars: The Empire Strikes Back',
+          },
+        ],
+      },
+    });
+  }),
+];

examples/mock/mock/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+export const server = setupServer(...handlers);

examples/mock/mock/umimock2msw.ts

@@ -0,0 +1,74 @@
+import assert from 'assert';
+import { HttpResponse, http } from 'msw';
+
+export const VALID_METHODS = [
+  'GET',
+  'POST',
+  'PUT',
+  'DELETE',
+  'PATCH',
+  'HEAD',
+  'OPTIONS',
+];
+export const DEFAULT_METHOD = 'GET';
+export const MOCK_FILE_GLOB = '**/*.[jt]s';
+
+export interface IMock {
+  method: string;
+  path: string;
+  handler: Function;
+  file?: string;
+}
+
+function getMock(opts: { key: string; obj: any }): IMock {
+  const { method, path } = parseKey(opts.key);
+  const handler = opts.obj[opts.key];
+  return { method, path, handler };
+}
+
+function parseKey(key: string) {
+  const spliced = key.split(/\s+/);
+  const len = spliced.length;
+  if (len === 1) {
+    return { method: DEFAULT_METHOD, path: key };
+  } else {
+    const [method = 'GET', path] = spliced;
+    const upperCaseMethod = method.toUpperCase();
+    assert(
+      VALID_METHODS.includes(upperCaseMethod),
+      `method ${method} is not supported`,
+    );
+    assert(path, `${key}, path is undefined`);
+
+    return { method: upperCaseMethod, path };
+  }
+}
+
+export const umimock2msw = (umiMock: any) => {
+  const handlers = [];
+  for (const key of Object.keys(umiMock)) {
+    const mock = getMock({ key, obj: umiMock });
+    if (typeof mock.handler === 'function') {
+      // handler
+      const upperCaseMethod = mock.method.toLowerCase();
+      handlers.push(
+        // @ts-ignore
+        http[upperCaseMethod](mock.path, async ({ request }) => {
+          const data = await request.json();
+          // FIXME: 这里只是做了兼容
+          const req = {
+            body: data,
+          };
+          return mock.handler(req, HttpResponse);
+        }),
+      );
+    } else {
+      handlers.push(
+        http.get(mock.path, () => {
+          return HttpResponse.json(mock.handler);
+        }),
+      );
+    }
+  }
+  return handlers;
+};

examples/mock/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@examples/mock",
+  "private": true,
+  "scripts": {
+    "build": "tnf build",
+    "dev": "tnf dev"
+  },
+  "dependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@umijs/tnf": "workspace:*",
+    "msw": "^2.6.0"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}

examples/mock/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="/client.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/client.js"></script>
+  </body>
+</html>