@rws-framework/client 2.20.2 → 2.20.4

package/package.json

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

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

@@ -0,0 +1,62 @@
+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) => {                
+        try {
+            return JSON.parse(val);
+        }catch(e){
+            console.error(e);
+            return undefined;
+        }
+        
+    }    
+}
+
+export function jsonAttr(
+    config?: DecoratorAttributeConfiguration, 
+): (target: {}, property: string) => void;
+
+export function jsonAttr(target: {}, property: string, opts?: ExAttrOpts): void;
+export function jsonAttr(
+    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) {
+            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/index.ts

@@ -10,6 +10,8 @@ import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/S
 import { ngAttr } from './components/_attrs/angular-attr';
 import { externalObservable } from './components/_attrs/external-observable';
 import { externalAttr } from './components/_attrs/external-attr';
+import { jsonAttr } from './components/_attrs/json-attr';
+
 import { RWSPlugin } from './plugins/_plugin';
 import RWSClient, { RWSClientInstance } from './client';
 import RWSViewComponent from './components/_component';
@@ -62,6 +64,7 @@ export {
     observable,
     externalObservable,
     externalAttr,
+    jsonAttr,
     attr,
     ngAttr,