@rws-framework/client 2.10.8 → 2.10.10

package/cfg/build_steps/webpack/_loaders.js

@@ -1,46 +1,224 @@
 const path = require('path');
+const fs = require('fs');
+const os = require('os');
 
-function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath){
+const RWSCssPlugin = require("../../../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');
+
+function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath, devDebug) {
   const scssLoader = packageDir + '/webpack/loaders/rws_fast_scss_loader.js';
   const tsLoader = packageDir + '/webpack/loaders/rws_fast_ts_loader.js';
   const htmlLoader = packageDir + '/webpack/loaders/rws_fast_html_loader.js';
 
-  return [    
-      {
-          test: /\.html$/,
-          use: [
-              {
-                  loader: htmlLoader, 
-              },
-          ],
-      },  
-      {
-        test: /\.(ts)$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              allowTsInNodeModules: true,
-              configFile: path.resolve(tsConfigPath)
-            }
-          },
-          {
-            loader: tsLoader,
-          }            
-        ],
-        exclude: [
-          /node_modules\/(?!\@rws-framework\/[A-Z0-9a-z])/,
-          /\.debug\.ts$/,  
-          /\.d\.ts$/,  
-        ],
-      },
-      {
-        test: /\.scss$/i,
-        use: [                                              
-          scssLoader,
-        ],
-      },
+
+  return [
+    {
+      test: /\.html$/,
+      use: [
+        {
+          loader: htmlLoader,
+        },
+      ],
+    },
+    {
+      test: /\.(ts)$/,
+      use: [
+        {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true,
+            allowTsInNodeModules: true,
+            configFile: path.resolve(tsConfigPath)            
+          }
+        },
+        {
+          loader: tsLoader,
+        }
+      ],
+      exclude: [        
+        /node_modules\/(?!\@rws-framework\/[A-Z0-9a-z])/,
+        /\.debug\.ts$/,
+        /\.d\.ts$/,
+      ],
+    },
+    {
+      test: /\.scss$/i,
+      use: [
+        scssLoader,
+      ],
+    },
   ]
 }
 
