[New] add checked-requires-onchange-or-readonly

Author: jaesoekjjang

README.md

@@ -0,0 +1,44 @@
+# Enforce using `onChange` or `readonly` attribute when `checked` is used (`react/checked-requires-onchange-or-readonly`)
+
+<!-- end auto-generated rule header -->
+
+This rule enforces `onChange` or `readonly` attribute for `checked` property of input elements.
+
+It also warns when `checked` and `defaultChecked` properties are used together.
+
+## Rule Details
+
+Example of **incorrect** code for this rule:
+
+```jsx
+<input type="checkbox" checked />
+<input type="checkbox" checked defaultChecked />
+<input type="radio" checked defaultChecked />
+
+React.createElement('input', { checked: false });
+React.createElement('input', { type: 'checkbox', checked: true });
+React.createElement('input', { type: 'checkbox', checked: true, defaultChecked: true });
+```
+
+Example of **correct** code for this rule:
+
+```jsx
+<input type="checkbox" checked onChange={() => {}} />
+<input type="checkbox" checked readOnly />
+<input type="checkbox" checked onChange readOnly />
+<input type="checkbox" defaultChecked />
+
+React.createElement('input', { type: 'checkbox', checked: true, onChange() {} });
+React.createElement('input', { type: 'checkbox', checked: true, readOnly: true });
+React.createElement('input', { type: 'checkbox', checked: true, onChange() {}, readOnly: true });
+React.createElement('input', { type: 'checkbox', defaultChecked: true });
+```
+
+## Rule Options
+
+```js
+"react/checked-requires-onchange-or-readonly": [<enabled>, {
+  "ignoreMissingProperties": <boolean>,
+  "ignoreExclusiveCheckedAttribute": <boolean>
+}]
+```

docs/rules/checked-requires-onchange-or-readonly.md

@@ -0,0 +1,140 @@
+/**
+ * @fileoverview Enforce the use of the 'onChange' or 'readonly' attribute when 'checked' is used'
+ * @author Jaesoekjjang
+ */
+
+'use strict';
+
+const ASTUtils = require('jsx-ast-utils');
+const flatMap = require('array.prototype.flatmap');
+const isCreateElement = require('../util/isCreateElement');
+const report = require('../util/report');
+const docsUrl = require('../util/docsUrl');
+
+const messages = {
+  missingProperty: '`checked` should be used with either `onChange` or `readOnly`.',
+  exclusiveCheckedAttribute: 'Use either `checked` or `defaultChecked`, but not both.',
+};
+
+const targetPropSet = new Set(['checked', 'onChange', 'readOnly', 'defaultChecked']);
+
+const defaultOptions = {
+  ignoreMissingProperties: true,
+  ignoreExclusiveCheckedAttribute: true,
+};
+
+/**
+ * @param {string[]} properties
+ * @param {string} keyName
+ * @returns {Set<string>}
+ */
+function extractTargetProps(properties, keyName) {
+  return new Set(
+    flatMap(
+      properties,
+      (prop) => (
+        prop[keyName] && targetPropSet.has(prop[keyName].name)
+          ? [prop[keyName].name]
+          : []
+      )
+    )
+  );
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Enforce using `onChange` or `readonly` attribute when `checked` is used',
+      category: 'Best Practices',
+      recommended: false,
+      url: docsUrl('checked-requires-onchange-or-readonly'),
+    },
+    messages,
+    schema: [{
+      additionalProperties: false,
+      properties: {
+        ignoreMissingProperties: {
+          type: 'boolean',
+        },
+        ignoreExclusiveCheckedAttribute: {
+          type: 'boolean',
+        },
+      },
+    }],
+  },
+  create(context) {
+    const options = Object.assign({}, defaultOptions, context.options[0]);
+
+    function reportMissingProperty(node) {
+      report(
+        context,
+        messages.missingProperty,
+        'missingProperty',
+        { node }
+      );
+    }
+
+    function reportExclusiveCheckedAttribute(node) {
+      report(
+        context,
+        messages.exclusiveCheckedAttribute,
+        'exclusiveCheckedAttribute',
+        { node }
+      );
+    }
+
+    /**
+     * @param {ASTNode} node
+     * @param {Set<string>} propSet
+     * @returns {void}
+     */
+    const checkAttributesAndReport = (node, propSet) => {
+      if (!propSet.has('checked')) {
+        return;
+      }
+
+      if (options.ignoreExclusiveCheckedAttribute && propSet.has('defaultChecked')) {
+        reportExclusiveCheckedAttribute(node);
+      }
+
+      if (
+        options.ignoreMissingProperties
+        && !(propSet.has('onChange') || propSet.has('readOnly'))
+      ) {
+        reportMissingProperty(node);
+      }
+    };
+
+    return {
+      JSXOpeningElement(node) {
+        if (ASTUtils.elementType(node) !== 'input') {
+          return;
+        }
+
+        const propSet = extractTargetProps(node.attributes, 'name');
+        checkAttributesAndReport(node, propSet);
+      },
+      CallExpression(node) {
+        if (!isCreateElement(node, context)) {
+          return;
+        }
+
+        const [firstArg, secondArg] = node.arguments;
+        if (
+          !firstArg
+          || firstArg.type !== 'Literal'
+          || firstArg.value !== 'input'
+        ) {
+          return;
+        }
+
+        if (!secondArg || secondArg.type !== 'ObjectExpression') {
+          return;
+        }
+
+        const propSet = extractTargetProps(secondArg.properties, 'key');
+        checkAttributesAndReport(node, propSet);
+      },
+    };
+  },
+};

