@rws-framework/client 2.5.4 → 2.6.0

package/src/client.ts

@@ -1,5 +1,5 @@
 import IRWSConfig from './interfaces/IRWSConfig';
-import startClient from './run';
+
 import RWSNotify from './types/RWSNotify';
 
 import ConfigService, { ConfigServiceInstance } from './services/ConfigService';
@@ -14,7 +14,7 @@ import { IBackendRoute } from './services/ApiService';
 import IRWSUser from './interfaces/IRWSUser';
 import RWSWindow, { RWSWindowComponentRegister, loadRWSRichWindow } from './interfaces/RWSWindow';
 
-import { DI, Container } from '@microsoft/fast-foundation';
+import { DI, Container, Registration } from '@microsoft/fast-foundation';
 
 import {
     IFrontRoutes
@@ -22,6 +22,11 @@ import {
 
 import RWSViewComponent, { IWithCompose } from './components/_component';
 import RWSContainer from './components/_container';
+import TheRWSService from './services/_service';
+
+import ComponentHelper, { ComponentHelperStatic } from './client/components';
+import ServicesHelper from './client/services';
+import ConfigHelper from './client/config';
 
 interface IHotModule extends NodeModule {
     hot?: {
@@ -32,23 +37,24 @@ interface IHotModule extends NodeModule {
     }
 }
 
-
+type RWSInfoType = { components: string[] };
 type RWSEventListener = (event: CustomEvent) => void;
 
 class RWSClient {
-    private _container: Container;
-    private user: IRWSUser = null;
-
-    private config: IRWSConfig = {};
-    protected initCallback: () => Promise<void> = async () => { };
+    protected _container: Container;
+    protected user: IRWSUser = null;
+    
+    protected config: IRWSConfig = {};
+    protected isSetup = false;
+    protected devStorage: { [key: string]: any } = {};    
+    protected customServices: { [serviceName: string]: TheRWSService} = {};
+    protected defaultServices: { [serviceName: string]: TheRWSService} = {};
 
-    private isSetup = false;
-    protected devStorage: { [key: string]: any } = {};
+    private componentHelper = ComponentHelper.bind(this)();
+    private servicesHelper = ServicesHelper.bind(this)();
+    private configHelper = ConfigHelper.bind(this)();
 
-    private cfgSetupListener: RWSEventListener = (event: CustomEvent<{ callId: string }>) => {
-        console.log('Received custom event from web component:', event.detail);
-        // this.broadcastConfigForViewComponents();
-    };
+    protected initCallback: () => Promise<void> = async () => { };    
 
     constructor(
         @ConfigService public appConfig: ConfigServiceInstance,
@@ -61,62 +67,32 @@ class RWSClient {
         @NotifyService public notifyService: NotifyServiceInstance
     ) {
         this._container = RWSContainer();
-        this.user = this.getUser();
+        this.user = this.getUser();      
+        
+        this.loadServices();
 
         this.pushDataToServiceWorker('SET_WS_URL', { url: this.appConfig.get('wsUrl') }, 'ws_url');
 
         if (this.user) {
             this.pushUserToServiceWorker({ ...this.user, instructor: false });
-        }
+        }        
     }
 
     async setup(config: IRWSConfig = {}): Promise<IRWSConfig> {
-        if (this.isSetup) {
-            return this.config;
-        }
-
-        this.config = { ...this.config, ...config };
-        this.appConfig.mergeConfig(this.config);
-
-        // this.on<IRWSConfig>('rws_cfg_call', this.cfgSetupListener);
-
-        const hotModule: IHotModule = (module as IHotModule);
-
-        if (hotModule.hot) {
-            hotModule.hot.accept('./print.js', function () {
-                console.log('Accepting the updated module!');
-            });
-        }
-
-        if (this.appConfig.get('parted')) {
-            await this.loadPartedComponents();            
-        }
-
-
-        this.isSetup = true;
-        return this.config;
+        return this.configHelper.setup(config);
     }
 
     async start(config: IRWSConfig = {}): Promise<RWSClient> {
-        this.config = { ...this.config, ...config };
-
-        if (!this.isSetup) {
-            this.config = await this.setup(this.config);
-        }
-
-        if (Object.keys(config).length) {
-            this.appConfig.mergeConfig(this.config);
-        }        
-
-        if (this.config.user && !this.config.dontPushToSW) {
-            this.pushUserToServiceWorker(this.user);
-        }
-
-        await startClient(this.appConfig, this.wsService, this.notifyService, this.routingService);        
+        return this.configHelper.start(config);
+    }
 
-        await this.initCallback();        
+    private loadServices(){
+        return this.servicesHelper.loadServices();
+    }
 
-        return this;
+    get(key: string): any | null
+    {
+        return this.configHelper.get(key);
     }
 
     addRoutes(routes: IFrontRoutes) {
@@ -146,53 +122,20 @@ class RWSClient {
     }
 
     pushDataToServiceWorker(type: string, data: any, asset_type: string = 'data_push'): void {
-        let tries = 0;
-
-        const doIt: () => void = () => {
-            try {
-                this.swService.sendDataToServiceWorker(type, data, asset_type);
-            } catch (e) {
-                if (tries < 3) {
-                    setTimeout(() => { doIt(); }, 300);
-                    tries++;
-                }
-            }
-        };
-
-        doIt();
+        this.configHelper.pushDataToServiceWorker(type, data, asset_type);
+
     }
 
     pushUserToServiceWorker(userData: any) {
-        this.setUser(userData);
-        this.pushDataToServiceWorker('SET_USER', userData, 'logged_user');
+        this.configHelper.pushUserToServiceWorker(userData);
     }
 
     getUser(): IRWSUser {
-
-        const localSaved = localStorage.getItem('the_rws_user');
-
-        if (localSaved) {
-            this.setUser(JSON.parse(localSaved) as IRWSUser);
-        }
-
-        return this.user;
+        return this.configHelper.getUser();
     }
 
     setUser(user: IRWSUser): RWSClient {
-        if (!user || !user?.jwt_token) {
-            console.warn('[RWS Client Warning]', 'Passed user is not valid', user);
-            return this;
-        }
-
-        this.user = user;
-
-        this.apiService.setToken(this.user.jwt_token);
-        this.wsService.setUser(this.user);
-
-        localStorage.setItem('the_rws_user', JSON.stringify(this.user));
-
-
-        return this;
+        return this.configHelper.setUser(user);
     }
 
     getConfig(): ConfigServiceInstance {
@@ -219,29 +162,11 @@ class RWSClient {
     }
 
     async loadPartedComponents(): Promise<void> {
-        this.assignClientToBrowser();
-
-        const componentParts: string[] = await this.apiService.get<string[]>(this.appConfig.get('partedDirUrlPrefix') + '/rws_chunks_info.json');        
-
-        componentParts.forEach((componentName: string, key: number) => {
-            const partUrl = `${this.appConfig.get('partedDirUrlPrefix')}/${this.appConfig.get('partedPrefix')}.${componentName}.js`;
-
-            const script: HTMLScriptElement = document.createElement('script');
-            script.src = partUrl;
-            script.async = true;
-            script.type = 'text/javascript';
-            document.body.appendChild(script);
-
-            console.log(`Appended ${componentParts[key]} component (${partUrl})`);
-        });        
+        return this.componentHelper.loadPartedComponents();
     }   
     
     async onDOMLoad(): Promise<void> {
-        return new Promise<void>((resolve) => {
-            document.addEventListener('DOMContentLoaded', () => {
-                resolve();
-            });
-        });
+        return this.domService.onDOMLoad()
     }
 
     assignClientToBrowser(): void {
@@ -261,30 +186,17 @@ class RWSClient {
         return window;
     }
 
-
-    private broadcastConfigForViewComponents(): void {
-        document.dispatchEvent(new CustomEvent<{ config: IRWSConfig }>('rws_cfg_broadcast', { detail: { config: this.appConfig.getData() } }));
-    }
-
     static getDI(): typeof DI {
         return DI;
     }
 
     static defineAllComponents() {
-        const richWindowComponents: RWSWindowComponentRegister = (window as Window & RWSWindow).RWS.components;
-
-        Object.keys(richWindowComponents).map(key => richWindowComponents[key].component).forEach((el: IWithCompose<RWSViewComponent>) => {
-            el.define(el as any, el.definition);
-        });
+        ComponentHelperStatic.defineAllComponents();
     }
 
     
     defineComponents(){
-        const richWindowComponents: RWSWindowComponentRegister = (window as Window & RWSWindow).RWS.components;
-
-        Object.keys(richWindowComponents).map(key => richWindowComponents[key].component).forEach((el: IWithCompose<RWSViewComponent>) => {
-            el.define(el as any, el.definition);
-        });
+        ComponentHelperStatic.defineAllComponents();
     }
 }
 

package/src/components/_component.ts

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

package/src/components/_decorator.ts

@@ -7,7 +7,8 @@ interface RWSDecoratorOptions {
     template?: string,
     styles?: string,
     fastElementOptions?: any,
-    ignorePackaging?: boolean
+    ignorePackaging?: boolean,
+    oreoMode?: boolean
 }
 
 //const _PARAMTYPES_METADATA_KEY = 'design:paramtypes';

package/src/interfaces/IRWSConfig.ts

@@ -2,6 +2,7 @@ import { IFrontRoutes } from '../services/RoutingService';
 import RWSViewComponent from '../components/_component';
 
 export default interface IRWSConfig {
+    dev?: boolean
     defaultLayout?: typeof RWSViewComponent
     backendUrl?: string
     wsUrl?: string

package/src/services/ApiService.ts

@@ -35,7 +35,8 @@ type IBackendRoute = IHTTProute | IPrefixedHTTProutes;
 
 const _DEFAULT_CONTENT_TYPE = 'application/json';
 
-class ApiServiceInstance extends TheService {
+class ApiService extends TheService {
+    static _DEFAULT: boolean = true;
     private token?: string;    
 
     constructor(@ConfigService private config: ConfigServiceInstance) {
@@ -238,5 +239,5 @@ class ApiServiceInstance extends TheService {
     }
 }
 
-export default ApiServiceInstance.getSingleton();
-export { IBackendRoute, RequestOptions, ApiServiceInstance, IHTTProute, IPrefixedHTTProutes };
+export default ApiService.getSingleton();
+export { IBackendRoute, RequestOptions, ApiService as ApiServiceInstance, IHTTProute, IPrefixedHTTProutes };

package/src/services/ConfigService.ts

@@ -9,6 +9,7 @@ const __SENT_TO_COMPONENTS: string[] = [];
 
 @RWSFillBuild()
 class ConfigService extends TheService {  
+    static _DEFAULT: boolean = false;
     static isLoaded: boolean = false;
     
     _DEFAULTS: Partial<IRWSConfig> = {};
@@ -32,24 +33,33 @@ class ConfigService extends TheService {
         const isInData: boolean = Object.keys(this.data).includes(key);
         const isInBuildVars: boolean = Object.keys(this._BUILD_OVERRIDE).includes(key);
 
+        let isDev = false;
+
+        if((Object.keys(this._BUILD_OVERRIDE).includes('dev'))){
+            isDev = Object.keys(this._BUILD_OVERRIDE).includes('dev') && this._BUILD_OVERRIDE.dev;
+        }
+
         if(!isInData){        
             let defaultVal = null;
 
             if(isInDefaults){
                 defaultVal = this._DEFAULTS[key];                   
-            }            
-            
-            if(isInBuildVars && !!this._BUILD_OVERRIDE[key]){
-                defaultVal = this._BUILD_OVERRIDE[key];
-            }
+            }                             
                         
             if(defaultVal && defaultVal[0] === '@'){
                 defaultVal = this.data[((defaultVal as string).slice(1)) as keyof IRWSConfig];
             }
-            
+
+            if(isInBuildVars && Object.keys(this._BUILD_OVERRIDE).includes(key)){
+                if(isDev){
+                    console.warn(`.rws.json override [${key}]:`), this._BUILD_OVERRIDE[key];
+                }
+
+                defaultVal = this._BUILD_OVERRIDE[key];
+            }
+
             return defaultVal;
-        }
-        
+        }        
 
         return this.data[key as keyof IRWSConfig];
     }

package/src/services/DOMService.ts

@@ -9,7 +9,8 @@ type DOMOutputType<T extends Element> = NodeListOf<T> | T | null;
 declare let trustedTypes: TrustedTypePolicyFactory;
 
 
-class DOMServiceInstance extends RWSService {
+class DOMService extends RWSService {
+    static _DEFAULT: boolean = true;
     parse$<T extends Element>(input: NodeListOf<T>, directReturn: boolean = false): DOMOutputType<T> {    
         if(input.length > 1 || directReturn) {
             return input;
@@ -83,9 +84,18 @@ class DOMServiceInstance extends RWSService {
 
         return sanitized;
     }
+
+    async onDOMLoad(): Promise<void>
+    {
+        return new Promise<void>((resolve) => {
+            document.addEventListener('DOMContentLoaded', () => {
+                resolve();
+            });
+        });
+    }
 }
 
-const DOMService = DOMServiceInstance.getSingleton();
 
-export default DOMService;
-export { DOMOutputType, DOMServiceInstance, TagsProcessorType }; 
+
+export default DOMService.getSingleton();
+export { DOMOutputType, DOMService, TagsProcessorType, DOMService as DOMServiceInstance }; 

package/src/services/NotifyService.ts

@@ -4,7 +4,8 @@ import TheService from './_service';
  * @class
  * @extends TheService
  */
-class NotifyServiceInstance extends TheService {
+class NotifyService extends TheService {
+    static _DEFAULT: boolean = true;
     private notifier: RWSNotify;
 
     public setNotifier(notifier: RWSNotify)
@@ -43,7 +44,5 @@ class NotifyServiceInstance extends TheService {
     }
 }
 
-const NotifyService = NotifyServiceInstance.getSingleton();
-
-export default NotifyService;
-export { NotifyServiceInstance };
+export default NotifyService.getSingleton();
+export { NotifyService as NotifyServiceInstance };

package/src/services/RoutingService.ts

@@ -9,6 +9,7 @@ import ConfigService, { ConfigServiceInstance } from './ConfigService';
 type IFrontRoutes = Record<string, unknown>; 
 
 class RoutingService extends TheService {
+    static _DEFAULT: boolean = true;
     private router: Router<any>;
     private routes: IFrontRoutes;
 

package/src/services/ServiceWorkerService.ts

@@ -2,6 +2,7 @@ import RWSService from '@rws-framework/client/src/services/_service';
 
 
 class ServiceWorkerService extends RWSService {   
+    static _DEFAULT: boolean = true;
     async registerServiceWorker(): Promise<void>
     {
         await ServiceWorkerService.registerServiceWorker();

package/src/services/UtilsService.ts

@@ -3,19 +3,8 @@ import ApiService, {ApiServiceInstance} from './ApiService';
 
 import { RawSourceMap  } from 'source-map';
 
-class UtilsService extends TheService {
-    private apiService: ApiServiceInstance;
-
-    constructor(@ApiService apiService: ApiServiceInstance){
-        super();
-        this.apiService = apiService;
-    }
-
-    async getFileContents(filePath: string): Promise<string>
-    {    
-        return this.apiService.pureGet(filePath);
-    }
-    
+class UtilsService extends TheService {    
+    static _DEFAULT: boolean = true;
     mergeDeep<T>(target: T | any, source: T  | any): T 
     {
         const isObject = (obj: any) => obj && typeof obj === 'object';

package/src/services/WSService.ts

@@ -22,6 +22,7 @@ const  wsLog = async (fakeError: Error, text: any, socketId: string = null, isEr
 };
 
 class WSService extends TheService {
+    static _DEFAULT: boolean = true;
     static websocket_instance: Socket;
     private _ws: Socket | null = null;
   

package/src/services/_service.ts

@@ -10,6 +10,8 @@ export interface IWithDI<T> {
 
 export default abstract class TheRWSService {
     _RELOADABLE: boolean = false;
+    static _IN_CLIENT: boolean = false;
+    static _DEFAULT: boolean = false;
 
     constructor() {    
     }
@@ -47,4 +49,14 @@ export default abstract class TheRWSService {
 
         return interf;
     }
+
+    isDefault(): boolean
+    {
+        return (this as any).constructor._DEFAULT;
+    }
+    
+    isInClient(): boolean
+    {
+        return (this as any).constructor._IN_CLIENT;
+    }
 }

package/webpack/index.js

@@ -1,10 +1,8 @@
-const cssLoader = require('./rws_fast_css_loader');
-const scssLoader = require('./rws_fast_scss_loader');
-const htmlLoader = require('./rws_fast_html_loader');
-const tsLoader = require('./rws_fast_ts_loader');
+const scssLoader = require('./loaders/rws_fast_scss_loader');
+const htmlLoader = require('./loaders/rws_fast_html_loader');
+const tsLoader = require('./loaders/rws_fast_ts_loader');
 
-module.exports = {
-    cssLoader,
+module.exports = {    
     scssLoader,
     htmlLoader,
     tsLoader

package/webpack/{rws_fast_scss_loader.js → loaders/rws_fast_scss_loader.js}

@@ -1,10 +1,10 @@
-const RWSPlugin = require("./rws_plugin");
+const RWSCssPlugin = require("../rws_scss_plugin");
 const path = require('path');
 const cssLoader = require('css-loader');
 
 module.exports = function(content) {
     const callback = this.async();
-    const plugin = new RWSPlugin();
+    const plugin = new RWSCssPlugin();
     const filePath = this.resourcePath;
 
     const options = this.getOptions() || { minify: false };

package/webpack/{rws_fast_ts_loader.js → loaders/rws_fast_ts_loader.js}

@@ -2,8 +2,8 @@
 const path = require('path');
 const fs = require('fs');
 const ts = require('typescript');
-const tools = require('../_tools');
-const RWSPlugin = require("./rws_plugin");
+const tools = require('../../_tools');
+
 
 const _defaultRWSLoaderOptions = {
     templatePath: 'template.html',
@@ -11,23 +11,6 @@ const _defaultRWSLoaderOptions = {
     fastOptions: {  shadowOptions: { mode: 'open' }  }
 }
 
-function toJsonString(str) {
-    // Replace single quotes with double quotes
-    str = str.replace(/'/g, '"');
-
-    // Add double quotes around keys
-    str = str.replace(/([a-zA-Z0-9_]+)(?=\s*:)/g, '"$1"');
-
-    try {
-        // Parse the string as JSON and then stringify it to get a JSON string
-        const jsonObj = JSON.parse(str);
-        return JSON.stringify(jsonObj);
-    } catch (error) {
-        console.error("Error in parsing:", error);
-        return null;
-    }
-}
-
 module.exports = async function(content) {    
     let processedContent = content;
     const filePath = this.resourcePath;
@@ -95,7 +78,7 @@ module.exports = async function(content) {
 
             replaced = modifiedContent;
             replaced = replaced.replace(`@RWSView('${tagName}')`, '');
-            const plugin = new RWSPlugin();
+            
             let styles = 'const styles: null = null;'
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
@@ -112,13 +95,9 @@ module.exports = async function(content) {
 
                 let htmlContent = fs.readFileSync(templatePath, 'utf-8');
 
-                // try {
-                //     htmlContent = await htmlMinify(htmlContent, {
-                //         collapseWhitespace: true,     
-                //     });
-                // } catch(e){
-                //     console.error(e);
-                // }
+                if(!isDev){
+                    htmlContent = htmlContent.replace(/\n/g, '');
+                }
 
                 template = `import './${templateName}.html';
                 //@ts-ignore            

package/webpack/loaders/rws_uncomments_loader.js

@@ -0,0 +1,35 @@
+
+
+const path = require('path');
+const Terser = require('terser');
+
+async function removeCommentsFromFile(code, inputSourceMap) {        
+    const callback = this.async();
+    const sourceMap = this.sourceMap;
+    // Configure Terser to remove comments
+    try {
+        const minifyOptions = {
+          format: {
+            comments: false // Remove all comments
+          },
+          sourceMap: sourceMap
+            ? {
+                content: inputSourceMap || false,
+                url: 'out.js.map'
+              }
+            : false
+        };
+    
+        // Minify source code
+        const result = await Terser.minify(code, minifyOptions);
+    
+        // Pass along the source map if enabled
+        callback(null, result.code, result.map || inputSourceMap);
+      } catch (err) {
+        callback(err);
+      }
+}
+
+module.exports = async function (source, inputSourceMap) {    
+    return await removeCommentsFromFile.bind(this)(source, inputSourceMap);
+};

package/webpack/{rws_plugin.js → rws_scss_plugin.js}

@@ -15,7 +15,7 @@ const log = (args) => {
     console.log(args);
   }
 }
-class RWSPlugin {
+class RWSScssPlugin {
   autoCompile = [];
 
   constructor(params){
@@ -326,4 +326,4 @@ class RWSPlugin {
   }
 }
 
-module.exports = RWSPlugin;
+module.exports = RWSScssPlugin;

package/webpack/rws_fast_css_loader.js

@@ -1,16 +0,0 @@
-// custom-css-loader.js
-const RWSPlugin = require("./rws_plugin");
-const plugin = new RWSPlugin();
-
-module.exports = function(content) {  
-
-    if(this.resourcePath == '/app/frontend/src/styles/main.scss'){
-        console.log('zzzzz',content, plugin.checkForImporterType(this._module, 'ts'));
-    }
-
-    if(!plugin.checkForImporterType(this._module, 'ts')){
-        return content;
-    }
-    
-    return `import { css } from '@microsoft/fast-element';\nexport default css\`${content}\`;`;
-};