Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@api-components/amf-components
Advanced tools
Readme
A set of web components based on LitElement that creates the visualization layer on top of the AMF's graph model.
This project replaces all api-*
components from this organization and consolidates the code base under a single repository.
npm install --save @api-components/amf-components
<html>
<head>
<script type="module">
import '@api-components/amf-components/define/api-documentation.js';
import '@api-components/amf-components/define/api-request.js';
import '@api-components/amf-components/define/api-navigation.js';
import '@api-components/amf-components/define/xhr-simple-request.js';
import '@advanced-rest-client/app/define/oidc-authorization.js';
import '@advanced-rest-client/app/define/oauth2-authorization.js';
</script>
</head>
<body>
<!-- A helper library that works with <api-request> to perform an HTTP request in the browser. -->
<xhr-simple-request></xhr-simple-request>
<!-- Authorization libraries to perform OAuth and OIDC authorization. -->
<oauth2-authorization></oauth2-authorization>
<oidc-authorization></oidc-authorization>
<nav>
<!-- The navigation element. Starts with the "summary" page selection. -->
<api-navigation summary domainId="summary" domainType="summary"></api-navigation>
</nav>
<main>
<!-- The main documentation element. Starts with the "summary" page selection. -->
<api-documentation handleNavigationEvents domainId="summary" domainType="summary"></api-documentation>
</main>
<aside>
<!-- The HTTP request editor. Renders forms for user input to make an HTTP request -->
<api-request handleNavigationEvents></api-request>
</aside>
<script type="module">
import { DomEventsAmfStore } from '@api-components/amf-components';
(async () => {
const apiStore = new DomEventsAmfStore();
apiStore.amf = await getAmfModelSomehow();
})();
</script>
</body>
</html>
The components, unlike previously, do not rely on the graph model generated by the AMF parser. Instead they use a custom JavaScript objects generated by the src/helpers/AmfSerializer.js class. These models are provided to the components by the src/store/AmfStore.js or the src/store/DomEventsAmfStore.js. This was developers implementing the components have the most flexibility of providing the console with the graph model that source may be in a different location (like HTTP queries).
See docs/architecture.md for more details.
The request editor uses the Monaco editor (by Microsoft) to render the body editor.
The library has to be loaded to the document before the request editor is rendered. Use the @advanced-rest-client/monaco-support
module and MonacoLoader
class to load the editor with defaults.
import { MonacoLoader } from '@advanced-rest-client/monaco-support';
const base = new URL(`../node_modules/monaco-editor/`, window.location.href).toString();
MonacoLoader.createEnvironment(base);
await MonacoLoader.loadMonaco(base);
await MonacoLoader.monacoReady();
git clone https://github.com/advanced-rest-client/amf-components
cd amf-components
npm install
npm start
npm test
FAQs
A set of web components based on LitElement that creates the visualization layer on top of the AMF's graph model.
The npm package @api-components/amf-components receives a total of 4 weekly downloads. As such, @api-components/amf-components popularity was classified as not popular.
We found that @api-components/amf-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.