Developing React Widgets (build with Parcel)

This section describes how you can use React framework to develop your widgets, and build them with Parcel.

Creating the Project#

About this task#

You can create a React Web Component widget. The following instruction provides an example of creating a my-web-comp widget.

note

If you use VS code, ensure that your typescript coming with VS code is v4.0.2 or higher.

Procedure#

Create the following folder structure:

├── src
|  └── ...
|  |
├── package.json   // Project configuration file
└── ...

Navigate to the src directory in the project folder.
In the src directory, create a new empty .tsx component file. For testing purposes, you can create SampleWidget.tsx.
Add the following code to the SampleWidget.tsx file:

import * as React from "react";

const SampleWidget: React.FC = () => {
  const widgetAPI = (window as any).WS.widgetAPI();

  return (
    <div className="neo-widget__content">
      <div className="neo-widget__header">
        <div className="neo-widget__header-left">
          <span className="neo-icon-agents"></span>
          <p>React Web Component built with Parcel</p>
        </div>
      </div>
      <div className="neo-widget__body">
        <div className="container">
          <h3>
            <b>Sample widget demonstrating notification api methods</b>
          </h3>
          <button
            className="neo-btn neo-btn-primary neo-btn-primary--primary"
            onClick={() =>
              widgetAPI.sendNotification("Notification text", "info")
            }
          >
            Send Notification
          </button>
        </div>
      </div>
    </div>
  );
};

export default SampleWidget;

In the same directory, create a new index.ts file.
Add the following code to the index.ts file:

import { createElement } from "react";
import { createRoot, Root } from "react-dom/client";

// You may name this class whatever you like
class SampleWsApp extends HTMLElement {
  private root?: Root;

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    if (this.shadowRoot) {
      this.root = createRoot(this.shadowRoot);
    }
  }

  connectedCallback() {}

  disconnectedCallback() {}
}

customElements.define("react-parcel", SampleWsApp);

Import your SampleWidget React component into index.ts file and transform it into a customElement as follows:

import { createElement } from "react";
import { createRoot, Root } from "react-dom/client";
import SampleWidget from "./SampleWidget";

class SampleWsApp extends HTMLElement {
  private root?: Root;

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    if (this.shadowRoot) {
      this.root = createRoot(this.shadowRoot);
    }
  }

  connectedCallback() {
    const element = createElement(SampleWidget);
    this.root?.render(element);
  }

  disconnectedCallback() {
    this.root?.unmount();
  }
}

customElements.define("react-parcel", SampleWsApp);

Next step#

When your project is ready as a Web Component, you must build it for later use.

Building the Project#

About this task#

You must build the project to use your widget in Avaya Workspaces.

Procedure#

In the root project folder, create the package.json file with the following contents:

{
  "name": "react-parcel-web-component",         // You may name this whatever you like
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "parcel": "latest",
    "typescript": "^4.7.4"
  },
  "source": "src/index.ts",                     // Entry file for Parcel builder
  "app": "dist/my-web-app.js",                  // Build output file
  "targets": {
    "app": {
      "context": "browser"
    }
  },
  "scripts": {
    "build": "parcel build --target app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

Add tsconfig.json file with the following contents:

{
  "compilerOptions": {
    "target": "es2015",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitAny": false,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Run the following commands to install necessary packages:

yarn add react react-dom
yarn add @types/react @types/react-dom parcel typescript -D

Build your project running the following command:

npm run build

The bundled file my-web-app.js is in the dist folder. Host this folder using HTTP-server.

Next step#

When your project is built, continue configuring the widget JSON file that you can import in the Widget Manager.