@rws-framework/client 2.14.1 → 2.15.0

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.1",
+    "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.97.1",    
-        "webpack-cli": "^6.0.1",        
+        "webpack": "^5.97.1",
         "webpack-bundle-analyzer": "^4.10.1",
+        "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.