should make changes accessible

dist/index.js

@@ -129,8 +129,10 @@ var resource = function resource(ripple) {
 // batch renders on render frames
 var batch = function batch(ripple) {
   return function (el) {
-    return !el.pending && (el.pending = requestAnimationFrame(function (d) {
-      return delete el.pending, ripple.render(el);
+    return el.pending ? el.pending.push(ripple.change) : (el.pending = [ripple.change], requestAnimationFrame(function (d) {
+      el.change = el.pending;
+      delete el.pending;
+      ripple.render(el);
     }));
   };
 };

src/index.js

@@ -60,8 +60,14 @@ const resource = ripple => name => {
 }
 
 // batch renders on render frames
-const batch = ripple => el => !el.pending 
-  && (el.pending = requestAnimationFrame(d => (delete el.pending, ripple.render(el))))
+const batch = ripple => el => el.pending
+  ? el.pending.push(ripple.change)
+  : (el.pending = [ripple.change]
+  , requestAnimationFrame(d => {
+      el.change = el.pending
+      delete el.pending
+      ripple.render(el)
+    }))
 
 // main function to render a particular custom element with any data it needs
 const invoke = ripple => el => { 

test.js

@@ -433,4 +433,27 @@ describe('Custom Elements', function(){
     })
   })
 
+  it('should make changes accessible', function(done){
+    var ripple = components(fn(data(core())))
+      , result
+
+    once(container)('component-28[data="foo"]', 1)
+    ripple('component-28', function(){ result = this.change })
+    ripple('foo', [{ bar: 5 }, { baz: 10 }])
+
+    time(50, function(){
+      result = null
+      update('bar', 15)(ripple('foo'))
+      update('baz', 25)(ripple('foo'))
+    })
+
+    time(100, function(){
+      expect(result).to.eql([
+        ['foo', { type: 'update', key: 'bar', value: 15, time: 1}]
+      , ['foo', { type: 'update', key: 'baz', value: 25, time: 2}]
+      ])
+      done()
+    })
+  })
+
 })