@rws-framework/client 2.9.23 → 2.10.0

package/_tools.js

@@ -337,16 +337,37 @@ function getAllFilesInFolder(folderPath, ignoreFilenames = [], recursive = false
   return files;
 }
 
-function getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix) {
+function getRndInteger(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) ) + min;
+}
+
+function printAddJs(scriptFileName, partedDirUrlPrefix, partedPrefix, onload = ''){
+  const sriptVarName = 'script' + getRndInteger(0, 1000);
+  return `  
+    const ${sriptVarName} = document.createElement('script');
+    ${sriptVarName}.src = '${partedDirUrlPrefix}/${partedPrefix}.${scriptFileName}.js';        
+    ${sriptVarName}.type = 'text/javascript';    
+
+    document.body.appendChild(${sriptVarName});
+
+    ${onload}     
+  `
+}
+
+function getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix, isDev = true) {
+  let code = `if(!window.RWS_PARTS_LOADED){
+    ${printAddJs('vendors', partedDirUrlPrefix, partedPrefix, `
+      window.RWS_PARTS_LOADED = true;
+      console.log('\x1b[1m[RWS]\x1b[0m', 'vendors injected for parted mode');       
+    `)}
+  }`;
+
+  if(!isDev){
+    code = code.replace(/\n\s+/g, '');
+  }
+
   return {
-    banner: `if(!window.RWS_PARTS_LOADED){
-            const script = document.createElement('script');
-            script.src = '${partedDirUrlPrefix}/${partedPrefix}.vendors.js';        
-            script.type = 'text/javascript';
-            document.body.appendChild(script);
-            window.RWS_PARTS_LOADED = true;
-            console.log('\x1b[1m[RWS]\x1b[0m', 'vendors injected for parted mode');
-          }`.replace('\n', ''),
+    banner: code,
     raw: true,
     entryOnly: true,
     include: `${partedPrefix}.client.js`

package/cfg/build_steps/webpack/_rws_externals.js

@@ -12,7 +12,7 @@ const _defaultOpts = {
   }
 }
 
-const externals = (declaredCodeBase, nodeModules, externalOptions = _defaultOpts) => ({context, request}, callback) => {
+const externals = (declaredCodeBase, nodeModules, automatedChunks, externalOptions = _defaultOpts) => ({context, request}, callback) => {
     let theOptions = _defaultOpts;
 
     if(externalOptions !== null){      
@@ -36,11 +36,13 @@ const externals = (declaredCodeBase, nodeModules, externalOptions = _defaultOpts
 
     const frontendDirs = [
       codeBase,
-      __dirname
-    ];    
+      path.resolve(__dirname,'..','..','..')
+    ];        
 
     const inFrontendContext = frontendDirs.some(dir => context.startsWith(dir)) || 
-        externalOptions._vars.frontendRequestContextCache.some(package => context.indexOf(package.request) > -1);
+        externalOptions._vars.frontendRequestContextCache.some(package => context.indexOf(package.request) > -1)
+    
+        ;
 
     const patternInContextOrRequest = pattern => pattern.test(request) || pattern.test(context);
 
@@ -53,13 +55,14 @@ const externals = (declaredCodeBase, nodeModules, externalOptions = _defaultOpts
       }
 
       externalOptions._vars.frontendRequestContextCache.push({request, context});
-
-      //merging to output
+      
+      //handled as RWS async dependency
       return callback();
     }
     
     externalOptions._vars.ignored.push({request, context});
-    //using require from node_modules
+
+    //using require from vendors
     callback(null, false);
   }
 

package/package.json

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

package/rws.webpack.config.js

@@ -138,7 +138,18 @@ const RWSWebpackWrapper = async (config) => {
 
   const rwsInfoJson = outputDir + '/rws_info.json'
   const automatedEntries = {};
-  const automatedChunks = {};
+  let automatedChunks = {
+    client: config.entry,
+  };
+
+  // if(isParted){ 
+  //   automatedChunks = {
+  //     index:  config.entry,
+  //     client: __dirname + '/src/client.ts',
+  //   };   
+
+  //   console.log({index: automatedChunks.client})
+  // }
 
   const foundRWSUserClasses = tools.findComponentFilesWithText(executionDir, '@RWSView', ['dist', 'node_modules', '@rws-framework/client']);
   const foundRWSClientClasses = tools.findComponentFilesWithText(__dirname, '@RWSView', ['dist', 'node_modules']);
@@ -166,39 +177,13 @@ const RWSWebpackWrapper = async (config) => {
   });
 
   if (isParted) {
-    WEBPACK_PLUGINS.push(new webpack.BannerPlugin(tools.getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix)));
+    // WEBPACK_PLUGINS.push(new webpack.BannerPlugin(tools.getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix, isDev)));
 
     for (const pluginKey of Object.keys(rwsPlugins)){
       const plugin = rwsPlugins[pluginKey];
       partedComponentsLocations = await plugin.onComponentsLocated(partedComponentsLocations);
     }
     
-    optimConfig = { splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: (module) => {
-            let importString = module.identifier();
-
-            if (importString.split('!').length > 2) {
-              importString = importString.split('!')[2];
-            }
-
-            const inNodeModules = importString.indexOf('node_modules') > -1;
-            const inVendorPackage = importString.indexOf(__dirname) > -1;
-
-            const inExecDir = importString.indexOf(executionDir) > -1;
-            const isNoPartedComponent = !Object.keys(automatedEntries).find(key => importString.indexOf(path.resolve(path.dirname(automatedEntries[key]))) > -1);
-
-            let isAvailableForVendors = (inNodeModules || inVendorPackage) && isNoPartedComponent;
-
-
-            return isAvailableForVendors;
-          },
-          name: 'vendors',
-          chunks: 'all',
-        }
-      }
-    } };
   }
 
   fs.writeFileSync(rwsInfoJson, JSON.stringify({ components: Object.keys(automatedEntries) }, null, 2));
