Update prettier and run it on all files

graphql-kit · Oct 26, 2020 · 571892c · 571892c
1 parent f30dffa
commit 571892c
Show file tree

Hide file tree

Showing 73 changed files with 928 additions and 592 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,13 @@
+# Copied from '.gitignore', please keep it in sync.
+node_modules
+.tmp
+dist
+demo-dist
+.ghpages-tmp/
+
+stats.json
+npm-debug.log
+
+/lib
+/middleware
+/typings
diff --git a/.prettierrc b/.prettierrc
@@ -1,8 +1,4 @@
 {
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": true,
   "singleQuote": true,
   "trailingComma": "all"
 }
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # GraphQL Voyager
+
 [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/graphql-voyager/badge)](https://www.jsdelivr.com/package/npm/graphql-voyager)
 [![David](https://img.shields.io/david/APIs-guru/graphql-voyager.svg)](https://david-dm.org/APIs-guru/graphql-voyager)
 [![David](https://img.shields.io/david/dev/APIs-guru/graphql-voyager.svg)](https://david-dm.org/APIs-guru/graphql-voyager?type=dev)
@@ -14,50 +15,57 @@ You can also explore number of public GraphQL APIs from [our list](https://githu
 _[GraphQL Weekly #42](https://graphqlweekly.com/issues/42)_
 
 ## [Live Demo](https://apis.guru/graphql-voyager/)
+
 [![voyager demo](./docs/demo-gif.gif)](https://apis.guru/graphql-voyager/)
 
 ## Features
-  + Quick navigation on graph
-  + Left panel which provides more detailed information about every type
-  + "Skip Relay" option that simplifies graph by removing Relay wrapper classes
-  + Ability to choose any type to be a root of the graph
+
+- Quick navigation on graph
+- Left panel which provides more detailed information about every type
+- "Skip Relay" option that simplifies graph by removing Relay wrapper classes
+- Ability to choose any type to be a root of the graph
 
 ## Usage
+
 GraphQL Voyager exports `Voyager` React component and helper `init` function. If used without
 module system it is exported as `GraphQLVoyager` global variable.
 
 ### Properties
+
 `Voyager` component accepts the following properties:
 
-+ `introspection` [`object` or function: `(query: string) => Promise`] - the server introspection response. If `function` is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return `Promise` which resolves to introspection response object.
-+ `displayOptions` _(optional)_
-  + `displayOptions.skipRelay` [`boolean`, default `true`] - skip relay-related entities
-  + `displayOptions.skipDeprecated` [`boolean`, default `true`] - skip deprecated fields and entities that contain only deprecated fields.
-  + `displayOptions.rootType` [`string`] - name of the type to be used as a root
-  + `displayOptions.sortByAlphabet` [`boolean`, default `false`] - sort fields on graph by alphabet
-  + `displayOptions.showLeafFields` [`boolean`, default `true`] - show all scalars and enums
-  + `displayOptions.hideRoot` [`boolean`, default `false`] - hide the root type
-+ `hideDocs` [`boolean`, default `false`] - hide the docs sidebar
-+ `hideSettings` [`boolean`, default `false`] - hide settings panel
-+ `workerURI` [`string`] _(optional)_ - absolute or relative path to Voyager web worker. By default it will try to load it from `voyager.worker.js`.
-+ `loadWorker` [function: `(path: string, relative: boolean) => Promise<Worker>`] _(optional)_ - If provided GraphQL Voyager will use this function to load the worker. By default it will use the internal callback in `utils/index.ts`
+- `introspection` [`object` or function: `(query: string) => Promise`] - the server introspection response. If `function` is provided GraphQL Voyager will pass introspection query as a first function parameter. Function should return `Promise` which resolves to introspection response object.
+- `displayOptions` _(optional)_
+  - `displayOptions.skipRelay` [`boolean`, default `true`] - skip relay-related entities
+  - `displayOptions.skipDeprecated` [`boolean`, default `true`] - skip deprecated fields and entities that contain only deprecated fields.
+  - `displayOptions.rootType` [`string`] - name of the type to be used as a root
+  - `displayOptions.sortByAlphabet` [`boolean`, default `false`] - sort fields on graph by alphabet
+  - `displayOptions.showLeafFields` [`boolean`, default `true`] - show all scalars and enums
+  - `displayOptions.hideRoot` [`boolean`, default `false`] - hide the root type
+- `hideDocs` [`boolean`, default `false`] - hide the docs sidebar
+- `hideSettings` [`boolean`, default `false`] - hide settings panel
+- `workerURI` [`string`] _(optional)_ - absolute or relative path to Voyager web worker. By default it will try to load it from `voyager.worker.js`.
+- `loadWorker` [function: `(path: string, relative: boolean) => Promise<Worker>`] _(optional)_ - If provided GraphQL Voyager will use this function to load the worker. By default it will use the internal callback in `utils/index.ts`
 
 ### `init` function
+
 The signature of the `init` function:
 
 ```js
 (hostElement: HTMLElement, options: object) => void
 ```
 
-+ `hostElement` - parent element
-+ `options` - is the JS object with [properties](#properties) of `Voyager` component
+- `hostElement` - parent element
+- `options` - is the JS object with [properties](#properties) of `Voyager` component
 
 ### Using pre-bundled version
+
 You can get GraphQL Voyager bundle from the following places:
-+ jsDelivr CDN
-  + some exact version - https://cdn.jsdelivr.net/npm/graphql-voyager/v1.0.0-rc.15/voyager.min.js
-  + latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js
-+ from `dist` folder of the npm package `graphql-voyager`
+
+- jsDelivr CDN
+  - some exact version - https://cdn.jsdelivr.net/npm/graphql-voyager/v1.0.0-rc.15/voyager.min.js
+  - latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js
+- from `dist` folder of the npm package `graphql-voyager`
 
 **Important:** for the latest two options make sure to copy `voyager.worker.js` to the same
 folder as `voyager.min.js`.
@@ -71,7 +79,10 @@ folder as `voyager.min.js`.
     <script src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css"
+    />
     <script src="https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.min.js"></script>
   </head>
   <body>
@@ -84,14 +95,15 @@ folder as `voyager.min.js`.
 
       // Render <Voyager />
       GraphQLVoyager.init(document.getElementById('voyager'), {
-        introspection: introspectionProvider
-      })
+        introspection: introspectionProvider,
+      });
     </script>
   </body>
 </html>
 ```
 
 ### Using as a dependency
+
 You can install lib using `npm` or `yarn`:
 
     npm i --save graphql-voyager
@@ -102,18 +114,21 @@ And then use it:
 ```js
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import {Voyager} from 'graphql-voyager';
+import { Voyager } from 'graphql-voyager';
 import fetch from 'isomorphic-fetch';
 
 function introspectionProvider(query) {
   return fetch(window.location.origin + '/graphql', {
     method: 'post',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({query: query}),
-  }).then(response => response.json());
+    body: JSON.stringify({ query: query }),
+  }).then((response) => response.json());
 }
 
-ReactDOM.render(<Voyager introspection={introspectionProvider} />, document.getElementById('voyager'));
+ReactDOM.render(
+  <Voyager introspection={introspectionProvider} />,
+  document.getElementById('voyager'),
+);
 ```
 
 Build for the web with [webpack](https://webpack.js.org/) ([example](./example/webpack-example)) or
@@ -124,23 +139,25 @@ Build for the web with [webpack](https://webpack.js.org/) ([example](./example/w
 **NOTE** if you use it with `create-react-app`, copy worker file to `public` folder and use `workerURI` property like this:
 
 ```jsx
-  <Voyager
-      // ...
-      workerURI={process.env.PUBLIC_URL + '/voyager.worker.js'}
-      // ...
-  />
+<Voyager
+  // ...
+  workerURI={process.env.PUBLIC_URL + '/voyager.worker.js'}
+  // ...
+/>
 ```
 
 ## Middleware
+
 Graphql Voyager has middleware for the next frameworks:
 
 ### Properties
+
 Middleware supports the following properties:
 
- + `endpointUrl` [`string`] - the GraphQL endpoint url.
- + `displayOptions` [`object`] - same as [here](#properties)
- + `headersJS` [`string`, default `"{}"`] - object of headers serialized in string to be used on endpoint url<BR>
- **Note:** You can also use any JS expression which results in an object with header names as keys and strings as values e.g. `{ Authorization: localStorage['Meteor.loginToken'] }`
+- `endpointUrl` [`string`] - the GraphQL endpoint url.
+- `displayOptions` [`object`] - same as [here](#properties)
+- `headersJS` [`string`, default `"{}"`] - object of headers serialized in string to be used on endpoint url<BR>
+  **Note:** You can also use any JS expression which results in an object with header names as keys and strings as values e.g. `{ Authorization: localStorage['Meteor.loginToken'] }`
 
 ### Express
 
@@ -158,21 +175,22 @@ app.listen(3001);
 ### Hapi
 
 #### Version 17+
+
 ```js
 import hapi from 'hapi';
 import { hapi as voyagerMiddleware } from 'graphql-voyager/middleware';
 
 const server = new Hapi.Server({
-  port: 3001
+  port: 3001,
 });
 
 const init = async () => {
   await server.register({
     plugin: voyagerMiddleware,
     options: {
       path: '/voyager',
-      endpointUrl: '/graphql'
-    }
+      endpointUrl: '/graphql',
+    },
   });
 
   await server.start();
@@ -182,23 +200,27 @@ init();
 ```
 
 #### Legacy Versions
+
 ```js
 import hapi from 'hapi';
 import { hapiLegacy as voyagerMiddleware } from 'graphql-voyager/middleware';
 
 const server = new Hapi.Server();
 
 server.connection({
-  port: 3001
+  port: 3001,
 });
 
-server.register({
-  register: voyagerMiddleware,
-  options: {
-    path: '/voyager',
-    endpointUrl: '/graphql'
-  }
-},() => server.start());
+server.register(
+  {
+    register: voyagerMiddleware,
+    options: {
+      path: '/voyager',
+      endpointUrl: '/graphql',
+    },
+  },
+  () => server.start(),
+);
 ```
 
 ### Koa
@@ -211,14 +233,18 @@ import { koa as voyagerMiddleware } from 'graphql-voyager/middleware';
 const app = new Koa();
 const router = new KoaRouter();
 
-router.all('/voyager', voyagerMiddleware({
-  endpointUrl: '/graphql'
-}));
+router.all(
+  '/voyager',
+  voyagerMiddleware({
+    endpointUrl: '/graphql',
+  }),
+);
 
 app.use(router.routes());
 app.use(router.allowedMethods());
 app.listen(3001);
 ```
 
 ## Credits
+
 This tool is inspired by [graphql-visualizer](https://github.com/NathanRSmith/graphql-visualizer) project.
diff --git a/build/helpers.js b/build/helpers.js
@@ -5,5 +5,5 @@ function root(args) {
 }
 
 module.exports = {
-  root: root
-}
+  root: root,
+};
diff --git a/build/webpack.demo.js b/build/webpack.demo.js
@@ -6,7 +6,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const root = require('./helpers').root;
 const VERSION = JSON.stringify(require('../package.json').version);
 
-module.exports = function(_, { mode }) {
+module.exports = function (_, { mode }) {
   return {
     performance: {
       hints: false,
@@ -71,20 +71,20 @@ module.exports = function(_, { mode }) {
                 plugins: [
                   '@babel/plugin-transform-block-scoping',
                   '@babel/plugin-transform-arrow-functions',
-                  '@babel/plugin-transform-destructuring'
-                ]
-              }
+                  '@babel/plugin-transform-destructuring',
+                ],
+              },
             },
             {
               loader: 'react-svg-loader',
               options: {
                 jsx: false,
                 svgo: {
-                  plugins: [{mergePaths: false}]
-                }
-              }
-            }
-          ]
+                  plugins: [{ mergePaths: false }],
+                },
+              },
+            },
+          ],
         },
       ],
     },

diff --git a/build/webpack.js b/build/webpack.js
@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const nodeExternals = require('webpack-node-externals')({
-  whitelist: ['viz.js/full.render.js']
+  whitelist: ['viz.js/full.render.js'],
 });
 
 const root = require('./helpers').root;
@@ -79,7 +79,7 @@ module.exports = (env = {}, { mode }) => ({
             {
               loader: 'css-loader',
               options: {
-                sourceMap: true
+                sourceMap: true,
               },
             },
             'postcss-loader?sourceMap',

diff --git a/demo/IntrospectionModal.css b/demo/IntrospectionModal.css
@@ -97,7 +97,7 @@
   align-content: center;
   justify-content: space-around;
 
-   @media (--small-viewport) {
+  @media (--small-viewport) {
     padding-right: 0;
   }