@arcblock/graphql-playground 2.1.17 → 2.1.20

package/lib/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = GraphQLPlayground;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -37,14 +37,12 @@ var _Util = require("@arcblock/ux/lib/Util");
 
 var _util = require("./util");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 const _excluded = ["endpoint", "title", "enableCodeExporter", "enableQueryComposer", "enableHistory", "extraCodeSnippets"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -85,7 +83,8 @@ function GraphQLPlayground(props) {
       } else {
         persistQuery(query);
       }
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
 
   const onInspect = (cm, mousePos) => {
@@ -214,7 +213,7 @@ function GraphQLPlayground(props) {
         'Shift-Alt-LeftClick': onInspect
       }));
       setSchema((0, _graphql.buildClientSchema)(result.data));
-    });
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphiql.current]);
 
   const {
@@ -228,47 +227,55 @@ function GraphQLPlayground(props) {
         rest = _objectWithoutProperties(newProps, _excluded);
 
   const snippets = [...extraCodeSnippets, ..._snippets.default];
-  return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement(_reactLoadScript.default, {
-    url: "//cdn.jsdelivr.net/npm/@absinthe/socket-graphiql@0.2.1/compat/umd/index.js"
-  }), enableQueryComposer && /*#__PURE__*/_react.default.createElement(_graphiqlExplorer.default, {
-    schema: schema,
-    query: query,
-    onEdit: onEditQuery,
-    onRunOperation: operationName => graphiql.current.handleRunQuery(operationName),
-    explorerIsOpen: queryComposerIsOpen,
-    onToggleExplorer: onToggleExplorer,
-    className: "graphiql-explorer"
-  }), /*#__PURE__*/_react.default.createElement(_graphiql.default, {
-    ref: graphiql,
-    fetcher: fetcher,
-    schema: schema,
-    query: query,
-    onEditQuery: onEditQuery
-  }, /*#__PURE__*/_react.default.createElement(_graphiql.default.Logo, null, title), /*#__PURE__*/_react.default.createElement(_graphiql.default.Toolbar, null, /*#__PURE__*/_react.default.createElement(_graphiql.default.Button, {
-    onClick: () => graphiql.current.handlePrettifyQuery(),
-    label: "Prettify",
-    title: "Prettify Query (Shift-Ctrl-P)"
-  }), enableHistory && /*#__PURE__*/_react.default.createElement(_graphiql.default.Button, {
-    onClick: () => graphiql.current.handleToggleHistory(),
-    label: "History",
-    title: "Show History"
-  }), enableQueryComposer && /*#__PURE__*/_react.default.createElement(_graphiql.default.Button, {
-    onClick: onToggleExplorer,
-    label: "Query Composer",
-    title: "Toggle Query Composer"
-  }), enableCodeExporter && /*#__PURE__*/_react.default.createElement(_graphiql.default.Button, {
-    onClick: onToggleCodeExporter,
-    label: "Code Exporter",
-    title: "Toggle Code Exporter"
-  }))), enableCodeExporter && codeExporterIsOpen && /*#__PURE__*/_react.default.createElement("div", {
-    className: "graphiql-container graphiql-exporter-container"
-  }, /*#__PURE__*/_react.default.createElement(_graphiqlCodeExporter.default, {
-    hideCodeExporter: onToggleCodeExporter,
-    snippets: snippets,
-    serverUrl: endpoint,
-    query: query,
-    codeMirrorTheme: "neo"
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactLoadScript.default, {
+      url: "//cdn.jsdelivr.net/npm/@absinthe/socket-graphiql@0.2.1/compat/umd/index.js"
+    }), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiqlExplorer.default, {
+      schema: schema,
+      query: query,
+      onEdit: onEditQuery,
+      onRunOperation: operationName => graphiql.current.handleRunQuery(operationName),
+      explorerIsOpen: queryComposerIsOpen,
+      onToggleExplorer: onToggleExplorer,
+      className: "graphiql-explorer"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_graphiql.default, {
+      ref: graphiql,
+      fetcher: fetcher,
+      schema: schema,
+      query: query,
+      onEditQuery: onEditQuery,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Logo, {
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_graphiql.default.Toolbar, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+          onClick: () => graphiql.current.handlePrettifyQuery(),
+          label: "Prettify",
+          title: "Prettify Query (Shift-Ctrl-P)"
+        }), enableHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+          onClick: () => graphiql.current.handleToggleHistory(),
+          label: "History",
+          title: "Show History"
+        }), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+          onClick: onToggleExplorer,
+          label: "Query Composer",
+          title: "Toggle Query Composer"
+        }), enableCodeExporter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+          onClick: onToggleCodeExporter,
+          label: "Code Exporter",
+          title: "Toggle Code Exporter"
+        })]
+      })]
+    }), enableCodeExporter && codeExporterIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "graphiql-container graphiql-exporter-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiqlCodeExporter.default, {
+        hideCodeExporter: onToggleCodeExporter,
+        snippets: snippets,
+        serverUrl: endpoint,
+        query: query,
+        codeMirrorTheme: "neo"
+      })
+    })]
+  }));
 }
 
 GraphQLPlayground.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "2.1.17",
