@rws-framework/client 2.18.18 → 2.19.1

package/builder/webpack/loaders/rws_fast_scss_loader.js

@@ -10,7 +10,9 @@ module.exports = async function(content) {
     const saveFile = content.indexOf('@save') > -1; 
     const plugin = new RWSScssPlugin({
         appRootDir: this.query?.appRootDir,
-        rwsWorkspaceDir: this.query?.rwsWorkspaceDir
+        rwsWorkspaceDir: this.query?.rwsWorkspaceDir,
+        publicDir: this.query?.publicDir,
+        cssDir: this.query?.cssDir
     }); 
     let fromTs = false;    
 

package/builder/webpack/loaders/rws_fast_ts_loader.js

@@ -66,7 +66,7 @@ module.exports = async function(content) {
         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);  
+            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;  

package/builder/webpack/rws.webpack.config.js

@@ -36,6 +36,7 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
     outputDir,
     outputFileName,
     publicDir,
+    cssDir,
     serviceWorkerPath,
     publicIndex,
     devTools,
@@ -136,6 +137,8 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
     entrypoint: rwsFrontendConfig.entrypoint,
     hotReload,
     hotReloadPort,
+    publicDir,
+    cssDir,
     loaderIgnoreExceptions
 });  
 

package/builder/webpack/rws_scss_plugin.js

@@ -18,6 +18,8 @@ class RWSScssPlugin {
   constructor(params = {
     appRootDir: null,
     rwsWorkspaceDir: null,
+    publicDir: null,
+    cssDir: null,
     autoCompile: []
   }) {
     this.node_modules_dir = (fileDir) => path.relative(fileDir, path.join(this.getRWSRootDir(), '/node_modules'))
@@ -25,6 +27,9 @@ class RWSScssPlugin {
     _scss_fs = _scss_fs_builder(this);
     _scss_compiler = _scss_compiler_builder(this);
 
+    this.pubDir = params.publicDir;
+    this.cssDir = params.cssDir;    
+
     if(!params.rwsWorkspaceDir){      
       throw new Error('Pass "rwsWorkspaceDir" to the "@rws-framework/client/builder/webpack/loaders/rws_fast_ts_loader.js" loader.');
     }
@@ -38,7 +43,7 @@ class RWSScssPlugin {
 
     for (let index in this.autoCompile) {
       const sassFile = this.autoCompile[index];
-      this.compileFile(sassFile, true);
+      this.compileFile(sassFile, pubDir);
     }
   }
   
@@ -49,20 +54,20 @@ class RWSScssPlugin {
   }
 
   async compileFile(scssPath) {    
-    scssPath = _scss_import.processImportPath(scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir(),path.dirname(scssPath))    
+    scssPath = _scss_import.processImportPath(scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir(),path.dirname(scssPath), false, this.getPubDir())    
 
 
-    let scssCode = _scss_fs.getCodeFromFile(scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir());
+    let scssCode = _scss_fs.getCodeFromFile(scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir(), this.getPubDir());
 
-    return await _scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), this.getRWSWorkspaceDir(), this.getRWSRootDir());
+    return await _scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), this.getRWSWorkspaceDir(), this.getRWSRootDir(), this.getPubDir());
   }
 
   async compileScssCode(scssCode, scssPath){    
-    return await _scss_compiler.compileScssCode(scssCode, scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir());
+    return await _scss_compiler.compileScssCode(scssCode, scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir(), this.getPubDir());
   }
 
   writeCssFile(scssFilePath, cssContent){
-    return _scss_fs.writeCssFile(scssFilePath, cssContent);
+    return _scss_fs.writeCssFile(scssFilePath, cssContent, this.getRWSWorkspaceDir(), this.getCssDir());
   }
 
   getRWSWorkspaceDir() {
@@ -72,6 +77,14 @@ class RWSScssPlugin {
   getRWSRootDir() {
     return this.appRootDir;
   }
+
+  getCssDir() {
+    return this.cssDir;
+  }
+
+  getPubDir() {
+    return this.pubDir;
+  }
 }
 
 module.exports = RWSScssPlugin;

package/builder/webpack/scss/_compiler.js

@@ -9,15 +9,15 @@ let _scss_fonts = null;
 const _scss_import_builder = require('./_import');
 let _scss_import = null;
 
-function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir, appRoot) {  
+function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir, appRoot, pubDir = null) {
     _scss_fonts = _scss_fonts_builder(this);
     _scss_import = _scss_import_builder(this);    
-    const [scssImports] = _scss_import.extractScssImports(scssCode, rwsWorkspaceDir, appRoot, fileRootDir);
+    const [scssImports] = _scss_import.extractScssImports(scssCode, rwsWorkspaceDir, appRoot, fileRootDir, pubDir);
 
-    const dependencies = scssImports.map((item) => item[2]);
+    const dependencies = scssImports.map((item) => item[2]);    
 
     if (scssImports && scssImports.length) {
-      scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, rwsWorkspaceDir, fileRootDir), scssCode);  
+      scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, rwsWorkspaceDir, fileRootDir, {}, false, pubDir), scssCode);
     }
 
     const uses = _scss_import.extractScssUses(scssCode)[0];
