Handle non computed decorators

Author: Suchita Doshi

transforms/tracked-properties/README.md

@@ -9,13 +9,15 @@ npx ember-tracked-properties-codemod path/of/files/ or/some**/*glob.js
 ## Input / Output
 
 <!--FIXTURES_TOC_START-->
-* [basic-with-prefix-false](#basic-with-prefix-false)
-* [basic](#basic)
-* [chained-complex-computed](#chained-complex-computed)
-* [chained-computed](#chained-computed)
-* [complex](#complex)
-* [with-tracked](#with-tracked)
-<!--FIXTURES_TOC_END-->
+
+- [basic-with-prefix-false](#basic-with-prefix-false)
+- [basic](#basic)
+- [chained-complex-computed](#chained-complex-computed)
+- [chained-computed](#chained-computed)
+- [complex](#complex)
+- [non-computed-decorators](#non-computed-decorators)
+- [with-tracked](#with-tracked)
+  <!--FIXTURES_TOC_END-->
 
 ## <!--FIXTURES_CONTENT_START-->
 
@@ -269,6 +271,63 @@ export default class AddTeamComponent extends Component {
 
 ---
 
+<a id="non-computed-decorators">**non-computed-decorators**</a>
+
+**Input** (<small>[non-computed-decorators.input.js](__testfixtures__/non-computed-decorators.input.js)</small>):
+
+```js
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class Foo extends Component {
+  bar;
+  baz = 'barBaz';
+
+  @alias('model.isFoo')
+  isFoo;
+
+  @computed('baz', 'isFoo')
+  get bazInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'baz')}` : 'Baz';
+  }
+
+  @computed('bar', 'isFoo').readOnly()
+  get barInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'bab')}` : 'Bar';
+  }
+}
+```
+
+**Output** (<small>[non-computed-decorators.output.js](__testfixtures__/non-computed-decorators.output.js)</small>):
+
+```js
+import { tracked } from '@glimmer/tracking';
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class Foo extends Component {
+  bar;
+  @tracked baz = 'barBaz';
+
+  @alias('model.isFoo')
+  isFoo;
+
+  @computed('isFoo')
+  get bazInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'baz')}` : 'Baz';
+  }
+
+  @computed('bar', 'isFoo').readOnly()
+  get barInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'bab')}` : 'Bar';
+  }
+}
+```
+
+---
+
 <a id="with-tracked">**with-tracked**</a>
 
 **Input** (<small>[with-tracked.input.js](__testfixtures__/with-tracked.input.js)</small>):

transforms/tracked-properties/__testfixtures__/non-computed-decorators.input.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class Foo extends Component {
+  bar;
+  baz = 'barBaz';
+
+  @alias('model.isFoo')
+  isFoo;
+
+  @computed('baz', 'isFoo')
+  get bazInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'baz')}` : 'Baz';
+  }
+
+  @computed('bar', 'isFoo').readOnly()
+  get barInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'bab')}` : 'Bar';
+  }
+}

transforms/tracked-properties/__testfixtures__/non-computed-decorators.output.js

@@ -0,0 +1,22 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+import { alias } from '@ember/object/computed';
+
+export default class Foo extends Component {
+  bar;
+  @tracked baz = 'barBaz';
+
+  @alias('model.isFoo')
+  isFoo;
+
+  @computed('isFoo')
+  get bazInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'baz')}` : 'Baz';
+  }
+
+  @computed('bar', 'isFoo').readOnly()
+  get barInfo() {
+    return get(this, 'isFoo') ? `Name: ${get(this, 'bab')}` : 'Bar';
+  }
+}

transforms/tracked-properties/index.js

@@ -25,29 +25,28 @@ module.exports = function transformer(file, api) {
       path.node.body.forEach(classItem => {
         // Collect all the class properties in the file and add it to the
         // classProps array.
-        if (classItem.type === 'ClassProperty') {
+        if (classItem.type === 'ClassProperty' && !classItem.decorators) {
           classProps.push(classItem.key.name);
         }
         // Collect all the dependent keys of the computed properties present in the file
         // and add it to the computedProps array.
-        if (classItem.type === 'ClassMethod') {
-          if (classItem.kind === 'get') {
-            classProps.push(classItem.key.name);
-          }
-          if (classItem.decorators) {
-            classItem.decorators.forEach(decoratorItem => {
-              if (
-                decoratorItem.expression.callee &&
-                decoratorItem.expression.callee.name === 'computed'
-              ) {
-                const argValues = decoratorItem.expression.arguments.map(
-                  item => item.value
-                );
-                computedPropsMap[classItem.key.name] = argValues;
-                computedProps = computedProps.concat(argValues);
-              }
-            });
-          }
+        if (
+          classItem.type === 'ClassMethod' &&
+          classItem.kind === 'get' &&
+          classItem.decorators
+        ) {
+          classItem.decorators.forEach(decoratorItem => {
+            if (
+              decoratorItem.expression.callee &&
+              decoratorItem.expression.callee.name === 'computed'
+            ) {
+              const argValues = decoratorItem.expression.arguments.map(
+                item => item.value
+              );
+              computedPropsMap[classItem.key.name] = argValues;
+              computedProps = computedProps.concat(argValues);
+            }
+          });
         }
       });
     });
@@ -61,14 +60,14 @@ module.exports = function transformer(file, api) {
   let trackedConvertedSource = j(file.source)
     .find(j.ClassProperty)
     .forEach(path => {
-      if (computedProps.includes(path.node.key.name)) {
+      if (!path.node.decorators && computedProps.includes(path.node.key.name)) {
         shouldImportBeAdded = true;
-        var decorated = buildTrackedDecorator(
-          path.node.key.name,
-          path.node.value,
-          j
-        );
-        path.replace(decorated);
+        const trackedDecorator = buildTrackedDecorator(path.node.key.name, j);
+        
+        // @TODO: Determine if @tracked can be prefixed alongside other decorators in a property,
+        // if yes, then change this code to push the trackedDecorator along with the
+        // others.
+        path.node.decorators = trackedDecorator;
       }
       return path;
     })

transforms/tracked-properties/utils/helper.js

@@ -59,13 +59,15 @@ function _doesContainNonLocalArgs(argItem, computedMap, classProperties) {
 
   while (stack.size() > 0) {
     currItem = stack.pop();
-    // If currItem is not a class property, return true.
-    if (!classProperties.includes(currItem)) {
+    const dependentKeys = computedMap[currItem];
+
+    // If currItem is not a class property and
+    // if it is not a computed property with dependent keys, return true.
+    if (!classProperties.includes(currItem) && !dependentKeys) {
       return true;
     }
     // If currItem itself is a computed property, then it would have dependent keys.
     // Get the dependent keys and push them in the stack.
-    const dependentKeys = computedMap[currItem];
     if (dependentKeys) {
       stack.push(...dependentKeys);
     }
@@ -78,15 +80,13 @@ function _doesContainNonLocalArgs(argItem, computedMap, classProperties) {
  * the key and values provided.
  * @param {*} macroName
  * @param {*} name
- * @param {*} value
  * @param {*} j
  */
-function buildTrackedDecorator(name, value, j) {
+function buildTrackedDecorator(name, j) {
   var node = j('class Fake { @tracked' + ' ' + name + '; \n}')
     .find(j.ClassProperty)
     .get().node;
-  node.value = value;
-  return node;
+  return node.decorators;
 }
 
 /**