@rws-framework/client 2.8.5 → 2.9.0

package/cfg/build_steps/webpack/_aliases.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+function loadAliases(packageDir, nodeModulesPath){
+    return {
+        fs: false,
+        '@rws-framework/foundation': path.resolve(packageDir, 'foundation', 'rws-foundation.js')
+    }
+}
+
+module.exports = { loadAliases }

package/cfg/build_steps/webpack/_info.js

@@ -0,0 +1,19 @@
+const chalk = require('chalk');
+
+module.exports = {
+    start: (executionDir, tsConfigPath, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsPlugins) => {
+        console.log(chalk.green('Build started with'))
+        console.log({
+        executionDir,
+        tsConfigPath,
+        outputDir,
+        dev: isDev,
+        publicDir,
+        parted: isParted,
+        partedPrefix,
+        partedDirUrlPrefix,
+        devtool: devTools,
+        plugins: rwsPlugins
+        });
+    }
+}

package/cfg/build_steps/webpack/_loaders.js

@@ -0,0 +1,40 @@
+const path = require('path');
+
+function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath){
+  console.log(packageDir, nodeModulesPath, tsConfigPath);
+
+  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: /\.scss$/,
+        use: [                                    
+          scssLoader,
+        ],
+      },
+      {
+        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$/,  
+        ],
+      }
+  ]
+}
+
+module.exports = { getRWSLoaders }

package/cfg/build_steps/webpack/_rws_externals.js

@@ -0,0 +1,66 @@
+const fs = require('fs');
+const path = require('path');
+const tools = require('../../../_tools');
+
+const frontendRequestContextCache = [];
+
+const _defaultOpts = { 
+  _vars: {
+    packed: [],
+    ignored: [],
+    frontendRequestContextCache
+  }
+}
+
+const externals = (declaredCodeBase, nodeModules, externalOptions = _defaultOpts) => ({context, request}, callback) => {
+    let theOptions = _defaultOpts;
+
+    if(externalOptions !== null){      
+      theOptions = Object.assign(theOptions, externalOptions);
+    }
+
+    const codeBase = path.resolve(declaredCodeBase);        
+
+    const ignored = [
+      // /css-loader/,
+      /tslib/,
+      /reflect-metadata/, 
+      /\@microsoft\/fast-foundation\/.*/     
+    ]
+
+    const enforced = [
+      /entities/,      
+      /\@microsoft\/fast-foundation\/.*\/di/,
+      /\@microsoft\/fast-foundation\/.*\/foundation-element/
+    ]
+
+    const frontendDirs = [
+      codeBase,
+      __dirname
+    ];    
+
+    const inFrontendContext = frontendDirs.some(dir => context.startsWith(dir)) || 
+        externalOptions._vars.frontendRequestContextCache.some(package => context.indexOf(package.request) > -1);
+
+    const patternInContextOrRequest = pattern => pattern.test(request) || pattern.test(context);
+
+    const isIgnored = ignored.some(patternInContextOrRequest);
+    const isEnforced = enforced.some(patternInContextOrRequest);
+
+    if (isEnforced || (!isIgnored && inFrontendContext)) {      
+      if(!externalOptions._vars.packed.find(package => package.request  === request && package.context  === context)){
+        externalOptions._vars.packed.push({request, context});      
+      }
+
+      externalOptions._vars.frontendRequestContextCache.push({request, context});
+
+      //merging to output
+      return callback();
+    }
+    
+    externalOptions._vars.ignored.push({request, context});
+    //using require from node_modules
+    callback(null, false);
+  }
+
+module.exports = {rwsExternals: externals, _externalsDefaults: _defaultOpts};

package/cfg/tsconfigSetup.js

@@ -17,22 +17,19 @@ function setupTsConfig(tsConfigPath, executionDir) {
         let tsConfig = JSON.parse(tsConfigContents);
 
         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);
+        const relativeFoundationPath = path.relative(path.dirname(tsConfigPath), foundationPath);
 
-        const includedMD5 = [];
 
-        let changed = false;
+        const includedMD5 = [];
 
-        if (!tsConfig['include'].includes('src')) {
-            console.log(chalk.blueBright('[RWS TS CONFIG]'), 'adding RWS project typescript code to project tsconfig.json');
-            tsConfig['include'].unshift('src');
-            changed = true;
-        }   
+        let changed = false; 
 
         if (!Object.keys(tsConfig).includes('include')) {
             tsConfig['include'] = [];
@@ -44,7 +41,14 @@ function setupTsConfig(tsConfigPath, executionDir) {
 
                  return fs.existsSync(rwsPath.relativize(inc, executionDir))
             })
