| 1 | # @vercel/integration-utils
|
| 2 |
|
| 3 | [](https://www.npmjs.com/package/@vercel/integration-utils) [](https://packagephobia.now.sh/result?p=@vercel/integration-utils) [](https://circleci.com/gh/vercel/workflows/integration-utils) [](https://circleci.com/gh/vercel/workflows/integration-utils)
|
| 4 |
|
| 5 | A set of utilies for Vercel Integrations.<br/>
|
| 6 | Vist https://vercel.com/docs/integrations for more details.
|
| 7 |
|
| 8 | ## Install
|
| 9 |
|
| 10 | ```
|
| 11 | yarn add @vercel/integrations
|
| 12 | ```
|
| 13 |
|
| 14 | ## Middleware for Micro / Vercel
|
| 15 |
|
| 16 | This middleware helps to write UiHook for Vercel integrations easily.
|
| 17 | ```js
|
| 18 | const {withUiHook} = require('@vercel/integration-utils');
|
| 19 |
|
| 20 | module.exports = withUiHook(async (options) => {
|
| 21 | const {payload, vercelClient} = options;
|
| 22 | const {action, clientState} = payload;
|
| 23 | let metadata = await vercelClient.getMetadata();
|
| 24 |
|
| 25 | if (action === 'submit') {
|
| 26 | metadata = clientState;
|
| 27 | await vercelClient.setMetadata(metadata);
|
| 28 | }
|
| 29 |
|
| 30 | if (action === 'reset') {
|
| 31 | metadata = {};
|
| 32 | await vercelClient.setMetadata(metadata);
|
| 33 | }
|
| 34 |
|
| 35 | return `
|
| 36 | <Page>
|
| 37 | <Container>
|
| 38 | <Input label="Secret Id" name="secretId" value="${metadata.secretId || ''}"/>
|
| 39 | <Input label="Secret Key" name="secretKey" type="password" value="${metadata.secretKey || ''}" />
|
| 40 | </Container>
|
| 41 | <Container>
|
| 42 | <Button action="submit">Submit</Button>
|
| 43 | <Button action="reset">Reset</Button>
|
| 44 | </Container>
|
| 45 | </Page>
|
| 46 | `;
|
| 47 | });
|
| 48 |
|
| 49 | ```
|
| 50 |
|
| 51 | This middleware calls the handler with an object containing following entities:
|
| 52 |
|
| 53 | * [payload](./src/types.ts#L9) - the information related uiHook
|
| 54 | * [vercelClient](./src/vercel-client.ts) - initialized API client for Vercel with some helpers
|
| 55 |
|