Add measure hook

[locks]

This is a migration of emberjs/ember.js#11506 to this repo. Consult that issue for the full discussion.

Quoting @krisselden:

Add a measure hook that corresponds to didRender that silences deprecation notice for scheduling a revalidation during render.

Currently if you cause a revalidation of render during render you get a deprecation during rendering implying that support for this will eventually go away. There still exists a use case for this, where you need to render something different based on measurements of what has been rendered so far.

An example would be if you increase the height and wanted to add an additional subtree like list-view.

cc @krisselden @stefanpenner @mixonic @eccegordo

[remkoboschker]

I have implemented a textarea that grows according to the length. I simply add one to the rows until the scrollHeight no longer exceeds the clientHeight. To avoid the deprecation warnings I put the measurement on the afterRender queue. It works fine, but when the content grows the rows are increased only after the render and so a scroll bar pops up and disappears (also resetting the cursor to the end of the text). I have been trying to avoid the flicker of the scrollbar by somehow access the element before it is inserted. The willInsertElement provides access to element, but it seems to be only called on the first render. What are your thoughts on a work around at the moment?

  didReceiveAttrs(){
    this.set('model', Object.assign({}, this.get('model'), {
      text: this.get('value'),
      rows: this.get('min-rows')
    }));
    Ember.run.scheduleOnce('afterRender', this, 'growRows');
  },
  growRows() {
    const el = this.$('textarea')[0];
    const rows = this.get('model.rows');
    if(el.scrollHeight > el.clientHeight) {
      this.set('model', Object.assign({}, this.get('model'), {
        rows: rows + 1
      }));
      Ember.run.scheduleOnce('afterRender', this, 'growRows');
    }
  },
  callUpdate(val){
    this.sendAction('update', val);
    Ember.run.scheduleOnce('afterRender', this, 'growRows');
  },
  actions: {
    throttledUpdate(val){
      Ember.run.throttle(this, 'callUpdate', val, 200);
    }
  }