Merge pull request #2566 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-quoteless-attributes

Extract rule: template-no-quoteless-attributes

Author: NullVoxPopuli

README.md

@@ -448,6 +448,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 
 | Name                                                                                         | Description                                                | 💼 | 🔧 | 💡 |
 | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- | :- | :- |
+| [template-no-quoteless-attributes](docs/rules/template-no-quoteless-attributes.md)           | require quotes on all attribute values                     |    | 🔧 |    |
 | [template-no-unnecessary-curly-strings](docs/rules/template-no-unnecessary-curly-strings.md) | disallow unnecessary curly braces in string interpolations |    | 🔧 |    |
 
 ### Stylistic Issues

docs/rules/template-no-quoteless-attributes.md

@@ -0,0 +1,51 @@
+# ember/template-no-quoteless-attributes
+
+🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+<!-- end auto-generated rule header -->
+
+In HTML, all attribute values are considered strings, regardless of whether they are quoted or not.
+
+The following two examples are _identical_ from the perspective of the browser:
+
+<!-- prettier-ignore -->
+```html
+<div data-foo=asdf></div>
+<div data-foo="asdf"></div>
+```
+
+This fact makes the following HTML very confusing:
+
+<!-- prettier-ignore -->
+```html
+<input disabled=false>
+```
+
+In this case, the simple _presence_ of the `disabled` attribute means that the `<input>` is disabled and setting the value to `false` doesn't do the obvious thing.
+
+This is just _one_ (of many) cases where the default "string" based parsing of attributes in HTML can trip folks up.
+
+This rule attempts to make this situation _slightly_ better by at least ensuring that all attribute values are quoted. This obviously doesn't fix the :troll:y nature of HTML here but it does ensure that you still **see** the quotes (which should hopefully help remind you that these are strings and not values).
+
+## Examples
+
+This rule **forbids** the following (note that `someValue` could have been intended either as a string or expression):
+
+<!-- prettier-ignore -->
+```html
+<div data-foo=someValue></div>
+```
+
+This rule **allows** the following:
+
+```html
+<div data-foo="someValue"></div>
+```
+
+```hbs
+<div data-foo={{someValue}}></div>
+```
+
+## References
+
+- [HTML spec/attributes](https://html.spec.whatwg.org/multipage/dom.html#attributes)

lib/rules/template-no-quoteless-attributes.js

@@ -0,0 +1,49 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'require quotes on all attribute values',
+      category: 'Style',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-quoteless-attributes.md',
+      templateMode: 'both',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      missing: '{{type}} {{name}} should be either quoted or wrapped in mustaches',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-quoteless-attributes.js',
+      docs: 'docs/rule/no-quoteless-attributes.md',
+      tests: 'test/unit/rules/no-quoteless-attributes-test.js',
+    },
+  },
+  create(context) {
+    return {
+      GlimmerAttrNode(node) {
+        // Check if attribute has text value without quotes
+        if (node.value?.type === 'GlimmerTextNode' && !/^["']/.test(node.value.chars)) {
+          const sourceCode = context.sourceCode;
+          const attrText = sourceCode.getText(node);
+
+          // If value looks unquoted (no = or =value without quotes)
+          if (/=\s*[^"'{]/.test(attrText)) {
+            const type = node.name?.startsWith('@') ? 'Argument' : 'Attribute';
+            context.report({
+              node,
+              messageId: 'missing',
+              data: { type, name: node.name },
+              fix(fixer) {
+                const valueText = node.value.chars;
+                const replacementText = `${node.name}="${valueText}"`;
+                return fixer.replaceText(node, replacementText);
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-quoteless-attributes.js

@@ -0,0 +1,73 @@
+const rule = require('../../../lib/rules/template-no-quoteless-attributes');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+ruleTester.run('template-no-quoteless-attributes', rule, {
+  valid: [
+    '<template><div class="foo"></div></template>',
+    '<template><div data-foo="derp"></div></template>',
+    '<template><div data-foo="derp {{stuff}}"></div></template>',
+    '<template><div data-foo={{someValue}}></div></template>',
+    '<template><div data-foo={{true}}></div></template>',
+    '<template><div data-foo={{false}}></div></template>',
+    '<template><div data-foo={{5}}></div></template>',
+    '<template><SomeThing ...attributes /></template>',
+    '<template><div></div></template>',
+    '<template><input disabled></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><div class=foo></div></template>',
+      output: '<template><div class="foo"></div></template>',
+      errors: [{ messageId: 'missing' }],
+    },
+
+    {
+      code: '<template><div data-foo=asdf></div></template>',
+      output: '<template><div data-foo="asdf"></div></template>',
+      errors: [{ messageId: 'missing' }],
+    },
+    {
+      code: '<template><SomeThing @blah=asdf /></template>',
+      output: '<template><SomeThing @blah="asdf" /></template>',
+      errors: [{ messageId: 'missing' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+hbsRuleTester.run('template-no-quoteless-attributes', rule, {
+  valid: [
+    '<div data-foo="derp"></div>',
+    '<div data-foo="derp {{stuff}}"></div>',
+    '<div data-foo={{someValue}}></div>',
+    '<div data-foo={{true}}></div>',
+    '<div data-foo={{false}}></div>',
+    '<div data-foo={{5}}></div>',
+    '<SomeThing ...attributes />',
+    '<div></div>',
+    '<input disabled>',
+  ],
+  invalid: [
+    {
+      code: '<div data-foo=asdf></div>',
+      output: '<div data-foo="asdf"></div>',
+      errors: [{ message: 'Attribute data-foo should be either quoted or wrapped in mustaches' }],
+    },
+    {
+      code: '<SomeThing @blah=asdf />',
+      output: '<SomeThing @blah="asdf" />',
+      errors: [{ message: 'Argument @blah should be either quoted or wrapped in mustaches' }],
+    },
+  ],
+});