[v4] prefer location over window.location and prefer navigator …

…over `window.navigator` (#3692)

.changeset/spotty-bulldogs-confess.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+- prefer `location` over `window.location`
+- prefer `navigator` over `window.navigator`

.eslintrc.js

@@ -129,6 +129,16 @@ module.exports = {
             property: 'localStorage',
             message: 'Use `localStorage` instead',
           },
+          {
+            object: 'window',
+            property: 'location',
+            message: 'Use `location` instead',
+          },
+          {
+            object: 'window',
+            property: 'navigator',
+            message: 'Use `navigator` instead',
+          },
         ],
         'no-return-assign': 'error',
         'no-return-await': 'error',

package.json

@@ -33,7 +33,7 @@
   "scripts": {
     "build": "yarn build-clean && yarn tsc && yarn build:nontsc",
     "build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",
-    "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}'",
+    "build-bundles-clean": "rimraf '{packages,examples}/**/{bundle,cdn,webpack}'",
     "build-clean": "yarn tsc --clean",
     "build-docs": "rimraf packages/graphiql/typedoc && typedoc packages",
     "build:nontsc": "yarn wsrun:noexamples --exclude-missing --serial build",

packages/graphiql-react/src/editor/common.ts

@@ -3,11 +3,9 @@ import { KeyMap } from './types';
 export const DEFAULT_EDITOR_THEME = 'graphiql';
 export const DEFAULT_KEY_MAP: KeyMap = 'sublime';
 
-let isMacOs = false;
-
-if (typeof window === 'object') {
-  isMacOs = window.navigator.platform.toLowerCase().indexOf('mac') === 0;
-}
+const isMacOs =
+  typeof navigator !== 'undefined' &&
+  navigator.platform.toLowerCase().indexOf('mac') === 0;
 
 export const commonKeys = {
   // Persistent search box in Query Editor
@@ -30,10 +28,10 @@ export async function importCodeMirror(
   addons: Promise<any>[],
   options?: { useCommonAddons?: boolean },
 ) {
-  const CodeMirror = await import('codemirror').then(c =>
+  const CodeMirror = await import('codemirror').then(mod =>
     // Depending on bundler and settings the dynamic import either returns a
     // function (e.g. parcel) or an object containing a `default` property
-    typeof c === 'function' ? c : c.default,
+    typeof mod === 'function' ? mod : mod.default,
   );
   await Promise.all(
     options?.useCommonAddons === false

packages/graphiql-react/src/editor/components/image-preview.tsx

@@ -76,11 +76,8 @@ function tokenToURL(token: Token) {
   const value = token.string.slice(1).slice(0, -1).trim();
 
   try {
-    const { location } = window;
     return new URL(value, location.protocol + '//' + location.host);
-  } catch {
-    return;
-  }
+  } catch {}
 }
 
 function isImageURL(url: URL) {

packages/graphiql/resources/renderExample.js

@@ -14,7 +14,7 @@
 
 // Parse the search string to get url parameters.
 const parameters = {};
-for (const entry of window.location.search.slice(1).split('&')) {
+for (const entry of location.search.slice(1).split('&')) {
   const eq = entry.indexOf('=');
   if (eq >= 0) {
     parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
@@ -60,22 +60,22 @@ function updateURL() {
 }
 
 function getSchemaUrl() {
-  const isDev = window.location.hostname.match(/localhost$/);
+  const isDev = /localhost$/.test(location.hostname);
 
-  if (isDev) {
-    // This supports an e2e test which ensures that invalid schemas do not load.
-    if (parameters.bad === 'true') {
-      return '/bad/graphql';
-    }
-    if (parameters['http-error'] === 'true') {
-      return '/http-error/graphql';
-    }
-    if (parameters['graphql-error'] === 'true') {
-      return '/graphql-error/graphql';
-    }
-    return '/graphql';
+  if (!isDev) {
+    return '/.netlify/functions/graphql';
   }
-  return '/.netlify/functions/graphql';
+  // This supports an e2e test which ensures that invalid schemas do not load.
+  if (parameters.bad === 'true') {
+    return '/bad/graphql';
+  }
+  if (parameters['http-error'] === 'true') {
+    return '/http-error/graphql';
+  }
+  if (parameters['graphql-error'] === 'true') {
+    return '/graphql-error/graphql';
+  }
+  return '/graphql';
 }
 
 // Render <GraphiQL /> into the body.

packages/graphiql/src/components/GraphiQL.tsx

@@ -555,8 +555,8 @@
                           aria-controls="graphiql-session"
                           id={`graphiql-session-tab-${index}`}
                           onClick={() => {
                             executionContext.stop();
                             editorContext.changeTab(index);
                           }}
                         >
                           {tab.title}
@@ -865,8 +865,8 @@
 }
 
 const modifier =
-  typeof window !== 'undefined' &&
-  window.navigator.platform.toLowerCase().indexOf('mac') === 0
+  typeof navigator !== 'undefined' &&
+  navigator.platform.toLowerCase().indexOf('mac') === 0
     ? 'Cmd'
     : 'Ctrl';