@kyma-project/asyncapi-react - npm Package Compare versions

Comparing version 0.14.2 to 0.15.0

lib/config/config.js

@@ -0,1 +1,2 @@
+export {};
 //# sourceMappingURL=config.js.map

lib/containers/AsyncApi/AsyncApi.js

@@ -5,3 +5,3 @@ var __extends = (this && this.__extends) || (function () {
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
@@ -8,0 +8,0 @@ };

package.json

 {
   "name": "@kyma-project/asyncapi-react",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "private": false,
@@ -23,3 +23,2 @@ "description": "A React component for AsyncAPI specification.",
     "reactjs",
-    "styled-components",
     "event"
@@ -32,3 +31,2 @@ ],
     "reactjs",
-    "styled-components",
     "event"
@@ -35,0 +33,0 @@ ],

README.md

@@ -28,3 +28,3 @@ <h5 align="center">
 
-## Usage
+## Installation
 
@@ -70,2 +70,62 @@ Run this command to install the component in your project:
 
+## Web Component
+
+If you are not using React you may want to use the `@kyma-project/asyncapi-react` component as a plain web component. This is achieved by making use of [web-react-components](https://www.npmjs.com/package/web-react-components).
+
+### Installation
+
+Run this command to install the component in your project:
+
+```sh
+npm install --save @asyncapi/web-component
+```
+
+### Using in Angular
+
+To use 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 {
+    ...
+  }
+  ```
+
+3. Use web component in the template as follows:
+
+  ```html
+  <asyncapi-component [schema]="schema" [config]="config" [cssImportPath]="cssImportPath"></asyncapi-component>
+  ```
+ 
+  where:
+  
+  - `schema` is a `schema` property from React component,
+  - `config` is a `config` property from React component,
+  - `cssImportPath` is the path to styles. By default it is `assets/fiori.css`
+
+  > **NOTE**: The easiest way to use the default css is to copy the content of the `@kyma-project/asyncapi-react/lib/styles/fiori.css` file to a `assets/asyncapi.css` file.
+
 ## Development
@@ -72,0 +132,0 @@

No alert changes

Improved metrics

Total package byte prevSize

290691

increased by0.59%

Lines of code

4389

increased by0.02%

Number of lines in readme file

197

increased by43.8%

No dependency changes