@rws-framework/client 2.2.1 → 2.3.0

package/_rws_build_configurator.d.ts

@@ -0,0 +1,12 @@
+declare const _DEFAULT_CONFIG: any;
+
+declare function readConfigFile(filePath: string): any;
+declare function get(key: string): any;
+declare function exportConfig(): any;
+
+export {
+    readConfigFile,
+    get,
+    exportConfig,
+    _DEFAULT_CONFIG
+};

package/_rws_build_configurator.js

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const json5 = require('json5');
+
+const _DEFAULT_CONFIG = require('./cfg/_default.cfg')._DEFAULT_CONFIG;
+const STORAGE = require('./cfg/_storage');
+
+
+function readConfigFile(filePath){
+    if(!fs.existsSync(filePath)){
+        return _DEFAULT_CONFIG;
+    }
+
+    const fileConfig = json5.parse(fs.readFileSync(filePath, 'utf-8'));
+
+    return {
+        ..._DEFAULT_CONFIG,
+        ...fileConfig
+    }
+}
+
+function get(key){
+    _init();
+
+    return STORAGE.get(key);
+}
+
+function exportConfig(){
+    _init();
+
+    return STORAGE.getAll();
+}
+
+function _init(){
+    if(!STORAGE.isLoaded()){
+        STORAGE.init(readConfigFile(process.cwd() + '/.rws.json'))        
+    }
+}
+
+module.exports = {
+    readConfigFile,
+    exportConfig,
+    get,
+    _DEFAULT_CONFIG
+};

package/cfg/_default.cfg.js

@@ -0,0 +1,23 @@
+const _DEFAULT_CONFIG_VARS = {
+    //Build configs
+    dev: false,
+    hot: false,
+    report: false,   
+    publicDir: './public',
+    publicIndex: 'index.html',      
+    outputFileName: 'client.rws.js',
+    outputDir: './build',
+    //Frontend RWS client configs  
+    backendUrl: null,
+    wsUrl: null,
+    partedDirUrlPrefix: '/lib/rws',
+    partedPrefix: 'rws',
+    pubUrlFilePrefix: '/',
+    //Universal configs
+    transports: ['websocket'],    
+    parted: true,        
+}
+
+const _DEFAULT_CONFIG = Object.freeze(_DEFAULT_CONFIG_VARS);
+
+module.exports = {_DEFAULT_CONFIG};

package/cfg/_storage.d.ts

@@ -0,0 +1,22 @@
+interface Storage {
+    _loaded: boolean;
+    data: {
+        [key: string]: any;
+    };
+}
+
+declare const _STORAGE: Readonly<Storage>;
+
+declare function get(key: string): any | null;
+declare function getAll(): any;
+declare function init(json: any): void;
+declare function has(key: string): boolean;
+declare function isLoaded(): boolean;
+
+export {
+    get,
+    getAll,
+    has,
+    init,
+    isLoaded
+};

package/cfg/_storage.js

@@ -0,0 +1,43 @@
+class Storage {
+    static _instance;
+
+    _loaded = false;
+    data = {}
+
+    static create(){
+        if(!this._instance){
+            this._instance = new Storage();            
+        }
+
+        return this._instance;
+    }
+}
+
+const _STORAGE = Storage.create();
+
+function get(key){
+    if(!has(key)){
+        return null;
+    }
+
+    return _STORAGE.data[key];
+}
+
+function getAll(){    
+    return _STORAGE.data;
+}
+
+function init(json){    
+    _STORAGE.data = json;    
+    _STORAGE._loaded = true;
+}
+
+function has(key){
+    return Object.keys(_STORAGE.data).includes(key);
+}
+
+function isLoaded(){
+    return _STORAGE._loaded;
+}
+
+module.exports = {get, getAll, has, init, isLoaded}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rws-framework/client",
   "private": false,
