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

package/README.md

@@ -260,11 +260,12 @@ export default defineApiMock({
 export default defineMock({
   /**
    * Request address, supports the `/api/user/:id` format.
+   * The plugin matches the path through `path-to-regexp`.
+   * @see https://github.com/pillarjs/path-to-regexp
    */
   url: '/api/test',
   /**
    * Supported request methods of the interface.
-   * 
    * @type string | string[]
    * @default ['POST','GET']
    * 
@@ -282,13 +283,11 @@ export default defineMock({
   enable: true,
   /**
    * Set interface response delay, unit: ms.
-   * 
    * @default 0
    */
   delay: 1000,
   /**
    * response status
-   * 
    * @default 200
    */
   status: 200,
@@ -309,8 +308,8 @@ export default defineMock({
    * then the validation method is to strictly compare whether the `value` 
    * of each `key` in headers/body/query/params in the request interface is exactly equal. 
    * If they are all equal, then the validation passes.
-   * 
    * @type ({ headers: object; body: object; query: object; params: object; refererQuery: object }) => boolean
+   *
    * If the validator passed in is a function, 
    * then the data related to the requested interface will be provided as input parameters 
    * for users to perform custom validation and return a boolean.
@@ -329,11 +328,8 @@ export default defineMock({
     refererQuery: {}
   },
   /**
-   * 
    * response headers
-   * 
    * @type Record<string, any>
-   * 
    * @type (({ query, body, params, headers }) => Record<string, any>)
    */
   headers: {
@@ -349,17 +345,28 @@ export default defineMock({
     'your-cookie': 'your cookie value',
     'cookie&option': ['cookie value', { path: '/', httpOnly: true }]
   },
+  /**
+   * Response body data type, optional values include `text, json, buffer`.
+   * And also support types included in `mime-db`.
+   * When the response body returns a file and you are not sure which type to use,
+   * you can pass the file name as the value. The plugin will internally search for matching
+   * `content-type` based on the file name suffix.
+   * However, if it is a TypeScript file such as `a.ts`, it may not be correctly matched
+   * as a JavaScript script. You need to modify `a.ts` to `a.js` as the value passed
+   * in order to recognize it correctly.
+   * @see https://github.com/jshttp/mime-db
+   * @default 'json'
+   */
+  type: 'json',
 
   /**
    * Response Body
-   * Support `string/number/array/object` 
+   * Support `string/number/array/object/buffer/ReadableStream` 
    * You can also use libraries such as' mockjs' to generate data content
-   * 
-   * @type string | number | array | object
-   * 
+   * @type string | number | array | object | ReadableStream | buffer
    * @type (request: { headers, query, body, params, refererQuery, getCookie }) => any | Promise<any>
    */
-  body: {},
+  body: '',
 
   /**
    * If the mock requirement cannot be solved through `body` configuration, 
@@ -408,37 +415,35 @@ type Response = http.ServerResponse<http.IncomingMessage> & {
 ```
 
 
-> Tips：
+> **Tips：**
 > 
 > If you write mock files using json/json5, 
 > the 'response' method is not supported, 
 > as is the function form that uses other fields.
 
+## Example
+
 `mock/**/*.mock.{ts,js,mjs,cjs,json,json5}`
 
 See more examples： [example](/example/)
 
-#### Example 1：
-Match `/api/test`，And returns a response body content with empty data
+**exp:** Match `/api/test`，And returns a response body content with empty data
 ```ts
 export default defineMock({
   url: '/api/test',
 })
 ```
 
-#### Example 2：
-Match `/api/test` ，And returns a static content data
+**exp:** Match `/api/test` ，And returns a static content data
 ```ts
 export default defineMock({
   url: '/api/test',
-  body: {
-    a: 1
-  }
+  body: { a: 1 },
 })
 ```
 
-#### Example 3：
-Only Support `GET` Method
+
+**exp:** Only Support `GET` Method
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -446,69 +451,56 @@ export default defineMock({
 })
 ```
 
-#### Example 4：
-In the response header, add a custom header
+**exp:** In the response header, add a custom header and cookie
 ```ts
 export default defineMock({
   url: '/api/test',
-  headers: {
-    'X-Custom': '12345678'
-  }
+  headers: { 'X-Custom': '12345678' },
+  cookies: { 'my-cookie': '123456789' },
 })
 ```
 ```ts
 export default defineMock({
   url: '/api/test',
   headers({ query, body, params, headers }) {
-    return {
-      'X-Custom': query.custom
-    }
+    return { 'X-Custom': query.custom }
+  },
+  cookies() {
+    return { 'my-cookie': '123456789' }
   }
 })
 ```
 
-#### Example 5：
-Define multiple mock requests for the same url and match valid rules with validators
+
+**exp:** Define multiple mock requests for the same url and match valid rules with validators
 ```ts
 export default defineMock([
   // Match /api/test?a=1
   {
     url: '/api/test',
     validator: {
-      query: {
-        a: 1
-      }
+      query: { a: 1 },
     },
-    body: {
-      message: 'query.a == 1'
-    }
+    body: { message: 'query.a == 1' },
   },
   // Match /api/test?a=2
   {
     url: '/api/test',
     validator: {
-      query: {
-        a: 2
-      }
+      query: { a: 2 },
     },
-    body: {
-      message: 'query.a == 2'
-    }
+    body: { message: 'query.a == 2' },
   },
   {
-    /**
-     * `?a=3` will resolve to `validator.query`
-     */
+    // `?a=3` will resolve to `validator.query`
     url: '/api/test?a=3',
-    body: {
-      message: 'query.a == 3'
-    }
+    body: { message: 'query.a == 3' }
   }
 ])
 ```
 
-#### Example 6：
-Response Delay
+
+**exp:** Response Delay
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -516,8 +508,8 @@ export default defineMock({
 })
 ```
 
-#### Example 7：
-The interface request failed
+
+**exp:** The interface request failed
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -526,23 +518,57 @@ export default defineMock({
 })
 ```
 
-#### Example 8:
-Dynamic route matching
+
+**exp:** Dynamic route matching
 ```ts
 export default defineMock({
   url: '/api/user/:userId',
   body({ params }) {
-    return {
-      userId: params.userId,
-    }
+    return { userId: params.userId }
   }
 })
 ```
 
 The `userId` in the route will be resolved into the `request.params` object.
 
-#### Example 9：
-Use `mockjs`:
+**exp:** Use buffer to respond data
+```ts
+// Since the default value of type is json,
+// although buffer is used for body during transmission,
+// the content-type is still json.
+export default defineMock({
+  url: 'api/buffer',
+  body: Buffer.from(JSON.stringify({ a: 1 }))
+})
+```
+```ts
+// When the type is buffer, the content-type is application/octet-stream.
+// The data passed in through body will be converted to a buffer.
+export default defineMock({
+  url: 'api/buffer',
+  type: 'buffer',
+  // Convert using Buffer.from(body) for internal use
+  body: { a: 1 }
+})
+```
+
+**exp:** Response file type
+
+Simulate file download, pass in the file reading stream.
+```ts
+import { createReadStream } from 'node:fs'
+export default defineMock({
+  url: '/api/download',
+  // When you are unsure of the type, you can pass in the file name for internal parsing by the plugin.
+  type: 'my-app.dmg',
+  body: createReadStream('./my-app.dmg')
+})
+```
+```html
+<a href="/api/download" download="my-app.dmg">Download File</a>
+```
+
+**exp:** Use `mockjs`:
 ```ts
 import Mock from 'mockjs'
 export default defineMock({
@@ -556,8 +582,8 @@ export default defineMock({
 ```
 You need installed `mockjs`
 
-### Example 10：
-Use `response` to customize the response
+
+**exp:** Use `response` to customize the response
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -576,11 +602,10 @@ export default defineMock({
 })
 ```
 
-### Example 11：
-Use json / json5
+
+**exp:** Use json / json5
 ```json
 {
-  // Support comment
   "url": "/api/test",
   "body": {
     "a": 1
@@ -588,9 +613,9 @@ Use json / json5
 }
 ```
 
-### Example 12:
 
-multipart, upload file.
+
+**exp:** multipart, upload file.
 
 use [`formidable`](https://www.npmjs.com/package/formidable#readme) to supported.
 ``` html

package/README.zh-CN.md

@@ -255,12 +255,13 @@ export default defineApiMock({
 ```ts
 export default defineMock({
   /**
-   * 请求地址，支持 `/api/user/:id` 格式 
+   * 请求地址，支持 `/api/user/:id` 格式
+   * 插件通过 `path-to-regexp` 匹配路径
+   * @see https://github.com/pillarjs/path-to-regexp
    */
   url: '/api/test',
   /**
    * 接口支持的请求方法
-   * 
    * @type string | string[]
    * @default ['POST','GET']
    * 
@@ -268,23 +269,19 @@ export default defineMock({
   method: ['GET', 'POST'],
   /**
    * 是否启用当前 mock请求
-   * 
    * 在实际场景中，我们一般只需要某几个mock接口生效，
    * 而不是所以mock接口都启用。
    * 对当前不需要mock的接口，可设置为 false
-   * 
    * @default true
    */
   enable: true,
   /**
    * 设置接口响应延迟， 单位：ms
-   * 
    * @default 0
    */
   delay: 1000,
   /**
    * 响应状态码
-   * 
    * @default 200
    */
   status: 200,
@@ -320,11 +317,8 @@ export default defineMock({
     refererQuery: {}
   },
   /**
-   * 
    * 响应状态 headers
-   * 
    * @type Record<string, any>
-   * 
    * @type (({ query, body, params, headers }) => Record<string, any>)
    * 入参部分为 请求相关信息
    */
@@ -342,6 +336,18 @@ export default defineMock({
     'cookie&option': ['cookie value', { path: '/', httpOnly: true }]
   },
 
+  /**
+   * 响应体数据类型, 可选值包括 `text, json, buffer`，
+   * 还支持`mime-db`中的包含的类型。
+   * 当响应体返回的是一个文件，而你不确定应该使用哪个类型时，可以将文件名作为值传入，
+   * 插件内部会根据文件名后缀查找匹配的`content-type`。
+   * 但如果是 `typescript`文件如 `a.ts`，可能不会被正确匹配为 `javascript`脚本，
+   * 你需要将 `a.ts` 修改为 `a.js`作为值传入才能正确识别。
+   * @see https://github.com/jshttp/mime-db
+   * @default 'json'
+   */
+  type: 'json',
+
   /**
    * 响应体数据
    * 定义返回的响应体数据内容。
@@ -360,10 +366,8 @@ export default defineMock({
    * 如果通过 body 配置不能解决mock需求，
    * 那么可以通过 配置 response，暴露http server 的接口，
    * 实现完全可控的自定义配置
-   * 
    * 在 req参数中，已内置了 query、body、params 的解析，
-   * 你可以直接使用它们
-   * 
+   * 你可以直接使用它们。
    * 别忘了，需要通过 `res.end()` 返回响应体数据，
    * 或者需要跳过mock，那么别忘了调用 `next()`
    */
@@ -407,35 +411,38 @@ type Response = http.ServerResponse<http.IncomingMessage> & {
 ```
 
 
-> 注意：
+> **注意：**
 > 
 > 如果使用 json/json5 编写 mock文件，则不支持使用 `response` 方法，以及不支持使用其他字段的函数形式。
 
+## Example
+
 `mock/**/*.mock.{ts,js,mjs,cjs,json,json5}`
 
 查看更多示例： [example](/example/)
 
-#### 示例1：
-命中 `/api/test` 请求，并返回一个 数据为空的响应体内容
+**exp:** 命中 `/api/test` 请求，并返回一个 数据为空的响应体内容
 ```ts
 export default defineMock({
   url: '/api/test',
 })
 ```
 
-#### 示例2：
-命中 `/api/test` 请求，并返回一个固定内容数据
+**exp:** 命中 `/api/test` 请求，并返回一个固定内容数据
 ```ts
 export default defineMock({
   url: '/api/test',
-  body: {
-    a: 1
-  }
+  body: { a: 1 },
+})
+```
+```ts
+export default defineMock({
+  url: '/api/test',
+  body: () => ({ a: 1 })
 })
 ```
 
-#### 示例3：
-限定只允许 `GET` 请求
+**exp:** 限定只允许 `GET` 请求
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -443,69 +450,56 @@ export default defineMock({
 })
 ```
 
-#### 示例4：
-在返回的响应头中，添加自定义header
+
+**exp:**  在返回的响应头中，添加自定义 header 和 cookie
 ```ts
 export default defineMock({
   url: '/api/test',
-  headers: {
-    'X-Custom': '12345678'
-  }
+  headers: { 'X-Custom': '12345678' },
+  cookies: { 'my-cookie': '123456789' },
 })
 ```
 ```ts
 export default defineMock({
   url: '/api/test',
   headers({ query, body, params, headers }) {
-    return {
-      'X-Custom': query.custom
-    }
+    return { 'X-Custom': query.custom }
+  },
+  cookies() {
+    return { 'my-cookie': '123456789' }
   }
 })
 ```
 
-#### 示例5：
-定义多个相同url请求mock，并使用验证器匹配生效规则
+**exp:**  定义多个相同url请求mock，并使用验证器匹配生效规则
 ```ts
 export default defineMock([
   // 命中 /api/test?a=1
   {
     url: '/api/test',
     validator: {
-      query: {
-        a: 1
-      }
+      query: { a: 1 },
     },
-    body: {
-      message: 'query.a === 1'
-    }
+    body: { message: 'query.a === 1' },
   },
   // 命中 /api/test?a=2
   {
     url: '/api/test',
     validator: {
-      query: {
-        a: 2
-      }
+      query: { a: 2 },
     },
-    body: {
-      message: 'query.a === 2'
-    }
+    body: { message: 'query.a === 2' },
   },
   {
-    /**
-     * `?a=3` 将会解析到 `validator.query`
-     */
+    // `?a=3` 将会解析到 `validator.query`
     url: '/api/test?a=3',
-    body: {
-      message: 'query.a == 3'
-    }
+    body: { message: 'query.a == 3' },
   }
 ])
 ```
 
-#### 示例6：
-延迟接口响应：
+
+**exp:**  延迟接口响应：
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -513,33 +507,64 @@ export default defineMock({
 })
 ```
 
-#### 示例7：
-使接口请求失败
+**exp:**  使接口请求失败
 ```ts
 export default defineMock({
   url: '/api/test',
-  status: 504,
+  status: 502,
   statusText: 'Bad Gateway'
 })
 ```
 
-#### 示例8:
-动态路由匹配
+**exp:** 动态路由匹配
 ```ts
 export default defineMock({
   url: '/api/user/:userId',
   body({ params }) {
-    return {
-      userId: params.userId,
-    }
+    return { userId: params.userId }
   }
 })
 ```
 
 路由中的 `userId`将会解析到 `request.params` 对象中.
 
-#### 示例9：
-使用 `mockjs` 生成响应数据:
+**exp:** 使用 buffer 响应数据
+```ts
+// 由于 type 默认值是 json，虽然在传输过程中body使用buffer，
+// 但是 content-type 还是为 json
+export default defineMock({
+  url: 'api/buffer',
+  body: Buffer.from(JSON.stringify({ a: 1 }))
+})
+```
+```ts
+// 当 type 为 buffer 时，content-type 为 application/octet-stream，
+// body 传入的数据会被转为 buffer
+export default defineMock({
+  url: 'api/buffer',
+  type: 'buffer',
+  // 内部使用 Buffer.from(body) 进行转换 
+  body: { a: 1 }
+})
+```
+
+**exp:** 响应文件类型
+
+模拟文件下载，传入文件读取流
+```ts
+import { createReadStream } from 'node:fs'
+export default defineMock({
+  url: '/api/download',
+  // 当你不确定类型，可传入文件名由插件内部进行解析
+  type: 'my-app.dmg',
+  body: createReadStream('./my-app.dmg')
+})
+```
+```html
+<a href="/api/download" download="my-app.dmg">下载文件</a>
+```
+
+**exp:** 使用 `mockjs` 生成响应数据:
 ```ts
 import Mock from 'mockjs'
 export default defineMock({
@@ -553,8 +578,8 @@ export default defineMock({
 ```
 请先安装 `mockjs`
 
-### 示例10：
-使用 `response` 自定义响应
+
+**exp:** 使用 `response` 自定义响应
 ```ts
 export default defineMock({
   url: '/api/test',
@@ -573,11 +598,10 @@ export default defineMock({
 })
 ```
 
-### 示例11：
-使用 json / json5
+
+**exp:** 使用 json / json5
 ```json
 {
-  // 支持 comment
   "url": "/api/test",
   "body": {
     "a": 1
@@ -585,9 +609,8 @@ export default defineMock({
 }
 ```
 
-### Example 12:
 
-multipart, 文件上传.
+**exp:** multipart, 文件上传.
 
 通过 [`formidable`](https://www.npmjs.com/package/formidable#readme) 支持。
 ``` html

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.2";
+var version = "1.1.3";
 
 // src/esbuildPlugin.ts
 var import_promises = __toESM(require("fs/promises"), 1);
@@ -141,6 +141,8 @@ var import_path_to_regexp = require("path-to-regexp");
 var import_picocolors = __toESM(require("picocolors"), 1);
 var isArray = (val) => Array.isArray(val);
 var isFunction = (val) => typeof val === "function";
+var isStream = (stream) => stream !== null && typeof stream === "object" && typeof stream.pipe === "function";
+var isReadableStream = (stream) => isStream(stream) && stream.readable !== false && typeof stream._read === "function" && typeof stream._readableState === "object";
 function sleep(timeout) {
   return new Promise((resolve) => setTimeout(resolve, timeout));
 }
@@ -180,8 +182,9 @@ function lookupFile(dir, formats, options) {
 }
 var ensureProxies = (serverProxy = {}) => {
   const proxies = Object.keys(serverProxy).map((key) => {
+    var _a, _b;
     const value = serverProxy[key];
-    return typeof value === "string" ? key : value.ws === true ? "" : key;
+    return typeof value === "string" ? key : value.ws || ((_a = value.target) == null ? void 0 : _a.toString().startsWith("ws:")) || ((_b = value.target) == null ? void 0 : _b.toString().startsWith("wss:")) ? "" : key;
   }).filter(Boolean);
   return proxies;
 };
@@ -363,9 +366,11 @@ async function buildMockEntry(inputFile, define, alias) {
 }
 
 // src/baseMiddleware.ts
+var import_node_buffer = require("buffer");
 var import_node_url2 = require("url");
 var import_cookies = __toESM(require("cookies"), 1);
 var import_http_status = __toESM(require("http-status"), 1);
+var mime = __toESM(require("mime-types"), 1);
 var import_path_to_regexp2 = require("path-to-regexp");
 var import_picocolors2 = __toESM(require("picocolors"), 1);
 
@@ -428,7 +433,6 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
   return async function(req, res, next) {
     const startTime = Date.now();
     const { query, pathname } = (0, import_node_url2.parse)(req.url, true);
-    const { query: refererQuery } = (0, import_node_url2.parse)(req.headers.referer || "", true);
     if (!pathname || proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
       return next();
     }
@@ -438,6 +442,7 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
     });
     if (!mockUrl)
       return next();
+    const { query: refererQuery } = (0, import_node_url2.parse)(req.headers.referer || "", true);
     const reqBody = await parseReqBody(req, formidableOptions);
     const method = req.method.toUpperCase();
     const mock = fineMock(mockData[mockUrl], pathname, method, {
@@ -458,15 +463,22 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
     request.params = parseParams(mock.url, pathname);
     request.getCookie = cookies.get.bind(cookies);
     response.setCookie = cookies.set.bind(cookies);
-    responseStatus(response, mock.status, mock.statusText);
-    await provideHeaders(request, response, mock.headers);
-    await provideCookies(request, response, mock.cookies);
-    const { body, delay, response: responseFn } = mock;
+    const {
+      body,
+      delay,
+      type = "json",
+      response: responseFn,
+      status = 200,
+      statusText
+    } = mock;
+    responseStatus(response, status, statusText);
+    await provideHeaders(request, response, mock);
+    await provideCookies(request, response, mock);
     if (body) {
       try {
-        const result = isFunction(body) ? await body(request) : mock.body;
+        const content = isFunction(body) ? await body(request) : body;
         await realDelay(startTime, delay);
-        res.end(JSON.stringify(result));
+        sendData(response, content, type);
       } catch (e) {
         log.error(`${import_picocolors2.default.red("[body error]")} ${req.url} 
 `, e);
@@ -514,34 +526,35 @@ 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");
+async function provideHeaders(req, res, { headers, type = "json" }) {
+  const contentType2 = mime.contentType(type) || mime.contentType(mime.lookup(type) || "");
+  contentType2 && res.setHeader("Content-Type", contentType2);
   res.setHeader("Cache-Control", "no-cache,max-age=0");
   res.setHeader("X-Mock", "generate by vite:plugin-mock-dev-server");
-  if (!headersOption)
+  if (!headers)
     return;
   try {
-    const headers = isFunction(headersOption) ? await headersOption(req) : headersOption;
-    Object.keys(headers).forEach((key) => {
-      res.setHeader(key, headers[key]);
+    const raw = isFunction(headers) ? await headers(req) : headers;
+    Object.keys(raw).forEach((key) => {
+      res.setHeader(key, raw[key]);
     });
   } catch (e) {
     log.error(`${import_picocolors2.default.red("[headers error]")} ${req.url} 
 `, e);
   }
 }
-async function provideCookies(req, res, cookiesOption) {
-  if (!cookiesOption)
+async function provideCookies(req, res, { cookies }) {
+  if (!cookies)
     return;
   try {
-    const cookies = isFunction(cookiesOption) ? await cookiesOption(req) : cookiesOption;
-    Object.keys(cookies).forEach((key) => {
-      const optional = cookies[key];
-      if (isArray(optional)) {
-        const [value, options] = optional;
+    const raw = isFunction(cookies) ? await cookies(req) : cookies;
+    Object.keys(raw).forEach((key) => {
+      const cookie = raw[key];
+      if (isArray(cookie)) {
+        const [value, options] = cookie;
         res.setCookie(key, value, options);
       } else {
-        res.setCookie(key, optional);
+        res.setCookie(key, cookie);
       }
     });
   } catch (e) {
@@ -549,6 +562,16 @@ async function provideCookies(req, res, cookiesOption) {
 `, e);
   }
 }
+function sendData(res, raw, type) {
+  if (isReadableStream(raw)) {
+    raw.pipe(res);
+  } else if (import_node_buffer.Buffer.isBuffer(raw)) {
+    res.end(type === "text" || type === "json" ? raw.toString("utf-8") : raw);
+  } else {
+    const content = typeof raw === "string" ? raw : JSON.stringify(raw);
+    res.end(type === "buffer" ? import_node_buffer.Buffer.from(content) : content);
+  }
+}
 async function realDelay(startTime, delay) {
   if (!delay || delay <= 0)
     return;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { Connect, Plugin, ResolvedConfig } from 'vite';
 import http from 'node:http';
+import { Readable } from 'node:stream';
 import Cookies from 'cookies';
 import formidable from 'formidable';
 import EventEmitter from 'node:events';
@@ -79,7 +80,7 @@ interface ServerBuildOption {
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'TRACE' | 'OPTIONS';
 type Headers = http.IncomingHttpHeaders;
-type ResponseBody = Record<string, any> | any[] | string | number | null;
+type ResponseBody = Record<string, any> | any[] | string | number | Readable | Buffer | null;
 interface ExtraRequest {
     /**
      * The query string located after `?` in the request address has been parsed into JSON.
@@ -218,6 +219,37 @@ interface MockOptionsItem {
      * ```
      */
     cookies?: ResponseCookies | ResponseCookiesFn;
+    /**
+     * Response body data type, optional values include `text, json, buffer`.
+     *
+     * And also support types included in `mime-db`.
+     * When the response body returns a file and you are not sure which type to use,
+     * you can pass the file name as the value. The plugin will internally search for matching
+     * `content-type` based on the file name suffix.
+     *
+     * However, if it is a TypeScript file such as `a.ts`, it may not be correctly matched
+     * as a JavaScript script. You need to modify `a.ts` to `a.js` as the value passed
+     * in order to recognize it correctly.
+     *
+     * 响应体数据类型, 可选值包括 `text, json, buffer`，
+     *
+     * 还支持`mime-db`中的包含的类型。
+     * 当响应体返回的是一个文件，而你不确定应该使用哪个类型时，可以将文件名作为值传入，
+     * 插件内部会根据文件名后缀查找匹配的`content-type`。
+     *
+     * 但如果是 `typescript`文件如 `a.ts`，可能不会被正确匹配为 `javascript`脚本，
+     * 你需要将 `a.ts` 修改为 `a.js`作为值传入才能正确识别。
+     * @see [mime-db](https://github.com/jshttp/mime-db)
+     * @default 'json'
+     * @example
+     * ```txt
+     * json
+     * buffer
+     * my-app.dmg
+     * music.mp4
+     * ```
+     */
+    type?: 'text' | 'json' | 'buffer' | string;
     /**
      * Configure response body data content
      *

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.2";
+var version = "1.1.3";
 
 // src/esbuildPlugin.ts
 import fsp from "fs/promises";
@@ -96,6 +96,8 @@ import { match } from "path-to-regexp";
 import colors from "picocolors";
 var isArray = (val) => Array.isArray(val);
 var isFunction = (val) => typeof val === "function";
+var isStream = (stream) => stream !== null && typeof stream === "object" && typeof stream.pipe === "function";
+var isReadableStream = (stream) => isStream(stream) && stream.readable !== false && typeof stream._read === "function" && typeof stream._readableState === "object";
 function sleep(timeout) {
   return new Promise((resolve) => setTimeout(resolve, timeout));
 }
@@ -135,8 +137,9 @@ function lookupFile(dir, formats, options) {
 }
 var ensureProxies = (serverProxy = {}) => {
   const proxies = Object.keys(serverProxy).map((key) => {
+    var _a, _b;
     const value = serverProxy[key];
-    return typeof value === "string" ? key : value.ws === true ? "" : key;
+    return typeof value === "string" ? key : value.ws || ((_a = value.target) == null ? void 0 : _a.toString().startsWith("ws:")) || ((_b = value.target) == null ? void 0 : _b.toString().startsWith("wss:")) ? "" : key;
   }).filter(Boolean);
   return proxies;
 };
@@ -318,9 +321,11 @@ async function buildMockEntry(inputFile, define, alias) {
 }
 
 // src/baseMiddleware.ts
+import { Buffer } from "buffer";
 import { parse as urlParse } from "url";
 import Cookies from "cookies";
 import HTTP_STATUS from "http-status";
+import * as mime from "mime-types";
 import { pathToRegexp } from "path-to-regexp";
 import colors2 from "picocolors";
 
@@ -383,7 +388,6 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
   return async function(req, res, next) {
     const startTime = Date.now();
     const { query, pathname } = urlParse(req.url, true);
-    const { query: refererQuery } = urlParse(req.headers.referer || "", true);
     if (!pathname || proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
       return next();
     }
@@ -393,6 +397,7 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
     });
     if (!mockUrl)
       return next();
+    const { query: refererQuery } = urlParse(req.headers.referer || "", true);
     const reqBody = await parseReqBody(req, formidableOptions);
     const method = req.method.toUpperCase();
     const mock = fineMock(mockData[mockUrl], pathname, method, {
@@ -413,15 +418,22 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies, cookiesOp
     request.params = parseParams(mock.url, pathname);
     request.getCookie = cookies.get.bind(cookies);
     response.setCookie = cookies.set.bind(cookies);
-    responseStatus(response, mock.status, mock.statusText);
-    await provideHeaders(request, response, mock.headers);
-    await provideCookies(request, response, mock.cookies);
-    const { body, delay, response: responseFn } = mock;
+    const {
+      body,
+      delay,
+      type = "json",
+      response: responseFn,
+      status = 200,
+      statusText
+    } = mock;
+    responseStatus(response, status, statusText);
+    await provideHeaders(request, response, mock);
+    await provideCookies(request, response, mock);
     if (body) {
       try {
-        const result = isFunction(body) ? await body(request) : mock.body;
+        const content = isFunction(body) ? await body(request) : body;
         await realDelay(startTime, delay);
-        res.end(JSON.stringify(result));
+        sendData(response, content, type);
       } catch (e) {
         log.error(`${colors2.red("[body error]")} ${req.url} 
 `, e);
@@ -469,34 +481,35 @@ 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");
+async function provideHeaders(req, res, { headers, type = "json" }) {
+  const contentType2 = mime.contentType(type) || mime.contentType(mime.lookup(type) || "");
+  contentType2 && res.setHeader("Content-Type", contentType2);
   res.setHeader("Cache-Control", "no-cache,max-age=0");
   res.setHeader("X-Mock", "generate by vite:plugin-mock-dev-server");
-  if (!headersOption)
+  if (!headers)
     return;
   try {
-    const headers = isFunction(headersOption) ? await headersOption(req) : headersOption;
-    Object.keys(headers).forEach((key) => {
-      res.setHeader(key, headers[key]);
+    const raw = isFunction(headers) ? await headers(req) : headers;
+    Object.keys(raw).forEach((key) => {
+      res.setHeader(key, raw[key]);
     });
   } catch (e) {
     log.error(`${colors2.red("[headers error]")} ${req.url} 
 `, e);
   }
 }
-async function provideCookies(req, res, cookiesOption) {
-  if (!cookiesOption)
+async function provideCookies(req, res, { cookies }) {
+  if (!cookies)
     return;
   try {
-    const cookies = isFunction(cookiesOption) ? await cookiesOption(req) : cookiesOption;
-    Object.keys(cookies).forEach((key) => {
-      const optional = cookies[key];
-      if (isArray(optional)) {
-        const [value, options] = optional;
+    const raw = isFunction(cookies) ? await cookies(req) : cookies;
+    Object.keys(raw).forEach((key) => {
+      const cookie = raw[key];
+      if (isArray(cookie)) {
+        const [value, options] = cookie;
         res.setCookie(key, value, options);
       } else {
-        res.setCookie(key, optional);
+        res.setCookie(key, cookie);
       }
     });
   } catch (e) {
@@ -504,6 +517,16 @@ async function provideCookies(req, res, cookiesOption) {
 `, e);
   }
 }
+function sendData(res, raw, type) {
+  if (isReadableStream(raw)) {
+    raw.pipe(res);
+  } else if (Buffer.isBuffer(raw)) {
+    res.end(type === "text" || type === "json" ? raw.toString("utf-8") : raw);
+  } else {
+    const content = typeof raw === "string" ? raw : JSON.stringify(raw);
+    res.end(type === "buffer" ? Buffer.from(content) : content);
+  }
+}
 async function realDelay(startTime, delay) {
   if (!delay || delay <= 0)
     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-mock-dev-server",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "keywords": [
     "vite",
     "plugin",
@@ -40,6 +40,7 @@
     "http-status": "^1.6.2",
     "is-core-module": "^2.12.0",
     "json5": "^2.2.3",
+    "mime-types": "^2.1.35",
     "path-to-regexp": "^6.2.1",
     "picocolors": "^1.0.0"
   },
@@ -51,15 +52,16 @@
     "@types/debug": "^4.1.7",
     "@types/formidable": "^2.0.5",
     "@types/is-core-module": "^2.2.0",
-    "@types/node": "^18.15.12",
+    "@types/mime-types": "^2.1.1",
+    "@types/node": "^18.15.13",
     "bumpp": "^9.1.0",
     "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "mockjs": "^1.1.0",
     "prettier": "^2.8.7",
     "tsup": "^6.7.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.0",
+    "vite": "^4.3.1",
     "vitepress": "1.0.0-alpha.73",
     "vue": "^3.2.47"
   },