@rws-framework/client 2.22.1 → 2.23.0

package/builder/webpack/loaders/rws_fast_ts_loader.js

@@ -11,10 +11,17 @@ module.exports = async function(content) {
     let processedContent = content;
     const filePath = this.resourcePath;
     const isDev = this._compiler.options.mode === 'development';       
-    let isIgnored = false;
-    let isDebugged = false;      
     // timingStart('decorator_extraction');
-    const decoratorExtract = LoadersHelper.extractRWSViewArgs(processedContent);    
+    const decoratorExtract = await LoadersHelper.extractRWSViewArgsAsync(
+        processedContent, 
+        false, 
+        filePath, 
+        this.addDependency, 
+        this.query?.rwsWorkspaceDir, 
+        this.query?.appRootDir, 
+        isDev, 
+        this.query?.publicDir
+    );    
     const decoratorData = decoratorExtract ? decoratorExtract.viewDecoratorData : null;
     
     const cachedCode = processedContent;
@@ -34,19 +41,11 @@ module.exports = async function(content) {
         return content;
     }
 
-    let templateName = null;
-    let stylesPath = null;
+    let isIgnored = false;
+    let isDebugged = false;
     
     if(decoratorData.decoratorArgs){                     
         const decoratorArgs = decoratorData.decoratorArgs
-
-        if(decoratorArgs.template){
-            templateName = decoratorData.decoratorArgs.template || null;
-        }
-
-        if(decoratorArgs.styles){
-            stylesPath = decoratorData.decoratorArgs.styles || null;
-        }
         
         if(decoratorArgs.ignorePackaging){
             isIgnored = true;
@@ -64,19 +63,13 @@ module.exports = async function(content) {
 
     try { 
         if(tagName){                                   
-            const [template, htmlFastImports, templateExists] = await LoadersHelper.getTemplate(filePath, this.addDependency, className, templateName, isDev);         
-
-            const styles = await LoadersHelper.getStyles(filePath, this.query?.rwsWorkspaceDir, this.query?.appRootDir,this.addDependency, templateExists, stylesPath, isDev, this.query?.publicDir);  
-
             if(className){                
-                const replacedViewDecoratorContent =  decoratorExtract.replacedDecorator;  
+                const replacedViewDecoratorContent = decoratorExtract.replacedDecorator;  
 
                 if(replacedViewDecoratorContent){
-                    processedContent = `${template}\n${styles}\n${replacedViewDecoratorContent}`;
+                    processedContent = replacedViewDecoratorContent;
                 }                
             }
-            
-            processedContent = `${htmlFastImports ? htmlFastImports + '\n' : ''}${processedContent}`;
         }
 
         const debugTsPath = filePath.replace('.ts','.debug.ts');

package/cfg/build_steps/webpack/_loaders.js

@@ -125,7 +125,115 @@ function _extractRWSViewDefs(fastOptions = {}, decoratorArgs = {})
   return [addedParamDefs, addedParams];
 }
 
-function extractRWSViewArgs(content, noReplace = false) {
+function extractRWSViewArgs(content, noReplace = false, filePath = null, addDependency = null, rwsWorkspaceDir = null, appRootDir = null, isDev = false, publicDir = null) {
+  // If this is being called with only basic parameters (backward compatibility)
+  if (filePath === null || addDependency === null) {
+    return extractRWSViewArgsSync(content, noReplace);
+  }
+  
+  // Otherwise, call the async version
+  return extractRWSViewArgsAsync(content, noReplace, filePath, addDependency, rwsWorkspaceDir, appRootDir, isDev, publicDir);
+}
+
+function extractRWSViewArgsSync(content, noReplace = false) {
+  const viewReg = /@RWSView\(\s*["']([^"']+)["'](?:\s*,\s*([\s\S]*?))?\s*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm;
+
+  let m;
+  let tagName = null;
+  let className = null;
+  let classNamePrefix = null;
+  let decoratorArgs = null;
+
+  const _defaultRWSLoaderOptions = {
+    templatePath: 'template.html',
+    stylesPath: 'styles.scss',
+    fastOptions: { shadowOptions: { mode: 'open' } }
+  }
+
+  while ((m = viewReg.exec(content)) !== null) {
+    if (m.index === viewReg.lastIndex) {
+      viewReg.lastIndex++;
+    }
+
+    m.forEach((match, groupIndex) => {
+      if (groupIndex === 1) {
+        tagName = match;
+      }
+
+      if (groupIndex === 2) {
+        if (match) {
+          try {            
+            decoratorArgs = JSON.parse(JSON.stringify(match));
+          } catch(e){
+            console.log(chalk.red('Decorator options parse error: ') + e.message + '\n Problematic line:');
+            console.log(`
+              @RWSView(${tagName}, ${match})
+            `);
+            console.log(chalk.yellowBright(`Decorator options failed to parse for "${tagName}" component.`) + ' { decoratorArgs } defaulting to null.');
+            console.log(match);
+
+            console.error(e);
+
+            throw new Error('Failed parsing @RWSView')
+          }                   
+        }
+      }
+
+      if (groupIndex === 3) {
+        if(match){
+          classNamePrefix = match;
+        }
+      }
+
+      if (groupIndex === 4) {
+        className = match;
+      }
+    });
+  }
+
+  if(!tagName){
+    return null;
+  }
+
+  let processedContent = content;
+  let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+
+  if(decoratorArgs && decoratorArgs !== ''){
+    try {
+      decoratorArgs = json5.parse(decoratorArgs);
+    }catch(e){
+      // ignore parse errors for backward compatibility
+    }
+  }
+
+  if (decoratorArgs && decoratorArgs.fastElementOptions) {
+    fastOptions = decoratorArgs.fastElementOptions;
+  }
+ 
+  let replacedDecorator = null;
+
+  if(!noReplace){    
+    const [addedParamDefs, addedParams] = _extractRWSViewDefs(fastOptions, decoratorArgs);    
+    const replacedViewDecoratorContent = processedContent.replace(
+      viewReg,
+      `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
+    );
+
+    replacedDecorator = `${addedParamDefs.join('\n')}\n${replacedViewDecoratorContent}`;
+  }
+
+  return {
+    viewDecoratorData: {
+      tagName,
+      className,
+      classNamePrefix,
+      decoratorArgs
+    },
+    replacedDecorator
+  }
+}
+
+async function extractRWSViewArgsAsync(content, noReplace = false, filePath = null, addDependency = null, rwsWorkspaceDir = null, appRootDir = null, isDev = false, publicDir = null) {
   const viewReg = /@RWSView\(\s*["']([^"']+)["'](?:\s*,\s*([\s\S]*?))?\s*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm;
 
   let m;
@@ -206,16 +314,37 @@ function extractRWSViewArgs(content, noReplace = false) {
  
   let replacedDecorator = null;
 
-  if(!noReplace){    
-    const [addedParamDefs, addedParams] = _extractRWSViewDefs(fastOptions, decoratorArgs);    
-    const replacedViewDecoratorContent = processedContent.replace(
+  if(!noReplace && filePath && addDependency){    
+    const [addedParamDefs, addedParams] = _extractRWSViewDefs(fastOptions, decoratorArgs);
+    
+    // Get template name and styles path from decorator args
+    let templateName = null;
+    let stylesPath = null;
+    
+    if(decoratorArgs && decoratorArgs.template){
+        templateName = decoratorArgs.template;
+    }
+    if(decoratorArgs && decoratorArgs.styles){
+        stylesPath = decoratorArgs.styles;
+    }
+    
+    // Generate template and styles
+    const [template, htmlFastImports, templateExists] = await getTemplate(filePath, addDependency, className, templateName, isDev);
+    const styles = await getStyles(filePath, rwsWorkspaceDir, appRootDir, addDependency, templateExists, stylesPath, isDev, publicDir);
+    
+    // Extract original imports (everything before the @RWSView decorator)
+    const beforeDecorator = processedContent.substring(0, processedContent.search(/@RWSView/));
+    const afterDecoratorMatch = processedContent.match(/@RWSView[\s\S]*$/);
+    const afterDecorator = afterDecoratorMatch ? afterDecoratorMatch[0] : '';
+    
+    const replacedViewDecoratorContent = afterDecorator.replace(
       viewReg,
-      `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
+      `${template}\n${styles}\n${addedParamDefs.join('\n')}\n@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
     );
 
     // console.log({replacedViewDecoratorContent});
 
-    replacedDecorator = `${addedParamDefs.join('\n')}\n${replacedViewDecoratorContent}`;
+    replacedDecorator = `${htmlFastImports ? htmlFastImports + '\n' : ''}${beforeDecorator}${replacedViewDecoratorContent}`;
   }
 
   return {
@@ -290,4 +419,4 @@ let rwsTemplate: any = T.html<${className}>\`${templateContent}\`;
   return [template, htmlFastImports, templateExists];
 }
 
-module.exports = { getRWSLoaders, extractRWSViewArgs, getTemplate, getStyles }
+module.exports = { getRWSLoaders, extractRWSViewArgs, extractRWSViewArgsAsync, getTemplate, getStyles }

package/package.json

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

package/src/components/_component.ts

@@ -14,14 +14,13 @@ 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';
+import CSSInjectionManager, { CSSInjectMode, ICSSInjectionOptions } from './_css_injection';
 
 type ComposeMethodType<
     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> {
@@ -253,82 +252,39 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         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[] = [];
-
-        let doneAdded = false;
-
-        for (const styleLink of styleLinks) {
-            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);
-
-                    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);
+    static getCachedStyles(styleLinks: string[]): CSSStyleSheet[] {
+        return CSSInjectionManager.getCachedStyles(styleLinks);
+    }
 
-                    adoptedSheets.push(sheet);
+    static hasCachedStyles(styleLinks: string[]): boolean {
+        return CSSInjectionManager.hasCachedStyles(styleLinks);
+    }
 
-                    if(mode === 'adopted' || mode === 'both'){
-                        resolve();
-                    }
-                }
-            });
+    static getStylesOwnerComponent(): any {
+        return CSSInjectionManager.getStylesOwnerComponent();
+    }
 
-            await loadPromise;
-        }
+    static clearCachedStyles(): void {
+        CSSInjectionManager.clearCachedStyles();
+    }
 
-        if (adoptedSheets.length) {
-            this.getShadowRoot().adoptedStyleSheets = [
-                ...adoptedSheets,
-                ...this.getShadowRoot().adoptedStyleSheets,
-            ];
+    protected async injectStyles(styleLinks: string[], mode: CSSInjectMode = 'adopted', maxDaysExp?: number) {
+        // Create a bridge object that exposes the necessary properties
+        const componentBridge = {
+            shadowRoot: this.shadowRoot,
+            indexedDBService: this.indexedDBService,
+            $emit: this.$emit.bind(this)
+        };
+        
+        return CSSInjectionManager.injectStyles(componentBridge, styleLinks, { mode, maxDaysExp });
+    }
 
-            doneAdded = true;
-        }
+    protected getInjectedStyles(styleLinks: string[]): CSSStyleSheet[] {
+        return CSSInjectionManager.getCachedStyles(styleLinks);
+    }
 
-        if (doneAdded) {
-            this.$emit(domEvents.loadedLinkedStyles);
-        }
+    protected hasInjectedStyles(styleLinks: string[]): boolean {
+        return CSSInjectionManager.hasCachedStyles(styleLinks);
     }
 }
 

package/src/components/_css_injection.ts

@@ -0,0 +1,187 @@
+import { domEvents } from '../events';
+import IndexedDBService, { IndexedDBServiceInstance } from '../services/IndexedDBService';
+
+type CSSInjectMode = 'adopted' | 'legacy' | 'both';
+
+const _DEFAULT_INJECT_CSS_CACHE_LIMIT_DAYS = 1;
+
+interface ICSSInjectionOptions {
+    mode?: CSSInjectMode;
+    maxDaysExp?: number;
+}
+
+interface ICSSInjectionComponent {
+    shadowRoot: ShadowRoot | null;
+    indexedDBService: IndexedDBServiceInstance;
+    $emit(eventName: string): void;
+}
+
+export class CSSInjectionManager {
+    private static CACHED_STYLES: Map<string, CSSStyleSheet> = new Map();
+    private static STYLES_OWNER_COMPONENT: ICSSInjectionComponent | null = null;
+
+    static getCachedStyles(styleLinks: string[]): CSSStyleSheet[] {
+        return styleLinks
+            .filter(link => CSSInjectionManager.CACHED_STYLES.has(link))
+            .map(link => CSSInjectionManager.CACHED_STYLES.get(link)!);
+    }
+
+    static hasCachedStyles(styleLinks: string[]): boolean {
+        return styleLinks.every(link => CSSInjectionManager.CACHED_STYLES.has(link));
+    }
+
+    static getStylesOwnerComponent(): ICSSInjectionComponent | null {
+        return CSSInjectionManager.STYLES_OWNER_COMPONENT;
+    }
+
+    static clearCachedStyles(): void {
+        CSSInjectionManager.CACHED_STYLES.clear();
+        CSSInjectionManager.STYLES_OWNER_COMPONENT = null;
+    }
+
+    static async injectStyles(
+        component: ICSSInjectionComponent, 
+        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');
+        }
+
+        // Add initial transition styles to host element
+        const transitionSheet = new CSSStyleSheet();
+        await transitionSheet.replace(`
+            :host {
+                opacity: 0;
+                transition: opacity 0.3s ease-in-out;
+            }
+        `);
+        component.shadowRoot.adoptedStyleSheets = [
+            transitionSheet,
+            ...component.shadowRoot.adoptedStyleSheets,
+        ];
+
+        let adoptedSheets: CSSStyleSheet[] = [];
+        let doneAdded = false;
+
+        // Check if we already have cached styles from the owner component
+        const cachedSheets: CSSStyleSheet[] = [];
+        const uncachedLinks: string[] = [];
+
+        for (const styleLink of styleLinks) {
+            if (CSSInjectionManager.CACHED_STYLES.has(styleLink)) {
+                cachedSheets.push(CSSInjectionManager.CACHED_STYLES.get(styleLink)!);
+            } else {
+                uncachedLinks.push(styleLink);
+            }
+        }
+
+        // If we have cached styles, use them immediately
+        if (cachedSheets.length > 0) {
+            adoptedSheets.push(...cachedSheets);
+            doneAdded = true;
+        }
+
+        // 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;
+            }
+
+            const dbName = 'css-cache';
+            const storeName = 'styles';
+            const db = await component.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;
+
+            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'){
+                                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'){
+                            resolve();
+                        }
+                    }
+                });
+
+                await loadPromise;
+            }
+
+            doneAdded = true;
+        }
+
+        if (adoptedSheets.length) {
+            component.shadowRoot.adoptedStyleSheets = [
+                ...adoptedSheets,
+                ...component.shadowRoot.adoptedStyleSheets,
+            ];
+
+            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,
+            ];
+
+            component.$emit(domEvents.loadedLinkedStyles);
+        }
+    }
+}
+
+export default CSSInjectionManager;
+export { CSSInjectMode, ICSSInjectionOptions, ICSSInjectionComponent };