Repository: ember-codemods/ember-angle-brackets-codemod (js)

Issue:
Incorrect transformation with curlies inside component invocation
This:
```hbs
<MyComp::Test @color={{"custom-2"}} @visible={{Group.item.isNew}}>
```
Becomes:
```hbs
<MyComp::Test @color=<Custom2 /> @visible={{Group.item.isNew}}>
```

Not exactly what we are looking for 😓 
I know that `@arg={{"string"}}` should be `@arg="string"`

This is legacy code :)

Pull request:
Break out of transform if in attribute space
fixes #190 

Patch:
diff --git a/transforms/angle-brackets/transform.js b/transforms/angle-brackets/transform.js
index 347e546..8492c59 100755
--- a/transforms/angle-brackets/transform.js
+++ b/transforms/angle-brackets/transform.js
@@ -11,6 +11,8 @@ const { builders: b } = recast;
 const HTML_ATTRIBUTES = ['class', 'placeholder', 'required'];
 const BUILT_IN_COMPONENTS = ['link-to', 'input', 'textarea'];
 
+let inAttr = false;
+
 function isAttribute(key) {
   return HTML_ATTRIBUTES.includes(key) || isDataAttribute(key);
 }
@@ -48,7 +50,7 @@ function transformTagName(tagName) {
       return char.toUpperCase();
     }
 
-    // Remove all occurances of '-'s from the tagName that aren't starting with `-`
+    // Remove all occurrences of '-'s from the tagName that aren't starting with `-`
     return char === '-' ? '' : char.toLowerCase();
   });
 
@@ -299,7 +301,7 @@ function transformNode(node, fileInfo, config) {
     return;
   }
 
-  const newTagName = transformTagName(tagName);
+  const newTagName = transformTagName(tagName, inAttr);
 
   let attributes;
   let children = node.program ? node.program.body : undefined;
@@ -327,6 +329,9 @@ function transformNode(node, fileInfo, config) {
       );
       return;
     }
+    if (inAttr) {
+      return;
+    }
     attributes = transformNodeAttributes(tagName, node);
   }
   return b.element(
@@ -391,5 +396,13 @@ function transformToAngleBracket(_, fileInfo, config) {
         return transformNode(node, fileInfo, config);
       }
     },
+    AttrNode: {
+      enter() {
+        inAttr = true;
+      },
+      exit() {
+        inAttr = false;
+      },
+    },
   };
 }


Test patch:
diff --git a/transforms/angle-brackets/test.js b/transforms/angle-brackets/test.js
index 8be60fd..fb18328 100644
--- a/transforms/angle-brackets/test.js
+++ b/transforms/angle-brackets/test.js
@@ -246,7 +246,6 @@ test('html-tags', () => {
 
     <div data-foo="{{if someThing yas nah}}"></div>
     <div {{on 'click' this.foo}}></div>
-    <div class="" style="margin-bottom:20px" {{action "updateSetup"  on="change"}}></div>
   `;
 
   expect(runTest('html-tags.hbs', input)).toMatchInlineSnapshot(`
@@ -271,7 +270,6 @@ test('html-tags', () => {
 
         <div data-foo=\\"{{if someThing yas nah}}\\"></div>
         <div {{on 'click' this.foo}}></div>
-        <div class=\\"\\" style=\\"margin-bottom:20px\\" {{action \\"updateSetup\\"  on=\\"change\\"}}></div>
       "
   `);
 });
@@ -1026,7 +1024,7 @@ test('hyphens with nested usage', () => {
   `);
 });
 
-test('wallstreet.hbs', () => {
+test('wallstreet', () => {
   let input = `
     {{#foo-bar$baz-bang/foo-bar::bang}}
       <div ...attributes>
@@ -1045,3 +1043,19 @@ test('wallstreet.hbs', () => {
       "
   `);
 });
+
+test('attr-space', () => {
+  let input = `
+    <MyComp::Test @color={{"custom-2"}} @visible={{Group.item.isNew}} />
+    <MyComp::Test @color="custom-2" @visible={{Group.item.isNew}} />
+    <MyComp @value={{value}} @cont={{this}} @class={{model.some-stuff-here}} />
+  `;
+
+  expect(runTest('attr-space.hbs', input)).toMatchInlineSnapshot(`
+      "
+          <MyComp::Test @color={{\\"custom-2\\"}} @visible={{Group.item.isNew}} />
+          <MyComp::Test @color=\\"custom-2\\" @visible={{Group.item.isNew}} />
+          <MyComp @value={{value}} @cont={{this}} @class={{model.some-stuff-here}} />
+        "
+    `);
+});