@rws-framework/client 2.12.0 → 2.13.0

package/cfg/build_steps/vite/scss/_compiler.ts

@@ -0,0 +1,101 @@
+const sass = require('sass');
+const path = require('path');
+const chalk = require('chalk');
+const emojiRegex = require('emoji-regex');
+
+import _scss_fonts_builder from './_fonts';
+let _scss_fonts: any = null;
+
+import _scss_import_builder from './_import';
+let _scss_import: any = null;
+
+function compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null, minify = false): {
+  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.compileString(scssCode, { loadPaths: [fileRootDir]});
+
+      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/vite/scss/_fonts.ts

@@ -0,0 +1,81 @@
+const fs = require('fs');
+const path = require('path');
+const FONT_REGEX = /url\(['"]?(.+?\.(woff|woff2|eot|ttf|otf))['"]?\)/gm;
+
+const _scss_import_builder = require('./_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)
+    };
+};

package/cfg/build_steps/vite/scss/_fs.ts

@@ -0,0 +1,82 @@
+const fs = require('fs');
+const path = require('path');
+
+import _scss_import from './_import';
+const _COMPILE_DIR_NAME = 'compiled';
+
+
+function writeCssFile(scssFilePath, cssContent) {
+    const cssFilePath = scssFilePath.replace('.scss', '.css');
+    let endCssFilePath = cssFilePath.split('/');
+    let endCssDirVars: string[] = [...endCssFilePath];
+    endCssDirVars[endCssDirVars.length - 1] = `${_COMPILE_DIR_NAME}`;
+    const endCssDir: string = endCssDirVars.join('/');
+
+    if (!fs.existsSync(endCssDir)) {
+      fs.mkdirSync(endCssDir);
+    }
+
+    endCssFilePath[endCssFilePath.length - 1] = `${_COMPILE_DIR_NAME}/` + endCssFilePath[endCssFilePath.length - 1];
+    endCssFilePath = endCssFilePath.join('/');
+
+    fs.writeFile(endCssFilePath, cssContent, () => {});
+    console.log('Saved external CSS file in: ' + endCssFilePath);
+}
+
+function readSCSSFilesFromDirectory(dirPath) {
+    let scssFiles: string[] = [];
+
+    try {
+      const files = fs.readdirSync(dirPath);
+
+      files.forEach(file => {
+        const filePath: string = path.join(dirPath, file);
+        const stat = fs.statSync(filePath);
+
+        if (stat.isFile() && path.extname(file) === '.scss') {
+          scssFiles.push(filePath);
+        } else if (stat.isDirectory()) {
+          scssFiles = scssFiles.concat(readSCSSFilesFromDirectory(filePath));
+        }
+      });
+    } catch (e) {
+      console.error(`Failed to read directory ${dirPath}:`, e);
+    }
+
+    return scssFiles;
+  };
+
+
+  function getCodeFromFile(filePath) {
+    filePath = filePath.replace('//', '/');
+    if (!fs.existsSync(filePath)) {
+      const processedImportPath = _scss_import(this).processImportPath(filePath, path.dirname(filePath));
+      if (!fs.existsSync(processedImportPath)) {
+        throw new Error(`SCSS loader: File path "${filePath}" was not found.`);
+      }
+
+      filePath = processedImportPath;
+    }
+
+    if (filePath[filePath.length - 1] === '/' && fs.statSync(filePath).isDirectory()) {
+      let collectedCode = '';
+
+      readSCSSFilesFromDirectory(filePath).forEach(scssPath => {
+        collectedCode += fs.readFileSync(scssPath, 'utf-8');
+      });
+
+      return collectedCode;
+    } else if (fs.statSync(filePath).isDirectory()) {
+      throw new Error(`Non-directory path (not ending with "/") "${filePath}" is and should not be a directory`)
+    }
+
+    return fs.readFileSync(filePath, 'utf-8');
+  }
+
+export default function(element) {
+  return {
+      writeCssFile: writeCssFile.bind(element),
+      readSCSSFilesFromDirectory: readSCSSFilesFromDirectory.bind(element),
+      getCodeFromFile: getCodeFromFile.bind(element)
+  };
+};

package/cfg/build_steps/vite/scss/_import.ts

@@ -0,0 +1,185 @@
+const { rwsPath } = require('@rws-framework/console');
+
+import _scss_fs_builder from './_fs';
+
+const fs = require('fs');
+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());
+
+function processImportPath(importPath, fileRootDir = null, noext = false): string 
+{        
+    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');
+    }
+
+    if (importPath.indexOf('@cwd') === 0) {
+        return fillSCSSExt(process.cwd() + '/' + importPath.slice(4), noext);
+    }
+
+    if (importPath.split('')[0] === '/') {
+
+        return fillSCSSExt(importPath, noext);
+    }    
+
+    if (fileRootDir) {
+        const relativized = path.resolve(fileRootDir) + '/' + importPath;     
+
+        if (importPath.split('')[0] === '.') {
+            return fillSCSSExt(relativized, noext);
+        }
+
+        if (!fs.existsSync(relativized)) {
+            const partSplit = relativized.split('/');
+            partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + '.scss';
+
+            const newPath = underscorePath(relativized);
+
+            if (fs.existsSync(newPath)) {
+                return newPath;
+            }
+        }
+        return fillSCSSExt(relativized, noext);
+    }
+
+    return importPath;
+}
+
+function underscorePath(path, noext = false) {
+    const partSplit = path.split('/');
+    partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + (path.indexOf('.scss') > - 1 || noext ? '' : '.scss');
+    return partSplit.join('/');
+}
+
+function fillSCSSExt(scssPath, noext = false) {
+    const underscoredPath = underscorePath(scssPath, noext);
+    if (!fs.existsSync(scssPath) && fs.existsSync(underscoredPath)) {
+        return underscoredPath;
+    }
+
+    if (noext) {
+        return scssPath;
+    }
+
+    if ((!fs.existsSync(scssPath) || (fs.existsSync(scssPath) && fs.statSync(scssPath).isDirectory())) && fs.existsSync(`${scssPath}.scss`)) {
+        return `${scssPath}.scss`;
+    }
+
+    if (fs.existsSync(`_${scssPath}.scss`)) {
+        return `${scssPath}.scss`;
+    }
+
+    return scssPath;
+}
+
+function extractScssImports(fileContent, importRootPath) {
+    let match;
+    const imports: string[][] = [];
+
+    while ((match = CSS_IMPORT_REGEX.exec(fileContent)) !== null) {
+        const importPath = match[1];
+        const importLine = match[0];
+
+        if (fs.statSync(importRootPath).isFile()) {
+            importRootPath = path.dirname(importRootPath);
+        }
+
+        const processedImportPath = processImportPath(importPath, importRootPath);
+
+        imports.push([processedImportPath, importLine, path.resolve(processedImportPath)]);
+    }
+
+    return [imports, fileContent];
+}
+
+function extractScssUses(fileContent) {
+    let match;
+    const uses: string[][] = [];
+
+    while ((match = SCSS_USE_REGEX.exec(fileContent)) !== null) {
+        const usesPath: string = match[1];
+        const usesLine: string = match[0];
+
+        if (!uses.find((item) => {
+            return item[0] == usesPath
+        }) && !(usesPath !== 'sass:math')) {
+            uses.push([usesPath, usesLine]);
+        }
+    }
+
+    return [uses];
+}
+
+function detectImports(code) {
+    return CSS_IMPORT_REGEX.test(code);
+}
+
+function replaceWithNodeModules(input, fileDir = null, absolute = false, token = '~') {
+    return input.replace(token, absolute ? `${path.resolve(WORKSPACE, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : process.cwd()));
+}
+
+function processImports(imports, fileRootDir, importStorage = {}, sub = false) {
+    const _scss_fs = _scss_fs_builder(this);
+    const importResults: {
+        line: number,
+        code: string
+    }[] = [];
+
+    const getStorage = (sourceComponentPath, importedFileContent) => {
+        const sourceComponentPathFormatted = sourceComponentPath.replace('/', '_');
+
+        if (!(sourceComponentPathFormatted in importStorage)) {
+            importStorage[sourceComponentPathFormatted] = importedFileContent;
+
+            return importedFileContent;
+        }
+
+        return '';
+    }
+  
+    imports.forEach(importData => {
+        const originalImportPath = importData[0];
+        let importPath = processImportPath(originalImportPath, fileRootDir);                    
+        let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, ''));
+
+        const recursiveImports = extractScssImports(replacedScssContent, importPath)[0];
+
+        if (recursiveImports.length) {
+
+            replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), importStorage, true), replacedScssContent);
+        }
+
+        importResults.push({
+            line: importData[1],
+            code: replacedScssContent
+        });
+    });
+
+    return importResults;
+}
+
+function replaceImports(processedImports, code) {
+    processedImports.forEach(importObj => {
+        code = code.replace(importObj.line, importObj.code);
+    });
+
+    return code;
+}
+
+export default (element) => ({
+    processImportPath: processImportPath.bind(element),
+    fillSCSSExt: fillSCSSExt.bind(element),
+    underscorePath: underscorePath.bind(element),
+    detectImports: detectImports.bind(element),
+    extractScssUses: extractScssUses.bind(element),
+    extractScssImports: extractScssImports.bind(element),
+    replaceImports: replaceImports.bind(element),
+    processImports: processImports.bind(element),
+    replaceWithNodeModules: replaceWithNodeModules.bind(element)
+});

package/cfg/build_steps/vite/types.ts

@@ -0,0 +1,7 @@
+export type RWSViteConfig = {
+    dev: boolean
+    tsConfigPath: string
+    defines?: {
+        [key: string]: string
+    }
+}

package/cfg/build_steps/webpack/_env_defines.js

@@ -10,13 +10,8 @@ function processEnvDefines(BuildConfigurator, config, devDebug) {
     const rwsDefines = BuildConfigurator.get('rwsDefines') || config.rwsDefines || null;
 
     if (rwsDefines) {
-        for (const defineKey of Object.keys(rwsDefines)){        
-            _rws_defines = { 
-                ..._rws_defines, 
-                ['process.env.' + defineKey]: JSON.stringify(rwsDefines[defineKey]) 
-            }
-        }
-    }    
+        _rws_defines = { ..._rws_defines, ...rwsDefines }
+    }
 
     return _rws_defines;
 }

package/cfg/build_steps/webpack/_loaders.js

@@ -51,12 +51,6 @@ function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath, devDebug) {
         scssLoader,
       ],
     },
-    {
-      test: /\.css$/i,
-      use: [
-        'css-loader'
-      ],
-    },
   ]
 }
 

package/cfg/build_steps/webpack/_webpack_config.js

@@ -47,7 +47,12 @@ function createWebpackConfig(
         externals: rwsExternals(executionDir, modules_setup, automatedChunks, {
             _vars: devExternalsVars
         }),
-        cache: false,
+        cache: {
+            type: 'filesystem',
+            buildDependencies: {
+                config: [__filename],
+            },
+        }
     }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.12.0",
+    "version": "2.13.0",
     "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.16",
+        "@rws-framework/console": "^0.3.15",
         "@types/moment": "^2.13.0",
         "deepmerge": "^4.3.1",
         "dragula": "^3.7.3",
@@ -92,6 +92,7 @@
         "tsc-watch": "^6.0.4",
         "tslib": "^2.6.2",
         "uglify-js": "^3.17.4",
+        "vite": "^6.0.11",
         "webpack": "^5.86.0",
         "webpack-bundle-analyzer": "^4.10.1",
         "webpack-cli": "^5.1.4",

package/src/client/config.ts

@@ -73,11 +73,11 @@ function get(this: RWSClientInstance, key: string): any | null
 }
 
 type PluginConstructor<T extends DefaultRWSPluginOptionsType> = new (options: T) => RWSPlugin<T>;
-type RWSPluginEntry = IStaticRWSPlugin;
+type RWSPluginEntry<T extends DefaultRWSPluginOptionsType = DefaultRWSPluginOptionsType> = IStaticRWSPlugin<T>;
 
 function addPlugin<T  extends DefaultRWSPluginOptionsType>(this: RWSClientInstance, pluginEntry: RWSPluginEntry){
     const rwsWindow: RWSWindow = loadRWSRichWindow();
-    const pluginClass: PluginConstructor<T> = (Array.isArray(pluginEntry) ? pluginEntry[0] : pluginEntry) as PluginConstructor<T>;
+    const pluginClass: PluginConstructor<T> = (Array.isArray(pluginEntry) ? pluginEntry[0] : pluginEntry) as unknown as PluginConstructor<T>;
     const pluginOptions: T = (Array.isArray(pluginEntry) ? pluginEntry[1] : { enabled: true }) as T;
 
     if(!Object.keys(rwsWindow.RWS.plugins).includes(pluginClass.name)){       

package/src/client.ts

@@ -74,7 +74,7 @@ class RWSClient {
         }        
     }
 
-    addPlugin<T extends DefaultRWSPluginOptionsType>(pluginEntry: IStaticRWSPlugin<T>)
+    addPlugin<T extends DefaultRWSPluginOptionsType>(pluginEntry: IStaticRWSPlugin)
     {        
         this.config.plugins.push(pluginEntry);
     }

package/src/components/_component.ts

@@ -6,6 +6,7 @@ import DOMService, { DOMServiceInstance, DOMOutputType } from '../services/DOMSe
 import ApiService, { ApiServiceInstance } from '../services/ApiService';
 import NotifyService, { NotifyServiceInstance } from '../services/NotifyService';
 import { IRWSViewComponent, IAssetShowOptions } from '../types/IRWSViewComponent';
+import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
 import { applyConstructor, RWSInject } from './_decorator';
 import TheRWSService from '../services/_service';
 import { handleExternalChange } from './_attrs/_external_handler';
@@ -70,7 +71,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
     constructor() {
         super();       
-        applyConstructor(this);               
+        applyConstructor(this);       
     }
 
     connectedCallback() {        
@@ -240,5 +241,6 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 export default RWSViewComponent;
 
 export type {
-    IAssetShowOptions, IRWSViewComponent
+    IAssetShowOptions,
+    IRWSViewComponent
 } from '../types/IRWSViewComponent';

package/src/components/_container.ts

@@ -1,4 +1,4 @@
-import { DI, Container } from '../../foundation/rws-foundation';
+import {DI, Container, Registration } from '../../foundation/rws-foundation';
 import {loadRWSRichWindow} from '../types/RWSWindow';
 
 export default () => {
@@ -13,8 +13,4 @@ export default () => {
     return richWindow.RWS.container;
 };
 
-export { DI, Container }
-
-export type {
-    Key, Registration, InterfaceSymbol
-} from '../../foundation/rws-foundation';
+export { DI, Container, Registration }

package/src/components/_decorator.ts

@@ -37,7 +37,7 @@ function RWSView<Component extends RWSViewComponent>(name: string, data?: RWSDec
             if(override.options){
                 (theComponent.definition as any).options = override.options;
             }
-        }        
+        }
     };
 }
 

package/src/components/_definitions.ts

@@ -39,7 +39,6 @@ export function defineComponent<T extends RWSViewComponent>(element: IWithCompos
         styles: element.definition.styles
     }) as RWSWindowComponentInterface;
 
-
     if (!richWindow.RWS) {
         throw new Error('RWS client not initialized');
     }

package/src/components/_event_handling.ts

@@ -1,4 +1,4 @@
-import RWSViewComponent from "@rws-framework/client/src/components/_component";
+import RWSViewComponent from './_component';
 
 export function on<T>(this: RWSViewComponent, type: string, listener: (event: CustomEvent<any>) => any) {
     this.addEventListener(type, (baseEvent: Event) => {