https://github.com/arc-archive/api-headers-editor

⛔️ DEPRECATED This component is being deprecated. Use `api-request` instead.
https://github.com/arc-archive/api-headers-editor

deprecated obsolete

Last synced: 4 months ago
JSON representation

⛔️ DEPRECATED This component is being deprecated. Use `api-request` instead.

• Host: GitHub
• URL: https://github.com/arc-archive/api-headers-editor
• Owner: arc-archive
• Archived: true
• Created: 2018-03-09T03:29:49.000Z (almost 7 years ago)
• Default Branch: stage
• Last Pushed: 2021-10-01T20:07:57.000Z (over 3 years ago)
• Last Synced: 2024-04-14T22:50:08.879Z (9 months ago)
• Topics: deprecated, obsolete
• Language: JavaScript
• Homepage:
• Size: 838 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DEPRECATED

This component is deprecated. The code base has been moved to [api-request](https://github.com/advanced-rest-client/api-request) module.

--------

A HTTP headers editor.

It allows to edit headers in  a convenient and accessible form editor and also allows to switch to the source edit view (thanks to CodeMirror).

## Deprecation notice

This element is moved to `api-headers` repository and `@api-components/api-headers` package. This element will be deprecated and archived once the migration finish.

The component works as a stand-alone editor that allows to define headers for HTTP request but also works with generated [AMF model](https://a.ml/) from API spec file.

```html

```

**See breaking changes and list of required dependencies at the bottom of this document**

## Version compatibility

This version only works with AMF model version 2 (AMF parser >= 4.0.0).

For compatibility with previous model version use `3.x.x` version of the component.

## Usage

### Installation

```

npm install --save @api-components/api-headers-editor

```

### In an html file

```html

  

    

      import '@api-components/api-headers-editor/api-headers-editor.js';

    

  

  

    

    

    {

      document.querySelector('api-headers-editor').onvalue = (e) {

        console.log('Headers value', e.target.value);

      };

    }

    

  

```

### In a LitElement

```js

import { LitElement, html } from 'lit-element';

import '@api-components/api-headers-editor/api-headers-editor.js';

class SampleElement extends LitElement {

  render() {

    return html`

    

    `;

  }

  _handleValue(e) {

    this.headersValue = e.target.value;

  }

}

customElements.define('sample-element', SampleElement);

```

### Passing AMF data model

```html

{

  const api = await generateApiModel();

  const endpoint = '/api-endpoint';

  const operation = 'GET';

  const headersModelArray = getOperationHeadersFromModel(api, endpoint, operation); // some abstract method

  const editor = document.querySelector('api-headers-editor');

  editor.api = api; // This is required to compute ld+json keys!

  editor.amfHeaders = headersModelArray;

}

```

The `headersModelArray` property is the value of `http://a.ml/vocabularies/http#header` shape of AMF model.

It can be accessed via `supportedOperation` > `expects` shapes.

## Development

```sh

git clone https://github.com/advanced-rest-client/api-headers-editor

cd api-headers-editor

npm install

```

### Running the demo locally

```sh

npm start

```

### Running the tests

```sh

npm test

```

## Breaking Changes in v3

You need to include CodeMirror into the document before importing this element

as it expect this global variable to be already set.

This is due CodeMirror not being able to run as ES module.

Use your build system to bundle CodeMirror into the build and don't forget to export global variable.

```html

```