graphql · acao · Feb 21, 2020 · Feb 22, 2020 · Feb 28, 2020 · Mar 3, 2020
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,7 +31,7 @@ module.exports = {
     browser: true,
   },
 
-  extends: ['prettier', 'plugin:import/typescript', 'plugin:react/recommended'],
+  extends: ['prettier', 'plugin:import/typescript', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
 
   globals: {
     atom: false,

diff --git a/jest.config.js b/jest.config.js
@@ -28,7 +28,12 @@ module.exports = {
     '!**/cypress/**',
   ],
   testEnvironment: require.resolve('jest-environment-jsdom'),
-  testPathIgnorePatterns: ['node_modules', 'dist', 'codemirror-graphql'],
+  testPathIgnorePatterns: [
+    'node_modules',
+    'dist',
+    'codemirror-graphql',
+    'packages/graphiql',
+  ],
   collectCoverageFrom: [
     '**/src/**/*.{js,jsx,ts,tsx}',
     '!**/src/**/*.stories.js*',

diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "test-mocha": "yarn workspace codemirror-graphql run test",
     "test-all": "yarn test && yarn test-mocha",
     "ci": "yarn lint && yarn run check && yarn build && yarn test",
-    "ci-e2e": "yarn build-ts-esm && yarn workspace codemirror-graphql run build && yarn workspace graphiql run build-bundles-min && yarn e2e",
+    "ci-e2e": "yarn build-ts-esm && yarn workspace codemirror-graphql run build && yarn workspace graphiql run build-bundles-min",
     "ci-validate": "yarn build-ts-esm && yarn build-validate",
     "testonly": "jest && yarn workspace codemirror-graphql run test",
     "e2e": "yarn workspace graphiql e2e",
@@ -53,7 +53,9 @@
     "pretty-check": "node resources/pretty.js --check",
     "format": "yarn eslint --fix && yarn pretty",
     "lerna-publish": "lerna publish",
-    "prepublish": "./resources/prepublish.sh"
+    "prepublish": "./resources/prepublish.sh",
+    "dev-graphiql": "yarn workspace graphiql run dev",
+    "dev-lsp": "echo no-op"
   },
   "devDependencies": {
     "@babel/cli": "7.8.4",
@@ -96,6 +98,7 @@
     "eslint-plugin-jest": "^23.1.1",
     "eslint-plugin-prefer-object-spread": "1.2.1",
     "eslint-plugin-react": "7.18.3",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "fetch-mock": "6.5.2",
     "flow-bin": "^0.119.1",
     "graphql": "^14.6.0",

diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -71,6 +71,7 @@
     "cross-env": "^7.0.0",
     "css-loader": "3.4.2",
     "cssnano": "^4.1.10",
+    "error-overlay-webpack-plugin": "^0.4.1",
     "express": "4.17.1",
     "express-graphql": "0.9.0",
     "fork-ts-checker-webpack-plugin": "4.0.4",

diff --git a/packages/graphiql/resources/webpack.config.js b/packages/graphiql/resources/webpack.config.js
@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
 
 const isDev = process.env.NODE_ENV === 'development';
 const isHMR = Boolean(isDev && process.env.WEBPACK_DEV_SERVER);
@@ -37,7 +38,7 @@ const resultConfig = {
     allowedHosts: ['local.example.com', 'graphiql.com'],
     before: require('../test/beforeDevServer'),
   },
-  devtool: isDev ? 'cheap-module-eval-source-map' : 'source-map',
+  devtool: isDev ? 'cheap-module-source-map' : 'source-map',
   node: {
     fs: 'empty',
   },
@@ -129,6 +130,7 @@ if (process.env.ANALYZE) {
       openAnalyzer: false,
       reportFilename: rootPath('analyzer.html'),
     }),
+    new ErrorOverlayPlugin(),
   );
 }
 

