@rws-framework/client 2.13.1 → 2.13.3

package/builder/vite/rws.vite.config.ts

@@ -1,50 +1,57 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { processEnvDefines } from '../../cfg/build_steps/vite/_env_defines';
-import { getRWSVitePlugins } from '../../cfg/build_steps/vite/_loaders';
-import { rwsPath } from '@rws-framework/console';
-import type { RWSViteConfig } from '../../cfg/build_steps/vite/types';
-import type { UserConfig } from 'vite'; // Add this import
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export const _DEFAULT_CFG: RWSViteConfig = {
-    dev: true,
-    tsConfigPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'tsconfig.json'),
-    cssOutputPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'public', 'css'),
-};
-
-export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, devDebug = false): UserConfig {
-    if(!config.tsConfigPath){
-        config.tsConfigPath = _DEFAULT_CFG.tsConfigPath;
-    }
-
-    if(!config.cssOutputPath){
-        config.cssOutputPath = _DEFAULT_CFG.cssOutputPath;
-    }
-
-    const theConfig: RWSViteConfig = {..._DEFAULT_CFG, ...config};
-
-    // Return a plain configuration object
-    return {
-        define: processEnvDefines(theConfig, _DEFAULT_CFG, devDebug),        
-        plugins: getRWSVitePlugins({ 
-            packageDir: rwsPath.findPackageDir(process.cwd()), 
-            nodeModulesPath: `${rwsPath.findRootWorkspacePath(process.cwd())}/node_modules`, 
-            tsConfigPath: theConfig.tsConfigPath, 
-            cssOutputPath: theConfig.cssOutputPath as string,
-            dev: config.dev as boolean 
-        }),        
-        build: {
-            minify: !config.dev,
-            sourcemap: config.dev,
-            outDir: 'dist',
-            rollupOptions: {
-                input: {
-                    main: path.resolve(process.cwd(), 'index.html')
-                }
-            }
-        }
-    };
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { processEnvDefines } from '../../cfg/build_steps/vite/_env_defines';
+import { getRWSVitePlugins } from '../../cfg/build_steps/vite/_loaders';
+import { rwsPath } from '@rws-framework/console';
+import type { RWSViteConfig } from '../../cfg/build_steps/vite/types';
+import type { UserConfig } from 'vite'; // Add this import
+import { RWSScssPlugin } from './rws_scss_plugin';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+
+export const _DEFAULT_CFG: RWSViteConfig = {
+    dev: true,
+    tsConfigPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'tsconfig.json'),
+    cssOutputPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'public', 'css'),
+};
+
+export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, devDebug = false): UserConfig {
+    if(!config.tsConfigPath){
+        config.tsConfigPath = _DEFAULT_CFG.tsConfigPath;
+    }
+
+    if(!config.cssOutputPath){
+        config.cssOutputPath = _DEFAULT_CFG.cssOutputPath;
+    }
+
+    const scssPlugin = new RWSScssPlugin({ autoCompile: [], dev: config.dev as boolean });
+
+
+    const theConfig: RWSViteConfig = {..._DEFAULT_CFG, ...config};
+
+    // Return a plain configuration object
+    return {
+        define: processEnvDefines(theConfig, _DEFAULT_CFG, devDebug),        
+        plugins: getRWSVitePlugins({ 
+            scssPlugin,
+            packageDir: rwsPath.findPackageDir(process.cwd()), 
+            nodeModulesPath: `${rwsPath.findRootWorkspacePath(process.cwd())}/node_modules`, 
+            tsConfigPath: theConfig.tsConfigPath, 
+            cssOutputPath: theConfig.cssOutputPath as string,
+            dev: config.dev as boolean 
+        }),        
+        build: {
+            minify: !config.dev,
+            sourcemap: config.dev,
+            outDir: 'dist',
+            rollupOptions: {
+                input: {
+                    main: path.resolve(process.cwd(), 'index.html')
+                }
+            }
+        }
+    };
 }

package/{cfg/build_steps → builder}/vite/rws_scss_plugin.ts

