asyncapi · Aryan4884 · Oct 11, 2024 · Oct 14, 2024 · Oct 14, 2024 · Oct 14, 2024
@@ -276,4 +276,3 @@
   "skipCi": false,
   "commitConvention": "angular"
 }
-
@@ -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).
+
+This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/master/CONTRIBUTING.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 = () => <AsyncApiComponent schema={schema} config={config} />;
 
-render(<App />, document.getElementById("root"));
+render(<App />, 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 `<style>` tag in the `<head>` section of the page where you are using AsyncAPI React component.
 
 Example custom styles (defined in the `styles/custom.css` file):
+
 ```css
 html {
   -moz-tab-size: 4;
@@ -147,51 +150,80 @@ html {
 
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family:
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji;
 }
 ```
 
 If you are using the component in a project that uses a bundler like Webpack, don't forget to import the custom styles.
 
-``` js
-import "styles/custom.css";
-import "@asyncapi/react-component/styles/default.min.css";
+```js
+import 'styles/custom.css';
+import '@asyncapi/react-component/styles/default.min.css';
 ```
 
 If you are using the [standalone bundle](./docs/usage/standalone-bundle.md), you can put the custom styles as a style sheet link or as an inline style in the `<head>` section of the HTML code:
 
 ```html
- <head>
-   <!-- Custom style sheet -->
-   <link rel="stylesheet" href="./styles/custom.css">
-
-   <!-- OR as inline style -->
-   <style>
-     html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%};
-     body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji};
-   </style>
-
-   <link rel="stylesheet" href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css">
-
-   ...
- </head>
+<head>
+  <!-- Custom style sheet -->
+  <link rel="stylesheet" href="./styles/custom.css" />
+
+  <!-- OR as inline style -->
+  <style>
+    html {
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      line-height: 1.15;
+      -webkit-text-size-adjust: 100%;
+    }
+    body {
+      margin: 0;
+      font-family:
+        system-ui,
+        -apple-system,
+        Segoe UI,
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        Apple Color Emoji,
+        Segoe UI Emoji;
+    }
+  </style>
+
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/@asyncapi/react-component@latest/styles/default.min.css"
+  />
+
+  ...
+</head>
 ```
 
 ### Custom logo
 
 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:
   title: Account Service
   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:

@@ -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<ExpandConfig>**
 
   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 = () => <AsyncAPIComponent schema={schema} config={config} />;
 
-render(<App />, document.getElementById("root"));
+render(<App />, 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 = () => <AsyncAPIComponent schema={schema} config={config} />;
 
-render(<App />, document.getElementById("root"));
+render(<App />, document.getElementById('root'));
 ```
 
 In the above examples, after concatenation with the default configuration, the resulting configuration looks as follows:

@@ -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
 

@@ -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(<AsyncApiComponent schema={schema} config={config} />, document.getElementById("root"));
+render(
+  <AsyncApiComponent schema={schema} config={config} />,
+  document.getElementById('root'),
+);
 ```
 
 > **NOTE**: You need to load the configuration before rendering the component.