Giter VIP home page Giter VIP logo

manta-style's Introduction

Manta Style CircleCI Codecov GitHub Greenkeeper badge

๐Ÿš€ Futuristic API Mock Server for Frontend

Manta Style generates API mock endpoints from TypeScript type definitions automatically.

Contents

Installation

CLI

npm install --save-dev @manta-style/cli

You could also install it globally, which adds a command line tool ms to your system.

Plugins

Manta Style needs plugins to support different file types and generate mock data.

The example of Quick Start below is using TypeScript. So first you might want to install TypeScript support to Manta Style.

npm install --save-dev @manta-style/plugin-builder-typescript

If you are new to Manta Style, please install the plugins below. We are going to use them in Quick Start.

npm install --save-dev @manta-style/plugin-mock-example @manta-style/plugin-mock-faker

You could check Plugins for the usages of official plugins. You could make our own plugins as well.

Quick Start

Create mock API configuration

You could use following configuration for test purpose. For more information about syntax, please check out Syntax.

interface User {
  /**
   * @faker {{internet.userName}}
   */
  userName: string;
  gender: 0 | 1 | 2;
  /**
   * @faker date.past
   */
  birthday: number;
  /**
   * @faker {{address.country}}
   */
  country: string;
  /**
   * @faker {{address.state}}
   */
  state: string;
  /**
   * @faker {{address.city}}
   */
  city: string;
}

type WithResponseSuccess<T> = {
  status: 'ok';
  data: T;
};

type WithResponseFailure = {
  status: 'error';
  /**
   * @example Bad Request
   */
  message: string;
};

type WithResponse<T> = WithResponseSuccess<T> | WithResponseFailure;

export type GET = {
  '/user': WithResponse<User>;
};

Launch Manta Style

ms -c ./config.ts

Manta Style launches a mock server at port 3000 by default. The above-stated example would generate following output in the terminal:

Manta Style launched at http://localhost:3000
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ Method โ”‚ Endpoint                   โ”‚ Mocked โ”‚ Proxy โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ผโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚ GET    โ”‚ http://localhost:3000/user โ”‚ Y      โ”‚       โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ดโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
Press O to configure selective mocking
[FAKER MODE] Press S to take an instant snapshot

Access endpoints in your browser

To view the mock data of the example above-stated, just launch a browser (or curl, wget) and access http://localhost:3000/user. Manta Style understands your type definition and generates mock data that respects it.

As WithResponse<User> = WithResponseSuccess<User> | WithResponseFailure, Manta Style would randomly choose one of the types in the union type. Therefore, it could randomly generate mock data for any of following cases:

  1. WithResponseSuccess<User>:
{
  "status": "ok",
  "data": {
    "userName": "Zachariah.VonRueden20",
    "gender": 2,
    "birthday": 646869600,
    "country": "Holy See (Vatican City State)",
    "state": "Massachusetts",
    "city": "South Evietown"
  }
}
  1. WithResponseFailure:
{ "status": "error", "message": "Bad Request" }

Press S to enable snapshot mode for a constant output.

Press O to interactively disable or proxy a mocked endpoint.

Usage

$ ms --help

  Usage: ms [options]

  Options:

    -V, --version              output the version number
    -c --configFile <file>     the TypeScript config file to generate entry points
    -p --port <i> [3000]       To use a port different than 3000
    --proxyUrl <url>           To enable proxy for disabled endpoints
    --generateSnapshot <file>  To generate a API mock data snapshot (Not yet implemented.)
    --useSnapshot <file>       To launch a server with data snapshot
    -v --verbose               show debug information
    -h, --help                 output usage information

Plugins

Mock

Builder

Manta Style supports TypeScript only at the moment via plugin-builder-typescript. More language support is coming soon.

Contributing

Getting Started

yarn install
yarn run bootstrap
yarn run build

Acknowledgments

  • Zhongliang Wang for original idea, architecture design, initial implementation of runtime and transformers.
  • Tan Li Hau for the design and implementation of selective mocking, plugin system, and many official plugins.
  • Jennie Ji for implementation of live-reload feature.

License

Manta Style is MIT licensed

manta-style's People

Contributors

tanhauhau avatar greenkeeper[bot] avatar cryrivers avatar jennieji avatar

Watchers

James Cloos avatar  avatar

manta-style's Issues

RFC: JSDoc Annotations

just write down a few ways of writing the jsdoc,
need to figure out what is the expected behavior

/**
 * @iterate @faker {{internet.userName}}
 * @iterate cryrivers
 * @iterate @proxy http://name-generator.com
 */
name: string;

expected:
iterate through every call:

Note: can have multiline annotations

/**
 * @eval (@query page.size) + (@query page.offset)
 */
next: number;

expected:

  • get query's page.size and query's page.offset
  • and use eval to evalute javascript

Note: can use ( and ) to wrap

/**
 * @precision 2
 * @range 5 10
 */
value: number;
/**
 * @integer
 * @range 5 10
 */
value2: number;

should be written as -->

/**
 * @precision (@range 5 10) 2
 */
value: number;
/**
 * @integer @range 5 10
 */
value2: number;
/**
 * @example manta-style
 * @qotd
 * @iterate open source
 */
message: string;

plugin like iterate should check whether there's other annotation, if yes, it should give warning
or else, will randomly choose 1 line and run the plugin for that line.


To achieve the above, i propose that plugins should be stored as Map instead of array, and each plugin should define their own annotations key, eg: @example, @qotd.
if 2 installed plugins using the same annotation key, will throw warning/error in plugin system constructor

Remove Manta Registry

  • LazyTypeAliasDeclaration
    • lazily initialize the TypeAliasDeclaration
    • hoist all declaration of LazyTypeAliasDeclaration to the start of the file
  • manta-helpers
    • List all the built-in helper type
    • Only import built-in helper type when used.

Use webpack to build manta config code

use custom loader + webpack to transform the code
webpack comes with watch mode, that will watch all dependencies too

this will come in handy when transforming flow defintions.

RFC: Plugin System

I am proposing the following type of plugins:

  1. Mock Plugin
  • package name for mock plugin should start with 'manta-style-plugin-mock-*'
  • the plugin code will look like the following:
module.exports = {
  name: 'plugin-name',
  priority: 1, // do we need priority?
  mock: {
      StringLiteral(type, annotations, next) { }
  }
}
  • During deriveLiteral, each *Literal will iterate through mock plugins based on the priority
  • Should plugins return value be chained?
    ie: each mock plugin is called with the value returned by the previous plugin.
    • this might need some priority of calling the plugin.
  • if no plugin or none of the plugin returns value, will default to the default mock value
  1. Syntax Plugin
  • This is going to be plugins that affect how you transform your code.
  • package name to be like 'manta-style-plugin-sytax-*'
  • examples can think of right now is: 'manta-style-plugin-sytax-flowtype', 'manta-style-plugin-sytax-typescript', 'manta-style-plugin-sytax-graphql', etc.

Plugin Discovery

  • plugin names should follow a certain format as mentioned above
  • will look through package.json, and find out plugins installed.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.