-        }     
+        }    
+        
+        
+        if (!tsConfig['include'].includes('src')) {
+            console.log(chalk.blueBright('[RWS TS CONFIG]'), 'adding RWS project typescript code to project tsconfig.json');
+            tsConfig['include'].unshift('src');
+            changed = true;
+        }  
 
         if (!Object.keys(tsConfig).includes('exclude')) {
             tsConfig['exclude'] = [];            
@@ -73,6 +77,15 @@ function setupTsConfig(tsConfigPath, executionDir) {
             changed = true;
         }      
 
+
+        // if(!Object.keys(tsConfig['compilerOptions']).includes('paths')){
+        //     tsConfig['compilerOptions']['paths'] = {};
+        //     changed = true;
+        // }
+
+        // if(!Object.keys(tsConfig['compilerOptions']['paths']).includes('@rws-framework/foundation')){
+        //     tsConfig['compilerOptions']['paths']['@rws-framework/foundation'] = [relativeFoundationPath];
+        // }
     
 
         if (changed) {
@@ -82,8 +95,15 @@ function setupTsConfig(tsConfigPath, executionDir) {
 
         return true;
     } catch (e) {
-        console.log(chalk.red('Error in tsconfig.json:'));
-        console.log(chalk.blueBright(e.message));
+        const tsConfigFileContent = fs.readFileSync(tsConfigPath, 'utf-8');
+        try{            
+            console.log(chalk.blueBright('TSConfig (parsed)'), JSON.parse(tsConfigFileContent));
+        } catch (e){
+            console.log(chalk.yellow('TSConfig (unparsed)'), tsConfigFileContent);
+
+        }
+        console.log(chalk.redBright('Error in tsconfig.json:'));        
+        console.error(chalk.red(e.stack));
 
         return false;
     }

package/foundation/index.js

@@ -0,0 +1 @@
+export * from './rws-foundation';

package/foundation/rws-foundation.d.ts

@@ -0,0 +1,8 @@
+// fast-foundation.d.ts
+import {DI, Container, Key, Registration , InterfaceSymbol} from '@microsoft/fast-foundation/dist/dts/di/di';
+import { FoundationElement, FoundationElementDefinition, FoundationElementRegistry, OverrideFoundationElementDefinition } from '@microsoft/fast-foundation/dist/dts/foundation-element/foundation-element';
+
+export { 
+    DI, Container, Key, Registration , InterfaceSymbol,
+    FoundationElement, FoundationElementDefinition, FoundationElementRegistry, OverrideFoundationElementDefinition
+}

package/foundation/rws-foundation.js

@@ -0,0 +1,8 @@
+// Extract only needed from fast-foundation
+import {DI, Container, Registration} from '@microsoft/fast-foundation/dist/esm/di/di';
+import { FoundationElement, FoundationElementRegistry } from '@microsoft/fast-foundation/dist/esm/foundation-element/foundation-element';
+
+export { 
+    DI, Container, Registration,
+    FoundationElement, FoundationElementRegistry
+}

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.8.5",
-    "main": "src/index.ts",
+    "version": "2.9.0",
+    "main": "src/index.ts",    
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
     },
@@ -31,6 +31,7 @@
         "@rws-framework/console": "*",
         "@types/moment": "^2.13.0",
         "dragula": "^3.7.3",
+        "deepmerge": "^4.3.1",
         "he": "^1.2.0",
         "json5": "^2.2.3",
         "lodash": "^4.17.21",
@@ -74,8 +75,8 @@
         "source-map": "^0.7.4",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
-        "ts-loader": "^9.4.4",
-        "html-loader": "^5.0.0",
+        "ts-loader": "^9.4.4",        
+        "raw-loader": "^4.0.2",
         "ts-node": "^10.9.1",
         "tsconfig-paths": "^4.2.0",
         "tsconfig-paths-webpack-plugin": "^4.1.0",

package/rws.webpack.config.js

@@ -1,19 +1,29 @@
 const path = require('path');
 const fs = require('fs');
 const webpack = require('webpack');
-const uglify = require('uglify-js')
+
+const { rwsPath, RWSConfigBuilder } = require('@rws-framework/console');
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const chalk = require('chalk');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
 const RWSAfterPlugin = require('./webpack/rws_after_plugin');
+
+const chalk = require('chalk');
+
 const tools = require('./_tools');
+
+const buildInfo = require('./cfg/build_steps/webpack/_info');
+const { loadAliases } = require('./cfg/build_steps/webpack/_aliases');
+const { getRWSLoaders } = require('./cfg/build_steps/webpack/_loaders');
+const { rwsExternals } = require('./cfg/build_steps/webpack/_rws_externals');
+
 const { _DEFAULT_CONFIG } = require('./cfg/_default.cfg');
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const JsMinimizerPlugin = require('terser-webpack-plugin');
+const { info } = require('console');
 
-const json5 = require('json5');
-const { rwsPath, RWSConfigBuilder } = require('@rws-framework/console');
+const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(process.cwd());
 
 const RWSWebpackWrapper = async (config) => {
   const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...config});
