Installation

$ npm install -D @clueyjp/ap2

Quick Start

1. Create a config file

Assuming that you are on [ project root ] where package.json exists

$ npx ap2 init --outDir=mock

or you can do this manually by the following steps:

$ mkdir mock
$ touch ./mock/ap2config.js

Copy and paste the code below:

const response = {
  [`https://example.com/api/fake/foo/bar/get/something`]: new Map([
    ['Success', {
      'code': '200',
      'data': {
        'id': '001',
        'name': 'ap2',
      }
    }],
    ['Error', {
      'code': '404',
      'error': {
        'message': 'something went wrong',
      }
    }],
    ['default', {
      'code': '304',
      'data': {
        'message': 'This is the default response'
      }
    }],
  ])
}
const config = {
  useDefault: false,
  response: response,
  // defaultKey: 'default',
}
module.exports = config

2. Run ap2 make command to make Service Worker file

$ npx ap2 make --config=./mock/ap2config.js --watch

ap2 creates Service Worker file under [project root]/public directory by default. If you want to change the output directory, provide the location with --publicDir option.

3. Import ap2

import ap2 from '@clueyjp/ap2'
// ...
if (process.env.NODE_ENV === 'development') {
  ap2({})
}
// YOUR CODE TO CALL API(https://example.com/api/fake/foo/bar/get/something)

4. Start your dev server

$ npm start

Ensure that Service Worker(ap2-sw.js by default) can be loaded on your page. If you are using a build tool, consider changing the output directory other than public.

You will see this in the browser console:

Create the UI to let you choose which response to return

In Quick Start section, {} (empty object) is given to ap2(), however you can pass makeUI function and path to the Service Worker.

The path needs to be updated only if you change the name of Service Worker file by --fileName option when you ran np2 make command.

makeUI accepts url, options, listener.

ap2({
  // path: '/ap2-sw.js', // use '/ap2-sw.js' by default
  makeUI: function(url, options, listener) {
    // UI
  }
})

url is the URL of the intercepted API.

options are defined in ap2config.js, and you can use its key to make a button label. The value is used for a listener.

listener sends back to Service Worker and resolve the Promise() on Service Worker end.

Examples

makeUI

function makeUI(url, options, listener) {
    const interceptorRoot = document.createElement('div')
    interceptorRoot.id = 'api-interceptor'
    document.getElementById('root').insertAdjacentElement('afterend', interceptorRoot)
    const interceptor = require('react-dom/client').createRoot(interceptorRoot)
    interceptor.render(<Interceptor config={{url, options, listener}}/>)
  }

Component

import { useState } from 'react'
import './Interceptor.css';

export default function Interceptor({config}) {
  const [visible, setVisible] = useState(true);
  const {url, options, listener} = config
  
  function _onClick(key) {
    listener(options[key])
    setVisible(false)
  }

  return (
    visible ?
    <div className='interceptor'>
      <div className='interceptor-container'>
        <h1>Intercepted API: {url}</h1>
        <div>
        {Object.keys(options).map(key=> {
          return (
          <div key={key}>
            <button onClick={() => _onClick(key)}>{key}</button>
          </div>)
        })}
        </div>
      </div>
      <div className='interceptor-overlay'></div>
    </div>
    : <></>
  )
}

Styles

.interceptor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.interceptor h1 {  
  color: #ffffff;
}

.interceptor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.interceptor-container {
  position: relative;
  z-index: 99999;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 180px 40px 40px 40px;
  max-width: 70%;
  height: 100%;
}

button {
  display: block;
  width: 300px;
  margin: 0 auto 16px;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

textarea {
  width: 50%;
  height: 200px;
}

CLI commands and options

ap2 init

$ npx ap2 init [options...]

| Option | Required | Default value | Description | |--- |--- |--- | --- | | -o, --outDir | yes | N/A | Provide the path to create a config file. | | -f, --fileName | no | ap2config.js | Specify the name of ap2 config file. |

ap2 make

$ npx ap2 make [options...]

| Option | Required | Default value | Description | |--- |--- |--- | --- | | -c, --config | yes | N/A | Provide the path to your custom config file to define response. | | -f, --fileName | no | ap2-sw.js | Specify the name of Service Worker file. Please match the value with "path" in your client side config when you rename this. | | -p, --publicDir | no | public | Specify the directory where Service Worker sits. | | -w, --watch | no | N/A | A flag which enables the command to watch changes on the config file. |

License

MIT