@rws-framework/client 2.14.0 → 2.15.0

package/builder/webpack/after/copy.js

@@ -32,6 +32,7 @@ module.exports = async (copyList = {}, pluginCfg) => {
         // If sourcePath is a directory, collect all files recursively
         const allFiles = collectFiles(sourcePath);
         allFiles.forEach((file) => {
+          
           const relativePath = path.relative(sourcePath, file);
           const targetFilePath = path.join(targetPath, relativePath);
           const targetFileDir = path.dirname(targetFilePath);

package/builder/webpack/loaders/rws_fast_scss_loader.js

@@ -8,7 +8,9 @@ module.exports = async function(content) {
     const componentPath = path.resolve(componentDir, 'component.ts');
     const isDev = this._compiler.options.mode === 'development';    
     const saveFile = content.indexOf('@save') > -1; 
-    const plugin = new RWSScssPlugin(); 
+    const plugin = new RWSScssPlugin({
+        rwsWorkspaceDir: this.query?.rwsWorkspaceDir
+    }); 
     let fromTs = false;    
 
     if(saveFile){

package/builder/webpack/loaders/rws_fast_ts_loader.js

@@ -12,8 +12,7 @@ module.exports = async function(content) {
     const filePath = this.resourcePath;
     const isDev = this._compiler.options.mode === 'development';       
     let isIgnored = false;
-    let isDebugged = false;  
-
+    let isDebugged = false;      
     // timingStart('decorator_extraction');
     const decoratorExtract = LoadersHelper.extractRWSViewArgs(processedContent);    
     const decoratorData = decoratorExtract ? decoratorExtract.viewDecoratorData : null;
@@ -62,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.addDependency, templateExists, stylesPath, isDev);  
+            const styles = await LoadersHelper.getStyles(filePath, this.query?.rwsWorkspaceDir, this.addDependency, templateExists, stylesPath, isDev);  
 
             if(className){                
                 const replacedViewDecoratorContent =  decoratorExtract.replacedDecorator;  

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

@@ -22,7 +22,7 @@ const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(process.cwd());
 
 // #SECTION INIT OPTIONS
 
-const RWSWebpackWrapper = async (rwsFrontendConfig) => {
+const RWSWebpackWrapper = async (rwsFrontendConfig,  _packageDir) => {
   const {
     executionDir,
     isWatcher,
@@ -42,11 +42,10 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
     devTools,
     devDebug,
     devRouteProxy,
-    tsConfigPath,
+    tsConfig,
     rwsPlugins,
-    _packageDir,
     BuildConfigurator
-  } = await getBuildConfig(rwsFrontendConfig);
+  } = await getBuildConfig(rwsFrontendConfig, _packageDir);
 
   timeLog({ devDebug });
 
@@ -55,25 +54,20 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
   }  
 
   rwsPath.removeDirectory(outputDir, true);
-  buildInfo.start(executionDir, tsConfigPath, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsFrontendConfig.rwsPlugins);
+  buildInfo.start(executionDir, tsConfig, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsFrontendConfig.rwsPlugins);
 
   // #SECTION INIT PLUGINS && ENV VARS DEFINES
-  addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport, tsConfigPath);
+  addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport);
 
   const WEBPACK_AFTER_ACTIONS = rwsFrontendConfig.actions || [];
   const WEBPACK_AFTER_ERROR_ACTIONS = rwsFrontendConfig.error_actions || [];
 
-  const modules_setup = ['node_modules'];
+  const modules_setup = [path.resolve(tools.findRootWorkspacePath(executionDir), 'node_modules')];
 
   let optimConfig = null;
   let aliases = rwsFrontendConfig.aliases || {};
 
-  console.log({  
-    __filename,
-    _packageDir
-  });
-
-  aliases = { ...aliases, ...loadAliases(__dirname, path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir) }  
+  aliases = { ...aliases, ...loadAliases(_packageDir, path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir) }  
 
   // #SECTION PLUGIN STARTING HOOKS
 
@@ -85,22 +79,15 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
 
 
    // #SECTION RWS COMPONENT SCAN && PARTED PROCESSING
-  const RWSComponents = scanComponents(await partedComponentsEvents(partedComponentsLocations, rwsPlugins, isParted), executionDir, __dirname);
+  const RWSComponents = scanComponents(await partedComponentsEvents(partedComponentsLocations, rwsPlugins, isParted), executionDir, _packageDir);
   console.log(`${chalk.cyanBright('RWS Scanned')} ${chalk.yellowBright(RWSComponents.length)} components`);
-  const { automatedChunks, automatedEntries } = setComponentsChunks(rwsFrontendConfig.entry, RWSComponents, isParted);
+  const { automatedChunks, automatedEntries } = setComponentsChunks(rwsFrontendConfig.entrypoint, RWSComponents, isParted);
 
   // #SECTION RWS INFO FILE
   generateRWSInfoFile(outputDir, automatedEntries);
   console.log(chalk.greenBright(`RWSInfo file generated.`));
 
 
-  // #SECTION TSCONFIG VALIDATION/SETUP
-  const tsValidated = tools.setupTsConfig(tsConfigPath, executionDir, rwsFrontendConfig.aliases);
-
-  if (!tsValidated) {
-    throw new Error('RWS Webpack build failed.');
-  }
-
   if (!isDev) {
     // #SECTION RWS PROD SETUP
 
@@ -128,7 +115,6 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
   // #SECTION RWS WEBPACK BUILD
   const cfgExport = createWebpackConfig(
     executionDir,
-    path.resolve(__dirname, '..', '..'),
     _packageDir,
     isDev,
     devTools,
@@ -140,10 +126,11 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
     automatedChunks,
     modules_setup,
     aliases,
-    tsConfigPath,
+    tsConfig,
     RWS_WEBPACK_PLUGINS_BAG.getPlugins(),
     rwsExternals,
-    devExternalsVars
+    devExternalsVars,
+    rwsFrontendConfig.entrypoint
   );  
 
   if (optimConfig) {

package/builder/webpack/rws_scss_plugin.js

@@ -13,17 +13,23 @@ let _scss_fs = null;
 
 class RWSScssPlugin {
   autoCompile = [];
+  rwsWorkspaceDir = null;
 
-  constructor(params) {
-    this.node_modules_dir = (fileDir) => path.relative(fileDir, _tools.findRootWorkspacePath(process.cwd())) + '/node_modules/'
+  constructor(params = {
+    rwsWorkspaceDir: null,
+    autoCompile: []
+  }) {
+    this.node_modules_dir = (fileDir) => path.relative(fileDir, _tools.findRootWorkspacePath(process.cwd() + '/node_modules'))
     _scss_import = _scss_import_builder(this);    
     _scss_fs = _scss_fs_builder(this);
     _scss_compiler = _scss_compiler_builder(this);
 
-    if (!params) {
-      params = {};
+    if(!params.rwsWorkspaceDir){      
+      throw new Error('Pass "rwsWorkspaceDir" to the "@rws-framework/client/builder/webpack/loaders/rws_fast_ts_loader.js" loader.');
     }
 
+    this.rwsWorkspaceDir = params.rwsWorkspaceDir;
+
     if (!!params.autoCompile && params.autoCompile.length > 0) {
       this.autoCompile = params.autoCompile;
     }
@@ -33,7 +39,6 @@ class RWSScssPlugin {
       this.compileFile(sassFile, true);
     }
   }
-
   
   apply(compiler) {
     const _self = this;
@@ -42,21 +47,25 @@ class RWSScssPlugin {
   }
 
   async compileFile(scssPath) {    
-    scssPath = _scss_import.processImportPath(scssPath, path.dirname(scssPath))    
+    scssPath = _scss_import.processImportPath(scssPath, this.rwsWorkspaceDir, path.dirname(scssPath))    
 
 
-    let scssCode = _scss_fs.getCodeFromFile(scssPath);
+    let scssCode = _scss_fs.getCodeFromFile(scssPath, this.rwsWorkspaceDir);
 
-    return await _scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), null, scssPath);
+    return await _scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), this.rwsWorkspaceDir);
   }
 
   async compileScssCode(scssCode, scssPath){    
-    return await _scss_compiler.compileScssCode(scssCode, scssPath, null, scssPath);
+    return await _scss_compiler.compileScssCode(scssCode, scssPath, this.rwsWorkspaceDir);
   }
 
   writeCssFile(scssFilePath, cssContent){
     return _scss_fs.writeCssFile(scssFilePath, cssContent);
   }
+
+  getRWSWorkspaceDir() {
+    return this.rwsWorkspaceDir;
+  }
 }
 
 module.exports = RWSScssPlugin;

package/builder/webpack/scss/_compiler.js

@@ -9,16 +9,15 @@ let _scss_fonts = null;
 const _scss_import_builder = require('./_import');
 let _scss_import = null;
 
-function compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null, minify = false) {  
+function compileScssCode(scssCode, fileRootDir, rwsWorkspaceDir) {  
     _scss_fonts = _scss_fonts_builder(this);
-    _scss_import = _scss_import_builder(this);
-
-    const [scssImports] = _scss_import.extractScssImports(scssCode, fileRootDir);
+    _scss_import = _scss_import_builder(this);    
+    const [scssImports] = _scss_import.extractScssImports(scssCode, rwsWorkspaceDir, fileRootDir);
 
     const dependencies = scssImports.map((item) => item[2]);
 
     if (scssImports && scssImports.length) {
-      scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, fileRootDir), scssCode);
+      scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, rwsWorkspaceDir, fileRootDir), scssCode);
     }
 
     const uses = _scss_import.extractScssUses(scssCode)[0];
@@ -39,7 +38,7 @@ function compileScssCode(scssCode, fileRootDir, createFile = false, filePath = n
       const result = sass.compileString(scssCode, { loadPaths: [fileRootDir]});
 
       let compiledCode = result.css.toString();
-      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode);
+      compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode, rwsWorkspaceDir);
       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) {
+function replaceFontUrlWithBase64(cssContent, rwsWorkspaceDir) {
     const fontFaceRegex = /@font-face\s*\{[^}]*\}/g;
     let fontFaces = [...cssContent.matchAll(fontFaceRegex)];
     _scss_import = _scss_import_builder(this);
@@ -58,7 +58,7 @@ function replaceFontUrlWithBase64(cssContent) {
 
         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], null, true));
