proxy classes and attributes

Author: pemrouz

.popper.yml

@@ -6,7 +6,6 @@ tests: (npm run build > /dev/null) && browserify ./test.js
   -i colors
   -i chai
   | sed -E "s/require\('chai'\)/window.chai/"
-  | uglifyjs
 
 watch: 
   - src

dist/index.js

@@ -18,27 +18,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function shadow(ripple) {
   if (!_client2.default) return;
   log('creating', document.head.createShadowRoot ? 'encapsulation' : 'closing gap');
+  ripple.render = render(ripple.render);
+  return ripple;
+}
 
-  var render = ripple.render;
-
-  ripple.render = function (el) {
-    el.createShadowRoot ? (!el.shadowRoot && el.createShadowRoot() && reflect(el), retarget(el)) : (el.shadowRoot = el, el.shadowRoot.host = el);
+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 render(el);
+    return next(el);
   };
+};
 
-  return ripple;
-}
-
-function reflect(el) {
-  el.shadowRoot.innerHTML = el.innerHTML;
-}
+var reflect = function reflect(el) {
+  return el.shadowRoot.innerHTML = el.innerHTML;
+};
 
-function retarget(el) {
-  keys(el).concat(['on', 'once', 'emit']).map(function (d) {
-    return el.shadowRoot[d] = el[d];
+var retarget = function retarget(el) {
+  return keys(el).concat(['on', 'once', 'emit', 'classList', 'getAttribute', 'setAttribute']).map(function (d) {
+    return el.shadowRoot[d] = is.fn(el[d]) ? el[d].bind(el) : el[d];
   });
-}
+};
 
 var log = require('utilise/log')('[ri/shadow]'),
     err = require('utilise/err')('[ri/shadow]');

src/index.js

@@ -4,32 +4,26 @@
 export default function shadow(ripple){
   if (!client) return;
   log('creating', document.head.createShadowRoot ? 'encapsulation' : 'closing gap')
-  
-  var render = ripple.render
-
-  ripple.render = function(el){
-    el.createShadowRoot 
-      ? (!el.shadowRoot && el.createShadowRoot() && reflect(el)
-        , retarget(el))
-      : ( el.shadowRoot = el
-        , el.shadowRoot.host = el)    
-
-    return render(el)
-  }
-
+  ripple.render = render(ripple.render)
   return ripple
 }
 
-function reflect(el) {
-  el.shadowRoot.innerHTML = el.innerHTML
-}
+const render = next => el => {
+  el.createShadowRoot 
+    ? (!el.shadowRoot && el.createShadowRoot() && (reflect(el), retarget(el)))
+    : ( el.shadowRoot = el
+      , el.shadowRoot.host = el)    
 
-function retarget(el) {
-  keys(el)
-    .concat(['on', 'once', 'emit'])
-    .map(d => el.shadowRoot[d] = el[d])
+  return next(el)
 }
 
-import client from 'utilise/client'
-var log = require('utilise/log')('[ri/shadow]')
-  , err = require('utilise/err')('[ri/shadow]')
+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 log = require('utilise/log')('[ri/shadow]')
+    , err = require('utilise/err')('[ri/shadow]')
+
+import client from 'utilise/client'

test.js

@@ -75,9 +75,9 @@ describe('Shadow DOM', function(){
 
     expect(el2.shadowRoot.__data__).to.be.eql(el2.__data__)
     expect(el2.shadowRoot.state).to.be.eql(el2.state)
-    expect(el2.shadowRoot.on).to.be.eql(el2.on)
-    expect(el2.shadowRoot.once).to.be.eql(el2.once)
-    expect(el2.shadowRoot.emit).to.be.eql(el2.emit)
+    expect(el2.shadowRoot.on).to.be.a('function')
+    expect(el2.shadowRoot.once).to.be.a('function')
+    expect(el2.shadowRoot.emit).to.be.a('function')
 
     el2.on('foo', function(d){
       expect(d).to.be.eql('bar')
@@ -87,5 +87,32 @@ describe('Shadow DOM', function(){
     el2.shadowRoot.emit('foo', 'bar')
   })
 
+  it('should retarget .classed and .attr', function(){  
+    var ripple = shadow(components(fn(data(core()))))
+
+    ripple('component-2', noop)
+    ripple.render(el2)
+
+    var root = el2.shadowRoot
+
+    expect(root.classList).to.be.eql(el2.classList)
+    expect(root.getAttribute).to.be.a('function')
+    expect(root.setAttribute).to.be.a('function')
+
+    if (el2.classList) {
+      expect(el2.className).to.be.eql('')
+      root.classList.add('foo')
+      expect(el2.className).to.be.eql('foo')
+      root.classList.remove('foo')
+      expect(el2.className).to.be.eql('')
+    }
+
+    expect(el2.getAttribute('foo')).to.be.eql(null)
+    expect(root.getAttribute('foo')).to.be.eql(null)
+    root.setAttribute('foo', 'bar')
+
+    expect(el2.getAttribute('foo')).to.be.eql('bar')
+    expect(root.getAttribute('foo')).to.be.eql('bar')
+  })
 
 })