Merge pull request #2 from ember-codemods/suchita/prefix

Fix the inline prefix issue and added an option for default prefixing

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-*.log
+*.log
+.DS_Store

README.md

@@ -20,7 +20,11 @@ A codemod for transforming your ember app code to start using `@tracked` propert
 npx ember-tracked-properties-codemod path/of/files/ or/some**/*glob.hbs
 ```
 
-
+The codemod accepts the following options:
+
+|        Option         |  Value  |             Default             |                                                                     Details                                                                      |
+| --------------------- | ------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--always-prefix`      | boolean | `true`                          | Always prefix `@tracked` inline                                                                             |
 
 ## Contributing
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ember-tracked-properties-codemod",
   "description": "A codemod for transforming your ember app code to start using `@tracked` properties.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": {
     "name": "Suchita Doshi",
     "email": "suchitadoshi1987@gmail.com",
@@ -14,10 +14,14 @@
   },
   "bin": "./bin/cli.js",
   "keywords": [
-    "codemod-cli"
+    "codemod-cli",
+    "codemods",
+    "ember",
+    "ember-codemod",
+    "ember-tracked-properties"
   ],
   "dependencies": {
-    "codemod-cli": "^0.2.7"
+    "codemod-cli": "^2.1.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.7.4",

transforms/tracked-properties/README.md

@@ -9,12 +9,14 @@ npx ember-tracked-properties-codemod path/of/files/ or/some**/*glob.hbs
 ## Input / Output
 
 <!--FIXTURES_TOC_START-->
-* [basic](#basic)
-* [chained-complex-computed](#chained-complex-computed)
-* [chained-computed](#chained-computed)
-* [complex](#complex)
-* [with-tracked](#with-tracked)
-<!--FIXTURES_TOC_END-->
+
+- [basic](#basic)
+- [basic-with-prefix-false](#basic-with-prefix-false)
+- [chained-complex-computed](#chained-complex-computed)
+- [chained-computed](#chained-computed)
+- [complex](#complex)
+- [with-tracked](#with-tracked)
+  <!--FIXTURES_TOC_END-->
 
 ## <!--FIXTURES_CONTENT_START-->
 
@@ -44,6 +46,44 @@ import { tracked } from '@glimmer/tracking';
 import Component from '@ember/component';
 import { computed, get } from '@ember/object';
 
+export default class Foo extends Component {
+  bar;
+  @tracked baz = 'barBaz';
+
+  get bazInfo() {
+    return `Name: ${get(this, 'baz')}`;
+  }
+}
+```
+
+---
+
+<a id="basic-with-prefix-false">**basic-with-prefix-false ({alwaysPrefix: `false`})**</a>
+
+**Input** (<small>[basic-with-prefix-false.input.js](__testfixtures__/basic-with-prefix-false.input.js)</small>):
+
+```js
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+
+export default class Foo extends Component {
+  bar;
+  baz = 'barBaz';
+
+  @computed('baz')
+  get bazInfo() {
+    return `Name: ${get(this, 'baz')}`;
+  }
+}
+```
+
+**Output** (<small>[basic-with-prefix-false.output.js](__testfixtures__/basic-with-prefix-false.output.js)</small>):
+
+```js
+import { tracked } from '@glimmer/tracking';
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+
 export default class Foo extends Component {
   bar;
   @tracked
@@ -91,8 +131,7 @@ import Component from '@ember/component';
 import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
-  @tracked
-  firstName = 'Foo';
+  @tracked firstName = 'Foo';
   @tracked lastName;
   @tracked phone;
   zipcode;
@@ -147,8 +186,7 @@ import Component from '@ember/component';
 import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
-  @tracked
-  foo = 'bar';
+  @tracked foo = 'bar';
   baz;
 
   get fooBar() {
@@ -250,7 +288,6 @@ export default class Foo extends Component {
     return `Name: ${get(this, 'baz')}`;
   }
 }
-
 ```
 
 **Output** (<small>[with-tracked.output.js](__testfixtures__/with-tracked.output.js)</small>):
@@ -262,14 +299,12 @@ import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
   @tracked bar;
-  @tracked
-  baz = 'barBaz';
+  @tracked baz = 'barBaz';
 
   get bazInfo() {
     return `Name: ${get(this, 'baz')}`;
   }
 }
-
 ```
 
----
+---

transforms/tracked-properties/__testfixtures__/basic-with-prefix-false.input.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+
+export default class Foo extends Component {
+  bar;
+  baz = 'barBaz';
+
+  @computed('baz')
+  get bazInfo() {
+    return `Name: ${get(this, 'baz')}`;
+  }
+}

transforms/tracked-properties/__testfixtures__/basic-with-prefix-false.options.json

@@ -0,0 +1,3 @@
+{
+  "alwaysPrefix": "false"
+}

transforms/tracked-properties/__testfixtures__/basic-with-prefix-false.output.js

@@ -0,0 +1,13 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@ember/component';
+import { computed, get } from '@ember/object';
+
+export default class Foo extends Component {
+  bar;
+  @tracked
+  baz = 'barBaz';
+
+  get bazInfo() {
+    return `Name: ${get(this, 'baz')}`;
+  }
+}

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

@@ -4,8 +4,7 @@ import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
   bar;
-  @tracked
-  baz = 'barBaz';
+  @tracked baz = 'barBaz';
 
   get bazInfo() {
     return `Name: ${get(this, 'baz')}`;

transforms/tracked-properties/__testfixtures__/chained-computed.output.js

@@ -3,8 +3,7 @@ import Component from '@ember/component';
 import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
-  @tracked
-  foo = 'bar';
+  @tracked foo = 'bar';
   baz;
 
   get fooBar() {

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

@@ -3,8 +3,7 @@ import Component from '@ember/component';
 import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
-  @tracked
-  firstName = 'Foo';
+  @tracked firstName = 'Foo';
   @tracked lastName;
   @tracked phone;
   zipcode;

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

@@ -4,8 +4,7 @@ import { computed, get } from '@ember/object';
 
 export default class Foo extends Component {
   @tracked bar;
-  @tracked
-  baz = 'barBaz';
+  @tracked baz = 'barBaz';
 
   get bazInfo() {
     return `Name: ${get(this, 'baz')}`;

transforms/tracked-properties/index.js

@@ -3,9 +3,16 @@ const {
   addTrackedImport,
   getDependentKeys,
   buildTrackedDecorator,
+  reformatTrackedDecorators,
 } = require('./utils/helper');
 
+const { getOptions } = require('codemod-cli');
+const DEFAULT_OPTIONS = {
+  alwaysPrefix: 'true',
+};
+
 module.exports = function transformer(file, api) {
+  const configOptions = Object.assign({}, DEFAULT_OPTIONS, getOptions());
   const classProps = [];
   let computedProps = [];
   let computedPropsMap = {};
@@ -51,7 +58,7 @@ module.exports = function transformer(file, api) {
   // with @tracked. Also, set the `shouldImportBeAdded` to true which would help
   // determine if the import statement `@glimmer/tracking` needs to be added to
   // the file.
-  const trackedConvertedSource = j(file.source)
+  let trackedConvertedSource = j(file.source)
     .find(j.ClassProperty)
     .forEach(path => {
       if (computedProps.includes(path.node.key.name)) {
@@ -67,6 +74,10 @@ module.exports = function transformer(file, api) {
     })
     .toSource();
 
+  if (configOptions.alwaysPrefix === 'true') {
+    trackedConvertedSource = reformatTrackedDecorators(trackedConvertedSource);
+  }
+
   // Iterate on all the `computed` decorators and for each node, check if
   // all the arguments are a part of the `classProps` array, if so, then
   // remove the `@computed` decorator, else remove the arguments that are

transforms/tracked-properties/utils/helper.js

@@ -89,4 +89,35 @@ function buildTrackedDecorator(name, value, j) {
   return node;
 }
 
-module.exports = { addTrackedImport, getDependentKeys, buildTrackedDecorator };
+/**
+ * Returns the formatted @tracked signature. After adding the @tracked decorator
+ * to the source, if the class property has a value associated with it,
+ * the @tracked decorator is add above the property instead of prefixing it inline.
+ * This function will check if the length of characters including the @tracked addition
+ * doesn't add up to more than 50 characters, then reformat it to be prefixed instead
+ * of being on a separate line.
+ * @param {string} trackedConvertedSource
+ */
+function reformatTrackedDecorators(trackedConvertedSource) {
+  const matchedTracked = trackedConvertedSource.match(/@tracked\n(.*)\n/g);
+  if (matchedTracked) {
+    matchedTracked.forEach(matchedData => {
+      const convertedMatchedData = matchedData.replace(
+        /@tracked\n\s+/,
+        '@tracked '
+      );
+      trackedConvertedSource = trackedConvertedSource.replace(
+        matchedData,
+        convertedMatchedData
+      );
+    });
+  }
+  return trackedConvertedSource;
+}
+
+module.exports = {
+  addTrackedImport,
+  getDependentKeys,
+  buildTrackedDecorator,
+  reformatTrackedDecorators,
+};