+            const base64 = convertFontToBase64(_scss_import.processImportPath(match[2], rwsWorkspaceDir, null, true));
             const base64Font = `data:font/woff2;base64,${base64}`;
 
             modifiedFontFaceContent = modifiedFontFaceContent.replace(match[2], base64Font);

package/builder/webpack/scss/_fs.js

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

package/builder/webpack/scss/_import.js

@@ -1,5 +1,5 @@
 const { rwsPath } = require('@rws-framework/console');
-
+const chalk = require('chalk');
 const _scss_fs_builder = require('./_fs');
 let _scss_fs = null;
 const fs = require('fs');
@@ -7,26 +7,34 @@ const path = require('path');
 const CSS_IMPORT_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@import\s+['"]((?![^'"]*:[^'"]*).+?)['"];?/gm;
 const SCSS_USE_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@use\s+['"]?([^'"\s]+)['"]?;?/gm;
 
-const WORKSPACE = rwsPath.findRootWorkspacePath(process.cwd());
+const WORKSPACE_ROOT = rwsPath.findPackageDir(process.cwd());
 
-function processImportPath(importPath, fileRootDir = null, noext = false) {
+function processImportPath(importPath, rwsWorkspaceDir, fileRootDir = null, noext = false) {
     _scss_fs = _scss_fs_builder(this);
-    
+    const workspaceDir = this.getRWSWorkspaceDir ? this.getRWSWorkspaceDir() : rwsWorkspaceDir;
+
     if (importPath.split('')[0] === '~') {
         return fillSCSSExt(replaceWithNodeModules(importPath, null, true), noext);
     }
 
     if (importPath.indexOf('@rws-mixins') === 0) {
-        return path.resolve(rwsPath.findPackageDir(__dirname), 'src', 'styles', 'includes.scss');
+        return path.resolve(rwsPath.findPackageDir(workspaceDir), 'src', 'styles', 'includes.scss');
     }
 
     if (importPath.indexOf('@cwd') === 0) {
-        return fillSCSSExt(process.cwd() + '/' + importPath.slice(4), noext);
+        return fillSCSSExt(path.join(process.cwd(), importPath.slice(4)), noext);
     }
 
     if (importPath.split('')[0] === '/') {
+        const originalImport = fillSCSSExt(importPath, noext);
+        
+        if(!fs.existsSync(originalImport)){
+            const absoluteImport = fillSCSSExt(path.join(workspaceDir, 'src', importPath), noext);
 
-        return fillSCSSExt(importPath, noext);
+            return absoluteImport;            
+        }
+        
+        return originalImport;
     }    
 
     if (fileRootDir) {
@@ -79,7 +87,30 @@ function fillSCSSExt(scssPath, noext = false) {
     return scssPath;
 }
 
-function extractScssImports(fileContent, importRootPath) {
+function fillSCSSExt(scssPath, noext = false) {
+    const underscoredPath = underscorePath(scssPath, noext);
+    let ext = scssPath;
+
+    if (!fs.existsSync(scssPath) && fs.existsSync(underscoredPath)) {
+        ext = underscoredPath;
+    }
+
+    if (noext) {
+        ext =  scssPath;
+    }
+
+    if ((!fs.existsSync(scssPath) || (fs.existsSync(scssPath) && fs.statSync(scssPath).isDirectory())) && fs.existsSync(`${scssPath}.scss`)) {
+        ext = `${scssPath}.scss`;
+    }
+
+    if (fs.existsSync(`_${scssPath}.scss`)) {
+        ext = `${scssPath}.scss`;
+    }   
+
+    return ext;
+}
+
+function extractScssImports(fileContent, rwsWorkspaceDir, importRootPath) {
     _scss_fs = _scss_fs_builder(this);
     let match;
     const imports = [];
@@ -92,9 +123,9 @@ function extractScssImports(fileContent, importRootPath) {
             importRootPath = path.dirname(importRootPath);
         }
 
-        const processedImportPath = processImportPath(importPath, importRootPath);
+        const processedImportPath = processImportPath(importPath, rwsWorkspaceDir, importRootPath);
 
-        imports.push([processedImportPath, importLine, path.resolve(processedImportPath)]);
+        imports.push([processedImportPath, importLine, path.resolve(processedImportPath), rwsWorkspaceDir]);
     }
 
     return [imports, fileContent];
@@ -125,11 +156,12 @@ function detectImports(code) {
 
 function replaceWithNodeModules(input, fileDir = null, absolute = false, token = '~') {
     _scss_fs = _scss_fs_builder(this);
-    return input.replace(token, absolute ? `${path.resolve(WORKSPACE, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : process.cwd()));
+    return input.replace(token, absolute ? `${path.resolve(WORKSPACE_ROOT, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : process.cwd()));
 }
 
-function processImports(imports, fileRootDir, importStorage = {}, sub = false) {
+function processImports(imports, fileRootDir, rwsWorkspaceDir, importStorage = {}, sub = false) {
     _scss_fs = _scss_fs_builder(this);
+
     const importResults = [];
 
     const getStorage = (sourceComponentPath, importedFileContent) => {
@@ -143,18 +175,20 @@ function processImports(imports, fileRootDir, importStorage = {}, sub = false) {
 
         return '';
     }
-  
+
+
     imports.forEach(importData => {
         const originalImportPath = importData[0];
-        let importPath = processImportPath(originalImportPath, fileRootDir);            
-        _scss_fs = _scss_fs_builder(this);
-        let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, ''));
+        const workspaceDir = this.getRWSWorkspaceDir ? this.getRWSWorkspaceDir() : importData[3];
 
-        const recursiveImports = extractScssImports(replacedScssContent, importPath)[0];
+        let importPath = processImportPath(originalImportPath, workspaceDir, fileRootDir);            
 
-        if (recursiveImports.length) {
+        let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath, workspaceDir).replace(/\/\*[\s\S]*?\*\//g, ''));
+
+        const recursiveImports = extractScssImports(replacedScssContent, workspaceDir, importPath)[0];
 
-            replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), importStorage, true), replacedScssContent);
+        if (recursiveImports.length) {
+            replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), workspaceDir, importStorage, true), replacedScssContent);
         }
 
         importResults.push({

package/cfg/build_steps/webpack/_aliases.js

@@ -1,8 +1,7 @@
 const path = require('path');
 
 function loadAliases(packageDir, nodeModulesPath, srcDir){    
-    return {
-        'src': srcDir + '/src',        
+    return {        
         '@rws-framework/foundation': path.resolve(packageDir, 'foundation', 'rws-foundation.js')
     }
 }

package/cfg/build_steps/webpack/_build_config.js

@@ -1,18 +1,18 @@
 const chalk = require('chalk');
+const path = require('path');
+
 const { RWSConfigBuilder } = require('@rws-framework/console')
 const { rwsPath } = require('@rws-framework/console');
 const { _DEFAULT_CONFIG } = require('../../_default.cfg');
 
-async function getBuildConfig(rwsFrontBuildConfig){
-    const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...rwsFrontBuildConfig});
-    const _packageDir = rwsPath.findPackageDir(process.cwd());
-
+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 isWatcher = process.argv.includes('--watch') || false;  
 
     const isDev = isWatcher ? true : (BuildConfigurator.get('dev', rwsFrontBuildConfig.dev) || false);
-    const isHotReload = BuildConfigurator.get('hot', rwsFrontBuildConfig.hot);
-    const isReport = BuildConfigurator.get('report', rwsFrontBuildConfig.report);
+    const isHotReload = BuildConfigurator.get('hotReload', rwsFrontBuildConfig.hotReload);
+    const isReport = BuildConfigurator.get('pkgReport', rwsFrontBuildConfig.pkgReport);
     const isParted = BuildConfigurator.get('parted', rwsFrontBuildConfig.parted || false);
 
     const partedPrefix = BuildConfigurator.get('partedPrefix', rwsFrontBuildConfig.partedPrefix);
@@ -20,7 +20,7 @@ async function getBuildConfig(rwsFrontBuildConfig){
 
     let partedComponentsLocations = BuildConfigurator.get('partedComponentsLocations', rwsFrontBuildConfig.partedComponentsLocations);
     const customServiceLocations = BuildConfigurator.get('customServiceLocations', rwsFrontBuildConfig.customServiceLocations); //@todo: check if needed
-    const outputDir = rwsPath.relativize(BuildConfigurator.get('outputDir', rwsFrontBuildConfig.outputDir), _packageDir);
+    const outputDir = rwsPath.relativize(BuildConfigurator.get('outputDir', rwsFrontBuildConfig.outputDir), executionDir);
 
     const outputFileName = BuildConfigurator.get('outputFileName') || rwsFrontBuildConfig.outputFileName;
     const publicDir = BuildConfigurator.get('publicDir') || rwsFrontBuildConfig.publicDir;
@@ -37,7 +37,7 @@ async function getBuildConfig(rwsFrontBuildConfig){
 
     const devRouteProxy = BuildConfigurator.get('devRouteProxy') || rwsFrontBuildConfig.devRouteProxy;
 
-    const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || rwsFrontBuildConfig.tsConfigPath, executionDir);
+    const tsConfig = BuildConfigurator.get('tsConfig') || rwsFrontBuildConfig.tsConfig;
 
     const rwsPlugins = {};
 
@@ -67,9 +67,8 @@ async function getBuildConfig(rwsFrontBuildConfig){
         devTools,
         devDebug,
         devRouteProxy,
-        tsConfigPath,
-        rwsPlugins,
-        _packageDir,
+        tsConfig,
+        rwsPlugins,        
         BuildConfigurator
     }
 }

package/cfg/build_steps/webpack/_component_handling.js

@@ -41,7 +41,7 @@ function setComponentsChunks(clientEntry, RWSComponents = [], isParted = false)
 }
 
 function generateRWSInfoFile(outputDir, automatedEntries) {
-    const rwsInfoJson = outputDir + '/rws_info.json'
+    const rwsInfoJson = path.join(outputDir, '/rws_info.json');
     fs.writeFile(rwsInfoJson, JSON.stringify({ components: Object.keys(automatedEntries) }, null, 2), () => {});
 }
 

package/cfg/build_steps/webpack/_env_defines.js

@@ -7,7 +7,7 @@ function processEnvDefines(BuildConfigurator, config, devDebug) {
         'process.env._RWS_BUILD_OVERRIDE': JSON.stringify(BuildConfigurator.exportBuildConfig())
     }
 
-    const rwsDefines = BuildConfigurator.get('rwsDefines') || config.rwsDefines || null;
+    const rwsDefines = BuildConfigurator.get('env') || config.env || null;
 
     if (rwsDefines) {
         _rws_defines = { ..._rws_defines, ...rwsDefines }

package/cfg/build_steps/webpack/_info.js

@@ -1,11 +1,12 @@
 const chalk = require('chalk');
+const util = require('util');
+
+
 
 module.exports = {
-    start: (executionDir, tsConfigPath, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsPlugins) => {
-        console.log(chalk.green('Build started with'))
-        console.log({
-        executionDir,
-        tsConfigPath,
+    start: (executionDir, tsConfig, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsPlugins) => {        
+        console.log(chalk.green('RWS Frontend build started with:'), {
+        executionDir,        
         outputDir,
         dev: isDev,
         publicDir,
@@ -15,5 +16,11 @@ module.exports = {
         devtool: devTools,
         plugins: rwsPlugins
         });
+
+        console.log(chalk.blue('\nTSCONFIG:'), util.inspect(tsConfig, {
+            depth: null,
+            colors: true,
+            maxArrayLength: null
+        }));
     }
 }

package/cfg/build_steps/webpack/_loaders.js

@@ -2,20 +2,20 @@ const path = require('path');
 const fs = require('fs');
 const os = require('os');
 
+const { parseWebpackPath } = require('./_parser');
+
 const RWSCssPlugin = require("../../../builder/webpack/rws_scss_plugin");
-const plugin = new RWSCssPlugin();
-const JSON5 = require('json5');
+
 const chalk = require('chalk');
 const { timingCounterStart, timingCounterStop } = require('./_timing');
-const { rwsRuntimeHelper } = require('@rws-framework/console');
+const { rwsRuntimeHelper, rwsPath } = require('@rws-framework/console');
 
-function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath, devDebug) {
-  const scssLoader = packageDir + '/builder/webpack/loaders/rws_fast_scss_loader.js';
-  const tsLoader = packageDir + '/builder/webpack/loaders/rws_fast_ts_loader.js';
-  const htmlLoader = packageDir + '/builder/webpack/loaders/rws_fast_html_loader.js';
+function getRWSLoaders(packageDir, executionDir, tsConfig, 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');
 
-
-  return [
+  const loaders = [
     {
       test: /\.html$/,
       use: [
@@ -30,19 +30,34 @@ function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath, devDebug) {
         {
           loader: 'ts-loader',
           options: {
-            transpileOnly: true,
-            allowTsInNodeModules: true,
-            configFile: path.resolve(tsConfigPath)            
+            transpileOnly: false, 
+            logLevel: "info", // Show more detailed errors
+            logInfoToStdOut: true,
+            context: executionDir,
+            errorFormatter: (message, colors) => {
+              const messageText = message.message || message;
+              return `\nTS Error: ${messageText}\n`;
+            },
+            ...tsConfig
           }
         },
         {
           loader: tsLoader,
+          options: {
+            rwsWorkspaceDir: executionDir
+          }
         }
       ],
+      include: [
+        path.resolve(executionDir, 'src'),
+        path.resolve(executionDir, '@dev', 'client', 'src'),
+        path.resolve(packageDir, 'src'),
+        path.resolve(packageDir, 'foundation', 'rws-foundation.d.ts')
+      ],
       exclude: [        
         /node_modules\/(?!\@rws-framework\/[A-Z0-9a-z])/,
         /\.debug\.ts$/,
-        /\.d\.ts$/,
+        /\.d\.ts$/        
       ],
     },
     {
@@ -51,7 +66,9 @@ function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath, devDebug) {
         scssLoader,
       ],
     },
-  ]
+  ];
+
+  return loaders;
 }
 
 function _extractRWSViewDefs(fastOptions = {}, decoratorArgs = {})
@@ -98,7 +115,7 @@ function extractRWSViewArgs(content, noReplace = false) {
       if (groupIndex === 2) {
         if (match) {
           try {            
-            decoratorArgs = JSON5.parse(match);
+            decoratorArgs = JSON.parse(JSON.stringify(match));
           } catch(e){
             console.log(chalk.red('Decorator options parse error: ') + e.message + '\n Problematic line:');
             console.log(`
@@ -107,6 +124,8 @@ function extractRWSViewArgs(content, noReplace = false) {
             console.log(chalk.yellowBright(`Decorator options failed to parse for "${tagName}" component.`) + ' { decoratorArgs } defaulting to null.');
             console.log(match);
 
+            console.error(e);
+
             throw new Error('Failed parsing @RWSView')
           }                   
         }
@@ -161,18 +180,19 @@ function extractRWSViewArgs(content, noReplace = false) {
   }
 }
 
-async function getStyles(filePath, addDependency, templateExists, stylesPath = null, isDev = false) {
+async function getStyles(filePath, rwsWorkspaceDir, addDependency, templateExists, stylesPath = null, isDev = false) {
   if(!stylesPath){
     stylesPath = 'styles/layout.scss';
   }
 
   let styles = 'const styles: null = null;'
-  const stylesFilePath = path.dirname(filePath) + '/' + stylesPath;
+  const stylesFilePath = path.join(path.dirname(filePath),  stylesPath);
 
   if (fs.existsSync(stylesFilePath)) {  
     const scsscontent = fs.readFileSync(stylesFilePath, 'utf-8');
     timingCounterStart();
-    const codeData = await plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles', null, filePath, !isDev);
+    const plugin = new RWSCssPlugin({ rwsWorkspaceDir });
+    const codeData = await plugin.compileScssCode(scsscontent, path.join(path.dirname(filePath), 'styles'), null, filePath, !isDev);
     const elapsed = timingCounterStop();
     let currentTimingList = rwsRuntimeHelper.getRWSVar('_timer_css');
 
@@ -193,7 +213,7 @@ async function getStyles(filePath, addDependency, templateExists, stylesPath = n
     }
     styles += `const styles = ${templateExists ? 'T.' : ''}css\`${cssCode}\`;\n`;
 
-    addDependency(path.dirname(filePath) + '/' + stylesPath);
+    addDependency(path.join(path.dirname(filePath), '/', stylesPath));
   }
 
   return styles;

package/cfg/build_steps/webpack/_parser.js

@@ -0,0 +1,118 @@
+// _parser.js
+const path = require('path');
+const fs = require('fs');
+
+function checkIfPackageIsLinked(basePath, packageName) {
+    try {
+        // Check package.json first
+        const packageJsonPath = path.join(basePath, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+            
+            // Check if it's in dependencies or devDependencies
+            const version = packageJson.dependencies?.[packageName] || packageJson.devDependencies?.[packageName];
+            
+            // If version starts with 'file:' or 'link:', it's linked
+            if (version && (version.startsWith('file:') || version.startsWith('link:'))) {
+                return {
+                    isLinked: true,
+                    source: 'package.json',
+                    linkPath: version.replace(/^(file:|link:)/, '')
+                };
+            }
+        }
+
+        // Check yarn.lock
+        const yarnLockPath = path.join(basePath, 'yarn.lock');
+        if (fs.existsSync(yarnLockPath)) {
+            const yarnLockContent = fs.readFileSync(yarnLockPath, 'utf8');
+            const packageEntry = yarnLockContent.split('\n\n').find(entry => 
+                entry.includes(`"${packageName}@`)
+            );
+            
+            if (packageEntry && packageEntry.includes('link:')) {
+                const linkMatch = packageEntry.match(/link: (.+)/);
+                return {
+                    isLinked: true,
+                    source: 'yarn.lock',
+                    linkPath: linkMatch ? linkMatch[1] : null
+                };
+            }
+        }
+
+        // Check package-lock.json
+        const packageLockPath = path.join(basePath, 'package-lock.json');
+        if (fs.existsSync(packageLockPath)) {
+            const packageLock = JSON.parse(fs.readFileSync(packageLockPath, 'utf8'));
+            const packageInfo = packageLock.dependencies?.[packageName] || 
+                              packageLock.devDependencies?.[packageName];
+            
+            if (packageInfo && packageInfo.link) {
+                return {
+                    isLinked: true,
+                    source: 'package-lock.json',
+                    linkPath: packageInfo.link
+                };
+            }
+        }
+
+        return {
+            isLinked: false,
+            source: null,
+            linkPath: null
+        };
+    } catch (e) {
+        console.error('Error checking package link status:', e);
+        return {
+            isLinked: false,
+            source: null,
+            linkPath: null,
+            error: e.message
+        };
+    }
+}
+
+function parseWebpackPath(stack) {
+    const currentFileLine = stack.split('\n').find(line => line.includes('_loaders.js'));
+    if (!currentFileLine) return null;
+
+    const match = currentFileLine.match(/\((.+?):\d+:\d+\)/);
+    if (!match) return null;
+
+    const originalPath = match[1];
+    
+    if (originalPath.includes('webpack:')) {
+        const [fsPath, webpackPath] = originalPath.split('webpack:');
+        const basePath = fsPath.replace('/build/', '/');
+        
+        // Check if @rws-framework/client is linked
+        const linkInfo = checkIfPackageIsLinked(basePath, '@rws-framework/client');
+
+        // Check both possible locations
+        const possiblePaths = [
+            // Check in @dev/client
+            path.join(basePath, '../@dev/client', webpackPath),
+            // Check in node_modules
+            path.join(basePath, 'node_modules/@rws-framework/client', webpackPath.replace('/client/', '/'))
+        ];
+
+        for (const possiblePath of possiblePaths) {
+            if (fs.existsSync(possiblePath)) {
+                return {
+                    original: originalPath,
+                    fsPath: basePath,
+                    webpackPath,
+                    exists: true,
+                    realPath: fs.realpathSync(possiblePath),
+                    resolvedPath: possiblePath,
+                    location: possiblePath.includes('node_modules') ? 'node_modules' : '@dev',
+                    linkInfo // Include the link information
+                };
+            }
+        }
+    }
+
+    return null;
+}
+
+module.exports = { parseWebpackPath, checkIfPackageIsLinked };

package/cfg/build_steps/webpack/_plugins.js

@@ -48,7 +48,7 @@ function getDefinesPlugins(BuildConfigurator, rwsFrontendConfig, devDebug) {
     ]
 }
 
-function getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath, devDebug) {    
+function getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, devDebug) {    
     if(!devDebug?.profiling){
         return [];
     }
@@ -63,18 +63,18 @@ function getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath
     ]
 }
 
-function getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath) {
+function getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig) {
     return [
         
     ]
 }
 
-function addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport, tsConfigPath) {
+function addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport) {
 
     RWS_WEBPACK_PLUGINS_BAG.add([
         ...getDefinesPlugins(BuildConfigurator, rwsFrontendConfig, devDebug),
-        ...getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath, devDebug),
-        ...getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath),
+        ...getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, devDebug),
+        ...getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig),
         ...getPackageModPlugins()
     ]);
 
@@ -84,7 +84,7 @@ function addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotRe
         }
 
         RWS_WEBPACK_PLUGINS_BAG.add(new HtmlWebpackPlugin({
-            template: publicDir + '/' + publicIndex,
+            template: path.join(publicDir, '/', publicIndex),
         }));
     }
 

package/cfg/build_steps/webpack/_production.js

@@ -1,28 +1,26 @@
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
-
 function getRWSProductionSetup(optimConfig){
-
   return {
     ...optimConfig,
     minimize: true,
     minimizer: [
       new TerserPlugin({
+        parallel: true,
+        extractComments: false,
         terserOptions: {
           keep_classnames: true, // Prevent mangling of class names
-          mangle: false, //@error breaks FAST view stuff if enabled for all assets              
+          mangle: false, //@error breaks FAST view stuff if enabled for all assets
           compress: {
             dead_code: true,
-            pure_funcs:  ['console.log', 'console.info', 'console.warn']
+            pure_funcs: ['console.log', 'console.info', 'console.warn']
           },
-          output: {
+          format: {
             comments: false,
-            beautify: false                  
-          },
-        },        
-        extractComments: false,
-        parallel: true,
+            beautify: false
+          }
+        }
       }),
       new CssMinimizerPlugin({
         minimizerOptions: {

package/cfg/build_steps/webpack/_rws_externals.js

@@ -12,7 +12,7 @@ const _defaultOpts = {
   }
 }
 
-const externals = (declaredCodeBase, nodeModules, automatedChunks, externalOptions = _defaultOpts) => ({context, request}, callback) => {
+const externals = (pkgPath, declaredCodeBase, nodeModules, automatedChunks, externalOptions = _defaultOpts) => ({context, request}, callback) => {
     let theOptions = _defaultOpts;
 
     if(externalOptions !== null){      
@@ -36,7 +36,7 @@ const externals = (declaredCodeBase, nodeModules, automatedChunks, externalOptio
 
     const frontendDirs = [
       codeBase,
-      path.resolve(__dirname,'..','..','..')
+      pkgPath
     ];        
 
     const inFrontendContext = frontendDirs.some(dir => context.startsWith(dir)) || 

package/cfg/build_steps/webpack/_webpack_config.js

@@ -3,7 +3,6 @@ const path = require('path');
 
 function createWebpackConfig(
     executionDir,
-    clientPkgPath,
     _packageDir,
     isDev,
     devTools,
@@ -15,10 +14,11 @@ function createWebpackConfig(
     automatedChunks,
     modules_setup,
     aliases,
-    tsConfigPath,
+    tsConfig,
     WEBPACK_PLUGINS,
     rwsExternals,
-    devExternalsVars
+    devExternalsVars,
+    entrypoint
 ) {
     return {
         context: executionDir,
@@ -41,18 +41,12 @@ function createWebpackConfig(
             }
         },
         module: {
-            rules: getRWSLoaders(clientPkgPath, path.resolve(_packageDir, 'node_modules'), tsConfigPath, devDebug),
+            rules: getRWSLoaders(_packageDir, executionDir, tsConfig, entrypoint),
         },
         plugins: WEBPACK_PLUGINS,
-        externals: rwsExternals(executionDir, modules_setup, automatedChunks, {
+        externals: rwsExternals(_packageDir, executionDir, modules_setup, automatedChunks, {
             _vars: devExternalsVars
-        }),
-        cache: {
-            type: 'filesystem',
-            buildDependencies: {
-                config: [__filename],
-            },
-        }
+        })      
     }
 }
 

package/cfg/tsconfigSetup.js

@@ -5,7 +5,7 @@ const { rwsPath } = require('@rws-framework/console');
 const path = require('path');
 const fs = require('fs');
 
-function setupTsConfig(tsConfigPath, executionDir, userAliases = {}) {
+function setupTsConfig(tsConfigPath, executionDir, pkgPath, userAliases = {}) {
 
     if (!fs.existsSync(tsConfigPath)) {
         throw new Error(`Typescript config file "${tsConfigPath}" does not exist`);
@@ -16,16 +16,15 @@ function setupTsConfig(tsConfigPath, executionDir, userAliases = {}) {
     try {
         let tsConfig = JSON.parse(tsConfigContents);
 
-        const declarationsPath = path.resolve(__dirname, '..', 'types') + '/declarations.d.ts';
-        const foundationPath = path.resolve(__dirname, '..', 'foundation');
-        const testsPath = path.resolve(__dirname, '..', 'tests');
+        const declarationsPath = path.resolve(pkgPath, 'types') + '/declarations.d.ts';
+        const foundationPath = path.resolve(pkgPath, 'foundation');
+        const testsPath = path.resolve(pkgPath, 'tests');
 
 
         const relativeDeclarationsPath = path.relative(path.dirname(tsConfigPath), declarationsPath);
         const relativeTestsPath = path.relative(path.dirname(tsConfigPath), testsPath);
         const relativeFoundationPath = path.relative(path.dirname(tsConfigPath), foundationPath);
 
-
         const includedMD5 = [];
         const srcPath = 'src/index.ts';
 
@@ -93,8 +92,6 @@ function setupTsConfig(tsConfigPath, executionDir, userAliases = {}) {
         
                     tsPaths[alias] = [path.relative(executionDir, aliasPath)];
 
-                    console.log({alias, x: tsPaths[alias]});
-
                     changedPaths = true;                    
                 }
             });

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.14.0",
+    "version": "2.15.0",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -59,6 +59,7 @@
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.8.1",
         "css-minimizer-webpack-plugin": "^5.0.1",
+        "emoji-regex": "^10.3.0",
         "eslint": "^6.0.0",
         "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.3",
@@ -67,36 +68,35 @@
         "minimatch": "^9.0.4",
         "node-sass": "^9.0.0",
         "raw-loader": "^4.0.2",
-        "source-map": "^0.7.4",
-        "source-map-support": "^0.5.21",
-        "stacktrace-gps": "^3.1.2",
         "sass": "1.69.7",
+        "sass-embedded": "^1.83.4",
         "sass-loader": "^13.3.2",
         "scss-loading-animations": "^1.0.1",
-        "sass-embedded": "^1.83.4",
+        "source-map": "^0.7.4",
+        "source-map-support": "^0.5.21",
         "speed-measure-webpack-plugin": "^1.5.0",
+        "stacktrace-gps": "^3.1.2",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.4.4",
         "ts-node": "^10.9.1",
+        "ts-transformer-keys": "^0.4.4",
+        "tsc-watch": "^6.0.4",
         "tsconfig-paths": "^4.2.0",
         "tsconfig-paths-webpack-plugin": "^4.1.0",
+        "tslib": "^2.6.2",
         "typedoc": "^0.25.4",
         "typedoc-plugin-mermaid": "^1.10.0",
         "typedoc-plugin-not-exported": "^0.1.6",
         "typedoc-plugin-rename-defaults": "^0.7.0",
         "typedoc-theme-hierarchy": "^4.1.2",
         "typescript": "^5.1.6",
-        "url-loader": "^4.1.1",
-        "emoji-regex": "^10.3.0",
-        "ts-transformer-keys": "^0.4.4",
-        "tsc-watch": "^6.0.4",
-        "tslib": "^2.6.2",
         "uglify-js": "^3.17.4",
+        "url-loader": "^4.1.1",
         "vite": "^6.0.11",
-        "webpack": "^5.86.0",
+        "webpack": "^5.97.1",
         "webpack-bundle-analyzer": "^4.10.1",
-        "webpack-cli": "^5.1.4",
+        "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^4.15.1",
         "webpack-node-externals": "^3.0.0"
     },
@@ -106,4 +106,4 @@
     "overrides": {
         "lodash": "^4.17.21"
     }
-}
+}

package/src/styles/README.md

@@ -0,0 +1,158 @@
+# RWS Grid System
+A flexible SASS-based grid system providing responsive column layouts with simple syntax.
+
+## Table of Contents
+- [Installation](#installation)
+- [Breakpoints](#breakpoints)
+- [Basic Usage](#basic-usage)
+- [Mixins](#mixins)
+- [Examples](#examples)
+
+## Installation
+Import the mixins file into your SASS project:
+
+```scss
+@import '@rws-mixins';
+```
+
+## Breakpoints
+The system uses three main breakpoint values:
+
+| Name | Default Width | CSS Variable |
+|------|---------------|-------------|
+| md   | 1200px       | --rws-md-width |
+| sm   | 992px        | --rws-sm-width |
+| xs   | 768px        | --rws-xs-width |
+
+Breakpoints can be customized using CSS variables or directly in the `$breakpoints` map.
+
+## Basic Usage
+
+### Grid Container
+```scss
+.container {
+@include rws-gr; // Basic flex container
+@include rws-gr-gap(20px); // Adds gaps between columns
+}
+```
+
+### Responsive Columns
+```scss
+.column {
+@include rws-gr-col(3, 4, 6, 12);
+// 3 columns on large screens
+// 4 columns on medium screens (< 1200px)
+// 6 columns on small screens (< 992px)
+// 12 columns on extra small screens (< 768px)
+}
+```
+
+## Mixins
+
+### rws-gr
+Creates a basic flexbox container with wrap enabled.
+```scss
+@include rws-gr;
+```
+
+### rws-gr-gap($gap)
+Adds spacing between columns.
+```scss
+@include rws-gr-gap(20px);
+```
+
+### rws-gr-col($lg, $md, $sm, $xs)
+Defines column width for different breakpoints.
+- `$lg`: width for large screens (default 12)
+- `$md`: width for medium screens (optional)
+- `$sm`: width for small screens (optional)
+- `$xs`: width for extra small screens (optional)
+
+### rws-gr-align($h, $v)
+Controls alignment of items in the container.
+- `$h`: horizontal alignment (default flex-start)
+- `$v`: vertical alignment (default top)
+
+### rws-gr-center
+Centers the container relative to its parent.
+
+## Examples
+
+### Basic Layout with Gaps
+```scss
+.container {
+@include rws-gr;
+@include rws-gr-gap(20px);
+@include rws-gr-center;
+
+.column {
+  @include rws-gr-col(4, 6, 12);
+}
+}
+```
+
+### Aligned Layout
+```scss
+.aligned-container {
+@include rws-gr;
+@include rws-gr-align(center, center);
+
+.column {
+  @include rws-gr-col(3);
+}
+}
+```
+
+### Complete Responsive Layout Example
+```scss
+.page-layout {
+@include rws-gr;
+@include rws-gr-gap(30px);
+@include rws-gr-center;
+
+.sidebar {
+  @include rws-gr-col(3, 4, 12);
+}
+
+.main-content {
+  @include rws-gr-col(9, 8, 12);
+}
+
+.footer {
+  @include rws-gr-col(12);
+}
+}
+```
+
+## Advanced Tips
+
+### Custom Breakpoints
+You can override default breakpoints using CSS variables:
+```css
+:root {
+--rws-md-width: 1400px;
+--rws-sm-width: 1024px;
+--rws-xs-width: 800px;
+}
+```
+
+### Column Calculation
+The system uses a 12-column grid by default. Column widths are calculated using:
+```scss
+width = (100% / 12) * columns
+```
+
+### Best Practices
+1. Always start with mobile layout first
+2. Use semantic class names
+3. Avoid deeply nested grids
+4. Consider using the gap mixin for consistent spacing
+5. Test layouts across different screen sizes
+
+## Browser Support
+This grid system relies on modern CSS features including:
+- Flexbox
+- CSS Custom Properties (CSS Variables)
+- CSS calc()
+
+Ensure your target browsers support these features or include appropriate fallbacks.

package/src/styles/_grid_legacy.scss

@@ -0,0 +1,50 @@
+// Import the new grid system (if needed - depends on your build setup)
+// @import 'grid';
+
+// Keep the legacy breakpoints for backward compatibility
+$mediaQuerySteps: $breakpoints;
+
+// Legacy mixins using new system
+
+// Mixin for the grid container
+@mixin grid-container() {
+  @include rws-gr;
+}
+
+@mixin grid-container-gap($gap) {
+  @include rws-gr-gap($gap);
+}
+
+// Internal helper kept for backward compatibility
+@mixin internal-grid-column($columns: 12) {
+  @include _gr-col-calc($columns);
+}
+
+// Legacy column mixins using new system
+@mixin grid-column($columns: 12) {
+  @include rws-gr-col($columns);
+}
+
+// Two breakpoint version
+@mixin grid-column($columns: 12, $mdColumns: 12) {
+  @include rws-gr-col($columns, $mdColumns);
+}
+
+// Three breakpoint version
+@mixin grid-column($columns: 12, $mdColumns: 12, $smColumns: 12) {
+  @include rws-gr-col($columns, $mdColumns, $smColumns);
+}
+
+// Four breakpoint version
+@mixin grid-column($columns: 12, $mdColumns: 12, $smColumns: 12, $xsColumns: 12) {
+  @include rws-gr-col($columns, $mdColumns, $smColumns, $xsColumns);
+}
+
+// Mixins for grid alignment
+@mixin grid-flex-align-items($horizontal, $vertical: top) {
+  @include rws-gr-align($horizontal, $vertical);
+}
+
+@mixin center-container() {
+  @include rws-gr-center;
+}

package/tsconfig.json

@@ -1,31 +1,20 @@
-{
-    "compilerOptions": {
-      "baseUrl": "./",
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true,
-      "target": "ES2018",
-      "module": "es2022",
-      "moduleResolution": "node",
-      "strict": true,
-      "esModuleInterop": true,
-      "resolveJsonModule": true,
-      "outDir": "dist/src",
-      "strictNullChecks": false,
-      "skipLibCheck": true,
-      "allowSyntheticDefaultImports": true,  
-      "sourceMap": true,    
-      "declaration": true,     
-      "lib": ["DOM", "ESNext"],
-    },
-    "paths": {
-      "@rws-framework/client": ["src"],
-      "@rws-framework/foundation": ["foundation"]
-    },   
-    "include": [
-      "src/index.ts",             
-      "types/docs-typings.d.ts"      
-    ],
-    "exclude": [
-      "node_modules"
-    ]
-  }
+{
+  "compilerOptions": {        
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "target": "ES2018",
+    "module": "es2022",
+    "moduleResolution": "node",
+    "strict": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "strictNullChecks": false,
+    "allowSyntheticDefaultImports": true,
+    "lib": [
+      "DOM",
+      "ESNext",
+      "WebWorker"
+    ]
+  }
+}