@@ -40,7 +50,8 @@ const RWSWebpackWrapper = async (config) => {
 
   const publicIndex = BuildConfigurator.get('publicIndex') || config.publicIndex;
 
-  const devTools = isDev ? (config.devtool || 'inline-source-map') : false;
+  const devTools = isDev ? (BuildConfigurator.get('devtool') || 'source-map') : false;
+  const devDebug = isDev ? (BuildConfigurator.get('devDebug') || config.devDebug || { build: false }) : null;
 
   const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || config.tsConfigPath, executionDir);
   const rwsPlugins = {};
@@ -54,19 +65,7 @@ const RWSWebpackWrapper = async (config) => {
 
   rwsPath.removeDirectory(outputDir, true);
 
-  console.log(chalk.green('Build started with'))
-  console.log({
-    executionDir,
-    tsConfigPath,
-    outputDir,
-    dev: isDev,
-    publicDir,
-    parted: isParted,
-    partedPrefix,
-    partedDirUrlPrefix,
-    devtool: devTools
-  });
-
+  buildInfo.start(executionDir, tsConfigPath, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, config.rwsPlugins);
 
   //AFTER OPTION DEFINITIONS
 
@@ -75,14 +74,21 @@ const RWSWebpackWrapper = async (config) => {
       'process.env._RWS_DEFAULTS': JSON.stringify(BuildConfigurator.exportDefaultConfig()),
       'process.env._RWS_BUILD_OVERRIDE': JSON.stringify(BuildConfigurator.exportBuildConfig())
     }),
-    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/)
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
+    new webpack.IgnorePlugin({
+      resourceRegExp: /.*\.es6\.js$/,
+      contextRegExp: /node_modules/
+    })
   ];
 
   const WEBPACK_AFTER_ACTIONS = config.actions || [];
+  const modules_setup = ['node_modules'];
+
+  let optimConfig = null;
+  let aliases = config.aliases = {};
+  
+  aliases = {...aliases, ...loadAliases(__dirname, path.resolve(_MAIN_PACKAGE, 'node_modules'))}
 
-  const aliases = config.aliases = {};
-  aliases.fs = false;
-  const modules_setup = [path.resolve(__dirname, 'node_modules'), 'node_modules'];
   const overridePlugins = config.plugins || []
 
   if (isHotReload) {
@@ -119,84 +125,46 @@ const RWSWebpackWrapper = async (config) => {
       type: 'copy',
       actionHandler: assetsToCopy
     });
-  }
-
-  if (WEBPACK_AFTER_ACTIONS.length) {
-    WEBPACK_PLUGINS.push(new RWSAfterPlugin({ actions: WEBPACK_AFTER_ACTIONS }));
-  }
+  } 
 
   const rwsInfoJson = outputDir + '/rws_info.json'
   const automatedEntries = {};
+  const automatedChunks = {};
 
   const foundRWSUserClasses = tools.findComponentFilesWithText(executionDir, '@RWSView', ['dist', 'node_modules', '@rws-framework/client']);
   const foundRWSClientClasses = tools.findComponentFilesWithText(__dirname, '@RWSView', ['dist', 'node_modules']);
