Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/advanced-rest-client/api-documentation
⛔️ DEPRECATED This component is being deprecated. Use `@api-components/amf-components` instead.
https://github.com/advanced-rest-client/api-documentation
deprecated obsolete
Last synced: about 1 month ago
JSON representation
⛔️ DEPRECATED This component is being deprecated. Use `@api-components/amf-components` instead.
- Host: GitHub
- URL: https://github.com/advanced-rest-client/api-documentation
- Owner: advanced-rest-client
- Created: 2018-04-14T02:11:39.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-09-22T02:53:39.000Z (over 1 year ago)
- Last Synced: 2024-04-14T21:18:37.044Z (8 months ago)
- Topics: deprecated, obsolete
- Language: JavaScript
- Homepage:
- Size: 7.43 MB
- Stars: 0
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DEPRECATED
This component is being deprecated. The code base has been moved to [amf-components](https://github.com/advanced-rest-client/amf-components) module. This module will be archived when [PR 1](https://github.com/advanced-rest-client/amf-components/pull/1) is merged.
-----
A main documentation view for AMF model generated from API spec.
## 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.
[](https://www.npmjs.com/package/@api-components/api-documentation)
[](https://github.com/advanced-rest-client/api-documentation/actions/workflows/deployment.yml)
## Usage
### Installation
```sh
npm install --save @api-components/api-documentation
```
### In an html file
```html
import '@api-components/api-documentation/api-documentation.js';
```
### In a LitElement
```js
import { LitElement, html } from 'lit-element';
import '@api-components/api-documentation/api-documentation.js';
class SampleElement extends PolymerElement {
render() {
return html`
`;
}
_tryitHandler(e) {
console.log('opening api-request-panel...');
}
}
customElements.define('sample-element', SampleElement);
```
### AMF model and selection
Pass the entire AMF model to the element. It accepts models for:
- API
- Documentation fragment
- Type fragment
- Security fragment
- Library fragment
- AMF service partial model
API, library, and partial model for endpoint requires `selected` and `selectedType` properties to be set.
It computes required properties when selection change.
The type can be one of:
- `summary`
- `documentation`
- `type`
- `security`
- `endpoint`
- `method`
The `selected` property id the `@id` value of a model to render. It has to correspond to selected type.
This means, when `selectedType` it `security` then the component scans declarations and references for a type
with given id. If model cannot be found then it renders blank element.
### api-navigation
To avoid dealing with selection and types you can use [api-navigation](https://github.com/advanced-rest-client/api-navigation) element
in combination with `handleNavigationEvents` property. When set, and the navigation is in the DOM, the element listens for navigation
events dispatched from the navigation element when the user changes selection.
Note, initial event when the DOM is constructed might not be handled. Therefore use a default value `summary` for both `selectedType` and `selected`.
```html
```
### inline methods
The components by default render endpoint and method documentation separately. It's mostly for performance reasons and endpoint documentation may contain multiple methods with complex data types. In this case it could potentially slow down the browsers lowering good experience.
However, it is possible to render a single view for an endpoint that includes all methods and the "try it" panel by setting `inlineMethods` property and by providing `scrollTarget`.
The scroll target should be set to either the `window` object or a parent that has scrolling region (overflow set). The endpoint documentation uses this to compute which method is currently being rendered on the screen and to scroll to a method when selection change.
## Development
```sh
git clone https://github.com/advanced-rest-client/api-documentation
cd api-documentation
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```
## Breaking Changes in v3
When using `inlinemethods` property you should note this breaking changes.
### OAuth popup location
The `bower-location` attribute becomes `auth-popup-location`.
It is a path to `node_modules` directory. It can be both relative or absolute location. For example `/static/console/node_modules` will produce OAuth Redirect URI `/static/console/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`.
However, you are encourage to use your own redirect popup. It can be anything but it must post message to the opened window with URL parameters. See `@advanced-rest-client/oauth-authorization/oauth-popup.html` for more details.
### Code Mirror dependencies
Code mirror is not ES6 ready. Their build contains AMD exports which is incompatible with native modules. Therefore the dependencies cannot be imported with the element but outside of it.
The component requires the following scripts to be ready before it's initialized (especially body and headers editors):
```html
```
CodeMirror's modes location. May be skipped if all possible modes are already included into the app.
```html
/* global CodeMirror */
CodeMirror.modeURL = 'node_modules/codemirror/mode/%N/%N.js';
```
### Dependencies for OAuth1 and Digest authorization methods
For the same reasons as for CodeMirror this dependencies are required for OAuth1 and Digest authorization panels to work.
```html
```