@rws-framework/client 2.23.7 → 2.25.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.23.7",
+    "version": "2.25.0",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -41,7 +41,6 @@
         "reflect-metadata": "^0.2.2",
         "resolve-url-loader": "^5.0.0",
         "socket.io-client": "^4.7.2",
-        "upload": "^1.3.2",
         "url-router": "^13.0.0",
         "uuid": "^9.0.1",
         "v4": "^0.0.1",

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

@@ -25,12 +25,12 @@ import type IRWSUser from './types/IRWSUser';
 import type { IAssetShowOptions, IRWSViewComponent } from './components/_component';
 import type { RWSDecoratorOptions } from './components/_decorator';
 import type { DOMOutputType, TagsProcessorType } from './services/DOMService';
-import type { IBackendRoute, IHTTProute, IPrefixedHTTProutes } from './services/ApiService';
+import type { IBackendRoute, IHTTProute, IPrefixedHTTProutes, UploadFunctionOptions } 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';
-
+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,
@@ -86,5 +87,6 @@ export type {
     IRWSConfig,
     IRWSUser,
     TagsProcessorType,
-    IRWSViewComponent
+    IRWSViewComponent,
+    UploadFunctionOptions as IRWSUploadFunctionOptions
 }

package/src/services/ApiService.ts

@@ -1,11 +1,10 @@
 import { ITypesResponse } from '../../../components/src/types/IBackendCore';
 import TheService from './_service';
+import axios from 'axios';
 
 //@4DI
 import ConfigService, { ConfigServiceInstance } from './ConfigService';
 
-import { upload, UploadResponse } from 'upload';
-
 import { backend } from './_api/backend';
 import { calls } from './_api/calls';
 
@@ -44,12 +43,29 @@ interface IPrefixedHTTProutes<P = {[key: string]: any}> {
 
 type IBackendRoute = IHTTProute | IPrefixedHTTProutes;
 
+interface UploadFunctionOptions {
+    headers?: Record<string, string>;
+    method?: 'POST' | 'PUT' | 'PATCH';
+    onProgress?: (progress: number) => void;
+}
+
+interface UploadResponse {
+    success: boolean;
+    data?: any;
+    error?: string;
+}
 
 
 class ApiService extends TheService {
     static _DEFAULT: boolean = true;
     public token?: string;    
 
+    private defaultUploadOptions: () => UploadFunctionOptions = () => ({
+        headers: this.token ? { Authorization: `Bearer ${this.token}` } : {},
+        method: 'POST' as const,
+        onProgress: (progress: number) => null,
+    });
+
     constructor(@ConfigService public config: ConfigServiceInstance) {
         super();        
     }
@@ -69,20 +85,58 @@ class ApiService extends TheService {
         }
     }    
 
-    async uploadFile(url: string, file: File, onProgress: (progress: number) => void, payload: any = {}): Promise<UploadResponse>
-    {
-        return upload(
-            
-            url,
-            {
-                file,
-                ...payload
-            },
-            {
-                onProgress,
-                headers: this.token ? { Authorization: `Bearer ${this.token}` } : null,
+    async uploadFile(url: string, files: Record<string, File>, payload: any = {}, uploadOptions: UploadFunctionOptions = this.defaultUploadOptions()): Promise<UploadResponse>
+    {        
+        const formData = new FormData();
+        
+        // Add files to FormData
+        Object.entries(files).forEach(([key, file]) => {
+            formData.append(key, file);
+        });
+        
+        // Add payload data to FormData
+        Object.entries(payload).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                formData.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value));
             }
-        );
+        });
+        
+        const options = {
+            ...this.defaultUploadOptions(),
+            ...uploadOptions
+        };
+        
+        try {
+            const method = options.method || 'POST';
+            
+            const axiosConfig = {
+                method: method.toLowerCase() as any,
+                url,
+                data: formData,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    ...options.headers
+                },
+                onUploadProgress: (progressEvent: any) => {
+                    if (options.onProgress && progressEvent.total) {
+                        const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                        options.onProgress(progress);
+                    }
+                }
+            };
+            
+            const result = await axios(axiosConfig);
+            
+            return {
+                success: true,
+                data: result.data
+            };
+        } catch (error: any) {
+            return {
+                success: false,
+                error: error.response?.data?.message || error.message || 'Upload failed'
+            };
+        }
     }
 
     public pureGet = calls.pureGet;
@@ -96,7 +150,7 @@ class ApiService extends TheService {
         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),
+        uploadFile: async (routeName: string, files: Record<string, File>, payload: any = {}, uploadOptions: UploadFunctionOptions = this.defaultUploadOptions(), options: IAPIOptions = {}): Promise<UploadResponse> => this.uploadFile(backend.getBackendUrl.bind(this)(routeName, options?.routeParams), files, payload, uploadOptions),
     };
 
     async getResource(resourceName: string): Promise<ITypesResponse>
@@ -108,4 +162,4 @@ class ApiService extends TheService {
 }
 
 export default ApiService.getSingleton();
-export { IBackendRoute, RequestOptions, ApiService as ApiServiceInstance, IHTTProute, IPrefixedHTTProutes, IAPIOptions };
+export { IBackendRoute, RequestOptions, ApiService as ApiServiceInstance, IHTTProute, IPrefixedHTTProutes, IAPIOptions, UploadFunctionOptions };

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "compilerOptions": {        
+  "compilerOptions": {
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "target": "ES2018",
@@ -7,13 +7,19 @@
     "moduleResolution": "node",
     "strict": true,
     "esModuleInterop": true,
-    "sourceMap": true,    
+    "sourceMap": true,
     "strictNullChecks": false,
     "allowSyntheticDefaultImports": true,
+    "types": [],
     "lib": [
       "DOM",
       "ESNext",
       "WebWorker"
     ]
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "**/*.d.ts",
+    "**/node_modules/**",
+  ]
 }