eslint-plugin-ember/lib/rules/template-require-input-type.js at 148a2a33d13d0c2dabc2d6448d0c6e051af9aa54 · johanrd/eslint-plugin-ember · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
'use strict';

// See html-validate (https://html-validate.org) for the peer rule concept.

const { isNativeElement } = require('../utils/is-native-element');

const VALID_TYPES = new Set([
  'button',
  'checkbox',
  'color',
  'date',
  'datetime-local',
  'email',
  'file',
  'hidden',
  'image',
  'month',
  'number',
  'password',
  'radio',
  'range',
  'reset',
  'search',
  'submit',
  'tel',
  'text',
  'time',
  'url',
  'week',
]);

/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
  meta: {
    type: 'problem',
    docs: {
      description: 'require input elements to have a valid type attribute',
      category: 'Best Practices',
      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-require-input-type.md',
      templateMode: 'both',
    },
    fixable: 'code',
    schema: [
      {
        type: 'object',
        properties: {
          requireExplicit: {
            type: 'boolean',
          },
        },
        additionalProperties: false,
      },
    ],
    messages: {
      missing: 'All `<input>` elements should have a `type` attribute',
      invalid: '`<input type="{{value}}">` is not a valid input type',
    },
  },

  create(context) {
    // Flagging a missing `type` is a style/consistency check, not a correctness
    // one: `<input>` without `type` is spec-compliant (defaults to the Text
    // state). Opt-in so teams that want parity with template-require-button-
    // type can enable it without imposing it on others.
    const requireExplicit = Boolean(context.options[0]?.requireExplicit);
    const sourceCode = context.sourceCode || context.getSourceCode();

    return {
      GlimmerElementNode(node) {
        if (node.tag !== 'input') {
          return;
        }
        // In strict GJS, a lowercase local binding can shadow the native
        // `<input>` element. `isNativeElement` consults html/svg/mathml tag
        // lists and checks bindings in the scope chain to filter out
        // scope-shadowed cases.
        if (!isNativeElement(node, sourceCode)) {
          return;
        }

        const typeAttr = node.attributes?.find((attr) => attr.name === 'type');

        if (!typeAttr) {
          if (!requireExplicit) {
            return;
          }
          context.report({
            node,
            messageId: 'missing',
            fix(fixer) {
              // Insert right after `<input` so the new attribute is the first
              // one — avoids the fragile "find end of open tag" regex that can
              // mis-place the attribute past the `/` in self-closing syntax.
              const insertPos = node.range[0] + '<input'.length;
              return fixer.insertTextBeforeRange([insertPos, insertPos], ' type="text"');
            },
          });
          return;
        }

        const value = typeAttr.value;

        // Valueless attribute form (`<input type />`) — per HTML spec, a
        // present-but-empty type attribute resolves to the missing-value
        // default ("Text state"). That's the same runtime result as
        // `type=""`, which we already flag. Treat them consistently:
        // flag as invalid('') and autofix to `type="text"`.
        if (!value) {
          context.report({
            node: typeAttr,
            messageId: 'invalid',
            data: { value: '' },
            fix(fixer) {
              return fixer.replaceText(typeAttr, 'type="text"');
            },
          });
          return;
        }

        if (value.type === 'GlimmerTextNode') {
          const typeValue = value.chars.toLowerCase();
          if (typeValue === '') {
            context.report({
              node: typeAttr,
              messageId: 'invalid',
              data: { value: '' },
              fix(fixer) {
                return fixer.replaceText(typeAttr, 'type="text"');
              },
            });
          } else if (!VALID_TYPES.has(typeValue)) {
            context.report({
              node: typeAttr,
              messageId: 'invalid',
              data: { value: value.chars },
              fix(fixer) {
                return fixer.replaceText(typeAttr, 'type="text"');
              },
            });
          }
        }
      },
    };
  },
};