@@ -237,11 +222,11 @@ const RWSWebpackWrapper = async (config) => {
     WEBPACK_AFTER_ACTIONS.push({
       type: 'custom',
       actionHandler: () => {        
-        fs.writeFileSync(path.join(debugDir, 'ignored.json'), JSON.stringify(devExternalsVars.ignored, null, 2));
-        fs.writeFileSync(path.join(debugDir, 'packed.json'), JSON.stringify(devExternalsVars.packed, null, 2));
+        fs.writeFileSync(path.join(debugDir, 'in_vendors.json'), JSON.stringify(devExternalsVars.ignored, null, 2));
+        fs.writeFileSync(path.join(debugDir, 'rws_processed.json'), JSON.stringify(devExternalsVars.packed, null, 2));
         fs.writeFileSync(path.join(debugDir, 'requestcache.json'), JSON.stringify(devExternalsVars.frontendRequestContextCache, null, 2));
 
-        console.log(chalk.yellow('[RWS BUILD] (after)'), `saved in: ${debugDir}/(ignored/packed/requestcache).json`);
+        console.log(chalk.yellow('[RWS BUILD] (after)'), `packaging debug saved in: ${debugDir}`);
       }
     });
   }
@@ -250,11 +235,12 @@ const RWSWebpackWrapper = async (config) => {
     WEBPACK_PLUGINS.push(new RWSAfterPlugin({ actions: WEBPACK_AFTER_ACTIONS, dev: isDev }));
   }
 