@@ -1,60 +1,61 @@
-import path from 'path';
-import { rwsPath } from '@rws-framework/console';
-
-import _scss_compiler_builder from './scss/_compiler';
-import _scss_import_builder from './scss/_import';
-
-import _scss_fs_builder from './scss/_fs';
-
-type PluginParams = { autoCompile: string[] };
-
-class RWSScssPlugin {
-  protected autoCompile: string[] = [];
-  protected node_modules_dir: (fileDir: string) => void;
-
-  private _scss_import: any;    
-  private _scss_fs: any;
-  private _scss_compiler: any;
-
-  constructor(params: PluginParams = { autoCompile: [] }) {
-    this.node_modules_dir = (fileDir) => path.relative(fileDir, rwsPath.findRootWorkspacePath(process.cwd())) + '/node_modules/'
-    this._scss_import = _scss_import_builder(this);    
-    this._scss_fs = _scss_fs_builder(this);
-    this._scss_compiler = _scss_compiler_builder(this);
-
-    if (!!params.autoCompile && params.autoCompile.length > 0) {
-      this.autoCompile = params.autoCompile;
-    }
-
-    for (let index in this.autoCompile) {
-      const sassFile = this.autoCompile[index];
-      this.compileFile(sassFile);
-    }
-  }
-
-  
-  apply(compiler) {
-    const _self = this;
-
-    return;
-  }
-
-  async compileFile(scssPath): Promise<{ code: string, dependencies: string[]}>
-  {    
-      scssPath = this._scss_import.processImportPath(scssPath, path.dirname(scssPath))    
-      let scssCode = this._scss_fs.getCodeFromFile(scssPath);
-      return await this._scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), null, scssPath);
-  }
-
-  async compileScssCode(scssCode: string, scssPath: string): Promise<{ code: string, dependencies: string[]}>
-  {    
-      return await this._scss_compiler.compileScssCode(scssCode, scssPath, null, scssPath);
-  }
-  
-  writeCssFile(scssFilePath: string, cssContent: string): string
-  {
-    return this._scss_fs.writeCssFile(scssFilePath, cssContent);
-  }
-}
-
-export {RWSScssPlugin};
+import path from 'path';
+import { rwsPath } from '@rws-framework/console';
+
+import _scss_compiler_builder from './scss/_compiler';
+import _scss_import_builder from './scss/_import';
+
+import _scss_fs_builder from './scss/_fs';
+
+type PluginParams = { autoCompile: string[], dev: boolean };
+
+class RWSScssPlugin {
+  protected autoCompile: string[] = [];
+  protected node_modules_dir: (fileDir: string) => void;
+
+  private _scss_import: any;    
+  private _scss_fs: any;
+  private _scss_compiler: any;
+  private dev
+
+  constructor(params: PluginParams = { autoCompile: [], dev: true }) {
+    this.node_modules_dir = (fileDir) => path.relative(fileDir, rwsPath.findRootWorkspacePath(process.cwd())) + '/node_modules/'
+    this._scss_import = _scss_import_builder(this);    
+    this._scss_fs = _scss_fs_builder(this);
+    this._scss_compiler = _scss_compiler_builder(this);
+
+    if (!!params.autoCompile && params.autoCompile.length > 0) {
+      this.autoCompile = params.autoCompile;
+    }
+
+    for (let index in this.autoCompile) {
+      const sassFile = this.autoCompile[index];
+      this.compileFile(sassFile);
+    }
+  }
+
+  
+  apply(compiler) {
+    const _self = this;
+
+    return;
+  }
+
+  async compileFile(scssPath): Promise<{ code: string, dependencies: string[]}>
+  {    
+      scssPath = this._scss_import.processImportPath(scssPath, path.dirname(scssPath))    
+      let scssCode = this._scss_fs.getCodeFromFile(scssPath);
+      return await this._scss_compiler.compileScssCode(scssCode, path.dirname(scssPath), null, scssPath);
+  }
+
+  async compileScssCode(scssCode: string, scssPath: string): Promise<{ code: string, dependencies: string[]}>
+  {             
+      return await this._scss_compiler.compileScssCode(scssCode, scssPath, this.dev);
+  }
+  
+  writeCssFile(scssFilePath: string, cssContent: string): string
+  {
+    return this._scss_fs.writeCssFile(scssFilePath, cssContent);
+  }
+}
+
+export {RWSScssPlugin};

package/{cfg/build_steps → builder}/vite/scss/_compiler.ts

