Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vite-plugin-mock-dev-server

Package Overview
Dependencies
Maintainers
1
Versions
84
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vite-plugin-mock-dev-server - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

34

dist/index.d.ts
import { Connect, Plugin, ResolvedConfig } from 'vite';
import http from 'node:http';
import { Readable } from 'node:stream';
import Cookies from 'cookies';

@@ -82,3 +83,3 @@ import formidable from 'formidable';

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 {

@@ -223,2 +224,33 @@ /**

/**
* 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

@@ -225,0 +257,0 @@ *

69

dist/index.js

@@ -12,3 +12,3 @@ // src/build.ts

var name = "vite-plugin-mock-dev-server";
var version = "1.1.2";
var version = "1.1.3";

@@ -100,2 +100,4 @@ // src/esbuildPlugin.ts

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) {

@@ -140,4 +142,5 @@ return new Promise((resolve) => setTimeout(resolve, timeout));

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);

@@ -324,5 +327,7 @@ return proxies;

// 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";

@@ -390,3 +395,2 @@ import colors2 from "picocolors";

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))) {

@@ -401,2 +405,3 @@ return next();

return next();
const { query: refererQuery } = urlParse(req.headers.referer || "", true);
const reqBody = await parseReqBody(req, formidableOptions);

@@ -422,11 +427,18 @@ const method = req.method.toUpperCase();

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) {

@@ -479,12 +491,13 @@ log.error(`${colors2.red("[body error]")} ${req.url}

}
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]);
});

@@ -496,14 +509,14 @@ } catch (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);
}

@@ -516,2 +529,12 @@ });

}
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) {

@@ -518,0 +541,0 @@ if (!delay || delay <= 0)

10

package.json
{
"name": "vite-plugin-mock-dev-server",
"version": "1.1.2",
"version": "1.1.3",
"keywords": [

@@ -43,2 +43,3 @@ "vite",

"json5": "^2.2.3",
"mime-types": "^2.1.35",
"path-to-regexp": "^6.2.1",

@@ -55,6 +56,7 @@ "picocolors": "^1.0.0"

"@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",

@@ -64,3 +66,3 @@ "prettier": "^2.8.7",

"typescript": "^5.0.4",
"vite": "^4.3.0",
"vite": "^4.3.1",
"vitepress": "1.0.0-alpha.73",

@@ -67,0 +69,0 @@ "vue": "^3.2.47"

161

README.md

@@ -263,2 +263,4 @@ # vite-plugin-mock-dev-server

* 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
*/

@@ -268,3 +270,2 @@ url: '/api/test',

* Supported request methods of the interface.
*
* @type string | string[]

@@ -287,3 +288,2 @@ * @default ['POST','GET']

* Set interface response delay, unit: ms.
*
* @default 0

@@ -294,3 +294,2 @@ */

* response status
*
* @default 200

@@ -316,4 +315,4 @@ */

* 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,

@@ -337,7 +336,4 @@ * then the data related to the requested interface will be provided as input parameters

/**
*
* response headers
*
* @type Record<string, any>
*
* @type (({ query, body, params, headers }) => Record<string, any>)

@@ -358,13 +354,24 @@ */

},
/**
* 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: '',

@@ -418,3 +425,3 @@ /**

> Tips：
> **Tips：**
>

@@ -425,2 +432,4 @@ > If you write mock files using json/json5,

## Example
`mock/**/*.mock.{ts,js,mjs,cjs,json,json5}`

@@ -430,4 +439,3 @@

#### 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

@@ -439,15 +447,12 @@ export default defineMock({

#### 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

@@ -460,10 +465,8 @@ 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' },
})

@@ -475,5 +478,6 @@ ```

headers({ query, body, params, headers }) {
return {
'X-Custom': query.custom
}
return { 'X-Custom': query.custom }
},
cookies() {
return { 'my-cookie': '123456789' }
}

@@ -483,4 +487,4 @@ })

#### 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

@@ -492,9 +496,5 @@ export default defineMock([

validator: {
query: {
a: 1
}
query: { a: 1 },
},
body: {
message: 'query.a == 1'
}
body: { message: 'query.a == 1' },
},

@@ -505,18 +505,10 @@ // Match /api/test?a=2

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' }
}

@@ -526,4 +518,4 @@ ])

#### Example 6：
Response Delay
**exp:** Response Delay
```ts

@@ -536,4 +528,4 @@ export default defineMock({

#### Example 7：
The interface request failed
**exp:** The interface request failed
```ts

