@rws-framework/client 2.0.6

package/src/run.ts

@@ -0,0 +1,35 @@
+import { ConfigServiceInstance } from './services/ConfigService';
+import { NotifyServiceInstance } from './services/NotifyService';
+import { WSServiceInstance} from './services/WSService';
+
+import { RoutingServiceInstance} from './services/RoutingService';
+import { RouterComponent } from './components/router/component';
+import { RWSClientInstance } from './client';
+
+const main = async (
+    config: ConfigServiceInstance, 
+    WSService: WSServiceInstance, 
+    NotifyService: NotifyServiceInstance, 
+    RoutingService: RoutingServiceInstance
+): Promise<boolean> => {        
+    if(config.get('backendUrl')){
+        WSService.on('ws:disconnected', (instance, params) => {
+            NotifyService.notify(`Your websocket client disconnected from the server. Your ID was <strong>${params.socketId}</strong>`, 'error');
+        });
+
+        WSService.on('ws:connected', (instance, params) => {
+            NotifyService.notify('You are connected to websocket. Your ID is: <strong>' + instance.socket().id + '</strong>', 'info');
+        });
+
+        WSService.on('ws:reconnect', (instance, params) => {
+            console.info('WS RECONNECTION ' + (params.reconnects + 1));
+            NotifyService.notify('Your websocket client has tried to reconnect to server. Attempt #' + (params.reconnects+1), 'warning');
+        });  
+
+        WSService.init(config.get('wsUrl'), config.get('user'), config.get('transports'));
+    }
+
+    return true;
+};
+
+export default main;

package/src/service_worker/src/_service_worker.ts

@@ -0,0 +1,88 @@
+import IRWSUser from '../../interfaces/IRWSUser';
+import RWSContainer from '../../components/_container';
+
+//@4DI
+import { WSServiceInstance } from '../../services/WSService'
+import { DI, Container } from "@microsoft/fast-foundation";
+
+type SWMsgType = {
+    command: string,
+    asset_type?: string,
+    params: any
+};
+
+abstract class RWSServiceWorker<UserType extends IRWSUser> {
+    protected DI: Container;
+    protected user: UserType = null;
+    protected ignoredUrls: RegExp[] = [];
+    protected wsService: WSServiceInstance
+    protected regExTypes: { [key: string]: RegExp }  
+
+    public workerScope: ServiceWorkerGlobalScope;
+
+    protected static _instances: { [key: string]: RWSServiceWorker<IRWSUser> } | null = {};
+
+    onInit(): Promise<void> { return; }   
+
+    onInstall(): Promise<void> { return; }
+    onActivate(): Promise<void> { return; }
+
+    constructor(workerScope: ServiceWorkerGlobalScope, DI: Container){   
+        this.DI = DI;     
+        this.wsService = DI.get<WSServiceInstance>(WSServiceInstance);
+        this.workerScope = workerScope;
+
+        this.onInit().then(() => {
+            this.workerScope.addEventListener('install', () => {
+                console.log('Service Worker: Installed');
+    
+                this.onInstall();
+            });
+    
+            this.workerScope.addEventListener('activate', () => {
+                console.log('[SW] Service Worker: Activated'); 
+                
+                this.onActivate();
+    
+                return workerScope.clients.claim();
+            });
+        });
+    }       
+
+    sendMessageToClient = (clientId: string, payload: any) => {
+        return this.workerScope.clients.get(clientId)
+            .then((client: any) => {
+                if (client) {
+                    client.postMessage(payload);
+                }
+            });
+    };
+
+    getUser(): UserType
+    {
+        return this.user;
+    }
+
+    setUser(user: UserType): RWSServiceWorker<UserType>
+    {
+        this.user = user;        
+
+        return this;
+    }
+
+    static create<T extends new (...args: any[]) => RWSServiceWorker<IRWSUser>>(this: T, workerScope: ServiceWorkerGlobalScope): InstanceType<T> 
+    {
+        const className = this.name;
+
+        if (!RWSServiceWorker._instances[className]) {
+            const WSService = RWSContainer().get<WSServiceInstance>(WSServiceInstance);
+            RWSServiceWorker._instances[className] = new this(workerScope, WSService);
+        }
+
+        return RWSServiceWorker._instances[className] as InstanceType<T>;
+    }
+}
+
+export default RWSServiceWorker;
+
+export { SWMsgType }

