@rws-framework/client 2.9.23 → 2.10.1

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.1",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -106,4 +106,4 @@
     "overrides": {
         "lodash": "^4.17.21"
     }
-}
+}

package/rws.webpack.config.js

@@ -32,7 +32,9 @@ const RWSWebpackWrapper = async (config) => {
 
   const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || config.executionDir || process.cwd(), config.packageDir);
 
-  const isDev = BuildConfigurator.get('dev', config.dev);
+  const isWatcher = process.argv.includes('--watch') || false;  
+
+  const isDev = isWatcher ? true : (BuildConfigurator.get('dev', config.dev) || false);
   const isHotReload = BuildConfigurator.get('hot', config.hot);
   const isReport = BuildConfigurator.get('report', config.report);
   const isParted = BuildConfigurator.get('parted', config.parted || false);
@@ -138,7 +140,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 +179,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 +224,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 +237,9 @@ const RWSWebpackWrapper = async (config) => {
     WEBPACK_PLUGINS.push(new RWSAfterPlugin({ actions: WEBPACK_AFTER_ACTIONS, dev: isDev }));
   }
 
-
   let cfgExport = {  
     context: executionDir,  
-    entry: {
-      client: config.entry,
+    entry: {      
       ...automatedChunks
     },
     mode: isDev ? 'development' : 'production',
@@ -276,7 +261,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,37 @@ import { RWSPlugin } from "../plugins/_plugin";
 type RWSInfoType = { components: string[] };
 
 async function loadPartedComponents(this: RWSClientInstance): Promise<RWSInfoType> {
-    this.assignClientToBrowser();
-
-    const componentParts: RWSInfoType = await this.apiService.get<RWSInfoType>(this.appConfig.get('partedDirUrlPrefix') + '/rws_info.json');        
+    this.assignClientToBrowser();        
+    
+    return new Promise(async (resolve: (res: RWSInfoType) => void, reject: (res: Error | unknown) => void) => {        
 
-    const componentsPromises: Promise<string>[] = [];
+        const componentParts: RWSInfoType = await this.apiService.get<RWSInfoType>(this.appConfig.get('partedDirUrlPrefix') + '/rws_info.json');        
+        const loadedComponents = [];
 
-    let compList = '';
-    
-    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
-        }));        
+        document.addEventListener(RWSViewComponent._EVENTS.component_define, (event: Event) => {
+            const customEvent = event as CustomEvent<string>;            
 
-        compList += `  - \x1b[1m${componentParts.components[key]}:\x1b[0m component (${partUrl}) \n`;
-    }); 
+            loadedComponents.push(customEvent.detail);                           
+        });
 
-    console.info(`\x1b[1m[RWS]\x1b[0m" \x1b[1mPARTED\x1b[0m" mode asynchronously added components: \n${compList}`);
+        let compList = '';
+        
+        componentParts.components.forEach((componentName: string, key: number) => {
+            const partUrl = `${this.appConfig.get('partedDirUrlPrefix')}/${this.appConfig.get('partedPrefix')}.${componentName}.js`;           
     
-    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);
-    });     
+            compList += `  - \x1b[1m${componentParts.components[key]}:\x1b[0m component (${partUrl}) \n`;
+    
+            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/components/uploader/component.ts

