RWS Frontend Framework README

Table of Contents

1. Overview
2. Getting Started
3. Key Components: RWSClient & RoutingService
4. Component Initialization
5. Frontend routes
6. Backend Imports
7. Utilizing APIService
8. Notifier
9. Example: WebChat Component

Overview

The RWS Frontend Framework is designed to create dynamic and responsive web applications. It integrates seamlessly with the backend and provides a robust set of tools for developing comprehensive web solutions.

Getting Started

To get started with the RWS Frontend Framework, ensure you have the necessary environment set up, including Node.js and any other dependencies specific to the framework.

from your project dir do:

yarn
Copy

Initiate cfg files:

rws-client init
Copy

to install once and then to build after preparing compionents:

yarn build
Copy

or to watch for dev

yarn watch
Copy

then start engine in the site javascript (can be inline):

window.RWSClient.start(CFG);
Copy

example config with interface:

const CFG = {
    backendUrl: 'http://localhost:1337',
    wsUrl: 'http://localhost:1338'
}
Copy

export default interface IRWSConfig {
    defaultLayout?: typeof RWSViewComponent;
    backendUrl?: string,
    wsUrl?: string,
    backendRoutes?: any[] // routes from backend
    apiPrefix?: string // f.e /api after host
    routes?: IFrontRoutes, //override front routes
    transports?: string[], //ws transports setup
    user?: any, //user data if logged
    ignoreRWSComponents?: boolean //do not register base RWS components
}
Copy

Key Components

RWSClient

RWSClient is the heart of the framework, managing configuration and initialization. It sets up routes, backend connections, and other essential framework services.

RoutingService

RoutingService handles the navigation and routing within your application. It ensures that URL changes reflect the correct component rendering.

Implementing the Framework

Main File:

The main file (index.ts) is where you initialize the RWSClient. Here, you configure your routes, backend routes, and component initializations.

Following is example of full usage of the framework

import RWSClient, { NotifyUiType, NotifyLogType } from 'rws-js-client';
//@ts-ignore
import alertify from 'alertifyjs';

import './styles/main.scss';

import routes from './routing/routes';

import { backendRoutes } from './backendImport';

import initComponents from './application/_initComponents';
import { provideFASTDesignSystem, allComponents } from '@microsoft/fast-components';

async function initializeApp() {    
    const theClient = new RWSClient();

    theClient.setBackendRoutes(backendRoutes());
    theClient.addRoutes(routes);    
    
    theClient.onInit(async () => {
        initComponents();
        provideFASTDesignSystem().register(allComponents);
    });    


    theClient.setNotifier((message: string, logType: NotifyLogType, uiType: NotifyUiType = 'notification', onConfirm: (params: any) => void) => {
        switch(uiType){
            case 'notification':
                let notifType = 'success';

                if(logType === 'error'){
                    notifType = 'error';
                }

                if(logType === 'warning'){
                    notifType = 'warning';
                }

                alertify.notify(message, notifType, 5, onConfirm);
                return;
            case 'alert':
                alertify.alert('Junction AI Notification', message, onConfirm);
                return;    
            case 'silent':
                if(logType == 'warning'){
                    console.warn(message);
                }else if(logType == 'error'){
                    console.error(message);
                }else{
                    console.log(message);
                }            
                return;    
        }
    });
    (window as any).RWSClient = theClient;    
}

initializeApp().catch(console.error);

Copy

Component Initialization

In application/_initComponents.ts, you initialize the custom components used in your application. If components added in here will include other components they dont need to be listed here. A component imported in this mode needs to be imported once.

Default component structure

component-dir/
    component.ts
    template.html
    styles/
        layout.scss
Copy

WARNING All html templates refer to variable "T" as to FASTElement templating html scope. It contains all the functions FAST templates uses in html. F.e: T.html, T.when, T.repeat

<div class="convo-area-wrap">
    <header>  
        <div class="header-inner"></div>      
        ${T.when(x => x.noChoose === 'false',  (item, index) => T.html`<div>
            <chat-convo-models :chosenModel="${x => x.chosenModel}"></chat-convo-models>
        </div>`)}
        <div>
            <h2>${ x => x.chatContext ? x.chatContext.label : 'loading...' }</h2>
            <h3><strong>${ x => x.messageList.length }</strong> messages in total</h3>
        </div>   
        <fast-divider></fast-divider>             
    </header>
    <section>
        <div class="scroll-area">
            <div class="scroll-content">
                ${T.repeat(x => x.messageList,  (item, index) => T.html`
                    <chat-convo-message :contentReturn="${item => item}" :item="${item => item}"/>
                `)}      
                
                ${T.when(x => !x.messageList.length,  (item, index) => T.html`
                    <p class="no-chat">No messages</p>
                `)}   
            </div>
        </div>
    </section>  

</div>
Copy

application/_initComponents.ts

import { ChatNav } from '../components/chat-nav/component';
import { DefaultLayout } from '../components/default-layout/component';
import { RWSIcon } from '../components/rws-icon/component';
import { Loader } from '../components/loader/component';
import { LineSplitter } from '../components/line-splitter/component';

import { registerRWSComponents } from 'rws-js-client';

export default () => {
    LineSplitter;
    DefaultLayout;
    ChatNav;
    RWSIcon;
    Loader;
    registerRWSComponents(); //register rws components like <rws-uploader> and other comfy components
}

Copy

//index.ts

 const theClient = new RWSClient();

    
    theClient.addRoutes(routes);    //routes are optional
    
    theClient.onInit(async () => {
        initComponents(); //user components from _initComponents.ts
        provideFASTDesignSystem().register(allComponents); // @microsoft/fast-components ready components init
    });    

Copy

**Component needs to extend RWSViewComponent and use