@rws-framework/client 2.9.13 → 2.9.15

package/README.md

@@ -8,7 +8,6 @@ Realtime Web Suit is a web-component powered, MS FAST powered fullstack-oriented
 2. [Getting Started](#getting-started)
 3. [Key Components: RWSClient & RoutingService](#key-components-rwsclient--routingservice)
 4. [Component Initialization](#component-initialization)
-4. [RWS Decorators](#rws-decorators)
 5. [DI](#dependency-injection)
 6. [Frontend routes](#frontend-routes)
 7. [Backend Imports](#backend-imports)
@@ -389,16 +388,7 @@ class WebChat extends RWSViewComponent {
 }
 ```
 
-**external decorators + @ngAttr fire externalChanged function after changes**
-
-```typescript
-externalChanged(name: string, oldValue: string | undefined, newValue: string): void
-{        
-    this.callApi();        
-}
-```
-
-The RWSView decorator options type:
+The decorator options type:
 
 ```typescript
 interface RWSDecoratorOptions{

package/cfg/build_steps/webpack/_loaders.js

@@ -1,8 +1,6 @@
 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';

package/cfg/build_steps/webpack/_production.js

@@ -0,0 +1,38 @@
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+
+function getRWSProductionSetup(optimConfig){
+
+  return {
+    ...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: {
+            dead_code: true,
+            pure_funcs:  ['console.log', 'console.info', 'console.warn']
+          },
+          output: {
+            comments: false,
+            beautify: false                  
+          },
+        },        
+        extractComments: false,
+        parallel: true,
+      }),
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: ['default', {
+            discardComments: { removeAll: false },
+          }],
+        },
+      })      
+    ]
+  };
+}
+
+module.exports = { getRWSProductionSetup }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.9.13",
+    "version": "2.9.15",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -47,19 +47,11 @@
         "socket.io-client": "^4.7.2",
         "source-map": "^0.7.4",
         "source-map-support": "^0.5.21",
-        "stacktrace-gps": "^3.1.2",
-        "style-loader": "^3.3.3",
-        "terser-webpack-plugin": "^5.3.9",
-        "ts-loader": "^9.4.4",
-        "ts-transformer-keys": "^0.4.4",
-        "tsc-watch": "^6.0.4",
-        "tslib": "^2.6.2",
-        "uglify-js": "^3.17.4",
+        "stacktrace-gps": "^3.1.2",     
         "upload": "^1.3.2",
         "url-router": "^13.0.0",
         "uuid": "^9.0.1",
-        "v4": "^0.0.1",
-        "webpack": "^5.89.0"
+        "v4": "^0.0.1"
     },
     "devDependencies": {
         "@types/dragula": "^3.7.4",
@@ -97,6 +89,11 @@
         "typedoc-theme-hierarchy": "^4.1.2",
         "typescript": "^5.1.6",
         "url-loader": "^4.1.1",
+        "emoji-regex": "^10.3.0",
+        "ts-transformer-keys": "^0.4.4",
+        "tsc-watch": "^6.0.4",
+        "tslib": "^2.6.2",
+        "uglify-js": "^3.17.4",
         "webpack": "^5.75.0",
         "webpack-bundle-analyzer": "^4.10.1",
         "webpack-cli": "^5.1.4",

package/rws.webpack.config.js

@@ -5,10 +5,10 @@ const webpack = require('webpack');
 const { rwsPath, RWSConfigBuilder } = require('@rws-framework/console');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { ESBuildPlugin } = require('esbuild-loader');
 
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const TerserPlugin = require('terser-webpack-plugin');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
 
 const RWSAfterPlugin = require('./webpack/rws_after_plugin');
 
@@ -19,6 +19,7 @@ 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 { getRWSProductionSetup } = require('./cfg/build_steps/webpack/_production');
 const { rwsExternals } = require('./cfg/build_steps/webpack/_rws_externals');
 
 const { _DEFAULT_CONFIG } = require('./cfg/_default.cfg');
@@ -79,7 +80,11 @@ const RWSWebpackWrapper = async (config) => {
     new webpack.IgnorePlugin({
       resourceRegExp: /.*\.es6\.js$/,
       contextRegExp: /node_modules/
-    })
+    }),
+    // new ESBuildPlugin({
+    //   'process.env._RWS_DEFAULTS': JSON.stringify(BuildConfigurator.exportDefaultConfig()),
+    //   'process.env._RWS_BUILD_OVERRIDE': JSON.stringify(BuildConfigurator.exportBuildConfig())
+    // })
   ];
 
   const WEBPACK_AFTER_ACTIONS = config.actions || [];
