@rws-framework/client 2.10.8 → 2.10.9

package/cfg/build_steps/webpack/_loaders.js

@@ -1,46 +1,220 @@
 const path = require('path');
+const fs = require('fs');
+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){
+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: {
+            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,100 @@
+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 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 getBuilderOptimPlugins(BuildConfigurator, rwsFrontendConfig, tsConfigPath) {
+    const tsFork =  new ForkTsCheckerWebpackPlugin({
+        async: false,
+        typescript: {
+            configFile: tsConfigPath,
+            diagnosticOptions: {
+                semantic: true,
+                syntactic: true,
+            },
+        },
+    });
+
+
+    
+    return [
+       
+    ]
+}
+
+function addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport, tsConfigPath) {
+
+    RWS_WEBPACK_PLUGINS_BAG.add([
+        ...getDefinesPlugins(BuildConfigurator, rwsFrontendConfig, 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

@@ -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);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.10.8",
+    "version": "2.10.9",
     "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",
@@ -62,6 +62,7 @@
         "@types/sanitize-html": "^2.11.0",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/parser": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^9.0.2",
         "browser-sync": "^2.29.3",
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.8.1",