+  console.log('Webpack building with entrypoints:', Object.keys(automatedChunks));
+
 
   let cfgExport = {  
     context: executionDir,  
-    entry: {
-      client: config.entry,
+    entry: {      
       ...automatedChunks
     },
     mode: isDev ? 'development' : 'production',
@@ -276,7 +262,7 @@ const RWSWebpackWrapper = async (config) => {
       rules: getRWSLoaders(__dirname, path.resolve(config.packageDir, 'node_modules'), tsConfigPath),
     },
     plugins: WEBPACK_PLUGINS,    
-    externals: rwsExternals(executionDir, modules_setup, {
+    externals: rwsExternals(executionDir, modules_setup, automatedChunks, {
       _vars: devExternalsVars
     })
   }

package/src/client/components.ts

@@ -5,37 +5,41 @@ import { RWSPlugin } from "../plugins/_plugin";
 type RWSInfoType = { components: string[] };
 
 async function loadPartedComponents(this: RWSClientInstance): Promise<RWSInfoType> {
-    this.assignClientToBrowser();
+    this.assignClientToBrowser();        
+    
+    return new Promise(async (resolve: (res: RWSInfoType) => void, reject: (res: Error | unknown) => void) => {        
+
+        const componentParts: RWSInfoType = await this.apiService.get<RWSInfoType>(this.appConfig.get('partedDirUrlPrefix') + '/rws_info.json');        
+        const loadedComponents = [];
+
+        document.addEventListener(RWSViewComponent._EVENTS.component_define, (event: Event) => {
+            const customEvent = event as CustomEvent<string>;
+
+            console.log('defined', customEvent.detail);
 
-    const componentParts: RWSInfoType = await this.apiService.get<RWSInfoType>(this.appConfig.get('partedDirUrlPrefix') + '/rws_info.json');        
+            loadedComponents.push(customEvent.detail);
 
-    const componentsPromises: Promise<string>[] = [];
+            console.log(loadedComponents.length, componentParts.components.length);
+        });
 
-    let compList = '';
+        let compList = '';
+        
+        componentParts.components.forEach((componentName: string, key: number) => {
+            const partUrl = `${this.appConfig.get('partedDirUrlPrefix')}/${this.appConfig.get('partedPrefix')}.${componentName}.js`;           
     
-    componentParts.components.forEach((componentName: string, key: number) => {
-        const partUrl = `${this.appConfig.get('partedDirUrlPrefix')}/${this.appConfig.get('partedPrefix')}.${componentName}.js`;
-        componentsPromises.push(this.apiService.pureGet(partUrl, {
-            headers: {
-                'Content-Type': 'script'
-            } as any
-        }));        
-
-        compList += `  - \x1b[1m${componentParts.components[key]}:\x1b[0m component (${partUrl}) \n`;
-    }); 
-
-    console.info(`\x1b[1m[RWS]\x1b[0m" \x1b[1mPARTED\x1b[0m" mode asynchronously added components: \n${compList}`);
+            compList += `  - \x1b[1m${componentParts.components[key]}:\x1b[0m component (${partUrl}) \n`;
     
-    const downloadedComponents = await Promise.all(componentsPromises);
-
-    downloadedComponents.forEach((componentCode: string, key: number) => {
-        const script: HTMLScriptElement = document.createElement('script');
-        script.textContent = componentCode;     
-        script.type = 'text/javascript';
-        document.body.appendChild(script);
-    });     
+            const script: HTMLScriptElement = document.createElement('script');
+            script.async = true;
+            script.src = partUrl;     
+            script.type = 'text/javascript';
+            document.body.appendChild(script);
+        }); 
+    
+        console.info(`\x1b[1m[RWS]\x1b[0m" \x1b[1mPARTED\x1b[0m" mode asynchronously added components: \n${compList}`);
 
-    return componentParts;
+        resolve(componentParts);
+    });
 }   
 
 function defineAllComponents() {

package/src/components/_component.ts

@@ -11,7 +11,7 @@ import { applyConstructor, RWSInject } from './_decorator';
 import TheRWSService from '../services/_service';
 import { handleExternalChange } from './_attrs/_external_handler';
 import { IFastDefinition, isDefined, defineComponent, getDefinition } from './_definitions';
-import { on, $emitDown, observe } from './_event_handling';
+import { on, $emitDown, observe, sendEventToOutside } from './_event_handling';
 
 type ComposeMethodType<
     T extends FoundationElementDefinition, 
@@ -31,6 +31,11 @@ export interface IWithCompose<T extends RWSViewComponent> {
     _depKeys: {[key: string]: string[]};
     _externalAttrs: { [key:string]: string[] };
     setExternalAttr: (componentName: string, key: string) => void
+    sendEventToOutside: <T>(eventName: string, data: T) => void
+    _EVENTS: {
+        component_define: string,
+        component_parted_load: string,
+    }
 }
 
 abstract class RWSViewComponent extends FoundationElement implements IRWSViewComponent {
@@ -48,6 +53,11 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
     static _externalAttrs: { [key: string]: string[] } = {};
     static _verbose: boolean = false;
 
+    static _EVENTS = {
+        component_define: 'rws:lifecycle:defineComponent',
+        component_parted_load: 'rws:lifecycle:loadPartedComponents',
+    }
+
     @RWSInject(ConfigService, true) protected config: ConfigServiceInstance;    
     @RWSInject(DOMService, true) protected domService: DOMServiceInstance;
     @RWSInject(UtilsService, true) protected utilsService: UtilsServiceInstance;
@@ -170,13 +180,11 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
     }
 
     sendEventToOutside<T>(eventName: string, data: T) {
-        const event = new CustomEvent<T>(eventName, {
-            detail: data,
-            bubbles: true,
-            composed: true
-        });
+        sendEventToOutside(eventName, data);
+    }
 
-        this.$emit(eventName, event);
+    static sendEventToOutside<T>(eventName: string, data: T) {
+        sendEventToOutside(eventName, data);
     }
 
     private applyFileList(): void

package/src/components/_definitions.ts

@@ -43,6 +43,8 @@ export function defineComponent<T extends RWSViewComponent>(element: IWithCompos
         throw new Error('RWS client not initialized');
     }
 
+    element.sendEventToOutside<string>(element._EVENTS.component_define, element.definition.name);
+
     richWindow.RWS.components[element.definition.name] = {
         interface: composedComp,
         component: element

package/src/components/_event_handling.ts

@@ -31,4 +31,11 @@ export function observe(this: RWSViewComponent, callback: (component: RWSViewCom
     });
     
     observer.observe(this.getShadowRoot(), { childList: true, subtree: true });
+}
+
+export function sendEventToOutside<T>(eventName: string, data: T): void
+{
+    document.dispatchEvent(new CustomEvent<T>(eventName, {
+        detail: data,
+    }));
 }

package/src/services/ConfigService.ts

@@ -1,6 +1,7 @@
 import TheService from './_service';
 import IRWSConfig from '../types/IRWSConfig';
 import { RWSFillBuild } from '../components/_decorators/RWSFillBuild';
+import { sendEventToOutside } from '../components/_event_handling';
 
 
 
@@ -85,11 +86,9 @@ class ConfigService extends TheService {
             return;
         }
 
-        __SENT_TO_COMPONENTS.push(tagName);
+        __SENT_TO_COMPONENTS.push(tagName); 
 
-        document.dispatchEvent(new CustomEvent<{tagName: string}>('rws_cfg_call', {
-            detail: {tagName},
-        }));
+        sendEventToOutside<{tagName: string}>('rws_cfg_call', {tagName})
 
         return new Promise((resolve) => {
             const tick = () => {