chore: format/eslint fixes

Author: acao

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     node: true,
     browser: true,
     jest: true,
+    'jest/globals': true,
   },
 
   extends: [
@@ -294,6 +295,9 @@ module.exports = {
     'react/prefer-stateless-function': 'error',
     'react/react-in-jsx-scope': 'error',
     'react/self-closing-comp': 'error',
+    'react/display-name': 'warn',
+    // Jest rules
+    'jest/no-conditional-expect': 0,
   },
 
   plugins: ['import', 'prefer-object-spread', '@typescript-eslint'],
@@ -310,14 +314,18 @@ module.exports = {
       },
     },
     {
+      excludedFiles: ['**/cypress/**/*.{js,ts}'],
       files: [
-        'packages/{*graphql-*,graphiql}/src/**',
         '**/__{tests,mocks}__/*.{js,jsx,ts,tsx}',
+        '**/*.spec.{ts,js.jsx.tsx}',
       ],
       extends: ['plugin:jest/recommended'],
       env: {
         'jest/globals': true,
       },
+      rules: {
+        'jest/no-conditional-expect': 0,
+      },
     },
     // Rules for TypeScript only
     {
@@ -326,28 +334,6 @@ module.exports = {
         'no-unused-vars': 'off',
       },
     },
-    // Rules for Babel & Flow only
-    {
-      files: ['packages/codemirror-graphql/src/**/*.js'],
-      parser: 'babel-eslint',
-      plugins: ['flowtype', 'babel'],
-      rules: {
-        // flowtype (https://github.com/gajus/eslint-plugin-flowtype)
-        'flowtype/boolean-style': 1,
-        'flowtype/define-flow-type': 1,
-        'flowtype/no-dupe-keys': 0,
-        'flowtype/no-primitive-constructor-types': 1,
-        'flowtype/no-weak-types': 0,
-        'flowtype/require-parameter-type': 0,
-        'flowtype/require-return-type': 0,
-        'flowtype/require-valid-file-annotation': 0,
-        'flowtype/require-variable-type': 0,
-        'flowtype/sort-keys': 0,
-        'flowtype/type-id-match': 0,
-        'flowtype/use-flow-type': 1,
-        'flowtype/valid-syntax': 0,
-      },
-    },
     {
       // Converted from 'dependencies' options in ancient config
       files: ['**/spec/**', '**/sample-*/**'],

package.json

@@ -50,7 +50,7 @@
     "eslint": "eslint --ext=ts,js,jsx,tsx .",
     "lint": "yarn eslint && yarn lint-check && yarn pretty-check",
     "lint-fix": "yarn eslint --fix",
-    "lint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "lint-check": "eslint-config-prettier .eslintrc.js",
     "check": "flow check --show-all-errors && yarn tsc --dry",
     "pretty": "node resources/pretty.js",
     "pretty-check": "node resources/pretty.js --check",
@@ -88,24 +88,24 @@
     "@types/prettier": "^2.0.0",
     "@types/theme-ui": "^0.3.1",
     "@types/ws": "^7.4.0",
-    "@typescript-eslint/eslint-plugin": "^2.27.0",
-    "@typescript-eslint/parser": "^2.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/parser": "^4.14.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.3.0",
     "conventional-changelog-conventionalcommits": "^4.2.3",
     "copy": "^0.3.2",
     "cross-env": "^7.0.2",
     "cypress": "^4.7.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-flowtype": "4.7.0",
     "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-prefer-object-spread": "1.2.1",
-    "eslint-plugin-react": "7.19.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-prefer-object-spread": "^1.2.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "fetch-mock": "6.5.2",
     "flow-bin": "^0.119.1",
     "graphql": "^15.4.0",

packages/graphiql-2-rfc-context/src/components/__tests__/GraphiQL.spec.tsx

@@ -251,7 +251,7 @@ describe('GraphiQL', () => {
     expect(container.querySelectorAll('.history-label')).toHaveLength(2);
   });
 
-  it('will save query if variables are different ', () => {
+  it('will save query if variables are different', () => {
     const { getByTitle, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
@@ -276,7 +276,7 @@ describe('GraphiQL', () => {
     expect(container.querySelectorAll('.history-label')).toHaveLength(2);
   });
 
-  it('will save query if headers are different ', () => {
+  it('will save query if headers are different', () => {
     const { getByTitle, getByText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
@@ -308,9 +308,6 @@ describe('GraphiQL', () => {
     const MyFunctionalComponent = () => {
       return null;
     };
-    const wrap = component => () => (
-      <div className="test-wrapper">{component}</div>
-    );
 
     it('properly ignores fragments', () => {
       const myFragment = (

packages/graphiql-2-rfc-context/src/utility/__tests__/mergeAst.spec.ts

@@ -30,7 +30,7 @@ const schema = new GraphQLSchema({
 
 describe('MergeAst', () => {
   fixtures.forEach(fixture => {
-    it(fixture.desc, () => {
+    it(`${fixture.desc}`, () => {
       const result = print(mergeAst(parse(fixture.query))).replace(/\s/g, '');
       const result2 = print(mergeAst(parse(fixture.query), schema)).replace(
         /\s/g,

packages/graphiql-build-fetcher/README.md

@@ -6,71 +6,74 @@ under the hood, it uses [`graphql-ws`](https://www.npmjs.com/package/graphql-ws)
 
 ### Setup
 
-[`graphiql`](https://npmjs.com/package/graphiql) and thus `react` and `react-dom` should already be installed. 
+[`graphiql`](https://npmjs.com/package/graphiql) and thus `react` and `react-dom` should already be installed.
 
 you'll need to install `@graphiql/build-fetcher`
 
 npm
+
 ```bash
 npm install --save @graphiql/build-fetcher
 ```
 
 yarn
+
 ```bash
 yarn add @graphiql/build-fetcher
 ```
 
 ### Getting Started
 
-We have a few flexible options to get you started with the client. It's  meant to cover the majority of common use cases with a simple encapsulation.
+We have a few flexible options to get you started with the client. It's meant to cover the majority of common use cases with a simple encapsulation.
 
 #### HTTP/Multipart Usage
 
 Here's a simple example. In this case, a websocket client isn't even initialized, only http (with multipart `@stream` and `@defer` support of course!).
 
 ```ts
-import * as React from "react"
-import ReactDOM from "react-dom"
-import { GraphiQL } from "graphiql"
-import { buildGraphiQLFetcher } from "@graphiql/build-fetcher"
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphiQL } from 'graphiql';
+import { buildGraphiQLFetcher } from '@graphiql/build-fetcher';
 
-const url = 'https://myschema.com/graphql'
+const url = 'https://myschema.com/graphql';
 
 const fetcher = buildGraphiQLFetcher({ url });
 
 export const App = () => <GraphiQL fetcher={fetcher} />;
 
-ReactDOM.render(document.getElementByID('graphiql'), <App />)
+ReactDOM.render(document.getElementByID('graphiql'), <App />);
 ```
-#### HTTP/Multipart & Websockets 
+
+#### HTTP/Multipart & Websockets
 
 Just by providing the `subscriptionsUrl`, you can generate a `graphql-ws` client
 
 ```ts
-import * as React from "react"
-import ReactDOM from "react-dom"
-import { GraphiQL } from "graphiql"
-import { buildGraphiQLFetcher } from "@graphiql/build-fetcher"
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphiQL } from 'graphiql';
+import { buildGraphiQLFetcher } from '@graphiql/build-fetcher';
 
-const url = 'https://myschema.com/graphql'
+const url = 'https://myschema.com/graphql';
 
-const subscriptionsUrl = "wss://myschema.com/graphql"
+const subscriptionsUrl = 'wss://myschema.com/graphql';
 
-const fetcher = buildGraphiQLFetcher({ 
-  url, 
-  subscriptionsUrl
+const fetcher = buildGraphiQLFetcher({
+  url,
+  subscriptionsUrl,
 });
 
 export const App = () => <GraphiQL fetcher={fetcher} />;
 
-ReactDOM.render(document.getElementByID('graphiql'), <App />)
+ReactDOM.render(document.getElementByID('graphiql'), <App />);
 ```
 
 You can further customize the `wsClient` implementation below
 
 ### Options
 
-#### `url` (*required*)
+#### `url` (_required_)
 
 This is url used for all `HTTP` requests, and for schema introspection.
 
@@ -92,55 +95,53 @@ Pass a custom fetch implementation such as `isomorphic-feth`
 
 ### Customization Examples
 
-
-
 #### Custom `wsClient` Example
+
 Just by providing the `subscriptionsUrl`
 
 ```ts
-import * as React from "react"
-import ReactDOM from "react-dom"
-import { GraphiQL } from "graphiql"
-import { createClient } from "graphql-ws"
-import { buildGraphiQLFetcher } from "@graphiql/build-fetcher"
-
-const url = 'https://myschema.com/graphql'
-
-const subscriptionsUrl = "wss://myschema.com/graphql"
-
-const fetcher = buildGraphiQLFetcher({ 
-  url, 
-  wsClient: createClient({ 
-    url: subscriptionsUrl , 
-    keepAlive: 2000
-  })
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphiQL } from 'graphiql';
+import { createClient } from 'graphql-ws';
+import { buildGraphiQLFetcher } from '@graphiql/build-fetcher';
+
+const url = 'https://myschema.com/graphql';
+
+const subscriptionsUrl = 'wss://myschema.com/graphql';
+
+const fetcher = buildGraphiQLFetcher({
+  url,
+  wsClient: createClient({
+    url: subscriptionsUrl,
+    keepAlive: 2000,
+  }),
 });
 
 export const App = () => <GraphiQL fetcher={fetcher} />;
 
-ReactDOM.render(document.getElementByID('graphiql'), <App />)
+ReactDOM.render(document.getElementByID('graphiql'), <App />);
 ```
 
-
 #### Custom `fetcher` Example
+
 For SSR, we might want to use something like `isomorphic-fetch`
 
 ```ts
-import * as React from "react"
-import ReactDOM from "react-dom"
-import { GraphiQL } from "graphiql"
-import { fetch } from "isomorphic-fetch"
-import { buildGraphiQLFetcher } from "@graphiql/build-fetcher"
-
-const url = 'https://myschema.com/graphql'
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphiQL } from 'graphiql';
+import { fetch } from 'isomorphic-fetch';
+import { buildGraphiQLFetcher } from '@graphiql/build-fetcher';
 
+const url = 'https://myschema.com/graphql';
 
-const fetcher = buildGraphiQLFetcher({ 
-  url, 
-  fetch
+const fetcher = buildGraphiQLFetcher({
+  url,
+  fetch,
 });
 
 export const App = () => <GraphiQL fetcher={fetcher} />;
 
-ReactDOM.render(document.getElementByID('graphiql'), <App />)
+ReactDOM.render(document.getElementByID('graphiql'), <App />);
 ```

packages/graphiql-build-fetcher/src/__tests__/buildFetcher.spec.ts

@@ -17,13 +17,13 @@ import {
 } from '../lib';
 import { createClient } from 'graphql-ws';
 
-const exampleWithSubscripton =  /* GraphQL */ `
-subscription Example {
-  example
-}
-query SomethingElse {
-  example
-}
+const exampleWithSubscripton = /* GraphQL */ `
+  subscription Example {
+    example
+  }
+  query SomethingElse {
+    example
+  }
 `;
 
 const exampleWithSubscriptonNode = parse(exampleWithSubscripton);
@@ -44,7 +44,6 @@ describe('buildGraphiQLFetcher', () => {
     expect(createMultipartFetcher.mock.calls).toEqual([
       [{ enableMultipart: true, url: serverURL }],
     ]);
-
   });
   it('returns fetcher without websocket client or multipart', () => {
     createWebsocketsClient.mockReturnValue(true);

packages/graphiql-build-fetcher/src/__tests__/lib.spec.ts

@@ -1,18 +1,15 @@
 import { parse } from 'graphql';
 import { isSubcriptionWithName, createWebsocketsClient } from '../lib';
 
-import "isomorphic-fetch"
+import 'isomorphic-fetch';
 
+jest.mock('graphql-ws');
 
-jest.mock('graphql-ws')
+jest.mock('graphql-transport-ws');
 
-jest.mock("graphql-transport-ws")
+import { createClient } from 'graphql-ws';
 
-
-
-import { createClient } from "graphql-ws"
-
-import { createClient as  createLegacyClient } from "graphql-transport-ws"
+import { createClient as createLegacyClient } from 'graphql-transport-ws';
 
 const exampleWithSubscripton = /* GraphQL */ parse(`
   subscription Example {
@@ -44,14 +41,14 @@ describe('isSubcriptionWithName', () => {
 describe('createWebsocketsClient', () => {
   afterEach(() => {
     // @ts-ignore
-    createClient.mockRestore()
-  })
+    createClient.mockRestore();
+  });
   it('creates a websockets client using provided url', () => {
     createWebsocketsClient({
       url: 'https://example.com',
       subscriptionsUrl: 'wss://example.com',
     });
     // @ts-ignore
-    expect(createClient.mock.calls[0][0]).toEqual({"url": "wss://example.com"})
+    expect(createClient.mock.calls[0][0]).toEqual({ url: 'wss://example.com' });
   });
 });