re-render hooks

components.my-component.js

import Ember from 'ember';
//import { stringify } from 'twiddle/utils/stringify';

let lastValue = null;
let lastAttrsValue = null;

export default Ember.Component.extend({
    didUpdateAttrs() {
        //this._super(...arguments);
        console.log("didUpdateAttrs", 
            this.value, lastValue, this.value === lastValue,                    
            this.attrs.value, lastAttrsValue, this.attrs.value === lastAttrsValue,
            //stringify(this.attrs.value), stringify(lastAttrsValue),
            //stringify(this.attrs.value) === stringify(lastAttrsValue)
        );
        lastValue = this.value;
        lastAttrsValue = this.attrs.value;
    },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
    init() {
        this._super(...arguments);
        console.log('Controller init called');
    }
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL,
  didTransition: function() {
    this._super(...arguments);
    console.log('router didTransition');
  }  
});

Router.map(function() {
  this.route('item', { path: ':item_id' });
});

export default Router;

routes.item.js

import Ember from 'ember';

export default Ember.Route.extend({
    model(params) {
        console.log("model", params)
        return {
            value: "foo"
        }
    }
});

templates.application.hbs

{{#link-to "item" 1}}Goto 1{{/link-to}}
 
{{#link-to "item" 2}}Goto 2{{/link-to}}
{{log "app template rendered"}}
{{outlet}}

templates.components.my-component.hbs

{{log "component template rendered"}}
Component value = {{value}}

templates.item.hbs

{{my-component value=model.value}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}

utils.stringify.js

// From https://github.com/moll/json-stringify-safe/blob/master/stringify.js
export function stringify(obj, replacer, spaces, cycleReplacer) {
  return JSON.stringify(obj, serializer(replacer, cycleReplacer), spaces)
}

function serializer(replacer, cycleReplacer) {
  var stack = [], keys = []

  if (cycleReplacer == null) cycleReplacer = function(key, value) {
    if (stack[0] === value) return "[Circular ~]"
    return "[Circular ~." + keys.slice(0, stack.indexOf(value)).join(".") + "]"
  }

  return function(key, value) {
    if (stack.length > 0) {
      var thisPos = stack.indexOf(this)
      ~thisPos ? stack.splice(thisPos + 1) : stack.push(this)
      ~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key)
      if (~stack.indexOf(value)) value = cycleReplacer.call(this, key, value)
    }
    else stack.push(value)

    return replacer == null ? value : replacer.call(this, key, value)
  }
}

export default stringify;