extends plugin:import/recommended and fix warnings (#2922)

* extends `plugin:import/recommended` and fix warnings

* fix lint in ci

* fix unit tests

* fix e2e

* remove `wonka`/`regenerator-runtime` from dependencies
remove `regenerator-runtime/runtime` import

* remove examples from workspaces

* rebase and enable merged rules

* update examples

* rebase fixes

.changeset/cold-doors-arrive.md

@@ -0,0 +1,12 @@
+---
+'cm6-graphql': patch
+'codemirror-graphql': patch
+'graphiql': patch
+'graphql-language-service': patch
+'graphql-language-service-cli': patch
+'graphql-language-service-server': patch
+'monaco-graphql': patch
+'vscode-graphql-execution': patch
+---
+
+extends `plugin:import/recommended` and fix warnings

.eslintrc.js

@@ -22,7 +22,6 @@ module.exports = {
     react: {
       version: 'detect',
     },
-    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
   },
   // https://github.com/sindresorhus/globals/blob/master/globals.json
   env: {
@@ -36,6 +35,7 @@ module.exports = {
 
   extends: [
     'eslint:recommended',
+    'plugin:import/recommended',
     'plugin:import/typescript',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
@@ -109,7 +109,6 @@ module.exports = {
     'no-sequences': 1,
     'no-throw-literal': 1,
     'no-unmodified-loop-condition': 0,
-    'no-unused-expressions': 0,
     'no-useless-call': 1,
     'no-useless-concat': 1,
     'no-useless-return': 0,
@@ -142,7 +141,6 @@ module.exports = {
       'error',
       { argsIgnorePattern: '^_', ignoreRestSiblings: true },
     ],
-    '@typescript-eslint/no-unused-expressions': 'error',
 
     'no-use-before-define': 0,
 
@@ -188,8 +186,6 @@ module.exports = {
     'no-bitwise': 1,
     'no-continue': 0,
     'no-inline-comments': 0,
-    'no-lonely-if': 'error',
-    'unicorn/no-lonely-if': 'error',
     'no-mixed-operators': 0,
     'no-negated-condition': 'error',
     'no-nested-ternary': 0,
@@ -229,10 +225,9 @@ module.exports = {
     'sort-imports': 0,
     'symbol-description': 1,
 
-    // import (https://github.com/benmosher/eslint-plugin-import)
-    // 'import/no-unresolved': [2, { modules: 'es6' }],
-    'import/no-cycle': 0,
-    'import/no-extraneous-dependencies': 1,
+    'import/no-extraneous-dependencies': 'error',
+    'import/no-duplicates': 'error',
+    'import/no-named-as-default': 'error',
     'prefer-object-spread': 'error',
     // react rules
     'react/no-unused-state': 'error',
@@ -264,12 +259,22 @@ module.exports = {
     ],
     // Jest rules
     'jest/no-conditional-expect': 0,
+
+    'promise/no-multiple-resolved': 'error',
+    'sonarjs/no-redundant-jump': 'error',
+    'unicorn/prefer-logical-operator-over-ternary': 'error',
+    'unicorn/throw-new-error': 'error',
+    'unicorn/prefer-includes': 'error',
+    'no-lonely-if': 'error',
+    'unicorn/no-lonely-if': 'error',
+    'no-unused-expressions': 'off',
+    '@typescript-eslint/no-unused-expressions': 'error',
   },
 
-  plugins: ['import', '@typescript-eslint', 'unicorn'],
+  plugins: ['@typescript-eslint', 'promise', 'sonarjs', 'unicorn'],
 
   overrides: [
-    // Cypress plugin, global, etc only for cypress directory
+    // Cypress plugin, global, etc., only for cypress directory
     // https://github.com/cypress-io/eslint-plugin-cypress
     // cypress clashes with jest expect()
     {
@@ -293,13 +298,6 @@ module.exports = {
         'jest/no-conditional-expect': 0,
       },
     },
-    {
-      // Converted from 'dependencies' options in ancient config
-      files: ['**/spec/**', '**/sample-*/**'],
-      rules: {
-        'import/no-cycle': 0,
-      },
-    },
     {
       // Resources are typically our helper scripts; make life easier there
       files: ['resources/**', '**/resources/**', 'scripts/**'],
@@ -322,6 +320,24 @@ module.exports = {
         'no-console': 'off',
         'no-new': 'off',
         'no-alert': 'off',
+        'import/no-unresolved': 'off',
+      },
+    },
+    // Ignore imported dependencies from tests files
+    {
+      files: ['**/__tests__/**', 'webpack.config.js'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    // Allow import `vscode` package
+    {
+      files: [
+        'packages/vscode-graphql/**',
+        'packages/vscode-graphql-execution/**',
+      ],
+      rules: {
+        'import/no-unresolved': ['error', { ignore: ['vscode'] }],
       },
     },
   ],

.github/workflows/pr-check.yml

@@ -22,23 +22,11 @@ jobs:
           cache: 'yarn'
       - run: yarn install --frozen-lockfile --immutable
 
-      - name: Eslint
+      - name: TypeScript Build
+        run: yarn build
+
+      - name: ESLint
         run: yarn lint
 
       - name: Prettier Check
         run: yarn pretty-check
-
-  build:
-    name: Typescript Build
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile --immutable
-
-      - name: Tyescript Build
-        run: yarn build

.gitignore

@@ -30,3 +30,5 @@ yarn-1.18.0.js
 
 # Local Netlify folder
 .netlify
+
+examples/*/yarn.lock

README.md

@@ -238,7 +238,7 @@ this purpose.
 
 - **Discord**
   [![Discord](https://img.shields.io/discord/625400653321076807.svg)](https://discord.gg/NP5vbPeUFp) -
-  Most discussion outside of github happens on the GraphQL
+  Most discussion outside of GitHub happens on the GraphQL
   [Discord Server](https://discord.gg/NP5vbPeUFp)
 - **Twitter** - [@GraphiQL](https://twitter.com/@GraphiQL) and
   [#GraphiQL](https://twitter.com/hashtag/GraphiQL)

custom-words.txt

@@ -110,6 +110,7 @@ wonka
 wsrun
 lezer
 buildhelper
+sonarjs
 
 
 // identifiers used in code and configs

examples/cm6-graphql-legacy-parcel/README.md

@@ -5,7 +5,5 @@ GraphQL implementation with parcel bundler.
 
 ### Setup
 
-1. `yarn` and `yarn build` at the root of this repository, if you have not
-   already.
 1. `yarn` and `yarn start` from this folder to start parcel dev mode.
 1. `yarn build` to find production ready files.

examples/cm6-graphql-legacy-parcel/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-cm6-graphql-parcel",
+  "name": "example-cm6-graphql-legacy-parcel",
   "version": "1.1.10-alpha.8",
   "license": "MIT",
   "description": "GraphiQL Parcel Example",
@@ -24,12 +24,12 @@
   "dependencies": {
     "@codemirror/basic-setup": "^0.20.0",
     "@codemirror/language": "^0.20.0",
-    "codemirror-graphql": "file:../../packages/codemirror-graphql",
-    "graphql": "^16.4.0",
-    "typescript": "^4.6.3"
+    "codemirror-graphql": "^2.0.2",
+    "graphql": "^16.4.0"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.4",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^2.0.0",
+    "typescript": "^4.6.3"
   }
 }

examples/cm6-graphql-parcel/README.md

@@ -5,7 +5,5 @@ GraphQL implementation with parcel bundler.
 
 ### Setup
 
-1. `yarn` and `yarn build` at the root of this repository, if you have not
-   already.
 1. `yarn` and `yarn start` from this folder to start parcel dev mode.
 1. `yarn build` to find production ready files.

examples/cm6-graphql-parcel/package.json

@@ -29,12 +29,12 @@
     "@codemirror/theme-one-dark": "6.0.0",
     "@codemirror/view": "6.1.2",
     "cm6-graphql": "0.0.1",
-    "graphql": "^16.4.0",
-    "typescript": "^4.6.3"
+    "graphql": "^16.4.0"
   },
   "devDependencies": {
     "parcel": "^2.6.2",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^2.0.0",
+    "typescript": "^4.6.3"
   },
   "resolutions": {
     "**/@codemirror/autocomplete": "6.0.0",

examples/graphiql-create-react-app/README.md

@@ -4,7 +4,5 @@ This example demonstrates how to transpile your own custom ES6 and typescript Gr
 
 ### Setup
 
-1. Run `yarn` at root of the repository to install the dependencies.
-1. Run `yarn build && yarn build-bundles` at the root to build graphiql for import
 1. `yarn` and `yarn start` from this folder to start `react-scripts` dev server.
 1. `yarn build` from this folder to build production ready transpiled files using `react-scripts`. Find the output in `build` folder.

examples/graphiql-create-react-app/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.11-alpha.8",
   "private": true,
   "dependencies": {
-    "graphiql": "file:../../packages/graphiql",
+    "graphiql": "^2.2.0",
     "graphql": "^16.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

examples/graphiql-parcel/README.md

@@ -5,7 +5,5 @@ implementation with parcel bundler.
 
 ### Setup
 
-1. `yarn` and `yarn build` at the root of this repository, if you have not
-   already.
 1. `yarn` and `yarn start` from this folder to start parcel dev mode.
 1. `yarn build` to find production ready files.

examples/graphiql-parcel/package.json

@@ -22,14 +22,14 @@
     ]
   },
   "dependencies": {
-    "graphiql": "file:../../packages/graphiql",
+    "graphiql": "^2.2.0",
     "graphql": "^16.4.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.6.3"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "parcel": "^2.5.0",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^2.0.0",
+    "typescript": "^4.6.3"
   }
 }

examples/graphiql-parcel/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
 
 const App = () => (
   <GraphiQL

examples/graphiql-webpack/README.md

@@ -11,6 +11,4 @@ It appears `create-react-app` supports all the language features we require.
 
 ### Setup
 
-1. `yarn` and `yarn build` and `yarn build-bundles` (to build css) at the root
-   of this repository, if you have not already.
-1. `yarn start` from this folder to start webpack dev server
+1. `yarn` and `yarn start` from this folder to start webpack dev server

examples/graphiql-webpack/src/index.jsx

@@ -1,11 +1,9 @@
 import 'regenerator-runtime/runtime.js';
-
 import * as React from 'react';
 import { render } from 'react-dom';
-import GraphiQL from 'graphiql';
+import { GraphiQL } from 'graphiql';
 import { useExplorerPlugin } from '@graphiql/plugin-explorer';
 import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
-
 import 'graphiql/graphiql.css';
 import '@graphiql/plugin-explorer/dist/style.css';
 import '@graphiql/plugin-code-exporter/dist/style.css';

examples/monaco-graphql-react-vite/README.md

@@ -10,6 +10,4 @@ This workspace could be used to help us prototype components & hooks for
 
 ## Setup
 
-First, `yarn` in the root, and then `yarn build` in the root
-
-Then, in this directory, you can just run `yarn start`
+In this directory, you can just run `yarn` and `yarn start`

examples/monaco-graphql-react-vite/src/App.tsx

@@ -190,8 +190,6 @@ export default function App() {
           });
 
           setSchema(data.data);
-
-          return;
         })
         .then(() => setLoading(false));
     }

examples/monaco-graphql-webpack/README.md

@@ -4,6 +4,4 @@ A simple example of `monaco-graphql` using webpack 4
 
 ### Setup
 
-1. `yarn` and `yarn build` at the root of this repository, if you have not
-   already.
-2. `yarn start` from this folder to start webpack dev server
+`yarn` and `yarn start` from this folder to start webpack dev server

examples/monaco-graphql-webpack/src/editors.ts

@@ -3,7 +3,7 @@ import * as monaco from 'monaco-editor';
 // NOTE: using loader syntax because Yaml worker imports editor.worker directly and that
 // import shouldn't go through loader syntax.
 // @ts-ignore
-import GraphQLWorker from 'monaco-graphql/esm/graphql.worker';
+import GraphQLWorker from 'monaco-graphql/esm/graphql.worker'; // eslint-disable-line import/default
 
 const GRAPHQL_LANGUAGE_ID = 'graphql';
 

functions/schema-demo.js

@@ -1,5 +1,6 @@
 /* example using https://github.com/awslabs/aws-serverless-express */
 const express = require('express');
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { graphqlHTTP } = require('express-graphql');
 const awsServerlessExpress = require('aws-serverless-express');
 const schema = require('../packages/graphiql/test/schema');

package.json

@@ -5,11 +5,7 @@
   "license": "MIT",
   "workspaces": {
     "packages": [
-      "packages/*",
-      "examples/graphiql-webpack",
-      "examples/monaco-graphql-webpack",
-      "examples/monaco-graphql-react-vite",
-      "examples/cm6-graphql-parcel"
+      "packages/*"
     ]
   },
   "lint-staged": {
@@ -94,7 +90,6 @@
     "@babel/register": "^7.17.7",
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
-    "@cypress/webpack-preprocessor": "^5.5.0",
     "@manypkg/get-packages": "^1.1.3",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -117,14 +112,16 @@
     "cors": "^2.8.5",
     "cross-env": "^7.0.2",
     "cspell": "^5.15.2",
-    "cypress": "^4.7.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.17.0",
     "eslint-plugin-unicorn": "^45.0.1",
     "execa": "^6.0.0",
     "express": "^4.17.3",

packages/cm6-graphql/__tests__/test.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import { graphqlLanguage } from '../dist/index.js';
 import { fileTests } from '@lezer/generator/dist/test';