-  let RWSComponents = [...foundRWSUserClasses, ...foundRWSClientClasses];
-
-  const optimConfig = {};
-
-  // if(!isDev){
-    optimConfig.minimize = !isDev;
-    optimConfig.minimizer = !isDev ? [
-      new TerserPlugin({
-        terserOptions: {
-          keep_classnames: true, // Prevent mangling of class names
-          mangle: false, //@error breaks FAST view stuff if enabled for all assets             
-          compress: !isDev ? {
-            dead_code: true,
-            pure_funcs: ['console.log', 'console.info', 'console.warn']
-          } : null,
-          output: {
-            comments: false
-          },
-        },
-        extractComments: false,
-        parallel: true,
-      }),
-      new CssMinimizerPlugin()      
-    ] : [
-      new TerserPlugin({
-        terserOptions: {
-          keep_classnames: true, // Prevent mangling of class names
-          mangle: false, //@error breaks FAST view stuff if enabled for all assets            
-          output: {
-            comments: false
-          },
-        },
-        extractComments: false,
-        parallel: false,
-      })
-    ]
-  // }
-  
+  let RWSComponents = [...foundRWSUserClasses, ...foundRWSClientClasses];    
 
-  if (isParted) {
-    WEBPACK_PLUGINS.push(new webpack.BannerPlugin(tools.getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix)));
+  if (partedComponentsLocations) {
+    partedComponentsLocations.forEach((componentDir) => {
+      RWSComponents = [...RWSComponents, ...(tools.findComponentFilesWithText(path.resolve(componentDir), '@RWSView', ['dist', 'node_modules', '@rws-framework/client']))];
+    });
+  }
 