@@ -1,95 +1,96 @@
-import sass from 'sass-embedded';
-import path from 'path';
-import chalk from 'chalk';
-import emojiRegex from 'emoji-regex';
-
-import _scss_fonts_builder from './_fonts';
-let _scss_fonts: any = null;
-import _scss_import_builder from './_import';
-let _scss_import: any = null;
-
-async function compileScssCode(scssCode: string, fileRootDir: string, createFile:boolean = false, filePath: string | null = null, minify: boolean = false): Promise<{
-    code: string,
-    dependencies: string[]
-}> {  
-    _scss_fonts = _scss_fonts_builder(this);
-    _scss_import = _scss_import_builder(this);
-
-    const [scssImports] = _scss_import.extractScssImports(scssCode, fileRootDir);
-    const dependencies = scssImports.map((item) => item[2]);
-
-    if (scssImports && scssImports.length) {
-        scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, fileRootDir), scssCode);
-    }
-
-    const uses = _scss_import.extractScssUses(scssCode)[0];
-    let scssUses = '';
-    uses.forEach(scssUse => {
-        const useLine = scssUse[1];
-        if(scssCode.indexOf(useLine) === -1){                
-            scssUses += useLine + '\n';
-            scssCode = scssCode.replace(useLine + '\n', '');
-        }
-    });
-
-    scssCode = removeComments(scssUses + scssCode);
-
-    try {                    
-
-        const result: sass.CompileResult = await sass.compileStringAsync(scssCode, {
-            loadPaths: [fileRootDir],
-            style: minify ? "compressed" : "expanded",
-            sourceMap: false
-        });
-
-        let compiledCode = result.css.toString();
-
-        compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode);
-        compiledCode = replaceEmojisWithQuestionMark(compiledCode, fileRootDir);
-        return { code: compiledCode, dependencies };
-    } catch (err) {
-        console.error('SASS Error in', fileRootDir);
-        console.error(err);
-        throw err;
-    }
-}
-
-function checkForImporterType(_module, checkTypeExt) {
-    let importingFileExtension = '';
-    if (_module && _module.issuer && _module.issuer.resource) {
-        importingFileExtension = path.extname(_module.issuer.resource);
-        if (importingFileExtension === ('.' + checkTypeExt)) {
-            return true;
-        }
-    } else {
-        return false;
-    }
-    return false
-}
-
-function replaceEmojisWithQuestionMark(code, componentDir) {
-    const regex = emojiRegex();
-    let hasEmoji = false;
-    const result = code.replace(regex, (match) => {
-        hasEmoji = true;
-        return '?';
-    });
-    if (hasEmoji) {
-        console.log(chalk.yellow(`Emojis in css detected and replaced with "?" in "${path.dirname(componentDir)}" component`));
-    }
-    return result;
-}
-
-function removeComments(code) {
-    code = code.replace(/\/\/.*$/gm, '');
-    code = code.replace(/\/\*[\s\S]*?\*\//g, '');
-    code = code.replace(/^\s*$(?:\r\n?|\n)/gm, '');
-    return code;
-}
-
-export default function(element) {
-    return {
-        checkForImporterType: checkForImporterType.bind(element),
-        compileScssCode: compileScssCode.bind(element)
-    };
+import sass from 'sass-embedded';
+import path from 'path';
+import chalk from 'chalk';
+import emojiRegex from 'emoji-regex';
+
+import _scss_fonts_builder from './_fonts';
+let _scss_fonts: any = null;
+import _scss_import_builder from './_import';
+let _scss_import: any = null;
+
+async function compileScssCode(scssCode: string, fileRootDir: string, minify: boolean = false): Promise<{
+    code: string,
+    dependencies: string[]
+}> {  
+    _scss_fonts = _scss_fonts_builder(this);
+    _scss_import = _scss_import_builder(this);
+
+    const [scssImports] = _scss_import.extractScssImports(scssCode, fileRootDir);
+    
+    const dependencies = scssImports.map((item) => item[2]);
+
+    if (scssImports && scssImports.length) {
+        scssCode = _scss_import.replaceImports(_scss_import.processImports(scssImports, fileRootDir), scssCode);
+    }
+
+    const uses = _scss_import.extractScssUses(scssCode)[0];
+    let scssUses = '';
+    uses.forEach(scssUse => {
+        const useLine = scssUse[1];
+        if(scssCode.indexOf(useLine) === -1){                
+            scssUses += useLine + '\n';
+            scssCode = scssCode.replace(useLine + '\n', '');
+        }
+    });
+
+    scssCode = removeComments(scssUses + scssCode);
+
+    try {                    
+
+        const result: sass.CompileResult = await sass.compileStringAsync(scssCode, {
+            loadPaths: [fileRootDir],
+            style: minify ? "compressed" : "expanded",
+            sourceMap: false
+        });
+
+        let compiledCode = result.css.toString();
+
+        compiledCode = _scss_fonts.replaceFontUrlWithBase64(compiledCode);
+        compiledCode = replaceEmojisWithQuestionMark(compiledCode, fileRootDir);
+        return { code: compiledCode, dependencies };
+    } catch (err) {
+        console.error('SASS Error in', fileRootDir);
+        console.error(err);
+        throw err;
+    }
+}
+
+function checkForImporterType(_module, checkTypeExt) {
+    let importingFileExtension = '';
+    if (_module && _module.issuer && _module.issuer.resource) {
+        importingFileExtension = path.extname(_module.issuer.resource);
+        if (importingFileExtension === ('.' + checkTypeExt)) {
+            return true;
+        }
+    } else {
+        return false;
+    }
+    return false
+}
+
+function replaceEmojisWithQuestionMark(code, componentDir) {
+    const regex = emojiRegex();
+    let hasEmoji = false;
+    const result = code.replace(regex, (match) => {
+        hasEmoji = true;
+        return '?';
+    });
+    if (hasEmoji) {
+        console.log(chalk.yellow(`Emojis in css detected and replaced with "?" in "${path.dirname(componentDir)}" component`));
+    }
+    return result;
+}
+
+function removeComments(code) {
+    code = code.replace(/\/\/.*$/gm, '');
+    code = code.replace(/\/\*[\s\S]*?\*\//g, '');
+    code = code.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+    return code;
+}
+
+export default function(element) {
+    return {
+        checkForImporterType: checkForImporterType.bind(element),
+        compileScssCode: compileScssCode.bind(element)
+    };
 };

package/{cfg/build_steps → builder}/vite/scss/_fonts.ts

@@ -1,81 +1,81 @@
-const fs = require('fs');
-const path = require('path');
-const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/gm;
-
-import _scss_import_builder from './_import';
-let _scss_import: any = null;
-
-function hasFontEmbeds(css) {
-    return FONT_REGEX.test(css);
-}
-
-function embedFontsInCss(css, cssFilePath) {
-    let match;
-
-    while ((match = FONT_REGEX.exec(css)) !== null) {
-        const fontPath = match[1];
-        const absoluteFontPath = path.resolve(path.dirname(cssFilePath), fontPath);
-
-        if (fs.existsSync(absoluteFontPath)) {
-            const fontData = fs.readFileSync(absoluteFontPath);
-            const base64Font = fontData.toString('base64');
-            const fontMimeType = getFontMimeType(path.extname(absoluteFontPath));
-            const fontDataURL = `data:${fontMimeType};base64,${base64Font}`;
-
-            css = css.replace(new RegExp(match[0], 'g'), `url(${fontDataURL})`);
-        }
-    }
-
-    return css;
-}
-
-function getFontMimeType(extension) {
-    switch (extension) {
-        case '.woff': return 'font/woff';
-        case '.woff2': return 'font/woff2';
-        case '.eot': return 'application/vnd.ms-fontobject';
-        case '.ttf': return 'font/ttf';
-        case '.otf': return 'font/otf';
-        default: return 'application/octet-stream';
-    }
-}
-
-function convertFontToBase64(fontPath) {
-    return fs.readFileSync(fontPath, { encoding: 'base64' });
-}
-
-function replaceFontUrlWithBase64(cssContent) {
-    const fontFaceRegex = /@font-face\s*\{[^}]*\}/g;
-    let fontFaces = [...cssContent.matchAll(fontFaceRegex)];
-    _scss_import = _scss_import_builder(this);
-
-    for (const fontFace of fontFaces) {
-        const fontFaceContent = fontFace[0];
-        const urlRegex = /url\((['"]?)([^)'"]+)(\1)\)/g;
-        let match;
-
-        let modifiedFontFaceContent = fontFaceContent;
-
-        while ((match = urlRegex.exec(fontFaceContent)) !== null) {
-            // Create a promise to convert each font to Base64 and replace in CSS
-            const base64 = convertFontToBase64(_scss_import.processImportPath(match[2], null, true));
-            const base64Font = `data:font/woff2;base64,${base64}`;
-
-            modifiedFontFaceContent = modifiedFontFaceContent.replace(match[2], base64Font);
-        }
-
-        cssContent = cssContent.replace(fontFaceContent, modifiedFontFaceContent)
-    };
-
-    return cssContent;
-}
-
-export default function(element) {
-    return {
-        hasFontEmbeds: hasFontEmbeds.bind(element),
-        embedFontsInCss: embedFontsInCss.bind(element),
-        getFontMimeType: getFontMimeType.bind(element),
-        convertFontToBase64: convertFontToBase64.bind(element),
-        replaceFontUrlWithBase64: replaceFontUrlWithBase64.bind(element)
-    };
+const fs = require('fs');
+const path = require('path');
+const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/gm;
+
+import _scss_import_builder from './_import';
+let _scss_import: any = null;
+
+function hasFontEmbeds(css) {
+    return FONT_REGEX.test(css);
+}
+
+function embedFontsInCss(css, cssFilePath) {
+    let match;
+
+    while ((match = FONT_REGEX.exec(css)) !== null) {
+        const fontPath = match[1];
+        const absoluteFontPath = path.resolve(path.dirname(cssFilePath), fontPath);
+
+        if (fs.existsSync(absoluteFontPath)) {
+            const fontData = fs.readFileSync(absoluteFontPath);
+            const base64Font = fontData.toString('base64');
+            const fontMimeType = getFontMimeType(path.extname(absoluteFontPath));
+            const fontDataURL = `data:${fontMimeType};base64,${base64Font}`;
+
+            css = css.replace(new RegExp(match[0], 'g'), `url(${fontDataURL})`);
+        }
+    }
+
+    return css;
+}
+
+function getFontMimeType(extension) {
+    switch (extension) {
+        case '.woff': return 'font/woff';
+        case '.woff2': return 'font/woff2';
+        case '.eot': return 'application/vnd.ms-fontobject';
+        case '.ttf': return 'font/ttf';
+        case '.otf': return 'font/otf';
+        default: return 'application/octet-stream';
+    }
+}
+
+function convertFontToBase64(fontPath) {
+    return fs.readFileSync(fontPath, { encoding: 'base64' });
+}
+
+function replaceFontUrlWithBase64(cssContent) {
+    const fontFaceRegex = /@font-face\s*\{[^}]*\}/g;
+    let fontFaces = [...cssContent.matchAll(fontFaceRegex)];
+    _scss_import = _scss_import_builder(this);
+
+    for (const fontFace of fontFaces) {
+        const fontFaceContent = fontFace[0];
+        const urlRegex = /url\((['"]?)([^)'"]+)(\1)\)/g;
+        let match;
+
+        let modifiedFontFaceContent = fontFaceContent;
+
+        while ((match = urlRegex.exec(fontFaceContent)) !== null) {
+            // Create a promise to convert each font to Base64 and replace in CSS
+            const base64 = convertFontToBase64(_scss_import.processImportPath(match[2], null, true));
+            const base64Font = `data:font/woff2;base64,${base64}`;
+
+            modifiedFontFaceContent = modifiedFontFaceContent.replace(match[2], base64Font);
+        }
+
+        cssContent = cssContent.replace(fontFaceContent, modifiedFontFaceContent)
+    };
+
+    return cssContent;
+}
+
+export default function(element) {
+    return {
+        hasFontEmbeds: hasFontEmbeds.bind(element),
+        embedFontsInCss: embedFontsInCss.bind(element),
+        getFontMimeType: getFontMimeType.bind(element),
+        convertFontToBase64: convertFontToBase64.bind(element),
+        replaceFontUrlWithBase64: replaceFontUrlWithBase64.bind(element)
+    };
 };