vite-plugin-mock-dev-server 1.1.0 → 1.1.2

package/README.md

@@ -40,6 +40,7 @@
 - 🍕 Support `viteConfig.define` in mock file.
 - ⚓️ Support `resolve.alias` in mock file.
 - 📤 Support `multipart` content-type，mock upload file.
+- 🍪 Support cookies
 - 🌈 Support `vite preview` mode
 - 🗂 Support building small independent deployable mock services.
 
@@ -193,6 +194,12 @@ export default defineConfig({
   })
   ```
 
+- `options.cookiesOptions`
+  
+  Configure to `cookies`, see [cookies](https://github.com/pillarjs/cookies#new-cookiesrequest-response--options)
+
+  **Default:** `{}`
+
 - `options.build`
   
   Configuration needed to build a small, independently deployable mock service.
@@ -335,15 +342,12 @@ export default defineMock({
 
   /**
    * response cookies
-   * @type Record<string, string | { value: string, option: CookieOption }>
+   * @type Record<string, string | [value: string, option: CookieOption]>
    * @see https://github.com/pillarjs/cookies#cookiessetname--values--options
    */
   cookies: {
     'your-cookie': 'your cookie value',
-    'cookie&option': {
-      value: 'cookie value',
-      option: { path: '/', httpOnly: true }
-    }
+    'cookie&option': ['cookie value', { path: '/', httpOnly: true }]
   },
 
   /**

package/README.zh-CN.md

@@ -41,6 +41,7 @@
 - 🍕 支持在 mock文件中使用 `viteConfig.define`配置字段
 - ⚓️ 支持 `resolve.alias`
 - 📤 支持 multipart 类型，模拟文件上传
+- 🍪 支持 cookies
 - 🌈 支持 `vite preview` 模式
 - 🗂 支持构建可独立部署的小型mock服务
 
@@ -189,6 +190,11 @@ export default defineConfig({
     }
   })
   ```
