Tracking Mount Probe

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action, notifyPropertyChange } from '@ember/object';
import { next } from '@ember/runloop';

class ProbeCell {
  constructor(name, pushLogEntry) {
    this.name = name;
  	this.pushLogEntry = pushLogEntry;
  }
  
  get value() {
    const data = Date.now();
    this.pushLogEntry(`${this.name}: ${data}`);
    return data;
  }
}

export default class ApplicationController extends Controller {
  @tracked foo = new ProbeCell('foo', this.pushLogEntry);
  @tracked bar = new ProbeCell('bar', this.pushLogEntry);

	@tracked isTrackingBarCell = false;

	@tracked isFooCellActive;
	@tracked isBarCellActive;

	@tracked log = [];
  latestUpdate = 0;

  @action
	pushLogEntry(entry) {
    this.latestUpdate++;
    // This avoid self-invalidation aka back-tracking re-render.
    next(() => this.log = [...this.log, entry]);
  }

  @action
  updateCell(cell) {
    notifyPropertyChange(cell, 'value');
  }

  @action
  toggleBarCellTracking() {
    this.isTrackingBarCell = !this.isTrackingBarCell;
  }

  isCellActive(cell) {
    const { latestUpdate } = this;
    
    notifyPropertyChange(cell, 'value');
    
    let resolve;
    const deferred = new Promise(_ => resolve = _);

    next(() => {
      resolve(this.latestUpdate !== latestUpdate);
    });
    
    return deferred;
  }

  @action
  async updateCellStates() {
    this.isFooCellActive = await this.isCellActive(this.foo);
    this.isBarCellActive = await this.isCellActive(this.bar);
  }
}

templates.application\.hbs

<button {{on "click" (fn this.updateCell this.foo)}}>
  update this.foo
</button>

<button {{on "click" (fn this.updateCell this.bar)}}>
  update this.bar
</button>

<button {{on "click" this.toggleBarCellTracking}}>
  toggle this.isTrackingBarCell
</button>

<button {{on "click" this.updateCellStates}}>
  probe cell states
</button>

<hr>

foo.value: {{this.foo.value}}
{{#if this.isTrackingBarCell}}
  bar.value: {{this.bar.value}}
{{/if}}

<hr>

isFooCellActive: {{this.isFooCellActive}}
isBarCellActive: {{this.isBarCellActive}}

<hr>

updateLog:

<ol>
  {{#each this.log as |u|}}
    <li>{{u}}</li>
  {{/each}}
</ol>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}