package/src/service_worker/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "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": {        
+        //  "rws-js-client/*": ["../*"],      
+        //  "rws-js-client": ["../index"],      
+      }       
+    }
+  }

package/src/service_worker/webpack.config.js

@@ -0,0 +1,67 @@
+const path = require('path');
+const webpack = require('webpack');
+const tools = require('rws-js-client/_tools');
+const gThis = require.resolve('globalthis')
+const {rwsExternals} = require('rws-js-client/_rws_externals');
+
+
+const executionDir = process.cwd();
+const rootPackageNodeModules = path.resolve(tools.findRootWorkspacePath(process.cwd()), 'node_modules');
+
+const mergeCodeBaseOptions = {
+  incl: ['rws-js-client/src/services'],
+  not_incl: ['./services/RoutingService'],
+  exceptions_context: ['socket.io-', '@socket.io'],
+  exceptions: ['rws-js-client/src/services', './service', './ws_handlers', 'socket.io-', '@socket.io','uuid',]
+};
+
+module.exports = {
+  entry: process.env.SWPATH,
+  mode: 'development',
+  target: 'web',
+  devtool: 'source-map',
+  output: {
+    path: path.resolve(executionDir, 'public'),
+    filename: 'service_worker.js',
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+    alias: {
+      document: false,
+      globalThis:  gThis,
+      '@cwd' : process.cwd(),
+      // 'rws-js-client': path.resolve(__dirname, '..') + '/index.ts',
+      // 'rws-js-client/*': path.resolve(__dirname, '..', '..')
+    }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      global: 'globalThis' // Use 'globalThis' as a fallback for the global object
+    }),
+    new webpack.DefinePlugin({
+      '__SWPATH': "'" + process.env.SWPATH + "'",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(ts)$/,
+        use: [                       
+          {
+            loader: 'ts-loader',
+            options: {
+              allowTsInNodeModules: true,
+              configFile: path.resolve(__dirname, 'tsconfig.json')            
+            }
+          },
+          {
+            loader: path.resolve(tools.findPackageDir(),'webpack','rws_fast_ts_loader.js'),        
+          }  
+        ]         
+      }
+    ],
+  },
+  resolveLoader: {
+    modules: [rootPackageNodeModules],
+  }
+};

package/src/services/ApiService.ts

