batch renders for elements in addition to resources

rijs · Nov 23, 2015 · 3c4c32f · 3c4c32f
1 parent 893c0eb
commit 3c4c32f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -142,19 +142,28 @@ function resource(ripple) {
     var res = ripple.resources[name],
         type = (0, _header2.default)('content-type')(res);
 
-    return (ripple.types[type].render || _noop2.default)(res);
+    return (ripple.types[type].render || _noop2.default)(res); // TODO identity
   };
 }
 
 // batch renders on render frames
 function raf(ripple) {
   return function (res) {
-    return !(0, _header2.default)('pending')(res) && (res.headers.pending = requestAnimationFrame(function () {
+    return !(0, _header2.default)('pending')(res) && (res.headers.pending = requestAnimationFrame(function (d) {
       return delete ripple.resources[res.name].headers.pending, ripple.draw(res);
     }));
   };
 }
 
+// batch renders on render frames
+function batch(ripple) {
+  return function (el) {
+    return !el.pending && (el.pending = requestAnimationFrame(function (d) {
+      return delete el.pending, ripple.render(el);
+    }));
+  };
+}
+
 // main function to render a particular custom element with any data it needs
 function invoke(ripple) {
   return function (el) {
@@ -166,7 +175,7 @@ function invoke(ripple) {
     if (!el.draw) el.draw = function (d) {
       return ripple.draw(el);
     };
-    return ripple.render(el);
+    return batch(ripple)(el), el;
   };
 }
 

diff --git a/src/index.js b/src/index.js
@@ -10,7 +10,7 @@
 // MutationObserver(ripple.draw) - redraws element being observed
 
 export default function components(ripple){
-  if (!client) return ripple;
+  if (!client) return ripple
   log('creating')
 
   if (!customs) ready(polyfill(ripple))
@@ -64,20 +64,26 @@ function resource(ripple){
 // batch renders on render frames
 function raf(ripple){
   return res => !header('pending')(res) 
-      && (res.headers.pending = requestAnimationFrame(() => 
+      && (res.headers.pending = requestAnimationFrame(d => 
           (delete ripple.resources[res.name].headers.pending, ripple.draw(res))))
 }
 
+// batch renders on render frames
+function batch(ripple){
+  return el => !el.pending 
+     && (el.pending = requestAnimationFrame(d => (delete el.pending, ripple.render(el))))
+}
+
 // main function to render a particular custom element with any data it needs
 function invoke(ripple){ 
   return function(el) {
     if (el.nodeName == '#document-fragment') return invoke(ripple)(el.host)
     if (el.nodeName == '#text') return invoke(ripple)(el.parentNode)
-    if (!el.matches(isAttached)) return;
-    if (attr(el, 'inert') != null) return;
+    if (!el.matches(isAttached)) return
+    if (attr(el, 'inert') != null) return
     if (!el.on) emitterify(el)
     if (!el.draw) el.draw = d => ripple.draw(el)
-    return ripple.render(el)
+    return batch(ripple)(el), el
   }
 }
 
@@ -121,7 +127,7 @@ function drawCustomEls(ripple) {
 
 // clean local headers for transport
 function clean(ripple){
-  return function(res){
+  return res => {
     delete res.headers.pending
     return res
   }