Merge pull request ember-template-lint#1457 from Turbo87/no-potential…

…-path-strings

Implement `no-potential-path-strings` rule

README.md

@@ -240,6 +240,7 @@ Each rule has emojis denoting:
 |                            | [no-passed-in-event-handlers](./docs/rule/no-passed-in-event-handlers.md)                  |
 | :wrench:                   | [no-positional-data-test-selectors](./docs/rule/no-positional-data-test-selectors.md)      |
 | :white_check_mark:         | [no-positive-tabindex](./docs/rule/no-positive-tabindex.md)                                |
+|                            | [no-potential-path-strings](./docs/rule/no-potential-path-strings.md)                      |
 | :white_check_mark:         | [no-quoteless-attributes](./docs/rule/no-quoteless-attributes.md)                          |
 | :wrench:                   | [no-redundant-fn](./docs/rule/no-redundant-fn.md)                                          |
 |                            | [no-redundant-landmark-role](./docs/rule/no-redundant-landmark-role.md)                    |

docs/rule/no-potential-path-strings.md

@@ -0,0 +1,34 @@
+# no-potential-path-strings
+
+It might happen sometimes that `{{` and `}}` are forgotten when invoking a
+component, and the string that is passed was actually supposed to be a property
+path or argument.
+
+This rule warns about all arguments and attributes that start with `this.` or
+`@`, but are missing the surrounding `{{` and `}}` characters.
+
+## Examples
+
+This rule **forbids** the following:
+
+```hbs
+<img src="this.picture">
+```
+
+```hbs
+<img src="@img">
+```
+
+This rule **allows** the following:
+
+```hbs
+<img src={{this.picture}}>
+```
+
+```hbs
+<img src={{@img}}>
+```
+
+## Migration
+
+- Replace the surrounding `"` characters with `{{`/`}}`

lib/rules/index.js

@@ -50,6 +50,7 @@ module.exports = {
   'no-passed-in-event-handlers': require('./no-passed-in-event-handlers'),
   'no-positional-data-test-selectors': require('./no-positional-data-test-selectors'),
   'no-positive-tabindex': require('./no-positive-tabindex'),
+  'no-potential-path-strings': require('./no-potential-path-strings'),
   'no-quoteless-attributes': require('./no-quoteless-attributes'),
   'no-redundant-fn': require('./no-redundant-fn'),
   'no-redundant-landmark-role': require('./no-redundant-landmark-role'),

lib/rules/no-potential-path-strings.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const Rule = require('./base');
+
+module.exports = class NoPotentialPathStrings extends Rule {
+  visitor() {
+    return {
+      AttrNode(node) {
+        let { value } = node;
+        if (
+          value.type === 'TextNode' &&
+          (value.chars.startsWith('@') || value.chars.startsWith('this.'))
+        ) {
+          this.log({
+            message: NoPotentialPathStrings.generateErrorMessage(value.chars),
+            line: value.loc && value.loc.start.line,
+            column: value.loc && value.loc.start.column,
+            source: this.sourceForNode(value),
+          });
+        }
+      },
+    };
+  }
+
+  static generateErrorMessage(path) {
+    return `Potential path in attribute string detected. Did you mean {{${path}}}?`;
+  }
+};

test/unit/rules/no-potential-path-strings-test.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const generateRuleTests = require('../../helpers/rule-test-harness');
+
+const { generateErrorMessage } = require('../../../lib/rules/no-potential-path-strings');
+
+generateRuleTests({
+  name: 'no-potential-path-strings',
+
+  config: true,
+
+  good: [
+    '<img src="foo.png">',
+    '<img src={{picture}}>',
+    '<img src={{this.picture}}>',
+    '<img src={{@img}}>',
+    '<SomeComponent @foo={{@bar}} />',
+  ],
+
+  bad: [
+    {
+      template: '<img src="this.picture">',
+      result: {
+        message: generateErrorMessage('this.picture'),
+        line: 1,
+        column: 10,
+        source: 'this.picture',
+      },
+    },
+    {
+      template: '<img src=this.picture>',
+      result: {
+        message: generateErrorMessage('this.picture'),
+        line: 1,
+        column: 9,
+        source: 'this.picture',
+      },
+    },
+    {
+      template: '<img src="@img">',
+      result: {
+        message: generateErrorMessage('@img'),
+        line: 1,
+        column: 10,
+        source: '@img',
+      },
+    },
+    {
+      template: '<img src=@img>',
+      result: {
+        message: generateErrorMessage('@img'),
+        line: 1,
+        column: 9,
+        source: '@img',
+      },
+    },
+    {
+      template: '<SomeComponent @foo=@bar />',
+      result: {
+        message: generateErrorMessage('@bar'),
+        line: 1,
+        column: 20,
+        source: '@bar',
+      },
+    },
+    {
+      template: '<SomeComponent @foo=this.bar />',
+      result: {
+        message: generateErrorMessage('this.bar'),
+        line: 1,
+        column: 20,
+        source: 'this.bar',
+      },
+    },
+  ],
+});