Little helper for Ember rerender visualisation

rerender-debug.css

[rerender] {
  transition: background 1s;
}
[rerender="2"] {
  background: #ffd7d7 !important;
  transition: background 0s;
}
[rerender="1"] {
  background: #d7deff !important;
  transition: background 0s;
}

rerender-debug.js

import Ember from 'ember';

const { Component } = Ember;

// stolen from $() for tagless pull request
function extactNodes(renderNode, filterText) {
  let firstNode = renderNode.firstNode;
 	let lastNode = renderNode.lastNode;
 	let node = firstNode;
 	let nodeList = [];
 
 	function testNode(node) {
 		// elements and text nodes
   	return (node.nodeType === 1 && !node.classList.contains('ember-view')) || 
      (!filterText && node.nodeType === 3 && /\S/.test(node.nodeValue));
 	}
 
  //handle first node
 	if (testNode(node)) { 
    nodeList.push(node); 
  }
 	node = node.nextSibling;
 
  while (node && node !== lastNode) {
		if (testNode(node)) { 
      nodeList.push(node); 
    }
    node = node.nextSibling;
  }
  
  //handle last node
  if (testNode(lastNode)) { 
    nodeList.push(lastNode); 
  }
 
  return nodeList;
}

export function initialize(application) {
  Component.reopen({
    didUpdateAttrs() {
      this._skip_rerender_attr = true;
      this._super(...arguments);
      var el = this.element;
      if (!el && this._renderNode) {
        el = extactNodes(this._renderNode);
      }
      if (!el) {
        window.x = this;
      }
      if (el) {
      	Ember.$(el).attr('rerender', '2');
      }
      console.log('Rerender ', this._debugContainerKey, el, ...arguments);
    },
    willRender() {
      if (this._skip_rerender_attr) {
      	this._skip_rerender_attr = false;
        return;
      }
      var el = this.element;
      if (!el && this._renderNode) {
        el = extactNodes(this._renderNode, true);
      }
      if (el) {
      	Ember.$(el).attr('rerender', '1');
      }
    },
    didRender() {
    	this._super(...arguments);
      var el = this.element;
      if (!el && this._renderNode) {
        el = extactNodes(this._renderNode, true);
      }
      if (el) {
        Ember.$(el).each(function() {
        	window.requestAnimationFrame(Ember.$(this).attr.bind(Ember.$(this), 'rerender', '0'));
        });
      }
  	}
  });
};

export default {
  name: 'rerender-debug',
  initialize: initialize
};