From abd0783b25e037cf78ea347c72ee34ae8a22f497 Mon Sep 17 00:00:00 2001 From: Aryan Raj Date: Fri, 11 Oct 2024 05:47:35 +0530 Subject: [PATCH 1/7] added background-color bg-blue-600 --- library/src/containers/Sidebar/Sidebar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index a834a2b40..131f870ce 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -348,7 +348,7 @@ const OperationItem: React.FunctionComponent = ({ config, isAsyncAPIv2, }); - const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600']; + const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600', 'bg-blue-600']; return (
  • Date: Mon, 14 Oct 2024 19:49:22 +0530 Subject: [PATCH 2/7] Prettier-compliant --- playground/specs/streetlights.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/playground/specs/streetlights.ts b/playground/specs/streetlights.ts index 519aa26d2..dd3603bfa 100644 --- a/playground/specs/streetlights.ts +++ b/playground/specs/streetlights.ts @@ -126,7 +126,7 @@ servers: enum: - '15672' - '5672' - dommy-kafka: + dummy-kafka: url: http://localhost:{port} protocol: kafka description: dummy Kafka broker @@ -144,7 +144,7 @@ channels: $ref: '#/components/parameters/streetlightId' servers: - production - - dommy-kafka + - dummy-kafka subscribe: summary: Receive information about environmental lighting conditions of a particular streetlight. operationId: receiveLightMeasurement From 6dfcfa9ff82395a6c7e7e246d937a09015502d09 Mon Sep 17 00:00:00 2001 From: Aryan Raj Date: Mon, 14 Oct 2024 19:55:12 +0530 Subject: [PATCH 3/7] Prettier compliant --- library/src/containers/Sidebar/Sidebar.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index 489880411..16ad20c20 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -348,7 +348,12 @@ const OperationItem: React.FunctionComponent = ({ config, isAsyncAPIv2, }); - const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600', 'bg-blue-600']; + const bgColors = [ + 'bg-red-600', + 'bg-orange-600', + 'bg-green-600', + 'bg-blue-600' + ]; return (
  • = ({ href={`#${operationHrefId}`} onClick={() => setShowSidebar(false)} > - {typeLabel} - + {label}
    • From 2570c9f6379ae5d689d1a314b3056cfa40ab70c6 Mon Sep 17 00:00:00 2001 From: Aryan Raj Date: Mon, 14 Oct 2024 20:42:07 +0530 Subject: [PATCH 4/7] conflict check --- library/src/containers/Sidebar/Sidebar.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index 16ad20c20..48a93e1ce 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -348,12 +348,7 @@ const OperationItem: React.FunctionComponent = ({ config, isAsyncAPIv2, }); - const bgColors = [ - 'bg-red-600', - 'bg-orange-600', - 'bg-green-600', - 'bg-blue-600' - ]; + const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600']; return (
  • = ({ href={`#${operationHrefId}`} onClick={() => setShowSidebar(false)} > - {typeLabel} - + {label}
    • @@ -423,4 +418,4 @@ const ItemsByTagItem: React.FunctionComponent = ({ ); -}; +}; \ No newline at end of file From 7622c2a29f8a6c3e108d505d5e536aabdcbabb4f Mon Sep 17 00:00:00 2001 From: Aryan Raj Date: Mon, 14 Oct 2024 20:49:55 +0530 Subject: [PATCH 5/7] conflict check --- library/src/containers/Sidebar/Sidebar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index 48a93e1ce..d759cbe6e 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -348,7 +348,12 @@ const OperationItem: React.FunctionComponent = ({ config, isAsyncAPIv2, }); - const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600']; + const bgColors = [ + 'bg-red-600', + 'bg-orange-600', + 'bg-green-600', + 'bg-blue-600' + ]; return (
  • Date: Mon, 14 Oct 2024 20:54:48 +0530 Subject: [PATCH 6/7] conflict check --- library/src/containers/Sidebar/Sidebar.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index d759cbe6e..275e5eb19 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -348,12 +348,7 @@ const OperationItem: React.FunctionComponent = ({ config, isAsyncAPIv2, }); - const bgColors = [ - 'bg-red-600', - 'bg-orange-600', - 'bg-green-600', - 'bg-blue-600' - ]; + const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600', 'bg-blue-600',]; return (
  • Date: Mon, 14 Oct 2024 22:06:17 +0530 Subject: [PATCH 7/7] conflict check --- .all-contributorsrc | 1 - CONTRIBUTING.md | 8 +- README.md | 95 ++++++++++----- docs/configuration/config-modification.md | 28 ++--- docs/features/anchors.md | 16 +-- docs/features/highlight.md | 7 +- docs/usage/angular.md | 135 ++++++++++----------- docs/usage/nextjs.md | 19 +-- docs/usage/standalone-bundle.md | 34 +++--- docs/usage/vue.md | 20 +-- docs/usage/web-component.md | 6 +- library/src/containers/Sidebar/Sidebar.tsx | 9 +- playground/next.config.mjs | 2 +- 13 files changed, 215 insertions(+), 165 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 0ba670b58..813c9e2a3 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -276,4 +276,3 @@ "skipCi": false, "commitConvention": "angular" } - diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1334921c2..ed3008e59 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,5 @@ # Contributing to AsyncAPI + We love your input! We want to make contributing to this project as easy and transparent as possible. ## Contribution recogniton @@ -37,12 +38,15 @@ The following is a summary of the ideal contribution flow. Please, note that Pul ``` ## Code of Conduct + AsyncAPI has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](./CODE_OF_CONDUCT.md) so that you can understand what sort of behaviour is expected. ## Our Development Process + We use Github to host code, to track issues and feature requests, as well as accept pull requests. ## Issues + [Open an issue](https://github.com/asyncapi/asyncapi/issues/new) **only** if you want to report a bug or a feature. Don't open issues for questions or support, instead join our [Slack workspace](https://www.asyncapi.com/slack-invite) and ask there. Don't forget to follow our [Slack Etiquette](https://github.com/asyncapi/community/blob/master/slack-etiquette.md) while interacting with community members! It's more likely you'll get help, and much faster! ## Bug Reports and Feature Requests @@ -73,7 +77,9 @@ Prefix that follows specification is not enough though. Remember that the title Happy contributing :heart: ## License + When you submit changes, your submissions are understood to be under the same [Apache 2.0 License](https://github.com/asyncapi/asyncapi/blob/master/LICENSE) that covers the project. Feel free to [contact the maintainers](https://www.asyncapi.com/slack-invite) if that's a concern. ## References -This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md). \ No newline at end of file + +This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.md). diff --git a/README.md b/README.md index 053b205ca..99a4c3a7b 100644 --- a/README.md +++ b/README.md @@ -19,9 +19,9 @@ The official [React](https://reactjs.org/) component for AsyncAPI specification. - [Props](#props) - [Features](#features) - [Styles](#styles) - * [Default styles](#default-styles) - * [Custom styles](#custom-styles) - * [Custom logo](#custom-logo) + - [Default styles](#default-styles) + - [Custom styles](#custom-styles) + - [Custom logo](#custom-logo) - [Playground](#playground) - [Modules](#modules) - [Development](#development) @@ -52,9 +52,9 @@ Check out this sandbox application that uses the React component: Check a simple example which shows passing the inline AsyncAPI specification with custom configurations: ```tsx -import * as React from "react"; -import { render } from "react-dom"; -import AsyncApiComponent, { ConfigInterface } from "@asyncapi/react-component"; +import * as React from 'react'; +import { render } from 'react-dom'; +import AsyncApiComponent, { ConfigInterface } from '@asyncapi/react-component'; const schema = ` asyncapi: '2.0.0' @@ -87,7 +87,7 @@ const config: ConfigInterface = { const App = () => ; -render(, document.getElementById("root")); +render(, document.getElementById('root')); ``` ## Using in other technologies @@ -122,20 +122,23 @@ For a list and description of features offered by the AsyncAPI React component, ## Styles ### Default styles + To use default styles import them as follows: -``` js -import "@asyncapi/react-component/styles/default.css"; +```js +import '@asyncapi/react-component/styles/default.css'; // or minified version -import "@asyncapi/react-component/styles/default.min.css"; +import '@asyncapi/react-component/styles/default.min.css'; ``` ### Custom styles + The AsyncAPI React component does not set any global fonts. This component allows the usage of your custom `font-family` and other styling. This can be done by defining the styles in a file or inline using a ` - - - - ... - + + + + + + + + + + ... + ``` ### Custom logo @@ -182,7 +215,7 @@ If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you The AsyncAPI component supports the option to use a custom logo. By using the `x-logo` custom extension in the [InfoObject](https://github.com/asyncapi/spec/blob/master/spec/asyncapi.md#infoObject), a logo will be shown in the top left corner. > **NOTE**: The logo will only appear if the [sidebar option](./docs/configuration/config-modification.md#definition) is enabled. - + ```yaml asyncapi: 2.2.0 info: @@ -190,8 +223,7 @@ info: version: 1.0.0 description: This service is in charge of processing user signups. x-logo: 'https://raw.githubusercontent.com/asyncapi/spec/master/assets/logo.png' -channels: - ... +channels: ... ``` ## Playground @@ -203,6 +235,7 @@ You can also run the Playground application locally by following [this](./docs/d ## Modules The `@asyncapi/react-component` package has 3 crafted JS modules to be used in various environments: + - `esm` (ECMAScript Modules) is intended for use in a single-page applications with predefined environments like [`create-react-app`](https://github.com/facebook/create-react-app) that are capable of resolving dependencies (via Webpack, Browserify, etc). It can also be used on the server side (for tasks like Server Side Rendering) when the application is using `esm`. - `cjs` (CommonJS Modules) similar uses as for `esm` modules, but using CommonJS modules. - `umd` (Universal Module Definition) is a dependency-free module that includes everything you need to serve AsyncAPI documentation (however [React](https://github.com/facebook/react/tree/master/packages/react) and [ReactDOM](https://github.com/facebook/react/tree/master/packages/react-dom) dependencies must be served separately) on a single-page application that can't resolve npm module dependencies or in normal HTML page. We have 2 types of minified `umd` bundles, with and without [AsyncAPI Parser](https://github.com/asyncapi/parser-js) in paths: diff --git a/docs/configuration/config-modification.md b/docs/configuration/config-modification.md index 3eb36a4cc..c429b215d 100644 --- a/docs/configuration/config-modification.md +++ b/docs/configuration/config-modification.md @@ -23,12 +23,12 @@ interface ConfigInterface { }; expand?: { messageExamples?: boolean; - }, + }; sidebar?: { showServers?: 'byDefault' | 'bySpecTags' | 'byServersTags'; showOperations?: 'byDefault' | 'bySpecTags' | 'byOperationsTags'; useChannelAddressAsIdentifier?: boolean; - }, + }; parserOptions?: ParserOptions; publishLabel?: string; subscribeLabel?: string; @@ -59,7 +59,7 @@ interface ConfigInterface { `showOperations` field is set to `byDefault` by default. `useChannelAddressAsIdentifier`: for AsyncAPI v3 documents, use the operation summary or channel address in the sidebar instead of the operationId. By default, this behavior is applied only to AsyncAPI v2 documents. - + - **expand?: Partial** This field contains configuration responsible for collapsing and expanding component sections. @@ -73,7 +73,7 @@ interface ConfigInterface { - **publishLabel?: string** This field contains configuration responsible for customizing the label for publish operations.This take effect for AsyncAPI v2 documents. - This field is set to `PUB` by default. + This field is set to `PUB` by default. - **subscribeLabel?: string** @@ -107,11 +107,11 @@ See exemplary component configuration in TypeScript and JavaScript. ### TypeScript ```tsx -import * as React from "react"; -import { render } from "react-dom"; -import AsyncAPIComponent, { ConfigInterface } from "@asyncapi/react-component"; +import * as React from 'react'; +import { render } from 'react-dom'; +import AsyncAPIComponent, { ConfigInterface } from '@asyncapi/react-component'; -import { schema } from "./mock"; +import { schema } from './mock'; const config: ConfigInterface = { schemaID: 'custom-spec', @@ -130,17 +130,17 @@ const config: ConfigInterface = { const App = () => ; -render(, document.getElementById("root")); +render(, document.getElementById('root')); ``` ### JavaScript ```jsx -import * as React from "react"; -import { render } from "react-dom"; -import AsyncAPIComponent from "@asyncapi/react-component"; +import * as React from 'react'; +import { render } from 'react-dom'; +import AsyncAPIComponent from '@asyncapi/react-component'; -import { schema } from "./mock"; +import { schema } from './mock'; const config = { schemaID: 'custom-spec', @@ -159,7 +159,7 @@ const config = { const App = () => ; -render(, document.getElementById("root")); +render(, document.getElementById('root')); ``` In the above examples, after concatenation with the default configuration, the resulting configuration looks as follows: diff --git a/docs/features/anchors.md b/docs/features/anchors.md index e05dc5621..82d6dd0a9 100644 --- a/docs/features/anchors.md +++ b/docs/features/anchors.md @@ -11,15 +11,15 @@ Each component has a unique anchor in the `http://{URL}/#{SCHEMA_NAME}-{CONTAINE - `{URL}` is the website URL. - `{SCHEMA_NAME}` is the name of the schema. It is passed to the component by configuration with the [`schemaID`](../configuration/config-modification.md#definition) field. By default, the value of `schemaID` is set to an empty string. - `{CONTAINER}` is the name of the container. The possible values are: `info`, `servers`, `operations`, `messages`, `schemas`. If `ITEM_NAME` is also present then container has singular form like `operation`, `message` etc. -- `{ITEM_NAME}` is the name of the item: - - there are no defined items for the `info` container - - for `operations` container, each item has includes type of operation (`publish` or `subscribe`) like `operation-publish-{ITEM_NAME}-...` +- `{ITEM_NAME}` is the name of the item: + - there are no defined items for the `info` container + - for `operations` container, each item has includes type of operation (`publish` or `subscribe`) like `operation-publish-{ITEM_NAME}-...` - `{ITEM_PROPERTY}` is the name of a particular part of the item. The possible values are: - - for the `info` container: there are no defined properties - - for the `servers` container: `url-variables`, `security` - - for the `operations` container: `parameters`, `message` - - for the `messages` container: `payload`, `headers` - - for the `schemas` container: there are no defined properties + - for the `info` container: there are no defined properties + - for the `servers` container: `url-variables`, `security` + - for the `operations` container: `parameters`, `message` + - for the `messages` container: `payload`, `headers` + - for the `schemas` container: there are no defined properties ## Examples diff --git a/docs/features/highlight.md b/docs/features/highlight.md index 414685e94..90d526bbf 100644 --- a/docs/features/highlight.md +++ b/docs/features/highlight.md @@ -11,13 +11,16 @@ To add configuration for an additional language, import configuration from `high See how to add a configuration in the example below: ```js -import AsyncApiComponent, { hljs } from "@asyncapi/react-component"; +import AsyncApiComponent, { hljs } from '@asyncapi/react-component'; import csharp from 'highlight.js/lib/languages/csharp'; hljs.registerLanguage('csharp', csharp); // And then you can use the comppnent. -render(, document.getElementById("root")); +render( + , + document.getElementById('root'), +); ``` > **NOTE**: You need to load the configuration before rendering the component. diff --git a/docs/usage/angular.md b/docs/usage/angular.md index 3e61e705e..28ebb948b 100644 --- a/docs/usage/angular.md +++ b/docs/usage/angular.md @@ -21,32 +21,30 @@ To use component in Angular, follow these steps: 1. Import `@asyncapi/react-component/browser/standalone` bundle and create similar component as below: - ```ts - import { Component, ElementRef, OnDestroy, AfterViewInit, } from '@angular/core'; - import AsyncApiStandalone from "@asyncapi/react-component/browser/standalone"; - - @Component({ - selector: 'asyncapi', - template: ` -
    - `, - styleUrls: ['./asyncapi.component.scss'] - }) - export class AsyncApiComponent implements OnDestroy, AfterViewInit { - constructor(private element: ElementRef) {} - - ngAfterViewInit() { - const schema = `...`; // AsyncAPI specification, fetched or pasted. - const config = {}; // Configuration for component. This same as for normal React component - const container = this.element.nativeElement.querySelector('#asyncapi-doc'); - AsyncApiStandalone.render({ schema, config }, container); - } - - ngOnDestroy(): void { - this.element.nativeElement.querySelector('#asyncapi-doc').remove(); - } +```ts +import { Component, ElementRef, OnDestroy, AfterViewInit } from '@angular/core'; +import AsyncApiStandalone from '@asyncapi/react-component/browser/standalone'; + +@Component({ + selector: 'asyncapi', + template: `
    `, + styleUrls: ['./asyncapi.component.scss'], +}) +export class AsyncApiComponent implements OnDestroy, AfterViewInit { + constructor(private element: ElementRef) {} + + ngAfterViewInit() { + const schema = `...`; // AsyncAPI specification, fetched or pasted. + const config = {}; // Configuration for component. This same as for normal React component + const container = this.element.nativeElement.querySelector('#asyncapi-doc'); + AsyncApiStandalone.render({ schema, config }, container); } - ``` + + ngOnDestroy(): void { + this.element.nativeElement.querySelector('#asyncapi-doc').remove(); + } +} +``` 2. Update given `NgModule` in which you want to use the component by importing the component into the `declarations` array. @@ -70,49 +68,50 @@ To use the component in Angular, follow these steps: 1. Update `AppModule` by adding the `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` array in the `NgModule` metadata: - ```ts - import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; - - @NgModule({ - ... - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - ] - }) - export class AppModule {} - ``` - -2. Import the `@asyncapi/web-component` module in an Angular's component where you want to use the web component: - - ```ts - import { Component } from '@angular/core'; - import '@asyncapi/web-component/lib/asyncapi-web-component'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - ... - } - ``` +```ts +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@NgModule({ + ... + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + ] +}) +export class AppModule {} +``` + +2. Import the `@asyncapi/web-component` module in an Angular's component where you want to use the web component: + +```ts +import { Component } from '@angular/core'; +import '@asyncapi/web-component/lib/asyncapi-web-component'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { + ... +} +``` 3. Use web component in the template as follows: - ```html - - - ``` - - where: - - - `schema`, `config`, `schemaUrl`, `schemaFetchOptions` are Web Component's properties used in any valid combination, as described in [Web Component specification](#web-component), - - `cssImportPath` is the path to styles. By default it is `assets/default.min.css` - - > **NOTE**: The easiest way to use the default `css` is to copy the content of the `@asyncapi/react-component/styles/default.min.css` file to a `assets/default.min.css` file. +```html + + +``` + +where: + +- `schema`, `config`, `schemaUrl`, `schemaFetchOptions` are Web Component's properties used in any valid combination, as described in [Web Component specification](#web-component), +- `cssImportPath` is the path to styles. By default it is `assets/default.min.css` + +> **NOTE**: The easiest way to use the default `css` is to copy the content of the `@asyncapi/react-component/styles/default.min.css` file to a `assets/default.min.css` file. diff --git a/docs/usage/nextjs.md b/docs/usage/nextjs.md index 2bf0cd7d8..bd934e238 100644 --- a/docs/usage/nextjs.md +++ b/docs/usage/nextjs.md @@ -21,10 +21,13 @@ The `@asyncapi/react-component` package has a special `umd` bundle that can be u import dynamic from 'next/dynamic'; // Import styles -import "@asyncapi/react-component/styles/default.min.css"; +import '@asyncapi/react-component/styles/default.min.css'; // Import component without SSR/SSG -const AsyncApiComponent = dynamic(() => import('@asyncapi/react-component/browser'), { ssr: false }); +const AsyncApiComponent = dynamic( + () => import('@asyncapi/react-component/browser'), + { ssr: false }, +); // `schema` and `config` are these same properties as for normal AsyncAPI React component export default function AsyncApiDocs({ schema, config }) { @@ -45,18 +48,16 @@ npm install --save @asyncapi/parser Then we need to use the parser and component as follows: ```js -import { parse } from "@asyncapi/parser"; +import { parse } from '@asyncapi/parser'; // import component without parser onboard -import { AsyncApiComponentWP } from "@asyncapi/react-component"; +import { AsyncApiComponentWP } from '@asyncapi/react-component'; // Import styles -import "@asyncapi/react-component/styles/default.min.css"; +import '@asyncapi/react-component/styles/default.min.css'; export default function AsyncApiDocsPage({ asyncapi }) { const config = {}; // Configuration for component. This same as for normal React component - return ( - - ) + return ; } // This function gets called at build time @@ -72,7 +73,7 @@ export async function getStaticProps() { props: { asyncapi: stringified, }, - } + }; } ``` diff --git a/docs/usage/standalone-bundle.md b/docs/usage/standalone-bundle.md index 2dfc7366c..e4c7d50c3 100644 --- a/docs/usage/standalone-bundle.md +++ b/docs/usage/standalone-bundle.md @@ -20,35 +20,39 @@ Check how to use the Standalone bundle in: ## Usage in HTML webpage ```html - + - + -
    - ``` -The Standalone Bundle exports two functions: +The Standalone Bundle exports two functions: - `render`, which works like [ReactDOM.render](https://reactjs.org/docs/react-dom.html#render) function, where first argument is the [props for component](../../README.md#props) and the second is the HTML Node, - `hydrate`, which works like [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate) function, where first argument is the [props for component](../../README.md#props) and the second is the HTML Node. diff --git a/docs/usage/vue.md b/docs/usage/vue.md index aec6e4607..1eb1e7de8 100644 --- a/docs/usage/vue.md +++ b/docs/usage/vue.md @@ -16,12 +16,12 @@ To use component in Angular, follow these steps: 1. Import `@asyncapi/react-component/browser/standalone` bundle and create similar component as below: - ```html - +```html + - - ``` + }, + }; + +``` 2. Copy styles `@asyncapi/react-component/styles/default.min.css` to `assets/asyncapi.min.css` and import in component as: diff --git a/docs/usage/web-component.md b/docs/usage/web-component.md index 2402e8b04..706f26f39 100644 --- a/docs/usage/web-component.md +++ b/docs/usage/web-component.md @@ -46,10 +46,10 @@ Check how to use the Web Component in: When invoked as an independent entity, Web Component takes the following props (as it is still a React component): - `schema` is a `schema` property from the React component, - > **NOTE**: Since version 0.19.0 specifying a `schema` object can be omitted. `schema.url` and `schema.requestOptions` can be replaced with `schemaUrl` and `schemaFetchOptions` properties accordingly. + > **NOTE**: Since version 0.19.0 specifying a `schema` object can be omitted. `schema.url` and `schema.requestOptions` can be replaced with `schemaUrl` and `schemaFetchOptions` properties accordingly. - `config` is an **optional** `config` property from the React component in the stringified JSON format, - `schemaUrl` property is a `string`, specific to Web Component, containing a URL to fetch an AsyncAPI Schema from. It is a wrapper for `schema.url` property in `schema` object under the hood, - > **NOTE**: If `schemaUrl` property is specified, the `schema.url` property of the React component will be ignored. + > **NOTE**: If `schemaUrl` property is specified, the `schema.url` property of the React component will be ignored. - `schemaFetchOptions` property is an **optional** `object` of [RequestInit](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.requestinit.html) type in JSON format, specific to Web Component, containing additional fetching options. It is a wrapper for `schema.requestOptions` property in `schema` object, which are both needed only in case process of fetching from a URL is any different from a usual browser request, - > **NOTE**: If `schemaFetchOptions` property is specified, `schema.requestOptions` property of the React component will be ignored. If `schemaUrl` property is NOT specified, `schemaFetchOptions` will be ignored itself and `schema.url`/`schema.requestOptions` properties of the React component must be used in this case. + > **NOTE**: If `schemaFetchOptions` property is specified, `schema.requestOptions` property of the React component will be ignored. If `schemaUrl` property is NOT specified, `schemaFetchOptions` will be ignored itself and `schema.url`/`schema.requestOptions` properties of the React component must be used in this case. - `cssImportPath` property is the path to styles. Default version from `unpkg.com` contains guaranteed minimum styling for the Web Component, diff --git a/library/src/containers/Sidebar/Sidebar.tsx b/library/src/containers/Sidebar/Sidebar.tsx index 275e5eb19..7a106b9b6 100644 --- a/library/src/containers/Sidebar/Sidebar.tsx +++ b/library/src/containers/Sidebar/Sidebar.tsx @@ -348,7 +348,12 @@ const OperationItem: React.FunctionComponent = ({ config, isAsyncAPIv2, }); - const bgColors = ['bg-red-600', 'bg-orange-600', 'bg-green-600', 'bg-blue-600',]; + const bgColors = [ + 'bg-red-600', + 'bg-orange-600', + 'bg-green-600', + 'bg-blue-600', + ]; return (
  • = ({ ); -}; \ No newline at end of file +}; diff --git a/playground/next.config.mjs b/playground/next.config.mjs index 274ead23c..4d25b46f8 100644 --- a/playground/next.config.mjs +++ b/playground/next.config.mjs @@ -16,7 +16,7 @@ const nextConfig = { compiler: { styledComponents: true, }, - webpack: config => { + webpack: (config) => { config.resolve.fallback = { fs: false, };