vite-plugin-mock-dev-server 0.3.14 → 0.3.16

package/README.md

@@ -2,7 +2,9 @@
 
 <br>
 <br>
-<p align="center">Vite Plugin for API mock dev server.</p>
+<p align="center">
+ <b>Vite Plugin for API mock dev server.</b>
+</p>
 
 <br>
 <p align="center">
@@ -10,6 +12,7 @@
 <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="npm" src="https://img.shields.io/npm/dm/vite-plugin-mock-dev-server?style=flat-square">
 </p>
 <br>
 <p align="center">
@@ -34,11 +37,17 @@
 - ⚖️ Use `server.proxy`
 - 🍕 Support `viteConfig.define` in mock file
 - 📤 Support `multipart` content-type，mock upload file.
+- 🌈 Support `vite preview` mode.
 ## Documentation
 
 See the [documentation](https://vite-plugin-mock-dev-server.netlify.app/) to learn more.
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/9ccda610-2c6a-4cd0-aeaa-a8932f2b477c/deploy-status)](https://app.netlify.com/sites/vite-plugin-mock-dev-server/deploys)
 
+## Playground
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/pengzhanbo/vite-plugin-mock-dev-server/tree/main/playground)
+
 ## Usage
 
 ### Install
@@ -125,14 +134,13 @@ export default defineConfig({
 
 - `options.exclude`
   
-  When you configure the mock files to be read, the files you want to exclude can be a directory, a glob, or an array
+  When you configure the mock files to be read, the files you want to exclude can be a directory, glob, or array
 
   Default：
   ```ts
   [
     '**/node_modules/**',
     '**/test/**',
-    '**/cypress/**',
     'src/**',
     '**/.vscode/**',
     '**/.git/**',
@@ -219,14 +227,14 @@ export default defineMock({
    * configurations and determines which mock configuration
    * is valid according to the validator.
    * 
-   * @type { header?: object; body?: object; query?: object; params?: object  }
+   * @type { headers?: object; body?: object; query?: object; params?: object  }
    * 
    * If the validator incoming is an object, 
    * then the validation method is the comparison of the 
    * strict request of interface, headers/body/query/params 
    * each `key-value` congruent, congruent check through
    * 
-   * @type ({ header: object; body: object; query: object; params: object }) => boolean
+   * @type ({ headers: object; body: object; query: object; params: object }) => boolean
    * If the validator is passed a function, 
    * it takes the requested interface-related data as an input,
    * gives it to the consumer for custom validation, 
@@ -258,7 +266,7 @@ export default defineMock({
    * 
    * @type string | number | array | object
    * 
-   * @type (request: { header, query, body, params }) => any | Promise<any>
+   * @type (request: { headers, query, body, params }) => any | Promise<any>
    */
   body: {},
 
@@ -293,7 +301,7 @@ export default defineMock({
 ```
 
 #### Example 2：
-Match `/api/test` ，And returns a fixed content data
+Match `/api/test` ，And returns a static content data
 ```ts
 export default defineMock({
   url: '/api/test',

package/README.zh-CN.md

@@ -2,7 +2,9 @@
 
 <br>
 <br>
-<p align="center">vite mock开发服务（mock-dev-server）插件。</p>
+<p align="center">
+  <b>vite mock开发服务（mock-dev-server）插件。</b>
+</p>
 
 <p align="center">在 vite 开发环境中，注入一个 mock-dev-server。</p>
 
@@ -12,6 +14,7 @@
 <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="npm" src="https://img.shields.io/npm/dm/vite-plugin-mock-dev-server?style=flat-square">
 </p>
 <br>
 <p align="center">
@@ -28,19 +31,25 @@
 - 🦾 Typescript
 - 🏷 支持 json / json5 编写 mock 数据
 - 📦 自动加载 mock 文件
-- 🎨 可选择你喜欢的任意用于生成mock数据库，如 `mockjs`，或者不是用其他库
+- 🎨 可选择你喜欢的任意用于生成mock数据库，如 `mockjs`，或者不使用其他库
 - 📥 路径规则匹配，请求参数匹配
 - ⚙️ 随意开启或关闭对某个接口的 mock配置
 - 🔥 热更新
 - ⚖️ 使用 `server.proxy` 配置
 - 🍕 支持在 mock文件中使用 `viteConfig.define`配置字段
 - 📤 支持 multipart 类型，模拟文件上传
+- 🌈 支持 `vite preview` 模式.
 
 
 ## 文档
 
 查看 [Documentation](https://vite-plugin-mock-dev-server.netlify.app/) 了解更多。
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/9ccda610-2c6a-4cd0-aeaa-a8932f2b477c/deploy-status)](https://app.netlify.com/sites/vite-plugin-mock-dev-server/deploys)
+
+## Playground
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/pengzhanbo/vite-plugin-mock-dev-server/tree/main/playground)
 ## 使用
 
 ### 安装
@@ -130,7 +139,17 @@ export default defineConfig({
   
   配置读取 mock文件时，需要排除的文件， 可以是一个 目录、glob、或者一个数组
 
-  默认值：`['**/node_modules/**','**/test/**','**/cypress/**','src/**','**/.vscode/**','**/.git/**','**/dist/**',]`
+  默认值：
+  ```ts
+  [
+    '**/node_modules/**',
+    '**/test/**',
+    'src/**',
+    '**/.vscode/**',
+    '**/.git/**',
+    '**/dist/**'
+  ]
+  ```
 
 - `options.formidableOptions`
   
@@ -209,13 +228,13 @@ export default defineMock({
    * 验证器可以很好的解决这一类问题，将同个 url 分为多个 mock配置，
    * 根据 验证器来判断哪个mock配置生效。
    * 
-   * @type { header?: object; body?: object; query?: object; params?: object  }
+   * @type { headers?: object; body?: object; query?: object; params?: object  }
    * 
    * 如果 validator 传入的是一个对象，那么验证方式是严格比较 请求的接口
    * 中，headers/body/query/params 的各个`key`的`value`是否全等，
    * 全等则校验通过
    * 
-   * @type ({ header: object; body: object; query: object; params: object }) => boolean
+   * @type ({ headers: object; body: object; query: object; params: object }) => boolean
    * 如果 validator 传入的是一个函数，那么会讲 请求的接口相关数据作为入参，提供给使用者进行自定义校验，并返回一个 boolean
    * 
    */
@@ -247,7 +266,7 @@ export default defineMock({
    * @type string | number | array | object
    *  直接返回定义的数据
    * 
-   * @type (request: { header, query, body, params }) => any | Promise<any>
+   * @type (request: { headers, query, body, params }) => any | Promise<any>
    * 如果传入一个函数，那么可以更加灵活的定义返回响应体数据
    */
   body: {},

package/dist/index.cjs

@@ -42,11 +42,11 @@ var import_node_fs2 = __toESM(require("fs"), 1);
 var import_node_module = require("module");
 var import_node_path2 = __toESM(require("path"), 1);
 var import_node_url2 = require("url");
-var import_pluginutils = require("@rollup/pluginutils");
 var import_chokidar = __toESM(require("chokidar"), 1);
 var import_esbuild = require("esbuild");
 var import_fast_glob = __toESM(require("fast-glob"), 1);
 var import_json5 = __toESM(require("json5"), 1);
+var import_vite = require("vite");
 
 // src/utils.ts
 var import_node_fs = __toESM(require("fs"), 1);
@@ -85,11 +85,11 @@ var _require = (0, import_node_module.createRequire)(_dirname);
 var _MockLoader = class extends import_node_events.default {
   constructor(options) {
     super();
+    this.options = options;
     this.moduleCache = /* @__PURE__ */ new Map();
     this.moduleDeps = /* @__PURE__ */ new Map();
-    this._mockList = [];
+    this._mockList = {};
     this.moduleType = "cjs";
-    this.options = options;
     this.cwd = options.cwd || process.cwd();
     try {
       const pkg = lookupFile(this.cwd, ["package.json"]);
@@ -105,7 +105,7 @@ var _MockLoader = class extends import_node_events.default {
     const includePaths = await (0, import_fast_glob.default)(include, {
       cwd: this.cwd
     });
-    const includeFilter = (0, import_pluginutils.createFilter)(include, exclude, {
+    const includeFilter = (0, import_vite.createFilter)(include, exclude, {
       resolve: false
     });
     this.watchMockEntry();
@@ -183,9 +183,15 @@ var _MockLoader = class extends import_node_events.default {
     for (const [, handle] of this.moduleCache.entries()) {
       isArray(handle) ? mockList.push(...handle) : mockList.push(handle);
     }
-    this._mockList = mockList.filter(
-      (mock) => mock.enabled || typeof mock.enabled === "undefined"
-    );
+    const mocks = {};
+    mockList.filter((mock) => mock.enabled || typeof mock.enabled === "undefined").forEach((mock) => {
+      if (!mocks[mock.url]) {
+        mocks[mock.url] = [];
+      }
+      const list = mocks[mock.url];
+      mock.validator ? list.unshift(mock) : list.push(mock);
+    });
+    this._mockList = mocks;
   }
   updateModuleDeps(filepath, deps) {
     Object.keys(deps).forEach((mPath) => {
@@ -274,11 +280,6 @@ var _MockLoader = class extends import_node_events.default {
   }
   async transformWithEsbuild(filepath, isESM) {
     var _a;
-    const userDefine = {};
-    for (const key in this.options.define) {
-      const val = this.options.define[key];
-      userDefine[key] = typeof val === "string" ? val : JSON.stringify(val);
-    }
     try {
       const result = await (0, import_esbuild.build)({
         entryPoints: [filepath],
@@ -289,7 +290,7 @@ var _MockLoader = class extends import_node_events.default {
         bundle: true,
         metafile: true,
         format: isESM ? "esm" : "cjs",
-        define: userDefine,
+        define: this.options.define,
         plugins: [
           {
             name: "externalize-deps",
@@ -377,22 +378,36 @@ function equalObj(left, right) {
 async function mockServerMiddleware(httpServer, config, options) {
   const include = isArray(options.include) ? options.include : [options.include];
   const exclude = isArray(options.exclude) ? options.exclude : [options.exclude];
+  const define = {};
+  if (config.define) {
+    for (const key in config.define) {
+      const val = config.define[key];
+      define[key] = typeof val === "string" ? val : JSON.stringify(val);
+    }
+  }
   const loader = new MockLoader({
     include,
     exclude,
-    define: config.define || {}
+    define
   });
   await loader.load();
   httpServer == null ? void 0 : httpServer.on("close", () => loader.close());
   const proxies = Object.keys(config.server.proxy || {});
   return async function(req, res, next) {
-    if (proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
-      return next();
-    }
     const method = req.method.toUpperCase();
     const { query, pathname } = (0, import_node_url3.parse)(req.url, true);
+    if (!pathname || proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
+      return next();
+    }
+    const mockUrl = Object.keys(loader._mockList).find((key) => {
+      return (0, import_path_to_regexp.pathToRegexp)(key).test(pathname);
+    });
+    if (!mockUrl) {
+      return next();
+    }
+    const mockList = loader.mockList[mockUrl];
     const reqBody = await parseReqBody(req, options.formidableOptions);
-    const currentMock = loader.mockList.find((mock) => {
+    const currentMock = mockList.find((mock) => {
       if (!pathname || !mock || !mock.url)
         return false;
       const methods = mock.method ? isArray(mock.method) ? mock.method : [mock.method] : ["GET", "POST"];
@@ -477,6 +492,7 @@ function doesProxyContextMatchUrl(context, url) {
 }
 
 // src/plugin.ts
+var viteConfig = {};
 function mockDevServerPlugin({
   include = ["mock/**/*.mock.{js,ts,cjs,mjs,json,json5}"],
   exclude = [
@@ -493,6 +509,10 @@ function mockDevServerPlugin({
     name: "vite-plugin-mock-dev-server",
     enforce: "pre",
     apply: "serve",
+    configResolved(config) {
+      viteConfig = config;
+      config.logger.warn("");
+    },
     async configureServer({ middlewares, config, httpServer }) {
       const middleware = await mockServerMiddleware(httpServer, config, {
         include,
@@ -503,6 +523,17 @@ function mockDevServerPlugin({
         }
       });
       middlewares.use(middleware);
+    },
+    async configurePreviewServer({ middlewares, httpServer }) {
+      const middleware = await mockServerMiddleware(httpServer, viteConfig, {
+        include,
+        exclude,
+        formidableOptions: {
+          multiples: true,
+          ...formidableOptions
+        }
+      });
+      middlewares.use(middleware);
     }
   };
 }

package/dist/index.js

@@ -8,11 +8,11 @@ import fs2 from "fs";
 import { createRequire } from "module";
 import path2 from "path";
 import { pathToFileURL } from "url";
-import { createFilter } from "@rollup/pluginutils";
 import chokidar from "chokidar";
 import { build } from "esbuild";
 import fastGlob from "fast-glob";
 import JSON5 from "json5";
+import { createFilter } from "vite";
 
 // src/utils.ts
 import fs from "fs";
@@ -50,11 +50,11 @@ var _require = createRequire(_dirname);
 var _MockLoader = class extends EventEmitter {
   constructor(options) {
     super();
+    this.options = options;
     this.moduleCache = /* @__PURE__ */ new Map();
     this.moduleDeps = /* @__PURE__ */ new Map();
-    this._mockList = [];
+    this._mockList = {};
     this.moduleType = "cjs";
-    this.options = options;
     this.cwd = options.cwd || process.cwd();
     try {
       const pkg = lookupFile(this.cwd, ["package.json"]);
@@ -148,9 +148,15 @@ var _MockLoader = class extends EventEmitter {
     for (const [, handle] of this.moduleCache.entries()) {
       isArray(handle) ? mockList.push(...handle) : mockList.push(handle);
     }
-    this._mockList = mockList.filter(
-      (mock) => mock.enabled || typeof mock.enabled === "undefined"
-    );
+    const mocks = {};
+    mockList.filter((mock) => mock.enabled || typeof mock.enabled === "undefined").forEach((mock) => {
+      if (!mocks[mock.url]) {
+        mocks[mock.url] = [];
+      }
+      const list = mocks[mock.url];
+      mock.validator ? list.unshift(mock) : list.push(mock);
+    });
+    this._mockList = mocks;
   }
   updateModuleDeps(filepath, deps) {
     Object.keys(deps).forEach((mPath) => {
@@ -239,11 +245,6 @@ var _MockLoader = class extends EventEmitter {
   }
   async transformWithEsbuild(filepath, isESM) {
     var _a;
-    const userDefine = {};
-    for (const key in this.options.define) {
-      const val = this.options.define[key];
-      userDefine[key] = typeof val === "string" ? val : JSON.stringify(val);
-    }
     try {
       const result = await build({
         entryPoints: [filepath],
@@ -254,7 +255,7 @@ var _MockLoader = class extends EventEmitter {
         bundle: true,
         metafile: true,
         format: isESM ? "esm" : "cjs",
-        define: userDefine,
+        define: this.options.define,
         plugins: [
           {
             name: "externalize-deps",
@@ -342,22 +343,36 @@ function equalObj(left, right) {
 async function mockServerMiddleware(httpServer, config, options) {
   const include = isArray(options.include) ? options.include : [options.include];
   const exclude = isArray(options.exclude) ? options.exclude : [options.exclude];
+  const define = {};
+  if (config.define) {
+    for (const key in config.define) {
+      const val = config.define[key];
+      define[key] = typeof val === "string" ? val : JSON.stringify(val);
+    }
+  }
   const loader = new MockLoader({
     include,
     exclude,
-    define: config.define || {}
+    define
   });
   await loader.load();
   httpServer == null ? void 0 : httpServer.on("close", () => loader.close());
   const proxies = Object.keys(config.server.proxy || {});
   return async function(req, res, next) {
-    if (proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
-      return next();
-    }
     const method = req.method.toUpperCase();
     const { query, pathname } = urlParse(req.url, true);
+    if (!pathname || proxies.length === 0 || !proxies.some((context) => doesProxyContextMatchUrl(context, req.url))) {
+      return next();
+    }
+    const mockUrl = Object.keys(loader._mockList).find((key) => {
+      return pathToRegexp(key).test(pathname);
+    });
+    if (!mockUrl) {
+      return next();
+    }
+    const mockList = loader.mockList[mockUrl];
     const reqBody = await parseReqBody(req, options.formidableOptions);
-    const currentMock = loader.mockList.find((mock) => {
+    const currentMock = mockList.find((mock) => {
       if (!pathname || !mock || !mock.url)
         return false;
       const methods = mock.method ? isArray(mock.method) ? mock.method : [mock.method] : ["GET", "POST"];
@@ -442,6 +457,7 @@ function doesProxyContextMatchUrl(context, url) {
 }
 
 // src/plugin.ts
+var viteConfig = {};
 function mockDevServerPlugin({
   include = ["mock/**/*.mock.{js,ts,cjs,mjs,json,json5}"],
   exclude = [
@@ -458,6 +474,10 @@ function mockDevServerPlugin({
     name: "vite-plugin-mock-dev-server",
     enforce: "pre",
     apply: "serve",
+    configResolved(config) {
+      viteConfig = config;
+      config.logger.warn("");
+    },
     async configureServer({ middlewares, config, httpServer }) {
       const middleware = await mockServerMiddleware(httpServer, config, {
         include,
@@ -468,6 +488,17 @@ function mockDevServerPlugin({
         }
       });
       middlewares.use(middleware);
+    },
+    async configurePreviewServer({ middlewares, httpServer }) {
+      const middleware = await mockServerMiddleware(httpServer, viteConfig, {
+        include,
+        exclude,
+        formidableOptions: {
+          multiples: true,
+          ...formidableOptions
+        }
+      });
+      middlewares.use(middleware);
     }
   };
 }

package/package.json

@@ -1,15 +1,6 @@
 {
   "name": "vite-plugin-mock-dev-server",
-  "type": "module",
-  "version": "0.3.14",
-  "packageManager": "pnpm@7.18.2",
-  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo)",
-  "license": "GPL-3.0",
-  "homepage": "https://vite-plugin-mock-dev-server.netlify.app",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/pengzhanbo/vite-plugin-mock-dev-server"
-  },
+  "version": "0.3.16",
   "keywords": [
     "vite",
     "plugin",
@@ -17,6 +8,14 @@
     "mock",
     "mock-server"
   ],
+  "homepage": "https://vite-plugin-mock-dev-server.netlify.app",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pengzhanbo/vite-plugin-mock-dev-server"
+  },
+  "license": "GPL-3.0",
+  "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo)",
+  "type": "module",
   "exports": {
     ".": {
       "require": "./dist/index.cjs",
@@ -29,28 +28,8 @@
   "files": [
     "dist"
   ],
-  "engines": {
-    "node": "^14.18.0 || >=16"
-  },
-  "tsup": {
-    "entry": [
-      "src/index.ts"
-    ],
-    "sourcemap": false,
-    "dts": true,
-    "splitting": false,
-    "clean": true,
-    "format": [
-      "esm",
-      "cjs"
-    ]
-  },
   "prettier": "@pengzhanbo/prettier-config",
-  "peerDependencies": {
-    "vite": ">=3.0.0"
-  },
   "dependencies": {
-    "@rollup/pluginutils": "^5.0.2",
     "chokidar": "^3.5.3",
     "co-body": "^6.1.0",
     "debug": "^4.3.4",
@@ -61,30 +40,51 @@
     "path-to-regexp": "^6.2.1"
   },
   "devDependencies": {
-    "@pengzhanbo/eslint-config-ts": "^0.3.1",
-    "@pengzhanbo/prettier-config": "^0.3.1",
+    "@pengzhanbo/eslint-config-ts": "^0.3.2",
+    "@pengzhanbo/prettier-config": "^0.3.2",
     "@types/co-body": "^6.1.0",
     "@types/debug": "^4.1.7",
     "@types/formidable": "^2.0.5",
     "@types/node": "^18.11.7",
     "bumpp": "^8.2.1",
+    "conventional-changelog-cli": "^2.2.2",
     "eslint": "^8.31.0",
     "mockjs": "^1.1.0",
     "prettier": "^2.8.1",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
     "vite": "^4.0.2",
-    "vite-plugin-mock-dev-server": "file:",
-    "vitepress": "1.0.0-alpha.32",
+    "vitepress": "1.0.0-alpha.35",
     "vue": "^3.2.45"
   },
+  "peerDependencies": {
+    "vite": ">=3.0.0"
+  },
+  "packageManager": "pnpm@7.18.2",
+  "engines": {
+    "node": "^14.18.0 || >=16"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "sourcemap": false,
+    "dts": true,
+    "splitting": false,
+    "clean": true,
+    "format": [
+      "esm",
+      "cjs"
+    ]
+  },
   "scripts": {
-    "dev": "DEBUG=vite:plugin-mock-dev-server vite example --config ./example/vite.config.ts",
     "build": "tsup",
-    "docs:dev": "vitepress dev docs",
+    "dev": "DEBUG=vite:plugin-mock-dev-server vite example --config ./example/vite.config.ts",
     "docs:build": "vitepress build docs",
+    "docs:dev": "vitepress dev docs",
     "docs:preview": "vitepress preview docs",
     "lint": "eslint .",
-    "release": "bumpp package.json --commit --push --tag && pnpm publish --access public"
+    "release:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "release": "bumpp package.json --execute=\"pnpm release:changelog\" --commit --all --push --tag && pnpm publish --access public"
   }
 }