@rws-framework/client 2.1.6 → 2.1.7

package/src/components/index.ts

@@ -1,9 +1,23 @@
 import { RWSUploader } from './uploader/component';
 import { RouterComponent } from './router/component';
+import { RWSProgress } from './progress/component';
+import { RWSLoader } from './loader/component';
 
 const RWSComponents = { 
     RWSUploader,
-    RouterComponent
+    RouterComponent,
+    RWSProgress,
+    RWSLoader
 };
 
-export { RWSComponents };
+function declareRWSComponents(parted: boolean = false): void
+{
+    if(!parted){
+        RWSUploader;
+        RouterComponent;
+        RWSProgress;
+        RWSLoader;
+    }
+}
+
+export { RWSComponents, declareRWSComponents };

package/src/components/loader/component.ts

@@ -0,0 +1,13 @@
+import { RWSView, RWSViewComponent } from '@rws-framework/client';
+
+@RWSView('the-loader')
+class RWSLoader extends RWSViewComponent {
+  
+    connectedCallback(): void {
+        super.connectedCallback();
+    }
+}
+
+RWSLoader.defineComponent();
+
+export { RWSLoader };

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

@@ -0,0 +1,16 @@
+@import "../../../styles/includes.scss";
+
+//loader
+
+$loader-color: var(--primary-color, #eb7b13);
+$loader-size: 56px;
+$loader-height: 20px;
+$loader-border-size: 8px;
+$loader-gap: 12px;
+$loader-animation-duration: 1s;
+
+@import "~/scss-loading-animations/src/loaders";
+
+.loader {
+  @include loader01;
+}

package/src/components/loader/template.html

@@ -0,0 +1 @@
+<div><div class="loader"></div></div>

package/src/components/progress/component.ts

@@ -36,7 +36,7 @@ class RWSProgress extends RWSViewComponent {
 
     public connectedCallback(): void {
         super.connectedCallback();
-        this.updatePercentComplete();
+        this.updatePercentComplete();        
     }
 
     private updatePercentComplete(): void {
@@ -46,7 +46,7 @@ class RWSProgress extends RWSViewComponent {
         const range: number = max - min;
 
         this.percentComplete =
-            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);            
     }
 }
 

package/src/components/uploader/component.ts

@@ -68,6 +68,11 @@ class RWSUploader extends RWSViewComponent {
   {
       this.shadowRoot.removeChild(fileInput);
   }
+
+  uploadProgressChanged(oldV: any, newV: any)
+  {
+    console.log('chng', this.uploadProgress);
+  }
 }
 
 RWSUploader.defineComponent();

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}" 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/index.ts

@@ -16,6 +16,8 @@ import { ngAttr } from './components/_attrs/angular-attr';
 import RWSClient from './client';
 import RWSServiceWorker, { SWMsgType } from './service_worker/src/_service_worker';
 import IRWSUser from './interfaces/IRWSUser';