@@ -3,19 +3,23 @@ import { RWSView, RWSViewComponent, observable, attr } from '../../index';
 @RWSView('rws-uploader')
 class RWSUploader extends RWSViewComponent {
 
-  @observable uploadProgress: number = 0;
+  @observable uploadProgress: number;
 
   @observable uploadedFile: File;
   @observable chosenFile: File;
   @observable uploadParams: any;
 
   @attr onFinish: (uploadResponse: any) => void;
-  @attr onStart: (chosenFile: File, context: any) => void = (chosenFile: File) => null;
+  @attr onStart: (chosenFile: File, context: any) => Promise<unknown> = async (chosenFile: File) => chosenFile;
   @attr onProgress: (progress: number) => void = (progress: number) => null;
 
 
   async onUploadStart(): Promise<void>
   {    
+        if(!this.uploadProgress){
+            this.uploadProgress = 0;
+        }
+
       const response = await this.onStart(this.chosenFile, this);
    
       if(response === null){
@@ -71,7 +75,7 @@ class RWSUploader extends RWSViewComponent {
 
   uploadProgressChanged(oldV: any, newV: any)
   {
-    console.log('chng', this.uploadProgress);
+    
   }
 }
 

package/src/components/uploader/styles/layout.scss

@@ -1,8 +1,33 @@
 @import "@rws-mixins";
 
+//vars
+$upl_secondary: var(--rws-uploader-secondary, #CCC);
+$upl_bg: var(--rws-uploader-bg, #424242);
+$upl_border: var(--rws-uploader-border, #FFF);
+
+$upl_primary: var(--rws-uploader-primary, #EE2375);
+
+$upl_text: var(--rws-uploader-text, #000);
+
+$upl_btn_text: var(--rws-uploader-btn-text, #000);
+$upl_btn_bg: var(--rws-uploader-btn-bg, #CCC);
+$upl_btn_border: var(--rws-uploader-btn-border, #000);
+
+rws-progress {
+    --accent-foreground-rest: $upl_primary;
+}
+
+//styles
 .upload_area {    
+
+    color: $upl_text;
+
     padding: 25px;
 
+    
+    *{
+        box-sizing: border-box;
+    }
 
     section{
         &::after{
@@ -14,7 +39,7 @@
         display: block;
         contain: content;
         box-sizing: border-box;
-        background: #424242;
+        background: $upl_bg;
         border-radius: 10px;
         box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
 
@@ -22,7 +47,7 @@
             @include grid-container();
             @include grid-flex-align-items(center, center);
             
-            border: 4px dashed #FFF; // Adjust color as needed
+            border: 4px dashed $upl_border; // Adjust color as needed
             width: 100%; // Adjust width as needed
             height: 100%; // Adjust height as needed
             padding: 30px;
@@ -33,14 +58,14 @@
             cursor: pointer;
 
             .file-block {
-                border: 1px solid #FFF;
+                border: 1px solid $upl_border;
 
                 font-size: 10px;
                 padding: 15px;
                 border-radius: 15px;
 
                 .close-btn {
-                    border: 1px solid #FFF;
+                    border: 1px solid $upl_border;
                     padding: 5px;
                     font-weight: bold;
                     margin-left: 10px;
@@ -53,7 +78,7 @@
 
                 &:before{
                     content: '';
-                    background: #CCC;
+                    background: $upl_secondary;
                     opacity: 0.4;
 
                     position: absolute;
@@ -70,6 +95,7 @@
 
         h3{
             padding: 0 15px;
+            color: $upl_text;
         }
 
         article {
@@ -78,14 +104,14 @@
         
 
         button {
-            background: var(--accent-fill-rest);
-            color: var(--foreground-on-accent-rest);
+            background: $upl_btn_bg;
+            color: $upl_btn_text;
             font-size: 14px;
             padding: 10px;        
             box-shadow: none;
             border-radius: 5px;
             border-style: solid;
-            border-color: var(--accent-fill-rest);
+            border-color: $upl_btn_border;
             border-width: 1px;
 
             fill: currentcolor;
@@ -97,6 +123,8 @@
 
             &.next{
                 float: right;
+                margin-right: 10px;
+                margin-bottom: 10px;
             }            
         }
     }    

package/src/components/uploader/template.html

@@ -1,7 +1,7 @@
 <div class="upload_area">
     <section>
         <h3>Upload file</h3>
-        <rws-progress value="${x => x.uploadProgress}" min="1" max="100"></rws-progress>
+        <rws-progress :value="${x => x.uploadProgress}" min="1" max="100"></rws-progress>
         <article>
             <div class="drag-and-drop"> 
                 <div @click="${x => !x.chosenFile ? x.onChoose() : (() => {})()}" class="upl-background"></div>

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 = () => {