@@ -0,0 +1,241 @@
+import TheService from './_service';
+
+//@4DI
+import ConfigService, { ConfigServiceInstance } from '../services/ConfigService';
+
+import { upload, UploadResponse } from 'upload';
+
+
+interface RequestOptions {
+    method?: string;
+    headers: HeadersInit;
+    body?: string;
+}
+
+interface IAPIOptions {
+    headers?: Headers,
+    routeParams?: {
+        [key: string]: string
+    }, 
+}
+
+interface IHTTProute {
+    name: string;
+    path: string;    
+}
+
+
+interface IPrefixedHTTProutes {
+    prefix: string;
+    routes: IHTTProute[];
+}
+
+type IBackendRoute = IHTTProute | IPrefixedHTTProutes;
+
+
+const _DEFAULT_CONTENT_TYPE = 'application/json';
+
+class ApiServiceInstance extends TheService {
+    private token?: string;    
+
+    constructor(@ConfigService private config: ConfigServiceInstance) {
+        super();        
+    }
+
+    private addHeader(headers: Headers | [string, string][] | {[key: string]: string}, key: string, val: string)
+    {
+        if (headers instanceof Headers) {
+            headers.append(key, val);
+        } else if (Array.isArray(headers)) {
+            headers.push([key, val]);
+        } else {
+            headers[key] = val;
+        }
+    }
+
+    // Function to get headers
+    private getHeaders(optHeaders: HeadersInit = {}): HeadersInit {
+        const headers: HeadersInit = { ...optHeaders };                
+
+        if (!('Content-Type' in headers)) {
+            this.addHeader(headers, 'Content-Type', _DEFAULT_CONTENT_TYPE);
+        }            
+ 
+        if (this.token) {
+            this.addHeader(headers, 'Authorization', `Bearer ${this.token}`);            
+        }        
+
+        if(!!(headers as any)['Content-Type']){
+            this.addHeader(headers, 'Accept', '*/*');
+        }else{
+            this.addHeader(headers, 'Accept', (headers as any)['Content-Type']);
+        }
+
+        return headers;
+    }
+
+    public setToken(token: string)
+    {
+        this.token = token;
+    }
+
+    public async pureGet(url: string, options: IAPIOptions = {}): Promise<string> {
+        try {
+            const response = await fetch(url, {
+                headers: this.getHeaders(options.headers),
+            });
+            return await response.text();
+        } catch (error) {
+            console.error('GET request failed:', error);
+            throw error;
+        }
+    }
+
+    public async isGetTargetReachable(url: string, options: IAPIOptions = {}): Promise<boolean> {
+        try {    
+            return !!(await this.pureGet(url, options));
+        } catch (error) {
+            return false;
+        }
+    }
+
+    public async get<T>(url: string, options: IAPIOptions = {}): Promise<T> {
+        try {
+            const response = await fetch(url, {
+                headers: this.getHeaders(options.headers),
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('GET request failed:', error);
+            throw error;
+        }
+    }
+    
+    public async post<T, P extends Object = {}>(url: string, payload?: P, options: IAPIOptions = {}): Promise<T> {
+        try {
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: this.getHeaders(options.headers),
+                body: payload ? JSON.stringify(payload) : null,
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('POST request failed:', error);
+            throw error;
+        }
+    }
+    
+    public async put<T, P extends Object = {}>(url: string, payload?: P, options: IAPIOptions = {}): Promise<T> {
+        try {
+            const response = await fetch(url, {
+                method: 'PUT',
+                headers: this.getHeaders(options.headers),
+                body: payload ? JSON.stringify(payload) : null,
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('PUT request failed:', error);
+            throw error;
+        }
+    }
+    
+    public async delete<T>(url: string, options: IAPIOptions = {}): Promise<T> {
+        try {
+            const response = await fetch(url, {
+                method: 'DELETE',
+                headers: this.getHeaders(options.headers),
+            });
+            return await response.json();
+        } catch (error) {
+            console.error('DELETE request failed:', error);
+            throw error;
+        }
+    }
+
+    private getBackendUrl(routeName: string, params: {[key: string]: string} = {})
+    {
+       
+
+        const routesPackage = this.config.get('backendRoutes');
+
+        let routes: IHTTProute[] = [];       
+
+        routesPackage.forEach((item: IBackendRoute) => {
+            // Check if item is an instance of IPrefixedHTTProutes
+            if ('prefix' in item && 'routes' in item && Array.isArray(item.routes)) {
+                // Handle the case where item is of type IPrefixedHTTProutes
+                routes = [...routes, ...item.routes.map((subRouteItem: IHTTProute): IHTTProute => {
+                    const subRoute: IHTTProute = {
+                        path: item.prefix + subRouteItem.path,
+                        name: subRouteItem.name
+                    };
+            
+                    return subRoute;
+                })];
+            } else {
+                // Handle the case where item is of type IHTTProute
+                routes.push(item as IHTTProute);
+            }          
+        });        
+
+        const route = routes.find((item: IHTTProute) => item.name === routeName);        
+
+        if(!route){
+            throw new Error(`Backend route '${routeName}' does not exist.`);
+        }
+
+        let apiPath = route.path;
+
+        Object.keys(params).forEach((paramKey: string) => {
+            const paramValue = params[paramKey];
+
+            apiPath = apiPath.replace(`:${paramKey}`, paramValue);
+        });
+
+        return `${this.config.get('backendUrl')}${this.config.get('apiPrefix') || ''}${apiPath}`;
+    }
+
+    async uploadFile(url: string, file: File, onProgress: (progress: number) => void, options: IAPIOptions = {}): Promise<UploadResponse>
+    {
+        return upload(
+            
+            url,
+            {
+                file,
+            },
+            {
+                onProgress,
+                headers: this.token ? { Authorization: `Bearer ${this.token}` } : null,
+            }
+        );
+    }
+
+    public back = {
+        get: <T>(routeName: string, options?: IAPIOptions): Promise<T> => this.get(this.getBackendUrl(routeName, options?.routeParams), options),
+        post: <T, P extends Object = {}>(routeName: string, payload?: P, options?: IAPIOptions): Promise<T> => this.post(this.getBackendUrl(routeName, options?.routeParams), payload, options),
+        put: <T, P extends Object = {}>(routeName: string, payload: P, options?: IAPIOptions): Promise<T> => this.put(this.getBackendUrl(routeName, options?.routeParams), payload, options),
+        delete: <T>(routeName: string, options?: IAPIOptions): Promise<T> => this.delete(this.getBackendUrl(routeName, options?.routeParams), options),
+        uploadFile: (routeName: string, file: File, onProgress: (progress: number) => void, options: IAPIOptions = {}): Promise<UploadResponse> => this.uploadFile(this.getBackendUrl(routeName, options?.routeParams), file, onProgress),
+    };
+
+    connectToAmplify()
+    {        
+        // "use client"       
+        // const client = generateClient<Schema>() // use this Data client for CRUDL requests
+        
+
+        // /*== STEP 3 ===============================================================
+        // Fetch records from the database and use them in your frontend component.
+        // (THIS SNIPPET WILL ONLY WORK IN THE FRONTEND CODE FILE.)
+        // =========================================================================*/
+
+        // /* For example, in a React component, you can use this snippet in your
+        // function's RETURN statement */
+        // // const { data: todos } = client.models.Todo.list()
+
+        // // return <ul>{todos.map(todo => <li key={todo.id}>{todo.content}</li>)}</ul>
+    }
+}
+
+export default ApiServiceInstance.getSingleton();
+export { IBackendRoute, RequestOptions, ApiServiceInstance, IHTTProute, IPrefixedHTTProutes };

package/src/services/ConfigService.ts

@@ -0,0 +1,107 @@
+import TheService from './_service';
+import IRWSConfig from '../interfaces/IRWSConfig';
+
+
+const _DEFAULTS: {[property: string]: any} = {
+    'pubPrefix': '/',
+    'pubUrl' : window.origin,
+}
+
+const __SENT_TO_COMPONENTS: string[] = [];
+
+class ConfigService extends TheService {  
+    static isLoaded: boolean = false;
+
+    private data: IRWSConfig = {};    
+  
+    constructor() {
+        super();                     
+    }    
+  
+    public get(key: keyof IRWSConfig): any
+    {     
+        
+        const isInData: boolean = Object.keys(this.data).includes(key);
+        const isInDefaults: boolean = Object.keys(_DEFAULTS).includes(key);
+
+        if(!isInData && isInDefaults){
+            let defaultVal = _DEFAULTS[key];        
+
+            if(defaultVal[0] === '@'){
+                defaultVal = this.data[((defaultVal as string).slice(1)) as keyof IRWSConfig];
+            }
+
+            return defaultVal;
+        } else if(!isInData && !isInDefaults) {
+            return null;
+        }
+        
+
+        return this.data[key as keyof IRWSConfig];
+    }
+  
+    public async reloadConfig(cfgString: string): Promise<ConfigService> 
+    {
+        const module = await import(/* webpackIgnore: true */ cfgString);
+        const cfg: () => IRWSConfig = module.defaults;      
+        this.data = cfg();
+  
+        return this;
+    }
+
+    async waitForConfig(tagName: string): Promise<boolean>
+    {        
+        let t: NodeJS.Timeout | null = null;
+
+        if(!this.data._noLoad || __SENT_TO_COMPONENTS.includes(tagName)){
+            return;
+        }
+
+        __SENT_TO_COMPONENTS.push(tagName);
+
+        document.dispatchEvent(new CustomEvent<{tagName: string}>('rws_cfg_call', {
+            detail: {tagName},
+        }));
+
+        return new Promise((resolve) => {
+            const tick = () => {
+                if(ConfigService.isLoaded){
+                   
+
+                    // console.log('resolved', tagName);
+                    clearTimeout(t);    
+                    resolve(true);
+                    return;
+                }
+    
+                t = setTimeout(tick, 200);
+            }
+    
+            t = setTimeout(tick, 200);
+        });       
+    }
+
+    isLoaded(): boolean
+    {
+        return ConfigService.isLoaded;
+    }
+
+    mergeConfig(config: IRWSConfig) {
+        const unloaded = ConfigService.isLoaded;        
+
+        this.data = Object.assign(this.data, config);
+
+        if(unloaded){
+            ConfigService.isLoaded = true;
+        }
+    }
+
+    getData(): IRWSConfig
+    {
+        return this.data;
+    }
+}
+
+export default ConfigService.getSingleton();
+
+export { ConfigService as ConfigServiceInstance };

package/src/services/DOMService.ts

@@ -0,0 +1,91 @@
+import RWSService from './_service';
+import { DOM } from '@microsoft/fast-element';
+import htmlSanitizer, { Transformer, IOptions } from 'sanitize-html';
+
+type TagsProcessorType = { [tagName: string]: string | Transformer };
+type DOMOutputType<T extends Element> = NodeListOf<T> | T | null;
+
+//@ts-expect-error tsconfig.json problem
+declare var trustedTypes: TrustedTypePolicyFactory;
+
+
+class DOMServiceInstance extends RWSService {
+    parse$<T extends Element>(input: NodeListOf<T>, directReturn: boolean = false): DOMOutputType<T> {    
+        if(input.length > 1 || directReturn) {
+            return input;
+        }
+    
+        if(input.length === 1) {
+            return input[0];
+        }
+    
+        return null;
+    }
+
+    $<T extends Element>(shadowRoot: ShadowRoot, selectors: string, directReturn: boolean = false): DOMOutputType<T> {        
+        const elements = shadowRoot.querySelectorAll<T>(selectors);
+        return elements ? this.parse$<T>(elements, directReturn) : null;    
+    }
+
+    async scrollToBottom(scrollContainer: HTMLDivElement, contentSelector: string = '.scroll-content') {
+        if (scrollContainer) {
+            const scrollContent = scrollContainer.querySelector(contentSelector) as HTMLElement;
+
+            if (scrollContent) {
+                scrollContainer.scrollTop = (scrollContent.scrollHeight - scrollContainer.clientHeight) + 150;              
+            }
+        }        
+    }
+
+    setHTMLPolicy(policyName: string, policyImplementation: (html: string) => string): void
+    {
+        const myPolicy = trustedTypes.createPolicy(policyName, {
+            createHTML(html: string) {              
+              return policyImplementation(html);
+            }
+        });
+          
+        DOM.setHTMLPolicy(myPolicy);        
+    }
+
+    private enforceAllowedTags(htmlText: string, allowedHTMLTags: string[]): string
+    {
+        // Create a regular expression pattern to match HTML tags
+        const tagPattern = /<\s*\/?\s*([^\s>/]+)(\s+[^>]*)?>/g;
+
+        // Replace any tags in the htmlText that are not in allowedHTMLTags array
+        const sanitizedText = htmlText.replace(tagPattern, (match, tag, attributes) => {
+            const lowerCaseTag = tag.toLowerCase();
+
+            if (allowedHTMLTags.includes(lowerCaseTag)) {
+                return match; // Return the original tag if it's allowed
+            } else {
+                // Replace the disallowed tag with an empty string
+                return '';
+            }
+        });
+
+        return sanitizedText;
+    }
+
+    sanitizeHTML(
+        line: string, 
+        allowedHTMLTags: string[] = null,         
+        sanitizeOptions: IOptions = {})
+    {
+        let output: string = line.trim(); 
+        
+        if(allowedHTMLTags){
+            sanitizeOptions.allowedTags = allowedHTMLTags;
+        }     
+
+        const sanitized = htmlSanitizer(output, sanitizeOptions);
+
+        return sanitized;
+    }
+}
+
+const DOMService = DOMServiceInstance.getSingleton();
+
+export default DOMService;
+export { DOMOutputType, DOMServiceInstance, TagsProcessorType };