+  "version": "2.1.20",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -33,7 +33,7 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.17",
+    "@arcblock/ux": "^2.1.20",
     "axios": "^0.21.2",
     "core-js": "^3.6.4",
     "graphiql": "^0.13.2",
@@ -59,5 +59,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "607634595a2b72ad99cacdc02e6a0070a345368b"
+  "gitHead": "3a9597b7caac6d1466136c9e7419833eb8d50190"
 }

package/src/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable indent */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-undef */
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import axios from 'axios';
@@ -37,7 +37,7 @@ export default function GraphQLPlayground(props) {
   const [queryComposerIsOpen, setComposerOpen] = useState(newProps.enableQueryComposer);
   const [codeExporterIsOpen, setExporterOpen] = useState(false);
 
-  const persistQuery = newQuery => {
+  const persistQuery = (newQuery) => {
     const { pathname, search } = history.location;
     const params = parseQuery(search);
     params.query = newQuery;
@@ -54,6 +54,7 @@ export default function GraphQLPlayground(props) {
         persistQuery(query);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onInspect = (cm, mousePos) => {
@@ -75,7 +76,7 @@ export default function GraphQLPlayground(props) {
 
     const position = relevantMousePos;
 
-    const def = parsedQuery.definitions.find(definition => {
+    const def = parsedQuery.definitions.find((definition) => {
       if (!definition.loc) {
         // eslint-disable-next-line no-console
         console.log('Missing location information for definition');
@@ -93,11 +94,7 @@ export default function GraphQLPlayground(props) {
     }
 
     const operationKind =
-      def.kind === 'OperationDefinition'
-        ? def.operation
-        : def.kind === 'FragmentDefinition'
-        ? 'fragment'
-        : 'unknown';
+      def.kind === 'OperationDefinition' ? def.operation : def.kind === 'FragmentDefinition' ? 'fragment' : 'unknown';
 
     const operationName =
       def.kind === 'OperationDefinition' && !!def.name
@@ -114,7 +111,7 @@ export default function GraphQLPlayground(props) {
     }
   };
 
-  const onEditQuery = newQuery => {
+  const onEditQuery = (newQuery) => {
     if (newQuery !== query && newProps.persistentQuery) {
       persistQuery(newQuery);
     }
@@ -145,11 +142,9 @@ export default function GraphQLPlayground(props) {
     );
   };
 
-  const httpFetcher = async params => {
+  const httpFetcher = async (params) => {
     const extraHeaders =
-      typeof newProps.extraHeaders === 'function'
-        ? newProps.extraHeaders()
-        : newProps.extraHeaders || {};
+      typeof newProps.extraHeaders === 'function' ? newProps.extraHeaders() : newProps.extraHeaders || {};
 
     const res = await axios({
       method: 'post',
@@ -166,7 +161,7 @@ export default function GraphQLPlayground(props) {
     return res.data;
   };
 
-  const fetcher = params => {
+  const fetcher = (params) => {
     if (params.query.indexOf('subscription') >= 0) {
       ensureSubscriptionClient();
 
@@ -182,7 +177,7 @@ export default function GraphQLPlayground(props) {
   useEffect(() => {
     httpFetcher({
       query: getIntrospectionQuery(),
-    }).then(result => {
+    }).then((result) => {
       if (!graphiql.current) {
         return;
       }
@@ -195,17 +190,11 @@ export default function GraphQLPlayground(props) {
 
       setSchema(buildClientSchema(result.data));
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [graphiql.current]);
 
-  const {
-    endpoint,
-    title,
-    enableCodeExporter,
-    enableQueryComposer,
-    enableHistory,
-    extraCodeSnippets,
-    ...rest
-  } = newProps;
+  const { endpoint, title, enableCodeExporter, enableQueryComposer, enableHistory, extraCodeSnippets, ...rest } =
+    newProps;
   const snippets = [...extraCodeSnippets, ...CodeExporterSnippets];
 
   return (
@@ -216,18 +205,13 @@ export default function GraphQLPlayground(props) {
           schema={schema}
           query={query}
           onEdit={onEditQuery}
-          onRunOperation={operationName => graphiql.current.handleRunQuery(operationName)}
+          onRunOperation={(operationName) => graphiql.current.handleRunQuery(operationName)}
           explorerIsOpen={queryComposerIsOpen}
           onToggleExplorer={onToggleExplorer}
           className="graphiql-explorer"
         />
       )}
-      <GraphiQL
-        ref={graphiql}
-        fetcher={fetcher}
-        schema={schema}
-        query={query}
-        onEditQuery={onEditQuery}>
+      <GraphiQL ref={graphiql} fetcher={fetcher} schema={schema} query={query} onEditQuery={onEditQuery}>
         <GraphiQL.Logo>{title}</GraphiQL.Logo>
         <GraphiQL.Toolbar>
           <GraphiQL.Button
@@ -243,18 +227,10 @@ export default function GraphQLPlayground(props) {
             />
           )}
           {enableQueryComposer && (
-            <GraphiQL.Button
-              onClick={onToggleExplorer}
-              label="Query Composer"
-              title="Toggle Query Composer"
-            />
+            <GraphiQL.Button onClick={onToggleExplorer} label="Query Composer" title="Toggle Query Composer" />
           )}
           {enableCodeExporter && (
-            <GraphiQL.Button
-              onClick={onToggleCodeExporter}
-              label="Code Exporter"
-              title="Toggle Code Exporter"
-            />
+            <GraphiQL.Button onClick={onToggleCodeExporter} label="Code Exporter" title="Toggle Code Exporter" />
           )}
         </GraphiQL.Toolbar>
       </GraphiQL>
@@ -304,15 +280,14 @@ const Container = styled.div`
   height: 100%;
   position: relative;
 
-  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
     margin-top: 30px;
   }
 
   > .historyPaneWrap {
     z-index: 8 !important;
     width: 320px !important;
-    box-shadow: 5px 16px 10px 0
-      rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
     overflow-y: scroll;
   }
 
@@ -334,7 +309,7 @@ const Container = styled.div`
     font-size: 14px;
     font-weight: 900;
     letter-spacing: 2px;
-    color: ${props => props.theme.typography.color.gray};
+    color: ${(props) => props.theme.typography.color.gray};
     text-transform: uppercase;
     text-align: left !important;
   }
@@ -342,19 +317,19 @@ const Container = styled.div`
   .doc-explorer-contents,
   .history-contents {
     top: 45px !important;
-    background-color: ${props => props.theme.palette.background.default} !important;
+    background-color: ${(props) => props.theme.palette.background.default} !important;
     border-top: 1px solid #e3e3e3 !important;
   }
 
   .history-contents {
-    color: ${props => props.theme.typography.color.main};
+    color: ${(props) => props.theme.typography.color.main};
     p {
       border-bottom: 1px solid #e3e3e3;
     }
   }
 
   .docExplorerHide {
-    color: ${props => props.theme.typography.color.main};
+    color: ${(props) => props.theme.typography.color.main};
     padding: 0;
     cursor: pointer;
     margin: -7px -8px -6px -12px;
@@ -368,7 +343,7 @@ const Container = styled.div`
 
   .graphiql-container {
     .title {
-      color: ${props => props.theme.typography.color.main};
+      color: ${(props) => props.theme.typography.color.main};
     }
 
     .topBar {
@@ -378,14 +353,14 @@ const Container = styled.div`
     }
 
     .docExplorerShow {
-      background: ${props => props.theme.palette.background.default};
+      background: ${(props) => props.theme.palette.background.default};
       border: none;
       font-size: 14px;
-      color: ${props => props.theme.typography.color.main};
+      color: ${(props) => props.theme.typography.color.main};
       text-transform: uppercase;
 
       &::before {
-        border-color: ${props => props.theme.typography.color.gray};
+        border-color: ${(props) => props.theme.typography.color.gray};
       }
     }
 
@@ -394,22 +369,20 @@ const Container = styled.div`
       height: 100%;
       top: 0;
       right: 0;
-      background-color: ${props => props.theme.palette.background.default};
-      box-shadow: -5px 16px 10px 0
-        rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+      background-color: ${(props) => props.theme.palette.background.default};
+      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
       z-index: 3;
     }
 
     .historyPaneWrap {
       width: 320px !important;
-      background-color: ${props => props.theme.palette.background.default};
-      box-shadow: 5px 16px 10px 0
-        rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+      background-color: ${(props) => props.theme.palette.background.default};
+      box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
     }
 
     .docExplorerWrap {
       .doc-explorer {
-        background-color: ${props => props.theme.palette.background.default};
+        background-color: ${(props) => props.theme.palette.background.default};
       }
       .doc-explorer-contents {
         padding: 32px;
@@ -423,7 +396,7 @@ const Container = styled.div`
       input {
         height: 30px;
         border-radius: 15px;
-        border: solid 1px ${props => props.theme.typography.color.main};
+        border: solid 1px ${(props) => props.theme.typography.color.main};
         padding: 6px 24px 8px 30px;
       }
 
@@ -437,14 +410,14 @@ const Container = styled.div`
     }
 
     .variable-editor-title {
-      background: ${props => props.theme.palette.background.default};
+      background: ${(props) => props.theme.palette.background.default};
       border: none;
       height: 40px;
       padding-left: 20px;
 
       &::before {
-        border-left: 2px solid ${props => props.theme.typography.color.gray};
-        border-top: 2px solid ${props => props.theme.typography.color.gray};
+        border-left: 2px solid ${(props) => props.theme.typography.color.gray};
+        border-top: 2px solid ${(props) => props.theme.typography.color.gray};
         content: '';
         display: inline-block;
         height: 9px;
@@ -462,8 +435,7 @@ const Container = styled.div`
         opacity: 0.5;
       }
       .CodeMirror-gutter.CodeMirror-foldgutter {
-        box-shadow: 5px 16px 10px 0
-          rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+        box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
       }
     }
 
@@ -471,7 +443,7 @@ const Container = styled.div`
     .CodeMirror-gutters,
     .CodeMirror-linenumber,
     .CodeMirror-foldgutter {
-      background: ${props => props.theme.palette.background.default};
+      background: ${(props) => props.theme.palette.background.default};
     }
 
     .variable-editor {
@@ -492,9 +464,8 @@ const Container = styled.div`
       height: 100%;
       top: 0;
       right: 0;
-      background-color: ${props => props.theme.palette.background.default};
-      box-shadow: -5px 16px 10px 0
-        rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+      background-color: ${(props) => props.theme.palette.background.default};
+      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
       z-index: 3;
 
       .history-contents {

package/src/util.js

@@ -1,6 +1,6 @@
 import { parse } from 'graphql';
 
-const hasSubscriptionOperation = graphQlParams => {
+const hasSubscriptionOperation = (graphQlParams) => {
   const queryDoc = parse(graphQlParams.query);
 
   for (const definition of queryDoc.definitions) {
@@ -18,7 +18,7 @@ const hasSubscriptionOperation = graphQlParams => {
 export const graphQLFetcher = (subscriptionsClient, fallbackFetcher) => {
   let activeSubscriptionId = null;
 
-  return params => {
+  return (params) => {
     if (subscriptionsClient && activeSubscriptionId !== null) {
       subscriptionsClient.unsubscribe(activeSubscriptionId);
     }