Break out of transform if in attribute space (#192)

Break out of transform if in attribute space

Author: Robert Jackson

transforms/angle-brackets/test.js

@@ -1026,7 +1026,7 @@ test('hyphens with nested usage', () => {
   `);
 });
 
-test('wallstreet.hbs', () => {
+test('wallstreet', () => {
   let input = `
     {{#foo-bar$baz-bang/foo-bar::bang}}
       <div ...attributes>
@@ -1045,3 +1045,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}} />
+        "
+    `);
+});

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;
+      },
+    },
   };
 }