Immutable Proxy

controllers.application\.js

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

class Ref {
  @tracked p = 0;
}

function immutable(value, tag) {
  return new Proxy(value, {
    get(_, key) {
      tag.p; // subscribe
      return value[key];
    },
    set(_, key) {
      throw new Error(`Immutable`);
    }
  });
}
function mutable(value, tag, status) {
  return new Proxy(value, {
    set(_, key, v) {
      if (status.revoked === true) {
        throw new Error(`Immutable`);
      }
      tag.p++; // subscribe
      value[key] = v;
    }
  });
}

function box(value) {
  const tag = new Ref();
  const boxed = immutable(value, tag);
  const unwrap = () => {
    const status = { revoked: false };
    const mut = mutable(value, tag, status);
    const revoke = () => status.revoked = true;
    return { value: mut, revoke };
  };
	return { value: boxed, unwrap };
}

const { value, unwrap } = box({ name: 'Twiddle' });

let count = 1;
export default class ApplicationController extends Controller {
  get appName() {
    return value.name;
  }

	@action
  mutate() {
    console.log('mutating value');
    const mutable = unwrap(value);
    mutable.value.name = 'Twiddle ' + String(++count);
    console.log('mutated value', value.name);
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<button {{on 'click' this.mutate}}>Update Count</button>
<br>
{{outlet}}
<br>
<br>

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