vite-plugin-mock-dev-server 0.3.9 → 0.3.11

package/README.md

@@ -33,7 +33,7 @@
 - 🔥 HMR
 - ⚖️ Use `server.proxy`
 - 🍕 Support `viteConfig.define` in mock file
-
+- 📤 Support `multipart` content-type，mock upload file.
 ## Documentation
 
 See the [documentation](https://vite-plugin-mock-dev-server.netlify.app/) to learn more.
@@ -140,6 +140,20 @@ export default defineConfig({
   ]
   ```
 
+- `options.formidableOptions`
+  
+  Configure to `formidable`，see [formidable options](https://github.com/node-formidable/formidable#options)
+
+  Default: `{}`
+
+  example: Configure to file upload dir
+  ```ts
+  MockDevServerPlugin({
+    formidableOptions: {
+      uploadDir: path.join(process.cwd(), 'uploads'),
+    }
+  })
+  ```
 
 ### defineMock(config)
 
@@ -416,6 +430,42 @@ Use json / json5
 }
 ```
 
+### Example 11:
+
+multipart, upload file.
+
+use [`formidable`](https://www.npmjs.com/package/formidable#readme) to supported.
+``` html
+<form action="/api/upload" method="post" enctype="multipart/form-data">
+    <p>
+      <span>file: </span>
+      <input type="file" name="files" multiple />
+    </p>
+    <p>
+      <span>name:</span>
+      <input type="text" name="name" value="mark">
+    </p>
+    <p>
+      <input type="submit" value="submit">
+    </p>
+  </form>
+```
+
+fields `files` mapping to `formidable.File` 
+``` ts
+export default defineMock({
+  url: '/api/upload',
+  method: 'POST',
+  body(req) {
+    const body = req.body
+    return {
+      name: body.name,
+      files: body.files.map((file: any) => file.originalFilename),
+    }
+  },
+})
+```
+
 ## Archives
 
 [awesome-vite](https://github.com/vitejs/awesome-vite#helpers)

package/README.zh-CN.md

@@ -34,6 +34,7 @@
 - 🔥 热更新
 - ⚖️ 使用 `server.proxy` 配置
 - 🍕 支持在 mock文件中使用 `viteConfig.define`配置字段
+- 📤 支持 multipart 类型，模拟文件上传
 
 
 ## 文档
@@ -131,6 +132,21 @@ export default defineConfig({
 
   默认值：`['**/node_modules/**','**/test/**','**/cypress/**','src/**','**/.vscode/**','**/.git/**','**/dist/**',]`
 
+- `options.formidableOptions`
+  
+  配置 `formidable`，查看 [formidable options](https://github.com/node-formidable/formidable#options)
+
+  默认值: `{}`
+
+  示例: 配置文件上传的存放目录
+  ```ts
+  MockDevServerPlugin({
+    formidableOptions: {
+      uploadDir: path.join(process.cwd(), 'uploads'),
+    }
+  })
+  ```
+
 
 ### defineMock(config)
 
@@ -408,6 +424,42 @@ export default defineMock({
 }
 ```
 
+### Example 11:
+
+multipart, 文件上传.
+
+通过 [`formidable`](https://www.npmjs.com/package/formidable#readme) 支持。
+``` html
+<form action="/api/upload" method="post" enctype="multipart/form-data">
+    <p>
+      <span>file: </span>
+      <input type="file" name="files" multiple />
+    </p>
+    <p>
+      <span>name:</span>
+      <input type="text" name="name" value="mark">
+    </p>
+    <p>
+      <input type="submit" value="submit">
+    </p>
+  </form>
+```
+
+fields `files` 映射为 `formidable.File` 类型。
+``` ts
+export default defineMock({
+  url: '/api/upload',
+  method: 'POST',
+  body(req) {
+    const body = req.body
+    return {
+      name: body.name,
+      files: body.files.map((file: any) => file.originalFilename),
+    }
+  },
+})
+```
+
 ## Archives
 
 [awesome-vite](https://github.com/vitejs/awesome-vite#helpers)

package/dist/index.cjs

@@ -322,7 +322,8 @@ MockLoader.EXT_JSON = /\.json5?$/;
 
 // src/parseReqBody.ts
 var import_co_body = __toESM(require("co-body"), 1);
-async function parseReqBody(req) {
+var import_formidable = __toESM(require("formidable"), 1);
+async function parseReqBody(req, options) {
   const method = req.method.toUpperCase();
   if (["GET", "DELETE", "HEAD"].includes(method))
     return void 0;
@@ -336,8 +337,24 @@ async function parseReqBody(req) {
   if (type === "text/plain") {
     return await import_co_body.default.text(req);
   }
+  if (type == null ? void 0 : type.startsWith("multipart/form-data;")) {
+    return await parseMultipart(req, options);
+  }
   return void 0;
 }
+async function parseMultipart(req, options) {
+  const form = (0, import_formidable.default)(options);
+  debug("multiparty start");
+  return new Promise((resolve, reject) => {
+    form.parse(req, (error, fields, files) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve({ ...fields, ...files });
+    });
+  });
+}
 
 // src/validator.ts
 function validate(request, validator) {
@@ -371,7 +388,7 @@ async function mockServerMiddleware(httpServer, config, options) {
     }
     const method = req.method.toUpperCase();
     const { query, pathname } = (0, import_node_url3.parse)(req.url, true);
-    const reqBody = await parseReqBody(req);
+    const reqBody = await parseReqBody(req, options.formidableOptions);
     const currentMock = loader.mockList.find((mock) => {
       if (!pathname || !mock || !mock.url)
         return false;
@@ -467,7 +484,8 @@ function mockDevServerPlugin({
     "**/.vscode/**",
     "**/.git/**",
     "**/dist/**"
-  ]
+  ],
+  formidableOptions = {}
 } = {}) {
   return {
     name: "vite-plugin-mock-dev-server",
@@ -476,7 +494,8 @@ function mockDevServerPlugin({
     async configureServer({ middlewares, config, httpServer }) {
       const middleware = await mockServerMiddleware(httpServer, config, {
         include,
-        exclude
+        exclude,
+        formidableOptions
       });
       middlewares.use(middleware);
     }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { Connect, Plugin } from 'vite';
 import http from 'node:http';
+import formidable from 'formidable';
 
 interface MockServerPluginOptions {
     /**
@@ -13,6 +14,11 @@ interface MockServerPluginOptions {
      * @see https://github.com/micromatch/picomatch#globbing-features
      */
     exclude?: string | string[];
+    /**
+     * formidable options
+     * @see https://github.com/node-formidable/formidable#options
+     */
+    formidableOptions?: formidable.Options;
 }
 type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'TRACE' | 'OPTIONS';
 type ResponseBody = Record<string, any> | any[] | string | number | null;
@@ -109,7 +115,7 @@ interface MockOptionsItem {
 }
 type MockOptions = MockOptionsItem[];
 
-declare function mockDevServerPlugin({ include, exclude, }?: MockServerPluginOptions): Plugin;
+declare function mockDevServerPlugin({ include, exclude, formidableOptions, }?: MockServerPluginOptions): Plugin;
 
 /**
  * mock config helper

package/dist/index.js

@@ -287,7 +287,8 @@ MockLoader.EXT_JSON = /\.json5?$/;
 
 // src/parseReqBody.ts
 import bodyParser from "co-body";
-async function parseReqBody(req) {
+import formidable from "formidable";
+async function parseReqBody(req, options) {
   const method = req.method.toUpperCase();
   if (["GET", "DELETE", "HEAD"].includes(method))
     return void 0;
@@ -301,8 +302,24 @@ async function parseReqBody(req) {
   if (type === "text/plain") {
     return await bodyParser.text(req);
   }
+  if (type == null ? void 0 : type.startsWith("multipart/form-data;")) {
+    return await parseMultipart(req, options);
+  }
   return void 0;
 }
+async function parseMultipart(req, options) {
+  const form = formidable(options);
+  debug("multiparty start");
+  return new Promise((resolve, reject) => {
+    form.parse(req, (error, fields, files) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve({ ...fields, ...files });
+    });
+  });
+}
 
 // src/validator.ts
 function validate(request, validator) {
@@ -336,7 +353,7 @@ async function mockServerMiddleware(httpServer, config, options) {
     }
     const method = req.method.toUpperCase();
     const { query, pathname } = urlParse(req.url, true);
-    const reqBody = await parseReqBody(req);
+    const reqBody = await parseReqBody(req, options.formidableOptions);
     const currentMock = loader.mockList.find((mock) => {
       if (!pathname || !mock || !mock.url)
         return false;
@@ -432,7 +449,8 @@ function mockDevServerPlugin({
     "**/.vscode/**",
     "**/.git/**",
     "**/dist/**"
-  ]
+  ],
+  formidableOptions = {}
 } = {}) {
   return {
     name: "vite-plugin-mock-dev-server",
@@ -441,7 +459,8 @@ function mockDevServerPlugin({
     async configureServer({ middlewares, config, httpServer }) {
       const middleware = await mockServerMiddleware(httpServer, config, {
         include,
-        exclude
+        exclude,
+        formidableOptions
       });
       middlewares.use(middleware);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-mock-dev-server",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "keywords": [
     "vite",
     "plugin",
@@ -49,6 +49,7 @@
     "debug": "^4.3.4",
     "esbuild": "^0.16.9",
     "fast-glob": "^3.2.12",
+    "formidable": "v3",
     "json5": "^2.2.2",
     "path-to-regexp": "^6.2.1"
   },
@@ -57,6 +58,7 @@
     "@pengzhanbo/prettier-config": "^0.2.10",
     "@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",
     "eslint": "^8.30.0",