tracking polyfill autotrack

controllers.application\.js

import Controller from '@ember/controller';
import EmberObject, { action, computed as emberComputed } from '@ember/object';

let currentAutoTrack;

function trackedData(key, initializer) {
    let values = new WeakMap();
    let autoTrackingData = new WeakMap();
    let hasInitializer = typeof initializer === 'function';

    function consumeTracking(self) {
        if (!currentAutoTrack) { return; }
        let [currentTarget, currentProperty] = currentAutoTrack;
        let data = autoTrackingData.get(self) ?? new Map();
        let trackedProperties = data.get(currentTarget) ?? new Set();
        trackedProperties.add(currentProperty);
        data.set(currentTarget, trackedProperties);
        autoTrackingData.set(self, data);
    }

    function notifyAutoTracked(self) {
        if (!autoTrackingData.has(self)) { return; }
        for (let [target, properties] of autoTrackingData.get(self)) {
            for (let property of properties) {
                target.notifyPropertyChange(property);
            }
        }
    }

    function cleanupAutoTracked(self) {
        autoTrackingData.get(self)?.clear();
    }

    function getter(self) {
        let value;
        consumeTracking(self);
        if (hasInitializer && !values.has(self)) {
            value = initializer.call(self);
            values.set(self, value);
        } else {
            value = values.get(self);
        }
        return value;
    }

    function setter(self, value) {
        self.notifyPropertyChange(key);
        notifyAutoTracked(self);
        cleanupAutoTracked(self);
        values.set(self, value);
    }

    return {
        consumeTracking,
        notifyAutoTracked,
        cleanupAutoTracked,
        getter,
        setter
    };
}

function tracked(target, key, descriptor) {
    let { getter, setter } = trackedData(key, descriptor?.initializer);
    return {
        enumerable: true,
        configurable: true,
        get() {
            return getter(this);
        },
        set(newValue) {
            setter(this, newValue);
        },
    };
}

function beginAutoTracking(self, key) {
    currentAutoTrack = [self, key]
}

function endAutoTracking(self, key) {
    currentAutoTrack = null;
}

function autotrack(target, key, descriptor) {
    let getter = descriptor.get;
    return {
        enumberable: true,
        configurable: true,
        get() {
            beginAutoTracking(this, key);
            try {
                return getter.call(this);
            } finally {
                endAutoTracking(this, key);
            }
        },
    };
}

function computed() {
    // TODO: figure out how to tap into a computed property dirty checking
    return emberComputed(...arguments);
}


EmberObject.reopen({
    init() {
        this._super(...arguments);
        const desc = Object.getOwnPropertyNames(this.constructor.prototype).forEach(el => {
            const desc = Object.getOwnPropertyDescriptor(this.constructor.prototype, el);
            if (desc.get && desc.get.name.startsWith('get ')) {
              
                Object.defineProperty(this, el, autotrack(this, el, desc))
            }
          
        });
    }
});

export default class ApplicationController extends Controller {

    @tracked appName = 'FOOBAR';
    appName2 = 'FOOBAR';

    get fancy() {
        return `${this.appName}-autotrack-getter`;
    }

    get nice() {
        return this.fancy;
    }

    @computed('appName')
    get computedFancy() {
        return `${this.appName}-computed-dependency`;
    }

@computed('computedDependTest')
    get computedFancyCombined() {
        return `${this.computedDependTest}-2`;
    }

    @computed('appName2')
    get computedDependTest() {
        return `${this.appName2}-1`;
    }

    @action
    testIt() {
        this.appName = 'BARFOO';
        this.set('appName2', 'BAZFOO');
    }
}

templates.application\.hbs

<button type="button" {{on "click" this.testIt}}>
  <code>this.appName = 'BARFOO'</code>
</button>

<dl>
<dt>Direct access</dt>
<dd>{{this.appName}}</dd>
<dt>Autotracked getter</dt>
<dd>{{this.fancy}}</dd>
<dt>Computed with dependancy</dt>
<dd>{{this.computedFancy}}</dd>
<dt>Computed through autotracked getter</dt>
<dd>{{this.computedFancyCombined}}</dd>
</dl>

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"
  }
}