@@ -547,4 +539,4 @@ export default defineMock({

#### Example 8:
Dynamic route matching
**exp:** Dynamic route matching
```ts

@@ -554,5 +546,3 @@ export default defineMock({

body({ params }) {
return {
userId: params.userId,
}
return { userId: params.userId }
}

@@ -564,5 +554,41 @@ })

#### 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'

@@ -580,4 +606,4 @@ export default defineMock({

### Example 10：
Use `response` to customize the response
**exp:** Use `response` to customize the response
```ts

@@ -601,7 +627,6 @@ export default defineMock({

### Example 11：
Use json / json5
**exp:** Use json / json5
```json
{
// Support comment
"url": "/api/test",

@@ -614,6 +639,6 @@ "body": {

### Example 12:
multipart, upload file.
**exp:** multipart, upload file.
use [`formidable`](https://www.npmjs.com/package/formidable#readme) to supported.

@@ -620,0 +645,0 @@ ``` html

161

README.zh-CN.md

@@ -258,3 +258,5 @@ # vite-plugin-mock-dev-server

/**
* 请求地址，支持 `/api/user/:id` 格式
* 请求地址，支持 `/api/user/:id` 格式
* 插件通过 `path-to-regexp` 匹配路径
* @see https://github.com/pillarjs/path-to-regexp
*/

@@ -264,3 +266,2 @@ url: '/api/test',

* 接口支持的请求方法
*
* @type string | string[]

@@ -273,7 +274,5 @@ * @default ['POST','GET']

* 是否启用当前 mock请求
*
* 在实际场景中，我们一般只需要某几个mock接口生效，
* 而不是所以mock接口都启用。
* 对当前不需要mock的接口，可设置为 false
*
* @default true

@@ -284,3 +283,2 @@ */

* 设置接口响应延迟， 单位：ms
*
* @default 0

@@ -291,3 +289,2 @@ */

* 响应状态码
*
* @default 200

@@ -328,7 +325,4 @@ */

/**
*
* 响应状态 headers
*
* @type Record<string, any>
*
* @type (({ query, body, params, headers }) => Record<string, any>)

@@ -352,2 +346,14 @@ * 入参部分为 请求相关信息

/**
* 响应体数据类型, 可选值包括 `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',
/**
* 响应体数据

@@ -370,6 +376,4 @@ * 定义返回的响应体数据内容。

* 实现完全可控的自定义配置
*
* 在 req参数中，已内置了 query、body、params 的解析，
* 你可以直接使用它们
*
* 你可以直接使用它们。
* 别忘了，需要通过 `res.end()` 返回响应体数据，

@@ -418,6 +422,8 @@ * 或者需要跳过mock，那么别忘了调用 `next()`

> 注意：
> **注意：**
>
> 如果使用 json/json5 编写 mock文件，则不支持使用 `response` 方法，以及不支持使用其他字段的函数形式。
## Example
`mock/**/*.mock.{ts,js,mjs,cjs,json,json5}`

@@ -427,4 +433,3 @@

#### 示例1：
命中 `/api/test` 请求，并返回一个 数据为空的响应体内容
**exp:** 命中 `/api/test` 请求，并返回一个 数据为空的响应体内容
```ts

@@ -436,15 +441,17 @@ export default defineMock({

#### 示例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

@@ -457,10 +464,9 @@ 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' },
})

@@ -472,5 +478,6 @@ ```

headers({ query, body, params, headers }) {
return {
'X-Custom': query.custom
}
return { 'X-Custom': query.custom }
},
cookies() {
return { 'my-cookie': '123456789' }
}

@@ -480,4 +487,3 @@ })

#### 示例5：
定义多个相同url请求mock，并使用验证器匹配生效规则
**exp:** 定义多个相同url请求mock，并使用验证器匹配生效规则
```ts

@@ -489,9 +495,5 @@ export default defineMock([

validator: {
query: {
a: 1
}
query: { a: 1 },
},
body: {
message: 'query.a === 1'
}
body: { message: 'query.a === 1' },
},

@@ -502,18 +504,10 @@ // 命中 /api/test?a=2

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' },
}

@@ -523,4 +517,4 @@ ])

#### 示例6：
延迟接口响应：
**exp:** 延迟接口响应：
```ts

@@ -533,8 +527,7 @@ export default defineMock({

#### 示例7：
使接口请求失败
**exp:** 使接口请求失败
```ts
export default defineMock({
url: '/api/test',
status: 504,
status: 502,
statusText: 'Bad Gateway'

@@ -544,4 +537,3 @@ })

#### 示例8:
动态路由匹配
**exp:** 动态路由匹配
```ts

@@ -551,5 +543,3 @@ export default defineMock({

body({ params }) {
return {
userId: params.userId,
}
return { userId: params.userId }
}

@@ -561,5 +551,40 @@ })

#### 示例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'

@@ -577,4 +602,4 @@ export default defineMock({

### 示例10：
使用 `response` 自定义响应
**exp:** 使用 `response` 自定义响应
```ts

@@ -598,7 +623,6 @@ export default defineMock({

### 示例11：
使用 json / json5
**exp:** 使用 json / json5
```json
{
// 支持 comment
"url": "/api/test",

@@ -611,5 +635,4 @@ "body": {

### Example 12:
multipart, 文件上传.
**exp:** multipart, 文件上传.

@@ -616,0 +639,0 @@ 通过 [`formidable`](https://www.npmjs.com/package/formidable#readme) 支持。

dist/index.cjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc