@rws-framework/client 2.9.4 → 2.9.7

package/package.json

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

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

@@ -3,7 +3,7 @@ import { ExtendedObservableAccessor } from "./_extended_accessor";
 
 export class DefaultObservableAccessor extends ExtendedObservableAccessor {
 
-    constructor(public name: string, protected watcher: any = void 0) {  
-        super(name, watcher);
+    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

@@ -2,9 +2,9 @@ import { Observable, Accessor } from "@microsoft/fast-element";
 
 export abstract class ExtendedObservableAccessor implements Accessor {
     protected field: string;
-    protected callback: string;
+    protected callback: string;  
 
-    constructor(public name: string, protected watcher: any = void 0, suffix: string = 'Changed') {
+    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}`;
     }
@@ -12,10 +12,16 @@ export abstract class ExtendedObservableAccessor implements Accessor {
     getValue(source: any): any {
         Observable.track(source, this.name);
 
-        return source[this.field];
+        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];
 

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

@@ -3,7 +3,7 @@ import { ExtendedObservableAccessor } from "./_extended_accessor";
 
 export class ExternalObservableAccessor extends ExtendedObservableAccessor {
 
-    constructor(public name: string, protected watcher: any = void 0) {  
-        super(name, watcher , '');
+    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,67 +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)}`;
-
-    Observable.track(target, 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;                
-            }            
-        },
-    });
+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

@@ -1,3 +1,60 @@
-import { Observable, Accessor, observable as parentObservable} from '@microsoft/fast-element';
-import { externalObservable as externalAttr } from './external-observable';
-export { externalAttr };
+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

@@ -38,8 +38,12 @@ function externalObservable(targetComponent: RWSViewComponent | unknown, nameOrA
             get(this: any) {
                 return accessor.getValue(this);
             },
-            set(this: any, newValue: any) {                
+            set(this: any, newValue: any) {         
+                const oldVal = accessor.getValue(this);       
                 accessor.setValue(this, newValue);
+                if(!!this['externalChanged']){
+                    this['externalChanged'].call(accessor.name, oldVal, newValue);
+                }
             },
         });
     }   

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,
@@ -36,7 +37,7 @@ function RWSView<Component extends RWSViewComponent>(name: string, data?: RWSDec
             if(override.options){
                 (theComponent.definition as any).options = override.options;
             }
-        }        
+        }
     };
 }
 
@@ -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

@@ -14,6 +14,7 @@ import { ngAttr } from './components/_attrs/angular-attr';
 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';
@@ -33,6 +34,7 @@ export {
 
     RWSPlugin,
     RWSPluginEntry,
+    IRWSPlugin, IStaticRWSPlugin,
     DefaultRWSPluginOptionsType,
     
     NotifyUiType,

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_scss_loader.js

@@ -1,10 +1,35 @@
 const path = require('path');
 const fs = require('fs');
+const RWSScssPlugin = require('../rws_scss_plugin');
 
 module.exports = 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;
+
+    if(saveFile){
+        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 (saveFile && code) {
+                plugin.writeCssFile(filePath, code);
+            }
+        } catch(e){
+            console.error(e);
+            return '';
+        }
+    }
 
     if(fs.existsSync(componentPath)){
         fs.writeFileSync(componentPath, fs.readFileSync(componentPath, 'utf-8'))  

package/webpack/loaders/rws_fast_ts_loader.js

@@ -95,7 +95,7 @@ module.exports = async function(content) {
             }                                    
             
             if(templateExists){                         
-                const templateContent = fs.readFileSync(templatePath, 'utf-8');
+                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