Newton's Principia Mathematica
    Have ideas to improve npm?Join in the discussion! »

    This package has been deprecated

    Author message:

    This component is deprecated

    @advanced-rest-client/multipart-payload-editor
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    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

    Install

    npm i @advanced-rest-client/multipart-payload-editor

    DownloadsWeekly Downloads

    201

    Version

    4.1.0

    License

    Apache-2.0

    Unpacked Size

    115 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar