chore: finishing LitElement upgrade

arc-archive · Aug 25, 2019 · 1c559cc · 1c559cc
1 parent 405cbf4
commit 1c559cc
Show file tree

Hide file tree

Showing 21 changed files with 86,600 additions and 83,221 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,22 +1,16 @@
+
 language: node_js
-node_js: 8
+node_js: stable
 sudo: required
-before_script: npm install -g polymer-cli @advanced-rest-client/wct-istanbub
 addons:
-  firefox: latest
   apt:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
-      - google-chrome-stable
-  sauce_connect: true
+    - google-chrome-stable
 script:
-  - xvfb-run polymer test --module-resolution=node --npm --plugin local
-  - >-
-    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test
-    --module-resolution=node --npm --plugin sauce --job-name
-    "api-request-editor:${TRAVIS_BRANCH}" --build-number=${TRAVIS_BUILD_NUMBER};
-    fi
+- npm test
+- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then npm run test:sl; fi
 env:
   global:
     - secure: >-

diff --git a/README.md b/README.md
@@ -2,64 +2,76 @@
 
 [![Build Status](https://travis-ci.org/advanced-rest-client/api-request-editor.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/api-request-editor)
 
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/advanced-rest-client/api-request-editor)
-
 ## &lt;api-request-editor&gt;
 
-A HTTP request editor that builds the UI based on AMF model.
+A web component to render accessible request data editor based on AMF model.
+
+This component implements Material Design styles.
+
+
+The component creates the UI for editing a HTTP request. It contains:
+
+-   URL editor
+-   Headers editor
+-   Path/query parameters editor
+-   Payload (body) editor
+-   Authorization editor
 
 **See breaking changes and list of required dependencies at the bottom of this document**
 
-```html
-<api-request-editor
-  narrow
-  base-uri="http://api.domain.com"
-  selected="amf://id"
-  aware="amf-raml-aware"
-  allow-custom
-  allow-disable-params
-  allow-hide-optional
-  redirect-uri="https://auth.domain.com/oauth2/callback"
-  selected-tab="0"
-  content-type="application/json"></api-request-editor>
+## Usage
+
+### Installation
+
+```
+npm install --save @api-components/api-request-editor
 ```
 
-### Working with AMF partial model
+### Handling request event
 
-Only endpoint model with selection set to a method node that is already in the model make sense.
-Because the model don't have server, protocols, and version definition it has to be computed and set manually.
+The element do not perform a request. It dispatches `api-request` custom event with request object on the detail property of the event. The hosting application should handle this event and perform the request. When the response is ready the application should dispatch `api-response` property with the same `id` value from the request object. The element clears its state when the event is handled.
 
-```javascript
-const elm = document.querySelector('api-request-editor');
-const summaryModel = await downloadPartialApiModelSummary();
-const endpointModel = await downloadPartialApiModelEndpoint();
-elm.amfModel = endpointModel; // This must be set before any computation, it contains `@context` property.
-elm.selected = '#123'; // Selected node ID, must be method ID that is in endpoint definition.
-elm.server = elm._computeServer(summaryModel); // This is element's inherited method
-elm.version = conputeApiVersion(summaryModel); // Compute version from `server` model.
-elm.protocols = ['http', 'https']; // This is encoded in AMF model.
-```
+### AMF model selection
 
-### API components
+The element handles selected shape computation after `selected` property is set.
+The property should be set to AMF supportedOperation node's `@id` value.
 
-This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)
+Use [api-navigation](https://github.com/advanced-rest-client/api-navigation) element to provide the user with accessible navigation through the AMF model.
 
-## Usage
+### Override base URI
 
-The component creates the UI for editing HTTP request. It contains:
+Sometimes you may need to override APIs base URI. The element provides `baseUri` property that can be set to replace API's base URI to some other value.
 
--   URL editor
--   Headers editor
--   Path/query parameters editor
--   Payload (body) editor
--   Authorization editor
+### Allowing custom properties
+
+By default the editor only renders form controls to the ones defined in the API spec file.  When model for URI/query parameters, headers, or body is not present then the corresponding editor is not rendered. Also, when the editors are rendered there's no option for the user to defined a parameter that is not defined in the API specification.
+
+To allow the user to add custom properties in the editors use `allowCustom` property. It will force query parameters editor to appear when hidden and the editors renders "add" button in their forms.
+
+
+### Partial model support
+
+Partial model is generated by the AMF service (by MuleSoft) to reduce data transfer size and to reach the performance budget when initializing applications like API Console.
+
+Partial model contains data that are only required to generate view for current API selection.
 
-After setting AMF model on the lement (via `amfModel` property) you can use the `selected` property to point to a HTTP method in the model to render. The value id the `@id` property of the AMF ld+json model for a Supported Operation shape.
+The element renders the model that is given to it. However, partial model may be missing information about server, protocols, and API version which are required to properly compute URL value.
 
-When the user press "send" button an `api-request` custom event is dispatched from the component with request details (see below). The application hosting the element must handle the event and make a HTTP request.
-API components ecosystem provides `@advanced-rest-client/xhr-simple-request` component that handles the event and makes XHR request to the endpoint. Note that with this method CORS applies.
+Note, this can be ignored when setting `baseUri` as this overrides any API model value.
 
-The event has the `id` property that identifies the request. It can be used to identify request/response events later on in the async environment.
+Pass corresponding model values to `server`, `protocols`, and `version` properties when expecting partial AMF model.
+
+
+### OAuth 2
+
+You need to set `redirectUri` property to a OAuth 2 redirect popup location. Otherwise authorization won't be initialized.
+
+
+### Validation
+
+The element sets `invalid` attribute when the editor contains invalid data. You can use it to style the element for invalid input.
+
+When all forms are reported valid but OAuth 2 has no access token value the element still reports it as valid. When the user try to press the send button it will try to force authorization on currently selected authorization panel before making the request.
 
 ### api-request event
 
@@ -75,10 +87,9 @@ Properties set on the detail object:
 -   authType `String` Name of the authorization methods. One of `advanced-rest-client/auth-methods`.
 -   id `String` Generated UUID for the request. Each call of the `execute()` function regenerates the `id`.
 
-### Installation
-```
-npm install --save @api-components/api-request-editor
-```
+
+Use the `id` property to report the response back with `api-response` event.
+
 
 ### In an html file
 
@@ -91,59 +102,99 @@ npm install --save @api-components/api-request-editor
   </head>
   <body>
     <api-request-editor></api-request-editor>
+    <script>
+    {
+      const editor = document.querySelector('api-request-editor');
+      const model = await generateAmfModel();
+      editor.amf = model;
+      editor.selected = '...'; // a method ID from the AMF model
+
+      editor.addEventListener('api-request', () => {
+        // make a request and report the response.
+      });
+    }
+    </script>
   </body>
 </html>
 ```
 
-### In a Polymer 3 element
+### In a LitElement
 
 ```js
-import {PolymerElement, html} from '@polymer/polymer';
+import { LitElement, html } from 'lit-element';
 import '@api-components/api-request-editor/api-request-editor.js';
 
 class SampleElement extends PolymerElement {
-  static get template() {
+  render() {
     return html`
-    <api-request-editor></api-request-editor>
+    <api-request-editor
+      .amf="${this.amf}"
+      .selected="${this.selectedAmfId}"
+      ?allowCustom="${this.allowCustom}"
+      ?allowHideOptional="${this.allowHideOptional}"
+      ?allowDisableParams="${this.allowDisableParams}"
+      ?narrow="${this.narrow}"
+      ?outlined="${this.outlined}"
+      ?legacy="${this.legacy}"
+      ?readOnly="${this.readOnly}"
+      ?disabled="${this.disabled}"
+      ?noDocs="${this.noDocs}"
+      ?noUrlEditor="${this.noUrlEditor}"
+      .redirectUri="${this.redirectUri}"
+      @api-request="${this._apiRequestHandler}"></api-request-editor>
     `;
   }
 
-  _authChanged(e) {
-    console.log(e.detail);
+  _apiRequestHandler(e) {
+    console.log('current request to run', e.detail);
   }
 }
 customElements.define('sample-element', SampleElement);
 ```
 
-### Installation
+
+### Working with AMF partial model
+
+Only endpoint model with selection set to a method node that is already in the model make sense.
+Because the model don't have server, protocols, and version definition it has to be computed and set manually.
+
+```javascript
+const elm = document.querySelector('api-request-editor');
+const summaryModel = await downloadPartialApiModelSummary();
+const endpointModel = await downloadPartialApiModelEndpoint();
+elm.amfModel = endpointModel; // This must be set before any computation, it contains `@context` property.
+elm.selected = '#123'; // Selected node ID, must be method ID that is in endpoint definition.
+elm.server = elm._computeServer(summaryModel); // This is element's inherited method
+elm.version = conputeApiVersion(summaryModel); // Compute version from `server` model.
+elm.protocols = ['http', 'https']; // This is encoded in AMF model.
+```
+
+## Development
 
 ```sh
 git clone https://github.com/advanced-rest-client/api-request-editor
-cd api-url-editor
+cd api-request-editor
 npm install
-npm install -g polymer-cli
 ```
 
 ### Running the demo locally
 
 ```sh
-polymer serve --npm
-open http://127.0.0.1:<port>/demo/
+npm start
 ```
 
 ### Running the tests
 ```sh
-polymer test --npm
+npm test
 ```
 
-## Breaking Changes in v3
+### API components
 
-Due to completely different dependencies import algorithm the CodeMirror and it's dependencies has to
-be included to the web application manually, outside the component.
+This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)
+
+## Breaking Changes in v3
 
-Web Compoennts are ES6 modules and libraries like CodeMirror are not adjusted to
-new spec. Therefore importing the library inside the component won't make it work
-(no reference is created).
+Required dependencies to be included into the app before running this element.
 
 All the dependencies described below are installed with the package.
 
@@ -152,36 +203,33 @@ All the dependencies described below are installed with the package.
 CodeMirror + JSON linter (body editor) + headers hints and syntax (headers editor) + basic syntax (body editor).
 
 ```html
-<script src="../../../jsonlint/lib/jsonlint.js"></script>
-<script src="../../../codemirror/lib/codemirror.js"></script>
-<script src="../../../codemirror/addon/mode/loadmode.js"></script>
-<script src="../../../codemirror/mode/meta.js"></script>
-<script src="../../../codemirror/mode/javascript/javascript.js"></script>
-<script src="../../../codemirror/mode/xml/xml.js"></script>
-<script src="../../../codemirror/mode/htmlmixed/htmlmixed.js"></script>
-<script src="../../../codemirror/addon/lint/lint.js"></script>
-<script src="../../../codemirror/addon/lint/json-lint.js"></script>
-<script src="../../../@advanced-rest-client/code-mirror-hint/headers-addon.js"></script>
-<script src="../../../@advanced-rest-client/code-mirror-hint/show-hint.js"></script>
-<script src="../../../@advanced-rest-client/code-mirror-hint/hint-http-headers.js"></script>
+<script src="/node_modules/web-animations-js/web-animations-next.min.js"></script>
+<!-- dependencies for authorization panel: Digest and Oauth1  -->
+<script src="/node_modules/cryptojslib/components/core.js"></script>
+<script src="/node_modules/cryptojslib/rollups/sha1.js"></script>
+<script src="/node_modules/cryptojslib/components/enc-base64-min.js"></script>
+<script src="/node_modules/cryptojslib/rollups/md5.js"></script>
+<script src="/node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
+<script src="/node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
+<!-- Code mirror -->
+<script src="/node_modules/jsonlint/lib/jsonlint.js"></script>
+<script src="/node_modules/codemirror/lib/codemirror.js"></script>
+<script src="/node_modules/codemirror/addon/mode/loadmode.js"></script>
+<script src="/node_modules/codemirror/mode/meta.js"></script>
+<script src="/node_modules/codemirror/mode/javascript/javascript.js"></script>
+<script src="/node_modules/codemirror/mode/xml/xml.js"></script>
+<script src="/node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+<script src="/node_modules/codemirror/addon/lint/lint.js"></script>
+<script src="/node_modules/codemirror/addon/lint/json-lint.js"></script>
+<link media="all" rel="stylesheet" href="/node_modules/codemirror/addon/lint/lint.css" />
 ```
 
+
 CodeMirror's modes location. May be skipped if all possible modes are already included into the app.
 
 ```html
 <script>
 /* global CodeMirror */
-CodeMirror.modeURL = '../../../codemirror/mode/%N/%N.js';
+CodeMirror.modeURL = 'node_modules/codemirror/mode/%N/%N.js';
 </script>
 ```
-
-**Dependencies for OAuth1 and Digest authorization methods.**
-
-```html
-<script src="../../../cryptojslib/components/core.js"></script>
-<script src="../../../cryptojslib/rollups/sha1.js"></script>
-<script src="../../../cryptojslib/components/enc-base64-min.js"></script>
-<script src="../../../cryptojslib/rollups/md5.js"></script>
-<script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
-<script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>
-```