-  "version": "2.2.1",
+  "version": "2.3.0",
   "main": "src/index.ts",
   "scripts": {
     "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -59,6 +59,7 @@
     "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "dts-bundle": "^0.7.3",

package/rws.webpack.config.js

@@ -1,68 +1,66 @@
 const path = require('path');
-const webpack = require('webpack');
 const fs = require('fs');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const JsMinimizerPlugin = require('terser-webpack-plugin');
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const webpack = require('webpack');
+const uglify = require('uglify-js')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
 const RWSAfterPlugin = require('./webpack/rws_after_plugin');
-const { Console } = require('console');
-const { Interface } = require('readline');
-const ts = require('typescript');
 const tools = require('./_tools');
+const BuildConfigurator = require('./_rws_build_configurator');
+
 const TerserPlugin = require('terser-webpack-plugin');
 const HtmlMinifier = require('html-minifier').minify;
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-
-let WEBPACK_PLUGINS = [];
-
-/**
- *  The RWS webpack configurator.
- * 
- *  Example usage in importing file:
- * 
- *  RWSWebpackWrapper({
-    dev: true,
-    hot: false,
-    tsConfigPath: executionDir + '/tsconfig.json',
-    entry: `${executionDir}/src/index.ts`,
-    executionDir: executionDir,
-    publicDir:  path.resolve(executionDir, 'public'),
-    outputDir:  path.resolve(executionDir, 'build'),
-    outputFileName: 'jtrainer.client.js',
-    copyToDir: {
-      '../public/js/' : [
-        './build/jtrainer.client.js',
-        './build/jtrainer.client.js.map',
-        './src/styles/compiled/main.css'
-      ]
-    },
-    plugins: [
-    
-    ],
-  });
- */
-const RWSWebpackWrapper = (config) => {
-  const executionDir = config.executionDir || process.cwd();
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const JsMinimizerPlugin = require('terser-webpack-plugin');
 
-  const isDev = config.dev;
-  const isHotReload = config.hot;
-  const isReport = config.report;
+const json5 = require('json5');
 
-  const publicDir = config.publicDir || null;
-  const serviceWorkerPath = config.serviceWorker || null;
 
-  const WEBPACK_AFTER_ACTIONS = config.actions || [];
+const RWSWebpackWrapper = (config) => {
+const executionDir = config.executionDir || process.cwd();
+
+const isDev = BuildConfigurator.get('dev') || config.dev;
+const isHotReload = BuildConfigurator.get('hot') || config.hot;
+const isReport = BuildConfigurator.get('report') || config.report;
+
+const isParted = BuildConfigurator.get('parted') || config.parted;
+const partedPrefix = BuildConfigurator.get('partedPrefix') || config.partedPrefix;
+const partedDirUrlPrefix = BuildConfigurator.get('partedDirUrlPrefix') || config.partedDirUrlPrefix;
+
+const partedComponentsLocations = BuildConfigurator.get('partedComponentsLocations') || config.partedComponentsLocations;
+const customServiceLocations = BuildConfigurator.get('customServiceLocations') || config.customServiceLocations;
+const outputDir = BuildConfigurator.get('outputDir') || config.outputDir;
+const outputFileName = BuildConfigurator.get('outputFileName') || config.outputFileName;
+const publicDir = BuildConfigurator.get('publicDir') || config.publicDir;
+const serviceWorkerPath = BuildConfigurator.get('serviceWorker') || config.serviceWorker;
+
+const publicIndex = BuildConfigurator.get('publicIndex') || config.publicIndex;
+
+
+  let WEBPACK_PLUGINS = [
+    new webpack.DefinePlugin({
+      'process.env._RWS_DEFAULTS': JSON.stringify(BuildConfigurator.exportConfig())
+    }),
+    new webpack.BannerPlugin({
+      banner: `if(!window.RWS){         
+        const script = document.createElement('script');
+        script.src = '${partedDirUrlPrefix}/${partedPrefix}.vendors.js';        
+        script.type = 'text/javascript';
+        document.body.appendChild(script);
+      }`.replace('\n', ''),
+      raw: true,
+      entryOnly: true,
+      // include: 'client'
+    }),
+    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/)
+  ];
 
-  const publicIndex = config.publicIndex || 'index.html';
+  const WEBPACK_AFTER_ACTIONS = config.actions || [];
 
   const aliases = config.aliases = {};
-
   aliases.fs = false;
-
   const modules_setup = [path.resolve(__dirname, 'node_modules'), 'node_modules'];
-
   const overridePlugins = config.plugins || []
 
   if (isHotReload) {
@@ -78,7 +76,7 @@ const RWSWebpackWrapper = (config) => {
   WEBPACK_PLUGINS = [...WEBPACK_PLUGINS, new webpack.optimize.ModuleConcatenationPlugin(), ...overridePlugins];
 
 
-  if (isDev && isReport) {
+  if (isReport) {
     WEBPACK_PLUGINS.push(new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       openAnalyzer: false,
@@ -92,10 +90,12 @@ const RWSWebpackWrapper = (config) => {
     });
   }
 
-  if (!!config.copyToDir) {
+  const assetsToCopy = config.copyAssets || BuildConfigurator.get('copyAssets');
+
+  if (!!assetsToCopy) {
     WEBPACK_AFTER_ACTIONS.push({
       type: 'copy',
-      actionHandler: config.copyToDir
+      actionHandler: assetsToCopy
     });
   }
 
@@ -117,13 +117,14 @@ const RWSWebpackWrapper = (config) => {
     path.resolve(executionDir, 'src', 'services')
   ];
 
-  if (config.customServiceLocations) {
-    config.customServiceLocations.forEach((serviceDir) => {
+  if (customServiceLocations) {
+    customServiceLocations.forEach((serviceDir) => {
       servicesLocations.push(serviceDir);
     });
   }
 
   const optimConfig = {
+    minimize: true,
     minimizer: isDev ? [] : [
       new TerserPlugin({   
         terserOptions: {
@@ -137,16 +138,16 @@ const RWSWebpackWrapper = (config) => {
             comments: false
           },          
         },
-        extractComments: false
+        extractComments: false,
+        parallel: true,
       }),
       new CssMinimizerPlugin(),
-
     ],
   };
 
-  if (config.parted) {
-    if (config.partedComponentsLocations) {
-      config.partedComponentsLocations.forEach((componentDir) => {
+  if (isParted) {
+    if (partedComponentsLocations) {
+      partedComponentsLocations.forEach((componentDir) => {
         RWSComponents = [...RWSComponents, ...(tools.findComponentFilesWithText(path.resolve(componentDir), '@RWSView', ['dist', 'node_modules', '@rws-framework/client']))];
       });
     }
@@ -204,8 +205,8 @@ const RWSWebpackWrapper = (config) => {
     target: 'web',
     devtool: isDev ? (config.devtool || 'inline-source-map') : false,
     output: {
-      path: config.outputDir,
-      filename: config.parted ? (config.partedPrefix || 'rws') + '.[name].js' : config.outputFileName,
+      path: outputDir,
+      filename: isParted ? (partedPrefix || 'rws') + '.[name].js' : outputFileName,
       sourceMapFilename: '[file].map',
     },
     resolve: {

package/src/client.ts

@@ -39,7 +39,7 @@ class RWSClient {
     private _container: Container;
     private user: IRWSUser = null;
 
-    private config: IRWSConfig = { backendUrl: '', routes: {}, splitFileDir: '/', splitPrefix: 'rws' };
+    private config: IRWSConfig = { backendUrl: '', routes: {}, partedFileDir: '/', partedPrefix: 'rws' };
     protected initCallback: () => Promise<void> = async () => { };
 
     private isSetup = false;
@@ -106,9 +106,7 @@ class RWSClient {
 
         if (Object.keys(config).length) {
             this.appConfig.mergeConfig(this.config);
-        }
-
-        console.log(this.isSetup, this.config, this.appConfig);
+        }        
 
         if (this.config.user && !this.config.dontPushToSW) {
             this.pushUserToServiceWorker(this.user);
@@ -116,6 +114,8 @@ class RWSClient {
 
         await startClient(this.appConfig, this.wsService, this.notifyService, this.routingService);
 
+        RWSClient.defineAllComponents();
+
         await this.initCallback();
 
         return this;
@@ -223,35 +223,17 @@ class RWSClient {
     async loadPartedComponents(): Promise<void> {
         this.assignClientToBrowser();
 
-        const componentParts: string[] = await this.apiService.get<string[]>(this.appConfig.get('splitFileDir') + '/rws_chunks_info.json');
-
-        const _all: Promise<string>[] = [];
-        componentParts.forEach((componentName: string) => {
-
-            const scriptUrl: string = this.appConfig.get('splitFileDir') + `/${this.appConfig.get('splitPrefix')}.${componentName}.js`;  // Replace with the path to your script file
-
-
+        const componentParts: string[] = await this.apiService.get<string[]>(this.appConfig.get('partedDirUrlPrefix') + '/rws_chunks_info.json');        
 
-            const headers: any = {};
-
-            headers['Content-Type'] = 'application/javascript';
-
-            _all.push(this.apiService.pureGet(scriptUrl, {
-                headers
-            }));
-        });
-
-        (await Promise.all(_all)).forEach((scriptCnt: string, key: number) => {
+        componentParts.forEach((componentName: string, key: number) => {
             const script: HTMLScriptElement = document.createElement('script');
-            script.textContent = scriptCnt;
+            script.src = `${this.appConfig.get('partedDirUrlPrefix')}/${this.appConfig.get('partedPrefix')}.${componentName}.js`;
             script.async = true;
             script.type = 'text/javascript';
             document.body.appendChild(script);
 
             console.log(`Appended ${componentParts[key]} component`);
-        });
-
-        RWSClient.defineAllComponents();
+        });        
     }   
     
     async onDOMLoad(): Promise<void> {
@@ -290,9 +272,7 @@ class RWSClient {
 
     static defineAllComponents() {
         const richWindowComponents: RWSWindowComponentRegister = (window as Window & RWSWindow).RWS.components;
-        // provideRWSDesignSystem().register(richWindowComponents[devStr].component);
-
-        console.log(richWindowComponents);
+        
         Object.keys(richWindowComponents).map(key => richWindowComponents[key].component).forEach((el: IWithCompose<RWSViewComponent>) => {
             el.define(el as any, el.definition);
         });

package/src/components/_component.ts

@@ -81,7 +81,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
                 if (this.fileAssets[file]) {
                     return;
                 }
-                this.utilsService.getFileContents(this.config.get('pubPrefix') + file).then((response: string) => {
+                this.utilsService.getFileContents(this.config.get('pubUrlFilePrefix') + file).then((response: string) => {
                     this.fileAssets = { ...this.fileAssets, [file]: html`${response}` };
                 });
             });

package/src/components/_decorators/RWSFillBuild.ts

@@ -0,0 +1,43 @@
+import 'reflect-metadata';
+import IRWSConfig from '../../interfaces/IRWSConfig.js';
+
+
+function RWSFillBuild(config?: Partial<IRWSConfig>) {
+    return function <T extends { new(...args: any[]): {} }>(constructor: T) {
+        return class extends constructor {
+            _DEFAULTS: IRWSConfig;
+            constructor(...args: any[]) {
+                super(...args);
+
+                const extractedDefaults = JSON.parse(JSON.stringify(process.env._RWS_DEFAULTS));                                  
+
+                const {   
+                    backendUrl,
+                    wsUrl,
+                    partedDirUrlPrefix,
+                    partedPrefix,
+                    pubUrlFilePrefix,
+                    transports,    
+                    parted        
+                } = extractedDefaults;
+
+                const extractedFrontendDefaults = {
+                    backendUrl,
+                    wsUrl,
+                    partedDirUrlPrefix,
+                    partedPrefix,
+                    pubUrlFilePrefix,
+                    transports,    
+                    parted
+                };
+
+                this._DEFAULTS = {
+                    ...config,
+                    ...extractedFrontendDefaults
+                };             
+            }
+        };
+    };
+}
+
+export { RWSFillBuild }

package/src/components/index.ts

@@ -3,12 +3,6 @@ import { RouterComponent } from './router/component';
 import { RWSProgress } from './progress/component';
 import { RWSLoader } from './loader/component';
 
-const RWSComponents = { 
-    RWSUploader,
-    RouterComponent,
-    RWSProgress,
-    RWSLoader
-};
 
 function declareRWSComponents(parted: boolean = false): void
 {
@@ -20,4 +14,4 @@ function declareRWSComponents(parted: boolean = false): void
     }
 }
 
-export { RWSComponents, declareRWSComponents };
+export { declareRWSComponents };

package/src/index.ts

@@ -29,7 +29,7 @@ import {
 
 import { RWSDecoratorOptions, RWSIgnore, RWSView, RWSInject } from './components/_decorator';
 
-import { RWSComponents, declareRWSComponents } from './components';
+import { declareRWSComponents } from './components';
 
 export default RWSClient;
 export { 
@@ -82,8 +82,6 @@ export {
     ngAttr,    
 
     renderRouteComponent,
-    
-    RWSComponents,
 
     observable,
     attr,

package/src/interfaces/IRWSConfig.ts

@@ -12,11 +12,12 @@ export default interface IRWSConfig {
     user?: any
     ignoreRWSComponents?: boolean
     pubUrl?: string
-    pubPrefix?: string
+    pubUrlFilePrefix?: string
+    partedDirUrlPrefix?: string
     dontPushToSW?: boolean
     parted?: boolean
-    splitFileDir?: string
-    splitPrefix?: string
+    partedFileDir?: string
+    partedPrefix?: string
     routing_enabled?: boolean
     _noLoad?: boolean    
 }

package/src/services/ConfigService.ts

@@ -1,35 +1,40 @@
 import TheService from './_service';
 import IRWSConfig from '../interfaces/IRWSConfig';
+import { RWSFillBuild } from '../components/_decorators/RWSFillBuild';
+
 
 
-const _DEFAULTS: {[property: string]: any} = {
-    pubPrefix: '/',
-    pubUrl : window.origin,
-    splitFileDir: '/',
-    splitPrefix: 'rws'
-}
 
 const __SENT_TO_COMPONENTS: string[] = [];
 
+@RWSFillBuild({
+    pubUrlFilePrefix: '/',
+    pubUrl: window.origin,
+    partedFileDir: '/',
+    partedPrefix: 'rws',
+})
 class ConfigService extends TheService {  
     static isLoaded: boolean = false;
-
+    _DEFAULTS: any = null;
     private data: IRWSConfig = {};    
   
     constructor() {
-        super();                     
+        super();       
     }    
   
     public get(key: keyof IRWSConfig): any
-    {     
-        
+    {         
+        if(!this._DEFAULTS){
+            throw new Error('No _DEFAULTS loaded!')
+        }        
+
         const isInData: boolean = Object.keys(this.data).includes(key);
-        const isInDefaults: boolean = Object.keys(_DEFAULTS).includes(key);
+        const isInDefaults: boolean = Object.keys(this._DEFAULTS).includes(key);
 
         if(!isInData && isInDefaults){
-            let defaultVal = _DEFAULTS[key];        
-
-            if(defaultVal[0] === '@'){
+            let defaultVal = this._DEFAULTS[key];        
+            console.log(key, 'kk')
+            if(defaultVal && defaultVal[0] === '@'){
                 defaultVal = this.data[((defaultVal as string).slice(1)) as keyof IRWSConfig];
             }
 

package/webpack/rws_after_plugin.js

@@ -35,6 +35,28 @@ class RWSAfterPlugin {
                 return await Promise.all(proms);            
             });       
         });        
+
+        compiler.hooks.emit.tapAsync('RWSAfterPlugin', (compilation, callback) => {      
+            Object.keys(compilation.assets).forEach((filename) => {
+            
+              if (filename.endsWith('.js')) {
+                const asset = compilation.assets[filename];
+                let source = asset.source();
+                if(source.indexOf('css`') > -1 || source.indexOf('html`') > -1){   
+                    console.log('replacing', filename);
+                  const updatedSource = source.replace(/\n/g, '');
+        
+                  // Update the asset with the new content
+                  compilation.assets[filename] = {
+                    source: () => updatedSource,
+                    size: () => updatedSource.length
+                  };
+                }          
+              }
+            });
+      
+            callback();
+        });
     }
 
     async _runActionType(actionType, action){    

package/webpack/rws_plugin.js

@@ -124,19 +124,6 @@ class RWSPlugin {
     const _self = this;
 
     return;
-
-    compiler.hooks.thisCompilation.tap('RWSSassPlugin', (compilation) => {
-      compilation.hooks.buildModule.tap('RWSSassPlugin', (module) => {
-        if (module.resource && /\.scss$/.test(module.resource)) {       
-          
-          let scssPath = module.resource;   
-
-          this.compileFile(scssPath, true).catch((e) => {
-            throw e;
-          })
-        }
-      });
-    });
   }
 
  readSCSSFilesFromDirectory(dirPath) {