@html-eslint/eslint-plugin-react 0.56.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 YeonJuan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# `@html-eslint/eslint-plugin-react`
+
+An ESLint plugin which provides lint rules for React.
+
+1. [Getting Started](https://html-eslint.org/docs/react/getting-started)
+1. [Rules](https://html-eslint.org/docs/react/rules)
+1. [License](#License)
+
+## License
+
+Distributed under the MIT License.

package/lib/configs/index.js

@@ -0,0 +1,14 @@
+const rules = require("../rules");
+const ruleKeys = Object.keys(rules);
+
+const allRules = ruleKeys.reduce((acc, ruleName) => {
+  acc[`@html-eslint/react/${ruleName}`] = "error";
+  if (ruleName === "use-baseline") {
+    acc[`@html-eslint/react/${ruleName}`] = "warn";
+  }
+  return acc;
+}, /** @type {Record<string, "error" | "warn">} */ ({}));
+
+module.exports = {
+  allRules,
+};

package/lib/constants/node-types.js

@@ -0,0 +1,176 @@
+/**
+ * AST Node Types Re-defined from @typescript-eslint/types AST_NODE_TYPES enum
+ * as string constants to avoid runtime dependency on @typescript-eslint/types
+ */
+const AST_NODE_TYPES = /** @type {const} */ ({
+  AccessorProperty: "AccessorProperty",
+  ArrayExpression: "ArrayExpression",
+  ArrayPattern: "ArrayPattern",
+  ArrowFunctionExpression: "ArrowFunctionExpression",
+  AssignmentExpression: "AssignmentExpression",
+  AssignmentPattern: "AssignmentPattern",
+  AwaitExpression: "AwaitExpression",
+  BinaryExpression: "BinaryExpression",
+  BlockStatement: "BlockStatement",
+  BreakStatement: "BreakStatement",
+  CallExpression: "CallExpression",
+  CatchClause: "CatchClause",
+  ChainExpression: "ChainExpression",
+  ClassBody: "ClassBody",
+  ClassDeclaration: "ClassDeclaration",
+  ClassExpression: "ClassExpression",
+  ConditionalExpression: "ConditionalExpression",
+  ContinueStatement: "ContinueStatement",
+  DebuggerStatement: "DebuggerStatement",
+  Decorator: "Decorator",
+  DoWhileStatement: "DoWhileStatement",
+  EmptyStatement: "EmptyStatement",
+  ExportAllDeclaration: "ExportAllDeclaration",
+  ExportDefaultDeclaration: "ExportDefaultDeclaration",
+  ExportNamedDeclaration: "ExportNamedDeclaration",
+  ExportSpecifier: "ExportSpecifier",
+  ExpressionStatement: "ExpressionStatement",
+  ForInStatement: "ForInStatement",
+  ForOfStatement: "ForOfStatement",
+  ForStatement: "ForStatement",
+  FunctionDeclaration: "FunctionDeclaration",
+  FunctionExpression: "FunctionExpression",
+  Identifier: "Identifier",
+  IfStatement: "IfStatement",
+  ImportAttribute: "ImportAttribute",
+  ImportDeclaration: "ImportDeclaration",
+  ImportDefaultSpecifier: "ImportDefaultSpecifier",
+  ImportExpression: "ImportExpression",
+  ImportNamespaceSpecifier: "ImportNamespaceSpecifier",
+  ImportSpecifier: "ImportSpecifier",
+  JSXAttribute: "JSXAttribute",
+  JSXClosingElement: "JSXClosingElement",
+  JSXClosingFragment: "JSXClosingFragment",
+  JSXElement: "JSXElement",
+  JSXEmptyExpression: "JSXEmptyExpression",
+  JSXExpressionContainer: "JSXExpressionContainer",
+  JSXFragment: "JSXFragment",
+  JSXIdentifier: "JSXIdentifier",
+  JSXMemberExpression: "JSXMemberExpression",
+  JSXNamespacedName: "JSXNamespacedName",
+  JSXOpeningElement: "JSXOpeningElement",
+  JSXOpeningFragment: "JSXOpeningFragment",
+  JSXSpreadAttribute: "JSXSpreadAttribute",
+  JSXSpreadChild: "JSXSpreadChild",
+  JSXText: "JSXText",
+  LabeledStatement: "LabeledStatement",
+  Literal: "Literal",
+  LogicalExpression: "LogicalExpression",
+  MemberExpression: "MemberExpression",
+  MetaProperty: "MetaProperty",
+  MethodDefinition: "MethodDefinition",
+  NewExpression: "NewExpression",
+  ObjectExpression: "ObjectExpression",
+  ObjectPattern: "ObjectPattern",
+  PrivateIdentifier: "PrivateIdentifier",
+  Program: "Program",
+  Property: "Property",
+  PropertyDefinition: "PropertyDefinition",
+  RestElement: "RestElement",
+  ReturnStatement: "ReturnStatement",
+  SequenceExpression: "SequenceExpression",
+  SpreadElement: "SpreadElement",
+  StaticBlock: "StaticBlock",
+  Super: "Super",
+  SwitchCase: "SwitchCase",
+  SwitchStatement: "SwitchStatement",
+  TaggedTemplateExpression: "TaggedTemplateExpression",
+  TemplateLiteral: "TemplateLiteral",
+  TemplateElement: "TemplateElement",
+  ThisExpression: "ThisExpression",
+  ThrowStatement: "ThrowStatement",
+  TryStatement: "TryStatement",
+  TSAbstractAccessorProperty: "TSAbstractAccessorProperty",
+  TSAbstractKeyword: "TSAbstractKeyword",
+  TSAbstractMethodDefinition: "TSAbstractMethodDefinition",
+  TSAbstractPropertyDefinition: "TSAbstractPropertyDefinition",
+  TSAnyKeyword: "TSAnyKeyword",
+  TSArrayType: "TSArrayType",
+  TSAsExpression: "TSAsExpression",
+  TSAsyncKeyword: "TSAsyncKeyword",
+  TSBigIntKeyword: "TSBigIntKeyword",
+  TSBooleanKeyword: "TSBooleanKeyword",
+  TSCallSignatureDeclaration: "TSCallSignatureDeclaration",
+  TSClassImplements: "TSClassImplements",
+  TSConditionalType: "TSConditionalType",
+  TSConstructorType: "TSConstructorType",
+  TSConstructSignatureDeclaration: "TSConstructSignatureDeclaration",
+  TSDeclareFunction: "TSDeclareFunction",
+  TSDeclareKeyword: "TSDeclareKeyword",
+  TSEmptyBodyFunctionExpression: "TSEmptyBodyFunctionExpression",
+  TSEnumBody: "TSEnumBody",
+  TSEnumDeclaration: "TSEnumDeclaration",
+  TSEnumMember: "TSEnumMember",
+  TSExportAssignment: "TSExportAssignment",
+  TSExportKeyword: "TSExportKeyword",
+  TSExternalModuleReference: "TSExternalModuleReference",
+  TSFunctionType: "TSFunctionType",
+  TSImportEqualsDeclaration: "TSImportEqualsDeclaration",
+  TSImportType: "TSImportType",
+  TSIndexedAccessType: "TSIndexedAccessType",
+  TSIndexSignature: "TSIndexSignature",
+  TSInferType: "TSInferType",
+  TSInstantiationExpression: "TSInstantiationExpression",
+  TSInterfaceBody: "TSInterfaceBody",
+  TSInterfaceDeclaration: "TSInterfaceDeclaration",
+  TSInterfaceHeritage: "TSInterfaceHeritage",
+  TSIntersectionType: "TSIntersectionType",
+  TSIntrinsicKeyword: "TSIntrinsicKeyword",
+  TSLiteralType: "TSLiteralType",
+  TSMappedType: "TSMappedType",
+  TSMethodSignature: "TSMethodSignature",
+  TSModuleBlock: "TSModuleBlock",
+  TSModuleDeclaration: "TSModuleDeclaration",
+  TSNamedTupleMember: "TSNamedTupleMember",
+  TSNamespaceExportDeclaration: "TSNamespaceExportDeclaration",
+  TSNeverKeyword: "TSNeverKeyword",
+  TSNonNullExpression: "TSNonNullExpression",
+  TSNullKeyword: "TSNullKeyword",
+  TSNumberKeyword: "TSNumberKeyword",
+  TSObjectKeyword: "TSObjectKeyword",
+  TSOptionalType: "TSOptionalType",
+  TSParameterProperty: "TSParameterProperty",
+  TSPrivateKeyword: "TSPrivateKeyword",
+  TSPropertySignature: "TSPropertySignature",
+  TSProtectedKeyword: "TSProtectedKeyword",
+  TSPublicKeyword: "TSPublicKeyword",
+  TSQualifiedName: "TSQualifiedName",
+  TSReadonlyKeyword: "TSReadonlyKeyword",
+  TSRestType: "TSRestType",
+  TSSatisfiesExpression: "TSSatisfiesExpression",
+  TSStaticKeyword: "TSStaticKeyword",
+  TSStringKeyword: "TSStringKeyword",
+  TSSymbolKeyword: "TSSymbolKeyword",
+  TSTemplateLiteralType: "TSTemplateLiteralType",
+  TSThisType: "TSThisType",
+  TSTupleType: "TSTupleType",
+  TSTypeAliasDeclaration: "TSTypeAliasDeclaration",
+  TSTypeAnnotation: "TSTypeAnnotation",
+  TSTypeAssertion: "TSTypeAssertion",
+  TSTypeLiteral: "TSTypeLiteral",
+  TSTypeOperator: "TSTypeOperator",
+  TSTypeParameter: "TSTypeParameter",
+  TSTypeParameterDeclaration: "TSTypeParameterDeclaration",
+  TSTypeParameterInstantiation: "TSTypeParameterInstantiation",
+  TSTypePredicate: "TSTypePredicate",
+  TSTypeQuery: "TSTypeQuery",
+  TSTypeReference: "TSTypeReference",
+  TSUndefinedKeyword: "TSUndefinedKeyword",
+  TSUnionType: "TSUnionType",
+  TSUnknownKeyword: "TSUnknownKeyword",
+  TSVoidKeyword: "TSVoidKeyword",
+  UnaryExpression: "UnaryExpression",
+  UpdateExpression: "UpdateExpression",
+  VariableDeclaration: "VariableDeclaration",
+  VariableDeclarator: "VariableDeclarator",
+  WhileStatement: "WhileStatement",
+  WithStatement: "WithStatement",
+  YieldExpression: "YieldExpression",
+});
+
+module.exports = { AST_NODE_TYPES };

package/lib/index.js

@@ -0,0 +1,37 @@
+const rules = require("./rules");
+const { name, version } = require("../package.json");
+const { allRules } = require("./configs");
+
+/** @import {ESLint} from "eslint" */
+
+/** @type {ESLint.Plugin} */
+const plugin = {
+  meta: {
+    name,
+    version,
+  },
+  // @ts-ignore
+  rules,
+  configs: {
+    recommended: {
+      rules: allRules,
+      plugins: {
+        /** @returns {ESLint.Plugin} */
+        get ["@html-eslint/react"]() {
+          return require(".");
+        },
+      },
+    },
+    all: {
+      rules: allRules,
+      plugins: {
+        /** @returns {ESLint.Plugin} */
+        get ["@html-eslint/react"]() {
+          return require(".");
+        },
+      },
+    },
+  },
+};
+
+module.exports = plugin;

package/lib/rules/index.js

@@ -0,0 +1,15 @@
+const noInvalidAttrValue = require("./no-invalid-attr-value");
+const useBaseline = require("./use-baseline");
+const noIneffectiveAttrs = require("./no-ineffective-attrs");
+const noObsoleteTags = require("./no-obsolete-tags");
+const noObsoleteAttrs = require("./no-obsolete-attrs");
+
+const rules = {
+  "no-invalid-attr-value": noInvalidAttrValue,
+  "use-baseline": useBaseline,
+  "no-ineffective-attrs": noIneffectiveAttrs,
+  "no-obsolete-tags": noObsoleteTags,
+  "no-obsolete-attrs": noObsoleteAttrs,
+};
+
+module.exports = rules;

package/lib/rules/no-ineffective-attrs.js

@@ -0,0 +1,67 @@
+/**
+ * @import {
+ *   JSXAttribute,
+ *   JSXOpeningElement,
+ *   JSXSpreadAttribute,
+ *   RuleModule
+ * } from "../types"
+ */
+const {
+  noIneffectiveAttrs,
+  NO_INEFFECTIVE_ATTRS_MESSAGE_IDS,
+} = require("@html-eslint/core");
+const { elementNodeAdapter } = require("./utils/adapter");
+const { AST_NODE_TYPES } = require("../constants/node-types");
+
+/** @type {RuleModule<[]>} */
+module.exports = {
+  meta: {
+    type: "problem",
+
+    docs: {
+      description:
+        "Disallow HTML attributes that have no effect in their context",
+      category: "Best Practice",
+      recommended: true,
+      url: "https://html-eslint.org/docs/react/rules/no-ineffective-attrs",
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [NO_INEFFECTIVE_ATTRS_MESSAGE_IDS.ineffective]: "{{ message }}",
+    },
+  },
+
+  create(context) {
+    const ruleCore = /**
+     * @type {ReturnType<
+     *   typeof noIneffectiveAttrs<
+     *     JSXOpeningElement,
+     *     JSXSpreadAttribute | JSXAttribute["name"] | null,
+     *     JSXAttribute["value"]
+     *   >
+     * >}
+     */ (noIneffectiveAttrs());
+    return {
+      JSXOpeningElement(node) {
+        if (
+          node.name.type !== AST_NODE_TYPES.JSXIdentifier ||
+          node.name.name.toLocaleLowerCase() !== node.name.name ||
+          node.name.name.includes("-")
+        ) {
+          return;
+        }
+        const adapter = elementNodeAdapter(node);
+        const result = ruleCore.checkAttributes(adapter);
+        for (const r of result) {
+          context.report({
+            node: r.node || undefined,
+            messageId: r.messageId,
+            data: r.data,
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/no-invalid-attr-value.js

@@ -0,0 +1,96 @@
+/**
+ * @import {
+ *   JSXAttribute,
+ *   JSXOpeningElement,
+ *   JSXSpreadAttribute,
+ *   RuleModule
+ * } from "../types"
+ */
+const { NO_INVALID_ATTR_VALUE_MESSAGE_IDS } = require("@html-eslint/core");
+const { elementNodeAdapter } = require("./utils/adapter");
+const { noInvalidAttrValue } = require("@html-eslint/core");
+const { AST_NODE_TYPES } = require("../constants/node-types");
+/**
+ * @type {RuleModule<
+ *   [{ allow?: { tag: string; attr: string; valuePattern?: string }[] }]
+ * >}
+ */
+module.exports = {
+  meta: {
+    type: "problem",
+
+    docs: {
+      description:
+        "Disallow invalid attribute values according to HTML standards",
+      category: "Best Practice",
+      recommended: true,
+      url: "https://html-eslint.org/docs/react/rules/no-invalid-attr-value",
+    },
+
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allow: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                tag: {
+                  type: "string",
+                },
+                attr: {
+                  type: "string",
+                },
+                valuePattern: {
+                  type: "string",
+                },
+              },
+              required: ["tag", "attr"],
+              additionalProperties: false,
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      [NO_INVALID_ATTR_VALUE_MESSAGE_IDS.invalid]:
+        "Invalid value '{{value}}' for attribute '{{attr}}' on <{{element}}>. {{suggestion}}",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const ruleCore = /**
+     * @type {ReturnType<
+     *   typeof noInvalidAttrValue<
+     *     JSXOpeningElement,
+     *     JSXSpreadAttribute | JSXAttribute["name"] | null,
+     *     JSXAttribute["value"]
+     *   >
+     * >}
+     */ (noInvalidAttrValue(options));
+    return {
+      JSXOpeningElement(node) {
+        if (
+          node.name.type !== AST_NODE_TYPES.JSXIdentifier ||
+          node.name.name.toLocaleLowerCase() !== node.name.name ||
+          node.name.name.includes("-")
+        ) {
+          return;
+        }
+        const adapter = elementNodeAdapter(node);
+        const result = ruleCore.checkAttributes(adapter);
+        for (const r of result) {
+          context.report({
+            node: r.node || undefined,
+            messageId: r.messageId,
+            data: r.data,
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/no-obsolete-attrs.js

@@ -0,0 +1,55 @@
+/**
+ * @import {TSESTree} from "@typescript-eslint/types"
+ * @import {RuleModule} from "../types"
+ */
+const {
+  noObsoleteAttrs,
+  NO_OBSOLETE_ATTRS_MESSAGE_IDS,
+} = require("@html-eslint/core");
+const { elementNodeAdapter } = require("./utils/adapter");
+const { AST_NODE_TYPES } = require("../constants/node-types");
+
+/** @type {RuleModule<[]>} */
+module.exports = {
+  meta: {
+    type: "problem",
+
+    docs: {
+      description: "Disallow use of obsolete attributes in HTML5",
+      category: "Best Practice",
+      recommended: true,
+      url: "https://html-eslint.org/docs/react/rules/no-obsolete-attrs",
+    },
+
+    fixable: null,
+    schema: [],
+    messages: {
+      [NO_OBSOLETE_ATTRS_MESSAGE_IDS.obsolete]:
+        "The {{attr}} attribute on <{{element}}> is obsolete. {{suggestion}}",
+    },
+  },
+
+  create(context) {
+    const ruleCore = noObsoleteAttrs();
+    return {
+      JSXOpeningElement(node) {
+        if (
+          node.name.type !== AST_NODE_TYPES.JSXIdentifier ||
+          node.name.name.toLocaleLowerCase() !== node.name.name ||
+          node.name.name.includes("-")
+        ) {
+          return;
+        }
+        const adapter = elementNodeAdapter(node);
+        const result = ruleCore.checkAttributes(adapter);
+        for (const r of result) {
+          context.report({
+            node: r.node || undefined,
+            messageId: r.messageId,
+            data: r.data,
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/no-obsolete-tags.js

@@ -0,0 +1,54 @@
+/** @import {RuleModule} from "../types" */
+const {
+  noObsoleteTags,
+  NO_OBSOLETE_TAGS_MESSAGE_IDS,
+} = require("@html-eslint/core");
+const { elementNodeAdapter } = require("./utils/adapter");
+const { AST_NODE_TYPES } = require("../constants/node-types");
+
+/**
+ * @type {RuleModule<
+ *   [{ allow?: { tag: string; attr: string; valuePattern?: string }[] }]
+ * >}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Disallow use of obsolete elements in HTML5",
+      category: "Best Practice",
+      recommended: true,
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      [NO_OBSOLETE_TAGS_MESSAGE_IDS.unexpected]:
+        "Unexpected use of obsolete tag <{{tag}}>",
+    },
+  },
+
+  create(context) {
+    const ruleCore = noObsoleteTags();
+
+    return {
+      JSXOpeningElement(node) {
+        if (
+          node.name.type !== AST_NODE_TYPES.JSXIdentifier ||
+          node.name.name.toLocaleLowerCase() !== node.name.name ||
+          node.name.name.includes("-")
+        ) {
+          return;
+        }
+        const adapter = elementNodeAdapter(node);
+        const result = ruleCore.checkElement(adapter);
+        for (const r of result) {
+          context.report({
+            node: r.node,
+            messageId: r.messageId,
+            data: r.data,
+          });
+        }
+      },
+    };
+  },
+};

package/lib/rules/use-baseline.js

@@ -0,0 +1,92 @@
+/**
+ * @import {
+ *   JSXAttribute,
+ *   JSXOpeningElement,
+ *   JSXSpreadAttribute,
+ *   RuleModule
+ * } from "../types"
+ * @typedef {Object} Option
+ * @property {"widely" | "newly" | number} Option.available
+ */
+
+const { useBaseline, USE_BASELINE_MESSAGE_IDS } = require("@html-eslint/core");
+const { elementNodeAdapter } = require("./utils/adapter");
+const { AST_NODE_TYPES } = require("../constants/node-types");
+
+/** @type {RuleModule<[Option]>} */
+module.exports = {
+  meta: {
+    type: "code",
+    docs: {
+      description: "Enforce the use of baseline features.",
+      recommended: true,
+      category: "Best Practice",
+      url: "https://html-eslint.org/docs/react/rules/use-baseline",
+    },
+    fixable: null,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          available: {
+            anyOf: [
+              {
+                enum: ["widely", "newly"],
+              },
+              {
+                // baseline year
+                type: "integer",
+                minimum: 2000,
+                maximum: new Date().getFullYear(),
+              },
+            ],
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+
+    messages: {
+      [USE_BASELINE_MESSAGE_IDS.noBaselineElement]:
+        "Element '{{element}}' is not a {{availability}} available baseline feature.",
+      [USE_BASELINE_MESSAGE_IDS.notBaselineElementAttribute]:
+        "Attribute '{{attr}}' on '{{element}}' is not a {{availability}} available baseline feature.",
+      [USE_BASELINE_MESSAGE_IDS.notBaselineGlobalAttribute]:
+        "Attribute '{{attr}}' is not a {{availability}} available baseline feature.",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || { available: "widely" };
+    const ruleCore = /**
+     * @type {ReturnType<
+     *   typeof useBaseline<
+     *     JSXOpeningElement,
+     *     JSXSpreadAttribute | JSXAttribute["name"] | null,
+     *     JSXAttribute["value"]
+     *   >
+     * >}
+     */ (useBaseline(options));
+
+    return {
+      JSXOpeningElement(node) {
+        if (
+          node.name.type !== AST_NODE_TYPES.JSXIdentifier ||
+          node.name.name.toLocaleLowerCase() !== node.name.name ||
+          node.name.name.includes("-")
+        ) {
+          return;
+        }
+        const adapter = elementNodeAdapter(node);
+        const result = ruleCore.checkAttributes(adapter);
+        for (const r of result) {
+          context.report({
+            messageId: r.messageId,
+            data: r.data,
+            node: r.node || undefined,
+          });
+        }
+      },
+    };
+  },
+};