use one-off transparent getters

Author: pemrouz

dist/index.js

@@ -34,7 +34,7 @@ var render = function render(next) {
   return function (el) {
     el.createShadowRoot ? !el.shadowRoot && el.createShadowRoot() && (reflect(el), retarget(el)) : (el.shadowRoot = el, el.shadowRoot.host = el);
 
-    return after(next(el));
+    return next(el);
   };
 };
 
@@ -44,13 +44,9 @@ var reflect = function reflect(el) {
 
 var retarget = function retarget(el) {
   return (0, _keys2.default)(el).concat(['on', 'once', 'emit', 'classList', 'getAttribute', 'setAttribute']).map(function (d) {
-    return el.shadowRoot[d] = _is2.default.fn(el[d]) ? el[d].bind(el) : el[d];
-  });
-};
-
-var after = function after(el) {
-  return (0, _keys2.default)(el).map(function (d) {
-    return el.shadowRoot[d] = el[d];
+    return _is2.default.fn(el[d]) ? el.shadowRoot[d] = el[d].bind(el) : Object.defineProperty(el.shadowRoot, d, { get: function get(z) {
+        return el[d];
+      } });
   });
 };
 

src/index.js

@@ -14,17 +14,16 @@ const render = next => el => {
     : ( el.shadowRoot = el
       , el.shadowRoot.host = el)    
 
-  return after(next(el))
+  return next(el)
 }
 
 const reflect = el => el.shadowRoot.innerHTML = el.innerHTML
 
 const retarget = el => keys(el)
   .concat(['on', 'once', 'emit', 'classList', 'getAttribute', 'setAttribute'])
-  .map(d => el.shadowRoot[d] = is.fn(el[d]) ? el[d].bind(el) : el[d])
-
-const after = el => keys(el)
-  .map(d => el.shadowRoot[d] = el[d])
+  .map(d => is.fn(el[d]) 
+    ? (el.shadowRoot[d] = el[d].bind(el)) 
+    : Object.defineProperty(el.shadowRoot, d, { get: z => el[d] }))
 
 const log = require('utilise/log')('[ri/shadow]')
     , err = require('utilise/err')('[ri/shadow]')

test.js

@@ -1,5 +1,7 @@
 var expect = require('chai').expect
+  , once = require('utilise/once')
   , noop = require('utilise/noop')
+  , time = require('utilise/time')
   , components = require('rijs.components').default
   , core = require('rijs.core').default
   , data = require('rijs.data').default
@@ -63,18 +65,20 @@ describe('Shadow DOM', function(){
   })
 
   it('should retarget utility functions', function(done){  
+    once(el2)
+
     var ripple = shadow(components(fn(data(core()))))
 
     ripple('component-2', noop)
 
     el2.__data__ = { foo: 'bar' }
     el2.state = { bar: 'foo' }
 
-    ripple.render(el1)
     ripple.render(el2)
 
     expect(el2.shadowRoot.__data__).to.be.eql(el2.__data__)
     expect(el2.shadowRoot.state).to.be.eql(el2.state)
+
     expect(el2.shadowRoot.on).to.be.a('function')
     expect(el2.shadowRoot.once).to.be.a('function')
     expect(el2.shadowRoot.emit).to.be.a('function')
@@ -87,6 +91,21 @@ describe('Shadow DOM', function(){
     el2.shadowRoot.emit('foo', 'bar')
   })
 
+  it('should return correct host values inside component', function(done){  
+    var ripple = shadow(components(fn(data(core()))))
+
+    el2.change = 1
+    ripple('component-2', function(){
+      expect(this.change).to.eql(this.host.change)
+      el2.change++
+    })
+
+    ripple.render(el2)
+    ripple.render(el2)
+
+    time(100, done)
+  })
+
   it('should retarget .classed and .attr', function(){  
     var ripple = shadow(components(fn(data(core()))))