@rws-framework/client 2.22.0 → 2.22.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.22.0",
+    "version": "2.22.1",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"

package/src/components/_component.ts

@@ -13,6 +13,7 @@ import TheRWSService from '../services/_service';
 import { handleExternalChange } from './_attrs/_external_handler';
 import { IFastDefinition, isDefined, defineComponent, getDefinition } from './_definitions';
 import { on, $emitDown, observe, sendEventToOutside } from './_event_handling';
+import { domEvents } from '../events';
 
 type ComposeMethodType<
     T extends FoundationElementDefinition,
@@ -21,6 +22,8 @@ type ComposeMethodType<
 
 type CSSInjectMode = 'adopted' | 'legacy' | 'both';
 
+const _DEFAULT_INJECT_CSS_CACHE_LIMIT_DAYS = 1;
+
 export interface IWithCompose<T extends RWSViewComponent> {
     [key: string]: any
     new(...args: any[]): T;
@@ -250,55 +253,81 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         return RWSViewComponent.instances;
     }
 
-    protected async injectStyles(styleLinks: string[], mode: CSSInjectMode = 'adopted') {
+    protected async injectStyles(styleLinks: string[], mode: CSSInjectMode = 'adopted', maxDaysExp?: number) {
         const dbName = 'css-cache';
         const storeName = 'styles';
         const db = await this.indexedDBService.openDB(dbName, storeName);
+        const maxAgeMs = 1000 * 60 * 60 * 24; // 24h
+        const maxDaysAge = maxDaysExp ? maxDaysExp : _DEFAULT_INJECT_CSS_CACHE_LIMIT_DAYS;
+        const maxAgeDays = maxAgeMs * maxDaysAge;
 
         let adoptedSheets: CSSStyleSheet[] = [];
 
+        let doneAdded = false;
+
         for (const styleLink of styleLinks) {
-            if (mode === 'legacy' || mode === 'both') {
-                const link = document.createElement('link');
-                link.rel = 'stylesheet';
-                link.href = styleLink;
-                this.getShadowRoot().appendChild(link);
-            }
+            const loadPromise = new Promise<void>(async (resolve, reject) => {
+                if (mode === 'legacy' || mode === 'both') {
+                    const link = document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = styleLink;
+                    this.getShadowRoot().appendChild(link);
+    
+                    link.onload = () => {
+                        doneAdded = true;
+
+                        if(mode === 'legacy'){
+                            resolve();
+                        }
+                    };
+                }
 
-            if (mode === 'adopted' || mode === 'both') {
-                const entry = await this.indexedDBService.getFromDB(db, storeName, styleLink);
-                const maxAgeMs = 1000 * 60 * 60 * 24; // 24h
+                if (mode === 'adopted' || mode === 'both') {
+                    const entry = await this.indexedDBService.getFromDB(db, storeName, styleLink);
 
-                let cssText: string | null = null;
+                    let cssText: string | null = null;
 
-                if (entry && typeof entry === 'object' && 'css' in entry && 'timestamp' in entry) {
-                    const expired = Date.now() - entry.timestamp > maxAgeMs;
-                    if (!expired) {
-                        cssText = entry.css;
+                    if (entry && typeof entry === 'object' && 'css' in entry && 'timestamp' in entry) {
+                        const expired = Date.now() - entry.timestamp > maxAgeDays;
+                        if (!expired) {
+                            cssText = entry.css;
+                        }
                     }
-                }
 
-                if (!cssText) {
-                    cssText = await fetch(styleLink).then(res => res.text());
-                    await this.indexedDBService.saveToDB(db, storeName, styleLink, {
-                        css: cssText,
-                        timestamp: Date.now()
-                    });
-                    console.log(`System saved stylesheet: ${styleLink} to IndexedDB`)
-                }
+                    if (!cssText) {
+                        cssText = await fetch(styleLink).then(res => res.text());
+                        await this.indexedDBService.saveToDB(db, storeName, styleLink, {
+                            css: cssText,
+                            timestamp: Date.now()
+                        });
+                        console.log(`System saved stylesheet: ${styleLink} to IndexedDB`)
+                    }
 
-                const sheet = new CSSStyleSheet();
-                await sheet.replace(cssText);
+                    const sheet = new CSSStyleSheet();
+                    await sheet.replace(cssText);
 
-                adoptedSheets.push(sheet);                
-            }
+                    adoptedSheets.push(sheet);
+
+                    if(mode === 'adopted' || mode === 'both'){
+                        resolve();
+                    }
+                }
+            });
+
+            await loadPromise;
         }
 
-        if(adoptedSheets.length){
-            this.getShadowRoot().adoptedStyleSheets = [                
+        if (adoptedSheets.length) {
+            this.getShadowRoot().adoptedStyleSheets = [
                 ...adoptedSheets,
                 ...this.getShadowRoot().adoptedStyleSheets,
             ];
+
+            doneAdded = true;
+        }
+
+        if (doneAdded) {
+            this.$emit(domEvents.loadedLinkedStyles);
         }
     }
 }

package/src/events.ts

@@ -0,0 +1,3 @@
+export const domEvents = {
+    loadedLinkedStyles: 'loaded:linked'
+}

package/src/index.ts

@@ -22,14 +22,14 @@ import {  RWSIgnore, RWSInject, RWSView } from './components/_decorator';
 import type { DefaultRWSPluginOptionsType } from './plugins/_plugin';
 import type { IRWSPlugin, IStaticRWSPlugin, IPluginSpawnOption } from './types/IRWSPlugin';
 import type IRWSUser from './types/IRWSUser';
-import type { IAssetShowOptions } from './components/_component';
+import type { IAssetShowOptions, IRWSViewComponent } from './components/_component';
 import type { RWSDecoratorOptions } from './components/_decorator';
-import type { IKDBTypeInfo, IKDBTypesResponse } from './types/IBackendCore';
 import type { DOMOutputType, TagsProcessorType } from './services/DOMService';
 import type { IBackendRoute, IHTTProute, IPrefixedHTTProutes } from './services/ApiService';
 import type IRWSConfig from './types/IRWSConfig';
 import type RWSNotify from './types/RWSNotify';
 import type { NotifyUiType, NotifyLogType }  from './types/RWSNotify';
+import * as RWSEvents from './events';
 
 export default RWSClient;
 
@@ -70,11 +70,12 @@ export {
     RWSService,
     RWSViewComponent,
 
-    RWSContainer
+    RWSContainer,
+
+    RWSEvents
 };
 
-export type {
-    IKDBTypeInfo, IKDBTypesResponse,
+export type {    
     NotifyUiType,
     NotifyLogType,
     IBackendRoute as IRWSBackendRoute,
@@ -84,5 +85,6 @@ export type {
     IAssetShowOptions as IRWSAssetShowOptions,
     IRWSConfig,
     IRWSUser,
-    TagsProcessorType
+    TagsProcessorType,
+    IRWSViewComponent
 }

package/src/services/ApiService.ts

@@ -1,4 +1,4 @@
-import { IKDBTypesResponse } from '../types/IBackendCore';
+import { ITypesResponse } from '../../../components/src/types/IBackendCore';
 import TheService from './_service';
 
 //@4DI
@@ -20,11 +20,14 @@ interface IAPIOptions {
     routeParams?: {
         [key: string]: string
     }, 
+    queryParams?: {
+        [key: string]: string
+    }
 }
 
 interface IHTTProute<P = {[key: string]: any}> {
     name: string;
-    path: string;  
+    path: string | string[];  
     method: string;
     noParams?: boolean;
     options?: any;
@@ -89,16 +92,16 @@ class ApiService extends TheService {
     public delete = calls.delete;
 
     public back = {
-        get: async <T>(routeName: string, options?: IAPIOptions, token?: string): Promise<T> => calls.get.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams), options) as Promise<T>,
-        post: async <T, P extends object = object>(routeName: string, payload?: P, options?: IAPIOptions): Promise<T> => calls.post.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams), payload, options) as Promise<T>,
-        put: async <T, P extends object = object>(routeName: string, payload: P, options?: IAPIOptions): Promise<T> => calls.put.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams), payload, options) as Promise<T>,
-        delete: async <T>(routeName: string, options?: IAPIOptions): Promise<T> => calls.delete.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams), options) as Promise<T>,
+        get: async <T>(routeName: string, options?: IAPIOptions, token?: string): Promise<T> => calls.get.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams, options?.queryParams), options) as Promise<T>,
+        post: async <T, P extends object = object>(routeName: string, payload?: P, options?: IAPIOptions): Promise<T> => calls.post.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams, options?.queryParams), payload, options) as Promise<T>,
+        put: async <T, P extends object = object>(routeName: string, payload: P, options?: IAPIOptions): Promise<T> => calls.put.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams, options?.queryParams), payload, options) as Promise<T>,
+        delete: async <T>(routeName: string, options?: IAPIOptions): Promise<T> => calls.delete.bind(this)(backend.getBackendUrl.bind(this)(routeName, options?.routeParams, options?.queryParams), options) as Promise<T>,
         uploadFile: async (routeName: string, file: File, onProgress: (progress: number) => void, options: IAPIOptions = {}, payload: any = {}): Promise<UploadResponse> => this.uploadFile(backend.getBackendUrl.bind(this)(routeName, options?.routeParams), file, onProgress, payload),
     };
 
