vite-plugin-mock-dev-server 0.4.2 → 1.0.0

package/README.md

@@ -11,7 +11,7 @@
 <a href="https://www.npmjs.com/package/vite-plugin-mock-dev-server"><img alt="npm" src="https://img.shields.io/npm/v/vite-plugin-mock-dev-server?style=flat-square"></a>
 <img alt="node-current" src="https://img.shields.io/node/v/vite-plugin-mock-dev-server?style=flat-square">
 <img alt="npm peer dependency version" src="https://img.shields.io/npm/dependency-version/vite-plugin-mock-dev-server/peer/vite?style=flat-square">
-<img alt="GitHub" src="https://img.shields.io/github/license/pengzhanbo/vite-plugin-mock-dev-server?style=flat-square">
+<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/pengzhanbo/vite-plugin-mock-dev-server/lint.yml?style=flat-square">
 <img alt="npm" src="https://img.shields.io/npm/dm/vite-plugin-mock-dev-server?style=flat-square">
 </p>
 <br>
@@ -131,25 +131,29 @@ export default defineConfig({
 
 - `options.prefix`
 
-  Type: `string | string[]`
+  **Type:** `string | string[]`
   
   Configure custom matches rules for the mock server. Any requests that request path starts with that `prefix` will be proxied to that specified target. If the `prefix` starts with ^, it will be interpreted as a RegExp.
 
   > In general, `server.proxy` is sufficient to meet the requirements, and this options is added to be compatible with some scenarios.
 
-  Default: `[]`
+  **Default:** `[]`
 
 - `option.include` 
+
+  **Type:** `string | string[]`
   
   Configure to read mock files, which can be a directory, glob, or array
 
-  Default： `['mock/**/*.mock.{js,ts,cjs,mjs,json,json5}']` (relative for `process.cwd()`)
+  **Default：** `['mock/**/*.mock.{js,ts,cjs,mjs,json,json5}']` (relative for `process.cwd()`)
 
 - `options.exclude`
+
+  **Type:** `string | string[]`
   
   When you configure the mock files to be read, the files you want to exclude can be a directory, glob, or array
 
-  Default：
+  **Default：**
   ```ts
   [
     '**/node_modules/**',
@@ -161,11 +165,21 @@ export default defineConfig({
   ]
   ```
 
+- `options.reload`
+  
+  **Type:** `boolean`
+
+  When mock resources are hot updated, only the data content is updated, but the page is not refreshed by default.
+  Turn this on when you want to refresh the page every time you modify the mock file.
+
+
+  **Default:** `false`
+
 - `options.formidableOptions`
   
   Configure to `formidable`，see [formidable options](https://github.com/node-formidable/formidable#options)
 
-  Default: `{}`
+  **Default:** `{}`
 
   example: Configure to file upload dir
   ```ts
@@ -180,9 +194,9 @@ export default defineConfig({
   
   When building a small, independently deployable mock service.
 
-  Type： `boolean | ServerBuildOptions` 
+  **Type：** `boolean | ServerBuildOptions` 
 
-  Default：`false`
+  **Default：** `false`
 
   ```ts
   interface ServerBuildOptions {
@@ -217,7 +231,7 @@ export default defineMock({
 ```ts
 export default defineMock({
   /**
-   * Address of request，support `/api/user/:id`
+   * Address of request，and support like `/api/user/:id`
    */
   url: '/api/test',
   /**
@@ -396,7 +410,7 @@ export default defineMock([
       }
     },
     body: {
-      message: 'query.a === 1'
+      message: 'query.a == 1'
     }
   },
   // Match /api/test?a=2
@@ -408,7 +422,16 @@ export default defineMock([
       }
     },
     body: {
-      message: 'query.a === 2'
+      message: 'query.a == 2'
+    }
+  },
+  {
+    /**
+     * `?a=3` will resolve to `validator.query`
+     */
+    url: '/api/test?a=3',
+    body: {
+      message: 'query.a == 3'
     }
   }
 ])
@@ -433,7 +456,22 @@ export default defineMock({
 })
 ```
 
-#### Example 8：
+#### Example 8:
+Dynamic route matching
+```ts
+export default defineMock({
+  url: '/api/user/:userId',
+  body({ params }) {
+    return {
+      userId: params.userId,
+    }
+  }
+})
+```
+
+The `userId` in the route will be resolved into the `request.params` object.
+
+#### Example 9：
 Use `mockjs`:
 ```ts
 import Mock from 'mockjs'
@@ -448,7 +486,7 @@ export default defineMock({
 ```
 You need installed `mockjs`
 
-### Example 9：
+### Example 10：
 Use `response` to customize the response
 ```ts
 export default defineMock({
@@ -468,7 +506,7 @@ export default defineMock({
 })
 ```
 
-### Example 10：
+### Example 11：
 Use json / json5
 ```json
 {
@@ -480,7 +518,7 @@ Use json / json5
 }
 ```
 
-### Example 11:
+### Example 12:
 
 multipart, upload file.
 

package/README.zh-CN.md

@@ -13,7 +13,7 @@
 <a href="https://www.npmjs.com/package/vite-plugin-mock-dev-server"><img alt="npm" src="https://img.shields.io/npm/v/vite-plugin-mock-dev-server?style=flat-square"></a>
 <img alt="node-current" src="https://img.shields.io/node/v/vite-plugin-mock-dev-server?style=flat-square">
 <img alt="npm peer dependency version" src="https://img.shields.io/npm/dependency-version/vite-plugin-mock-dev-server/peer/vite?style=flat-square">
-<img alt="GitHub" src="https://img.shields.io/github/license/pengzhanbo/vite-plugin-mock-dev-server?style=flat-square">
+<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/pengzhanbo/vite-plugin-mock-dev-server/lint.yml?style=flat-square">
 <img alt="npm" src="https://img.shields.io/npm/dm/vite-plugin-mock-dev-server?style=flat-square">
 </p>
 <br>
@@ -133,25 +133,29 @@ export default defineConfig({
 
 - `options.prefix`
 
-  Type: `string | string[]`
+  **类型:** `string | string[]`
   
   为mock服务器配置自定义匹配规则。任何请求路径以 `prefix` 值开头的请求将被代理到对应的目标。如果 `prefix` 值以 ^ 开头，将被识别为 RegExp。
 
   > 一般情况下, `server.proxy` 已经足够满足需求，添加此项是为了与某些场景兼容。
 
-  Default: `[]`
+  **默认值:** `[]`
 
 - `option.include` 
+
+  **类型：** `string | string[]`
   
   配置读取 mock文件，可以是一个 目录，glob，或者一个数组
 
-  默认值： `['mock/**/*.mock.{js,ts,cjs,mjs,json,json5}']` (相对于根目录)
+  **默认值：** `['mock/**/*.mock.{js,ts,cjs,mjs,json,json5}']` (相对于根目录)
 
 - `options.exclude`
+
+  **类型：** `string | string[]`
   
   配置读取 mock文件时，需要排除的文件， 可以是一个 目录、glob、或者一个数组
 
-  默认值：
+  **默认值：**
   ```ts
   [
     '**/node_modules/**',
@@ -163,11 +167,19 @@ export default defineConfig({
   ]
   ```
 
+- `options.reload`
+
+  **Type:** `boolean`
+
+  mock资源热更新时，仅更新了数据内容，但是默认不重新刷新页面。当你希望每次修改mock文件都刷新页面时，可以打开此选项。
+
+  **Default:** `false`
+
 - `options.formidableOptions`
   
   配置 `formidable`，查看 [formidable options](https://github.com/node-formidable/formidable#options)
 
-  默认值: `{}`
+  **默认值:** `{}`
 
   示例: 配置文件上传的存放目录
   ```ts
@@ -182,9 +194,9 @@ export default defineConfig({
   
   构建可独立部署的小型mock服务时配置。
 
-  类型： `boolean | ServerBuildOptions` 
+  **类型：** `boolean | ServerBuildOptions` 
 
-  默认值：`false`
+  **默认值：**`false`
 
   ```ts
   interface ServerBuildOptions {
@@ -413,6 +425,15 @@ export default defineMock([
     body: {
       message: 'query.a === 2'
     }
+  },
+  {
+    /**
+     * `?a=3` 将会解析到 `validator.query`
+     */
+    url: '/api/test?a=3',
+    body: {
+      message: 'query.a == 3'
+    }
   }
 ])
 ```
@@ -436,7 +457,22 @@ export default defineMock({
 })
 ```
 
-#### 示例8：
+#### 示例8:
+动态路由匹配
+```ts
+export default defineMock({
+  url: '/api/user/:userId',
+  body({ params }) {
+    return {
+      userId: params.userId,
+    }
+  }
+})
+```
+
+路由中的 `userId`将会解析到 `request.params` 对象中.
+
+#### 示例9：
 使用 `mockjs` 生成响应数据:
 ```ts
 import Mock from 'mockjs'
@@ -451,7 +487,7 @@ export default defineMock({
 ```
 请先安装 `mockjs`
 
-### 示例9：
+### 示例10：
 使用 `response` 自定义响应
 ```ts
 export default defineMock({
@@ -471,7 +507,7 @@ export default defineMock({
 })
 ```
 
-### 示例10：
+### 示例11：
 使用 json / json5
 ```json
 {
@@ -483,7 +519,7 @@ export default defineMock({
 }
 ```
 
-### Example 11:
+### Example 12:
 
 multipart, 文件上传.
 

package/dist/index.cjs

@@ -52,7 +52,7 @@ var import_vite = require("vite");
 
 // package.json
 var name = "vite-plugin-mock-dev-server";
-var version = "0.4.2";
+var version = "1.0.0";
 
 // src/esbuildPlugin.ts
 var import_promises = __toESM(require("fs/promises"), 1);
@@ -100,6 +100,7 @@ var import_node_fs = __toESM(require("fs"), 1);
 var import_node_path2 = __toESM(require("path"), 1);
 var import_node_url = require("url");
 var import_debug = __toESM(require("debug"), 1);
+var import_picocolors = __toESM(require("picocolors"), 1);
 var isArray = (val) => Array.isArray(val);
 var isFunction = (val) => typeof val === "function";
 function sleep(timeout) {
@@ -116,6 +117,14 @@ var ensureArray = (thing) => {
     return [];
   return [thing];
 };
+var log = {
+  info(...args) {
+    console.info(import_picocolors.default.cyan("mock-dev-server: "), ...args);
+  },
+  error(...args) {
+    console.error("\n", import_picocolors.default.cyan("mock-dev-server: "), ...args, "\n");
+  }
+};
 function lookupFile(dir, formats, options) {
   for (const format of formats) {
     const fullPath = import_node_path2.default.join(dir, format);
@@ -319,6 +328,7 @@ async function buildMockEntry(inputFile, define) {
 var import_node_url2 = require("url");
 var import_http_status = __toESM(require("http-status"), 1);
 var import_path_to_regexp = require("path-to-regexp");
+var import_picocolors2 = __toESM(require("picocolors"), 1);
 
 // src/parseReqBody.ts
 var import_co_body = __toESM(require("co-body"), 1);
@@ -404,7 +414,7 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies }) {
           pathname
         ) || { params: {} };
         const params2 = urlMatch2.params || {};
-        const request = {
+        const request2 = {
           query,
           refererQuery,
           params: params2,
@@ -412,9 +422,9 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies }) {
           headers: req.headers
         };
         if (isFunction(mock.validator)) {
-          return mock.validator(request);
+          return mock.validator(request2);
         } else {
-          return validate(request, mock.validator);
+          return validate(request2, mock.validator);
         }
       }
       return hasMock;
@@ -431,47 +441,53 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies }) {
       pathname
     ) || { params: {} };
     const params = urlMatch.params || {};
-    req.body = reqBody;
-    req.query = query;
-    req.refererQuery = refererQuery;
-    req.params = params;
+    const request = req;
+    request.body = reqBody;
+    request.query = query;
+    request.refererQuery = refererQuery;
+    request.params = params;
     res.setHeader("Content-Type", "application/json");
     res.setHeader("Cache-Control", "no-cache,max-age=0");
-    res.setHeader("X-Mock", "generate by vite:mock-dev-server");
+    res.setHeader("X-Mock", "generate by vite:plugin-mock-dev-server");
     if (currentMock.headers) {
-      const headers = isFunction(currentMock.headers) ? await currentMock.headers({
-        query,
-        refererQuery,
-        body: reqBody,
-        params,
-        headers: req.headers
-      }) : currentMock.headers;
-      Object.keys(headers).forEach((key) => {
-        res.setHeader(key, headers[key]);
-      });
+      try {
+        const headers = isFunction(currentMock.headers) ? await currentMock.headers(request) : currentMock.headers;
+        Object.keys(headers).forEach((key) => {
+          res.setHeader(key, headers[key]);
+        });
+      } catch (e) {
+        log.error(`${import_picocolors2.default.red("[headers error]")} ${req.url} 
+`, e);
+      }
     }
     if (currentMock.body) {
-      let body;
-      if (isFunction(currentMock.body)) {
-        body = await currentMock.body({
-          query,
-          refererQuery,
-          body: reqBody,
-          params,
-          headers: req.headers
-        });
-      } else {
-        body = currentMock.body;
+      try {
+        let body;
+        if (isFunction(currentMock.body)) {
+          body = await currentMock.body(request);
+        } else {
+          body = currentMock.body;
+        }
+        res.end(JSON.stringify(body));
+      } catch (e) {
+        log.error(`${import_picocolors2.default.red("[body error]")} ${req.url} 
+`, e);
+        res.statusCode = 500;
+        res.statusMessage = getHTTPStatusText(res.statusCode);
+        res.end("");
       }
-      res.end(JSON.stringify(body));
       return;
     }
     if (currentMock.response) {
-      await currentMock.response(
-        req,
-        res,
-        next
-      );
+      try {
+        await currentMock.response(request, res, next);
+      } catch (e) {
+        log.error(`${import_picocolors2.default.red("[response error]")} ${req.url} 
+`, e);
+        res.statusCode = 500;
+        res.statusMessage = getHTTPStatusText(res.statusCode);
+        res.end("");
+      }
       return;
     }
     res.end("");
@@ -534,12 +550,14 @@ var _MockLoader = class extends import_node_events.default {
         return;
       await this.loadMock(filepath);
       this.updateMockList();
+      this.emit("mock:update-end");
     });
     this.on("mock:unlink", async (filepath) => {
       if (!includeFilter(filepath))
         return;
       this.moduleCache.delete(filepath);
       this.updateMockList();
+      this.emit("mock:update-end");
     });
   }
   watchMockEntry() {
@@ -609,10 +627,19 @@ var _MockLoader = class extends import_node_events.default {
     }
     const mocks = {};
     mockList.filter((mock) => mock.enabled || typeof mock.enabled === "undefined").forEach((mock) => {
-      if (!mocks[mock.url]) {
-        mocks[mock.url] = [];
+      const { pathname, query } = (0, import_node_url3.parse)(mock.url, true);
+      if (!mocks[pathname]) {
+        mocks[pathname] = [];
+      }
+      mock.url = pathname;
+      const list = mocks[pathname];
+      if (query && !isFunction(mock.validator)) {
+        mock.validator ?? (mock.validator = {});
+        mock.validator.query = Object.assign(
+          query,
+          mock.validator.query || {}
+        );
       }
-      const list = mocks[mock.url];
       mock.validator ? list.unshift(mock) : list.push(mock);
     });
     this._mockData = mocks;
@@ -733,7 +760,7 @@ var MockLoader = _MockLoader;
 MockLoader.EXT_JSON = /\.json5?$/;
 
 // src/mockMiddleware.ts
-async function mockServerMiddleware(httpServer, config, options) {
+async function mockServerMiddleware(config, options, httpServer, ws) {
   const include = ensureArray(options.include);
   const exclude = ensureArray(options.exclude);
   const define = {};
@@ -750,6 +777,11 @@ async function mockServerMiddleware(httpServer, config, options) {
   });
   await loader.load();
   httpServer == null ? void 0 : httpServer.on("close", () => loader.close());
+  loader.on("mock:update-end", () => {
+    if (options.reload) {
+      ws == null ? void 0 : ws.send({ type: "full-reload" });
+    }
+  });
   const proxies = ensureProxies(config.server.proxy || {});
   const prefix = ensureArray(options.prefix);
   return baseMiddleware(loader, {
@@ -770,6 +802,7 @@ function mockDevServerPlugin({
     "**/.git/**",
     "**/dist/**"
   ],
+  reload = false,
   formidableOptions = {},
   build: build3 = false
 } = {}) {
@@ -777,6 +810,7 @@ function mockDevServerPlugin({
     prefix,
     include,
     exclude,
+    reload,
     formidableOptions: {
       multiples: true,
       ...formidableOptions
@@ -824,19 +858,20 @@ function serverPlugin(pluginOptions) {
       viteConfig = config;
       config.logger.warn("");
     },
-    async configureServer({ middlewares, config, httpServer }) {
+    async configureServer({ middlewares, config, httpServer, ws }) {
       const middleware = await mockServerMiddleware(
-        httpServer,
         config,
-        pluginOptions
+        pluginOptions,
+        httpServer,
+        ws
       );
       middlewares.use(middleware);
     },
     async configurePreviewServer({ middlewares, httpServer }) {
       const middleware = await mockServerMiddleware(
-        httpServer,
         viteConfig,
-        pluginOptions
+        pluginOptions,
+        httpServer
       );
       middlewares.use(middleware);
     }

package/dist/index.d.ts

@@ -23,6 +23,13 @@ interface MockServerPluginOptions {
      * @see https://github.com/micromatch/picomatch#globbing-features
      */
     exclude?: string | string[];
+    /**
+     * mock资源热更新时，仅更新了数据内容，但是默认不重新刷新页面。
+     * 当你希望每次修改mock文件都刷新页面时，可以打开此选项。
+     *
+     * @default false
+     */
+    reload?: boolean;
     /**
      * formidable options
      * @see https://github.com/node-formidable/formidable#options
@@ -50,8 +57,9 @@ interface ServerBuildOption {
     dist?: string;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'TRACE' | 'OPTIONS';
+type Headers = http.IncomingHttpHeaders;
 type ResponseBody = Record<string, any> | any[] | string | number | null;
-interface ResponseReq {
+interface ExtraRequest {
     /**
      * 请求地址中位于 `?` 后面的 queryString，已解析为 json
      */
@@ -69,17 +77,13 @@ interface ResponseReq {
      */
     params: Record<string, any>;
     /**
-     * 请求 中的 headers
+     * 请求体中 headers
      */
-    headers: Record<string, any>;
-}
-interface ResponseBodyFn {
-    (request: ResponseReq): ResponseBody | Promise<ResponseBody>;
-}
-interface ResponseHeaderFn {
-    (request: ResponseReq): Headers | Promise<Headers>;
+    headers: Headers;
 }
-type Headers = Record<string, any>;
+type MockRequest = ExtraRequest & http.IncomingMessage;
+type ResponseBodyFn = (request: MockRequest) => ResponseBody | Promise<ResponseBody>;
+type ResponseHeaderFn = (request: MockRequest) => Headers | Promise<Headers>;
 interface MockOptionsItem {
     /**
      * 需要做mock的接口地址，
@@ -136,7 +140,7 @@ interface MockOptionsItem {
      *
      * 在 req 中，还可以拿到 query、params、body等已解析的请求信息
      */
-    response?: (req: Connect.IncomingMessage & ResponseReq, res: http.ServerResponse<http.IncomingMessage>, next: Connect.NextFunction) => void | Promise<void>;
+    response?: (req: MockRequest, res: http.ServerResponse<http.IncomingMessage>, next: Connect.NextFunction) => void | Promise<void>;
     /**
      * 请求验证器
      *
@@ -144,12 +148,12 @@ interface MockOptionsItem {
      * 但全部都在单个 mock中的 body或者 response 中写，内容会很庞杂，不好管理，
      * 验证器的功能，允许你同时配置多条相同url的mock，通过验证器来判断使哪个mock生效。
      */
-    validator?: Partial<ResponseReq> | ((request: ResponseReq) => boolean);
+    validator?: Partial<ExtraRequest> | ((request: ExtraRequest) => boolean);
 }
 type MockOptions = MockOptionsItem[];
 type FormidableFile = formidable.File | formidable.File[];
 
-declare function mockDevServerPlugin({ prefix, include, exclude, formidableOptions, build, }?: MockServerPluginOptions): Plugin[];
+declare function mockDevServerPlugin({ prefix, include, exclude, reload, formidableOptions, build, }?: MockServerPluginOptions): Plugin[];
 
 /**
  * mock config helper

package/dist/index.js

@@ -9,7 +9,7 @@ import { createFilter } from "vite";
 
 // package.json
 var name = "vite-plugin-mock-dev-server";
-var version = "0.4.2";
+var version = "1.0.0";
 
 // src/esbuildPlugin.ts
 import fsp from "fs/promises";
@@ -57,6 +57,7 @@ import fs from "fs";
 import path2 from "path";
 import { fileURLToPath } from "url";
 import Debug from "debug";
+import colors from "picocolors";
 var isArray = (val) => Array.isArray(val);
 var isFunction = (val) => typeof val === "function";
 function sleep(timeout) {
@@ -73,6 +74,14 @@ var ensureArray = (thing) => {
     return [];
   return [thing];
 };
+var log = {
+  info(...args) {
+    console.info(colors.cyan("mock-dev-server: "), ...args);
+  },
+  error(...args) {
+    console.error("\n", colors.cyan("mock-dev-server: "), ...args, "\n");
+  }
+};
 function lookupFile(dir, formats, options) {
   for (const format of formats) {
     const fullPath = path2.join(dir, format);
@@ -276,6 +285,7 @@ async function buildMockEntry(inputFile, define) {
 import { parse as urlParse } from "url";
 import HTTP_STATUS from "http-status";
 import { match, pathToRegexp } from "path-to-regexp";
+import colors2 from "picocolors";
 
 // src/parseReqBody.ts
 import bodyParser from "co-body";
@@ -361,7 +371,7 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies }) {
           pathname
         ) || { params: {} };
         const params2 = urlMatch2.params || {};
-        const request = {
+        const request2 = {
           query,
           refererQuery,
           params: params2,
@@ -369,9 +379,9 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies }) {
           headers: req.headers
         };
         if (isFunction(mock.validator)) {
-          return mock.validator(request);
+          return mock.validator(request2);
         } else {
-          return validate(request, mock.validator);
+          return validate(request2, mock.validator);
         }
       }
       return hasMock;
@@ -388,47 +398,53 @@ function baseMiddleware(mockLoader, { formidableOptions = {}, proxies }) {
       pathname
     ) || { params: {} };
     const params = urlMatch.params || {};
-    req.body = reqBody;
-    req.query = query;
-    req.refererQuery = refererQuery;
-    req.params = params;
+    const request = req;
+    request.body = reqBody;
+    request.query = query;
+    request.refererQuery = refererQuery;
+    request.params = params;
     res.setHeader("Content-Type", "application/json");
     res.setHeader("Cache-Control", "no-cache,max-age=0");
-    res.setHeader("X-Mock", "generate by vite:mock-dev-server");
+    res.setHeader("X-Mock", "generate by vite:plugin-mock-dev-server");
     if (currentMock.headers) {
-      const headers = isFunction(currentMock.headers) ? await currentMock.headers({
-        query,
-        refererQuery,
-        body: reqBody,
-        params,
-        headers: req.headers
-      }) : currentMock.headers;
-      Object.keys(headers).forEach((key) => {
-        res.setHeader(key, headers[key]);
-      });
+      try {
+        const headers = isFunction(currentMock.headers) ? await currentMock.headers(request) : currentMock.headers;
+        Object.keys(headers).forEach((key) => {
+          res.setHeader(key, headers[key]);
+        });
+      } catch (e) {
+        log.error(`${colors2.red("[headers error]")} ${req.url} 
+`, e);
+      }
     }
     if (currentMock.body) {
-      let body;
-      if (isFunction(currentMock.body)) {
-        body = await currentMock.body({
-          query,
-          refererQuery,
-          body: reqBody,
-          params,
-          headers: req.headers
-        });
-      } else {
-        body = currentMock.body;
+      try {
+        let body;
+        if (isFunction(currentMock.body)) {
+          body = await currentMock.body(request);
+        } else {
+          body = currentMock.body;
+        }
+        res.end(JSON.stringify(body));
+      } catch (e) {
+        log.error(`${colors2.red("[body error]")} ${req.url} 
+`, e);
+        res.statusCode = 500;
+        res.statusMessage = getHTTPStatusText(res.statusCode);
+        res.end("");
       }
-      res.end(JSON.stringify(body));
       return;
     }
     if (currentMock.response) {
-      await currentMock.response(
-        req,
-        res,
-        next
-      );
+      try {
+        await currentMock.response(request, res, next);
+      } catch (e) {
+        log.error(`${colors2.red("[response error]")} ${req.url} 
+`, e);
+        res.statusCode = 500;
+        res.statusMessage = getHTTPStatusText(res.statusCode);
+        res.end("");
+      }
       return;
     }
     res.end("");
@@ -446,7 +462,7 @@ import EventEmitter from "events";
 import fs3 from "fs";
 import { createRequire } from "module";
 import path4 from "path";
-import { pathToFileURL } from "url";
+import { pathToFileURL, parse as urlParse2 } from "url";
 import chokidar from "chokidar";
 import { build as build2 } from "esbuild";
 import fastGlob from "fast-glob";
@@ -491,12 +507,14 @@ var _MockLoader = class extends EventEmitter {
         return;
       await this.loadMock(filepath);
       this.updateMockList();
+      this.emit("mock:update-end");
     });
     this.on("mock:unlink", async (filepath) => {
       if (!includeFilter(filepath))
         return;
       this.moduleCache.delete(filepath);
       this.updateMockList();
+      this.emit("mock:update-end");
     });
   }
   watchMockEntry() {
@@ -566,10 +584,19 @@ var _MockLoader = class extends EventEmitter {
     }
     const mocks = {};
     mockList.filter((mock) => mock.enabled || typeof mock.enabled === "undefined").forEach((mock) => {
-      if (!mocks[mock.url]) {
-        mocks[mock.url] = [];
+      const { pathname, query } = urlParse2(mock.url, true);
+      if (!mocks[pathname]) {
+        mocks[pathname] = [];
+      }
+      mock.url = pathname;
+      const list = mocks[pathname];
+      if (query && !isFunction(mock.validator)) {
+        mock.validator ?? (mock.validator = {});
+        mock.validator.query = Object.assign(
+          query,
+          mock.validator.query || {}
+        );
       }
-      const list = mocks[mock.url];
       mock.validator ? list.unshift(mock) : list.push(mock);
     });
     this._mockData = mocks;
@@ -690,7 +717,7 @@ var MockLoader = _MockLoader;
 MockLoader.EXT_JSON = /\.json5?$/;
 
 // src/mockMiddleware.ts
-async function mockServerMiddleware(httpServer, config, options) {
+async function mockServerMiddleware(config, options, httpServer, ws) {
   const include = ensureArray(options.include);
   const exclude = ensureArray(options.exclude);
   const define = {};
@@ -707,6 +734,11 @@ async function mockServerMiddleware(httpServer, config, options) {
   });
   await loader.load();
   httpServer == null ? void 0 : httpServer.on("close", () => loader.close());
+  loader.on("mock:update-end", () => {
+    if (options.reload) {
+      ws == null ? void 0 : ws.send({ type: "full-reload" });
+    }
+  });
   const proxies = ensureProxies(config.server.proxy || {});
   const prefix = ensureArray(options.prefix);
   return baseMiddleware(loader, {
@@ -727,6 +759,7 @@ function mockDevServerPlugin({
     "**/.git/**",
     "**/dist/**"
   ],
+  reload = false,
   formidableOptions = {},
   build: build3 = false
 } = {}) {
@@ -734,6 +767,7 @@ function mockDevServerPlugin({
     prefix,
     include,
     exclude,
+    reload,
     formidableOptions: {
       multiples: true,
       ...formidableOptions
@@ -781,19 +815,20 @@ function serverPlugin(pluginOptions) {
       viteConfig = config;
       config.logger.warn("");
     },
-    async configureServer({ middlewares, config, httpServer }) {
+    async configureServer({ middlewares, config, httpServer, ws }) {
       const middleware = await mockServerMiddleware(
-        httpServer,
         config,
-        pluginOptions
+        pluginOptions,
+        httpServer,
+        ws
       );
       middlewares.use(middleware);
     },
     async configurePreviewServer({ middlewares, httpServer }) {
       const middleware = await mockServerMiddleware(
-        httpServer,
         viteConfig,
-        pluginOptions
+        pluginOptions,
+        httpServer
       );
       middlewares.use(middleware);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-mock-dev-server",
-  "version": "0.4.2",
+  "version": "1.0.0",
   "keywords": [
     "vite",
     "plugin",
@@ -33,13 +33,14 @@
     "chokidar": "^3.5.3",
     "co-body": "^6.1.0",
     "debug": "^4.3.4",
-    "esbuild": "^0.17.6",
+    "esbuild": "^0.17.11",
     "fast-glob": "^3.2.12",
     "formidable": "^2.1.1",
     "http-status": "^1.6.2",
     "is-core-module": "^2.11.0",
     "json5": "^2.2.3",
-    "path-to-regexp": "^6.2.1"
+    "path-to-regexp": "^6.2.1",
+    "picocolors": "^1.0.0"
   },
   "devDependencies": {
     "@pengzhanbo/eslint-config-ts": "^0.3.2",
@@ -48,16 +49,16 @@
     "@types/debug": "^4.1.7",
     "@types/formidable": "^2.0.5",
     "@types/is-core-module": "^2.2.0",
-    "@types/node": "^18.11.19",
-    "bumpp": "^8.2.1",
+    "@types/node": "^18.14.6",
+    "bumpp": "^9.0.0",
     "conventional-changelog-cli": "^2.2.2",
-    "eslint": "^8.33.0",
+    "eslint": "^8.35.0",
     "mockjs": "^1.1.0",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitepress": "1.0.0-alpha.45",
+    "vite": "^4.1.4",
+    "vitepress": "1.0.0-alpha.49",
     "vue": "^3.2.47"
   },
   "peerDependencies": {