@rws-framework/client 2.21.2 → 2.21.3

package/builder/webpack/scss/_import.js

@@ -23,7 +23,7 @@ function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir
     }
 
     if (importPath.indexOf('@workspace') === 0) {    
-        return path.join(workspaceDir, importPath.replace('@workspace', ''));
+        return path.join(workspaceDir, 'src', importPath.replace('@workspace', ''));
     }
 
     if (importPath.indexOf('@public') === 0) {     

package/package.json

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

package/src/components/_component.ts

@@ -5,6 +5,7 @@ import UtilsService, { UtilsServiceInstance } from '../services/UtilsService';
 import DOMService, { DOMServiceInstance, DOMOutputType } from '../services/DOMService';
 import ApiService, { ApiServiceInstance } from '../services/ApiService';
 import NotifyService, { NotifyServiceInstance } from '../services/NotifyService';
+import IndexedDBService, { IndexedDBServiceInstance } from '../services/IndexedDBService';
 import { IRWSViewComponent, IAssetShowOptions } from '../types/IRWSViewComponent';
 import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
 import { applyConstructor, RWSInject } from './_decorator';
@@ -14,22 +15,26 @@ import { IFastDefinition, isDefined, defineComponent, getDefinition } from './_d
 import { on, $emitDown, observe, sendEventToOutside } from './_event_handling';
 
 type ComposeMethodType<
-    T extends FoundationElementDefinition, 
+    T extends FoundationElementDefinition,
     K extends Constructable<RWSViewComponent>
 > = (this: K, elementDefinition: T) => (overrideDefinition?: OverrideFoundationElementDefinition<T>) => FoundationElementRegistry<FoundationElementDefinition, T>;
 
+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;
+    new(...args: any[]): T;
     definition?: IFastDefinition
     defineComponent: <T extends RWSViewComponent>(this: IWithCompose<T>) => void
     isDefined<T extends RWSViewComponent>(this: IWithCompose<T>): boolean
     compose: ComposeMethodType<FoundationElementDefinition, Constructable<T>>;
     define<TType extends (...params: any[]) => any>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
     _verbose: boolean;
-    _toInject: {[key: string]: TheRWSService};
-    _depKeys: {[key: string]: string[]};
-    _externalAttrs: { [key:string]: string[] };
+    _toInject: { [key: string]: TheRWSService };
+    _depKeys: { [key: string]: string[] };
+    _externalAttrs: { [key: string]: string[] };
     setExternalAttr: (componentName: string, key: string) => void
     sendEventToOutside: <T>(eventName: string, data: T) => void
     _EVENTS: {
@@ -48,35 +53,39 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
     static autoLoadFastElement = true;
     static _defined: { [key: string]: boolean } = {};
-    static _toInject: {[key: string]: TheRWSService} = {};
-    static _depKeys: {[key: string]: string[]} = {_all: []};
+    static _toInject: { [key: string]: TheRWSService } = {};
+    static _depKeys: { [key: string]: string[] } = { _all: [] };
     static _externalAttrs: { [key: string]: string[] } = {};
     static _verbose: boolean = false;
 
+    private static FORCE_INJECT_STYLES?: string[] = [];
+    private static FORCE_INJECT_MODE?: CSSInjectMode = 'adopted';
+
     static _EVENTS = {
         component_define: 'rws:lifecycle:defineComponent',
         component_parted_load: 'rws:lifecycle:loadPartedComponents',
     }
 
-    @RWSInject(ConfigService, true) protected config: ConfigServiceInstance;    
+    @RWSInject(IndexedDBService, true) protected indexedDBService: IndexedDBServiceInstance;
+    @RWSInject(ConfigService, true) protected config: ConfigServiceInstance;
     @RWSInject(DOMService, true) protected domService: DOMServiceInstance;
     @RWSInject(UtilsService, true) protected utilsService: UtilsServiceInstance;
-    @RWSInject(ApiService, true) protected apiService: ApiServiceInstance;    
+    @RWSInject(ApiService, true) protected apiService: ApiServiceInstance;
     @RWSInject(NotifyService, true) protected notifyService: NotifyServiceInstance;
 
     @observable trashIterator: number = 0;
     @observable fileAssets: {
         [key: string]: ViewTemplate
-    } = {};    
+    } = {};
 
     constructor() {
-        super();       
-        applyConstructor(this);       
+        super();
+        applyConstructor(this);
     }
 
-    connectedCallback() {        
-        super.connectedCallback();        
-        applyConstructor(this);    
+    connectedCallback() {
+        super.connectedCallback();
+        applyConstructor(this);
 
         if (!(this.constructor as IWithCompose<this>).definition && (this.constructor as IWithCompose<this>).autoLoadFastElement) {
             throw new Error('RWS component is not named. Add `static definition = {name, template};`');
@@ -84,8 +93,12 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
         this.applyFileList();
 
+        if (RWSViewComponent.FORCE_INJECT_STYLES) {
+            this.injectStyles(RWSViewComponent.FORCE_INJECT_STYLES, RWSViewComponent.FORCE_INJECT_MODE);
+        }
+
         RWSViewComponent.instances.push(this);
-    }    
+    }
 
     passRouteParams(routeParams: Record<string, string> = null) {
         if (routeParams) {
@@ -111,8 +124,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         return $emitDown.bind(this)(eventName, payload);
     }
 
-    observe(callback: (component: RWSViewComponent, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: RWSViewComponent, node: Node) => boolean = null, observeRemoved: boolean = false)
-    {
+    observe(callback: (component: RWSViewComponent, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: RWSViewComponent, node: Node) => boolean = null, observeRemoved: boolean = false) {
         return observe.bind(this)(callback, condition, observeRemoved);
     }
 
@@ -187,8 +199,15 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         sendEventToOutside(eventName, data);
     }
 
-    private applyFileList(): void
-    {
+    static injectStyles(linkedStyles: string[], mode?: CSSInjectMode) {
+        if (mode) {
+            RWSViewComponent.FORCE_INJECT_MODE = mode;
+        }
+
+        RWSViewComponent.FORCE_INJECT_STYLES = linkedStyles;
+    }
+
+    private applyFileList(): void {
         try {
             (this.constructor as IWithCompose<this>).fileList.forEach((file: string) => {
                 if (this.fileAssets[file]) {
@@ -203,11 +222,10 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
             console.error('Error loading file content:', e.message);
             console.error(e.stack);
         }
-    }   
+    }
 
-    static setExternalAttr(componentName: string, key: string)
-    {
-        if(!Object.keys(RWSViewComponent._externalAttrs).includes(componentName)){
+    static setExternalAttr(componentName: string, key: string) {
+        if (!Object.keys(RWSViewComponent._externalAttrs).includes(componentName)) {
             RWSViewComponent._externalAttrs[componentName] = [];
         }
 
@@ -218,24 +236,75 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         this.getInstances().forEach(instance => instance.forceReload());
     }
 
-    static isDefined<T extends RWSViewComponent>(this: IWithCompose<T>): boolean 
-    {
+    static isDefined<T extends RWSViewComponent>(this: IWithCompose<T>): boolean {
         return isDefined<T>(this);
     }
 
-    static defineComponent<T extends RWSViewComponent>(this: IWithCompose<T>): void
-    {
+    static defineComponent<T extends RWSViewComponent>(this: IWithCompose<T>): void {
         return defineComponent<T>(this);
     }
 
-    static getDefinition(tagName: string, htmlTemplate: ViewTemplate, styles: ElementStyles = null) 
-    {
+    static getDefinition(tagName: string, htmlTemplate: ViewTemplate, styles: ElementStyles = null) {
         return getDefinition(tagName, htmlTemplate, styles);
     }
 
     private static getInstances(): RWSViewComponent[] {
         return RWSViewComponent.instances;
     }
+
+    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[] = [];
+
+        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);
+            }
+
+            if (mode === 'adopted' || mode === 'both') {
+                const entry = await this.indexedDBService.getFromDB(db, storeName, styleLink);                
+
+                let cssText: string | null = null;
+
+                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`)
+                }
+
+                const sheet = new CSSStyleSheet();
+                await sheet.replace(cssText);
+
+                adoptedSheets.push(sheet);                
+            }
+        }
+
+        if(adoptedSheets.length){
+            this.getShadowRoot().adoptedStyleSheets = [                
+                ...adoptedSheets,
+                ...this.getShadowRoot().adoptedStyleSheets,
+            ];
+        }
+    }
 }
 
 export default RWSViewComponent;

package/src/components/_decorator.ts

@@ -72,10 +72,12 @@ const applyConstructor = (component: RWSViewComponent, x: boolean = false): void
 
     const regServices = loadRWSRichWindow().RWS._registered;
     
+ 
 
     const depsToInject: string[] = (mainConstructor as IWithCompose<RWSViewComponent>)._depKeys[mainConstructor.name] || [];
     const depsInInjector: string[] = Object.keys(existingInjectedDependencies);
 
+
     const toInject: string[] = [...depsToInject]
 
     type KeyType = {[key: string]: TheRWSService | string };
@@ -84,7 +86,7 @@ const applyConstructor = (component: RWSViewComponent, x: boolean = false): void
     
     function inject(services: KeyType){
         for (const prop in services) {
-            const service = (typeof services[prop] === 'string' ? existingInjectedDependencies[prop] : services[prop]) as TheRWSService;      
+            const service = (typeof services[prop] === 'string' ? existingInjectedDependencies[prop] : services[prop]) as TheRWSService;                  
             _target[prop] = service;            
         }
     }
@@ -96,7 +98,7 @@ const applyConstructor = (component: RWSViewComponent, x: boolean = false): void
 
     const defaultDeps: [string, TheRWSService][] = Object.keys(existingInjectedDependencies)
         .filter((depKey: string) => existingInjectedDependencies[depKey].isDefault()).map((depKey => [depKey, existingInjectedDependencies[depKey]]));
-
+        
     inject(defaultDeps.reduce((acc: KeyType, cur: [string, TheRWSService]) => {
         acc[cur[0]] = cur[1];
         return acc;

package/src/components/_decorators/RWSInject.ts

@@ -8,8 +8,7 @@ import { handleExternalChange } from '../_attrs/_external_handler';
 type InjectDecoratorReturnType = (target: any, key?: string | number | undefined, parameterIndex?: number) => void;
 type TargetType = any;
 
-function addToComponentInjection(targetComponentName: string, constructor: any, depKey: string, dependencyClass: Key, isDefaultService: boolean = false){
-
+function addToComponentInjection(targetComponentName: string, constructor: any, depKey: string, dependencyClass: Key, isDefaultService: boolean = false){    
     if(isDefaultService){
         targetComponentName = '_all';
     }

package/src/services/IndexedDBService.ts

@@ -0,0 +1,49 @@
+import RWSService from './_service';
+
+class IndexedDBService extends RWSService {
+    static _DEFAULT: boolean = true;
+    openDB(dbName: string, storeName: string): Promise<IDBDatabase> {
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(dbName, 1);
+
+            request.onupgradeneeded = () => {
+                const db = request.result;
+                if (!db.objectStoreNames.contains(storeName)) {
+                    db.createObjectStore(storeName);
+                }
+            };
+
+            request.onsuccess = () => resolve(request.result);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    getFromDB(db: IDBDatabase, store: string, key: string): Promise<{
+        css: string,
+        timestamp: number
+    } | null> {
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(store, 'readonly');
+            const request = tx.objectStore(store).get(key);
+
+            request.onsuccess = () => resolve(request.result ?? null);
+            request.onerror = () => reject(request.error);
+        });
+    }
+
+    saveToDB(db: IDBDatabase, store: string, key: string, value: {
+        css: string,
+        timestamp: number
+    }): Promise<void> {
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(store, 'readwrite');
+            const request = tx.objectStore(store).put(value, key);
+
+            request.onsuccess = () => resolve();
+            request.onerror = () => reject(request.error);
+        });
+    }
+}
+
+export default IndexedDBService.getSingleton();
+export { IndexedDBService as IndexedDBServiceInstance };