-
-
Notifications
You must be signed in to change notification settings - Fork 127
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs: add doc for Standalone Bundle #395
Merged
magicmatatjahu
merged 3 commits into
asyncapi:next
from
magicmatatjahu:next-branches/standalone-html-bundle-doc
Jul 19, 2021
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,7 +14,13 @@ Check out this simple sandbox application that uses the Web Component in Angular | |
|
|
||
| [](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, | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you missing Vue here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, I don't forget, we don't have a doc for using the web-component inside Vue (if someone from community raise the issue, we will create it), because if you use the framework, you should the standalone bundle without web-component runtime, so you end with smaller bundle. We have doc for Angular here, because the web-component itself was created by contributors with Angular in mind.