@rws-framework/client 2.23.7 → 2.24.0

package/package.json

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

package/src/components/_component.ts

@@ -58,8 +58,9 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
     static _externalAttrs: { [key: string]: string[] } = {};
     static _verbose: boolean = false;
 
-    private static FORCE_INJECT_STYLES?: string[] = [];
-    private static FORCE_INJECT_MODE?: CSSInjectMode = 'adopted';
+    static FORCE_INJECT_STYLES?: string[] = [];
+    static FORCE_INJECT_MODE?: CSSInjectMode = 'adopted';
+    static FORCE_INJECT_MODE_PER_LINK?: Record<string, CSSInjectMode> = {};
 
     static _EVENTS = {
         component_define: 'rws:lifecycle:defineComponent',
@@ -271,6 +272,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
     protected async injectStyles(styleLinks: string[], mode: CSSInjectMode = 'adopted', maxDaysExp?: number) {
         // Create a bridge object that exposes the necessary properties
         const componentBridge = {
+            componentElement: this,
             shadowRoot: this.shadowRoot,
             indexedDBService: this.indexedDBService,
             $emit: this.$emit.bind(this)

package/src/components/_css_injection.ts

@@ -1,7 +1,8 @@
 import { domEvents } from '../events';
 import IndexedDBService, { IndexedDBServiceInstance } from '../services/IndexedDBService';
+import RWSViewComponent from './_component';
 
-type CSSInjectMode = 'adopted' | 'legacy' | 'both';
+type CSSInjectMode = 'adopted' | 'legacy' | 'both' | 'style-element';
 
 const _DEFAULT_INJECT_CSS_CACHE_LIMIT_DAYS = 1;
 
@@ -11,6 +12,7 @@ interface ICSSInjectionOptions {
 }
 
 interface ICSSInjectionComponent {
+    componentElement?: RWSViewComponent;
     shadowRoot: ShadowRoot | null;
     indexedDBService: IndexedDBServiceInstance;
     $emit(eventName: string): void;
@@ -44,7 +46,6 @@ export class CSSInjectionManager {
         styleLinks: string[], 
         options: ICSSInjectionOptions = {}
     ): Promise<void> {
-        const { mode = 'adopted', maxDaysExp } = options;
 
         if (!component.shadowRoot) {
             throw new Error('Component must have a shadow root for CSS injection');
@@ -63,11 +64,35 @@ export class CSSInjectionManager {
                 transition: opacity 0.3s ease-in-out;
             }
         `);
+        
         component.shadowRoot.adoptedStyleSheets = [
             transitionSheet,
             ...component.shadowRoot.adoptedStyleSheets,
         ];
 
+        const doneAdded = await CSSInjectionManager.addStyleSheets(component, styleLinks, options);        
+
+        if (doneAdded) {
+            // Set opacity to 1 to fade in the component
+            const opacitySheet = new CSSStyleSheet();
+            await opacitySheet.replace(`
+                :host {
+                    opacity: 1 !important;
+                }
+            `);
+            component.shadowRoot.adoptedStyleSheets = [
+                opacitySheet,
+                ...component.shadowRoot.adoptedStyleSheets,
+            ];
+
+            component.$emit(domEvents.loadedLinkedStyles);
+        }
+    }
+
+    private static async addStyleSheets(component: ICSSInjectionComponent, styleLinks: string[], options: ICSSInjectionOptions = {}): Promise<boolean>
+    {
+        const { mode = 'adopted', maxDaysExp } = options;        
+
         let adoptedSheets: CSSStyleSheet[] = [];
         let doneAdded = false;
 
@@ -75,14 +100,21 @@ export class CSSInjectionManager {
         const cachedSheets: CSSStyleSheet[] = [];
         const uncachedLinks: string[] = [];
 
+        let hasCached = false;
+
         for (const styleLink of styleLinks) {
             if (CSSInjectionManager.CACHED_STYLES.has(styleLink)) {
                 cachedSheets.push(CSSInjectionManager.CACHED_STYLES.get(styleLink)!);
+                hasCached = true;
             } else {
                 uncachedLinks.push(styleLink);
             }
         }
 
+        if(hasCached){
+            CSSInjectionManager.setStylesOwner(component);
+        }
+
         // If we have cached styles, use them immediately
         if (cachedSheets.length > 0) {
             adoptedSheets.push(...cachedSheets);
@@ -92,9 +124,7 @@ export class CSSInjectionManager {
         // Only process uncached styles
         if (uncachedLinks.length > 0) {
             // Set this component as the owner if no owner exists yet
-            if (!CSSInjectionManager.STYLES_OWNER_COMPONENT) {
-                CSSInjectionManager.STYLES_OWNER_COMPONENT = component;
-            }
+            CSSInjectionManager.setStylesOwner(component);
 
             const dbName = 'css-cache';
             const storeName = 'styles';
@@ -104,54 +134,41 @@ export class CSSInjectionManager {
             const maxAgeDays = maxAgeMs * maxDaysAge;
 
             for (const styleLink of uncachedLinks) {
-                const loadPromise = new Promise<void>(async (resolve, reject) => {
-                    if (mode === 'legacy' || mode === 'both') {
-                        const link = document.createElement('link');
-                        link.rel = 'stylesheet';
-                        link.href = styleLink;
-                        component.shadowRoot!.appendChild(link);
-        
-                        link.onload = () => {
-                            doneAdded = true;
-
-                            if(mode === 'legacy'){
+                const linkMode = Object.keys(RWSViewComponent.FORCE_INJECT_MODE_PER_LINK).includes(styleLink) ? RWSViewComponent.FORCE_INJECT_MODE_PER_LINK[styleLink] : mode;
+                
+                const loadPromise = new Promise<void>(async (resolve) => {
+                    try {
+                        if (linkMode === 'legacy') {
+                            await CSSInjectionManager.injectLegacyStyle(component, styleLink, () => {
+                                doneAdded = true;
                                 resolve();
-                            }
-                        };
-                    }
-
-                    if (mode === 'adopted' || mode === 'both') {
-                        const entry = await component.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 component.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);
-
-                        // Cache the stylesheet for future use
-                        CSSInjectionManager.CACHED_STYLES.set(styleLink, sheet);
-
-                        adoptedSheets.push(sheet);
-
-                        if(mode === 'adopted' || mode === 'both'){
+                        } else if (linkMode === 'style-element') {
+                            await CSSInjectionManager.injectStyleElement(component, styleLink, db, storeName, maxAgeDays);
+                            doneAdded = true;
+                            resolve();
+                        } else if (linkMode === 'adopted') {
+                            const sheet = await CSSInjectionManager.injectAdoptedStyle(component, styleLink, db, storeName, maxAgeDays);
+                            adoptedSheets.push(sheet);
+                            doneAdded = true;
+                            resolve();
+                        } else if (linkMode === 'both') {
+                            // Handle both modes
+                            const [sheet] = await Promise.all([
+                                CSSInjectionManager.injectAdoptedStyle(component, styleLink, db, storeName, maxAgeDays),
+                                new Promise<void>((resolveLegacy) => {
+                                    CSSInjectionManager.injectLegacyStyle(component, styleLink, () => {
+                                        resolveLegacy();
+                                    });
+                                })
+                            ]);
+                            adoptedSheets.push(sheet);
+                            doneAdded = true;
                             resolve();
                         }
+                    } catch (error) {
+                        console.error(`Failed to inject styles for ${styleLink}:`, error);
+                        resolve();
                     }
                 });
 
@@ -170,23 +187,91 @@ export class CSSInjectionManager {
             doneAdded = true;
         }
 
-        if (doneAdded) {
-            // Set opacity to 1 to fade in the component
-            const opacitySheet = new CSSStyleSheet();
-            await opacitySheet.replace(`
-                :host {
-                    opacity: 1 !important;
-                }
-            `);
-            component.shadowRoot.adoptedStyleSheets = [
-                opacitySheet,
-                ...component.shadowRoot.adoptedStyleSheets,
-            ];
+        return doneAdded;
+    }
 
-            component.$emit(domEvents.loadedLinkedStyles);
+    private static async injectLegacyStyle(
+        component: ICSSInjectionComponent,
+        styleLink: string,
+        onLoad: () => void
+    ): Promise<void> {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = styleLink;
+        link.onload = onLoad;
+        component.shadowRoot!.appendChild(link);
+    }
+
+    private static async injectStyleElement(
+        component: ICSSInjectionComponent,
+        styleLink: string,
+        db: IDBDatabase,
+        storeName: string,
+        maxAgeDays: number
+    ): Promise<void> {
+        const cssText = await CSSInjectionManager.getCachedOrFetchCSS(component, styleLink, db, storeName, maxAgeDays);
+        
+        if (component.componentElement) {
+            const styleElement = document.createElement('style');
+            styleElement.textContent = cssText;
+            component.componentElement.appendChild(styleElement);
+        }
+    }
+
+    private static async injectAdoptedStyle(
+        component: ICSSInjectionComponent,
+        styleLink: string,
+        db: IDBDatabase,
+        storeName: string,
+        maxAgeDays: number
+    ): Promise<CSSStyleSheet> {
+        const cssText = await CSSInjectionManager.getCachedOrFetchCSS(component, styleLink, db, storeName, maxAgeDays);
+        
+        const sheet = new CSSStyleSheet();
+        await sheet.replace(cssText);
+        
+        // Cache the stylesheet for future use
+        CSSInjectionManager.CACHED_STYLES.set(styleLink, sheet);
+        
+        return sheet;
+    }
+
+    private static async getCachedOrFetchCSS(
+        component: ICSSInjectionComponent,
+        styleLink: string,
+        db: IDBDatabase,
+        storeName: string,
+        maxAgeDays: number
+    ): Promise<string> {
+        const entry = await component.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 component.indexedDBService.saveToDB(db, storeName, styleLink, {
+                css: cssText,
+                timestamp: Date.now()
+            });
+            console.log(`System saved stylesheet: ${styleLink} to IndexedDB`);
+        }
+
+        return cssText;
+    }
+
+    private static setStylesOwner(component: ICSSInjectionComponent): void {
+        if (!CSSInjectionManager.STYLES_OWNER_COMPONENT) {
+            CSSInjectionManager.STYLES_OWNER_COMPONENT = component;
+            console.log({component});
         }
     }
 }
 
 export default CSSInjectionManager;
-export { CSSInjectMode, ICSSInjectionOptions, ICSSInjectionComponent };
+export { CSSInjectMode, ICSSInjectionOptions, ICSSInjectionComponent };

package/src/index.ts

@@ -30,7 +30,7 @@ import type IRWSConfig from './types/IRWSConfig';
 import type RWSNotify from './types/RWSNotify';
 import type { NotifyUiType, NotifyLogType }  from './types/RWSNotify';
 import * as RWSEvents from './events';
-
+import { CSSInjectMode } from './components/_css_injection';
 export default RWSClient;
 
 export { 
@@ -75,7 +75,8 @@ export {
     RWSEvents
 };
 
-export type {    
+export type {   
+    CSSInjectMode, 
     NotifyUiType,
     NotifyLogType,
     IBackendRoute as IRWSBackendRoute,