jsxmock
TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published

JSXMOCK

NPM version PR's Welcome


jsxmock 是一个简单的 API Mock 服务器。它的特色就是使用 JSX 语法来声明 API,这个启发来源于 KoaReact。通过 jsxmock 你可以更简洁地定义你的 API,我们提供了一些基础组件,如果不能满足你的需求,你可以使用 React 组件开发的思维来封装和组合自己的组件。

深入了解 jsxmock 可以了解这篇文章: JSX AS DSL? 写个 Mock API 服务器看看


🚧 该项目还处于开发阶段,欢迎一起来搞!


安装

$ npm i jsxmock --save-dev # 或者 yarn add jsxmock -D 

安装后会默认创建一个 jsxmock 命令,你可以用它创建配置文件模板:

$ npx jsxmock --init # 或者 yarn jsxmock --init 

--init 会在当前目录下创建一个 .jsxmock.jsx 文件。如:

/* @jsx h */
import { h, Get, Post } from 'jsxmock'
 
export default () => (
  <server port="4321">
    <Get>hello world</Get>
    <Get path="/foo" code="400">
      foo
    </Get>
    <Post path="/bar">bar</Post>
  </server>
)

跑起来:

$ npx jsxmock # 或者 yarn jsxmock 

jsxmock 默认会使用 4321 端口启动服务器。现在你可以访问 http://localhost:4321 看看。

另外,你现在可以修改 .jsxmock.jsx 文件,jsxmock 会监听文件变动,并自动更新服务器。


使用

基本组件

jsxmock 提供了下列基础组件来进行基本的路径和方法匹配:

  • Get 匹配 HTTP GET 方法
  • Post
  • Put
  • Delete
  • Option
  • Head
  • All 匹配所有方法

它们使用方式都一样,支持下面这些属性:

  • path 可选,默认为 /。路径匹配基于 path-to-regexp, 可以是字符串、正则表达式、数组等形式。详见 path-to-regexp 文档。
  • code: number: 可选,响应码,默认为 200。
  • headers: object: 可选,HTTP 响应报头。
  • skip: boolean: 可选,用于临时忽略这个条规则
  • type: string: 可选,显式设置 Content-Type,默认会根据发送的类型自动检测。例如字符串默认为 text/html, boolean 和 number 默认为 application/json。
  • children: 响应内容,可以是以下类型:
    • 普通类型,如 string, number, object, Array
    • mock: 支持 MockJS
    • 自定义响应函数
    • 其他子组件

代码示例:

/* @jsx h */
import { h, Get, Post, mock } from 'jsxmock'
 
export default () => (
  <server port="4321">
    {/* GET / -> 200 hello world */}
    <Get>hello world</Get>
    <Post path="/login">{{ message: 'success' }}</Post>
 
    {/* 自定义路径、响应代码和报头 */}
    <Get path="/custom-path" code="400" headers={{ 'X-Power-By': 'JSXMOCK' }}>
      {{ custom: 'return json' }}
    </Get>
 
    {/* 其他响应类型 */}
    <Get path="/custom-type" type="text">
      text/plain
    </Get>
    <Get path="/array">{[1, 2, 3]}</Get>
    <Get path="/buffer">{Buffer.from('buffer')}</Get>
    <Get path="/boolean">{true}</Get>
    <Get path="/number">{1}</Get>
 
    {/* 支持 mockjs */}
    <Get path="/mockjs">
      {mock({
        'id|+1': 1,
        email: '@email',
        name: '@clast',
      })}
    </Get>
 
    {/* 自定义响应 */}
    <Get path="/custom-response">
      {(req, res) => {
        res.status(400).send('Bad Request')
      }}
    </Get>
 
    <Get path="/skip" skip>
      临时跳过
    </Get>
  </server>
)

嵌套

jsxmock 组件支持嵌套,规则是只有父组件匹配了,才会进入执行子组件。组件嵌套的特性,可以帮助我们实现更加复杂的需求,例如匹配查询字符串的某个字段:

/* @jsx h */
import { h, Post, MatchBySearch } from 'jsxmock'
 
export default () => (
  <server>
    <Post path="/myapi">
      <MatchBySearch key="method" value="hello">
        Match By Search: /myapi?method=hello
      </MatchBySearch>
      <MatchBySearch key="method" value="hello">
        Match By Search: /myapi?method=world
      </MatchBySearch>
      <BlackHole>eat everything</BlackHole>
    </Post>
  </server>
)

除了 MatchBySearch,我们还内置了下列组件:

  • MatchByHeader 匹配报头字段
  • MatchByBody 匹配 Express req.body
  • MatchByJSON 匹配 JSON
  • MatchByParams 匹配路由变量
  • MatchByForm 匹配表单


其他

服务器配置

server 组件用于配置 Mock 服务器,目前支持这些属性:

  • prefix API 路径前缀, 可选
  • port 端口号, 可选, 默认是 4321
  • host 主机,可选,默认是 0.0.0.0
  • https 是否开启 HTTPS,可选,默认关闭。开启后将自动创建自签名证书

延时返回

;<Get path="/delay">
  <Delay timeout={5000}>Delay Delay...</Delay>
</Get>

重定向

;<Get path="/redirect">
  <Redirect to="https://baidu.com" />
</Get>

代理

代理的实现基于 http-proxy-middleware

;<Proxy
  path={/^\/proxy/}
  target="http://localhost:4321"
  secure={false}
  logLevel="debug"
  pathRewrite={{ '^/': '/test-proxy/' }}
/>

底层组件

可以说,所有的高层组件都是基于 use 这个基础组件进一步封装的。跟它的名字一样,use 命名来源于 Koa 的 app.use。它有以下两个属性:

  • skip 跳过匹配

  • m 中间件,它的签名如下:

    export type Middleware = (
      reqRequest,
      resResponse,
      recurse() => Promise<boolean>,
    ) => Promise<boolean>
    • req Express 的 请求对象
    • res Express 的响应对象
    • recurse 递归执行下级组件。 返回一个 Promise<boolean>,表示下级中间件是否拦截了请求。如果下级组件执行错误,这里也会抛出异常,可以使用 try/catch 包裹
    • 返回值 返回一个 boolean,表示当前中间件拦截了请求。后续的中间件将不会被执行

你可以通过这篇文章了解它的设计思想和基本用法。


封装高层接口协议

JSONRPC

;<JSONRPC path="/jsonrpc">
  <JSONRPC.Method name="hello">hello</JSONRPC.Method>
  <JSONRPC.Method name="world">world</JSONRPC.Method>
  <JSONRPC.Method name="echo">{params => params}</JSONRPC.Method>
  <JSONRPC.Method name="mock">
    {mock({
      'name|1-5': 'str',
    })}
  </JSONRPC.Method>
  <JSONRPC.Method name="error">
    {params => {
      throw { message: 'message', code: 123, data: 'error data' }
    }}
  </JSONRPC.Method>
</JSONRPC>

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i jsxmock

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

60.6 kB

Total Files

52

Last publish

Collaborators

  • carney520