diff --git a/packages/graphiql/src/components/ExecuteButton.tsx b/packages/graphiql/src/components/ExecuteButton.tsx
@@ -4,8 +4,9 @@
  *  This source code is licensed under the MIT license found in the
  *  LICENSE file in the root directory of this source tree.
  */
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEventHandler, useState } from 'react';
 import { OperationDefinitionNode } from 'graphql';
+import { useSessionContext } from '../state/GraphiQLSessionProvider';
 
 /**
  * ExecuteButton
@@ -15,134 +16,111 @@ import { OperationDefinitionNode } from 'graphql';
  */
 
 type ExecuteButtonProps = {
-  operations?: OperationDefinitionNode[];
   isRunning: boolean;
   onStop: () => void;
-  onRun: (value?: string) => void;
 };
 
-type ExecuteButtonState = {
-  optionsOpen: boolean;
-  highlight: OperationDefinitionNode | null;
-};
-
-export class ExecuteButton extends React.Component<
-  ExecuteButtonProps,
-  ExecuteButtonState
-> {
-  constructor(props: ExecuteButtonProps) {
-    super(props);
-
-    this.state = {
-      optionsOpen: false,
-      highlight: null,
-    };
-  }
-
-  render() {
-    const operations = this.props.operations || [];
-    const optionsOpen = this.state.optionsOpen;
-    const hasOptions = operations && operations.length > 1;
-
-    let options = null;
-    if (hasOptions && optionsOpen) {
-      const highlight = this.state.highlight;
-      options = (
-        <ul className="execute-options">
-          {operations.map((operation, i) => {
-            const opName = operation.name
-              ? operation.name.value
-              : `<Unnamed ${operation.operation}>`;
-            return (
-              <li
-                key={`${opName}-${i}`}
-                className={operation === highlight ? 'selected' : undefined}
-                onMouseOver={() => this.setState({ highlight: operation })}
-                onMouseOut={() => this.setState({ highlight: null })}
-                onMouseUp={() => this._onOptionSelected(operation)}>
-                {opName}
-              </li>
-            );
-          })}
-        </ul>
-      );
-    }
-
-    // Allow click event if there is a running query or if there are not options
-    // for which operation to run.
-    let onClick;
-    if (this.props.isRunning || !hasOptions) {
-      onClick = this._onClick;
-    }
-
-    // Allow mouse down if there is no running query, there are options for
-    // which operation to run, and the dropdown is currently closed.
-    let onMouseDown: MouseEventHandler<HTMLButtonElement> = () => {};
-    if (!this.props.isRunning && hasOptions && !optionsOpen) {
-      onMouseDown = this._onOptionsOpen;
-    }
-
-    const pathJSX = this.props.isRunning ? (
-      <path d="M 10 10 L 23 10 L 23 23 L 10 23 z" />
-    ) : (
-      <path d="M 11 9 L 24 16 L 11 23 z" />
-    );
-
-    return (
-      <div className="execute-button-wrap">
-        <button
-          type="button"
-          className="execute-button"
-          onMouseDown={onMouseDown}
-          onClick={onClick}
-          title="Execute Query (Ctrl-Enter)">
-          <svg width="34" height="34">
-            {pathJSX}
-          </svg>
-        </button>
-        {options}
-      </div>
+export function ExecuteButton(props: ExecuteButtonProps) {
+  const [optionsOpen, setOptionsOpen] = useState(false);
+  const [highlight, setHighlight] = useState<OperationDefinitionNode | null>(
+    null,
+  );
+  const session = useSessionContext();
+  const operations = session.operations ?? [];
+  const hasOptions = operations && operations.length > 1;
+
+  let options: JSX.Element | null = null;
+  if (hasOptions && optionsOpen) {
+    options = (
+      <ul className="execute-options">
+        {operations.map((operation, i) => {
+          const opName = operation.name
+            ? operation.name.value
+            : `<Unnamed ${operation.operation}>`;
+          return (
+            <li
+              key={`${opName}-${i}`}
+              className={operation === highlight ? 'selected' : undefined}
+              onMouseOver={() => setHighlight(operation)}
+              onMouseOut={() => setHighlight(null)}
+              onMouseUp={() => {
+                setOptionsOpen(false);
+                session.executeOperation(operation?.name?.value);
+              }}>
+              {opName}
+            </li>
+          );
+        })}
+      </ul>
     );
   }
 
-  _onClick = () => {
-    if (this.props.isRunning) {
-      this.props.onStop();
-    } else {
-      this.props.onRun();
-    }
-  };
-
-  _onOptionSelected = (operation: OperationDefinitionNode) => {
-    this.setState({ optionsOpen: false });
-    this.props.onRun(operation.name && operation.name.value);
-  };
-
-  _onOptionsOpen: MouseEventHandler<HTMLButtonElement> = downEvent => {
-    let initialPress = true;
-    const downTarget = downEvent.currentTarget;
-    this.setState({ highlight: null, optionsOpen: true });
-
-    type MouseUpEventHandler = (upEvent: MouseEvent) => void;
-    let onMouseUp: MouseUpEventHandler | null = upEvent => {
-      if (initialPress && upEvent.target === downTarget) {
-        initialPress = false;
+  // Allow click event if there is a running query or if there are not options
+  // for which operation to run.
+  let onClick;
+  if (props.isRunning || !hasOptions) {
+    onClick = () => {
+      if (props.isRunning) {
+        props.onStop();
       } else {
-        document.removeEventListener('mouseup', onMouseUp!);
-        onMouseUp = null;
-        const isOptionsMenuClicked =
-          upEvent.currentTarget &&
-          downTarget.parentNode?.compareDocumentPosition(
-            upEvent.currentTarget as Node,
-          ) &&
-          Node.DOCUMENT_POSITION_CONTAINED_BY;
-        if (!isOptionsMenuClicked) {
-          // menu calls setState if it was clicked
-          this.setState({ optionsOpen: false });
-        }
+        session.executeOperation();
       }
     };
+  }
+
+  // Allow mouse down if there is no running query, there are options for
+  // which operation to run, and the dropdown is currently closed.
+  let onMouseDown: MouseEventHandler<HTMLButtonElement> = () => {};
+  if (!props.isRunning && hasOptions && !optionsOpen) {
+    onMouseDown = downEvent => {
+      let initialPress = true;
+      const downTarget = downEvent.currentTarget;
+      setHighlight(null);
+      setOptionsOpen(true);
+
+      type MouseUpEventHandler = (upEvent: MouseEvent) => void;
+      let onMouseUp: MouseUpEventHandler | null = upEvent => {
+        if (initialPress && upEvent.target === downTarget) {
+          initialPress = false;
+        } else {
+          document.removeEventListener('mouseup', onMouseUp!);
+          onMouseUp = null;
+          const isOptionsMenuClicked =
+            upEvent.currentTarget &&
+            downTarget.parentNode?.compareDocumentPosition(
+              upEvent.currentTarget as Node,
+            ) &&
+            Node.DOCUMENT_POSITION_CONTAINED_BY;
+          if (!isOptionsMenuClicked) {
+            // menu calls setState if it was clicked
+            setOptionsOpen(false);
+          }
+        }
+      };
+
+      document.addEventListener('mouseup', onMouseUp);
+    };
+  }
 
-    document.addEventListener('mouseup', onMouseUp);
-  };
+  const pathJSX = props.isRunning ? (
+    <path d="M 10 10 L 23 10 L 23 23 L 10 23 z" />
+  ) : (
+    <path d="M 11 9 L 24 16 L 11 23 z" />
+  );
+
+  return (
+    <div className="execute-button-wrap">
+      <button
+        type="button"
+        className="execute-button"
+        onMouseDown={onMouseDown}
+        onClick={onClick}
+        title="Execute Query (Ctrl-Enter)">
+        <svg width="34" height="34">
+          {pathJSX}
+        </svg>
+      </button>
+      {options}
+    </div>
+  );
 }