$ npm install -D @clueyjp/ap2
npm install @clueyjp/ap2$ npm install -D @clueyjp/ap2
$ 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:
js
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
`
$3
`
$ 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
`js
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)
`
$3
$ 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`.`js
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
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`
js
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(
}
`Component`
jsx
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 ?
Intercepted API: {url}
{Object.keys(options).map(key=> {
return (
)
})}
: <>
)
}
`Styles`
css
.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
$3
$ 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. |$3
$ 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. |