@rws-framework/client 2.15.0 → 2.15.2

package/builder/webpack/after/sw.js

@@ -3,8 +3,8 @@ const chalk = require('chalk');
 const path = require('path');
 const tools = require('../../../_tools');
 
-module.exports = async (swPath) => {
-   const swFilePath = path.resolve(process.cwd(), swPath);
+module.exports = async (appRoot, swPath) => {
+   const swFilePath = path.resolve(appRoot, swPath);
 
    if(swPath.indexOf('.ts') === -1 || !fs.existsSync(swFilePath)){
       throw new Error('[RWS] Service worker TS file does not exist');

package/builder/webpack/loaders/rws_fast_scss_loader.js

@@ -15,7 +15,7 @@ module.exports = async function(content) {
 
     if(saveFile){
         try {        
-            const codeData = await plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);                                
+            const codeData = await plugin.compileScssCode(content, path.dirname(filePath));                                
 
             const code = codeData.code;
             const deps = codeData.dependencies;        

package/builder/webpack/loaders/rws_fast_ts_loader.js

@@ -61,7 +61,7 @@ module.exports = async function(content) {
     try { 
         if(tagName){                                   
             const [template, htmlFastImports, templateExists] = await LoadersHelper.getTemplate(filePath, this.addDependency, templateName, isDev);         
-            const styles = await LoadersHelper.getStyles(filePath, this.query?.rwsWorkspaceDir, this.addDependency, templateExists, stylesPath, isDev);  
+            const styles = await LoadersHelper.getStyles(filePath, this.query?.rwsWorkspaceDir, this.query?.appRootDir,this.addDependency, templateExists, stylesPath, isDev);  
 
             if(className){                
                 const replacedViewDecoratorContent =  decoratorExtract.replacedDecorator;  

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

@@ -18,11 +18,12 @@ const { executeRWSStartActions, timingActions, devActions } = require('../../cfg
 const { webpackDevServer } = require('../../cfg/build_steps/webpack/_dev_servers');
 const { RWS_WEBPACK_PLUGINS_BAG, addStartPlugins } = require('../../cfg/build_steps/webpack/_plugins');
 
-const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(process.cwd());
 
 // #SECTION INIT OPTIONS
 
-const RWSWebpackWrapper = async (rwsFrontendConfig,  _packageDir) => {
+const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
+  const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(appRoot);
+
   const {
     executionDir,
     isWatcher,
@@ -108,12 +109,13 @@ const RWSWebpackWrapper = async (rwsFrontendConfig,  _packageDir) => {
       actions: WEBPACK_AFTER_ACTIONS, 
       error_actions: WEBPACK_AFTER_ERROR_ACTIONS, 
       dev: isDev,
-      devDebug 
+      devDebug,
+      appRoot 
     }));
   }
 
   // #SECTION RWS WEBPACK BUILD
-  const cfgExport = createWebpackConfig(
+  const cfgExport = createWebpackConfig({
     executionDir,
     _packageDir,
     isDev,
@@ -127,11 +129,12 @@ const RWSWebpackWrapper = async (rwsFrontendConfig,  _packageDir) => {
     modules_setup,
     aliases,
     tsConfig,
-    RWS_WEBPACK_PLUGINS_BAG.getPlugins(),
+    WEBPACK_PLUGINS: RWS_WEBPACK_PLUGINS_BAG.getPlugins(),
     rwsExternals,
     devExternalsVars,
-    rwsFrontendConfig.entrypoint
-  );  
+    appRootDir: appRoot,
+    entrypoint: rwsFrontendConfig.entrypoint
+});  
 
   if (optimConfig) {
     // setup production config if it got created above

package/builder/webpack/rws_scss_plugin.js

@@ -16,10 +16,11 @@ class RWSScssPlugin {
   rwsWorkspaceDir = null;
 
   constructor(params = {
+    appRootDir: null,
     rwsWorkspaceDir: null,
     autoCompile: []
   }) {
-    this.node_modules_dir = (fileDir) => path.relative(fileDir, _tools.findRootWorkspacePath(process.cwd() + '/node_modules'))
+    this.node_modules_dir = (fileDir) => path.relative(fileDir, path.join(this.getRWSRootDir(), '/node_modules'))
     _scss_import = _scss_import_builder(this);    
     _scss_fs = _scss_fs_builder(this);
     _scss_compiler = _scss_compiler_builder(this);
@@ -29,6 +30,7 @@ class RWSScssPlugin {
     }
 
     this.rwsWorkspaceDir = params.rwsWorkspaceDir;
+    this.appRootDir = params.appRootDir;
 
     if (!!params.autoCompile && params.autoCompile.length > 0) {
       this.autoCompile = params.autoCompile;
@@ -47,16 +49,16 @@ class RWSScssPlugin {
   }
 
   async compileFile(scssPath) {    
-    scssPath = _scss_import.processImportPath(scssPath, this.rwsWorkspaceDir, path.dirname(scssPath))    
+    scssPath = _scss_import.processImportPath(scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir(),path.dirname(scssPath))    
 
 
-    let scssCode = _scss_fs.getCodeFromFile(scssPath, this.rwsWorkspaceDir);
+    let scssCode = _scss_fs.getCodeFromFile(scssPath, this.getRWSWorkspaceDir());
 
-    return await _scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), this.rwsWorkspaceDir);
+    return await _scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), this.getRWSWorkspaceDir(), this.getRWSRootDir());
   }
 
   async compileScssCode(scssCode, scssPath){    
-    return await _scss_compiler.compileScssCode(scssCode, scssPath, this.rwsWorkspaceDir);
+    return await _scss_compiler.compileScssCode(scssCode, scssPath, this.getRWSWorkspaceDir(), this.getRWSRootDir());
   }
 
   writeCssFile(scssFilePath, cssContent){
@@ -66,6 +68,10 @@ class RWSScssPlugin {
   getRWSWorkspaceDir() {
     return this.rwsWorkspaceDir;
   }
+
+  getRWSRootDir() {
+    return this.rwsWorkspaceDir;
+  }
 }
 
 module.exports = RWSScssPlugin;

package/builder/webpack/rws_webpack_plugin.js

@@ -3,7 +3,7 @@ const rwsAfterSW = require('./after/sw');
 const deepmerge = require('deepmerge');
 
 
-const _DEFAULT_CONFIG = { actions: [], executionDir: process.cwd(), packageDir: process.cwd(), dev: false, devDebug: null }
+const _DEFAULT_CONFIG = { actions: [], executionDir: null, packageDir: null, dev: false, devDebug: null }
 
 const _DEFAULT_ACTION = {
     type: 'copy',
@@ -113,7 +113,7 @@ class RWSWebpackPlugin {
             case 'service_worker': {
 
                 const serviceWorkerPath = typeof action === 'function' ? await action() : action;
-                await rwsAfterSW(serviceWorkerPath);
+                await rwsAfterSW(this.config.appRoot, serviceWorkerPath);
                 return;
             };
 

package/builder/webpack/scss/_compiler.js

@@ -9,10 +9,10 @@ let _scss_fonts = null;
 const _scss_import_builder = require('./_import');
 let _scss_import = null;
 
-function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir) {  
+function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir, appRoot) {  
     _scss_fonts = _scss_fonts_builder(this);
     _scss_import = _scss_import_builder(this);    
-    const [scssImports] = _scss_import.extractScssImports(scssCode, rwsWorkspaceDir, fileRootDir);
+    const [scssImports] = _scss_import.extractScssImports(scssCode, rwsWorkspaceDir, appRoot, fileRootDir);
 
     const dependencies = scssImports.map((item) => item[2]);
 
@@ -38,7 +38,7 @@ function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir) {
       const result = sass.compileString(scssCode, { loadPaths: [fileRootDir]});
 
       let compiledCode = result.css.toString();
-      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode, rwsWorkspaceDir);
+      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode, rwsWorkspaceDir, appRoot);
       compiledCode = replaceEmojisWithQuestionMark(compiledCode, fileRootDir);
       return { code: compiledCode, dependencies};
     } catch (err) {

package/builder/webpack/scss/_fonts.js

@@ -44,7 +44,7 @@ function convertFontToBase64(fontPath) {
     return fs.readFileSync(fontPath, { encoding: 'base64' });
 }
 
-function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir) {
+function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir, appRoot) {
     const fontFaceRegex = /@font-face\s*\{[^}]*\}/g;
     let fontFaces = [...cssContent.matchAll(fontFaceRegex)];
     _scss_import = _scss_import_builder(this);
@@ -58,7 +58,7 @@ function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir) {
 
         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, null, true));
+            const base64 = convertFontToBase64(_scss_import.processImportPath(match[2], rwsWorkspaceDir, appRoot, null, true));
             const base64Font = `data:font/woff2;base64,${base64}`;
 
             modifiedFontFaceContent = modifiedFontFaceContent.replace(match[2], base64Font);

package/builder/webpack/scss/_fs.js

@@ -47,13 +47,13 @@ function readSCSSFilesFromDirectory(dirPath) {
   };
 
 
-  function getCodeFromFile(filePath, rwsWorkspaceDir) {
+  function getCodeFromFile(filePath, rwsWorkspaceDir, appRootDir) {
     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, path.dirname(filePath));
+      const processedImportPath = _scss_import.processImportPath(filePath, rwsWorkspaceDir, appRootDir, path.dirname(filePath));
 
       if (!fs.existsSync(processedImportPath)) {
         throw new Error(`SCSS loader: File path "${filePath}" was not found.`);

package/builder/webpack/scss/_import.js

@@ -7,14 +7,15 @@ const path = require('path');
 const CSS_IMPORT_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@import\s+['"]((?![^'"]*:[^'"]*).+?)['"];?/gm;
 const SCSS_USE_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@use\s+['"]?([^'"\s]+)['"]?;?/gm;
 
-const WORKSPACE_ROOT = rwsPath.findPackageDir(process.cwd());
 
-function processImportPath(importPath, rwsWorkspaceDir, fileRootDir = null, noext = false) {
+function processImportPath(importPath, rwsWorkspaceDir, appRootDir, fileRootDir = null, noext = false) {
+
     _scss_fs = _scss_fs_builder(this);
     const workspaceDir = this.getRWSWorkspaceDir ? this.getRWSWorkspaceDir() : rwsWorkspaceDir;
+    const appRoot = this.getRWSWorkspaceDir ? this.getRWSRootDir() : appRootDir;
 
     if (importPath.split('')[0] === '~') {
-        return fillSCSSExt(replaceWithNodeModules(importPath, null, true), noext);
+        return fillSCSSExt(replaceWithNodeModules(importPath, appRootDir, null, true), noext);
     }
 
     if (importPath.indexOf('@rws-mixins') === 0) {
@@ -22,7 +23,7 @@ function processImportPath(importPath, rwsWorkspaceDir, fileRootDir = null, noex
     }
 
     if (importPath.indexOf('@cwd') === 0) {
-        return fillSCSSExt(path.join(process.cwd(), importPath.slice(4)), noext);
+        return fillSCSSExt(path.join(this.appRootDir, importPath.slice(4)), noext);
     }
 
     if (importPath.split('')[0] === '/') {
@@ -110,7 +111,7 @@ function fillSCSSExt(scssPath, noext = false) {
     return ext;
 }
 
-function extractScssImports(fileContent, rwsWorkspaceDir, importRootPath) {
+function extractScssImports(fileContent, rwsWorkspaceDir, appRootDir, importRootPath) {
     _scss_fs = _scss_fs_builder(this);
     let match;
     const imports = [];
@@ -123,9 +124,9 @@ function extractScssImports(fileContent, rwsWorkspaceDir, importRootPath) {
             importRootPath = path.dirname(importRootPath);
         }
 
-        const processedImportPath = processImportPath(importPath, rwsWorkspaceDir, importRootPath);
+        const processedImportPath = processImportPath(importPath, rwsWorkspaceDir, appRootDir, importRootPath);
 
-        imports.push([processedImportPath, importLine, path.resolve(processedImportPath), rwsWorkspaceDir]);
+        imports.push([processedImportPath, importLine, path.resolve(processedImportPath), rwsWorkspaceDir, appRootDir]);
     }
 
     return [imports, fileContent];
@@ -154,9 +155,9 @@ function detectImports(code) {
     return CSS_IMPORT_REGEX.test(code);
 }
 
-function replaceWithNodeModules(input, fileDir = null, absolute = false, token = '~') {
+function replaceWithNodeModules(input, appRootDir, fileDir = null, absolute = false, token = '~') {
     _scss_fs = _scss_fs_builder(this);
-    return input.replace(token, absolute ? `${path.resolve(WORKSPACE_ROOT, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : process.cwd()));
+    return input.replace(token, absolute ? `${path.resolve(appRootDir, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : appRootDir));
 }
 
 function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {}, sub = false) {
@@ -180,12 +181,13 @@ function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {
     imports.forEach(importData => {
         const originalImportPath = importData[0];
         const workspaceDir = this.getRWSWorkspaceDir ? this.getRWSWorkspaceDir() : importData[3];
+        const appRoot = this.getRWSWorkspaceDir ? this.getRWSRootDir() : importData[4];
 
-        let importPath = processImportPath(originalImportPath, workspaceDir, fileRootDir);            
+        let importPath = processImportPath(originalImportPath, workspaceDir, appRoot, fileRootDir);            
 
         let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath, workspaceDir).replace(/\/\*[\s\S]*?\*\//g, ''));
 
-        const recursiveImports = extractScssImports(replacedScssContent, workspaceDir, importPath)[0];
+        const recursiveImports = extractScssImports(replacedScssContent, workspaceDir, appRoot, importPath)[0];
 
         if (recursiveImports.length) {
             replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), workspaceDir, importStorage, true), replacedScssContent);

package/cfg/build_steps/webpack/_build_config.js

@@ -7,7 +7,7 @@ const { _DEFAULT_CONFIG } = require('../../_default.cfg');
 
 async function getBuildConfig(rwsFrontBuildConfig, _packageDir){
     const BuildConfigurator = new RWSConfigBuilder(path.join(rwsPath.findPackageDir(process.cwd()), '.rws.json'), {..._DEFAULT_CONFIG, ...rwsFrontBuildConfig});
-    const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || rwsFrontBuildConfig.executionDir || process.cwd(), _packageDir);
+    const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || rwsFrontBuildConfig.executionDir || process.env.RWS_APP_ROOT || process.cwd(), _packageDir);
     const isWatcher = process.argv.includes('--watch') || false;  
 
     const isDev = isWatcher ? true : (BuildConfigurator.get('dev', rwsFrontBuildConfig.dev) || false);

package/cfg/build_steps/webpack/_loaders.js

@@ -10,7 +10,7 @@ const chalk = require('chalk');
 const { timingCounterStart, timingCounterStop } = require('./_timing');
 const { rwsRuntimeHelper, rwsPath } = require('@rws-framework/console');
 
-function getRWSLoaders(packageDir, executionDir, tsConfig, entrypoint) {
+function getRWSLoaders(packageDir, executionDir, tsConfig, appRootDir, entrypoint) {
   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');
@@ -30,27 +30,27 @@ function getRWSLoaders(packageDir, executionDir, tsConfig, entrypoint) {
         {
           loader: 'ts-loader',
           options: {
+            ...tsConfig,
             transpileOnly: false, 
-            logLevel: "info", // Show more detailed errors
+            logLevel: "info",
             logInfoToStdOut: true,
             context: executionDir,
             errorFormatter: (message, colors) => {
               const messageText = message.message || message;
               return `\nTS Error: ${messageText}\n`;
-            },
-            ...tsConfig
+            },         
           }
         },
         {
           loader: tsLoader,
           options: {
-            rwsWorkspaceDir: executionDir
+            rwsWorkspaceDir: executionDir,
+            appRootDir
           }
         }
       ],
       include: [
         path.resolve(executionDir, 'src'),
-        path.resolve(executionDir, '@dev', 'client', 'src'),
         path.resolve(packageDir, 'src'),
         path.resolve(packageDir, 'foundation', 'rws-foundation.d.ts')
       ],
@@ -68,6 +68,7 @@ function getRWSLoaders(packageDir, executionDir, tsConfig, entrypoint) {
     },
   ];
 
+
   return loaders;
 }
 
@@ -180,7 +181,7 @@ function extractRWSViewArgs(content, noReplace = false) {
   }
 }
 
-async function getStyles(filePath, rwsWorkspaceDir, addDependency, templateExists, stylesPath = null, isDev = false) {
+async function getStyles(filePath, rwsWorkspaceDir, appRootDir, addDependency, templateExists, stylesPath = null, isDev = false) {
   if(!stylesPath){
     stylesPath = 'styles/layout.scss';
   }
@@ -191,7 +192,7 @@ async function getStyles(filePath, rwsWorkspaceDir, addDependency, templateExist
   if (fs.existsSync(stylesFilePath)) {  
     const scsscontent = fs.readFileSync(stylesFilePath, 'utf-8');
     timingCounterStart();
-    const plugin = new RWSCssPlugin({ rwsWorkspaceDir });
+    const plugin = new RWSCssPlugin({ rwsWorkspaceDir, appRootDir });
     const codeData = await plugin.compileScssCode(scsscontent, path.join(path.dirname(filePath), 'styles'), null, filePath, !isDev);
     const elapsed = timingCounterStop();
     let currentTimingList = rwsRuntimeHelper.getRWSVar('_timer_css');

package/cfg/build_steps/webpack/_webpack_config.js

@@ -1,7 +1,7 @@
 const { getRWSLoaders } = require('./_loaders');
 const path = require('path');
 
-function createWebpackConfig(
+function createWebpackConfig({
     executionDir,
     _packageDir,
     isDev,
@@ -18,8 +18,9 @@ function createWebpackConfig(
     WEBPACK_PLUGINS,
     rwsExternals,
     devExternalsVars,
+    appRootDir,
     entrypoint
-) {
+}) {
     return {
         context: executionDir,
         entry: {
@@ -41,7 +42,7 @@ function createWebpackConfig(
             }
         },
         module: {
-            rules: getRWSLoaders(_packageDir, executionDir, tsConfig, entrypoint),
+            rules: getRWSLoaders(_packageDir, executionDir, tsConfig, appRootDir, entrypoint),
         },
         plugins: WEBPACK_PLUGINS,
         externals: rwsExternals(_packageDir, executionDir, modules_setup, automatedChunks, {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.15.0",
+    "version": "2.15.2",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -28,7 +28,7 @@
     "dependencies": {
         "@microsoft/fast-element": "^1.12.0",
         "@microsoft/fast-foundation": "^2.46.2",
-        "@rws-framework/console": "^0.3.15",
+        "@rws-framework/console": "*",
         "@types/moment": "^2.13.0",
         "deepmerge": "^4.3.1",
         "dragula": "^3.7.3",

package/tsconfig.json

@@ -7,8 +7,7 @@
     "moduleResolution": "node",
     "strict": true,
     "esModuleInterop": true,
-    "sourceMap": true,
-    "outDir": "dist",
+    "sourceMap": true,    
     "strictNullChecks": false,
     "allowSyntheticDefaultImports": true,
     "lib": [