+- `options.cookiesOptions`
+  
+  配置 `cookies`, 查看 [cookies](https://github.com/pillarjs/cookies#new-cookiesrequest-response--options)
+
+  **默认值:** `{}`
 
 - `options.build`
   
@@ -328,15 +334,12 @@ export default defineMock({
 
   /**
    * 响应体 cookies
-   * @type Record<string, string | { value: string, option: CookieOption }>
+   * @type Record<string, string | [value: string, option: CookieOption]>
    * @see https://github.com/pillarjs/cookies#cookiessetname--values--options
    */
   cookies: {
     'your-cookie': 'your cookie value',
-    'cookie&option': {
-      value: 'cookie value',
-      option: { path: '/', httpOnly: true }
-    }
+    'cookie&option': ['cookie value', { path: '/', httpOnly: true }]
   },
 
   /**

package/dist/index.cjs

@@ -54,7 +54,7 @@ var import_vite = require("vite");
 
 // package.json
 var name = "vite-plugin-mock-dev-server";
-var version = "1.1.0";
+var version = "1.1.2";
 
 // src/esbuildPlugin.ts
 var import_promises = __toESM(require("fs/promises"), 1);
@@ -436,65 +436,53 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
     const mockUrl = Object.keys(mockData).find((key) => {
       return (0, import_path_to_regexp2.pathToRegexp)(key).test(pathname);
     });
-    if (!mockUrl) {
+    if (!mockUrl)
       return next();
-    }
     const reqBody = await parseReqBody(req, formidableOptions);
-    const cookies = new import_cookies.default(req, res, cookiesOptions);
     const method = req.method.toUpperCase();
-    const currentMock = fineMock(mockData[mockUrl], pathname, method, {
+    const mock = fineMock(mockData[mockUrl], pathname, method, {
       query,
       refererQuery,
       body: reqBody,
       headers: req.headers
     });
-    if (!currentMock)
+    if (!mock)
       return next();
     debug("middleware: ", method, pathname);
+    const cookies = new import_cookies.default(req, res, cookiesOptions);
     const request = req;
     const response = res;
     request.body = reqBody;
     request.query = query;
     request.refererQuery = refererQuery;
-    request.params = parseParams(currentMock.url, pathname);
+    request.params = parseParams(mock.url, pathname);
     request.getCookie = cookies.get.bind(cookies);
     response.setCookie = cookies.set.bind(cookies);
-    await provideHeaders(request, response, currentMock.headers);
-    await provideCookies(request, response, currentMock.cookies);
-    res.statusCode = currentMock.status || 200;
-    res.statusMessage = currentMock.statusText || getHTTPStatusText(res.statusCode);
-    if (currentMock.body) {
+    responseStatus(response, mock.status, mock.statusText);
+    await provideHeaders(request, response, mock.headers);
+    await provideCookies(request, response, mock.cookies);
+    const { body, delay, response: responseFn } = mock;
+    if (body) {
       try {
-        let body;
-        if (isFunction(currentMock.body)) {
-          body = await currentMock.body(request);
-        } else {
-          body = currentMock.body;
-        }
-        await realDelay(startTime, currentMock.delay);
-        res.end(JSON.stringify(body));
+        const result = isFunction(body) ? await body(request) : mock.body;
+        await realDelay(startTime, delay);
+        res.end(JSON.stringify(result));
       } catch (e) {
         log.error(`${import_picocolors2.default.red("[body error]")} ${req.url} 
 `, e);
-        res.statusCode = 500;
-        res.statusMessage = getHTTPStatusText(res.statusCode);
+        responseStatus(response, 500);
         res.end("");
       }
       return;
     }
-    if (currentMock.response) {
+    if (responseFn) {
       try {
-        const end = response.end.bind(response);
-        response.end = (...args) => {
-          realDelay(startTime, currentMock.delay).then(() => end(...args));
-          return response;
-        };
-        await currentMock.response(request, response, next);
+        await realDelay(startTime, delay);
+        await responseFn(request, response, next);
       } catch (e) {
         log.error(`${import_picocolors2.default.red("[response error]")} ${req.url} 
 `, e);
-        res.statusCode = 500;
-        res.statusMessage = getHTTPStatusText(res.statusCode);
+        responseStatus(response, 500);
         res.end("");
       }
       return;
@@ -522,6 +510,10 @@ function fineMock(mockList, pathname, method, request) {
     return hasMock;
   });
 }
+function responseStatus(response, status = 200, statusText) {
+  response.statusCode = status;
+  response.statusMessage = statusText || getHTTPStatusText(status);
+}
 async function provideHeaders(req, res, headersOption) {
   res.setHeader("Content-Type", "application/json");
   res.setHeader("Cache-Control", "no-cache,max-age=0");
@@ -545,11 +537,11 @@ async function provideCookies(req, res, cookiesOption) {
     const cookies = isFunction(cookiesOption) ? await cookiesOption(req) : cookiesOption;
     Object.keys(cookies).forEach((key) => {
       const optional = cookies[key];
-      if (typeof optional === "string") {
-        res.setCookie(key, optional);
-      } else {
-        const { value, options } = optional;
+      if (isArray(optional)) {
+        const [value, options] = optional;
         res.setCookie(key, value, options);
+      } else {
+        res.setCookie(key, optional);
       }
     });
   } catch (e) {

package/dist/index.d.ts

@@ -7,57 +7,72 @@ import chokidar from 'chokidar';
 
 interface MockServerPluginOptions {
     /**
+     * To configure the path matching rules for mock services,
+     * any request path starting with prefix will be intercepted and proxied.
+     * If the prefix starts with `^`, it will be recognized as a `RegExp`.
+     *
      * 为 mock 服务配置 路径匹配规则，任何请求路径以 prefix 开头的都将被拦截代理。
      * 如果 prefix 以 `^` 开头，将被识别为 `RegExp`。
-     *
      * @default []
+     * @example ['^/api']
      */
     prefix?: string | string[];
     /**
+     * glob string matching mock includes files
+     *
      * glob 字符串匹配 mock 包含的文件
-     * @see https://github.com/micromatch/picomatch#globbing-features
+     * @see [picomatch](https://github.com/micromatch/picomatch#globbing-features)
      * @default []
      */
     include?: string | string[];
     /**
-     * glob 字符串匹配 mock 过滤的文件
-     * @see https://github.com/micromatch/picomatch#globbing-features
+     * glob string matching mock excluded files
+     *
+     * glob 字符串匹配 mock 排除的文件
+     * @see [picomatch](https://github.com/micromatch/picomatch#globbing-features)
      */
     exclude?: string | string[];
     /**
+     * When the mock resource is hot updated, only the data content is updated,
+     * but the page is not refreshed by default.
+     * If you want to refresh the page every time you modify a mock file,
+     * you can open this option.
+     *
      * mock资源热更新时，仅更新了数据内容，但是默认不重新刷新页面。
      * 当你希望每次修改mock文件都刷新页面时，可以打开此选项。
-     *
      * @default false
      */
     reload?: boolean;
     /**
      * formidable options
-     * @see https://github.com/node-formidable/formidable#options
+     * @see [formidable](https://github.com/node-formidable/formidable#options)
      */
     formidableOptions?: formidable.Options;
     /**
      * cookies options
-     * @see https://github.com/pillarjs/cookies#new-cookiesrequest-response--options
+     * @see [cookies](https://github.com/pillarjs/cookies#new-cookiesrequest-response--options)
      */
     cookiesOptions?: Cookies.Option;
     /**
-     * 当需要构建一个小型mock服务时，可配置此项
+     * When you need to build a small mock service, you can configure this option.
      *
+     * 当需要构建一个小型mock服务时，可配置此项
      * @default false
      */
     build?: boolean | ServerBuildOption;
 }
 interface ServerBuildOption {
     /**
-     * 服务启动端口
+     * Service startup port
      *
+     * 服务启动端口
      * @default 8080
      */
     serverPort?: number;
     /**
-     * 服务应用输出目录
+     * Service application output directory
      *
+     * 服务应用输出目录
      * @default 'dist/mockServer'
      */
     dist?: string;
@@ -67,107 +82,221 @@ type Headers = http.IncomingHttpHeaders;
 type ResponseBody = Record<string, any> | any[] | string | number | null;
 interface ExtraRequest {
     /**
+     * The query string located after `?` in the request address has been parsed into JSON.
+     *
      * 请求地址中位于 `?` 后面的 queryString，已解析为 json
      */
     query: Record<string, any>;
     /**
+     * The queryString located after `?` in the referer request has been parsed as JSON.
+     *
      * 请求 referer 中位于 `?` 后面的 queryString，已解析为 json
      */
     refererQuery: Record<string, any>;
     /**
+     * Body data in the request
+     *
      * 请求体中 body 数据
      */
     body: Record<string, any>;
     /**
-     * 请求地址中，/api/id/:id 解析后的 params 参数
+     * The params parameter parsed from the `/api/id/:id` in the request address.
+     *
+     * 请求地址中，`/api/id/:id` 解析后的 params 参数
      */
     params: Record<string, any>;
     /**
+     * headers data in the request
      * 请求体中 headers
      */
     headers: Headers;
 }
 type MockRequest = Connect.IncomingMessage & ExtraRequest & {
+    /**
+     * @see [cookies](https://github.com/pillarjs/cookies#cookiesgetname--options)
+     */
     getCookie: (name: string, option?: Cookies.GetOption) => string | undefined;
 };
 type MockResponse = http.ServerResponse<http.IncomingMessage> & {
+    /**
+     * @see [cookies](https://github.com/pillarjs/cookies#cookiessetname--values--options)
+     */
     setCookie: (name: string, value?: string | null, option?: Cookies.SetOption) => void;
 };
 type ResponseBodyFn = (request: MockRequest) => ResponseBody | Promise<ResponseBody>;
 type ResponseHeaderFn = (request: MockRequest) => Headers | Promise<Headers>;
-type CookieValue = string | {
-    value: string;
-    options?: Cookies.SetOption;
-};
+type CookieValue = string | [string, Cookies.SetOption];
 type ResponseCookies = Record<string, CookieValue>;
 type ResponseCookiesFn = (request: MockRequest) => ResponseCookies | Promise<ResponseCookies>;
 interface MockOptionsItem {
     /**
-     * 需要做mock的接口地址，
-     * exp: `/api/login`, `/api/login/:id`
+     * The interface address that needs to be mocked,
+     * supported by `path-to-regexp` for path matching.
+     *
+     * 需要进行 mock 的接口地址, 由 `path-to-regexp` 提供路径匹配支持
+     * @see [path-to-regexp](https://github.com/pillarjs/path-to-regexp)
+     * @example
+     * ```txt
+     * /api/login
+     * /api/post/:id
+     * /api/post/:id
+     * ```
      */
     url: string;
     /**
-     * 该接口支持的 请求方法，默认同时支持 GET 和 POST
+     * The interface allows request methods, and by default allows both GET and POST.
      *
+     * 该接口允许的 请求方法，默认同时支持 GET 和 POST
      * @default ['POST','GET']
      */
     method?: Method | Method[];
     /**
+     * Whether to enable mock for this interface.
+     * In most scenarios, we only need to mock some interfaces instead of all requests that
+     * have been configured with mock.
+     * Therefore, it is important to be able to configure whether to enable it or not.
+     *
      * 是否启动对该接口的mock，在多数场景下，我们进需要对部分接口进行 mock，
      * 而不是对所有配置了mock的请求进行全量mock，所以是否能够配置是否启用很重要
-     *
      * @default true
      */
     enabled?: boolean;
     /**
-     * 配置响应体 header
+     * Configure the response body headers
      *
-     * @default {'Content-Type':'application/json'}
+     * 配置响应体 headers
+     * @default
+     * ```json
+     * { "Content-Type": "application/json" }
+     * ```
      */
     headers?: Headers | ResponseHeaderFn;
     /**
-     * 配置 响应头状态码
+     * Configure Response Header Status Code
      *
+     * 配置 响应头状态码
      * @default 200
      */
     status?: number;
     /**
-     * 配置响应头状态文本
+     * Configure response header status text
      *
+     * 配置响应头状态文本
      * @default 'OK'
      */
     statusText?: string;
     /**
-     * 配置响应延迟时间, 单位： `ms`
+     * Configure response delay time, unit: `ms`
      *
+     * 配置响应延迟时间, 单位： `ms`
      * @default 0
      */
     delay?: number;
     /**
+     * Configure response body cookies
+     *
      * 设置响应体 cookies
+     * @example
+     * ```ts
+     * export default {
+     *   cookies: {
+     *     'token1': '1234567',
+     *     'token2': ['1234567', { path: '/' }],
+     *   },
+     * }
+     * ```
+     * @example
+     * ```ts
+     * export default {
+     *   cookies: function (request) {
+     *     return {
+     *       'token1': '1234567',
+     *       'token2': ['1234567', { path: '/' }],
+     *     }
+     *   },
+     * }
+     * ```
      */
     cookies?: ResponseCookies | ResponseCookiesFn;
     /**
-     * 配置响应体数据内容
+     * Configure response body data content
      *
-     * @default {}
+     * 配置响应体数据内容
+     * @default ''
+     * @example
+     * ```ts
+     * export default {
+     *   body: { a: 1 },
+     * }
+     * ```
+     * @example
+     * ```ts
+     * export default {
+     *   body: function(request) {
+     *     return { a: 1, query: request.query }
+     *   },
+     * }
+     * ```
      */
     body?: ResponseBody | ResponseBodyFn;
     /**
+     * If you need to set complex response content, you can use the response method,
+     * which is a middleware. Here, you can get information such as req
+     * and res of the http request,
+     * and then return response data through res.write() | res.end().
+     * Otherwise, you need to execute next() method.
+     * In `req`, you can also get parsed request information such as
+     * `query`, `params`, `body` and `refererQuery`.
+     *
      * 如果需要设置复杂的响应内容，可以使用 response 方法，
      * 该方法是一个 middleware，你可以在这里拿到 http 请求的 req、res等信息，
-     * 然后通过 res.write() | res.end() 返回响应数据， 否则执行 next() 方法。
+     * 然后通过 res.write() | res.end() 返回响应数据， 否则需要执行 next() 方法。
+     * 在 `req` 中，还可以拿到 query、params、body, refererQuery 等已解析的请求信息。
+     *
+     * @see [connect](https://github.com/senchalabs/connect#appusefn)
+     * @example
+     * ```ts
+     * export default {
+     *   response(req, res) {
+     *     res.setHeader('Content-Type', 'application/json')
+     *     res.end(JSON.stringify({ a: 1 }))
+     *   },
+     * }
+     * ```
      *
-     * 在 req 中，还可以拿到 query、params、body等已解析的请求信息
      */
     response?: (req: MockRequest, res: MockResponse, next: Connect.NextFunction) => void | Promise<void>;
     /**
+     * Request Validator
+     *
+     * Sometimes, for the same API request, data needs to be returned based
+     * on different request parameters.
+     * However, if all of this is written in a single mock's body or response,
+     * the content can become cumbersome and difficult to manage.
+     * The function of a validator allows you to configure multiple mocks with
+     * the same URL simultaneously and determine which mock should be used through validation.
+     *
      * 请求验证器
      *
      * 有时候，一个相同的API请求，需要根据不同的请求参数，来决定返回数据，
      * 但全部都在单个 mock中的 body或者 response 中写，内容会很庞杂，不好管理，
      * 验证器的功能，允许你同时配置多条相同url的mock，通过验证器来判断使哪个mock生效。
+     * @example
+     * ```ts
+     * export default {
+     *   validator: {
+     *     query: { id: 123 }
+     *   }
+     * }
+     * ```
+     * @example
+     * ```ts
+     * export default {
+     *   validator: function(request) {
+     *     return request.query.id === 123
+     *   }
+     * }
+     * ```
      */
     validator?: Partial<ExtraRequest> | ((request: ExtraRequest) => boolean);
 }

package/dist/index.js

@@ -9,7 +9,7 @@ import { createFilter, normalizePath } from "vite";
 
 // package.json
 var name = "vite-plugin-mock-dev-server";
-var version = "1.1.0";
+var version = "1.1.2";
 
 // src/esbuildPlugin.ts
 import fsp from "fs/promises";
@@ -391,65 +391,53 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
     const mockUrl = Object.keys(mockData).find((key) => {
       return pathToRegexp(key).test(pathname);
     });
-    if (!mockUrl) {
+    if (!mockUrl)
       return next();
-    }
     const reqBody = await parseReqBody(req, formidableOptions);
-    const cookies = new Cookies(req, res, cookiesOptions);
     const method = req.method.toUpperCase();
-    const currentMock = fineMock(mockData[mockUrl], pathname, method, {
+    const mock = fineMock(mockData[mockUrl], pathname, method, {
       query,
       refererQuery,
       body: reqBody,
       headers: req.headers
     });
-    if (!currentMock)
+    if (!mock)
       return next();
     debug("middleware: ", method, pathname);
+    const cookies = new Cookies(req, res, cookiesOptions);
     const request = req;
     const response = res;
     request.body = reqBody;
     request.query = query;
     request.refererQuery = refererQuery;
-    request.params = parseParams(currentMock.url, pathname);
+    request.params = parseParams(mock.url, pathname);
     request.getCookie = cookies.get.bind(cookies);
     response.setCookie = cookies.set.bind(cookies);
-    await provideHeaders(request, response, currentMock.headers);
-    await provideCookies(request, response, currentMock.cookies);
-    res.statusCode = currentMock.status || 200;
-    res.statusMessage = currentMock.statusText || getHTTPStatusText(res.statusCode);
-    if (currentMock.body) {
+    responseStatus(response, mock.status, mock.statusText);
+    await provideHeaders(request, response, mock.headers);
+    await provideCookies(request, response, mock.cookies);
+    const { body, delay, response: responseFn } = mock;
+    if (body) {
       try {
-        let body;
-        if (isFunction(currentMock.body)) {
-          body = await currentMock.body(request);
-        } else {
-          body = currentMock.body;
-        }
-        await realDelay(startTime, currentMock.delay);
-        res.end(JSON.stringify(body));
+        const result = isFunction(body) ? await body(request) : mock.body;
+        await realDelay(startTime, delay);
+        res.end(JSON.stringify(result));
       } catch (e) {
         log.error(`${colors2.red("[body error]")} ${req.url} 
 `, e);
-        res.statusCode = 500;
-        res.statusMessage = getHTTPStatusText(res.statusCode);
+        responseStatus(response, 500);
         res.end("");
       }
       return;
     }
-    if (currentMock.response) {
+    if (responseFn) {
       try {
-        const end = response.end.bind(response);
-        response.end = (...args) => {
-          realDelay(startTime, currentMock.delay).then(() => end(...args));
-          return response;
-        };
-        await currentMock.response(request, response, next);
+        await realDelay(startTime, delay);
+        await responseFn(request, response, next);
       } catch (e) {
         log.error(`${colors2.red("[response error]")} ${req.url} 
 `, e);
-        res.statusCode = 500;
-        res.statusMessage = getHTTPStatusText(res.statusCode);
+        responseStatus(response, 500);
         res.end("");
       }
       return;
@@ -477,6 +465,10 @@ function fineMock(mockList, pathname, method, request) {
     return hasMock;
   });
 }
+function responseStatus(response, status = 200, statusText) {
+  response.statusCode = status;
+  response.statusMessage = statusText || getHTTPStatusText(status);
+}
 async function provideHeaders(req, res, headersOption) {
   res.setHeader("Content-Type", "application/json");
   res.setHeader("Cache-Control", "no-cache,max-age=0");
@@ -500,11 +492,11 @@ async function provideCookies(req, res, cookiesOption) {
     const cookies = isFunction(cookiesOption) ? await cookiesOption(req) : cookiesOption;
     Object.keys(cookies).forEach((key) => {
       const optional = cookies[key];
-      if (typeof optional === "string") {
-        res.setCookie(key, optional);
-      } else {
-        const { value, options } = optional;
+      if (isArray(optional)) {
+        const [value, options] = optional;
         res.setCookie(key, value, options);
+      } else {
+        res.setCookie(key, optional);
       }
     });
   } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-mock-dev-server",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "keywords": [
     "vite",
     "plugin",
@@ -66,7 +66,7 @@
   "peerDependencies": {
     "vite": ">=3.0.0"
   },
-  "packageManager": "pnpm@7.26.3",
+  "packageManager": "pnpm@8.3.1",
   "engines": {
     "node": "^14.18.0 || >=16"
   },