+import RWSViewComponent, { IAssetShowOptions } from './components/_component';
+
 import RWSContainer from './components/_container';
 
 import { 
@@ -24,11 +26,10 @@ import {
     RWSRouter, IRWSRouteResult
 } from './services/RoutingService';
 
-// import { RWSComponents } from './components';
-import RWSViewComponent, { IAssetShowOptions } from './components/_component';
-import { RWSDecoratorOptions, RWSIgnore, RWSView, RWSInject } from './components/_decorator';
 
+import { RWSDecoratorOptions, RWSIgnore, RWSView, RWSInject } from './components/_decorator';
 
+import { RWSComponents, declareRWSComponents } from './components';
 
 export default RWSClient;
 export { 
@@ -82,7 +83,7 @@ export {
 
     renderRouteComponent,
     
-    // RWSComponents,
+    RWSComponents,
 
     observable,
     attr,
@@ -93,6 +94,7 @@ export {
     RWSService,
     RWSViewComponent,   
     provideRWSDesignSystem,
+    declareRWSComponents,
 
     RWSContainer
 };

package/webpack/rws_fast_scss_loader.js

@@ -15,7 +15,7 @@ module.exports = function(content) {
     }
 
     try {
-        const code = plugin.compileScssCode(content, path.dirname(filePath));        
+        const code = plugin.compileScssCode(content, path.dirname(filePath), null, filePath);        
 
         if (fromTs) {
             if (saveFile && code) {

package/webpack/rws_plugin.js

@@ -5,8 +5,9 @@ const { getTokenSourceMapRange } = require('typescript');
 const _tools = require('../_tools');
 const _COMPILE_DIR_NAME = 'compiled';
 
-const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/g;
-
+const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/gm;
+const CSS_IMPORT_REGEX = /@import\s+['"]((?![^'"]*:[^'"]*).+?)['"];?/gm
+const SCSS_USE_REGEX = /@use\s+['"]?([^'"\s]+)['"]?;?/gm;
 const _DEV = true;
 
 const log = (args) => {
@@ -34,51 +35,36 @@ class RWSPlugin {
     }
   }
 
-  extractCssImports(fileContent) {    
-    const regex = /@import\s+['"](.+?\.css)['"];?/g;
+  extractScssImports(fileContent) {      
     let match;
     const imports = [];
   
-    while ((match = regex.exec(fileContent)) !== null) {      
-      let importPath = match[1];
-      // Convert to absolute path or handle it as required
-      imports.push(importPath);
-    }
-
-    fileContent = fileContent.replace(regex, '');
+    while ((match = CSS_IMPORT_REGEX.exec(fileContent)) !== null) {        
+      const importPath = match[1];
+      const importLine = match[0];
+      
+      imports.push([importPath, importLine]);
+    }    
   
     return [imports, fileContent];
   }
 
-  extractScssImports(fileContent) {    
-    const regex = /@import\s+['"](.+?\.scss)['"];?/g;
+  extractScssUses(fileContent) {      
     let match;
-    const imports = [];
+    const uses = [];
   
-    while ((match = regex.exec(fileContent)) !== null) {      
-      let importPath = match[1];
+    while ((match = SCSS_USE_REGEX.exec(fileContent)) !== null) {        
+      const usesPath = match[1];
+      const usesLine = match[0];
       
-      imports.push(importPath);
-    }
-
-    fileContent = fileContent.replace(regex, '');
+      uses.push([usesPath, usesLine]);
+    }    
   
-    return [imports, fileContent];
+    return [uses];
   }
 
-  replaceNodeModulesImport(fileContent, fileDir) {    
-    const regex = /@import\s+['"](.+?\.scss)['"];?/g;        
-    
-    const resultCode = fileContent.replace(regex, (match, importPath) => {    
-      return `@import "${path.join(this.node_modules_dir(fileDir), importPath)}";`;
-    });
-  
-    return resultCode;
-  }
-
-  detectImports(code){
-    const regex = /@import\s+['"](.+?\.(css|scss))['"];?/g;   
-    return regex.test(code);
+  detectImports(code){        
+    return CSS_IMPORT_REGEX.test(code);
   }
   
   writeCssFile(scssFilePath, cssContent) {    
@@ -153,7 +139,51 @@ class RWSPlugin {
     });
   }
 
+ readSCSSFilesFromDirectory(dirPath) {
+    let scssFiles = [];
+  
+    try {
+      const files = fs.readdirSync(dirPath);
+  
+      files.forEach(file => {
+        const filePath = path.join(dirPath, file);
+        const stat = fs.statSync(filePath);
+  
+        if (stat.isFile() && path.extname(file) === '.scss') {
+          scssFiles.push(filePath);
+        } else if (stat.isDirectory()) {
+          scssFiles = scssFiles.concat(readSCSSFilesFromDirectory(filePath));
+        }
+      });
+    } catch (e) {
+      console.error(`Failed to read directory ${dirPath}:`, e);
+    }
+  
+    return scssFiles;
+  };
+  
+
   getCodeFromFile(filePath){
+    filePath = filePath.replace('//', '/');   
+    
+    const fileStat = fs.statSync(filePath);
+
+    if(!fs.existsSync(filePath)){
+      throw new Error(`SCSS loader: File path "${filePath}" was not found.`);
+    }
+
+    if(filePath[filePath.length - 1] === '/' && fs.statSync(filePath).isDirectory()){
+      let collectedCode = '';
+
+      this.readSCSSFilesFromDirectory(filePath).forEach(scssPath => {
+        collectedCode += fs.readFileSync(scssPath, 'utf-8');
+      });
+
+      return collectedCode;
+    }else if(fs.statSync(filePath).isDirectory()){
+        throw new Error(`Non-directory path (not ending with "/") "${filePath}" is and should not be a directory`)
+    }    
+
     return fs.readFileSync(filePath, 'utf-8');
   }
 
@@ -162,22 +192,15 @@ class RWSPlugin {
   }
 
   compileFile(scssPath){
-    if(scssPath.split('')[0] === '~'){
-      scssPath = _self.replaceWithNodeModules(scssPath, path.dirname(scssPath));
-    }
-
-    const cwdRequest = scssPath.indexOf('@cwd');    
-
-    if( cwdRequest > -1){
-      scssPath = process.cwd() + '/' + scssPath.slice(cwdRequest+1);
-    }
+    scssPath = this.processImportPath(scssPath, path.dirname(scssPath))
 
     let scssCode = this.getCodeFromFile(scssPath);  
+
     return this.compileScssCode(scssCode, path.dirname(scssPath));
   }
 
   processImports(imports, fileRootDir, importStorage = {}, sub = false){
-    let finalCode = '';
+    const importResults = [];
 
     const getStorage = (sourceComponentPath, importedFileContent) => {
       const sourceComponentPathFormatted = sourceComponentPath.replace('/','_');
@@ -191,122 +214,104 @@ class RWSPlugin {
       return '';
     } 
 
-    imports.forEach(originalImportPath => {      
-      let importPath = originalImportPath;  
-      
-      // log(`Processing '${importPath}' import in: ` + fileRootDir);  
-      
-      if(originalImportPath.split('')[0] === '~'){        
-        importPath = this.replaceWithNodeModules(importPath, path.dirname(fileRootDir), true);         
-      }    
-  
-      const cwdRequest = originalImportPath.indexOf('@cwd');    
-  
-      if( cwdRequest > -1){
-        importPath = process.cwd() + '/' + originalImportPath.slice(cwdRequest+4);
-      }
+    imports.forEach(importData => {                    
+      const originalImportPath = importData[0];
+      let importPath = this.processImportPath(originalImportPath, fileRootDir);      
+      let replacedScssContent = getStorage(importPath, this.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, '')); 
 
-      // log(`Procesed '${importPath}' import to: ` + importPath);  
-      importPath = path.resolve(fileRootDir, importPath);      
-      
-      const replacedScssContent = getStorage(importPath, this.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, ''));      
-          
+      const recursiveImports = this.extractScssImports(replacedScssContent)[0];
 
-      finalCode = replacedScssContent;
-
-      let recursiveCode = '';      
-
-      if(this.detectImports(finalCode)){
-        recursiveCode = this.processImports(this.extractScssImports(finalCode)[0], fileRootDir, importStorage, true);    
+      if(recursiveImports.length){           
         
-       
-      }            
+        replacedScssContent = this.replaceImports(this.processImports(recursiveImports, path.dirname(importPath), importStorage, true), replacedScssContent);              
+      }        
       
+      importResults.push({
+        line: importData[1],
+        code: replacedScssContent
+      });            
+    });    
 
-      finalCode = recursiveCode + '\n' + finalCode;
-      finalCode = this.deleteImports(finalCode);
-       
-    });
-
-    return finalCode;
+    return importResults;
   }
 
-  deleteImports(code = '')
-  {
-    const delregex = /@import\s+['"].+\.(scss|css)['"];\s*/g;
-    return code.replace(delregex, '');
+  replaceImports(processedImports, code){
+    processedImports.forEach(importObj => {          
+      code = code.replace(importObj.line, importObj.code);
+    });
+  
+    return code;
   }
 
-  compileScssCode(scssCode, fileRootDir, createFile = false){    
-    const _self = this;        
-    
-      // scssCode = this.replaceNodeModulesImport(scssCode, fileRootDir);  
+  processImportPath(importPath, fileRootDir){
+    const cwdRequest = importPath.indexOf('@cwd');
 
+    if(importPath.split('')[0] === '~'){      
+      return this.fillSCSSExt(this.replaceWithNodeModules(importPath, path.dirname(fileRootDir), true));         
+    } else if ( cwdRequest > -1){      
+      return this.fillSCSSExt(process.cwd() + '/' + importPath.slice(cwdRequest+4));
+    }    
 
-      const [scssImports] = this.extractScssImports(scssCode);                    
-
-      let dotest = false;
+    if(importPath.split('')[0] === '/'){
+      return this.fillSCSSExt(importPath);  
+    }
 
-      if(fileRootDir.indexOf('chat-message') > -1){        
-        dotest = true;
-      }
+    if(importPath.split('')[0] === '.'){
+      return this.fillSCSSExt(path.resolve(fileRootDir, importPath));
+    }
 
-      if(scssImports && scssImports.length){
-        scssCode = this.deleteImports(scssCode);  
-        scssCode = this.processImports(scssImports, fileRootDir) + scssCode;                       
-      }
+    const relativized = path.resolve(fileRootDir) + '/' + importPath;
 
-      try {
+    if(!fs.existsSync(relativized)){
+      const partSplit = relativized.split('/');
+      partSplit[partSplit.length-1] = '_' + partSplit[partSplit.length-1] + '.scss';
 
-        // if(fileRootDir.indexOf('chat-message') > -1){
-        //   log(`Processing 0 cnt '${fileRootDir}' import : \n`);
-          
-        //   console.log(scssCode);
-        // }  
+      const newPath = partSplit.join('/');
 
-        const result = sass.compileString(scssCode, { loadPaths: [fileRootDir] })
+      if(fs.existsSync(newPath)){
+        return newPath;
+      }      
+    }
 
+    return this.fillSCSSExt(relativized);
+  }
 
-        // if(fileRootDir.indexOf('chat-message') > -1){
-        //   log(`Processing  cnt '${fileRootDir}' import : \n` + result.css);  
-        // }
+  fillSCSSExt(scssPath){
+    if((!fs.existsSync(scssPath) || (fs.existsSync(scssPath) && fs.statSync(scssPath).isDirectory())) && fs.existsSync(`${scssPath}.scss`)){
+      return `${scssPath}.scss`;
+    }
 
-        let finalCss = result.css;
-      
-        // Check for CSS imports
-        const [cssImports] = this.extractCssImports(scssCode); 
-        
-        if(cssImports && cssImports.length){
-          // finalCss = this.processImports(cssImports, fileRootDir);        
-        }
-        
-        cssImports.forEach(originalImportPath => {
+    if(fs.existsSync(`_${scssPath}.scss`)){
+      return `${scssPath}.scss`;
+    }
 
-          let importPath = originalImportPath;
+    return scssPath;
+  }
 
-          if(originalImportPath.split('')[0] === '~'){
-            //console.warn(`RWS Sass compiler did not find '${importPath}' from '${module.resource}' looking inside node_modules...`);
-            importPath = _self.replaceWithNodeModules(importPath, path.dirname(fileRootDir), true);
+  compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null){    
+    const _self = this;                  
+      const [scssImports] = this.extractScssImports(scssCode);                         
 
-            if(!fs.existsSync(importPath)){
-              throw new Error(`No ${importPath} found.`)
-            }
-          }
+      if(scssImports && scssImports.length){                
+        scssCode = this.replaceImports(this.processImports(scssImports, fileRootDir), scssCode);                       
+      }
 
-          finalCss = finalCss.replace(/@import\s+['"](.+?)['"]\s*;/g, '');
-          
-          const cssContent = _self.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, '');              
+      const uses = this.extractScssUses(scssCode)[0];
+      let scssUses = '';
+    
 
-          finalCss = cssContent + finalCss;
+      uses.forEach(scssUse => {
+        const useLine = scssUse[1];
+        scssUses += useLine + '\n'; 
+        scssCode = scssCode.replace(useLine, '');
+      });       
+  
+      scssCode = scssUses + scssCode;      
 
-          if(_self.hasFontEmbeds()){
-            finalCss = _self.embedFontsInCss(finalCss);
-          }
-        });
+      try {
 
-        // if(createFile){
-        //   this.writeCssFile(scssPath, finalCss);
-        // }      
+        const result = sass.compileString(scssCode, { loadPaths: [fileRootDir] })
+        let finalCss = result.css;               
 
         return finalCss;
       } catch(err) {