-module.exports = { getRWSLoaders }
+function _extractRWSViewDefs(fastOptions = {}, decoratorArgs = {})
+{  
+  const addedParamDefs = [];
+  const addedParams = [];  
+
+  for (const key in fastOptions){                
+    addedParamDefs.push(`const ${key} = ${JSON.stringify(fastOptions[key])};`);
+    addedParams.push(key);
+  }
+
+  return [addedParamDefs, addedParams];
+}
+
+function extractRWSViewArgs(content, noReplace = false) {
+  const viewReg = /@RWSView\(\s*["']([^"']+)["'](?:\s*,\s*([\s\S]*?))?\s*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm;
+
+  let m;
+  let tagName = null;
+  let className = null;
+  let classNamePrefix = null;
+  let decoratorArgs = null;
+
+  const _defaultRWSLoaderOptions = {
+    templatePath: 'template.html',
+    stylesPath: 'styles.scss',
+    fastOptions: { shadowOptions: { mode: 'open' } }
+  }
+
+
+  while ((m = viewReg.exec(content)) !== null) {
+    // This is necessary to avoid infinite loops with zero-width matches
+    if (m.index === viewReg.lastIndex) {
+      viewReg.lastIndex++;
+    }
+
+    // The result can be accessed through the `m`-variable.
+    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){
+    return null;
+  }
+
+  let processedContent = content;
+
+  let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+
+  if (decoratorArgs && decoratorArgs.fastElementOptions) {
+    fastOptions = decoratorArgs.fastElementOptions;
+  }
+ 
+  let replacedDecorator = null;
+
+  if(!noReplace){
+    const [addedParamDefs, addedParams] = _extractRWSViewDefs(fastOptions, decoratorArgs);
+    const replacedViewDecoratorContent = processedContent.replace(
+      viewReg,
+      `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
+    );
+
+    // console.log({replacedViewDecoratorContent});
+
+    replacedDecorator = `${addedParamDefs.join('\n')}\n${replacedViewDecoratorContent}`;
+  }
+
+  return {
+    viewDecoratorData: {
+      tagName,
+      className,
+      classNamePrefix,
+      decoratorArgs
+    },
+    replacedDecorator
+  }
+}
+
+async function getStyles(filePath, addDependency, templateExists, stylesPath = null, isDev = false) {
+  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');
+    timingCounterStart();
+    const codeData = await plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles', null, filePath, !isDev);
+    const elapsed = timingCounterStop();
+    let currentTimingList = rwsRuntimeHelper.getRWSVar('_timer_css');
+
+    if(currentTimingList){
+      currentTimingList += `\n${filePath}|${elapsed}`;
+    }else{
+      currentTimingList = `${filePath}|${elapsed}`;
+    }
+
+    rwsRuntimeHelper.setRWSVar('_timer_css', currentTimingList);
+
+    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;
+}
+
+async function getTemplate(filePath, addDependency, templateName = null, isDev = false) {
+  if(!templateName){
+    templateName = 'template';
+  }
+  const templatePath = path.dirname(filePath) + `/${templateName}.html`;
+  let htmlFastImports = 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];
+}
+
+module.exports = { getRWSLoaders, extractRWSViewArgs, getTemplate, getStyles }

package/cfg/build_steps/webpack/_plugins.js

@@ -0,0 +1,104 @@
+const webpack = require('webpack')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { processEnvDefines } = require('./_env_defines');
+const path = require('path');
+
+const RWS_WEBPACK_PLUGINS_BAG = {
+    _plugins: [],
+    add(plugin) {
+        if (Array.isArray(plugin)) {
+            if (!plugin.length) {
+                return;
+            }
+
+            plugin.forEach((item) => {
+                RWS_WEBPACK_PLUGINS_BAG.add(item);
+            })
+        } else {
+            if (!plugin) {
+                return;
+            }
+
+            if (!this._plugins.includes(plugin)) {
+                this._plugins.push(plugin);
+            }
+        }
+    },
+    getPlugins() {
+        return this._plugins
+    }
+}
+
+function getPackageModPlugins() {
+    return [
+        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
+        new webpack.IgnorePlugin({
+            resourceRegExp: /.*\.es6\.js$/,
+            contextRegExp: /node_modules/
+        }),
+    ]
+}
+
+function getDefinesPlugins(BuildConfigurator, rwsFrontendConfig, devDebug) {
+    const _rws_defines = processEnvDefines(BuildConfigurator, rwsFrontendConfig, devDebug);
+
+    return [
+        new webpack.DefinePlugin(_rws_defines)
+    ]
+}
+
+function getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath, devDebug) {    
+    if(!devDebug?.profiling){
+        return [];
+    }
+
+    const profiling =  new webpack.debug.ProfilingPlugin({
+        outputPath: path.join(BuildConfigurator.get('outputDir') || rwsFrontendConfig.outputDir, '.profiling/profileEvents.json'),
+    });
+
+    
+    return [
+        profiling
+    ]
+}
+
+function getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath) {
+    return [
+        
+    ]
+}
+
+function addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport, tsConfigPath) {
+
+    RWS_WEBPACK_PLUGINS_BAG.add([
+        ...getDefinesPlugins(BuildConfigurator, rwsFrontendConfig, devDebug),
+        ...getBuilderDevPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath, devDebug),
+        ...getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath),
+        ...getPackageModPlugins()
+    ]);
+
+    if (isHotReload) {
+        if (!publicDir) {
+            throw new Error('No public dir set')
+        }
+
+        RWS_WEBPACK_PLUGINS_BAG.add(new HtmlWebpackPlugin({
+            template: publicDir + '/' + publicIndex,
+        }));
+    }
+
+    const overridePlugins = rwsFrontendConfig.plugins || []
+
+    RWS_WEBPACK_PLUGINS_BAG.add(overridePlugins);
+
+    if (isReport) {
+        RWS_WEBPACK_PLUGINS_BAG.add(new BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            openAnalyzer: false,
+        }));
+    }
+}
+
+module.exports = { RWS_WEBPACK_PLUGINS_BAG, addStartPlugins };

package/cfg/build_steps/webpack/_timing.js

@@ -0,0 +1,53 @@
+const TimingUtils = {
+  LOGGING: true,
+  TIMER_ON: true,
+
+  timeLog(...obj) {
+    if (!this.LOGGING || !this.TIMER_ON) {
+      return;
+    }
+    obj = [chalk.blueBright('[TIMING]'), ...obj];
+    console.log(...obj);
+  },
+
+  timingCounterStart() {
+    if (!this.TIMER_ON) {
+      return;
+    }
+    rwsRuntimeHelper.startExecTimeRecord();
+  },
+
+  timingCounterStop() {
+    if (!this.TIMER_ON) {
+      return 0;
+    }
+    return rwsRuntimeHelper.startExecTimeRecord() || 0;
+  },
+
+  timingStart(section) {
+    if (!this.TIMER_ON) {
+      return;
+    }
+    this.timingCounterStart();
+    this.timeLog(`Started timing "${chalk.yellow(section)}"`);
+  },
+
+  timingStop(section) {
+    if (!this.TIMER_ON) {
+      return 0;
+    }
+    const endTime = this.timingCounterStop();
+    this.timeLog(`Stopped timing "${chalk.yellow(section)}" @${endTime}ms`);
+    return endTime;
+  },
+
+  toggleLogging(val) {
+    this.LOGGING = val;
+  },
+
+  toggleTimer(val) {
+    this.TIMER_ON = val;
+  }
+};
+
+module.exports = TimingUtils;

package/cfg/build_steps/webpack/_webpack_config.js

@@ -0,0 +1,59 @@
+const { getRWSLoaders } = require('./_loaders');
+const path = require('path');
+
+function createWebpackConfig(
+    executionDir,
+    clientPkgPath,
+    _packageDir,
+    isDev,
+    devTools,
+    devDebug,
+    isParted,
+    partedPrefix,
+    outputDir,
+    outputFileName,
+    automatedChunks,
+    modules_setup,
+    aliases,
+    tsConfigPath,
+    WEBPACK_PLUGINS,
+    rwsExternals,
+    devExternalsVars
+) {
+    return {
+        context: executionDir,
+        entry: {
+            ...automatedChunks
+        },
+        mode: isDev ? 'development' : 'production',
+        target: 'web',
+        devtool: devTools,
+        output: {
+            path: outputDir,
+            filename: isParted ? (partedPrefix || 'rws') + '.[name].js' : outputFileName,
+            sourceMapFilename: '[file].map',
+        },
+        resolve: {
+            extensions: ['.ts', '.js', '.scss', '.css'],
+            modules: modules_setup,
+            alias: {
+                ...aliases
+            }
+        },
+        module: {
+            rules: getRWSLoaders(clientPkgPath, path.resolve(_packageDir, 'node_modules'), tsConfigPath, devDebug),
+        },
+        plugins: WEBPACK_PLUGINS,
+        externals: rwsExternals(executionDir, modules_setup, automatedChunks, {
+            _vars: devExternalsVars
+        }),
+        cache: {
+            type: 'filesystem',
+            buildDependencies: {
+                config: [__filename],
+            },
+        }
+    }
+}
+
+module.exports = { createWebpackConfig }

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) {
+function setupTsConfig(tsConfigPath, executionDir, userAliases = {}) {
 
     if (!fs.existsSync(tsConfigPath)) {
         throw new Error(`Typescript config file "${tsConfigPath}" does not exist`);
@@ -19,8 +19,7 @@ function setupTsConfig(tsConfigPath, executionDir) {
         const declarationsPath = path.resolve(__dirname, '..', 'types') + '/declarations.d.ts';
         const foundationPath = path.resolve(__dirname, '..', 'foundation');
         const testsPath = path.resolve(__dirname, '..', 'tests');
-        const declarationsPathMD5 = md5(fs.readFileSync(declarationsPath, 'utf-8'));
-        const testsPathMD5 = fs.existsSync(testsPath) ? md5(fs.readFileSync(testsPath, 'utf-8')) : null;
+
 
         const relativeDeclarationsPath = path.relative(path.dirname(tsConfigPath), declarationsPath);
         const relativeTestsPath = path.relative(path.dirname(tsConfigPath), testsPath);
@@ -28,36 +27,37 @@ function setupTsConfig(tsConfigPath, executionDir) {
 
 
         const includedMD5 = [];
+        const srcPath = 'src/index.ts';
 
-        let changed = false; 
+        let changed = false;
 
         if (!Object.keys(tsConfig).includes('include')) {
             tsConfig['include'] = [];
         } else {
             tsConfig['include'] = tsConfig['include'].filter((inc) => {
-                 if(inc === 'src/index.ts'){
+                if (inc === srcPath) {
                     return true;
-                 }
+                }
 
-                 return fs.existsSync(rwsPath.relativize(inc, executionDir))
+                return fs.existsSync(rwsPath.relativize(inc, executionDir));
             })
-        }    
-        
-        
-        if (!tsConfig['include'].includes('src/index.ts')) {
+        }
+
+
+        if (!tsConfig['include'].includes(srcPath)) {
             console.log(chalk.blueBright('[RWS TS CONFIG]'), 'adding RWS project typescript code to project tsconfig.json');
-            tsConfig['include'].unshift('src/index.ts');
+            tsConfig['include'].unshift(srcPath);
             changed = true;
-        }  
+        }
 
         if (!Object.keys(tsConfig).includes('exclude')) {
-            tsConfig['exclude'] = [];            
+            tsConfig['exclude'] = [];
             changed = true;
-        }      
-        
+        }
+
         const excludeString = '**/*.debug.ts';
 
-        if(!tsConfig['exclude'].includes(excludeString)){
+        if (!tsConfig['exclude'].includes(excludeString)) {
             tsConfig['exclude'].push(excludeString);
             changed = true;
         }
@@ -65,28 +65,49 @@ function setupTsConfig(tsConfigPath, executionDir) {
         let probablyLinked = false;
 
         tsConfig['include'].forEach(element => {
-            if(element !== 'src' && element.indexOf('declarations.d.ts') > -1 && md5(fs.readFileSync(rwsPath.relativize(element, executionDir), 'utf-8')) === md5(fs.readFileSync(declarationsPath, 'utf-8'))){
+            if (element !== 'src' && element.indexOf('declarations.d.ts') > -1 && md5(fs.readFileSync(rwsPath.relativize(element, executionDir), 'utf-8')) === md5(fs.readFileSync(declarationsPath, 'utf-8'))) {
                 probablyLinked = true;
-            }            
-        }); 
+            }
+        });
 
         if (!tsConfig['include'].includes(relativeDeclarationsPath) && !probablyLinked) {
             console.log(chalk.blueBright('[RWS TS CONFIG]'), 'adding RWS typescript declarations to project tsconfig.json');
             tsConfig['include'].push(relativeDeclarationsPath);
             includedMD5.push(md5(fs.readFileSync(declarationsPath, 'utf-8')));
             changed = true;
-        }      
+        }
+
+        if(!tsConfig.compilerOptions){
+            throw new Error(`${tsConfigPath} needs "compilerOptions" section`)
+        }
+
+        if (Object.keys(userAliases).length) {
+            const tsPaths = tsConfig.compilerOptions?.paths || {};
+
+            // console.log({tsPaths})            
+            let changedPaths = false;
 
+            Object.keys(userAliases).forEach((alias) => {
+                const aliasPath = userAliases[alias];
+                if(!tsPaths[alias]){
+        
+                    tsPaths[alias] = [path.relative(executionDir, aliasPath)];
+
+                    console.log({alias, x: tsPaths[alias]});
+
+                    changedPaths = true;                    
+                }
+            });
 
-        // if(!Object.keys(tsConfig['compilerOptions']).includes('paths')){
-        //     tsConfig['compilerOptions']['paths'] = {};
-        //     changed = true;
-        // }
+            if(changedPaths){
+                console.log('tspaths', tsPaths);
+                console.log(chalk.blueBright('[RWS TS CONFIG]'), 'adding user aliases as paths to project tsconfig.json');
+
+                tsConfig.compilerOptions.paths = tsPaths;
+                changed = true;
+            }
+        }
 
-        // if(!Object.keys(tsConfig['compilerOptions']['paths']).includes('@rws-framework/foundation')){
-        //     tsConfig['compilerOptions']['paths']['@rws-framework/foundation'] = [relativeFoundationPath];
-        // }
-    
 
         if (changed) {
             fs.writeFileSync(tsConfigPath, JSON.stringify(tsConfig, null, 2));
@@ -96,13 +117,13 @@ function setupTsConfig(tsConfigPath, executionDir) {
         return true;
     } catch (e) {
         const tsConfigFileContent = fs.readFileSync(tsConfigPath, 'utf-8');
-        try{            
+        try {
             console.log(chalk.blueBright('TSConfig (parsed)'), JSON.parse(tsConfigFileContent));
-        } catch (e){
+        } catch (e) {
             console.log(chalk.yellow('TSConfig (unparsed)'), tsConfigFileContent);
 
         }
-        console.log(chalk.redBright('Error in tsconfig.json:'));        
+        console.log(chalk.redBright('Error in tsconfig.json:'));
         console.error(chalk.red(e.stack));
 
         return false;

package/console.js

@@ -56,18 +56,18 @@ async function initCmd(){
     if(workspaced){    
       if(!fs.existsSync(`${executionDir}/.eslintrc.json`)){
         const rcjs = fs.readFileSync(`${moduleDir}/.setup/.eslintrc.json`, 'utf-8');
-        fs.writeFileSync(`${executionDir}/.eslintrc.json`, rcjs.replace('{{frontend_dir}}', executionDir));
+        fs.writeFile(`${executionDir}/.eslintrc.json`, rcjs.replace('{{frontend_dir}}', executionDir));
         console.log(chalk.green('RWS CLI'), 'Installed eslint base workspace config file.');
       }
     }else{
       if(!fs.existsSync(`${executionDir}/.eslintrc.json`)){
-        fs.copyFileSync(`${moduleDir}/.eslintrc.json`, `${executionDir}/.eslintrc.json`);
+        fs.copyFile(`${moduleDir}/.eslintrc.json`, `${executionDir}/.eslintrc.json`);
         console.log(chalk.green('[RWS Client]'), 'Installed eslint config file.');
       }        
     }
 
     if(!fs.existsSync(`${executionDir}/tsconfig.json`)){
-      fs.copyFileSync(`${moduleDir}/.setup/tsconfig.json`, `${executionDir}/tsconfig.json`);
+      fs.copyFile(`${moduleDir}/.setup/tsconfig.json`, `${executionDir}/tsconfig.json`);
       console.log(chalk.green('[RWS Client]'), 'Installed tsconfig.');
     }   
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.10.8",
+    "version": "2.10.10",
     "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": "*",
+        "@rws-framework/console": "^0.3.15",
         "@types/moment": "^2.13.0",
         "deepmerge": "^4.3.1",
         "dragula": "^3.7.3",
@@ -61,13 +61,14 @@
         "@types/he": "^1.2.3",
         "@types/sanitize-html": "^2.11.0",
         "@types/uuid": "^9.0.7",
-        "@typescript-eslint/parser": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",        
         "browser-sync": "^2.29.3",
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.8.1",
         "css-minimizer-webpack-plugin": "^5.0.1",
         "eslint": "^6.0.0",
         "file-loader": "^6.2.0",
+        "fork-ts-checker-webpack-plugin": "^9.0.2",
         "html-webpack-plugin": "^5.5.3",
         "loader-utils": "^3.2.1",
         "mini-css-extract-plugin": "^2.7.6",
@@ -76,6 +77,7 @@
         "raw-loader": "^4.0.2",
         "sass-loader": "^13.3.2",
         "source-map": "^0.7.4",
+        "speed-measure-webpack-plugin": "^1.5.0",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.4.4",