@rws-framework/client 2.12.0 → 2.13.1

package/cfg/build_steps/vite/loaders/ts.ts

@@ -0,0 +1,313 @@
+import { IRWSViteLoader, TSLoaderParams } from "./loader.type";
+import fs from 'fs';
+import path from 'path';
+
+import chalk from 'chalk';
+import md5 from 'md5';
+import JSON5 from 'json5'
+import { RWSScssPlugin } from "../rws_scss_plugin";
+
+interface DecoratorArgsData {
+    template?: string;
+    styles?: string;
+    ignorePackaging?: boolean;
+    debugPackaging?: boolean;
+    fastElementOptions?: any;
+}
+
+interface ViewDecoratorData {
+    decoratorArgs?: DecoratorArgsData;
+    tagName: string;
+    className: string;
+    classNamePrefix?: string | null; // Added this field
+}
+
+interface DecoratorExtract {
+    viewDecoratorData?: ViewDecoratorData | null;
+    replacedDecorator: string;
+}
+
+// Cache manager - możesz to wydzielić do osobnego pliku
+class CacheManager {
+    private cache: Map<string, string> = new Map();
+    private customOptions: any;
+
+    constructor(customOptions: any = null) {
+        this.customOptions = customOptions;
+    }
+
+    getCachedItem(filePath: string, hash: string): string | null {
+        const key = `${filePath}:${hash}`;
+        return this.cache.get(key) || null;
+    }
+
+    cacheItem(filePath: string, content: string, originalContent: string): void {
+        const key = `${filePath}:${md5(originalContent)}`;
+        this.cache.set(key, content);
+    }
+}
+
+// Helper functions - też możesz wydzielić
+class LoadersHelper {
+    static extractRWSViewArgs(content: string, noReplace = false): DecoratorExtract | null {
+        const viewReg = /@RWSView\(\s*["']([^"']+)["'](?:\s*,\s*([\s\S]*?))?\s*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm;
+      
+        let m: RegExpExecArray | null = null;;
+        let tagName: string | null = null;
+        let className: string | null = null;
+        let classNamePrefix: string | null = null;
+        let decoratorArgs: DecoratorArgsData | null = null;
+      
+        const _defaultRWSLoaderOptions = {
+          templatePath: 'template.html',
+          stylesPath: 'styles.scss',
+          fastOptions: { shadowOptions: { mode: 'open' } }
+        }
+      
+        while ((m = viewReg.exec(content)) !== null) {
+          if (m.index === viewReg.lastIndex) {
+            viewReg.lastIndex++;
+          }
+      
+          m.forEach((match, groupIndex) => {
+            if (groupIndex === 1) {
+              tagName = match;
+            }
+      
+            if (groupIndex === 2) {
+              if (match) {
+                try {            
+                  decoratorArgs = JSON5.parse(match);
+                } catch(e){
+                  console.log(chalk.red('Decorator options parse error: ') + e.message + '\n Problematic line:');
+                  console.log(`
+                    @RWSView(${tagName}, ${match})
+                  `);
+                  console.log(chalk.yellowBright(`Decorator options failed to parse for "${tagName}" component.`) + ' { decoratorArgs } defaulting to null.');
+                  console.log(match);
+      
+                  throw new Error('Failed parsing @RWSView')
+                }                   
+              }
+            }
+      
+            if (groupIndex === 3) {
+              if(match){
+                classNamePrefix = match;
+              }
+            }
+      
+            if (groupIndex === 4) {
+              className = match;
+            }
+          });
+        }
+      
+        if(!tagName || !className){
+          return null;
+        }
+      
+        let processedContent = content;
+      
+        let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+        decoratorArgs = decoratorArgs as unknown as DecoratorArgsData;
+        if (decoratorArgs?.fastElementOptions) {
+          fastOptions = decoratorArgs.fastElementOptions;
+        }
+       
+        let replacedDecorator: string | null = null;
+      
+        if(!noReplace){
+          const [addedParamDefs, addedParams] = this._extractRWSViewDefs(fastOptions, decoratorArgs || {});
+          const replacedViewDecoratorContent = processedContent.replace(
+            viewReg,
+            `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
+          );
+      
+          replacedDecorator = `${addedParamDefs.join('\n')}\n${replacedViewDecoratorContent}`;
+        }
+      
+        return {
+          viewDecoratorData: {
+            tagName,
+            className,
+            classNamePrefix,
+            decoratorArgs
+          },
+          replacedDecorator: replacedDecorator || ''  // Ensure it's never null
+        }
+    }
+
+    private static _extractRWSViewDefs(fastOptions = {}, decoratorArgs = {})
+    {  
+    const addedParamDefs: string[] = [];
+    const addedParams: string[] = [];  
+
+    for (const key in fastOptions){                
+        addedParamDefs.push(`const ${key} = ${JSON.stringify(fastOptions[key])};`);
+        addedParams.push(key);
+    }
+
+    return [addedParamDefs, addedParams];
+    }
+
+    static async getStyles(plugin: RWSScssPlugin, filePath: string, addDependency: (path: string) => void, templateExists: boolean, stylesPath?: string, isDev?: boolean): Promise<string> {
+        if(!stylesPath){
+          stylesPath = 'styles/layout.scss';
+        }
+      
+        let styles = 'const styles: null = null;'
+        const stylesFilePath = path.dirname(filePath) + '/' + stylesPath;
+      
+        if (fs.existsSync(stylesFilePath)) {  
+          const scsscontent = fs.readFileSync(stylesFilePath, 'utf-8');
+        
+          const codeData = await plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles');      
+          const cssCode = codeData.code;          
+      
+          styles = isDev ? `import './${stylesPath}';\n` : '';
+      
+          if (!templateExists) {
+            styles += `import { css } from '@microsoft/fast-element';\n`;
+          }
+          styles += `const styles = ${templateExists ? 'T.' : ''}css\`${cssCode}\`;\n`;
+      
+          addDependency(path.dirname(filePath) + '/' + stylesPath);
+        }
+      
+        return styles;
+      }
+      
+      static async getTemplate(filePath: string, addDependency: (path: string) => void, templateName?: string, isDev?: boolean) {
+        if(!templateName){
+          templateName = 'template';
+        }
+        const templatePath = path.dirname(filePath) + `/${templateName}.html`;
+        let htmlFastImports: string | null = null;
+        const templateExists = fs.existsSync(templatePath);            
+        let template = 'const rwsTemplate: null = null;';
+      
+        if (templateExists) {
+          const templateContent = fs.readFileSync(templatePath, 'utf-8').replace(/<!--[\s\S]*?-->/g, '');
+          htmlFastImports = `import * as T from '@microsoft/fast-element';\nimport './${templateName}.html';\n`;
+          template = `                
+      //@ts-ignore                
+      let rwsTemplate: any = T.html\`${templateContent}\`;
+      `; 
+        addDependency(templatePath);
+        }
+      
+        return [template, htmlFastImports, templateExists];
+      }
+}
+
+// Główny loader
+const loader: IRWSViteLoader<TSLoaderParams> = async (params: TSLoaderParams) => {
+    
+    const cacheManager = new CacheManager();
+    
+    return {
+        name: 'rws-typescript',
+        enforce: 'pre',
+        async transform(code: string, id: string) {
+
+            if (!id.endsWith('.ts')) return null;
+            if (id.endsWith('.debug.ts') || id.endsWith('.d.ts')) return null;
+            if (id.includes('node_modules') && !id.includes('@rws-framework')) return null;
+
+            let processedContent: string = code;
+            const isDev: boolean = params.dev;
+            let isIgnored: boolean = false;
+            let isDebugged: boolean = false;
+
+            try {
+                const decoratorExtract: DecoratorExtract | null = await LoadersHelper.extractRWSViewArgs(processedContent);
+                const decoratorData: ViewDecoratorData | null = decoratorExtract?.viewDecoratorData || null;                
+
+                const cachedCode: string = processedContent;
+                // const cachedTS = cacheManager.getCachedItem(id, md5(cachedCode as string));
+
+                // if (cachedTS) {
+                //     return {
+                //         code: cachedTS,
+                //         map: null
+                //     };
+                // }
+
+                if (!decoratorData) {
+                    return null;
+                }
+
+                let templateName: string | null = decoratorData.decoratorArgs?.template || null;
+                let stylesPath = decoratorData.decoratorArgs?.styles || null;
+                isIgnored = decoratorData.decoratorArgs?.ignorePackaging || false;
+                isDebugged = decoratorData.decoratorArgs?.debugPackaging || false;
+
+                const tagName = decoratorData.tagName;
+                const className = decoratorData.className;
+
+                const defaultTemplatePath = path.resolve(path.dirname(id), 'template.html');
+                const defaultStylesPath = path.resolve(path.dirname(id), 'styles', 'layout.scss');
+
+                if(!templateName && fs.existsSync(defaultTemplatePath)){
+                    templateName ='template';
+                }
+
+                if(!stylesPath && fs.existsSync(defaultStylesPath)){
+                    stylesPath ='styles/layout.scss';
+                }
+                console.log({stylesPath, templateName, tagName})
+
+                if (tagName && templateName && stylesPath) {
+                    const [template, htmlFastImports, templateExists] = await LoadersHelper.getTemplate(
+                        id,
+                        (path) => this.addWatchFile(path),
+                        templateName,
+                        isDev
+                    );
+
+                    const styles = await LoadersHelper.getStyles(
+                        params.scssPlugin,
+                        id,
+                        (path) => this.addWatchFile(path),
+                        templateExists as boolean,
+                        stylesPath,
+                        isDev
+                    );
+
+                    console.log({styles})
+
+                    if (className && decoratorExtract?.replacedDecorator) {
+                        processedContent = `${template}\n${styles}\n${decoratorExtract.replacedDecorator}`;
+                    }
+
+                    processedContent = `${htmlFastImports ? htmlFastImports + '\n' : ''}${processedContent}`;
+                }
+
+                const debugTsPath = id.replace('.ts', '.debug.ts');
+
+                if (fs.existsSync(debugTsPath)) {
+                    fs.unlinkSync(debugTsPath);
+                }
+
+                if (isDebugged) {
+                    console.log(chalk.red('[RWS BUILD] Debugging into: ' + debugTsPath));
+                    fs.writeFileSync(debugTsPath, processedContent);
+                }
+
+                cacheManager.cacheItem(id, processedContent, cachedCode);
+
+                return {
+                    code: processedContent,
+                    map: null
+                };
+            } catch (e) {
+                console.log(chalk.red('RWS Typescript loader error:'));
+                console.error(e);
+                throw new Error('RWS Build failed on: ' + id);
+            }
+        }
+    };
+};
+
+export default loader;

package/cfg/build_steps/vite/rws_scss_plugin.ts

@@ -0,0 +1,60 @@
+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};

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

@@ -0,0 +1,95 @@
+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)
+    };
+};

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;
+
+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)
+    };
+};

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)
+  };
+};