Pulse the template every time it is rendered in Meteor

Question

I would like to have every template pulse every time it is rendered. To have a visual debugging tool to see what is being rendered. So I imagine something like that when a template (a small segment) is rendered, its background color is set to red and then this red color slowly fades into original background color or whatever the background was (even if it was transparent). So if I see that something is all the time red, I know that it is being redrawn all the time.

Answer 1

Based on the code from @Hubert OG and an idea from this blog post, I made the following debugging code for Meteor rendering:

pulseNode = (i, node) ->
  return unless node.style

  $node = $(node)
  prePulseCss = $node.data('prePulseCss') ? node.style.cssText
  prePulseBackgroundColor = $node.data('prePulseBackgroundColor') ? $node.css('backgroundColor')
  $node.data(
    'prePulseCss': prePulseCss
    'prePulseBackgroundColor': prePulseBackgroundColor
  ).css('backgroundColor', 'rgba(255,0,0,0.5)').stop('pulseQueue', true).animate(
    backgroundColor: prePulseBackgroundColor
  ,
    duration: 'slow'
    queue: 'pulseQueue'
    done: (animation, jumpedToEnd) ->
      node.style.cssText = prePulseCss
  ).dequeue 'pulseQueue'

pulse = (template) ->
  $(template.firstNode).nextUntil(template.lastNode).addBack().add(template.lastNode).each pulseNode

_.each Template, (template, name) ->
  oldRendered = template.rendered
  counter = 0

  template.rendered = (args...) ->
    console.debug name, "render count: #{ ++counter }"
    oldRendered.apply @, args if oldRendered
    pulse @

Answer 2

Here's a simple blink. Animating background color requires additional libraries, see jQuery animate backgroundColor .

var pulseNode = function(node) {
    if(!node.style) return;
    var prev = node.style['background-color'] || 'rgba(255,0,0,0)';
    $(node).css('background-color', 'red');
    setTimeout(function() {
      $(node).css('background-color', prev);
    }, 1000);            
};

pulse = function(template) {
    for(var node = template.firstNode; true; node = node.nextSibling) {
        pulseNode(node);
        if(node === template.lastNode) return;
    }
}

Now, for each template you want to use this, do

Template.asdf.rendered = function() {
    pulse(this);
}