New Twiddle

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

	@action
  runIt(model, e) {
    model.name = e.target.value;
    //console.log('inputting', model.isDirty);
  }
}

models.account\.js

import Model from './model';
import { tracked } from '@glimmer/tracking';

export default class AccountModel extends Model {
  @tracked id;
  @tracked name;
}

models.model\.js

import { tracked } from '@glimmer/tracking';

export default class Model {
  _canonicalState = {};
  @tracked _dirtySet = new Set();

  static create(initialProps) {
    const klass = new this();
    klass.setProperties(initialProps || {});
    klass.persist();
    return klass;
  }

  constructor() {
    return new Proxy(this, {
      set(target, prop, value, receiver) {
        console.log('running setter');
        const ogVal = Reflect.get(target._canonicalState, prop);
        if (ogVal !== value) {
          target._dirtySet.add(prop);
          //target._dirtySet = new Set(target._dirtySet);
        } else {
          target._dirtySet.delete(prop);
          //target._dirtySet = new Set(target._dirtySet);
        }
        return Reflect.set(target, prop, value, receiver);
      },
    });
  }

  get isDirty() {
    console.log('%cMSG::', 'color:#faae3c;', 'calc isDirty'); 
    return Boolean(this._dirtySet.size);
  }

  persist() {
    this._canonicalState = Object.assign({}, this); //shallow clone ok for now
    this._dirtySet = new Set();
    return true;
  }

  setProperties(props) {
    for (const [k, v] of Object.entries(props)) {
      Reflect.set(this, k, v);
    }
  }
}

routes.application\.js

import Route from '@ember/routing/route';
import AccountModel from '../models/account';

export default Route.extend({
  model() {
    const acc = AccountModel.create({id: '1', name: 'Ryan'});
    console.log(acc);
    return acc;
  }
});

templates.application\.hbs

<input value={{@model.name}} {{on 'input' (fn this.runIt @model)}}  />

IsDirty: {{@model.isDirty}}

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