@@ -38,7 +38,8 @@ function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir, appRoot) {
       const result = sass.compileString(scssCode, { loadPaths: [fileRootDir]});
 
       let compiledCode = result.css.toString();
-      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode, rwsWorkspaceDir, appRoot);
+      // console.log({rwsWorkspaceDir, appRoot});
+      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode, rwsWorkspaceDir, appRoot, pubDir);
       compiledCode = replaceEmojisWithQuestionMark(compiledCode, fileRootDir);
       return { code: compiledCode, dependencies};
     } catch (err) {
@@ -89,7 +90,7 @@ function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir, appRoot) {
     return code;
   }
   
-  module.exports = function(element) {
+  module.exports = function(element, publicDir = null) {    
     return {
         checkForImporterType: checkForImporterType.bind(element),
         compileScssCode: compileScssCode.bind(element)

package/builder/webpack/scss/_fonts.js

@@ -44,7 +44,7 @@ function convertFontToBase64(fontPath) {
     return fs.readFileSync(fontPath, { encoding: 'base64' });
 }
 
-function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir, appRoot) {
+function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir, appRoot, pubDir = null) {
     const fontFaceRegex = /@font-face\s*\{[^}]*\}/g;
     let fontFaces = [...cssContent.matchAll(fontFaceRegex)];
     _scss_import = _scss_import_builder(this);
@@ -56,9 +56,8 @@ function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir, appRoot) {
 
         let modifiedFontFaceContent = fontFaceContent;
 
-        while ((match = urlRegex.exec(fontFaceContent)) !== null) {
-            // Create a promise to convert each font to Base64 and replace in CSS
-            const base64 = convertFontToBase64(_scss_import.processImportPath(match[2], rwsWorkspaceDir, appRoot, null, true));
+        while ((match = urlRegex.exec(fontFaceContent)) !== null) {            
+            const base64 = convertFontToBase64(_scss_import.processImportPath(match[2], rwsWorkspaceDir, appRoot, null, true, pubDir));
             const base64Font = `data:font/woff2;base64,${base64}`;
 
             modifiedFontFaceContent = modifiedFontFaceContent.replace(match[2], base64Font);

package/builder/webpack/scss/_fs.js

@@ -5,19 +5,29 @@ let _scss_import = null;
 const _COMPILE_DIR_NAME = 'compiled';
 
 
-function writeCssFile(scssFilePath, cssContent) {
+function writeCssFile(scssFilePath, cssContent, workspaceDir, finalCssDirOverride = null) {
     const cssFilePath = scssFilePath.replace('.scss', '.css');
-    let endCssFilePath = cssFilePath.split('/');
+    let endCssFilePath = cssFilePath.split(path.sep);
     let endCssDir = [...endCssFilePath];
     endCssDir[endCssDir.length - 1] = `${_COMPILE_DIR_NAME}`;
-    endCssDir = endCssDir.join('/');
+    endCssDir = endCssDir.join(path.sep);
+    const fileName = endCssFilePath[endCssFilePath.length - 1];
 
-    if (!fs.existsSync(endCssDir)) {
-      fs.mkdirSync(endCssDir);
-    }
+    if(!finalCssDirOverride){
+      if (!fs.existsSync(endCssDir)) {
+        fs.mkdirSync(endCssDir);
+      }
 
-    endCssFilePath[endCssFilePath.length - 1] = `${_COMPILE_DIR_NAME}/` + endCssFilePath[endCssFilePath.length - 1];
-    endCssFilePath = endCssFilePath.join('/');
+      endCssFilePath[endCssFilePath.length - 1] = `${_COMPILE_DIR_NAME}${path.sep}` + fileName;
+      endCssFilePath = endCssFilePath.join(path.sep);
+    }else{
+      const cssDirPath = path.join(workspaceDir, finalCssDirOverride);
+      if(!fs.existsSync(cssDirPath)){
+        fs.mkdirSync(cssDirPath);
+      }
+
+      endCssFilePath = path.join(cssDirPath, fileName);
+    }
 
     fs.writeFile(endCssFilePath, cssContent, () => {});
     console.log('Saved external CSS file in: ' + endCssFilePath);
@@ -47,13 +57,13 @@ function readSCSSFilesFromDirectory(dirPath) {
   };
 
 
-  function getCodeFromFile(filePath, rwsWorkspaceDir, appRootDir) {
+  function getCodeFromFile(filePath, rwsWorkspaceDir, appRootDir, pubDir = null) {
     filePath = filePath.replace('//', '/');
     const _scss_import_builder = require('./_import');    
     _scss_import = _scss_import_builder(this);
 
     if (!fs.existsSync(filePath)) {
-      const processedImportPath = _scss_import.processImportPath(filePath, rwsWorkspaceDir, appRootDir, path.dirname(filePath));
+      const processedImportPath = _scss_import.processImportPath(filePath, rwsWorkspaceDir, appRootDir, path.dirname(filePath), false, pubDir);
 
       if (!fs.existsSync(processedImportPath)) {
         throw new Error(`SCSS loader: File path "${filePath}" was not found.`);

package/builder/webpack/scss/_import.js

@@ -8,11 +8,11 @@ const CSS_IMPORT_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@import\s+['"]((?![^'"]*:[^'"]*
 const SCSS_USE_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@use\s+['"]?([^'"\s]+)['"]?;?/gm;
 
 
-function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir = null, noext = false) {
+function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir = null, noext = false, pubDir = null) {
 
     _scss_fs = _scss_fs_builder(this);
     const workspaceDir = this.getRWSWorkspaceDir ? this.getRWSWorkspaceDir() : rwsWorkspaceDir;
-    const appRoot = this.getRWSWorkspaceDir ? this.getRWSRootDir() : appRootDir;
+    const appRoot = this.getRWSWorkspaceDir ? this.getRWSRootDir() : appRootDir;    
   
     if (importPath.split('')[0] === '~') {       
         return fillSCSSExt(replaceWithNodeModules(importPath, appRoot, null, true), noext);
@@ -22,6 +22,14 @@ function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir
         return path.resolve(rwsPath.findPackageDir(__dirname), 'src', 'styles', 'includes.scss');
     }
 
+    if (importPath.indexOf('@workspace') === 0) {        
+        return path.resolve(path.join(workspaceDir, importPath.replace('@workspace', '')));
+    }
+
+    if (importPath.indexOf('@public') === 0) {     
+        return path.resolve(path.join(workspaceDir, pubDir, importPath.replace('@public', '')));
+    }
+
     if (importPath.indexOf('@cwd') === 0) {
         return fillSCSSExt(path.join(this.appRootDir, importPath.slice(4)), noext);
     }
@@ -91,7 +99,7 @@ function fillSCSSExt(scssPath, noext = false) {
     return ext;
 }
 
-function extractScssImports(fileContent, rwsWorkspaceDir, appRootDir, importRootPath) {
+function extractScssImports(fileContent, rwsWorkspaceDir, appRootDir, importRootPath, publicDir) {
     _scss_fs = _scss_fs_builder(this);
     let match;
     const imports = [];
@@ -104,7 +112,7 @@ function extractScssImports(fileContent, rwsWorkspaceDir, appRootDir, importRoot
             importRootPath = path.dirname(importRootPath);
         }
 
-        const processedImportPath = processImportPath(importPath, rwsWorkspaceDir, appRootDir, importRootPath);
+        const processedImportPath = processImportPath(importPath, rwsWorkspaceDir, appRootDir, importRootPath, false, publicDir);
 
         imports.push([processedImportPath, importLine, path.resolve(processedImportPath), rwsWorkspaceDir, appRootDir]);
     }
@@ -140,7 +148,7 @@ function replaceWithNodeModules(input, appRootDir, fileDir = null, absolute = fa
     return input.replace(token, absolute ? `${path.join(appRootDir, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : appRootDir));
 }
 
-function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {}, sub = false) {
+function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {}, sub = false, pubDir = null) {
     _scss_fs = _scss_fs_builder(this);
 
     const importResults = [];
@@ -163,14 +171,14 @@ function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {
         const workspaceDir = this.getRWSWorkspaceDir ? this.getRWSWorkspaceDir() : importData[3];
         const appRoot = this.getRWSWorkspaceDir ? this.getRWSRootDir() : importData[4];
 
-        let importPath = processImportPath(originalImportPath, workspaceDir, appRoot, fileRootDir);              
-
-        let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath, workspaceDir, appRoot).replace(/\/\*[\s\S]*?\*\//g, ''));
+        let importPath = processImportPath(originalImportPath, workspaceDir, appRoot, fileRootDir, false, pubDir);            
+      
+        let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath, workspaceDir, appRoot, pubDir).replace(/\/\*[\s\S]*?\*\//g, ''));
 
-        const recursiveImports = extractScssImports(replacedScssContent, workspaceDir, appRoot, importPath)[0];
+        const recursiveImports = extractScssImports(replacedScssContent, workspaceDir, appRoot, importPath, pubDir)[0];
 
         if (recursiveImports.length) {
-            replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), workspaceDir, importStorage, true), replacedScssContent);
+            replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), workspaceDir, importStorage, true, pubDir), replacedScssContent);
         }
         
         importResults.push({

package/cfg/build_steps/webpack/_build_config.js

@@ -26,6 +26,8 @@ async function getBuildConfig(rwsFrontBuildConfig, _packageDir){
 
     const outputFileName = BuildConfigurator.get('outputFileName') || rwsFrontBuildConfig.outputFileName;
     const publicDir = BuildConfigurator.get('publicDir') || rwsFrontBuildConfig.publicDir;
+    const cssDir = BuildConfigurator.get('cssDir') || rwsFrontBuildConfig.cssDir;
+
     const serviceWorkerPath = BuildConfigurator.get('serviceWorker') || rwsFrontBuildConfig.serviceWorker;
 
     const publicIndex = BuildConfigurator.get('publicIndex') || rwsFrontBuildConfig.publicIndex;
@@ -65,6 +67,7 @@ async function getBuildConfig(rwsFrontBuildConfig, _packageDir){
         outputDir,
         outputFileName,
         publicDir,
+        cssDir,
         serviceWorkerPath,
         publicIndex,
         devTools,

package/cfg/build_steps/webpack/_hot_reload.js

@@ -1,14 +1,14 @@
-function getRWSHotReloadSetup(port, outputDir){
-    return {
-        hot: true,
-        port,
-        static: {
-            directory: outputDir,            
-        },
-        devMiddleware: {
-            publicPath: '/'
-        }
-    }
-}
-
+function getRWSHotReloadSetup(port, outputDir){
+    return {
+        hot: true,
+        port,
+        static: {
+            directory: outputDir,            
+        },
+        devMiddleware: {
+            publicPath: '/'
+        }
+    }
+}
+
 module.exports = { getRWSHotReloadSetup };

package/cfg/build_steps/webpack/_loaders.js

@@ -9,7 +9,8 @@ const chalk = require('chalk');
 const { timingCounterStart, timingCounterStop } = require('./_timing');
 const { rwsRuntimeHelper, rwsPath } = require('@rws-framework/console');
 
-function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entrypoint, loaderIgnoreExceptions) {
+
+function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entrypoint, loaderIgnoreExceptions, publicDir, cssDir) {
   const scssLoader = path.join(packageDir, 'builder/webpack/loaders/rws_fast_scss_loader.js');
   const tsLoader = path.join(packageDir, 'builder/webpack/loaders/rws_fast_ts_loader.js');
   const htmlLoader = path.join(packageDir, 'builder/webpack/loaders/rws_fast_html_loader.js');
@@ -74,7 +75,8 @@ function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entry
           loader: tsLoader,
           options: {
             rwsWorkspaceDir: executionDir,
-            appRootDir
+            appRootDir,
+            publicDir
           }
         }
       ],
@@ -97,7 +99,9 @@ function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entry
           loader: scssLoader,
           options: {
             rwsWorkspaceDir: executionDir,
-            appRootDir
+            appRootDir,
+            publicDir,
+            cssDir
           }
         },
       ],
@@ -216,7 +220,7 @@ function extractRWSViewArgs(content, noReplace = false) {
   }
 }
 
-async function getStyles(filePath, rwsWorkspaceDir, appRootDir, addDependency, templateExists, stylesPath = null, isDev = false) {
+async function getStyles(filePath, rwsWorkspaceDir, appRootDir, addDependency, templateExists, stylesPath = null, isDev = false, publicDir = null) {
   if(!stylesPath){
     stylesPath = 'styles/layout.scss';
   }
@@ -227,8 +231,8 @@ async function getStyles(filePath, rwsWorkspaceDir, appRootDir, addDependency, t
   if (fs.existsSync(stylesFilePath)) {  
     const scsscontent = fs.readFileSync(stylesFilePath, 'utf-8');
     timingCounterStart();
-    const plugin = new RWSCssPlugin({ rwsWorkspaceDir, appRootDir });
-    const codeData = await plugin.compileScssCode(scsscontent, path.join(path.dirname(filePath), 'styles'), null, filePath, !isDev);
+    const plugin = new RWSCssPlugin({ rwsWorkspaceDir, appRootDir, publicDir });
+    const codeData = await plugin.compileScssCode(scsscontent, path.join(path.dirname(filePath), 'styles'));
     const elapsed = timingCounterStop();
     let currentTimingList = rwsRuntimeHelper.getRWSVar('_timer_css');