@rws-framework/client 2.8.4 → 2.9.0

package/src/client/config.ts

@@ -3,6 +3,7 @@ import { RWSClientInstance } from "../client";
 
 import { RWSPlugin, DefaultRWSPluginOptionsType } from "../plugins/_plugin";
 import RWSWindow, {loadRWSRichWindow } from '../types/RWSWindow';
+import deepmerge from 'deepmerge';
 
 type RWSInfoType = { components: string[] };
 
@@ -89,12 +90,17 @@ function addPlugin<T  extends DefaultRWSPluginOptionsType>(this: RWSClientInstan
 async function setup(this: RWSClientInstance, config: IRWSConfig = {}): Promise<IRWSConfig> {
     if (this.isSetup) {
         return this.config;
+    }    
+
+    if(this.config){
+        this.config = deepmerge(this.config, config);
     }
 
-    this.config = { ...this.config, ...config };
+    console.log(config, this.config.plugins)
+
     this.appConfig.mergeConfig(this.config);    
 
-    if(this.config.plugins){        
+    if(this.config.plugins){                
         for (const pluginEntry of this.config.plugins){
             addPlugin.bind(this)(pluginEntry);
         }
@@ -130,7 +136,8 @@ async function start(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
     await this.initCallback();        
 
     for (const plugin of RWSPlugin.getAllPlugins()){
-        plugin.onClientStart();
+        console.log('plugin', plugin)
+        await plugin.onClientStart();
     }
 
     return this;

package/src/client.ts

@@ -13,7 +13,7 @@ import { IBackendRoute } from './services/ApiService';
 import IRWSUser from './types/IRWSUser';
 import RWSWindow, { RWSWindowComponentRegister, loadRWSRichWindow } from './types/RWSWindow';
 
-import { DI, Container, Registration } from '@microsoft/fast-foundation';
+import { DI, Container, Registration } from './components/_container';
 
 import RWSViewComponent, { IWithCompose } from './components/_component';
 import RWSContainer from './components/_container';
@@ -65,6 +65,7 @@ class RWSClient {
         
         this.loadServices();
 
+        this.config.plugins = [];
         this.pushDataToServiceWorker('SET_WS_URL', { url: this.appConfig.get('wsUrl') }, 'ws_url');
 
         if (this.user) {
@@ -73,7 +74,7 @@ class RWSClient {
     }
 
     addPlugin(pluginEntry: RWSPluginEntry<any>)
-    {
+    {        
         this.config.plugins.push(pluginEntry);
     }
 

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

@@ -0,0 +1,72 @@
+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 };
+
+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
+        }
+    };
+};
+
+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],
+    });
+
+    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 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);
+    }
+}
+  
+
+export { externalAttr };

package/src/components/_component.ts

@@ -1,5 +1,5 @@
 import { ViewTemplate, ElementStyles, observable, html, Constructable, PartialFASTElementDefinition, attr } from '@microsoft/fast-element';
-import { FoundationElement, FoundationElementDefinition, FoundationElementRegistry, OverrideFoundationElementDefinition } from '@microsoft/fast-foundation';
+import { FoundationElement, FoundationElementDefinition, FoundationElementRegistry, OverrideFoundationElementDefinition } from '../../foundation/rws-foundation';
 import ConfigService, { ConfigServiceInstance } from '../services/ConfigService';
 import UtilsService, { UtilsServiceInstance } from '../services/UtilsService';
 import DOMService, { DOMServiceInstance, DOMOutputType } from '../services/DOMService';
@@ -8,8 +8,7 @@ import NotifyService, { NotifyServiceInstance } from '../services/NotifyService'
 import { IRWSViewComponent, IAssetShowOptions } from '../types/IRWSViewComponent';
 import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
 import { applyConstructor, RWSInject } from './_decorator';
