chore: convert custom tslint rules to eslint (#3917)

palantir · Jan 22, 2020 · 1c81f3b · 1c81f3b · blueprint-bot · Jan 22, 2020
1 parent e49c6f1
commit 1c81f3b
Show file tree

Hide file tree

Showing 32 changed files with 2,290 additions and 70 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -78,7 +78,7 @@ jobs:
       - attach_workspace: { at: '.' }
       - run: mkdir -p ./reports/eslint ./reports/stylelint
       # we need to compile the lint rules for blueprint
-      - run: yarn compile --scope "@blueprintjs/tslint-config"
+      - run: yarn compile --scope "@blueprintjs/{eslint-plugin-blueprint,tslint-config}"
       - run: yarn lint
       - store_test_results: { path: ./reports }
       - store_artifacts: { path: ./reports }

diff --git a/packages/core/src/components/html-table/htmlTable.tsx b/packages/core/src/components/html-table/htmlTable.tsx
@@ -59,7 +59,7 @@ export class HTMLTable extends AbstractPureComponent2<IHTMLTableProps> {
             },
             className,
         );
-        // tslint:disable-next-line:blueprint-html-components
+        // eslint-disable-next-line @blueprintjs/blueprint/html-components
         return <table {...htmlProps} ref={elementRef} className={classes} />;
     }
 }
