docs: add doc for Standalone Bundle (#395)

asyncapi · Jul 19, 2021 · 1669d71 · 1669d71
1 parent c418164
commit 1669d71
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ To check how to use web-component or use a component in other technologies see:
 - [Using in Angular](./docs/usage/angular.md)
 - [Using in Vue](./docs/usage/vue.md)
 - [Using in NextJS](./docs/usage/nextjs.md)
+- [Standalone bundle usage](./docs/usage/standalone-bundle.md)
 - [Web Component usage](./docs/usage/web-component.md)
 
 ## Props

diff --git a/docs/README.md b/docs/README.md
@@ -13,4 +13,5 @@ This directory contains the following documents that relate to the project:
   - [Using in Angular](./usage/angular.md) describes how to use the AsyncAPI component in Angular project.
   - [Using in Vue](./usage/vue.md) describes how to use the AsyncAPI component in Vue project.
   - [Using in NextJS](./usage/nextjs.md) describes how to use the AsyncAPI component in NextJS project.
+  - [Standalone bundle usage](./usage/standalone-bundle.md) describes how to use the Standalone Bundle of AsyncAPI component with [ReactDOM](https://reactjs.org/docs/react-dom.html) package onboard.
   - [Web Component usage](./usage/web-component.md) describes how to use the `web-component`.
diff --git a/docs/usage/angular.md b/docs/usage/angular.md
@@ -5,7 +5,7 @@ If you wanna use the React AsyncAPI component in your Angular project, you have
 - you may want to use the `AsyncApiStandalone` bundle with `React` and `ReactDom` onboard (preferred option).
 - you may want to use the `@asyncapi/web-component` component as a plain web component.
 
-## AsyncApi standalone bundle
+## Standalone Bundle
 
 ### Prerequisites
 

diff --git a/docs/usage/standalone-bundle.md b/docs/usage/standalone-bundle.md
@@ -0,0 +1,60 @@
+# Standalone bundle
+
+If you are not using React you may want to use the Standalone Bundle of AsyncAPI component with [ReactDOM](https://reactjs.org/docs/react-dom.html) package onboard. It makes it possible to render a component in any other web framework of your choice or in the static HTML webpage.
+
+## Installation
+
+Run this command to install the component in your project:
+
+```sh
+npm install --save @asyncapi/react-component
+```
+
+## Usage in frameworks
+
+Check how to use the Standalone bundle in:
+
+- [Angular](./angular.md#standalone-bundle)
+- [Vue](./vue.md)
+
+## Usage in HTML webpage
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/@asyncapi/[email protected]/styles/default.min.css">
+  </head>
+  <body>
+
+    <div id="asyncapi"></div>
+
+    <script src="https://unpkg.com/@asyncapi/[email protected]/browser/standalone/index.js"></script>
+    <script>
+      AsyncApiStandalone.render({
+        schema: {
+          url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml',
+          options: { method: "GET", mode: "cors" },
+        },
+        config: {
+          show: {
+            sidebar: true,
+          }
+        },
+      }, document.getElementById('asyncapi'));
+    </script>
+
+  </body>
+</html>
+```
+
+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.
+
+> **NOTE**: The Standalone Bundle takes this [same props](../../Readme.md#props) as the normal React component.
+
+> **NOTE**: If there are several components on one page, each one will be rendered using its own properties.
+
+> **NOTE**: If you don't need [ParserJS](https://github.com/asyncapi/parser-js) inside component, you can use the bundle from `.../browser/standalone/without-parser.js` path of the package.
diff --git a/docs/usage/web-component.md b/docs/usage/web-component.md
@@ -14,7 +14,13 @@ Check out this simple sandbox application that uses the Web Component in Angular
 
 [![Edit asyncapi-web-component-in-action](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/asyncapi-web-component-in-action-l652x)
 
-## Usage
+## Usage in frameworks
+
+Check how to use the Web Component in:
+
+- [Angular](./angular.md#web-component)
+
+## Usage in HTML webpage
 
 ```html
 <!-- Remove 'webcomponentsjs' if no support for older browsers is required -->
@@ -23,14 +29,15 @@ Check out this simple sandbox application that uses the Web Component in Angular
 
 <asyncapi-component
   schemaUrl="https://raw.githubusercontent.com/asyncapi/asyncapi/master/examples/2.0.0/streetlights.yml"
+  config='{"show": {"info": false}}'
   schemaFetchOptions='{"method":"GET","mode":"cors"}' <!-- Remove if it is only a plain browser request -->
   cssImportPath="https://unpkg.com/@asyncapi/[email protected]/styles/default.min.css">
 </asyncapi-component>
 ```
 
 > **NOTE**: [webcomponentsjs](https://www.npmjs.com/package/@webcomponents/webcomponentsjs) is a series of polyfills to make code runnable in old browsers. It is **optional** if you do not intend to support any.
 
-> **NOTE**: If a Web Component is called with no properties at all, error will be shown on page.
+> **NOTE**: If a Web Component is called with no properties at all, the error will be shown on the page.
 
 > **NOTE**: If there are several Web Components on one page, each one will be rendered using its own properties.
 
@@ -40,7 +47,7 @@ When invoked as an independent entity, Web Component takes the following props (
 
 - `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.
-- `config` is an **optional** `config` property from the React component,
+- `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.
 - `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,