Feat: Include Glimmer component arguments as being tracked

transforms/tracked-properties/__testfixtures__/complex.input.js

@@ -16,4 +16,9 @@ export default class Foo extends Component {
   get phoneNumber() {
     return `(${get(this, 'areaCode')}) ${get(this, 'phone')}`;
   }
+
+  @computed('args.foo')
+  get ignoreArgsInEmberComponent() {
+    return this.args.foo ?? 1;
+  }
 }

transforms/tracked-properties/__testfixtures__/complex.output.js

@@ -16,4 +16,9 @@ export default class Foo extends Component {
   get phoneNumber() {
     return `(${get(this, 'areaCode')}) ${get(this, 'phone')}`;
   }
+
+  @computed('args.foo')
+  get ignoreArgsInEmberComponent() {
+    return this.args.foo ?? 1;
+  }
 }

transforms/tracked-properties/__testfixtures__/glimmer-args.input.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { computed } from '@ember/object';
+
+export default class Foo extends Component {
+  @computed('args.foo')
+  get bazInfo() {
+    return this.args.foo ?? 1;
+  }
+
+  @computed('args.no.nested')
+  get noNested() {
+    return this.args.no.nested ?? 2;
+  }
+
+  @computed('args.{x,y,z}')
+  get braceExpansion() {
+    return this.args.x + this.args.y + this.args.z;
+  }
+}

transforms/tracked-properties/__testfixtures__/glimmer-args.output.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { computed } from '@ember/object';
+
+export default class Foo extends Component {
+  get bazInfo() {
+    return this.args.foo ?? 1;
+  }
+
+  @computed('args.no.nested')
+  get noNested() {
+    return this.args.no.nested ?? 2;
+  }
+
+  get braceExpansion() {
+    return this.args.x + this.args.y + this.args.z;
+  }
+}

transforms/tracked-properties/index.js

@@ -4,6 +4,7 @@ const {
   getDependentKeys,
   buildTrackedDecorator,
   reformatTrackedDecorators,
+  filterGlimmerArgs,
 } = require('./utils/helper');
 
 const { getOptions } = require('codemod-cli');
@@ -37,6 +38,18 @@ function _isComputedProperty(nodeItem) {
   );
 }
 
+/**
+ * Returns true if the file is a Glimmer component.
+ * @param {*} j 
+ * @param {*} root 
+ */
+function _isGlimmerComponent(j, root) {
+  return root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === '@glimmer/component')
+    .length === 1;
+}
+
 /**
  * If the nodeItem is a computed property, then return an array of argument values.
  * @param {*} nodeItem
@@ -58,6 +71,7 @@ module.exports = function transformer(file, api) {
   let computedPropsMap = {};
   let shouldImportBeAdded = false;
   const j = getParser(api);
+  const isGlimmerComponent = _isGlimmerComponent(j, j(file.source));
 
   j(file.source)
     .find(j.ClassBody)
@@ -148,11 +162,17 @@ module.exports = function transformer(file, api) {
                 ? decoratorItem.expression.callee.object.arguments
                 : decoratorItem.expression.arguments;
 
-              const dependentKeys = getDependentKeys(
+              let dependentKeys = getDependentKeys(
                 computedPropArguments,
                 computedPropsMap,
                 classProps
               );
+
+              // When working in a Glimmer component, filter our args which are tracked by default
+              if (isGlimmerComponent) {
+                dependentKeys = filterGlimmerArgs(dependentKeys);
+              }
+
               // If all the arguments of the decorator are class properties, then remove the decorator completely
               // from the item.
               if (!dependentKeys.length) {

transforms/tracked-properties/utils/helper.js

@@ -44,6 +44,14 @@ function getDependentKeys(computedArgs, computedPropsMap, classProperties) {
   });
 }
 
+/**
+ * Return the array of arguments that are not simple, non-nested, Glimmer component arguments.
+ * @param {*} computedArgs
+ */
+function filterGlimmerArgs(computedArgs) {
+  return computedArgs.filter(argItem => !(argItem.value.startsWith('args.') && argItem.value.split('.').length === 2))
+}
+
 /**
  * Checks the chained dependency among the arguments to see if there is any
  * value that is not a local class property.
@@ -120,4 +128,5 @@ module.exports = {
   getDependentKeys,
   buildTrackedDecorator,
   reformatTrackedDecorators,
+  filterGlimmerArgs,
 };