lib/rules/checked-requires-onchange-or-readonly.js

@@ -5,6 +5,7 @@
 module.exports = {
   'boolean-prop-naming': require('./boolean-prop-naming'),
   'button-has-type': require('./button-has-type'),
+  'checked-requires-onchange-or-readonly': require('./checked-requires-onchange-or-readonly'),
   'default-props-match-prop-types': require('./default-props-match-prop-types'),
   'destructuring-assignment': require('./destructuring-assignment'),
   'display-name': require('./display-name'),

lib/rules/index.js

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview Enforce the use of the 'onChange' or 'readonly' attribute when 'checked' is used'
+ * @author Jaesoekjjang
+ */
+
+'use strict';
+
+const RuleTester = require('eslint').RuleTester;
+const rule = require('../../../lib/rules/checked-requires-onchange-or-readonly');
+
+const parsers = require('../../helpers/parsers');
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run('checked-requires-onchange-or-readonly', rule, {
+  valid: parsers.all([
+    '<input type="checkbox" />',
+    '<input type="checkbox" onChange={noop} />',
+    '<input type="checkbox" readOnly />',
+    '<input type="checkbox" checked onChange={noop} />',
+    '<input type="checkbox" checked={true} onChange={noop} />',
+    '<input type="checkbox" checked={false} onChange={noop} />',
+    '<input type="checkbox" checked readOnly />',
+    '<input type="checkbox" checked={true} readOnly />',
+    '<input type="checkbox" checked={false} readOnly />',
+    '<input type="checkbox" defaultChecked />',
+    "React.createElement('input')",
+    "React.createElement('input', { checked: true, onChange: noop })",
+    "React.createElement('input', { checked: false, onChange: noop })",
+    "React.createElement('input', { checked: true, readOnly: true })",
+    "React.createElement('input', { checked: true, onChange: noop, readOnly: true })",
+    "React.createElement('input', { checked: foo, onChange: noop, readOnly: true })",
+    {
+      code: '<input type="checkbox" checked />',
+      options: [{ ignoreMissingProperties: false }],
+    },
+    {
+      code: '<input type="checkbox" checked={true} />',
+      options: [{ ignoreMissingProperties: false }],
+    },
+    {
+      code: '<input type="checkbox" onChange={noop} checked defaultChecked />',
+      options: [{ ignoreExclusiveCheckedAttribute: false }],
+    },
+    {
+      code: '<input type="checkbox" onChange={noop} checked={true} defaultChecked />',
+      options: [{ ignoreExclusiveCheckedAttribute: false }],
+    },
+    '<span/>',
+    "React.createElement('span')",
+    '(()=>{})()',
+  ]),
+  invalid: parsers.all([
+    {
+      code: '<input type="radio" checked />',
+      errors: [{ messageId: 'missingProperty' }],
+    },
+    {
+      code: '<input type="radio" checked={true} />',
+      errors: [{ messageId: 'missingProperty' }],
+    },
+    {
+      code: '<input type="checkbox" checked />',
+      errors: [{ messageId: 'missingProperty' }],
+    },
+    {
+      code: '<input type="checkbox" checked={true} />',
+      errors: [{ messageId: 'missingProperty' }],
+    },
+    {
+      code: '<input type="checkbox" checked={condition ? true : false} />',
+      errors: [{ messageId: 'missingProperty' }],
+    },
+    {
+      code: '<input type="checkbox" checked defaultChecked />',
+      errors: [
+        { messageId: 'exclusiveCheckedAttribute' },
+        { messageId: 'missingProperty' },
+      ],
+    },
+    {
+      code: 'React.createElement("input", { checked: false })',
+      errors: [{ messageId: 'missingProperty' }],
+    },
+    {
+      code: 'React.createElement("input", { checked: true, defaultChecked: true })',
+      errors: [
+        { messageId: 'exclusiveCheckedAttribute' },
+        { messageId: 'missingProperty' },
+      ],
+    },
+    {
+      code: '<input type="checkbox" checked defaultChecked />',
+      options: [{ ignoreMissingProperties: false }],
+      errors: [{ messageId: 'exclusiveCheckedAttribute' }],
+    },
+    {
+      code: '<input type="checkbox" checked defaultChecked />',
+      options: [{ ignoreExclusiveCheckedAttribute: false }],
+      errors: [{ messageId: 'missingProperty' }],
+    },
+  ]),
+});