-
-import 'reflect-metadata';
+import TheRWSService from '../services/_service';
 
 interface IFastDefinition {
     name: string;
@@ -31,7 +30,7 @@ export interface IWithCompose<T extends RWSViewComponent> {
     compose: ComposeMethodType<FoundationElementDefinition, Constructable<T>>;
     define<TType extends (...params: any[]) => any>(type: TType, nameOrDef?: string | PartialFASTElementDefinition | undefined): TType;
     _verbose: boolean;
-    _toInject: {[key: string]: any};
+    _toInject: {[key: string]: TheRWSService};
     _depKeys: {[key: string]: string[]};
 }
 
@@ -44,7 +43,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
     static autoLoadFastElement = true;
     static _defined: { [key: string]: boolean } = {};
-    static _toInject: any[] = [];
+    static _toInject: {[key: string]: TheRWSService} = {};
     static _depKeys: {[key: string]: string[]} = {_all: []};
     static _verbose: boolean = false;
 

package/src/components/_container.ts

@@ -1,8 +1,6 @@
-import { DI } from '@microsoft/fast-foundation';
+import {DI, Container, Key, Registration , InterfaceSymbol} from '@microsoft/fast-foundation';
 import {loadRWSRichWindow} from '../types/RWSWindow';
 
-import 'reflect-metadata';
-
 export default () => {
     const richWindow = loadRWSRichWindow();            
 
@@ -13,4 +11,6 @@ export default () => {
     richWindow.RWS.container = DI.getOrCreateDOMContainer(richWindow.RWS.container_node);    
 
     return richWindow.RWS.container;
-};
+};
+
+export { DI, Container, Key, Registration, InterfaceSymbol }

package/src/components/_decorator.ts

@@ -1,7 +1,11 @@
+import RWSContainer from './_container';
+import TheRWSService from '../services/_service';
+import ConfigService from '../services/ConfigService';
+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 'reflect-metadata';
 
 interface RWSDecoratorOptions {
     template?: string,
@@ -50,26 +54,52 @@ function getParentConstructor(instance: any): any {
     return null;
 }
 
+
 const applyConstructor = (component: RWSViewComponent, x: boolean = false): void => {
     const mainConstructor: any = component.constructor;
     const parent = getParentConstructor(component);
+    
 
     if (parent.name !== 'RWSViewComponent' ) {
         return;
     }    
+    
 
     const existingInjectedDependencies = (mainConstructor as IWithCompose<RWSViewComponent>)._toInject;
-    const defaultDeps = (mainConstructor as IWithCompose<RWSViewComponent>)._depKeys['_all'] || [];
-    const depsToInject = (mainConstructor as IWithCompose<RWSViewComponent>)._depKeys[mainConstructor.name] || [];
 
-    Object.keys(existingInjectedDependencies).forEach((depKey: string) => {        
-        // console.log(`Checking "${mainConstructor.name}" for "${depKey}"`, [...defaultDeps, ...depsToInject]);
+    const regServices = loadRWSRichWindow().RWS._registered;
+    
+
+    const depsToInject: string[] = (mainConstructor as IWithCompose<RWSViewComponent>)._depKeys[mainConstructor.name] || [];
+    const depsInInjector: string[] = Object.keys(existingInjectedDependencies);
+
+    const toInject: string[] = [...depsToInject]
 
-        if ([...defaultDeps, ...depsToInject].includes(depKey)) {
-            const loadedDependency = existingInjectedDependencies[depKey];     
-            (component as any)[depKey] = loadedDependency;
+    type KeyType = {[key: string]: TheRWSService | string };
+
+    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;            
         }
-    });
+    }
+
+    inject(toInject.reduce((acc: KeyType, cur) => {
+        acc[cur] = cur;
+        return acc;
+      }, {}));
+
+    const defaultDeps: [string, TheRWSService][] = Object.keys(existingInjectedDependencies)
+        .filter((depKey: string) => existingInjectedDependencies[depKey].isDefault()).map((depKey => [depKey, existingInjectedDependencies[depKey]]));
+
+    inject(defaultDeps.reduce((acc: KeyType, cur: [string, TheRWSService]) => {
+        acc[cur[0]] = cur[1];
+        return acc;
+      }, {}));    
+
+    inject({
+        config: RWSContainer().get(ConfigService)
+    })    
 };
 
 export { RWSView, RWSDecoratorOptions, RWSIgnore, RWSInject, applyConstructor };

package/src/components/_decorators/RWSFillBuild.ts

@@ -1,4 +1,3 @@
-import 'reflect-metadata';
 import IRWSConfig from '../../types/IRWSConfig.js';
 
 function extractEnvVar(envVar: string){

package/src/components/_decorators/RWSInject.ts

@@ -1,4 +1,4 @@
-import { Key } from '@microsoft/fast-foundation';
+import { Key } from '../_container';
 import RWSViewComponent, { IWithCompose } from '../_component';
 import { loadDep, getFunctionParamNames } from './_di';
 import TheRWSService from '../../services/_service';
@@ -24,7 +24,7 @@ function addToComponentInjection(targetComponentName: string, constructor: any,
     if(!Object.keys(constructor._toInject).includes(depKey)){           
         const loadedDependency = loadDep<TheRWSService>(dependencyClass);
         constructor._toInject[depKey] = loadedDependency;
-    }
+    }    
 }
 
 function RWSInject<T extends RWSViewComponent>(dependencyClass: Key, defaultService: boolean = false): InjectDecoratorReturnType {
@@ -40,7 +40,7 @@ function RWSInject<T extends RWSViewComponent>(dependencyClass: Key, defaultServ
             const depKey = paramNames[parameterIndex];       
             
             addToComponentInjection(targetConstructor.name, targetConstructor, depKey, dependencyClass, defaultService);
-        }        
+        }                
     };
 }
 

package/src/components/_decorators/_di.ts

@@ -1,5 +1,5 @@
-import { Key } from '@microsoft/fast-foundation';
-import RWSContainer from '../_container';
+
+import RWSContainer, { Key } from '../_container';
 
 function getFunctionParamNames(func: () => any): string[] {
     const constructorMatch = func.toString().match(/constructor\s*\(([^)]*)\)/);

package/src/components/loader/styles/layout.scss

@@ -1,5 +1,5 @@
 //loader
-
+//save
 $loader-color: var(--primary-color, #eb7b13);
 $loader-size: 56px;
 $loader-height: 20px;
@@ -7,8 +7,8 @@ $loader-border-size: 8px;
 $loader-gap: 12px;
 $loader-animation-duration: 1s;
 
-@import "~/scss-loading-animations/src/loaders";
+// @import "~/scss-loading-animations/src/loaders";
 
-.loader {
-  @include loader01;
-}
+// .loader {
+//   @include loader01;
+// }

package/src/index.d.ts

@@ -0,0 +1 @@
+import "../types/declarations"

package/src/index.ts

@@ -2,7 +2,6 @@ import { Transformer as HTMLTagTransformerType, Tag as HTMLTag, Attributes as HT
 import { observable, attr } from '@microsoft/fast-element';
 import IRWSConfig from './types/IRWSConfig';
 import RWSNotify, { NotifyUiType, NotifyLogType } from './types/RWSNotify';
-import { provideRWSDesignSystem } from './components/_design_system';
 import RWSService from './services/_service';
 import ConfigService, { ConfigServiceInstance } from './services/ConfigService';
 import NotifyService, {NotifyServiceInstance} from './services/NotifyService';
@@ -12,6 +11,7 @@ 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 { RWSPlugin, DefaultRWSPluginOptionsType } from './plugins/_plugin';
 import RWSClient, { RWSClientInstance } from './client';
 import { RWSPluginEntry } from './types/IRWSConfig';
@@ -67,14 +67,14 @@ export {
     RWSView,
     sanitizedAttr,
     RWSIgnore,
-    RWSInject,
-    ngAttr,    
+    RWSInject,    
     observable,
+    externalAttr,
     attr,
+    ngAttr,
     
     RWSService,
-    RWSViewComponent,   
-    provideRWSDesignSystem,
+    RWSViewComponent,       
     declareRWSComponents,
 
     RWSContainer

package/src/plugins/_plugin.ts

@@ -1,5 +1,5 @@
 import RWSContainer from "../components/_container";
-import { Container } from "@microsoft/fast-foundation";
+import { Container } from "../components/_container";
 import RWSWindow, {loadRWSRichWindow } from '../types/RWSWindow';
 import IRWSUser from "../types/IRWSUser";
 import { RWSInfoType } from "../client/components";

package/src/services/ConfigService.ts

@@ -117,15 +117,15 @@ class ConfigService extends TheService {
     mergeConfig(config: IRWSConfig) {
         const unloaded = ConfigService.isLoaded;     
 
-        if(!Object.keys(this.data).includes('plugins')){
-            this.data.plugins = [];
-        }
+        this.data.plugins = [];
         
         this.data = Object.assign(this.data, config);
 
         if(unloaded){
             ConfigService.isLoaded = true;
         }
+
+        return this.data;
     }
 
     getData(): IRWSConfig
@@ -134,6 +134,6 @@ class ConfigService extends TheService {
     }
 }
 
-export default ConfigService.getSingleton();
+export default ConfigService.getSingleton('ConfigService');
 
 export { ConfigService as ConfigServiceInstance };

package/src/services/_service.ts

@@ -1,5 +1,4 @@
-import { DI, InterfaceSymbol, Key, Registration } from '@microsoft/fast-foundation';
-import RWSContainer from '../components/_container';
+import RWSContainer, { DI, InterfaceSymbol, Key, Registration } from '../components/_container';
 import { loadRWSRichWindow } from '../types/RWSWindow';
 
 export interface IWithDI<T> {
@@ -31,21 +30,25 @@ export default abstract class TheRWSService {
         this.getSingleton();
     }
     
-    public static getSingleton<T extends Key>(this: IWithDI<T>): InterfaceSymbol<T>
+    public static getSingleton<T extends Key>(this: IWithDI<T>, serviceName: string = null): InterfaceSymbol<T>
     {                  
         const richWindow = loadRWSRichWindow();        
 
-        if(Object.keys(richWindow.RWS._registered).includes(this.name)){            
-            return richWindow.RWS._registered[this.name];        
+        if(!serviceName){
+            serviceName = this.name;
         }
 
-        const interf = DI.createInterface<T>(this.name);
+        if(Object.keys(richWindow.RWS._registered).includes(serviceName)){            
+            return richWindow.RWS._registered[serviceName];        
+        }
+
+        const interf = DI.createInterface<T>(serviceName);
    
         RWSContainer().register(
             Registration.singleton(interf, this)
         );
 
-        richWindow.RWS._registered[this.name] = interf;
+        richWindow.RWS._registered[serviceName] = interf;
 
         return interf;
     }

package/src/types/RWSWindow.ts

@@ -1,5 +1,6 @@
 import { RWSClientInstance } from '../client';
-import { Container, InterfaceSymbol } from '@microsoft/fast-foundation';
+import { Container, InterfaceSymbol } from '../components/_container';
+
 import { RWSPlugin, DefaultRWSPluginOptionsType } from '../plugins/_plugin';
 import { v1 as uuid} from 'uuid';
 export type RWSWindowComponentInterface = (params?: any) => void;

package/tsconfig.json

@@ -18,10 +18,14 @@
       "lib": ["DOM", "ESNext"],
     },
     "paths": {
-      "@rws-framework/client": ["src"]
+      "@rws-framework/client": ["src"],
+      "@rws-framework/foundation": ["foundation"]
     },   
     "include": [
       "src",             
       "types/docs-typings.d.ts"      
+    ],
+    "exclude": [
+      "node_modules"
     ]
   }

package/types/declarations.d.ts

@@ -1,5 +1,5 @@
 declare module '*.scss' {
-    const content: import('@microsoft/fast-element').ElementStyles;
+    const content: string;
     export default content;
 }
 

package/webpack/loaders/rws_fast_scss_loader.js

@@ -1,9 +1,13 @@
 const RWSCssPlugin = require("../rws_scss_plugin");
 const path = require('path');
 const cssLoader = require('css-loader');
+// const { css } = require('@microsoft/fast-element') 
+
+// function makeFastResource(context, code){
+//     return function(){ return css`${code}`; }.bind(context)(); 
+// }
 
 module.exports = function(content) {
-    const callback = this.async();
     const plugin = new RWSCssPlugin();
     const filePath = this.resourcePath;
 
@@ -19,36 +23,41 @@ module.exports = function(content) {
     }
 
     try {
-        const code = plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);        
-
-        if (fromTs) {
-            if (saveFile && code) {
-                plugin.writeCssFile(filePath, code); 
-                
-                const newContext = this;
-
-                // Properly setup the context for css-loader
-                const loaderContext = {
-                    ...newContext,                              
-                    query: { sourceMap: isDev }, 
-                    async: () => (err, output) => {
-                        if (err) {
-                            callback(err);
-                            return;
-                        }
-                        callback(null, output);
-                    }
-                };
-
-                // Execute css-loader
-                cssLoader.call(loaderContext, code);
-            } else {
-                const tsCode = `import { css } from '@microsoft/fast-element';\nexport default css\`${code}\`;`;
-                callback(null, tsCode);
-            }
-        } else {
-            callback(null, code);
+        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);

package/webpack/loaders/rws_fast_ts_loader.js

@@ -74,7 +74,8 @@ module.exports = async function(content) {
             let styles = 'const styles: null = null;'
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
-                styles = `import styles from './${stylesPath}';`;
+                styles = `import componentCSS from './${stylesPath}';\n`;
+                styles += `const styles = T.css\`\${componentCSS}\`;`;
             }
             
             const templateName = 'template';
@@ -83,10 +84,11 @@ module.exports = async function(content) {
             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);
-                template = `
-let rwsTemplate: any = T.html\`\${RWSTemplateHTML}\`;
+                template = `                
+let rwsTemplate: any = T.html\`${templateContent}\`;
 `;              
             }
 

package/webpack/rws_after_plugin.js

@@ -1,8 +1,9 @@
 const rwsAfterCopy = require('./after/copy');
 const rwsAfterSW = require('./after/sw');
+const deepmerge = require('deepmerge');
 
 
-const _DEFAULT_CONFIG = {actions: [], executionDir: process.cwd(), packageDir: process.cwd()}
+const _DEFAULT_CONFIG = {actions: [], executionDir: process.cwd(), packageDir: process.cwd(), dev: false}
 
 const _DEFAULT_ACTION = {
     type: 'copy',
@@ -20,7 +21,7 @@ class RWSAfterPlugin {
     _allowedActionTypes = ['copy', 'custom', 'service_worker'];
 
     constructor(config = {}){
-        this.config = Object.assign(this.config, config);
+        this.config = deepmerge(this.config, config);
     }
 
     apply(compiler) {        
@@ -34,29 +35,31 @@ class RWSAfterPlugin {
     
                 return await Promise.all(proms);            
             });       
-        });        
-
-        compiler.hooks.emit.tapAsync('RWSAfterPlugin', (compilation, callback) => {      
-            Object.keys(compilation.assets).forEach((filename) => {
-            
-              if (filename.endsWith('.js')) {
-                const asset = compilation.assets[filename];
-                let source = asset.source();
-                if(source.indexOf('css`') > -1 || source.indexOf('html`') > -1){   
-                    console.log('replacing', filename);
-                  const updatedSource = source.replace(/\n/g, '');
+        });     
         
-                  // Update the asset with the new content
-                  compilation.assets[filename] = {
-                    source: () => updatedSource,
-                    size: () => updatedSource.length
-                  };
-                }          
-              }
+        if(!this.config.dev){
+            compiler.hooks.emit.tapAsync('RWSAfterPlugin', (compilation, callback) => {                  
+                Object.keys(compilation.assets).forEach((filename) => {
+                
+                  if (filename.endsWith('.js')) {
+                    const asset = compilation.assets[filename];
+                    let source = asset.source();                    
+    
+                    if((source.indexOf('css`') > -1 || source.indexOf('html`') > -1)){   
+                      const updatedSource = source.replace(/\n/g, '');
+            
+                      // Update the asset with the new content
+                      compilation.assets[filename] = {
+                        source: () => updatedSource,
+                        size: () => updatedSource.length
+                      };
+                    }          
+                  }
+                });
+          
+                callback();
             });
-      
-            callback();
-        });
+        }         
     }
 
     async _runActionType(actionType, action){