@rws-framework/client 2.19.0 → 2.20.0

package/builder/webpack/loaders/rws_fast_scss_loader.js

@@ -11,7 +11,8 @@ module.exports = async function(content) {
     const plugin = new RWSScssPlugin({
         appRootDir: this.query?.appRootDir,
         rwsWorkspaceDir: this.query?.rwsWorkspaceDir,
-        publicDir: this.query?.publicDir
+        publicDir: this.query?.publicDir,
+        cssDir: this.query?.cssDir
     }); 
     let fromTs = false;    
 

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

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

package/builder/webpack/rws_scss_plugin.js

@@ -19,6 +19,7 @@ class RWSScssPlugin {
     appRootDir: null,
     rwsWorkspaceDir: null,
     publicDir: null,
+    cssDir: null,
     autoCompile: []
   }) {
     this.node_modules_dir = (fileDir) => path.relative(fileDir, path.join(this.getRWSRootDir(), '/node_modules'))
@@ -27,6 +28,7 @@ class RWSScssPlugin {
     _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.');
@@ -65,7 +67,7 @@ class RWSScssPlugin {
   }
 
   writeCssFile(scssFilePath, cssContent){
-    return _scss_fs.writeCssFile(scssFilePath, cssContent);
+    return _scss_fs.writeCssFile(scssFilePath, cssContent, this.getRWSWorkspaceDir(), this.getCssDir());
   }
 
   getRWSWorkspaceDir() {
@@ -76,6 +78,10 @@ class RWSScssPlugin {
     return this.appRootDir;
   }
 
+  getCssDir() {
+    return this.cssDir;
+  }
+
   getPubDir() {
     return this.pubDir;
   }

package/builder/webpack/scss/_compiler.js

@@ -14,6 +14,8 @@ function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir, appRoot, pubDir
     _scss_import = _scss_import_builder(this);    
     const [scssImports] = _scss_import.extractScssImports(scssCode, rwsWorkspaceDir, appRoot, fileRootDir, pubDir);
 
+    // console.log({scssImports});
+
     const dependencies = scssImports.map((item) => item[2]);    
 
     if (scssImports && scssImports.length) {

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);

package/builder/webpack/scss/_import.js

@@ -12,8 +12,8 @@ function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir
 
     _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,8 +22,8 @@ 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('@workspace') === 0) {    
+        return path.join(workspaceDir, importPath.replace('@workspace', ''));
     }
 
     if (importPath.indexOf('@public') === 0) {     
@@ -32,11 +32,11 @@ function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir
 
     if (importPath.indexOf('@cwd') === 0) {
         return fillSCSSExt(path.join(this.appRootDir, importPath.slice(4)), noext);
-    }
+    }   
 
     if (importPath.split('')[0] === '/' || importPath.split('')[1] === ':') {
-        const originalImport = fillSCSSExt(importPath, noext);        
-        
+        const originalImport = fillSCSSExt(importPath, noext);  
+
         if(!fs.existsSync(originalImport)){
             const absoluteImport = fillSCSSExt(path.join(workspaceDir, 'src', importPath), noext);
 
@@ -44,17 +44,19 @@ function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir
         }
         
         return originalImport;
-    }    
+    }   
+    
+   
 
-    if (fileRootDir) {
-        const relativized = path.resolve(fileRootDir) + '/' + importPath;     
+    if (fileRootDir) {    
+        const relativized = path.join(path.resolve(fileRootDir), importPath);     
 
         if (importPath.split('')[0] === '.') {
             return fillSCSSExt(relativized, noext);
         }
 
         if (!fs.existsSync(relativized)) {
-            const partSplit = relativized.split('/');
+            const partSplit = relativized.split(path.sep);
             partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + '.scss';
 
             const newPath = underscorePath(relativized);
@@ -69,15 +71,22 @@ function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir
     return importPath;
 }
 
-function underscorePath(path, noext = false) {
-    const partSplit = path.split('/');
-    partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + (path.indexOf('.scss') > - 1 || noext ? '' : '.scss');
-    return partSplit.join('/');
+function underscorePath(underPath, noext = false) {
+    const partSplit = underPath.split(path.sep);
+
+    const repl = (partSplit[partSplit.length - 1].split('')[0] !== '_' ? '_' : '') + partSplit[partSplit.length - 1];
+
+    partSplit[partSplit.length - 1] = repl + (underPath.indexOf('.scss') > - 1 || noext ? '' : '.scss');
+
+
+
+    return partSplit.join(path.sep);
 }
 
 
 function fillSCSSExt(scssPath, noext = false) {
     const underscoredPath = underscorePath(scssPath, noext);
+
     let ext = scssPath;
 
     if (!fs.existsSync(scssPath) && fs.existsSync(underscoredPath)) {
@@ -145,7 +154,7 @@ function detectImports(code) {
 
 function replaceWithNodeModules(input, appRootDir, fileDir = null, absolute = false, token = '~') {
     _scss_fs = _scss_fs_builder(this);   
-    return input.replace(token, absolute ? `${path.join(appRootDir, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : appRootDir));
+    return input.replace(token, absolute ? `${path.join(appRootDir, 'node_modules')}${path.sep}` : this.node_modules_dir(fileDir ? fileDir : appRootDir));
 }
 
 function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {}, sub = false, pubDir = null) {
@@ -154,7 +163,7 @@ function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {
     const importResults = [];
 
     const getStorage = (sourceComponentPath, importedFileContent) => {
-        const sourceComponentPathFormatted = sourceComponentPath.replace('/', '_');
+        const sourceComponentPathFormatted = sourceComponentPath.replace(path.sep, '_');
 
         if (!(sourceComponentPathFormatted in importStorage)) {
             importStorage[sourceComponentPathFormatted] = importedFileContent;
@@ -171,7 +180,9 @@ 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, false, pubDir);            
+        let importPath = processImportPath(originalImportPath, workspaceDir, appRoot, fileRootDir, false, pubDir);
+        
+        // console.log({originalImportPath, importPath});
       
         let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath, workspaceDir, appRoot, pubDir).replace(/\/\*[\s\S]*?\*\//g, ''));
 

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/_loaders.js

@@ -10,7 +10,7 @@ const { timingCounterStart, timingCounterStop } = require('./_timing');
 const { rwsRuntimeHelper, rwsPath } = require('@rws-framework/console');
 
 
-function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entrypoint, loaderIgnoreExceptions, publicDir) {
+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');
@@ -100,7 +100,8 @@ function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entry
           options: {
             rwsWorkspaceDir: executionDir,
             appRootDir,
-            publicDir
+            publicDir,
+            cssDir
           }
         },
       ],

package/cfg/build_steps/webpack/_webpack_config.js

@@ -25,6 +25,7 @@ async function createWebpackConfig({
     hotReload,
     hotReloadPort,
     publicDir = null,
+    cssDir = null,
     loaderIgnoreExceptions
 }) { 
 
@@ -59,7 +60,7 @@ async function createWebpackConfig({
         },
         devServer: hotReload ? getRWSHotReloadSetup(hotReloadPort, outputDir) : false,
         module: {            
-            rules: getRWSLoaders(_packageDir, executionDir, tsConfig, appRootDir, entrypoint, loaderIgnoreExceptions, publicDir),
+            rules: getRWSLoaders(_packageDir, executionDir, tsConfig, appRootDir, entrypoint, loaderIgnoreExceptions, publicDir, cssDir),
         },
         plugins: WEBPACK_PLUGINS,
         // externals: rwsExternals(_packageDir, executionDir, modules_setup, automatedChunks, {

package/console.js

@@ -1,87 +1,87 @@
-#!/usr/bin/env node
-
-const chalk = require('chalk');
-const path = require('path');
-const fs = require('fs');
-const tools = require('./_tools');
-
-const moduleDir = path.resolve(__dirname);
-const executionDir = path.resolve(process.cwd());
-const workspaceRoot = tools.findRootWorkspacePath(executionDir);
-
-const command2map = process.argv[2];
-const firstArg = process.argv[3] || '';
-
-const extraArgsAggregated = [];
-
-if(process.argv.length > 4){
-    for(let i = 4; i <= process.argv.length-1;i++){
-      extraArgsAggregated.push(process.argv[i]);
-    }
-}
-
-const CMD_LIST = [
-  'init',
-  'build:sw'
-]
-
-async function main() {
-    if(!CMD_LIST.includes(command2map) || command2map === 'help'){
-      const helpTxt = `RWS Client CLI. \n\n Main features: \n - framerwork init \n - tests \n\n`;
-      const cmdList = `Command list: \n ${CMD_LIST.map((el) => `"rws-client ${el}"`).join('\n')}`;
-      const currentColor = command2map === 'help' ? chalk.yellow : chalk.red
-
-      if(command2map === 'help'){
-        console.log(currentColor(helpTxt));
-      }
-
-      console.log(currentColor(cmdList))
-      return false;
-    }
-
-    switch(command2map){
-      case 'init': await initCmd(); break;
-      case 'build:sw': await buildSwCmd(); break;
-    }
-    
-    return true;
-}
-
-async function initCmd(){
-  let workspaced = false;  
-    if(workspaceRoot !== executionDir){
-      workspaced = true;
-    }  
-  
-    if(workspaced){    
-      if(!fs.existsSync(`${executionDir}/.eslintrc.json`)){
-        const rcjs = fs.readFileSync(`${moduleDir}/.setup/.eslintrc.json`, 'utf-8');
-        fs.writeFile(`${executionDir}/.eslintrc.json`, rcjs.replace('{{frontend_dir}}', executionDir));
-        console.log(chalk.green('RWS CLI'), 'Installed eslint base workspace config file.');
-      }
-    }else{
-      if(!fs.existsSync(`${executionDir}/.eslintrc.json`)){
-        fs.copyFile(`${moduleDir}/.eslintrc.json`, `${executionDir}/.eslintrc.json`);
-        console.log(chalk.green('[RWS Client]'), 'Installed eslint config file.');
-      }        
-    }
-
-    if(!fs.existsSync(`${executionDir}/tsconfig.json`)){
-      fs.copyFile(`${moduleDir}/.setup/tsconfig.json`, `${executionDir}/tsconfig.json`);
-      console.log(chalk.green('[RWS Client]'), 'Installed tsconfig.');
-    }   
-}
-
-async function buildSwCmd(){
-  const webpackCmd = `yarn webpack`;
-  
-  try {
-    console.log(chalk.yellow('[RWS Client]'), 'Installing service worker...');
-    await tools.runCommand(`${webpackCmd} --config ${path.resolve(moduleDir, 'service_worker')}/webpack.config.js`, executionDir, false, { env: { SWPATH: firstArg } });
-    console.log(chalk.green('[RWS Client]'), 'Service worker installed.');
-  }catch(e){
-    console.error('runerror',e);
-  }
-}
-
+#!/usr/bin/env node
+
+const chalk = require('chalk');
+const path = require('path');
+const fs = require('fs');
+const tools = require('./_tools');
+
+const moduleDir = path.resolve(__dirname);
+const executionDir = path.resolve(process.cwd());
+const workspaceRoot = tools.findRootWorkspacePath(executionDir);
+
+const command2map = process.argv[2];
+const firstArg = process.argv[3] || '';
+
+const extraArgsAggregated = [];
+
+if(process.argv.length > 4){
+    for(let i = 4; i <= process.argv.length-1;i++){
+      extraArgsAggregated.push(process.argv[i]);
+    }
+}
+
+const CMD_LIST = [
+  'init',
+  'build:sw'
+]
+
+async function main() {
+    if(!CMD_LIST.includes(command2map) || command2map === 'help'){
+      const helpTxt = `RWS Client CLI. \n\n Main features: \n - framerwork init \n - tests \n\n`;
+      const cmdList = `Command list: \n ${CMD_LIST.map((el) => `"rws-client ${el}"`).join('\n')}`;
+      const currentColor = command2map === 'help' ? chalk.yellow : chalk.red
+
+      if(command2map === 'help'){
+        console.log(currentColor(helpTxt));
+      }
+
+      console.log(currentColor(cmdList))
+      return false;
+    }
+
+    switch(command2map){
+      case 'init': await initCmd(); break;
+      case 'build:sw': await buildSwCmd(); break;
+    }
+    
+    return true;
+}
+
+async function initCmd(){
+  let workspaced = false;  
+    if(workspaceRoot !== executionDir){
+      workspaced = true;
+    }  
+  
+    if(workspaced){    
+      if(!fs.existsSync(`${executionDir}/.eslintrc.json`)){
+        const rcjs = fs.readFileSync(`${moduleDir}/.setup/.eslintrc.json`, 'utf-8');
+        fs.writeFile(`${executionDir}/.eslintrc.json`, rcjs.replace('{{frontend_dir}}', executionDir));
+        console.log(chalk.green('RWS CLI'), 'Installed eslint base workspace config file.');
+      }
+    }else{
+      if(!fs.existsSync(`${executionDir}/.eslintrc.json`)){
+        fs.copyFile(`${moduleDir}/.eslintrc.json`, `${executionDir}/.eslintrc.json`);
+        console.log(chalk.green('[RWS Client]'), 'Installed eslint config file.');
+      }        
+    }
+
+    if(!fs.existsSync(`${executionDir}/tsconfig.json`)){
+      fs.copyFile(`${moduleDir}/.setup/tsconfig.json`, `${executionDir}/tsconfig.json`);
+      console.log(chalk.green('[RWS Client]'), 'Installed tsconfig.');
+    }   
+}
+
+async function buildSwCmd(){
+  const webpackCmd = `yarn webpack`;
+  
+  try {
+    console.log(chalk.yellow('[RWS Client]'), 'Installing service worker...');
+    await tools.runCommand(`${webpackCmd} --config ${path.resolve(moduleDir, 'service_worker')}/webpack.config.js`, executionDir, false, { env: { SWPATH: firstArg } });
+    console.log(chalk.green('[RWS Client]'), 'Service worker installed.');
+  }catch(e){
+    console.error('runerror',e);
+  }
+}
+
 main().then((result) => {});