-    for (const pluginKey of Object.keys(rwsPlugins)){
-      const plugin = rwsPlugins[pluginKey];
-      partedComponentsLocations = await plugin.onComponentsLocated(partedComponentsLocations);
-    }    
+  RWSComponents.forEach((fileInfo) => {
+    const isIgnored = fileInfo.isIgnored;
 
-    if (partedComponentsLocations) {
-      partedComponentsLocations.forEach((componentDir) => {
-        RWSComponents = [...RWSComponents, ...(tools.findComponentFilesWithText(path.resolve(componentDir), '@RWSView', ['dist', 'node_modules', '@rws-framework/client']))];
-      });
+    if (isIgnored === true) {
+      // console.warn('Ignored: '+ fileInfo.filePath);
+      return;
     }
- 
-    RWSComponents.forEach((fileInfo) => {
-      const isIgnored = fileInfo.isIgnored;
 
-      if (isIgnored === true) {
-        // console.warn('Ignored: '+ fileInfo.filePath);
-        return;
-      }
+    automatedEntries[fileInfo.tagName] = fileInfo.filePath;
 
-      automatedEntries[fileInfo.tagName] = fileInfo.filePath;
-    });
+    if(isParted){
+      automatedChunks[fileInfo.tagName] = fileInfo.filePath;
+    }
+  });
 
-    fs.writeFileSync(rwsInfoJson, JSON.stringify({ components: Object.keys(automatedEntries) }, null, 2));
+  if (isParted) {
+    WEBPACK_PLUGINS.push(new webpack.BannerPlugin(tools.getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix)));
 
-    optimConfig.splitChunks = {
+    for (const pluginKey of Object.keys(rwsPlugins)){
+      const plugin = rwsPlugins[pluginKey];
+      partedComponentsLocations = await plugin.onComponentsLocated(partedComponentsLocations);
+    }
+    
+    optimConfig = { splitChunks: {
       cacheGroups: {
         vendor: {
           test: (module) => {
@@ -221,24 +189,94 @@ const RWSWebpackWrapper = async (config) => {
           chunks: 'all',
         }
       }
-    };
+    } };
   }
 
+  fs.writeFileSync(rwsInfoJson, JSON.stringify({ components: Object.keys(automatedEntries) }, null, 2));
+
   const tsValidated = tools.setupTsConfig(tsConfigPath, executionDir);
 
   if (!tsValidated) {
     throw new Error('RWS Webpack build failed.');
   }  
 
+
+    
+  if(!isDev){
+    if(!optimConfig){
+      optimConfig = {};
+    }
+
+    optimConfig = {
+      ...optimConfig,
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            keep_classnames: true, // Prevent mangling of class names
+            mangle: false, //@error breaks FAST view stuff if enabled for all assets              
+            compress: !isDev ? {
+              dead_code: true,
+              pure_funcs:  ['console.log', 'console.info', 'console.warn']
+            } : null,
+            output: {
+              comments: false,
+              beautify: isDev
+            },
+          },        
+          extractComments: false,
+          parallel: true,
+        }),
+        new CssMinimizerPlugin({
+          minimizerOptions: {
+            preset: ['default', {
+              discardComments: { removeAll: false },
+            }],
+          },
+        })      
+      ]
+    };
+  }
+
+  const devExternalsVars = {
+    packed: [],
+    ignored: [],
+    frontendRequestContextCache: []
+  }
+
+  if(devDebug?.build){
+    const debugDir = path.join(executionDir, '.debug');
+
+    if(!fs.existsSync(debugDir)){
+      fs.mkdirSync(debugDir)
+    }
+
+    WEBPACK_AFTER_ACTIONS.push({
+      type: 'custom',
+      actionHandler: () => {        
+        fs.writeFileSync(path.join(debugDir, 'ignored.json'), JSON.stringify(devExternalsVars.ignored, null, 2));
+        fs.writeFileSync(path.join(debugDir, 'packed.json'), JSON.stringify(devExternalsVars.packed, null, 2));
+        fs.writeFileSync(path.join(debugDir, 'requestcache.json'), JSON.stringify(devExternalsVars.frontendRequestContextCache, null, 2));
+
+        console.log(chalk.yellow('[RWS BUILD] (after)'), `saved in: ${debugDir}/(ignored/packed/requestcache).json`);
+      }
+    });
+  }
+
+  if (WEBPACK_AFTER_ACTIONS.length) {
+    WEBPACK_PLUGINS.push(new RWSAfterPlugin({ actions: WEBPACK_AFTER_ACTIONS, dev: isDev }));
+  }
+
+
   let cfgExport = {  
     context: executionDir,  
     entry: {
       client: config.entry,
-      ...automatedEntries
+      ...automatedChunks
     },
     mode: isDev ? 'development' : 'production',
     target: 'web',
-    devtool: devTools,
+    devtool: devTools,    
     output: {
       path: outputDir,
       filename: isParted ? (partedPrefix || 'rws') + '.[name].js' : outputFileName,
@@ -252,61 +290,17 @@ const RWSWebpackWrapper = async (config) => {
       }
     },
     module: {
-      rules: [    
-        {
-          test: /\.html$/,
-          use: [
-            {
-              loader: 'html-loader'
-            },
-            path.resolve(__dirname, './webpack/loaders/rws_fast_html_loader.js')
-          ],
-        },
-        {
-          test: /\.css$/,
-          use: [
-            'css-loader',            
-          ],
-        },        
-        {
-          test: /\.scss$/,
-          use: [                                    
-            path.resolve(__dirname, './webpack/loaders/rws_fast_scss_loader.js'),
-          ],
-        },
-        {
-          test: /\.(ts)$/,
-          use: [
-            {
-              loader: 'ts-loader',
-              options: {
-                allowTsInNodeModules: true,
-                configFile: path.resolve(tsConfigPath)
-              }
-            },
-            {
-              loader: path.resolve(__dirname, './webpack/loaders/rws_fast_ts_loader.js'),
-            }            
-          ],
-          exclude: [
-            /node_modules\/(?!\@rws-framework\/[A-Z0-9a-z])/,
-            /\.debug\.ts$/,  
-          ],
-        }
-      ],
+      rules: getRWSLoaders(__dirname, path.resolve(config.packageDir, 'node_modules'), tsConfigPath),
     },
-    plugins: WEBPACK_PLUGINS,
-    optimization: optimConfig,
+    plugins: WEBPACK_PLUGINS,    
+    externals: rwsExternals(executionDir, modules_setup, {
+      _vars: devExternalsVars
+    })
   }
 
-  // if(isDev){
-    // cfgExport.module.rules.push({
-    //   test: /\.js$/,
-    //   use: [
-    //     path.resolve(__dirname, './webpack/loaders/rws_uncomments_loader.js'),                 
-    //   ],
-    // })
-  // }
+  if(optimConfig){
+    cfgExport.optimization = optimConfig;
+  }
 
   if (isHotReload) {
     cfgExport.devServer = {
@@ -318,7 +312,7 @@ const RWSWebpackWrapper = async (config) => {
   for (const pluginKey of Object.keys(rwsPlugins)){
     const plugin = rwsPlugins[pluginKey];
     cfgExport = await plugin.onBuild(cfgExport);
-  }
+  }  
 
   return cfgExport;
 }

package/service_worker/src/_service_worker.ts

@@ -2,7 +2,7 @@ import IRWSUser from '../../src/types/IRWSUser';
 import RWSContainer from '../../src/components/_container';
 
 //@4DI
-import { Container } from '@microsoft/fast-foundation';
+import { Container } from '../../src/components/_container';
 
 type SWMsgType = {
     command: string,