@rws-framework/client 2.9.3 → 2.9.6

package/README.md

@@ -379,8 +379,10 @@ const options?: RWSDecoratorOptions;
 class WebChat extends RWSViewComponent {
     @attr tagAttr: string; //HTML tag attr
     @ngAttr fromNgAttr: string; //HTML attr from angular template
+    @externalAttr fromExAttr: string; //HTML attr with change observation
     @sanitizedAttr htmlAttr: string; //HTML attr that's sanitized with every val change
     @observable someVar: any; //Var for templates/value change observation
+    @externalObservable someExVar: string; //Var for templates/value change observation with external watch
 }
 ```
 

package/cfg/_default.cfg.js

@@ -17,6 +17,8 @@ const _DEFAULT_CONFIG_VARS = {
     //Universal configs
     transports: ['websocket'],    
     parted: false,        
+    devRouteProxy: '/api',
+    devApiPort: 3002,
     plugins: []
 }
 

package/cfg/build_steps/webpack/_loaders.js

@@ -9,11 +9,13 @@ function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath){
 
   return [    
       {
-        test: /\.scss$/,
-        use: [                                    
-          scssLoader,
-        ],
-      },
+          test: /\.html$/,
+          use: [
+              {
+                  loader: htmlLoader, 
+              },
+          ],
+      },  
       {
         test: /\.(ts)$/,
         use: [
@@ -33,7 +35,13 @@ function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath){
           /\.debug\.ts$/,  
           /\.d\.ts$/,  
         ],
-      }
+      },
+      {
+        test: /\.scss$/i,
+        use: [                                              
+          scssLoader,
+        ],
+      },
   ]
 }
 

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.9.3",
-    "main": "src/index.ts",    
+    "version": "2.9.6",
+    "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
     },
@@ -30,27 +30,36 @@
         "@microsoft/fast-foundation": "^2.46.2",
         "@rws-framework/console": "*",
         "@types/moment": "^2.13.0",
-        "dragula": "^3.7.3",
         "deepmerge": "^4.3.1",
+        "dragula": "^3.7.3",
         "he": "^1.2.0",
         "json5": "^2.2.3",
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
+        "node-sass": "^7.0.3",
         "partial-json-parser": "^1.0.0",
         "reflect-metadata": "^0.1.13",
         "resolve-url-loader": "^5.0.0",
         "sanitize-html": "^2.12.1",
-        "sass": "^1.69.7",
+        "sass": "1.69.7",
+        "sass-loader": "^13.3.2",
         "scss-loading-animations": "^1.0.1",
         "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",
         "upload": "^1.3.2",
         "url-router": "^13.0.0",
         "uuid": "^9.0.1",
-        "v4": "^0.0.1"
-        
+        "v4": "^0.0.1",
+        "webpack": "^5.89.0"
     },
     "devDependencies": {
         "@types/dragula": "^3.7.4",
@@ -60,7 +69,8 @@
         "@types/he": "^1.2.3",
         "@types/sanitize-html": "^2.11.0",
         "@types/uuid": "^9.0.7",
-        "@typescript-eslint/parser": "^5.0.0",        
+        "@typescript-eslint/parser": "^5.0.0",
+        "browser-sync": "^2.29.3",
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.8.1",
         "css-minimizer-webpack-plugin": "^5.0.1",
@@ -71,12 +81,12 @@
         "mini-css-extract-plugin": "^2.7.6",
         "minimatch": "^9.0.4",
         "node-sass": "^9.0.0",
+        "raw-loader": "^4.0.2",
         "sass-loader": "^13.3.2",
         "source-map": "^0.7.4",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
-        "ts-loader": "^9.4.4",        
-        "raw-loader": "^4.0.2",
+        "ts-loader": "^9.4.4",
         "ts-node": "^10.9.1",
         "tsconfig-paths": "^4.2.0",
         "tsconfig-paths-webpack-plugin": "^4.1.0",
@@ -86,7 +96,7 @@
         "typedoc-plugin-rename-defaults": "^0.7.0",
         "typedoc-theme-hierarchy": "^4.1.2",
         "typescript": "^5.1.6",
-        "url-loader": "^4.1.1",        
+        "url-loader": "^4.1.1",
         "webpack": "^5.75.0",
         "webpack-bundle-analyzer": "^4.10.1",
         "webpack-cli": "^5.1.4",

package/rws.webpack.config.js

@@ -5,6 +5,8 @@ const webpack = require('webpack');
 const { rwsPath, RWSConfigBuilder } = require('@rws-framework/console');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
+
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
@@ -24,7 +26,7 @@ const { _DEFAULT_CONFIG } = require('./cfg/_default.cfg');
 const { info } = require('console');
 
 const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(process.cwd());
-
+console.log(process.argv);
 const RWSWebpackWrapper = async (config) => {
   const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...config});
 
@@ -52,6 +54,7 @@ const RWSWebpackWrapper = async (config) => {
 
   const devTools = isDev ? (BuildConfigurator.get('devtool') || 'source-map') : false;
   const devDebug = isDev ? (BuildConfigurator.get('devDebug') || config.devDebug || { build: false }) : null;
+  const devRouteProxy = BuildConfigurator.get('devRouteProxy') || config.devRouteProxy;
 
   const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || config.tsConfigPath, executionDir);
   const rwsPlugins = {};
@@ -283,7 +286,7 @@ const RWSWebpackWrapper = async (config) => {
       sourceMapFilename: '[file].map',
     },
     resolve: {      
-      extensions: ['.ts', '.js'],
+      extensions: ['.ts', '.js', '.scss', '.css'],
       modules: modules_setup,
       alias: {
         ...aliases
@@ -302,18 +305,25 @@ const RWSWebpackWrapper = async (config) => {
     cfgExport.optimization = optimConfig;
   }
 
-  if (isHotReload) {
-    cfgExport.devServer = {
-      hot: true,
-      static: publicDir
-    }
-  }
+
 
   for (const pluginKey of Object.keys(rwsPlugins)){
     const plugin = rwsPlugins[pluginKey];
     cfgExport = await plugin.onBuild(cfgExport);
   }  
 
+  if(isDev){
+    const backendUrl = BuildConfigurator.get('backendUrl') || config.backendUrl;
+    const apiPort = BuildConfigurator.get('apiPort') || config.apiPort;
+
+    if(backendUrl && apiPort){
+      // cfgExport.devServer = {
+      //   hot: true, // Enable hot module replacement
+      //   open: true, // Automatically open the browser
+      // }
+    }    
+  }
+
   return cfgExport;
 }
 

package/src/client.ts

@@ -23,6 +23,7 @@ import ComponentHelper, { ComponentHelperStatic, RWSInfoType } from './client/co
 import ServicesHelper from './client/services';
 import ConfigHelper from './client/config';
 import { DefaultRWSPluginOptionsType, RWSPlugin } from './plugins/_plugin';
+import { IStaticRWSPlugin } from './types/IRWSPlugin'
 
 interface IHotModule extends NodeModule {
     hot?: {
@@ -73,7 +74,7 @@ class RWSClient {
         }        
     }
 
-    addPlugin<T extends DefaultRWSPluginOptionsType>(pluginEntry: RWSPluginEntry<T>)
+    addPlugin<T extends DefaultRWSPluginOptionsType>(pluginEntry: IStaticRWSPlugin)
     {        
         this.config.plugins.push(pluginEntry);
     }

package/src/components/_attrs/_default_observable_accessor.ts

@@ -0,0 +1,9 @@
+import { Accessor, Observable } from "@microsoft/fast-element";
+import { ExtendedObservableAccessor } from "./_extended_accessor";
+
+export class DefaultObservableAccessor extends ExtendedObservableAccessor {
+
+    constructor(public name: string, protected customGet: (source: any, field: string) => any = null, protected customSet: (source: any, field: string, newVal: any) => boolean | void = null, protected watcher: any = void 0, suffix: string = 'Changed') {
+        super(name, customGet, customSet, watcher, suffix);
+    }
+}

package/src/components/_attrs/_extended_accessor.ts

@@ -0,0 +1,41 @@
+import { Observable, Accessor } from "@microsoft/fast-element";
+
+export abstract class ExtendedObservableAccessor implements Accessor {
+    protected field: string;
+    protected callback: string;  
+
+    constructor(public name: string, protected customGet: (source: any, field: string) => any = null, protected customSet: (source: any, field: string, newVal: any) => boolean | void = null, protected watcher: any = void 0, suffix: string = 'Changed') {
+        this.field = `_${name}`;
+        this.callback = `${name}${suffix}`;
+    }
+
+    getValue(source: any): any {
+        Observable.track(source, this.name);
+
+        return this.customGet ? this.customGet(source, this.field) : source[this.field];
+    }
+
+    setValue(source: any, newValue: any): void {
+        if(this.customSet){
+            if(this.customSet(source, this.field, newValue) === false){
+                return;
+            };            
+        }
+        
+        const field = this.field;
+        const oldValue = source[field];
+
+        if (oldValue !== newValue) {
+            source[field] = newValue;
+
+            const callback = source[this.callback];
+
+            if (typeof callback === 'function') {
+                callback.call(source, oldValue, newValue);
+            }
+
+            Observable.getNotifier(source).notify(this.name);
+        }
+    }
+    
+}

package/src/components/_attrs/_external_handler.ts

@@ -0,0 +1,8 @@
+import { Observable } from "@microsoft/fast-element";
+
+export function handleExternalChange(_target: any, $prop: string)
+{       
+    if(!!_target['externalChanged']){
+        _target['externalChanged'].call(_target, $prop, null, _target[$prop]);
+    } 
+}

package/src/components/_attrs/_external_observable_accessor.ts

@@ -0,0 +1,9 @@
+import { Accessor, Observable } from "@microsoft/fast-element";
+import { ExtendedObservableAccessor } from "./_extended_accessor";
+
+export class ExternalObservableAccessor extends ExtendedObservableAccessor {
+
+    constructor(public name: string, protected customGet: (source: any, field: string) => any = null, protected customSet: (source: any, field: string, newVal: any) => boolean | void = null, protected watcher: any = void 0) {
+        super(name, customGet, customSet, watcher, '');        
+    }
+}

package/src/components/_attrs/angular-attr.ts

@@ -1,64 +1,34 @@
-import { Observable, AttributeConfiguration, DecoratorAttributeConfiguration } from '@microsoft/fast-element';
-import RWSViewComponent from '../_component';
-
-type TargetType = RWSViewComponent;  // Use a more generic type for the target to ensure compatibility
-
-function ngAttr(configOrTarget?: DecoratorAttributeConfiguration | TargetType, prop?: string): void | any 
-{    
-    if (arguments.length > 1) {
-        // Decorator used directly without factory invocation
-        // Apply the decorator immediately without returning anything
-        applyDecorator(configOrTarget as RWSViewComponent, prop!);
-    } else {
-        // Decorator factory invocation
-        const config = configOrTarget as AttributeConfiguration;
-        // Return a function that applies the decorator, conforming to TypeScript's expectations for decorator factories
-        return (target: TargetType, property: string) => applyDecorator(target, property, config);
-    }
-}
-
-function applyDecorator(target: TargetType, prop: string, config: AttributeConfiguration | any = {}): void 
-{    
-    if (arguments.length > 1) {  
-        config.property = prop;
-    }
-
-    AttributeConfiguration.locate(target.constructor).push(config);
-    modifyPropertyDescriptor(target, prop);
-}
-
-
-
-function modifyPropertyDescriptor(target: any, propertyKey: string): void {
-    const privatePropName = `_${String(propertyKey)}`;
-    Object.defineProperty(target, privatePropName, {
-        writable: true,
-        value: target[propertyKey],
-    });
-
-    Object.defineProperty(target, propertyKey, {
-        get() {
-            const value: string = this[privatePropName];                
-            return isNgValue(value) ? null : value;
-        },
-        set(value: any) {                
-            if (typeof value === 'string' && isNgValue(value)) {                    
-                this[privatePropName] = null; // Set to null if condition is met
-            } else {
-                this[privatePropName] = value;
-            }
-            Observable.notify(this, propertyKey);
-        },
-    });
+import { 
+    DecoratorAttributeConfiguration, 
+    AttributeConfiguration,
+    Observable,     
+} from "@microsoft/fast-element";
+import { handleExternalChange } from "./_external_handler";
+import RWSViewComponent, { IWithCompose } from "../_component";
+import { externalAttr } from "./external-attr";
+
+export function ngAttr(
+    config?: DecoratorAttributeConfiguration
+): (target: {}, property: string) => void;
+
+/**
+ * Decorator:  Specifies an HTML attribute.
+ * @param target - The class to define the attribute on.
+ * @param prop - The property name to be associated with the attribute.
+ * @public
+ */
+export function ngAttr(target: {}, prop: string): void;
+export function ngAttr(
+    configOrTarget?: DecoratorAttributeConfiguration | {},
+    prop?: string
+): void | ((target: {}, property: string) => void) {
+    return externalAttr(configOrTarget, prop, {
+        converter: (val: any) => {
+            if(val && val.indexOf('{{') > -1){
+                return undefined;
+            }                               
+    
+            return val;
+        }    
+    })
 }
-
-function isNgValue(input: string): boolean {
-    // Regular expression to match AngularJS template variable notation
-    const angularJsVariablePattern = /\{\{([^}]+)\}\}/;
-
-    // Test the input string for the pattern and return the result
-    return angularJsVariablePattern.test(input);
-}
-  
-
-export { ngAttr };

package/src/components/_attrs/external-attr.ts

@@ -0,0 +1,60 @@
+import { 
+    DecoratorAttributeConfiguration, 
+    AttributeConfiguration,
+    Observable,     
+} from "@microsoft/fast-element";
+import { handleExternalChange } from "./_external_handler";
+import RWSViewComponent, { IWithCompose } from "../_component";
+
+type ExAttrOpts = { converter?: (val: any) => string }
+const _default_opts = {
+    converter: (val: any) => {
+        return val;
+    }    
+}
+
+export function externalAttr(
+    config?: DecoratorAttributeConfiguration, 
+): (target: {}, property: string) => void;
+
+export function externalAttr(target: {}, property: string, opts?: ExAttrOpts): void;
+export function externalAttr(
+    configOrTarget?: DecoratorAttributeConfiguration | {},
+    property?: string,
+    opts: ExAttrOpts = _default_opts
+): void | ((target: {}, property: string) => void) {
+    let config: AttributeConfiguration;
+
+    function decorator($target: {}, $prop: string): void {
+        if (arguments.length > 1) {
+            // Non invocation:
+            // - @attr
+            // Invocation with or w/o opts:
+            // - @attr()
+            // - @attr({...opts})
+            config.property = $prop;
+        }
+
+        config.mode = 'fromView';        
+        config.converter = { fromView: opts.converter, toView: null };
+
+        const attrs = AttributeConfiguration.locate($target.constructor);        
+        RWSViewComponent.setExternalAttr(($target.constructor as IWithCompose<any>).name, $prop);        
+        
+        attrs.push(config);       
+    }
+
+    if (arguments.length > 1) {
+        // Non invocation:
+        // - @attr
+        config = {} as any;
+        decorator(configOrTarget!, property!);
+        return;
+    }
+
+    // Invocation with or w/o opts:
+    // - @attr()
+    // - @attr({...opts})
+    config = configOrTarget === void 0 ? ({} as any) : configOrTarget;
+    return decorator;
+}

package/src/components/_attrs/external-observable.ts

@@ -1,72 +1,53 @@
-import { Observable } from '@microsoft/fast-element';
-import RWSViewComponent from '../_component';
-import DOMService from '../../services/DOMService';
-import RWSContainer from '../_container';
-import { IOptions } from 'sanitize-html';
-
-import * as he from 'he';
-
-type SanitizeOptions = IOptions & { fullEncode?: boolean };
+import { Observable, Accessor, observable as parentObservable} from '@microsoft/fast-element';
 
-const heOpt: he.EncodeOptions = {
-    useNamedReferences: false, 
-    encodeEverything: true,
-};
-
-function enc(html: string): string
-{
-    return he.encode(html, heOpt);
-}
-
-
-const transformAnyTag = (tagName: string, attribs: { [key: string]: string }) => {
-    // Example: Wrap the original tag with `span` and indicate the original tag name in a data attribute
-    return {
-        tagName: 'span', // Change this to any tag you want to transform to
-        attribs: {
-            ...attribs,
-            'data-original-tag': tagName
-        }
-    };
-};
+import RWSViewComponent from '../_component';
+import { DefaultObservableAccessor } from './_default_observable_accessor';
+import { ExternalObservableAccessor } from './_external_observable_accessor';
 
-function applyDecorator(target: RWSViewComponent, prop: string, config: SanitizeOptions = null): void 
-{    
-    modifyPropertyDescriptor(target, prop, config as IOptions);
-}
 
-function modifyPropertyDescriptor(target: any, propertyKey: string, config: IOptions = null): void {
-    const privatePropName = `_${String(propertyKey)}`;
-    Object.defineProperty(target, privatePropName, {
-        writable: true,
-        value: target[propertyKey],
-    });
+type ExternalObservableOptions = {} | unknown;
 
-    Object.defineProperty(target, propertyKey, {
-        get() {
-            return this[privatePropName];                             
-        },
-        set(value: any) {                 
-            console.log('[DEBUG] external changed', propertyKey);      
-            this[privatePropName] = value;
-            Observable.notify(this, propertyKey);
-        },
-    });
+function isString(test: unknown){
+    return typeof test === 'string';
 }
 
-function externalAttr(configOrTarget?: SanitizeOptions | RWSViewComponent, prop?: string): void | any 
-{    
-    if (arguments.length > 1) {
-        // Decorator used directly without factory invocation
-        // Apply the decorator immediately without returning anything
-        applyDecorator(configOrTarget as RWSViewComponent, prop!);
-    } else {
-        // Decorator factory invocation
-        const config = configOrTarget as SanitizeOptions;
-        // Return a function that applies the decorator, conforming to TypeScript's expectations for decorator factories
-        return (target: RWSViewComponent, property: string) => applyDecorator(target, property, config);
-    }
+function externalObservable(targetComponent: RWSViewComponent | unknown, nameOrAccessor: string | Accessor, opts: ExternalObservableOptions = null): void | any 
+{        
+
+    const target = targetComponent as any;
+    const propName = typeof nameOrAccessor === 'string' ? nameOrAccessor : nameOrAccessor.name;
+
+
+    if (isString(nameOrAccessor)) {
+        nameOrAccessor = new DefaultObservableAccessor(propName);
+    }    
+
+    const defaultAccessor: Accessor = nameOrAccessor as Accessor;
+    const extendedAccessor = new ExternalObservableAccessor(propName);
+
+    const accessors: Accessor[] = [
+        defaultAccessor,
+        extendedAccessor
+    ];
+
+    for (const accessor of accessors){
+        Observable.getAccessors(target).push(accessor);
+
+        Reflect.defineProperty(target, accessor.name, {
+            enumerable: true,
+            get(this: any) {
+                return accessor.getValue(this);
+            },
+            set(this: any, newValue: any) {         
+                const oldVal = accessor.getValue(this);       
+                accessor.setValue(this, newValue);
+                if(!!this['externalChanged']){
+                    this['externalChanged'].call(accessor.name, oldVal, newValue);
+                }
+            },
+        });
+    }   
 }
   
 
-export { externalAttr };
+export { externalObservable };

package/src/components/_component.ts

@@ -1,4 +1,4 @@
-import { ViewTemplate, ElementStyles, observable, html, Constructable, PartialFASTElementDefinition, attr } from '@microsoft/fast-element';
+import { ViewTemplate, ElementStyles, observable, html, Constructable, PartialFASTElementDefinition, attr, Observable } from '@microsoft/fast-element';
 import { FoundationElement, FoundationElementDefinition, FoundationElementRegistry, OverrideFoundationElementDefinition } from '../../foundation/rws-foundation';
 import ConfigService, { ConfigServiceInstance } from '../services/ConfigService';
 import UtilsService, { UtilsServiceInstance } from '../services/UtilsService';
@@ -9,6 +9,7 @@ import { IRWSViewComponent, IAssetShowOptions } from '../types/IRWSViewComponent
 import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
 import { applyConstructor, RWSInject } from './_decorator';
 import TheRWSService from '../services/_service';
+import { handleExternalChange } from './_attrs/_external_handler';
 
 interface IFastDefinition {
     name: string;
@@ -32,10 +33,13 @@ export interface IWithCompose<T extends RWSViewComponent> {
     _verbose: boolean;
     _toInject: {[key: string]: TheRWSService};
     _depKeys: {[key: string]: string[]};
+    _externalAttrs: { [key:string]: string[] };
+    setExternalAttr: (componentName: string, key: string) => void
 }
 
 abstract class RWSViewComponent extends FoundationElement implements IRWSViewComponent {
     __isLoading: boolean = true;
+    __exAttrLoaded: string[] = [];
     private static instances: RWSViewComponent[] = [];
     static fileList: string[] = [];
 
@@ -45,6 +49,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
     static _defined: { [key: string]: boolean } = {};
     static _toInject: {[key: string]: TheRWSService} = {};
     static _depKeys: {[key: string]: string[]} = {_all: []};
+    static _externalAttrs: { [key: string]: string[] } = {};
     static _verbose: boolean = false;
 
     @RWSInject(ConfigService, true) protected config: ConfigServiceInstance;    
@@ -60,34 +65,18 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
     constructor() {
         super();       
-        applyConstructor(this);
-        
+        applyConstructor(this);       
     }
 
     connectedCallback() {        
         super.connectedCallback();        
-        applyConstructor(this);
-     
-        // console.trace(this.config);
-        // console.log(this.routingService);
+        applyConstructor(this);    
+
         if (!(this.constructor as IWithCompose<this>).definition && (this.constructor as IWithCompose<this>).autoLoadFastElement) {
             throw new Error('RWS component is not named. Add `static definition = {name, template};`');
         }
 
-        try {
-            (this.constructor as IWithCompose<this>).fileList.forEach((file: string) => {
-                if (this.fileAssets[file]) {
-                    return;
-                }
-                this.apiService.pureGet(this.config.get('pubUrlFilePrefix') + file).then((response: string) => {
-                    this.fileAssets = { ...this.fileAssets, [file]: html`${response}` };
-                });
-            });
-
-        } catch (e: Error | any) {
-            console.error('Error loading file content:', e.message);
-            console.error(e.stack);
-        }
+        this.applyFileList();
 
         RWSViewComponent.instances.push(this);
     }
@@ -214,6 +203,32 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
         this.$emit(eventName, event);
     }
 
+    private applyFileList(): void
+    {
+        try {
+            (this.constructor as IWithCompose<this>).fileList.forEach((file: string) => {
+                if (this.fileAssets[file]) {
+                    return;
+                }
+                this.apiService.pureGet(this.config.get('pubUrlFilePrefix') + file).then((response: string) => {
+                    this.fileAssets = { ...this.fileAssets, [file]: html`${response}` };
+                });
+            });
+
+        } catch (e: Error | any) {
+            console.error('Error loading file content:', e.message);
+            console.error(e.stack);
+        }
+    }   
+
+    static setExternalAttr(componentName: string, key: string)
+    {
+        if(!Object.keys(RWSViewComponent._externalAttrs).includes(componentName)){
+            RWSViewComponent._externalAttrs[componentName] = [];
+        }
+
+        RWSViewComponent._externalAttrs[componentName].push(key);
+    }
 
     static hotReplacedCallback() {
         this.getInstances().forEach(instance => instance.forceReload());

package/src/components/_decorator.ts

@@ -5,7 +5,8 @@ import { loadRWSRichWindow } from '../types/RWSWindow';
 import RWSViewComponent, { IWithCompose } from './_component';
 import { InterfaceSymbol } from './_container';
 import { RWSInject } from './_decorators/RWSInject';
-import { ElementStyles, ViewTemplate } from '@microsoft/fast-element'; 
+import { ElementStyles, Observable, ViewTemplate } from '@microsoft/fast-element'; 
+import { handleExternalChange } from './_attrs/_external_handler';
 
 interface RWSDecoratorOptions {
     template?: string,
@@ -77,10 +78,12 @@ const applyConstructor = (component: RWSViewComponent, x: boolean = false): void
 
     type KeyType = {[key: string]: TheRWSService | string };
 
+    const _target = (component as any);
+    
     function inject(services: KeyType){
         for (const prop in services) {
             const service = (typeof services[prop] === 'string' ? existingInjectedDependencies[prop] : services[prop]) as TheRWSService;      
-            (component as any)[prop] = service;            
+            _target[prop] = service;            
         }
     }
 
@@ -100,6 +103,21 @@ const applyConstructor = (component: RWSViewComponent, x: boolean = false): void
     inject({
         config: RWSContainer().get(ConfigService)
     })    
+
+    if(Object.keys(RWSViewComponent._externalAttrs).includes((_target.constructor as IWithCompose<any>).name)){
+        for(const exAttrKey in RWSViewComponent._externalAttrs[(_target.constructor as IWithCompose<any>).name]){  
+            const exAttr = RWSViewComponent._externalAttrs[(_target.constructor as IWithCompose<any>).name][exAttrKey];          
+            const notifier = Observable.getNotifier(_target);
+            notifier.subscribe({
+                handleChange(source, key) {                    
+                    if (key === exAttr && !_target.__exAttrLoaded.includes(exAttr)) {                        
+                        handleExternalChange(source, key);
+                        _target.__exAttrLoaded.push(key);
+                    }
+                }
+            }, exAttr);
+        }    
+    }
 };
 
 export { RWSView, RWSDecoratorOptions, RWSIgnore, RWSInject, applyConstructor };

package/src/components/_decorators/RWSInject.ts

@@ -2,6 +2,7 @@ import { Key } from '../_container';
 import RWSViewComponent, { IWithCompose } from '../_component';
 import { loadDep, getFunctionParamNames } from './_di';
 import TheRWSService from '../../services/_service';
+import { handleExternalChange } from '../_attrs/_external_handler';
 
 
 type InjectDecoratorReturnType = (target: any, key?: string | number | undefined, parameterIndex?: number) => void;
@@ -40,7 +41,7 @@ function RWSInject<T extends RWSViewComponent>(dependencyClass: Key, defaultServ
             const depKey = paramNames[parameterIndex];       
             
             addToComponentInjection(targetConstructor.name, targetConstructor, depKey, dependencyClass, defaultService);
-        }                
+        }                        
     };
 }
 

package/src/index.ts

@@ -11,8 +11,10 @@ import UtilsService, {UtilsServiceInstance} from './services/UtilsService';
 import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/ServiceWorkerService';
 import { sanitizedAttr } from './components/_attrs/sanitize-html';
 import { ngAttr } from './components/_attrs/angular-attr';
-import { externalAttr } from './components/_attrs/external-observable';
+import { externalObservable } from './components/_attrs/external-observable';
+import { externalAttr } from './components/_attrs/external-attr';
 import { RWSPlugin, DefaultRWSPluginOptionsType } from './plugins/_plugin';
+import { IRWSPlugin, IStaticRWSPlugin } from './types/IRWSPlugin';
 import RWSClient, { RWSClientInstance } from './client';
 import { RWSPluginEntry } from './types/IRWSConfig';
 import IRWSUser from './types/IRWSUser';
@@ -32,6 +34,7 @@ export {
 
     RWSPlugin,
     RWSPluginEntry,
+    IRWSPlugin, IStaticRWSPlugin,
     DefaultRWSPluginOptionsType,
     
     NotifyUiType,
@@ -69,6 +72,7 @@ export {
     RWSIgnore,
     RWSInject,    
     observable,
+    externalObservable,
     externalAttr,
     attr,
     ngAttr,

package/src/plugins/_plugin.ts

@@ -3,11 +3,12 @@ import { Container } from "../components/_container";
 import RWSWindow, {loadRWSRichWindow } from '../types/RWSWindow';
 import IRWSUser from "../types/IRWSUser";
 import { RWSInfoType } from "../client/components";
+import { IRWSPlugin } from "../types/IRWSPlugin";
 
 type DefaultRWSPluginOptionsType = { enabled: boolean };
 type PluginInfoType = { name: string }
 type PluginConstructor<T extends DefaultRWSPluginOptionsType> = new (options: T) => RWSPlugin<T>;
-abstract class RWSPlugin<PluginOptions extends DefaultRWSPluginOptionsType> {
+abstract class RWSPlugin<PluginOptions extends DefaultRWSPluginOptionsType> implements IRWSPlugin{
     protected isLoaded: boolean = false;
     protected options: PluginOptions;
     protected container: Container;    

package/src/types/IRWSConfig.ts

@@ -1,9 +1,9 @@
 import RWSViewComponent from '../components/_component';
 import { RWSPlugin, DefaultRWSPluginOptionsType } from '../plugins/_plugin';
+import { IStaticRWSPlugin } from '../types/IRWSPlugin';
 
 export type IFrontRoutes = Record<string, unknown>; 
-export type PluginConstructor<T extends DefaultRWSPluginOptionsType> = new (options: T) => RWSPlugin<T>;
-export type RWSPluginEntry<T extends DefaultRWSPluginOptionsType> = PluginConstructor<T> | [PluginConstructor<T>, T];
+export type RWSPluginEntry<T extends DefaultRWSPluginOptionsType = DefaultRWSPluginOptionsType> = new (...args: any[]) => RWSPlugin<T>;
 
 export default interface IRWSConfig {
     dev?: boolean
@@ -23,7 +23,7 @@ export default interface IRWSConfig {
     parted?: boolean
     partedFileDir?: string
     partedPrefix?: string
-    plugins?: RWSPluginEntry<DefaultRWSPluginOptionsType | any>[]
+    plugins?: IStaticRWSPlugin[]
     routing_enabled?: boolean
     _noLoad?: boolean    
 }

package/src/types/IRWSPlugin.ts

@@ -0,0 +1,19 @@
+import { DefaultRWSPluginOptionsType } from "../plugins/_plugin";
+import IRWSUser from "./IRWSUser";
+import { Container } from "../components/_container";
+import RWSWindow from "../types/RWSWindow";
+import { RWSInfoType } from "../client/components";
+
+
+export interface IRWSPlugin {
+    onClientStart(): Promise<void>
+    onPartedComponentsLoad(componentParts: RWSInfoType): Promise<void>
+    onComponentsDeclare(): Promise<void>
+    onSetUser(user: IRWSUser): Promise<void>
+}
+
+export interface IStaticRWSPlugin<PluginOptions extends DefaultRWSPluginOptionsType = DefaultRWSPluginOptionsType> {    
+    new (...args: any[]): IRWSPlugin;
+    container: Container;    
+    window: RWSWindow;
+}

package/webpack/loaders/rws_fast_html_loader.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const fs = require('fs');
+
+module.exports = function(content){
+    const filePath = this.resourcePath;
+    const componentDir = path.dirname(filePath);
+    const componentPath = path.resolve(componentDir, 'component.ts');
+
+    if(fs.existsSync(componentPath)){
+        fs.writeFileSync(componentPath, fs.readFileSync(componentPath, 'utf-8'))  
+    }
+    
+    return '';
+}

package/webpack/loaders/rws_fast_scss_loader.js

@@ -1,65 +1,14 @@
-const RWSCssPlugin = require("../rws_scss_plugin");
 const path = require('path');
-const cssLoader = require('css-loader');
-// const { css } = require('@microsoft/fast-element') 
+const fs = require('fs');
 
-// function makeFastResource(context, code){
-//     return function(){ return css`${code}`; }.bind(context)(); 
-// }
-
-module.exports = function(content) {
-    const plugin = new RWSCssPlugin();
+module.exports = function(content) {      
     const filePath = this.resourcePath;
+    const componentDir = path.resolve(path.dirname(filePath), '..');
+    const componentPath = path.resolve(componentDir, 'component.ts');
 
-    const options = this.getOptions() || { minify: false };
-
-    const isDev = this._compiler.options.mode === 'development';    
-
-    const saveFile = content.indexOf('@save') > -1;  
-    let fromTs = false;
-
-    if (plugin.checkForImporterType(this._module, 'ts')) {
-        fromTs = true;
-    }
-
-    try {
-        const codeData = plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);        
-
-        const code = codeData.code;
-        const deps = codeData.dependencies;        
-
-        for (const dependency of deps){
-            this.addDependency(dependency);
-        }
-
-        if (fromTs && saveFile && code) {
-            plugin.writeCssFile(filePath, code);
-        }
-
-        // if(!fromTs){
-        //     return (context) => makeFastResource(context, code); 
-        // }
-
-        // Properly setup the context for css-loader
-
-        const callback = this.async();
-        const loaderContext = {
-            ...this,
-            query: { sourceMap: isDev },
-            async: () => (err, output) => {
-                if (err) {
-                    callback(err);
-                    return;
-                }
-                callback(null, output);
-            }
-        };
-
-        // Execute css-loader with the generated CSS code
-        cssLoader.call(loaderContext, code);                   
-
-    } catch (e) {
-        console.error(e);
-        callback(e);
+    if(fs.existsSync(componentPath)){
+        fs.writeFileSync(componentPath, fs.readFileSync(componentPath, 'utf-8'))  
     }
+    
+    return '';   
 };

package/webpack/loaders/rws_fast_ts_loader.js

@@ -5,6 +5,8 @@ const ts = require('typescript');
 const tools = require('../../_tools');
 const chalk = require('chalk');
 const {html_error_proof} = require('./ts/html_error');
+const RWSCssPlugin = require("../rws_scss_plugin");
+const plugin = new RWSCssPlugin();
 
 const _defaultRWSLoaderOptions = {
     templatePath: 'template.html',
@@ -12,9 +14,8 @@ const _defaultRWSLoaderOptions = {
     fastOptions: {  shadowOptions: { mode: 'open' }  }
 }
 
-let htmlFastImports = null;
-
-module.exports = async function(content) {    
+module.exports = async function(content) { 
+    let htmlFastImports = null;   
     let processedContent = content;
     const filePath = this.resourcePath;
     const isDev = this._compiler.options.mode === 'development';    
@@ -70,29 +71,39 @@ module.exports = async function(content) {
     const tagName = decoratorData.tagName;
     
     try { 
-        if(tagName){                                   
+        if(tagName){       
+            const templateName = 'template';
+            const templatePath = path.dirname(filePath) + `/${templateName}.html`;
+    
+            const templateExists = fs.existsSync(templatePath);                   
+
+            let template = 'const rwsTemplate: null = null;';                            
             let styles = 'const styles: null = null;'
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
-                styles = `import componentCSS from './${stylesPath}';\n`;
-                styles += `const styles = T.css\`\${componentCSS}\`;`;
-            }
+                const scsscontent = fs.readFileSync(path.dirname(filePath) + '/' + stylesPath, 'utf-8');
+                const codeData = plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles', null, filePath, !isDev);        
+                const cssCode = codeData.code;
+           
+                styles = `import './${stylesPath}';\n`;     
+                if(!templateExists){
+                    styles += `import { css } from '@microsoft/fast-element';\n`;     
+                }       
+                styles += `const styles = ${templateExists? 'T.': ''}css\`${cssCode}\`;\n`;
+
+                this.addDependency(path.dirname(filePath) + '/' + stylesPath);
+            }                                    
             
-            const templateName = 'template';
-            const templatePath = path.dirname(filePath) + `/${templateName}.html`;
-            const templateExists = fs.existsSync(templatePath, 'utf-8');                   
-            let template = 'const rwsTemplate: null = null;';
-
-            if(templateExists){
-                const templateContent = fs.readFileSync(templatePath);
-                htmlFastImports = `import * as T from '@microsoft/fast-element';\nimport RWSTemplateHTML from './${templateName}.html';`;
-                this.addDependency(templatePath);
+            if(templateExists){                         
+                const templateContent = fs.readFileSync(templatePath, 'utf-8').replace(/<!--[\s\S]*?-->/g, '');
+                htmlFastImports = `import * as T from '@microsoft/fast-element';\nimport './${templateName}.html';\n`;
                 template = `                
 //@ts-ignore                
 let rwsTemplate: any = T.html\`${templateContent}\`;
 `;              
+                this.addDependency(templatePath);
             }
-
+        
             const viewReg = /@RWSView\(['"]([a-zA-Z0-9_-]+)['"],?.*\)\sclass\s([a-zA-Z0-9_-]+) extends RWSViewComponent/gs
 
             let m;