@advanced-rest-client/multipart-payload-editordeprecated

Multipart payload editor for ARC body editor

Usage no npm install needed!

<script type="module">
  import advancedRestClientMultipartPayloadEditor from 'https://cdn.skypack.dev/@advanced-rest-client/multipart-payload-editor';
</script>

README

Published on NPM

Build Status

Published on webcomponents.org

multipart-payload-editor

An AMF powered multipart payload editor for the HTTP request editor.

<multipart-payload-editor></multipart-payload-editor>

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 @advanced-rest-client/multipart-payload-editor

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/multipart-payload-editor/multipart-payload-editor.js';
    </script>
  </head>
  <body>
    <multipart-payload-editor></multipart-payload-editor>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/multipart-payload-editor/multipart-payload-editor.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <multipart-payload-editor
      .model="${this.modelValue}"
      @value-changed="${this._handleValue}"
      @model-changed="${this._handleModel}"></multipart-payload-editor>
    `;
  }

  _handleValue(e) {
    this.headersValue = e.detail.value;
  }

  _handleModel(e) {
    this.modelValue = e.detail.value;
  }
}
customElements.define('sample-element', SampleElement);

Generating view model from AMF model

When you have API model generated by AMF parser you can use api-view-model-transformer element to produce view model for the editor. This element produces common model for query parametrs, URI parameters, body, and headers.

<api-view-model-transformer @view-model-changed="${this._viewModelChanged}"></api-view-model-transformer>
<multipart-payload-editor></multipart-payload-editor>

<script>
{
  const api = await generateApiModel();
  const endpoint = '/api-endpoint';
  const operation = 'GET';
  const payloadModelArray = getOperationPayloadFromModel(api, endpoint, operation); // some abstract method
  const transformer = document.querySelector('api-view-model-transformer');
  transformer.api = api; // This is required to compute ld+json keys!
  const viewModel = transformer.computeViewModel(headersModelArray);
  document.querySelector('multipart-payload-editor').model = viewModel;
}
</script>

Development

git clone https://github.com/advanced-rest-client/multipart-payload-editor
cd multipart-payload-editor
npm install

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem