@rws-framework/client 2.9.2 → 2.9.4

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.2",
-    "main": "src/index.ts",    
+    "version": "2.9.4",
+    "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/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 watcher: any = void 0) {  
+        super(name, watcher);
+    }
+}

package/src/components/_attrs/_extended_accessor.ts

@@ -0,0 +1,35 @@
+import { Observable, Accessor } from "@microsoft/fast-element";
+
+export abstract class ExtendedObservableAccessor implements Accessor {
+    protected field: string;
+    protected callback: string;
+
+    constructor(public name: string, 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 source[this.field];
+    }
+
+    setValue(source: any, newValue: any): void {
+        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_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 watcher: any = void 0) {  
+        super(name, watcher , '');
+    }
+}

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

@@ -31,6 +31,9 @@ function applyDecorator(target: TargetType, prop: string, config: AttributeConfi
 
 function modifyPropertyDescriptor(target: any, propertyKey: string): void {
     const privatePropName = `_${String(propertyKey)}`;
+
+    Observable.track(target, propertyKey);
+
     Object.defineProperty(target, privatePropName, {
         writable: true,
         value: target[propertyKey],
@@ -39,15 +42,15 @@ function modifyPropertyDescriptor(target: any, propertyKey: string): void {
     Object.defineProperty(target, propertyKey, {
         get() {
             const value: string = this[privatePropName];                
+            
             return isNgValue(value) ? null : value;
         },
         set(value: any) {                
-            if (typeof value === 'string' && isNgValue(value)) {                    
+            if (typeof value === 'string' && isNgValue(value)) {                                    
                 this[privatePropName] = null; // Set to null if condition is met
             } else {
-                this[privatePropName] = value;
-            }
-            Observable.notify(this, propertyKey);
+                this[privatePropName] = value;                
+            }            
         },
     });
 }

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

@@ -0,0 +1,3 @@
+import { Observable, Accessor, observable as parentObservable} from '@microsoft/fast-element';
+import { externalObservable as externalAttr } from './external-observable';
+export { externalAttr };

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

@@ -1,72 +1,49 @@
-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 { Observable, Accessor, observable as parentObservable} from '@microsoft/fast-element';
 
-import * as he from 'he';
+import RWSViewComponent from '../_component';
+import { DefaultObservableAccessor } from './_default_observable_accessor';
+import { ExternalObservableAccessor } from './_external_observable_accessor';
 
-type SanitizeOptions = IOptions & { fullEncode?: boolean };
 
-const heOpt: he.EncodeOptions = {
-    useNamedReferences: false, 
-    encodeEverything: true,
-};
+type ExternalObservableOptions = {} | unknown;
 
-function enc(html: string): string
-{
-    return he.encode(html, heOpt);
+function isString(test: unknown){
+    return typeof test === 'string';
 }
 
+function externalObservable(targetComponent: RWSViewComponent | unknown, nameOrAccessor: string | Accessor, opts: ExternalObservableOptions = null): void | any 
+{        
 
-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
-        }
-    };
-};
+    const target = targetComponent as any;
+    const propName = typeof nameOrAccessor === 'string' ? nameOrAccessor : nameOrAccessor.name;
 
-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],
-    });
+    if (isString(nameOrAccessor)) {
+        nameOrAccessor = new DefaultObservableAccessor(propName);
+    }    
 
-    Object.defineProperty(target, propertyKey, {
-        get() {
-            return this[privatePropName];                             
-        },
-        set(value: any) {                 
-            console.log('[DEBUG] external changed', propertyKey);      
-            this[privatePropName] = value;
-            Observable.notify(this, propertyKey);
-        },
-    });
-}
+    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);
 
-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);
-    }
+        Reflect.defineProperty(target, accessor.name, {
+            enumerable: true,
+            get(this: any) {
+                return accessor.getValue(this);
+            },
+            set(this: any, newValue: any) {                
+                accessor.setValue(this, newValue);
+            },
+        });
+    }   
 }
   
 
-export { externalAttr };
+export { externalObservable };

package/src/components/_decorator.ts

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

package/src/index.ts

@@ -11,7 +11,8 @@ 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 RWSClient, { RWSClientInstance } from './client';
 import { RWSPluginEntry } from './types/IRWSConfig';
@@ -69,6 +70,7 @@ export {
     RWSIgnore,
     RWSInject,    
     observable,
+    externalObservable,
     externalAttr,
     attr,
     ngAttr,

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,28 +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');
+                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;