trackedSpread

controllers.application\.js

import Controller from '@ember/controller';
import { MyClass } from '../my-class'
import { action } from '@ember/object'

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

	myClass = new MyClass()
  clone = new MyClass(trackedSpread(this.myClass, { a: 'foo' }))

	get foo() {
    console.log({ ...this.myClass })
    console.log(trackedSpread(this.myClass))
    return {
    	...this.myClass
  	}
  }

  @action updateClone() {
		this.clone.a = 'bar'
  }
}

export function trackedSpread(entry, options = {}) {
  return {
    ...entry,
    ...Object.entries(Object.getOwnPropertyDescriptors(entry.__proto__))
				.filter(([key, desc]) => desc.enumerable)
        .reduce((acc, [key]) => {
					acc[key] = entry[key]
  				return acc
				}, {}),
  	...options
	}
}

my-class\.js

import { tracked } from '@glimmer/tracking'

export class MyClass {
  constructor(args) {
    Object.assign(this, args)
  }
  
  @tracked a = 'a'
	@tracked b = 'b'
  c = 'c'

	get x() {
    return 'x'
  }

  y() {
    this.c = 'd'
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
<div>
original a = {{this.myClass.a}}
</div>
<div>
clone a = {{this.clone.a}}
</div>
<button {{on 'click' this.updateClone}}>Update clone</button>
<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"
  }
}