New Twiddle

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  init () {
    this._super(...arguments);
    console.log(this.get('name') + " component init");
  },
  willInsertElement () {
    console.log(this.get('name') + " component willInsertElement");
  },
  willClearRender () {
    console.log(this.get('name') + " component willClearRender");
  },
  willDestroyElement () {
    console.log(this.get('name') + " component willDestroyElement");
  }
});   
  

components.use-v2.js

import Ember from 'ember';
import {addV2Classes, addV1Classes} from 'twiddle/utils/use-v2';

export default Ember.Component.extend({
  willInsertElement () {
    this._super(...arguments);
  	addV2Classes();
  },
  willClearRender () {
    this._super(...arguments);
    // Unfortunately component hooks have a similar issue
    //debugger;
    addV1Classes();
    //debugger;
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
}); 

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('blog');
  this.route('with-component');
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  

}); 

routes.blog.js

import Ember from 'ember';
import {addV2Classes, addV1Classes} from 'twiddle/utils/use-v2';

export default Ember.Route.extend({
  onActivate: function() {
    addV2Classes();
    window.console.log('blog activate');
  }.on('activate'),
  onDeActivate: function(){
    addV1Classes();
    // Adding a debugger statemeent here shows that the style is reset before we remove the content, so this is the *wrong* hook
    // debugger
    window.console.log('blog deactivate');
  }.on('deactivate'),
  actions: {
    willTransition: function() {
      window.console.log('blog onWillTransition');
    },
    didTransition: function() {
      window.console.log('blog onDidTransition');
    }
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  onActivate: function() {
    window.console.log('index activate');
  }.on('activate'),
  onDeActivate: function(){
    window.console.log('index deactivate');
  }.on('deactivate'),
  actions: {
    willTransition: function() {
      window.console.log('index onWillTransition');
    },
    didTransition: function() {
      window.console.log('index onDidTransition');
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.v1 {
  background: red;
}
.v2 {
  background: yellow;
}

templates.application.hbs

<div class="v1">
  <h1>Welcome to {{appName}}</h1>
  <br>
  <br>
  {{outlet}}
  {{#link-to "blog"}}Route Mixin{{/link-to}}
  {{#link-to "with-component"}}Component Toggle{{/link-to}}
  {{#link-to "index"}}Index{{/link-to}}
  <br>
  <br> 
</div>

templates.blog.hbs

{{my-component name="blog"}}

templates.components.my-component.hbs

{{name}}

templates.index.hbs

{{my-component name="index"}}

templates.with-component.hbs

{{use-v2}}
{{my-component name="with-component"}}

twiddle.json

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

utils.use-v2.js

let changeCounter = 0;
export function addV2Classes () {
  changeCounter++;
  $('.v1').toggleClass('v2 v1');
}

export function addV1Classes () {
  changeCounter--
  if (changeCounter === 0) {
  	$('.v2').toggleClass('v2 v1');
  }
}