sukima · August 5, 2020 21:27 · Aug 5, 2020 · Aug 5, 2020 · Aug 5, 2020 · Aug 5, 2020
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -1,30 +1,48 @@
 import Controller from '@ember/controller';
-import EmberObject from '@ember/object';
+import EmberObject, { action } from '@ember/object';
 
-function logged(target, key, descriptor) {
-  let _value = descriptor.initializer?.();
-  console.log({ target, key, descriptor, _value });
-  descriptor.get = function() {
-    console.log(`Get ${key}`); // DOES NOT LOG!
-    return _value;
-  };
-  descriptor.set = function(value) {
-    console.log(`Set ${key}`); // DOES NOT LOG!
-    return (_value = value);
-  };
-  return descriptor;
+function trackedData(key, initializer) {
+  let values = new WeakMap();
+  let hasInitializer = typeof initializer === 'function';
+
+  function getter(self) {
+    let value;
+    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);
+    values.set(self, value);
+  }
+
+  return { getter, setter };
 }
 
-class Foo extends EmberObject {
-  @logged foobar = 'FOOBAR';
+function legacyTracked(target, key, descriptor) {
+  let { getter, setter } = trackedData(key, descriptor?.initializer);
+  return {
+    enumerable: true,
+    configurable: true,
+    get() {
+      return getter(this);
+    },
+    set(newValue) {
+      setter(this, newValue);
+    },
+  };
 }
 
 export default class ApplicationController extends Controller {
-  init() {
-    super.init(...arguments);
-    let foo = Foo.create();
-    console.log(`Result 1: ${foo.foobar}`);
-    foo.foobar = 'BARFOO';
-    console.log(`Result 2: ${foo.foobar}`);
+  @legacyTracked appName = 'FOOBAR';
+
+  @action
+  testIt() {
+    this.appName = 'BARFOO';
   }
 }
diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -1,6 +1,6 @@
 <h1>Welcome to {{this.appName}}</h1>
 <br>
 <br>
-{{outlet}}
+<button type="button" {{on "click" this.testIt}}>Click!</button>
 <br>
 <br>
diff --git a/twiddle\.json b/twiddle\.json
@@ -12,11 +12,11 @@
   },
   "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"
+    "ember": "3.12.2",
+    "ember-template-compiler": "3.12.2",
+    "ember-testing": "3.12.2"
   },
   "addons": {
     "@glimmer/component": "1.0.0"
   }
-}
+}
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -23,6 +23,8 @@ export default class ApplicationController extends Controller {
   init() {
     super.init(...arguments);
     let foo = Foo.create();
-    console.log(`Result: ${foo.foobar}`);
+    console.log(`Result 1: ${foo.foobar}`);
+    foo.foobar = 'BARFOO';
+    console.log(`Result 2: ${foo.foobar}`);
   }
 }
diff --git a/controllers.application\.js b/controllers.application\.js
@@ -5,11 +5,11 @@ function logged(target, key, descriptor) {
   let _value = descriptor.initializer?.();
   console.log({ target, key, descriptor, _value });
   descriptor.get = function() {
-    console.log(`Get ${key}`);
+    console.log(`Get ${key}`); // DOES NOT LOG!
     return _value;
   };
   descriptor.set = function(value) {
-    console.log(`Set ${key}`);
+    console.log(`Set ${key}`); // DOES NOT LOG!
     return (_value = value);
   };
   return descriptor;

diff --git a/controllers.application\.js b/controllers.application\.js
@@ -0,0 +1,28 @@
+import Controller from '@ember/controller';
+import EmberObject from '@ember/object';
+
+function logged(target, key, descriptor) {
+  let _value = descriptor.initializer?.();
+  console.log({ target, key, descriptor, _value });
+  descriptor.get = function() {
+    console.log(`Get ${key}`);
+    return _value;
+  };
+  descriptor.set = function(value) {
+    console.log(`Set ${key}`);
+    return (_value = value);
+  };
+  return descriptor;
+}
+
+class Foo extends EmberObject {
+  @logged foobar = 'FOOBAR';
+}
+
+export default class ApplicationController extends Controller {
+  init() {
+    super.init(...arguments);
+    let foo = Foo.create();
+    console.log(`Result: ${foo.foobar}`);
+  }
+}
diff --git a/templates.application\.hbs b/templates.application\.hbs
@@ -0,0 +1,6 @@
+<h1>Welcome to {{this.appName}}</h1>
+<br>
+<br>
+{{outlet}}
+<br>
+<br>
diff --git a/twiddle\.json b/twiddle\.json
@@ -0,0 +1,22 @@
+{
+  "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"
+  }
+}