npm - @rws-framework/client - Versions diffs - 2.22.1 → 2.23.0 - Mend

@rws-framework/client 2.22.1 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +160 -872
package/builder/webpack/loaders/rws_fast_ts_loader.js +14 -21
package/cfg/build_steps/webpack/_loaders.js +136 -7
package/package.json +1 -1
package/src/components/_component.ts +28 -72
package/src/components/_css_injection.ts +187 -0

package/README.md CHANGED Viewed

@@ -1,68 +1,61 @@
-# Realtime Web Suit client setup and configuration guide
+# @rws-framework/client
-Realtime Web Suit is a web-component powered, MS FAST powered fullstack-oriented framework that you can use to create domain-agnostic modular asynchoronous components with intershared authorized states.
+This package provides the core client-side framework for Realtime Web Suit (RWS), enabling modular, asynchronous web components, state management, and integration with backend services. It is located in `.dev/client`.
 ## Table of Contents
 1. [Overview](#overview)
 2. [Getting Started](#getting-started)
-3. [Key Components: RWSClient & RoutingService](#key-components-rwsclient--routingservice)
+3. [Key Concepts](#key-concepts)
 4. [Component Initialization](#component-initialization)
-5. [DI](#dependency-injection)
-6. [Frontend routes](#frontend-routes)
+5. [Dependency Injection](#dependency-injection)
+6. [Frontend Routes](#frontend-routes)
 7. [Backend Imports](#backend-imports)
 8. [Utilizing APIService](#utilizing-apiservice)
 9. [Notifier](#notifier)
 10. [Service Worker](#service-worker)
 11. [Example: WebChat Component](#example-webchat-component)
 12. [Other configs](#other-configs)
-13. [Plugins](#plugin-system)
-14. [Links](#links)
+13. [Plugin System](#plugin-system)
+14. [Nest Interconnectors](#nest-interconnectors)
+15. [Styles Injection](#styles-injection)
+16. [Links](#links)
 ## 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.
+`@rws-framework/client` is the heart of the RWS frontend framework. It manages configuration, plugin management, service registration, application lifecycle, and provides the base for all RWSView components. It is designed for modular, fullstack-oriented web applications using the RWS/FAST paradigm.
-## Getting Started
+### Main Features
+- **RWSClient**: Main entry point for the frontend application. Handles configuration, plugin management, service registration, and application lifecycle.
+- **Dependency Injection**: Uses a DI container for services and components.
+- **Component Registration**: Supports modular component definition and registration.
+- **Plugin System**: Add plugins for routing, websockets, and more.
+- **Notifier**: Customizable notification system for UI messages.
+- **Service Worker Integration**: Pushes config and user data to service workers.
+- **User and Config Management**: Handles user state and application configuration.
+- **API Service**: Integrates with backend API routes and authentication.
-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.
+## Getting Started
-from your project dir do:
+Install dependencies and initialize the project:
 ```bash
 yarn
-```
-Initiate cfg files and webpack build:
-```bash
 rws-client init
+yarn build # or yarn watch for dev
+yarn server # to just start server
 ```
-to install once and then to build after preparing components:
-```bash
-yarn build
-```
-or to watch for dev
-```bash
-yarn watch
-```
-or to just start server
-```bash
-yarn server
-```
-then start engine in the site javascript (can be inline):
+Start the engine in your site JavaScript:
 ```javascript
-window.RWS.client.start(CFG); // it is async function
+window.RWS.client.start(CFG); // async function
 ```
-*or for initial setup then start on certain event (example)*
+Or for initial setup on an event:
 ```javascript
-window.RWS.client.setup(CFG).then(() => {     // it is async function
+window.RWS.client.setup(CFG).then(() => {
     $.on('loaded', function(data){
         const optionalNewCfg = { backendRoutes: data.backendRoutes };
         window.RWSClient.start(optionalNewCfg).then();
@@ -70,11 +63,10 @@ window.RWS.client.setup(CFG).then(() => {     // it is async function
 });
 ```
-### default config for RWS:
+### Default config for RWS
 ```javascript
 const _DEFAULT_CONFIG_VARS = {
-    //Build configs
     dev: false,
     hot: false,
     report: false,
@@ -82,943 +74,239 @@ const _DEFAULT_CONFIG_VARS = {
     publicIndex: 'index.html',
     outputFileName: 'client.rws.js',
     outputDir: process.cwd() + '/build',
-    //Frontend RWS client configs
     backendUrl: null,
     wsUrl: null,
     partedDirUrlPrefix: '/lib/rws',
     partedPrefix: 'rws',
     pubUrlFilePrefix: '/',
-    //Universal configs
-    transports: ['websocket'],
     parted: false,
 }
-```
-*The options description:*
-|  **Option**  | **Description** |  **Default**  |
-|--------------|-----------------|---------------|
-| backendUrl | Url for backend integration (API calls) | null |
-| wsUrl | Url for backend integration (Websocket calls) | null |
-| backendRoutes | Backend routes object imported from backend node for integration with API calls | null |
-| apiPrefix | Prefix for API calls | / |
-| routes | Routes for frontend routing | {} |
-| transports | Websockets transports method | ['websockets'] |
-| user | User object for backend auth / frontend data source | null |
-| ignoreRWSComponents | Do not declare base RWS components (uploader, progress) | false |
-| pubUrlFilePrefix | the url for accessing files from browser URL | / |
-| pubUrl | the url for accessing public dir from browser URL | / |
-| outputDir | build dir | ./build |
-| outputFileName | output file name | rws.client.js |
-| publicDir | public dir for HTML serving | ./public |
-| tsConfigPath | tsconfig.json path | ./tsconfig.njson |
-| entry | default TS entry for transpilation | ./src/index.ts |
-| parted | "Parted" mode if enabled. "Monolith" if disabled. Parted mode outputs every component as separate js file and asynchronously adds them to browser. Monolith is single file js build. | false |
-| partedPrefix | parted file prefix ([prefix].[cmp name].js) | rws |
-| partedDirUrlPrefix | URL for generated js parted files directory | / |
-| copyAssets | An option for defining structure that will be copied after build | {} |
-*copyAssets example*
-```json
-"copyAssets": {
-    "./public/js/": [ // target directory
-      "./build/", // copy this directory to target
-      "./src/styles/compiled/main.css" //copy this file to target
-    ]
-}
-```
-### The FRONT config TS interface:
-```typescript
-interface IRWSConfig {
-    defaultLayout?: typeof RWSViewComponent
-    backendUrl?: string
-    wsUrl?: string
-    backendRoutes?: any[]
-    apiPrefix?: string
-    routes?: IFrontRoutes
-    transports?: string[]
-    user?: any
-    ignoreRWSComponents?: boolean
-    pubUrl?: string
-    pubUrlFilePrefix?: string
-    partedDirUrlPrefix?: string
-    dontPushToSW?: boolean
-    parted?: boolean
-    partedFileDir?: string
-    partedPrefix?: string
-    routing_enabled?: boolean
-    _noLoad?: boolean
-}
-```
-### The FRONT webpack config:
-```javascript
-const path = require('path');
-const RWSWebpackWrapper  = require('@rws-framework/client/rws.webpack.config');
-const executionDir = process.cwd();
-module.exports = RWSWebpackWrapper({
-  tsConfigPath: executionDir + '/tsconfig.json',
-  entry: `${executionDir}/src/index.ts`,
-  publicDir:  path.resolve(executionDir, 'public'),
-  outputDir:  path.resolve(executionDir, 'build'),
-  outputFileName: 'jtrainer.client.js'
-});
 ```
+*See the table in the original README for all config options.*
-## Key Components
+## Key Concepts
 ### RWSClient
-##
-`RWS.client` 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.
-**Depreciation Notice**
-***RoutingService will be moved to @rws-framework/browser-router near future***
-### WSService
-`WSService` handles Websockets messenging to the backend.
-**Depreciation Notice**
-***WSService will be moved to @rws-framework/nest-interconnectors in near future***
-### APIService
+`RWSClient` is the main class, instantiated and managed via DI. It manages configuration, plugins, services, and the application lifecycle.
-`APIService` handles API requests to the backend.
-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
+#### Example Usage
 ```typescript
-async function initializeApp() {
-    const theClient = RWSContainer().get(RWSClient);
-    theClient.addRoutes(frontendRoutes);
-    theClient.setBackendRoutes(backendRoutes());
-    theClient.enableRouting();
-    theClient.onInit(async () => {
-        // For single file output:
-        initComponents(theClient.appConfig.get('parted'));  // start components for monolith mode
-        theClient.defineComponents(); // start RWS conponents
-        //custom outside components registering
-        provideFASTDesignSystem()
-            .register(fastButton())
-            .register(fastTab())
-            .register(fastSlider())
-            .register(fastSelect())
-            .register(fastDivider())
-            .register(fastMenu())
-            .register(fastMenuItem())
-        ;
-        // Service worker code
-        // const swFilePath: string = `${theClient.appConfig.get('pubUrl')}/service_worker.js`;
-        // await theClient.swService.registerServiceWorker();
-        //if(theClient.getUser()){
-            // theClient.pushUserToServiceWorker({...theClient.getUser(), instructor: false});
-        //}
-    });
-    theClient.setNotifier((message: string, logType: NotifyLogType, uiType: NotifyUiType = 'notification', onConfirm: (params: any) => void, notifierOptions: any = {}) => {
-        switch(uiType){
-        case 'notification':
-            let notifType = 'success';
-            if(logType === 'error'){
-                notifType = 'error';
-            }
-            if(logType === 'warning'){
-                notifType = 'warning';
-            }
-            return alertify.notify(message, notifType, 5, onConfirm);
-        case 'alert':
-            const alertObj = alertify.alert('Junction AI Notification', message, onConfirm);
-            Object.keys(notifierOptions).forEach(key => {
-                const optionValue = notifierOptions[key];
-                if(key === 'width'){
-                    alertObj.elements.dialog.style = `max-width: ${optionValue};`;
-                    return;
-                }
-                alertObj.set(key, optionValue);
-            });
-            alertObj.show();
-            return alertObj;
-        case 'silent':
-            if(logType == 'warning'){
-                console.warn(message);
-            }else if(logType == 'error'){
-                console.error(message);
-            }else{
-                console.log(message);
-            }
-            return;
-        }
-    });
-    theClient.assignClientToBrowser();
-}
-initializeApp().catch(console.error);
-```
+import RWSClient, { RWSClientInstance } from '@rws-framework/client';
-## Component Initialization
+const theClient: RWSClientInstance = RWSContainer().get(RWSClient);
-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.
+theClient.addPlugin(RWSBrowserRouter);
+theClient.addPlugin(RWSWebsocketsPlugin, { enabled: true });
-**This should be conditioned not to execute imported code when using parted mode.**
+theClient.assignClientToBrowser();
-### Default component structure
+theClient.onInit(async () => {
+    // Register components, routes, etc.
+});
-```
-component-dir/
-    component.ts
-    template.html
-    styles/
-        layout.scss
-```
+theClient.setNotifier((message, logType) => {
+    // Custom notification logic
+});
-**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**
-```html
-<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>
+theClient.start({
+    backendRoutes,
+    backendUrl: process.env.BACKEND_URL,
+    wsUrl: process.env.WS_URL,
+    hot: true,
+    parted: false
+});
 ```
-### application/_initComponents.ts
-Only if parted mode is false.
+### Component Registration
-```typescript
-import { ChatNav } from '../components/chat-nav/component';
-import { DefaultLayout } from '../components/default-layout/component';
-import { RWSIcon } from '../components/rws-icon/component';
-import { LineSplitter } from '../components/line-splitter/component';
-import { WebChat } from '../components/webchat/component';
-export default (partedMode: boolean = false) => {
-    if(!partedMode){
-        WebChat;
-        LineSplitter;
-        DefaultLayout;
-        ChatNav;
-        RWSIcon;
-    }
-};
-```
+- Components must extend `RWSViewComponent` and use the `@RWSView` decorator.
+- Structure: `component-dir/component.ts`, `template.html`, `styles/layout.scss`
+- See RWSDocs for more details.
-## RWS Decorators
+### Plugin System
-**Component needs to extend RWSViewComponent and use @RWSView decorator**:
+- Add plugins via `addPlugin` (e.g., routing, websockets).
+- Plugins are initialized on client startup.
-```typescript
-import { RWSViewComponent,  RWSView, observable, attr } from '@rws-framework/client';
-const options?: RWSDecoratorOptions;
-@RWSView('tag-name', options)
-class WebChat extends RWSViewComponent {
-    @attr tagAttr: string; //HTML tag attr
-    @ngAttr fromNgAttr: string; //HTML attr from angular template
-    @externalAttr fromExAttr: string; //HTML attr with change observation
-    @sanitizedAttr htmlAttr: string; //HTML attr that's sanitized with every val change
-    @observable someVar: any; //Var for templates/value change observation
-    @externalObservable someExVar: string; //Var for templates/value change observation with external watch
-}
-```
+### Notifier
-The decorator options type:
+Set a custom notification handler with `setNotifier`:
 ```typescript
-interface RWSDecoratorOptions{
-    template?: string, //relative path to HTML template file (default: ./template.html)
-    styles?: string //relative path to SCSS file (./styles/layout.scss)
-    fastElementOptions?: any //the stuff you would insert into static definition in FASTElement class.
-}
+theClient.setNotifier((message: string, logType: NotifyLogType, uiType: NotifyUiType = 'notification', onConfirm: (params: any) => void) => {
+    // Implementation based on uiType
+});
 ```
-# Dependency Injection
+### Service Worker
-## Default service usage:
+If you pass `{serviceWorker: 'service_worker_class_path.ts'}` to the RWS Webpack wrapper, the code will build a ServiceWorker to pubDir.
-```typescript
-import { RWSViewComponent, RWSView } from 'rws-js-client';
+## Dependency Injection
-@RWSView('your-tag');
-class YourComponent extends RWSViewComponent {
-    someMethod(url: string): void
-    {
-        this.apiService.get(url);
-    }
-}
-```
+All services and components are registered and resolved via a DI container. Default and custom services can be injected and used throughout your app.
-A default service can be used in legacy like this:
+## Frontend Routes
-```javascript
-window.RWS.client.get('ApiService').dateMethodFromRWS();
-```
-Default services: https://github.com/papablack/rws-client/blob/7d16d9c6d83c81c9fe470eb0f507756bc6c71b35/src/components/_component.ts#L58
-## Custom service usage:
+Define frontend routes using `renderRouteComponent` and pass them to the router plugin. Example route definitions for use with the router component (see `.dev/router`):
 ```typescript
-import {
-    RWSView, RWSViewComponent, RWSInject,
-    DateService, DateServiceInstance
-} from 'rws-js-client';
-import DateService, {DateServiceInstance} from '../../my-custom-services/DateService';
+import { renderRouteComponent } from '@rws-framework/browser-router';
+import { HomePage } from './pages/home/component';
+import { CompanyList } from './pages/company/list/component';
+import { GeneralSettings } from './pages/settings/general/component';
-@RWSView('your-tag')
-class YourComponent extends RWSViewComponent {
-    //usage in props:
-    private @RWSInject(ServiceFASTDIPointer) serviceProperty: ServiceClassType;
-    //usage in constructor:
-    constructor(
-        private @RWSInject(DateService) protected dateService: DateServiceInstance
-    ) {
-        super();
-    }
-    someMethod(url: string): void
+export const frontRoutes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: HomePage,
+        icon: 'home',
+        inMenu: true
+    },
     {
-        this.dateService.get(url);
+        path: '/company/list',
+        name: 'Companies',
+        component: CompanyList,
+        icon: 'company',
+        inMenu: true
+    },
+    {
+        path: '/settings/general',
+        name: 'Settings',
+        component: GeneralSettings,
+        icon: 'settings',
+        inMenu: true
     }
-}
-```
-Custom service needs to export .getSingleton() as default export and have service class exported as classic export for TS typing:
-```typescript
-import { RWSService } from '@rws-framework/client';
+];
-class DateService extends RWSService {
-    static _IN_CLIENT: boolean = true //If set engine will let legacy use the service through RWSClient.get method
-    //(...)
+// Convert to route map for the router
+const routeMap = {};
+for (const route of frontRoutes) {
+    routeMap[route.path] = renderRouteComponent(route.name, route.component);
 }
-export default DateService.getSingleton(); // Fast DI service pointer (it points to instanced service in DI container)
-export { DateService as DateServiceInstance }; // the custom service class type
+export default routeMap;
 ```
-**Custom service for legacy**
-If service has static **_IN_CLIENT** set for **true** you can use it like this:
-```javascript
-window.RWS.client.get('DateService').dateMethodFromRWS();
-```
-## Frontend routes
-if you are passing routes this is example routing file for frontend:
-```typescript
-export default {
-    '/': renderRouteComponent('Home page', WebChat),
-    '/the/path': renderRouteComponent('Component title', ComponentClassName),
-}
-```
-Router tag:
-```html
-    <section>
-        <rws-router></rws-router>
-    </section>
-```
+- Each route object can include `path`, `name`, `component`, `icon`, and `inMenu` fields.
+- Use `renderRouteComponent` to wrap the component for the router.
+- Pass the resulting `routeMap` to the router plugin or RWS client configuration.
 ## Backend Imports
-`backendImports.ts` consolidates various backend interfaces, routes, and models, allowing for a synchronized frontend and backend from package https://github.com/papablack/rws
-```typescript
-import IBook from '../../backend/src/models/interfaces/IBook';
-import {
-    IBookInfo,
-  } from '../../backend/src/interfaces/IBookInfo';
-import backendRoutes from '../../backend/src/routing/routes';
-export {
-    IBook,
-    IBookInfo,
-    backendRoutes
-}
-```
+`backendImport.ts` consolidates backend interfaces, routes, and models for synchronized frontend/backend development.
-usage:
+### HTTPRoutes Interface
+The RWS client uses a typed interface for backend HTTP routes, typically called `IBackendRoute` or `HTTPRoutes`. This interface defines the structure for backend API endpoints, allowing for type-safe integration between frontend and backend. You can import and use these routes as follows:
 ```typescript
-    import { backendRoutes} from '../../backendImport';
-    //index.ts
-    const theClient = new RWSClient();
-    theClient.setBackendRoutes(backendRoutes());
+import { backendRoutes } from './backendImport';
+theClient.setBackendRoutes(backendRoutes);
 ```
+- Each route entry in `backendRoutes` should conform to the `IBackendRoute` (or `HTTPRoutes`) interface, describing the HTTP method, path, and any metadata required for API calls.
+- This enables strong typing and autocompletion for API requests throughout your frontend codebase.
 ## Utilizing APIService
-`APIService` is used for making HTTP requests to the backend. It simplifies the process of interacting with your API endpoints.
-after control method we have dynamic types those are: <**ResponseType**, **PayloadType**>
+`APIService` is used for making HTTP requests to the backend. It supports dynamic types for response and payload, and can be accessed via DI or through the RWS client instance.
-Example Usage by controller route
+### Basic Usage
 ```typescript
-  const apiPromise: Promise<ITalkApiResponse> = this.apiService.back.post<ITalkApiResponse, IApiTalkPayload>('talk:models:prompt', {
-        message: msg,
-        model: this.chosenModel,
-      });
-```
-Example Usage by url
+// Injected in a component or service
+@RWSInject(ApiService, true) protected apiService: ApiServiceInstance;
-```typescript
-  const apiPromise: Promise<ITalkApiResponse> = this.apiService.post<ITalkApiResponse, IApiTalkPayload>('/api/path/to/action', {
-        message: msg,
-        model: this.chosenModel,
-      });
+// Or via the client
+const apiService = window.RWS.client.get('ApiService');
 ```
-## Notifier
+### Making Requests
-### Overview
-The Notifier feature in the RWS Client is a versatile tool for handling notifications within the application. It allows for different types of user interface interactions like alerts, notifications, and silent logging, with varying levels of visibility and user interaction.
-Usage
-### Setting the Notifier
+You can use RESTful methods directly:
 ```typescript
-theClient.setNotifier((message: string, logType: NotifyLogType, uiType: NotifyUiType = 'notification', onConfirm: (params: any) => void) => {
-    // Implementation based on uiType
-});
+// GET request
+apiService.get('/api/some-endpoint');
+// POST request with payload
+type MyResponse = { ... };
+type MyPayload = { ... };
+const result = await apiService.post<MyResponse, MyPayload>('/api/some-endpoint', { foo: 'bar' });
 ```
-This function allows setting a custom notifier in the RWS Client. It handles the logic based on `uiType`.
-Alert, Notify, and Silent
-- alert: Displays an alert dialog with the message.
-- notify: Shows a notification with the message.
-- silent: Silently logs the message to the console.
+### Using Named Backend Routes
-Each method can be configured with a `message`, `logType`, and an optional `onConfirm` callback function.
-Note
-Ensure that a notifier is set in the RWS Client to use the `NotifyService` effectively. If no notifier is set, it will default to a warning in the console.
-## Service Worker
-If you pass ```{serviceWorker: 'service_worker_class_path.ts'}``` to RWS Webpack wrapper function param, the code will build ServiceWorker to pubDir.
-example ServiceWorker class:
+If you use named backend routes (from `backendRoutes`):
 ```typescript
-import SWService, { ServiceWorkerServiceInstance } from '@rws-framework/client/src/services/ServiceWorkerService'
-import {TimeTracker} from '../services/TimeTrackerService';
-import RWSServiceWorker from '@rws-framework/client/src/service_worker/src/_service_worker';
-import { RWSWSService as WSService } from '@rws-framework/client/src/services/WSService'
-declare const self: ServiceWorkerGlobalScope;
-class MyServiceWorker extends RWSServiceWorker {
-   public tracker: { currentTracker: TimeTracker | null };
-    public trackersToSync: TimeTracker[];
-    protected regExTypes: { [key: string]: RegExp } = {
-        SOME_VIEW: new RegExp('.*:\\/\\/.*\\/#\\/([a-z0-9].*)\\/route\\/action$')
-    };
-    ignoredUrls = [
-        new RegExp('(.*(?=.[^.]*$).*)/#/login'),
-        new RegExp('(.*(?=.[^.]*$).*)/#/logout'),
-    ];
-    constructor(){
-        super(self, RWSContainer());
-    }
-    checkForbidden(url: string): boolean {
-        if (!url) {
-            return true;
-        }
-        console.log('[SW] Check forbidden', url);
-        return this.ignoredUrls.some((item) => url.match(item));
-    }
-    isExtraType(id: string){
-        let result: string | null = null;
-        const _self = this;
-        Object.keys(this.regExTypes).forEach(function(key){
-            if(result === null && _self.regExTypes[key].exec(id) !== null){
-                result = key;
-            }
-        });
-        return result;
-    }
-    startServiceWorker(regExTypes: { [key: string]: RegExp }, forbiddenUrls: RegExp[]): JunctionServiceWorker
-    {
-        this.tracker = { currentTracker: null };
-        this.ignoredUrls = forbiddenUrls;
-        this.trackersToSync = [];
-        this.regExTypes = regExTypes;
-        return this;
-    }
-    async onInit(): Promise<void>
-    {
-        const _self: JunctionServiceWorker = this;
-        let THE_USER: IJunctionUser | null = null;
-        const toSync: TimeTracker[] = [];
-        let WS_URL: string | null;
-        console.log('Initiating ServiceWorker');
-        this.workerScope.addEventListener('message', (event: MSGEvent) => {
-            // console.log(event);
-            if(!event.data){
-                console.warn('[SW] Got empty message');
-                return;
-            }
-            if (event.data.command){
-                console.log('[SW] OP Message:', event.data.command);
-                switch (event.data.command) {
-                case 'SET_WS_URL':
-                    WS_URL = event.data.params.url;
-                    break;
-                case 'SET_USER':
-                    if(!this.getUser()){
-                        THE_USER = event.data.params;
-                        this.setUser(THE_USER);
-                    }
-                    _self.checkWs(WS_URL, this.getUser());
-                    break;
-                case 'START_TRACKING':
-                    _self.checkWs(WS_URL, this.getUser());
-                    if(!this.wsService.socket() && this.getUser()){
-                        break;
-                    }
-                    _self.trackActivity(event.data.asset_type, event.data.params.page_location, event.data.params, toSync);
-                    break;
-                case 'TRACKER_SAVED':
-                    const { clientId, tracker } = event.data.params;
-                    _self.sendMessageToClient(clientId, { message: 'TRACKER_SAVED_RESPONSE', data: tracker });
-                    break;
-                }
-            }
-        });
-    }
-    async onActivate(): Promise<void>
-    {
-        console.log('Activated ServiceWorker');
-        this.startServiceWorker(this.regExTypes, this.ignoredUrls);
-    }
-    private checkWs(WS_URL: string, THE_USER: IJunctionUser): boolean
-    {
-        if(!this.wsService.socket() && WS_URL){
-            this.wsService.init(WS_URL, THE_USER);
-            return true;
-        }
-        return false;
-    };
-}
+// By route name (controller:action)
+const data = await apiService.back.get<MyResponse>('user:getProfile', { routeParams: { id: '123' } });
-MyServiceWorker.create();
+// POST with payload
+type Payload = { name: string };
+const result = await apiService.back.post<MyResponse, Payload>('user:updateProfile', { name: 'John' });
 ```
-**We point to this file in webpack / .rws.json "service_worker" option**
-## Example: WebChat Component
-The WebChat component demonstrates a practical use of `APIService` in a real-world scenario. It shows how to send and receive data from the backend.
-### WebChat Component Implementation
+### File Upload Example
 ```typescript
-import { RWSViewComponent, ApiService, NotifyService, RWSView, WSService } from '@rws-framework/client';
-import { observable, css  } from '@microsoft/fast-element';
-import './children/convo-footer/component';
-import WebChatEvents from './events';
-import { IContext } from './children/left-bar/component';
-import { IMessage } from '../chat-message/component';
-import { ITalkApiResponse, BedrockBaseModel, IHyperParameter,
-@RWSView('web-chat')
-class WebChat extends RWSViewComponent {
-    static fileList: string[] = [
-        'svg/icon_talk_1.svg'
-    ];
-    @observable messages: IMessage[] = [];
-    @observable hyperParameters: { key: string, value: any } | any = {};
-    @observable bookId: string = null;
-    @observable chapterNr: string = null;
-    @observable chosenModel: BedrockBaseModel = null;
-    @observable chatContext: IContext = { label: 'Book chat' };
-    @observable bookModel: IBook = null;
-    @observable minified: boolean = true;
-    @ngAttr custombookid: string = null;
-    @ngAttr customchapternr: string = null;
-    @observable customTemperature: number = 0.7;
-    @observable customTopK: number = 250;
-    @observable customMaxTokensToSample: number = 1024;
-    @observable customTopP: number = 0.7;
-    @ngAttr hTemperature?: string = '0.7';
-    @ngAttr hTopK?: string = '250';
-    @ngAttr hMaxTokensToSample?: string = '1024';
-    @ngAttr hTopP?: string = '0.7';
-    @observable convoId: string;
-    @observable wsId: string;
-    @ngAttr dev: PseudoBool = 'false';
-    @ngAttr opened: PseudoBool = 'false';
-    @ngAttr userImage: string | null = null;
-    @ngAttr initials: string | null = 'U';
-    handlers: (this: WebChat) => IWebChatHandlers = assignHandlers;
-    streamCall: (msg: IMessage) => Promise<void> = callStreamApi;
-    getDefaultHyperParams = getDefaultParams;
-    setHyperParam = setHyperParam;
-    public msgOptions: IConvoMsgOptions = {
-        headerEnabled: false,
-        dateEnabled: false
-    };
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.routeParams?.dev || this.dev === 'true') {
-            this.dev = 'true';
-        } else {
-            this.dev = 'false';
-        }
-        this.checkForBookId();
-        this.checkForBookChapter();
-        this.chosenModel = ClaudeModel;
-        const provider = this.chosenModel?.providerName?.toLowerCase() || null;
-        const defParams = this.getDefaultHyperParams(provider);
-        const defaultParams: { [key: string]: any } = {};
-        Object.keys(defParams).forEach(paramKey => {
-            if (defParams[paramKey]) {
-                defaultParams[paramKey] = this.setHyperParam(paramKey, defParams[paramKey]);
-            }
-        });
-        this.hyperParameters = { ...defaultParams, ...this.hyperParameters };
-        this.wsId = uuid();
-        this.on<{ item: IMessage }>(WebChatEvents.message.send, (event: CustomEvent<{ item: IMessage }>) => {
-            this.streamCall(event.detail.item);
-        });
-        if (this.routeParams?.opened || this.opened === 'true') {
-            this.minified = false;
-        }
-        if (this.hTemperature) {
-            this.hHandlers.hTemperature(null, this.hTemperature);
-        }
-        if (this.hMaxTokensToSample) {
-            this.hHandlers.hMaxTokensToSample(null, this.hMaxTokensToSample);
-        }
-        if (this.hTopK) {
-            this.hHandlers.hTopK(null, this.hTopK);
-        }
-        if (this.hTopP) {
-            this.hHandlers.hTopP(null, this.hTopP);
-        }
-    }
-    checkForBookId() {
-        this.bookId = this.routeParams.bookId || this.custombookid || null;
-        if (this.bookId) {
-            this.apiService.back.get<IBook>('train:get:book', { routeParams: { bookId: this.bookId } }).then((data: IBook) => {
-                this.bookModel = data;
-            });
-        }
-    }
-    checkForBookChapter() {
-        this.chapterNr = this.routeParams.chapterNr || this.customchapternr || null;
-    }
-    custombookidChanged(oldVal: string, newVal: string) {
-        if (newVal) {
-            this.custombookid = newVal;
-            this.checkForBookId();
-        } else {
-            this.custombookid = null;
-        }
-    }
-    customchapternrChanged(oldVal: string, newVal: string) {
-        if (newVal) {
-            this.customchapternr = newVal;
-            this.checkForBookChapter();
-        } else {
-            this.customchapternr = null;
-        }
-    }
-    devChanged(oldVal: string, newVal: string) {
-        if (oldVal !== newVal) {
-            this.dev = newVal === 'true' ? 'true' : 'false';
-        }
-    }
-    hHandlers: IHyperHandler = getParamChangeHandlers.bind(this)();
+await apiService.uploadFile('/api/upload', file, progress => {
+    console.log('Progress:', progress);
+});
+```
-    hTemperatureChanged: ChangeHandlerType<string> = this.hHandlers.hTemperature;
-    hMaxTokensToSampleChanged: ChangeHandlerType<string> = this.hHandlers.hMaxTokensToSample;
-    hTopKChanged: ChangeHandlerType<string> = this.hHandlers.hTopK;
-    hTopPChanged: ChangeHandlerType<string> = this.hHandlers.hTopP;
+### Route Type Safety
-    userImageChanged(oldVal: string, newVal: string) {
-        if (newVal && oldVal !== newVal) {
-            this.userImage = newVal;
-        }
-    }
+If you use `IBackendRoute`/`HTTPRoutes` for your backend route definitions, you get type safety and autocompletion for all API calls.
-    initialsChanged(oldVal: string, newVal: string) {
-        if (newVal && oldVal !== newVal) {
-            this.initials = newVal;
-        }
-    }
+## Example: WebChat Component
-    convoIdChanged(oldVal: string, newVal: string) {
-        if (newVal && oldVal !== newVal) {
-            console.log(this.convoId);
-            this.convoId = newVal;
-        }
-    }
-}
+See the WebChat component for a practical example of APIService and RWSView usage.
-WebChat.defineComponent();
+## Other configs
+See the original README for example `tsconfig.json` and webpack config.
-export { WebChat, IContext };
+## Plugin System
-```
+The plugin system allows you to extend the client with additional features. For example, you can add routing with `@rws-framework/browser-router` or websockets with `@rws-framework/nest-interconnectors`.
-### Controller route
+## Nest Interconnectors
-The route ApiService.back.get|post|put|delete methods can be found in backend controllers:
+The `@rws-framework/nest-interconnectors` package provides seamless integration with NestJS-based backend websockets and real-time features. You can add the plugin as follows:
 ```typescript
- @Route('talk:models:prompt', 'POST')
-    public async modelTalkAction(params: IRequestParams): Promise<ITalkApiResponse>
-    {
-        // (...)
-    }
-```
-and src/config/config
+import { RWSWebsocketsPlugin, WSOptions } from '@rws-framework/nest-interconnectors';
-```typescript
-    const http_routes = [
-        {
-            prefix: '/prefix',
-            routes: [
-                {
-                    name: 'action:route:name',
-                    path: '/path/to/action'
-                },
-                 {
-                    name: 'action:route:name',
-                    path: '/path/to/action'
-                }
-            ]
-        },
-        {
-            name: 'home:index',
-            path: '/*', //if no routes detected pass request to frontend
-            noParams: true, //do not read params from the request leave it to the front
-        },
-    ]
+theClient.addPlugin<WSOptions>(RWSWebsocketsPlugin, {
+    enabled: true,
+    auto_notify: true
+});
 ```
-### Socket route
+This enables real-time communication and event-driven features between your RWS frontend and a NestJS backend.
-Socket route from
+## Styles Injection
-```typescript
- WSService.sendMessage<PayloadType>('send_msg', {
-      modelId: this.chosenModel.modelId,
-      prompt: msg.content
-    });
-```
-are defined in backend/src/config/config
+RWS supports advanced styles injection for components. You can inject global or component-specific stylesheets using the static method:
 ```typescript
-    const ws_routes = {
-        'send_msg' : ChatSocket,
-        'process_book' : TrainSocket,
-    }
-```
-## Other configs
-### example tsconfig.json
-```json
-{
-    "compilerOptions": {
-      "baseUrl": "../",
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true,
-      "target": "ES2018",
-      "module": "es2022",
-      "moduleResolution": "node",
-      "strict": true,
-      "esModuleInterop": true,
-      "sourceMap": true,
-      "outDir": "dist",
-      "strictNullChecks": false,
-      "allowSyntheticDefaultImports": true,
-      "lib": ["DOM", "ESNext", "WebWorker"],
-      "paths": {
-      }
-    },
-    "include": [
-      "src",
-      "../node_modules/@rws-framework/client/declarations.d.ts", //TEMPORARILY NEEDED TO WORK
-    ],
-    "exclude": [
-      "../node_modules/@rws-framework/client/src/tests"
-    ]
-  }
-```
-**Remember to have lib field set in tsconfig.json**
-```json
-{
- "lib": ["DOM", "ESNext"]
-}
+RWSViewComponent.injectStyles(["/css/global.css", "/css/theme.css"]);
 ```
-## Plugin system
+- Styles can be injected in `adopted`, `legacy`, or `both` modes (default is `adopted`).
+- Styles are cached in IndexedDB for performance and can be hot-reloaded.
+- Each component can also inject its own styles via the `injectStyles` method or by specifying styles in the component definition.
-[PLUGIN SYSTEM README](https://github.com/papablack/rws-client/blob/master/PLUGINS.md)
+This allows for efficient, encapsulated, and dynamic styling of your RWS components, supporting both modern and legacy browsers.
 ## Links
-- https://www.fast.design/docs/fast-element/getting-started ( Base FAST documentation, mostly valid not considering passing styles and templates as RWS handles it with Webpack loaders )
-- https://www.webcomponents.org (open-source WebComponents repository)
+- [RWSDocs instructions](../../.github/instructions/RWSDocs.instructions.md)
+- [FAST documentation](https://www.fast.design/docs/fast-element/getting-started)
+- [WebComponents.org](https://www.webcomponents.org)