diff --git a/packages/core/src/components/html/html.md b/packages/core/src/components/html/html.md
@@ -46,8 +46,8 @@ currently transitioning from [TSLint](https://palantir.github.io/tslint/) to ESL
 such, rules are being migrated from TSLint to ESLint. In the meantime, some TSLint rules are
 being run using ESLint.
 
-The [**@blueprintjs/tslint-config**](https://www.npmjs.com/package/@blueprintjs/tslint-config)
-NPM package includes a custom `blueprint-html-components` rule that will warn on usages of
+The [**@blueprintjs/eslint-plugin-blueprint**](https://www.npmjs.com/package/@blueprintjs/eslint-plugin-blueprint)
+package includes a custom `blueprint-html-components` rule that will warn on usages of
 JSX intrinsic elements (`<h1>`) that have a Blueprint alternative (`<H1>`). See
-the package's [README](https://www.npmjs.com/package/@blueprintjs/tslint-config)
+the package's [README](https://www.npmjs.com/package/@blueprintjs/eslint-plugin-blueprint)
 for usage instructions.
diff --git a/packages/core/src/docs/classes.md b/packages/core/src/docs/classes.md
@@ -102,8 +102,8 @@ currently transitioning from [TSLint](https://palantir.github.io/tslint/) to ESL
 such, rules are being migrated from TSLint to ESLint. In the meantime, some TSLint rules are
 being run using ESLint.
 
-The [**@blueprintjs/tslint-config**](https://www.npmjs.com/package/@blueprintjs/tslint-config)
+The [**@blueprintjs/eslint-plugin-blueprint**](https://www.npmjs.com/package/@blueprintjs/eslint-plugin-blueprint)
 NPM package includes a custom `blueprint-html-components` rule that will warn on usages of
 JSX intrinsic elements (`<h1>`) that have a Blueprint alternative (`<H1>`). See
-the package's [README](https://www.npmjs.com/package/@blueprintjs/tslint-config)
+the package's [README](https://www.npmjs.com/package/@blueprintjs/eslint-plugin-blueprint)
 for usage instructions.
diff --git a/packages/docs-app/src/examples/core-examples/popoverPositionExample.tsx b/packages/docs-app/src/examples/core-examples/popoverPositionExample.tsx
@@ -28,7 +28,7 @@ export class PopoverPositionExample extends React.PureComponent<IExampleProps> {
     public render() {
         return (
             <Example className={EXAMPLE_CLASS} options={false} {...this.props}>
-                {/* tslint:disable-next-line:blueprint-html-components */}
+                {/* eslint-disable-next-line @blueprintjs/blueprint/html-components */}
                 <table>
                     <tbody>
                         <tr>

diff --git a/packages/docs-theme/src/components/typescript/enumTable.tsx b/packages/docs-theme/src/components/typescript/enumTable.tsx
@@ -61,7 +61,8 @@ export class EnumTable extends React.PureComponent<IEnumTableProps> {
             "docs-prop-is-internal": !isExternal,
         });
 
-        // tslint:disable:blueprint-html-components - this is inside RUNNING_TEXT
+        // this is inside RUNNING_TEXT
+        /* eslint-disable @blueprintjs/blueprint/html-components */
         return (
             <tr key={name}>
                 <td className={classes}>
@@ -76,7 +77,7 @@ export class EnumTable extends React.PureComponent<IEnumTableProps> {
                 </td>
             </tr>
         );
-        // tslint:enable:blueprint-html-components
+        /* eslint-enable @blueprintjs/blueprint/html-components */
     };
 
     private renderTags(entry: ITsEnumMember) {

diff --git a/packages/docs-theme/src/components/typescript/interfaceTable.tsx b/packages/docs-theme/src/components/typescript/interfaceTable.tsx
@@ -38,7 +38,8 @@ export interface IInterfaceTableProps extends IProps {
     title: string;
 }
 
-// tslint:disable:blueprint-html-components - rendered inside RUNNING_TEXT
+// rendered inside RUNNING_TEXT
+/* eslint-disable @blueprintjs/blueprint/html-components */
 export class InterfaceTable extends React.PureComponent<IInterfaceTableProps> {
     public static contextTypes = DocumentationContextTypes;
     public static displayName = "Docs2.InterfaceTable";

diff --git a/packages/eslint-config/index.js b/packages/eslint-config/index.js
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+const path = require("path");
+
 module.exports = {
     env: {
         browser: true,
@@ -22,6 +24,10 @@ module.exports = {
     plugins: [
         "@typescript-eslint",
         "@typescript-eslint/tslint",
+        "@blueprintjs/blueprint"
+    ],
+    extends: [
+        "plugin:@blueprintjs/blueprint/recommended"
     ],
     parser: "@typescript-eslint/parser",
     parserOptions: {
@@ -34,7 +40,7 @@ module.exports = {
     rules: {
         // run the tslint rules which are not yet converted (run inside eslint)
         "@typescript-eslint/tslint/config": ["error", {
-            "lintFile": "../../tslint.json",
-        }],
-    },
-};
+            "lintFile": path.resolve(__dirname, "./tslint.json")
+        }]
+    }
+}
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -3,6 +3,7 @@
     "version": "0.1.0",
     "description": "ESLint configuration for @blueprintjs packages",
     "dependencies": {
+        "@blueprintjs/eslint-plugin-blueprint": "0.0.0",
         "@typescript-eslint/eslint-plugin": "^2.15.0",
         "@typescript-eslint/eslint-plugin-tslint": "^2.15.0",
         "@typescript-eslint/parser": "^2.15.0",

diff --git a/tslint.json → packages/eslint-config/tslint.json b/tslint.json → packages/eslint-config/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./packages/tslint-config",
+  "extends": "../tslint-config",
   "rules": {
     "file-header": {
       "options": [
@@ -10,6 +10,10 @@
     // TODO: test dependencies are only declared at root but used in all packages.
     "no-implicit-dependencies": false,
     // TODO: Currently, a lot of chai assertions are not written as proper statements.
-    "no-unused-expression": false
+    "no-unused-expression": false,
+    // Turn off the blueprint tslint rules since we have replaced them with eslint rules
+    "blueprint-classes-constants": false,
+    "blueprint-html-components": false,
+    "blueprint-icon-components": false
   }
 }
diff --git a/packages/eslint-plugin-blueprint/README.md b/packages/eslint-plugin-blueprint/README.md
@@ -0,0 +1,114 @@
+<img height="204" src="https://cloud.githubusercontent.com/assets/464822/20228152/d3f36dc2-a804-11e6-80ff-51ada2d13ea7.png">
+
+# [Blueprint](http://blueprintjs.com/) [ESLint](https://eslint.org/) plugin
+
+Blueprint is a React UI toolkit for the web.
+
+This package contains the [ESLint](https://eslint.org/) plugin for Blueprint. It provides custom rules which are useful when developing against Blueprint libraries.
+
+**Key features:**
+
+- [Blueprint-specific rules](#Rules) for use with `@blueprintjs` components.
+
+## Installation
+
+```
+yarn add @blueprintjs/eslint-plugin-blueprint
+```
+
+## Usage
+
+Simply add this plugin in your `.eslintrc` file to use the add the plugin.  The plugin includes Blueprint-specific rules which enforce semantics particular to usage with `@blueprintjs` packages, but does not turn them on by default.
+
+`.eslintrc`
+```json
+plugins: [
+    "@blueprintjs/blueprint"
+]
+```
+
+### Rules-only usage
+
+To enable the Blueprint-specific rules, extend the `plugin:@blueprintjs/blueprint/recommended` config inside the package:
+
+`tslint.json`
+```diff
+extends: [
++    "plugin:@blueprintjs/blueprint/recommended"
+]
+```
+
+## Rules
+
+### `@blueprintjs/blueprint/classes-constants`
+
+Enforce usage of `Classes` constants over namespaced string literals.
+
+Each `@blueprintjs` package exports a `Classes` object that contains constants for every CSS class defined by the package. While the values of the constants may change between releases, the names of the constants will remain more stable.
+
+```json
+{
+  "rules": {
+    "@blueprintjs/blueprint/classes-constants": ["error"],
+  }
+}
+```
+
+```diff
+-const element = <div className="pt-navbar" />;
++const element = <div className={Classes.NAVBAR} />;
+```
+
+### `@blueprintjs/blueprint/html-components`
+
+Enforce usage of Blueprint components over regular html components.
+
+- h1-6 -> H1-6
+- code -> Code
+- pre -> Pre
+- blockquote -> Blockquote
+- table -> HTMLTable
+
+```js
+{
+  "rules": {
+    "@blueprintjs/blueprint/html-components": ["error"],
+  }
+}
+```
+
+### `@blueprintjs/blueprint/icon-components`
+
+Enforce usage of JSX `Icon` components over `IconName` string literals (or vice-versa) in `icon` JSX props. Note that this rule only supports hardcoded values in the `icon` prop; it does not handle expressions or conditionals.
+
+A fixer is available for this rule that will convert between string literals and named `Icon` components. Note that the implementation is naive and may require intervention, such as to import a component or fix an invalid name.
+
+Named icon components (`TickIcon`, `GraphIcon`, etc) can be imported from the `@blueprintjs/icons` package.
+
+This rule is disabled in the `blueprint-rules` config as it is most useful to ensure that the `@blueprintjs/icons` package can be tree-shaken (an opt-in process which requires using components and _never_ `IconName` literals).
+
+```js
+{
+  "rules": {
+    // default uses "component"
+    "@blueprintjs/blueprint/icon-components": ["error"],
+    // expanded syntax
+    "@blueprintjs/blueprint/icon-components": ["error", "component" | "literal"] // choose one
+  }
+}
+```
+
+`"component"`
+```diff
+-<Button icon="tick" />
++<Button icon={<TickIcon />} />
+```
+
+`"literal"`
+```diff
+-<Button icon={<GraphIcon />} />
++<Button icon="graph" />
+```
+
+
+### [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)
diff --git a/packages/eslint-plugin-blueprint/jest.config.js b/packages/eslint-plugin-blueprint/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+    testEnvironment: 'node',
+    transform: {
+      '^.+\\.tsx?$': 'ts-jest',
+    },
+    testRegex: '__tests__\/.+\\.test\\.ts$',
+    collectCoverage: false,
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    coverageReporters: ['text-summary', 'lcov'],
+};
diff --git a/packages/eslint-plugin-blueprint/package.json b/packages/eslint-plugin-blueprint/package.json
@@ -0,0 +1,28 @@
+{
+    "name": "@blueprintjs/eslint-plugin-blueprint",
+    "version": "0.0.0",
+    "description": "ESLint rules for use with @blueprintjs packages",
+    "main": "lib/index.js",
+    "scripts": {
+        "compile": "tsc -p src/",
+        "test": "jest"
+    },
+    "dependencies": {
+        "@typescript-eslint/eslint-plugin": "^2.11.0",
+        "@typescript-eslint/eslint-plugin-tslint": "^2.10.0",
+        "@typescript-eslint/parser": "^2.10.0",
+        "eslint": "^6.7.2",
+        "jest": "^24.9.0",
+        "ts-jest": "^24.2.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:palantir/blueprint.git",
+        "directory": "packages/eslint-plugin-blueprint"
+    },
+    "author": "Palantir Technologies",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@types/dedent": "^0.7.0"
+    }
+}
diff --git a/packages/eslint-plugin-blueprint/src/index.ts b/packages/eslint-plugin-blueprint/src/index.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import rules from "./rules";
+
+/**
+ * Enable Blueprint-specific lint rules defined in this package.
+ */
+module.exports = {
+    configs: {
+        recommended: {
+            plugins: ["@blueprintjs/blueprint"],
+            rules: {
+                "@blueprintjs/blueprint/classes-constants": "error",
+                "@blueprintjs/blueprint/html-components": "error",
+            },
+        },
+    },
+    rules,
+};