chore: add webcomponent draft (#148)

* support webcomponent for asyncapi component * support webcomponent for asyncapi component * updated to match new project structure * remove file-system dependencies / add readme * separated web-component into separate subproject / changes due to review comments * updated readme * Update README.md Co-authored-by: Hesyar Uzuner <[email protected]> Co-authored-by: E516981 <[email protected]> Co-authored-by: Maciej Urbańczyk <[email protected]>
asyncapi · Nov 3, 2020 · 0d25b41 · 0d25b41
1 parent 682874e
commit 0d25b41
Show file tree

Hide file tree

Showing 9 changed files with 4,503 additions and 278 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,54 @@ import "@kyma-project/asyncapi-react/lib/styles/fiori.css";
 
 For information on how to change styles, read the [Style Modification](./docs/configuration/style-modification.md) document.
 
+## Web Component
+
+If you are not using react you may want to use the asyncapi-rect component as a plain web component. This is achieved by making use of [web-react-components](https://www.npmjs.com/package/web-react-components).
+
+### Building the web component
+
+The web component is built along with the library and playground if invoked from project root:
+
+```bash
+npm run boostrap
+```
+
+In case you want to only rebuild the web component
+```bash
+cd web-component
+npm run bundle-webcomponent
+```
+
+the web component is saved as web-component/lib/async-api-web-component.js
+
+### Usage
+
+Copy the async-api-web-component.js file along with the fiori.css (web-component/lib/styles/fiori.css) to your project.
+
+Using Angular for instance, you can then use the component as follows:
+
+`angular.json`
+
+```json
+     {
+      "projects": {
+        "project-name": {
+          "architect": {
+            "build": {
+              "options": {
+                "scripts": [
+                  "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
+                  "src/assets/async-api/async-api-web-component.js"
+                ]
+
+In an Angular component you can use the following way
+
+```html
+    <async-api-component [schema]="asyncApiDoc" [config]="asyncApiConfig" [cssImportPath]="optionalCssImportPath"></async-api-component>
+```
+
+Whereas asyncApiDoc is the AsyncAPI YAML doc and config is the component configuration, just as it is for the react component.
+
 ## Development
 
 For information on how to set up a development environment, write and run tests, follow the naming and architecture convention defined for the project in the [Development Guide](./docs/development/guide.md).

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "lerna": "3.15.0",
   "version": "0.2.0",
   "npmClient": "npm",
-  "packages": ["library", "playground"],
+  "packages": ["library", "playground", "web-component"],
   "command": {
     "publish": {
       "message": "Bump version to %s"