@rws-framework/client 2.1.8 → 2.2.0

package/_tools.js

@@ -303,6 +303,32 @@ function extractComponentInfo(componentCode) {
   return {...decoratorArgs, options: decoratorOpts };
 }
 
+function getAllFilesInFolder(folderPath, ignoreFilenames = [], recursive = false) {
+  const files = [];
+  function traverseDirectory(currentPath) {
+      const entries = fs.readdirSync(currentPath, { withFileTypes: true });
+      entries.forEach(entry => {
+          const entryPath = path.join(currentPath, entry.name);
+          if (entry.isFile()) {
+              let pass = true;
+              ignoreFilenames.forEach((regEx) => {
+                  if (regEx.test(entryPath)) {
+                      pass = false;
+                  }
+              });
+              if (pass) {
+                  files.push(entryPath);
+              }
+          }
+          else if (entry.isDirectory() && recursive) {
+              traverseDirectory(entryPath);
+          }
+      });
+  }
+  traverseDirectory(folderPath);
+  return files;
+}
+
 module.exports = {
     findRootWorkspacePath,
     findPackageDir,
@@ -313,5 +339,6 @@ module.exports = {
     extractRWSViewArguments,
     extractRWSIgnoreArguments,
     findServiceFilesWithClassExtend,
-    findSuperclassFilePath
+    findSuperclassFilePath,
+    getAllFilesInFolder
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rws-framework/client",
   "private": false,
-  "version": "2.1.8",
+  "version": "2.2.0",
   "main": "src/index.ts",
   "scripts": {
     "docs": "typedoc --tsconfig ./tsconfig.json"

package/rws.webpack.config.js

@@ -11,6 +11,9 @@ const { Console } = require('console');
 const { Interface } = require('readline');
 const ts = require('typescript');
 const tools = require('./_tools');
+const TerserPlugin = require('terser-webpack-plugin');
+const HtmlMinifier = require('html-minifier').minify;
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 let WEBPACK_PLUGINS = [];
 
@@ -82,18 +85,18 @@ const RWSWebpackWrapper = (config) => {
     }));
   }
 
-  if(serviceWorkerPath){  
+  if (serviceWorkerPath) {
     WEBPACK_AFTER_ACTIONS.push({
       type: 'service_worker',
       actionHandler: serviceWorkerPath
-    });      
+    });
   }
 
