ES6 Proxies

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sat Mar 30 2019 12:45:31 GMT-0400 (Eastern Daylight Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: ES6 Proxies
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: b8904db275b87cb4f72ea4818a8c902f
Keywords: 

My Notes
--------
March 30, 2019
In this workbook I explore the Proxy feature in JavaScript ES6.


References
----------
(1) https://hacks.mozilla.org/2015/07/es6-in-depth-proxies-and-reflect/

(2) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
    The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).

(3)

]]></Notes> 

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Block/>
  <Brick/>
  <Sphere/>
  
</_-.XholonClass>

<xholonClassDetails>
  <!--<Block>
    <port name="height" connector="Height"/>
  </Block>-->
</xholonClassDetails>

<PhysicalSystem>
  <Block/>
  <Brick/>
  <Sphere/>
</PhysicalSystem>

<Blockbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// Basic example, see ref [2]
// In this simple example the number 37 gets returned as the default value when the property name is not in the object. It is using the get handler.
let handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : 37;
  }
};

let p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

this.println(p.a + ", " + p.b); // 1, undefined
this.println('c' in p); // false
this.println(p.c); // 37
//# sourceURL=Blockbehavior.js
]]></Blockbehavior>

<Brickbehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
var target, handler, proxy, beh = {
postConfigure: function() {
  target = this.cnode.parent();
  handler = {
    get: function(obj, prop) {
      return prop in obj ? obj[prop] : "UNKNOWN";
    }
  };
  proxy = new Proxy(target, handler);
  proxy.aaa = 111;
  proxy.bbb = 222;
},
act: function() {
  target.println(proxy.bbb);
  //target.println(proxy.get("bbb")); // NO
  target.println(target.bbb);
  target.println(proxy.name());
}
}
//# sourceURL=Brickbehavior.js
]]></Brickbehavior>

<Spherebehavior implName="org.primordion.xholon.base.Behavior_gwtjs"><![CDATA[
// Validation example, see ref [2]
var me, handler, proxy, person, beh = {
postConfigure: function() {
  me = this.cnode.parent();
  let validator = {
    set: function(obj, prop, value) {
      if (prop === 'age') {
        if (!Number.isInteger(value)) {
          throw new TypeError('The age is not an integer: ' + value);
        }
        if (value > 200) {
          throw new RangeError('The age seems invalid: ' + value);
        }
      }
      
      // The default behavior to store the value
      obj[prop] = value;
      
      // Indicate success
      return true;
    }
  };
  
  person = new Proxy(me, validator);
},
act: function() {
  person.age = 100;
  me.println(person.age); // 100
  try {
    person.age = 'young'; // Throws an exception
  } catch(error) {
    me.println(error);
  }
  try {
    person.age = 300; // Throws an exception
  } catch(error) {
    me.println(error);
  }
}
}
//# sourceURL=Spherebehavior.js
]]></Spherebehavior>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Block</title>
    <rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Height</title>
      <rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>