@@ -208,35 +213,9 @@ const RWSWebpackWrapper = async (config) => {
       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 },
-            }],
-          },
-        })      
-      ]
-    };
+    optimConfig = getRWSProductionSetup(optimConfig, tsConfigPath);
+
+    // WEBPACK_PLUGINS.push(new ESBuildPlugin());
   }
 
   const devExternalsVars = {

package/src/client/config.ts

@@ -8,6 +8,13 @@ import deepmerge from 'deepmerge';
 type RWSInfoType = { components: string[] };
 
 function getUser(this: RWSClientInstance): IRWSUser {
+
+    const localSaved = localStorage.getItem('the_rws_user');
+
+    if (localSaved) {
+        this.setUser(JSON.parse(localSaved) as IRWSUser);
+    }
+
     return this.user;
 }
 
@@ -21,6 +28,8 @@ function setUser(this: RWSClientInstance, user: IRWSUser): RWSClientInstance {
 
     this.apiService.setToken(this.user.jwt_token);
 
+    localStorage.setItem('the_rws_user', JSON.stringify(this.user));
+
     for(const plugin of RWSPlugin.getAllPlugins()){
         plugin.onSetUser(user);
     }
@@ -89,8 +98,6 @@ async function setup(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
 
     this.appConfig.mergeConfig(this.config);    
 
-    console.log(this.config);
-
     if(this.config.plugins){                
         for (const pluginEntry of this.config.plugins){
             addPlugin.bind(this)(pluginEntry);
@@ -103,11 +110,7 @@ async function setup(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
         for (const plugin of RWSPlugin.getAllPlugins()){
             plugin.onPartedComponentsLoad(componentParts);
         }
-    }        
-    
-    if(config?.user){
-        this.setUser(config.user);
-    }
+    }               
 
     this.isSetup = true;
     return this.config;
@@ -124,16 +127,13 @@ async function start(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
         this.appConfig.mergeConfig(this.config);
     }        
 
-    if(!this.user && config?.user){
-        this.setUser(config.user);
-    }
-
     if (this.config.user && !this.config.dontPushToSW) {
         this.pushUserToServiceWorker(this.user);
     }
 
     await this.initCallback();        
-    for (const plugin of RWSPlugin.getAllPlugins()){             
+
+    for (const plugin of RWSPlugin.getAllPlugins()){        
         await plugin.onClientStart();
     }
 

package/src/components/_component.ts

@@ -10,12 +10,8 @@ import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../ty
 import { applyConstructor, RWSInject } from './_decorator';
 import TheRWSService from '../services/_service';
 import { handleExternalChange } from './_attrs/_external_handler';
-
-interface IFastDefinition {
-    name: string;
-    template: ViewTemplate;
-    styles?: ElementStyles;
-} 
+import { IFastDefinition, isDefined, defineComponent, getDefinition } from './_definitions';
+import { on, $emitDown, observe } from './_event_handling';
 
 type ComposeMethodType<
     T extends FoundationElementDefinition, 
@@ -79,27 +75,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         this.applyFileList();
 
         RWSViewComponent.instances.push(this);
-    }
-
-    observe(callback: (component: this, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: this, node: Node) => boolean = null, observeRemoved: boolean = false)
-    {
-        const observer = new MutationObserver((mutationsList, observer) => {
-            for(const mutation of mutationsList) {
-                if (mutation.type === 'childList') {
-                    const mutationObserveType: NodeList = observeRemoved ? mutation.removedNodes : mutation.addedNodes;
-                    mutationObserveType.forEach(node => {                    
-                        if ((condition !== null && condition(this, node))) {
-                            callback(this, node, observer);
-                        }else if(condition === null){
-                            callback(this, node, observer);
-                        }                    
-                    });
-                }
-            }
-        });
-        
-        observer.observe(this.getShadowRoot(), { childList: true, subtree: true });
-    }
+    }    
 
     passRouteParams(routeParams: Record<string, string> = null) {
         if (routeParams) {
@@ -118,16 +94,16 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
     }
 
     on<T>(type: string, listener: (event: CustomEvent<T>) => any) {
-        this.addEventListener(type, (baseEvent: Event) => {
-            listener(baseEvent as CustomEvent<T>);
-        });
+        return on.bind(this)(type, listener);
     }
 
     $emitDown<T>(eventName: string, payload: T) {
-        this.$emit(eventName, payload, {
-            bubbles: true,
-            composed: true
-        });
+        return $emitDown.bind(this)(eventName, payload);
+    }
+
+    observe(callback: (component: RWSViewComponent, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: RWSViewComponent, node: Node) => boolean = null, observeRemoved: boolean = false)
+    {
+        return observe.bind(this)(callback, condition, observeRemoved);
     }
 
     parse$<T extends Element>(input: NodeListOf<T>, directReturn: boolean = false): DOMOutputType<T> {
@@ -236,58 +212,17 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
     static isDefined<T extends RWSViewComponent>(this: IWithCompose<T>): boolean 
     {
-        const richWindow: RWSWindow = loadRWSRichWindow();
-
-        if(!this.definition){
-            return false;
-        }
-
-        return Object.keys(richWindow.RWS.components).includes(this.definition.name);
+        return isDefined<T>(this);
     }
 
     static defineComponent<T extends RWSViewComponent>(this: IWithCompose<T>): void
     {
-        if(this.isDefined()){
-            if(this._verbose){
-                console.warn(`Component ${this.name} is already declared`);
-            }            
-            
-            return;
-        }
-
-        const richWindow = loadRWSRichWindow();        
-
-        if (!this.definition) {
-            throw new Error('RWS component is not named. Add `static definition = {name, template};`');
-        }
-
-        const composedComp = this.compose({
-            baseName: this.definition.name,
-            template: this.definition.template,
-            styles: this.definition.styles
-        }) as RWSWindowComponentInterface;
-
-        if (!richWindow.RWS) {
-            throw new Error('RWS client not initialized');
-        }
-
-        richWindow.RWS.components[this.definition.name] = {
-            interface: composedComp,
-            component: this
-        };        
+        return defineComponent<T>(this);
     }
 
-    static getDefinition(tagName: string, htmlTemplate: ViewTemplate, styles: ElementStyles = null) {
-        const def: IFastDefinition = {
-            name: tagName,
-            template: htmlTemplate
-        };
-
-        if (styles) {
-            def.styles = styles;
-        }
-
-        return def;
+    static getDefinition(tagName: string, htmlTemplate: ViewTemplate, styles: ElementStyles = null) 
+    {
+        return getDefinition(tagName, htmlTemplate, styles);
     }
 
     private static getInstances(): RWSViewComponent[] {

package/src/components/_definitions.ts

@@ -0,0 +1,63 @@
+import RWSViewComponent, { IWithCompose } from './_component';
+import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
+import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
+
+export interface IFastDefinition {
+    name: string;
+    template: ViewTemplate;
+    styles?: ElementStyles;
+}
+
+export function isDefined<T extends RWSViewComponent>(element: IWithCompose<T>): boolean {
+    const richWindow: RWSWindow = loadRWSRichWindow();
+
+    if (!element.definition) {
+        return false;
+    }
+
+    return Object.keys(richWindow.RWS.components).includes(element.definition.name);
+}
+
+export function defineComponent<T extends RWSViewComponent>(element: IWithCompose<T>): void {
+    if (element.isDefined()) {
+        if (element._verbose) {
+            console.warn(`Component ${element.name} is already declared`);
+        }
+
+        return;
+    }
+
+    const richWindow = loadRWSRichWindow();
+
+    if (!element.definition) {
+        throw new Error('RWS component is not named. Add `static definition = {name, template};`');
+    }
+
+    const composedComp = element.compose({
+        baseName: element.definition.name,
+        template: element.definition.template,
+        styles: element.definition.styles
+    }) as RWSWindowComponentInterface;
+
+    if (!richWindow.RWS) {
+        throw new Error('RWS client not initialized');
+    }
+
+    richWindow.RWS.components[element.definition.name] = {
+        interface: composedComp,
+        component: element
+    };
+}
+
+export function getDefinition(tagName: string, htmlTemplate: ViewTemplate, styles: ElementStyles = null) {
+    const def: IFastDefinition = {
+        name: tagName,
+        template: htmlTemplate
+    };
+
+    if (styles) {
+        def.styles = styles;
+    }
+
+    return def;
+}

package/src/components/_event_handling.ts

@@ -0,0 +1,34 @@
+import RWSViewComponent from "@rws-framework/client/src/components/_component";
+
+export function on<T>(this: RWSViewComponent, type: string, listener: (event: CustomEvent<any>) => any) {
+    this.addEventListener(type, (baseEvent: Event) => {
+        listener(baseEvent as CustomEvent<T>);
+    });
+}
+
+export function $emitDown<T>(this: RWSViewComponent, eventName: string, payload: T) {
+    this.$emit(eventName, payload, {
+        bubbles: true,
+        composed: true
+    });
+}
+
+export function observe(this: RWSViewComponent, callback: (component: RWSViewComponent, node: Node, observer: MutationObserver) => Promise<void>, condition: (component: RWSViewComponent, node: Node) => boolean = null, observeRemoved: boolean = false)
+{
+    const observer = new MutationObserver((mutationsList, observer) => {
+        for(const mutation of mutationsList) {
+            if (mutation.type === 'childList') {
+                const mutationObserveType: NodeList = observeRemoved ? mutation.removedNodes : mutation.addedNodes;
+                mutationObserveType.forEach(node => {                    
+                    if ((condition !== null && condition(this, node))) {
+                        callback(this, node, observer);
+                    }else if(condition === null){
+                        callback(this, node, observer);
+                    }                    
+                });
+            }
+        }
+    });
+    
+    observer.observe(this.getShadowRoot(), { childList: true, subtree: true });
+}

package/webpack/loaders/rws_fast_scss_loader.js

@@ -2,18 +2,18 @@ const path = require('path');
 const fs = require('fs');
 const RWSScssPlugin = require('../rws_scss_plugin');
 
-module.exports = function(content) {      
+module.exports = async function(content) {      
     const filePath = this.resourcePath;
     const componentDir = path.resolve(path.dirname(filePath), '..');
     const componentPath = path.resolve(componentDir, 'component.ts');
     const isDev = this._compiler.options.mode === 'development';    
     const saveFile = content.indexOf('@save') > -1; 
     const plugin = new RWSScssPlugin(); 
-    let fromTs = false;
+    let fromTs = false;    
 
     if(saveFile){
         try {
-            const codeData = plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);        
+            const codeData = await plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);                    
 
             const code = codeData.code;
             const deps = codeData.dependencies;        

package/webpack/loaders/rws_fast_ts_loader.js

@@ -82,10 +82,10 @@ module.exports = async function(content) {
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
                 const scsscontent = fs.readFileSync(path.dirname(filePath) + '/' + stylesPath, 'utf-8');
-                const codeData = plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles', null, filePath, !isDev);        
+                const codeData = await plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles', null, filePath, !isDev);        
                 const cssCode = codeData.code;
            
-                styles = `import './${stylesPath}';\n`;     
+                styles = isDev ? `import './${stylesPath}';\n` : '';     
                 if(!templateExists){
                     styles += `import { css } from '@microsoft/fast-element';\n`;     
                 }