-  if(!!config.copyToDir){      
+  if (!!config.copyToDir) {
     WEBPACK_AFTER_ACTIONS.push({
       type: 'copy',
       actionHandler: config.copyToDir
-    });  
+    });
   }
 
   if (WEBPACK_AFTER_ACTIONS.length) {
@@ -114,45 +117,59 @@ const RWSWebpackWrapper = (config) => {
     path.resolve(executionDir, 'src', 'services')
   ];
 
-  if (config.customServiceLocations) {      
-    config.customServiceLocations.forEach((serviceDir) => {        
+  if (config.customServiceLocations) {
+    config.customServiceLocations.forEach((serviceDir) => {
       servicesLocations.push(serviceDir);
-    });      
+    });
   }
 
   const optimConfig = {
-    minimizer: [
-      new JsMinimizerPlugin(),
-      new CssMinimizerPlugin()
+    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: {
+            dead_code: true,
+            pure_funcs: ['console.log', 'console.info', 'console.warn']
+          },
+          output: {
+            comments: false
+          },          
+        },
+        extractComments: false
+      }),
+      new CssMinimizerPlugin(),
+
     ],
   };
 
   if (config.parted) {
-    if (config.partedComponentsLocations) {      
-      config.partedComponentsLocations.forEach((componentDir) => {        
+    if (config.partedComponentsLocations) {
+      config.partedComponentsLocations.forEach((componentDir) => {
         RWSComponents = [...RWSComponents, ...(tools.findComponentFilesWithText(path.resolve(componentDir), '@RWSView', ['dist', 'node_modules', '@rws-framework/client']))];
-      });      
+      });
     }
-    
-    RWSComponents.forEach((fileInfo) => {              
-      const isIgnored = fileInfo.isIgnored;             
 
-      if(isIgnored === true){
+    RWSComponents.forEach((fileInfo) => {
+      const isIgnored = fileInfo.isIgnored;
+
+      if (isIgnored === true) {
         // console.warn('Ignored: '+ fileInfo.filePath);
         return;
       }
 
-      automatedEntries[fileInfo.sanitName] = fileInfo.filePath;    
-    });        
+      automatedEntries[fileInfo.sanitName] = fileInfo.filePath;
+    });
 
-    fs.writeFileSync(splitInfoJson, JSON.stringify(Object.keys(automatedEntries), null, 2));    
+    fs.writeFileSync(splitInfoJson, JSON.stringify(Object.keys(automatedEntries), null, 2));
     optimConfig.splitChunks = {
       cacheGroups: {
         vendor: {
           test: (module) => {
             let importString = module.identifier();
 
-            if(importString.split('!').length > 2){
+            if (importString.split('!').length > 2) {
               importString = importString.split('!')[2];
             }
 
@@ -162,30 +179,30 @@ const RWSWebpackWrapper = (config) => {
             const inExecDir = importString.indexOf(executionDir) > -1;
             const isNoPartedComponent = !Object.keys(automatedEntries).find(key => importString.indexOf(path.resolve(path.dirname(automatedEntries[key]))) > -1);
 
-            let isAvailableForVendors = (inNodeModules || inVendorPackage) && isNoPartedComponent;              
+            let isAvailableForVendors = (inNodeModules || inVendorPackage) && isNoPartedComponent;
 
 
             return isAvailableForVendors;
           },
           name: 'vendors',
           chunks: 'all',
-        }   
+        }
       }
-    };       
-  }else{
-    if(fs.existsSync(splitInfoJson)){
+    };
+  } else {
+    if (fs.existsSync(splitInfoJson)) {
       fs.unlinkSync(splitInfoJson);
     }
-  }  
-  
+  }
+
   const cfgExport = {
-    entry: {      
-      client: config.entry,  
-      ...automatedEntries  
+    entry: {
+      client: config.entry,
+      ...automatedEntries
     },
     mode: isDev ? 'development' : 'production',
     target: 'web',
-    devtool: config.devtool || 'inline-source-map',
+    devtool: isDev ? (config.devtool || 'inline-source-map') : false,
     output: {
       path: config.outputDir,
       filename: config.parted ? (config.partedPrefix || 'rws') + '.[name].js' : config.outputFileName,
@@ -200,7 +217,7 @@ const RWSWebpackWrapper = (config) => {
       plugins: [
         // new TsconfigPathsPlugin({configFile: config.tsConfigPath})
       ]
-    },   
+    },
     module: {
       rules: [
         {

package/src/services/WSService.ts

@@ -18,7 +18,7 @@ type WSStatus = 'WS_OPEN' | 'WS_CLOSED' | 'WS_CONNECTING';
 
 const  wsLog = async (fakeError: Error, text: any, socketId: string = null, isError: boolean = false): Promise<void> => {  
     const logit = isError ? console.error : console.log;
-    logit(`[webpack://junction_ai_trainer_ui/${module.id.replace('./', '')}:`, `<WS-CLIENT>${socketId ? `(${socketId})` : ''}`, text);
+    logit(`<WS-CLIENT>${socketId ? `(${socketId})` : ''}`, text);
 };
 
 class WSService extends TheService {

package/webpack/rws_fast_scss_loader.js

@@ -7,6 +7,10 @@ module.exports = function(content) {
     const plugin = new RWSPlugin();
     const filePath = this.resourcePath;
 
+    const options = this.getOptions() || { minify: false };
+
+    const isDev = this._compiler.options.dev;
+
     const saveFile = content.indexOf('@save') > -1;  
     let fromTs = false;
 
@@ -15,16 +19,18 @@ module.exports = function(content) {
     }
 
     try {
-        const code = plugin.compileScssCode(content, path.dirname(filePath), null, filePath);        
+        const code = plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);        
 
         if (fromTs) {
             if (saveFile && code) {
-                plugin.writeCssFile(filePath, code);        
+                plugin.writeCssFile(filePath, code); 
+                
+                const newContext = this;
 
                 // Properly setup the context for css-loader
                 const loaderContext = {
-                    ...this,
-                    query: { sourceMap: true }, // Assuming you want source maps
+                    ...newContext,                              
+                    query: { sourceMap: isDev }, 
                     async: () => (err, output) => {
                         if (err) {
                             callback(err);

package/webpack/rws_fast_ts_loader.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const ts = require('typescript');
 const tools = require('../_tools');
 const RWSPlugin = require("./rws_plugin");
+const htmlMinify = require('html-minifier').minify;
 
 const _defaultRWSLoaderOptions = {
     templatePath: 'template.html',
@@ -28,14 +29,12 @@ function toJsonString(str) {
     }
 }
 
-module.exports = function(content) { 
-    
+module.exports = async function(content) {    
     let processedContent = content;
     const filePath = this.resourcePath;
-    const options = this.getOptions() || {};
-    const tsConfigPath = options.tsConfigPath || path.resolve(process.cwd(), 'tsconfig.json');
-    const regex = /@RWSView/;
+    const isDev = this._compiler.options.dev;
 
+    const regex = /@RWSView/;
     const tsSourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
 
     let templatePath = 'template.html';
@@ -78,7 +77,7 @@ module.exports = function(content) {
         if(tagName){           
                         
             const lines = content.split('\n');
-            const textToInsert = `  static definition = { name: '${tagName}', template, styles${addedParams.length? ', ' + (addedParams.join(', ')) : ''} };`;
+            const textToInsert = `static definition = { name: '${tagName}', template, styles${addedParams.length? ', ' + (addedParams.join(', ')) : ''} };`;
 
             let modifiedContent = '';
             let insertIndex = -1;
@@ -101,10 +100,7 @@ module.exports = function(content) {
             let styles = 'const styles: null = null;'
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
-                // const scssCode = fs.readFileSync(path.dirname(filePath) + '/styles/layout.scss', 'utf-8');
-                // styles = 'const styles = T.css`' + plugin.compileScssCode(scssCode, path.dirname(filePath) + '/styles') + '`;'
-
-                styles = `import styles from './${stylesPath}'`;
+                styles = `import styles from './${stylesPath}';`;
             }
             
             const templateName = 'template';
@@ -115,24 +111,32 @@ module.exports = function(content) {
             if(templateExists){
                 this.addDependency(templatePath);
 
-                template = `import './${templateName}.html';\nconst template: any = T.html\`${fs.readFileSync(templatePath, 'utf-8')}\`;`;
+                let htmlContent = fs.readFileSync(templatePath, 'utf-8');
+
+                // try {
+                //     htmlContent = await htmlMinify(htmlContent, {
+                //         collapseWhitespace: true,     
+                //     });
+                // } catch(e){
+                //     console.error(e);
+                // }
+
+                template = `import './${templateName}.html';
+                //@ts-ignore            
+                const template: any = T.html\`${htmlContent}\`;`;
             }
 
-            processedContent = ` 
-            import * as T from '@microsoft/fast-element';\n           
-            ${template}\n
-            ${styles}\n
-            ${addedParamDefs.join('\n')}
-            \n      
-            ` + replaced;                   
+            processedContent = `import * as T from '@microsoft/fast-element';\n${template}\n${styles}\n${addedParamDefs.join('\n')}\n` + replaced;
         }
+
+        // fs.writeFileSync(__dirname + '/../node_modules/.compiledev/' + decoratorData.tagName.replace('-', '_') + '.ts', processedContent); //for final RWS TS preview.
       
         return processedContent;
 
     }catch(e){
         console.error(e);
         console.warn('IN:\n\n');
-        console.log(processedContent);
+        // console.log(processedContent);
 
         return content;
     }

package/webpack/rws_plugin.js

@@ -288,7 +288,7 @@ class RWSPlugin {
     return scssPath;
   }
 
-  compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null){    
+  compileScssCode(scssCode, fileRootDir, createFile = false, filePath = null, minify = false){
     const _self = this;                  
       const [scssImports] = this.extractScssImports(scssCode);                         
 
@@ -310,7 +310,7 @@ class RWSPlugin {
 
       try {
 
-        const result = sass.compileString(scssCode, { loadPaths: [fileRootDir] })
+        const result = sass.compileString(scssCode, { loadPaths: [fileRootDir], style: minify ? 'compressed' : 'expanded' });
         let finalCss = result.css;               
 
         return finalCss;