-    async getResource(resourceName: string): Promise<IKDBTypesResponse>
+    async getResource(resourceName: string): Promise<ITypesResponse>
     {        
-        return calls.get.bind(this)(`${this.config.get('backendUrl')}${this.config.get('apiPrefix') || ''}/api/rws/resource/${resourceName}`) as Promise<IKDBTypesResponse>
+        return calls.get.bind(this)(`${this.config.get('backendUrl')}${this.config.get('apiPrefix') || ''}/api/rws/resource/${resourceName}`) as Promise<ITypesResponse>
     }
 }
 

package/src/services/DOMService.ts

@@ -83,7 +83,7 @@ class DOMService extends RWSService {
         sanitizeOptions: DOMPurify.Config = { })
     {
         const output: string = line.trim();
-        const sanitized = DOMPurify.sanitize(output, { USE_PROFILES: { html: true }, ...sanitizeOptions});
+        const sanitized = DOMPurify.sanitize(output, { USE_PROFILES: { html: true }, ...sanitizeOptions}) as string;
         return sanitized;
     }
 }

package/src/services/_api/backend.ts

@@ -2,7 +2,7 @@ import { ApiServiceInstance, IBackendRoute, IHTTProute } from "../ApiService";
 import { ConfigServiceInstance } from "../ConfigService";
 
 export const backend = {
-    getBackendUrl(this: ApiServiceInstance, routeName: string, params: {[key: string]: string} = {}): string
+    getBackendUrl(this: ApiServiceInstance, routeName: string, params: {[key: string]: string} = {}, queryParams: {[key: string]: string} = {}): string
     {       
         const config = this.config;
         const routesPackage = config.get('backendRoutes');
@@ -43,13 +43,12 @@ export const backend = {
                     ];
                 }
 
-                routes = [...routes, ...item.routes.map((subRouteItem: IHTTProute): IHTTProute => {
+                    routes = [...routes, ...item.routes.map((subRouteItem: IHTTProute): IHTTProute => {
                     const subRoute: IHTTProute = {
-                        path: item.prefix + subRouteItem.path,
+                        path: Array.isArray(subRouteItem.path) ? subRouteItem.path.map(subPath => item.prefix + subPath) : item.prefix + subRouteItem.path,
                         name: backend.checkPrefixedRouteName(subRouteItem.name, item.controllerName),
                         method: subRouteItem.method || 'GET'
-                    };
-            
+                    };            
                     return subRoute;
                 })];
 
@@ -65,15 +64,48 @@ export const backend = {
             throw new Error(`Backend route '${routeName}' does not exist.`);
         }
 
-        let apiPath = route.path;
+        let apiPath: string | string[] = route.path;        
+
+        if(Array.isArray(apiPath)){
+            const paramsLength = Object.keys(params).length;
+            if(paramsLength > 0){               
+                for(const searchedPath of apiPath){
+                    let foundParams = 0;
+                    for(const p of Object.keys(params)){
+                        if(searchedPath.indexOf(`:${p}`) !== -1){
+                            foundParams++;
+                        }
+                    }
+
+                    if(foundParams === paramsLength){
+                        apiPath = searchedPath;
+                        break;
+                    }
+                }
+            }else{
+                for(const searchedPath of apiPath){
+                    if(!searchedPath.includes(':')){
+                        apiPath = searchedPath;
+                        break;
+                    }
+                }
+            }
+        }
 
         Object.keys(params).forEach((paramKey: string) => {
             const paramValue = params[paramKey];
 
-            apiPath = apiPath.replace(`:${paramKey}`, paramValue);
-        });
+            apiPath = (apiPath as string).replace(`:${paramKey}`, paramValue);
+        });        
+
+        let finalUrl = `${config.get('backendUrl')}${config.get('apiPrefix') || ''}${apiPath}`;
+
+        if(Object.keys(queryParams).length > 0){
+            const queryString = new URLSearchParams(queryParams).toString();
+            finalUrl += `?${queryString}`;
+        }
 
-        return `${config.get('backendUrl')}${config.get('apiPrefix') || ''}${apiPath}`;
+        return finalUrl;
     },
     checkPrefixedRouteName(routeName: string, prefixName: string){
         let finalRoute = routeName;

package/src/types/IRWSViewComponent.ts

@@ -1,9 +1,9 @@
-import { ViewTemplate } from '@microsoft/fast-element';
+import { FASTElement, ViewTemplate } from '@microsoft/fast-element';
 import { DOMOutputType } from '../services/DOMService';
 
 type IAssetShowOptions = Record<string, any>;
 
-interface IRWSViewComponent extends Node {    
+interface IRWSViewComponent extends FASTElement {    
     __isLoading: boolean;
     routeParams: Record<string, string>;
     trashIterator: number;

package/src/types/IBackendCore.ts

@@ -1,12 +0,0 @@
-export interface IKDBTypeInfo {
-    fieldName: string;
-    type: string;
-    boundModel?: string
-}
-
-export interface IKDBTypesResponse {
-    success: boolean;
-    data: {
-        types: IKDBTypeInfo[];
-    };
-}

package/src/types/IRWSResource.ts

@@ -1,5 +0,0 @@
-export interface IRWSResourceQuery {
-    fieldName: string,
-    type: String,
-    boundModel: string
-}

package/src/types/IReFormerField.ts

@@ -1,5 +0,0 @@
-export interface IReFormerField {
-    name: string,
-    defaultValue?: any,
-    setForm: (field: string, value: any) => Promise<void>   
-}