feat: add web-component (#175)

asyncapi · Nov 12, 2020 · 12d19a2 · 12d19a2
1 parent 0d25b41
commit 12d19a2
Show file tree

Hide file tree

Showing 14 changed files with 1,156 additions and 1,497 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -16,36 +16,61 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: 13
-      - name: Install dependencies for library and playground
+      - name: Install dependencies for library, web-component and playground
         run: npm install
       - name: Bootstrap the project
         run: npm run bootstrap
+
+      # Library
       - name: Run library tests
         run: npm test
       - name: Build library
-        run: npm run build
-      - name: Get version from package.json before release step
+        run: npm run build-library
+      - name: Get version from package.json before release-library step
         id: initversion
         run: echo "::set-output name=version::$(npm run get-lib-version --silent)"
-      - name: Release to NPM and GitHub
-        id: release
+      - name: Release library to NPM and GitHub
+        id: release-library
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GIT_AUTHOR_NAME: asyncapi-bot
           GIT_AUTHOR_EMAIL: info@asyncapi.io
           GIT_COMMITTER_NAME: asyncapi-bot
           GIT_COMMITTER_EMAIL: info@asyncapi.io
-        run: npm run release
-      - name: Get version from package.json after release step
+        run: npm run release-library
+      - name: Get version from package.json after release-library step
         id: extractver
         run: echo "::set-output name=version::$(npm run get-lib-version --silent)"
-      - name: Use latest version in the Playground # this will update package.json and a lock file for the playground that will also be pushed to PR with next step
+
+      # Web-component
+      - name: Install latest version of library in the web-component # this will update package.json and a lock file for the web-component that will also be pushed to PR with next step
         if: steps.initversion.outputs.version != steps.extractver.outputs.version
+        # sleep for 10 seconds before using latest version in web-component, because sometimes NPM needs additional few seconds to `saves` package in registry
         run: |
-          sleep 10 # sleep for 10 seconds before using latest version in playground, because sometimes NPM needs additional few seconds to `save` package in registry
+          sleep 10
           npm install @kyma-project/asyncapi-react@${{ steps.extractver.outputs.version }} -s
+        working-directory: ./web-component
+      - name: Build web-component
+        run: npm run build-web-component
+      - name: Release web-component to NPM and GitHub
+        id: release-web-component
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GIT_AUTHOR_NAME: asyncapi-bot
+          GIT_AUTHOR_EMAIL: info@asyncapi.io
+          GIT_COMMITTER_NAME: asyncapi-bot
+          GIT_COMMITTER_EMAIL: info@asyncapi.io
+        run: npm run release-web-component
+
+      # Playground
+      - name: Use latest version in the playground # this will update package.json and a lock file for the playground that will also be pushed to PR with next step
+        if: steps.initversion.outputs.version != steps.extractver.outputs.version
+        run: npm install @kyma-project/asyncapi-react@${{ steps.extractver.outputs.version }} -s
         working-directory: ./playground
+
+      # Pull request
       - name: Create Pull Request with updated package files
         if: steps.initversion.outputs.version != steps.extractver.outputs.version
         uses: peter-evans/create-pull-request@v2.4.4
@@ -57,6 +82,8 @@ jobs:
           title: 'chore(release): ${{ steps.extractver.outputs.version }}'
           body: 'Version bump in package.json and package-lock.json for release [${{ steps.extractver.outputs.version }}](https://github.com/${{github.repository}}/releases/tag/v${{ steps.extractver.outputs.version }})'
           branch: version-bump/${{ steps.extractver.outputs.version }}
+
+      # Playground
       - name: Build playground
         run: npm run build
         working-directory: ./playground

diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ You can also run the Playground application locally by following [this](./docs/d
 
 - [`react`](https://github.com/facebook/react/) (version 16.8.0 or higher)
 
-## Usage
+## Installation
 
 Run this command to install the component in your project:
 
@@ -68,51 +68,63 @@ For information on how to change styles, read the [Style Modification](./docs/co
 
 ## 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).
+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).
 
-### Building the web component
+### Installation
 
-The web component is built along with the library and playground if invoked from project root:
+Run this command to install the component in your project:
 
-```bash
-npm run boostrap
+```sh
+npm install --save @asyncapi/web-component
 ```
 
-In case you want to only rebuild the web component
-```bash
-cd web-component
-npm run bundle-webcomponent
-```
+### Using in Angular
 
-the web component is saved as web-component/lib/async-api-web-component.js
+To use component in Angular, follow these steps:
 
-### Usage
+1. Update `AppModule` by adding the `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` array in the `NgModule` metadata:
 
-Copy the async-api-web-component.js file along with the fiori.css (web-component/lib/styles/fiori.css) to your project.
+  ```ts
+  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
-Using Angular for instance, you can then use the component as follows:
+  @NgModule({
+    ...
+    schemas: [
+      CUSTOM_ELEMENTS_SCHEMA,
+    ]
+  })
+  export class AppModule {}
+  ```
 
-`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>
-```
+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>
+  ```
 
-Whereas asyncApiDoc is the AsyncAPI YAML doc and config is the component configuration, just as it is for the react 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
 

diff --git a/library/package.json b/library/package.json
@@ -20,15 +20,13 @@
     "asyncapi-specification",
     "react",
     "reactjs",
-    "styled-components",
     "event"
   ],
   "tags": [
     "asyncapi",
     "asyncapi-specification",
     "react",
     "reactjs",
-    "styled-components",
     "event"
   ],
   "main": "lib/index.js",

diff --git a/library/semantic-release.js b/library/semantic-release.js
@@ -0,0 +1,24 @@
+module.exports = {
+  branches: ['master'],
+  plugins: [
+    [
+      '@semantic-release/commit-analyzer',
+      {
+        preset: 'conventionalcommits',
+      },
+    ],
+    [
+      '@semantic-release/release-notes-generator',
+      {
+        preset: 'conventionalcommits',
+      },
+    ],
+    [
+      '@semantic-release/npm',
+      {
+        pkgRoot: 'library',
+      },
+    ],
+    '@semantic-release/github',
+  ],
+};