Merge pull request #10521 from apollographql/attempt-to-simplify-__DEV__

Simplify `__DEV__` strategy to use internal imports instead of global scope.

.changeset/lazy-teachers-sell.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': minor
+---
+
+Simplify `__DEV__` polyfill to use imports instead of global scope

config/bundlesize.ts

@@ -3,7 +3,7 @@ import { join } from "path";
 import { gzipSync } from "zlib";
 import bytes from "bytes";
 
-const gzipBundleByteLengthLimit = bytes("33.58KB");
+const gzipBundleByteLengthLimit = bytes("33.7KB");
 const minFile = join("dist", "apollo-client.min.cjs");
 const minPath = join(__dirname, "..", minFile);
 const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;

config/postprocessDist.ts

@@ -3,9 +3,6 @@ import * as path from "path";
 import resolve from "resolve";
 import { distDir, eachFile, reparse, reprint } from './helpers';
 
-import { applyDistSpotFixes } from "./distSpotFixes";
-applyDistSpotFixes();
-
 // The primary goal of the 'npm run resolve' script is to make ECMAScript
 // modules exposed by Apollo Client easier to consume natively in web browsers,
 // without bundling, and without help from package.json files. It accomplishes

config/processInvariants.ts

@@ -1,5 +1,5 @@
 import * as fs from "fs";
-import * as path from "path";
+import { posix, join as osPathJoin } from "path";
 import { distDir, eachFile, reparse, reprint } from './helpers';
 
 eachFile(distDir, (file, relPath) => {
@@ -10,7 +10,7 @@ eachFile(distDir, (file, relPath) => {
   }
 }).then(() => {
   fs.writeFileSync(
-    path.join(distDir, "invariantErrorCodes.js"),
+    osPathJoin(distDir, "invariantErrorCodes.js"),
     recast.print(errorCodeManifest, {
       tabWidth: 2,
     }).code + "\n",
@@ -56,14 +56,15 @@ function getErrorCode(
   return numLit;
 }
 
-function transform(code: string, file: string) {
+function transform(code: string, relativeFilePath: string) {
   // If the code doesn't seem to contain anything invariant-related, we
   // can skip parsing and transforming it.
   if (!/invariant/i.test(code)) {
     return code;
   }
 
   const ast = reparse(code);
+  let addedDEV = false;
 
   recast.visit(ast, {
     visitCallExpression(path) {
@@ -76,8 +77,9 @@ function transform(code: string, file: string) {
         }
 
         const newArgs = node.arguments.slice(0, 1);
-        newArgs.push(getErrorCode(file, node));
+        newArgs.push(getErrorCode(relativeFilePath, node));
 
+        addedDEV = true;
         return b.conditionalExpression(
           makeDEVExpr(),
           node,
@@ -94,6 +96,7 @@ function transform(code: string, file: string) {
         if (isDEVLogicalAnd(path.parent.node)) {
           return;
         }
+        addedDEV = true;
         return b.logicalExpression("&&", makeDEVExpr(), node);
       }
     },
@@ -106,8 +109,9 @@ function transform(code: string, file: string) {
           return;
         }
 
-        const newArgs = [getErrorCode(file, node)];
+        const newArgs = [getErrorCode(relativeFilePath, node)];
 
+        addedDEV = true;
         return b.conditionalExpression(
           makeDEVExpr(),
           node,
@@ -120,11 +124,58 @@ function transform(code: string, file: string) {
     }
   });
 
+  if (addedDEV) {
+    // Make sure there's an import { __DEV__ } from "../utilities/globals" or
+    // similar declaration in any module where we injected __DEV__.
+    let foundExistingImportDecl = false;
+
+    recast.visit(ast, {
+      visitImportDeclaration(path) {
+        this.traverse(path);
+        const node = path.node;
+        const importedModuleId = node.source.value;
+
+        // Normalize node.source.value relative to the current file.
+        if (
+          typeof importedModuleId === "string" &&
+          importedModuleId.startsWith(".")
+        ) {
+          const normalized = posix.normalize(posix.join(
+            posix.dirname(relativeFilePath),
+            importedModuleId,
+          ));
+          if (normalized === "utilities/globals") {
+            foundExistingImportDecl = true;
+            if (node.specifiers?.some(s => isIdWithName(s.local || s.id, "__DEV__"))) {
+              return false;
+            }
+            if (!node.specifiers) node.specifiers = [];
+            node.specifiers.push(b.importSpecifier(b.identifier("__DEV__")));
+            return false;
+          }
+        }
+      }
+    });
+
+    if (!foundExistingImportDecl) {
+      // We could modify the AST to include a new import declaration, but since
+      // this code is running at build time, we can simplify things by throwing
+      // here, because we expect invariant and InvariantError to be imported
+      // from the utilities/globals subpackage.
+      throw new Error(`Missing import from "${
+        posix.relative(
+          posix.dirname(relativeFilePath),
+          "utilities/globals",
+        )
+       } in ${relativeFilePath}`);
+    }
+  }
+
   return reprint(ast);
 }
 
-function isIdWithName(node: Node, ...names: string[]) {
-  return n.Identifier.check(node) &&
+function isIdWithName(node: Node | null | undefined, ...names: string[]) {
+  return node && n.Identifier.check(node) &&
     names.some(name => name === node.name);
 }
 

src/__tests__/__snapshots__/exports.ts.snap

@@ -391,19 +391,29 @@ Array [
   "hasAnyDirectives",
   "hasClientExports",
   "hasDirectives",
+  "isAsyncIterableIterator",
+  "isBlob",
   "isDocumentNode",
+  "isExecutionPatchIncrementalResult",
+  "isExecutionPatchInitialResult",
+  "isExecutionPatchResult",
   "isField",
   "isInlineFragment",
+  "isNodeReadableStream",
+  "isNodeResponse",
   "isNonEmptyArray",
   "isNonNullObject",
+  "isReadableStream",
   "isReference",
+  "isStreamableBlob",
   "iterateObserversSafely",
   "makeReference",
   "makeUniqueId",
   "maybe",
   "maybeDeepFreeze",
   "mergeDeep",
   "mergeDeepArray",
+  "mergeIncrementalData",
   "mergeOptions",
   "offsetLimitPagination",
   "relayStylePagination",
@@ -424,7 +434,7 @@ exports[`exports of public entry points @apollo/client/utilities/globals 1`] = `
 Array [
   "DEV",
   "InvariantError",
-  "checkDEV",
+  "__DEV__",
   "global",
   "invariant",
   "maybe",

src/cache/inmemory/__tests__/roundtrip.ts

@@ -1,3 +1,4 @@
+import { __DEV__ } from "../../../utilities/globals";
 import { DocumentNode } from 'graphql';
 import gql from 'graphql-tag';
 

src/cache/inmemory/object-canon.ts

@@ -1,5 +1,4 @@
-import "../../utilities/globals";
-
+import { __DEV__ } from "../../utilities/globals";
 import { Trie } from "@wry/trie";
 import {
   canUseWeakMap,

src/cache/inmemory/policies.ts

@@ -1,4 +1,4 @@
-import { invariant, InvariantError } from '../../utilities/globals';
+import { invariant, InvariantError, __DEV__ } from '../../utilities/globals';
 
 import {
   InlineFragmentNode,

src/cache/inmemory/readFromStore.ts

@@ -1,4 +1,4 @@
-import { invariant, InvariantError } from '../../utilities/globals';
+import { invariant, InvariantError, __DEV__ } from '../../utilities/globals';
 
 import {
   DocumentNode,

src/cache/inmemory/writeToStore.ts

@@ -1,4 +1,4 @@
-import { invariant, InvariantError } from '../../utilities/globals';
+import { invariant, InvariantError, __DEV__ } from '../../utilities/globals';
 import { equal } from '@wry/equality';
 import { Trie } from '@wry/trie';
 import {

src/core/ApolloClient.ts

@@ -1,4 +1,4 @@
-import { invariant, InvariantError } from '../utilities/globals';
+import { invariant, InvariantError, __DEV__ } from '../utilities/globals';
 
 import { ExecutionResult, DocumentNode } from 'graphql';
 

src/core/ObservableQuery.ts

@@ -1,4 +1,4 @@
-import { invariant } from '../utilities/globals';
+import { invariant, __DEV__ } from '../utilities/globals';
 import { DocumentNode } from 'graphql';
 import { equal } from '@wry/equality';
 

src/core/QueryInfo.ts

@@ -3,7 +3,7 @@ import { equal } from "@wry/equality";
 
 import { Cache, ApolloCache } from '../cache';
 import { DeepMerger } from "../utilities"
-import { mergeIncrementalData } from '../utilities/common/incrementalResult';
+import { mergeIncrementalData } from '../utilities';
 import { WatchQueryOptions, ErrorPolicy } from './watchQueryOptions';
 import { ObservableQuery, reobserveCacheFirst } from './ObservableQuery';
 import { QueryListener } from './types';

src/core/QueryManager.ts

@@ -1,4 +1,4 @@
-import { invariant, InvariantError } from '../utilities/globals';
+import { invariant, InvariantError, __DEV__ } from '../utilities/globals';
 
 import { DocumentNode } from 'graphql';
 // TODO(brian): A hack until this issue is resolved (https://github.com/graphql/graphql-js/issues/3356)
@@ -9,7 +9,7 @@ import { ApolloLink, execute, FetchResult } from '../link/core';
 import {
   isExecutionPatchIncrementalResult,
   isExecutionPatchResult,
-} from '../utilities/common/incrementalResult';
+} from '../utilities';
 import { Cache, ApolloCache, canonicalStringify } from '../cache';
 
 import {

src/core/index.ts

@@ -1,6 +1,6 @@
 /* Core */
 
-import { DEV } from '../utilities/globals';
+import { __DEV__ } from '../utilities/globals';
 
 export {
   ApolloClient,
@@ -90,7 +90,7 @@ export {
 // Note that all invariant.* logging is hidden in production.
 import { setVerbosity } from "ts-invariant";
 export { setVerbosity as setLogVerbosity }
-setVerbosity(DEV ? "log" : "silent");
+setVerbosity(__DEV__ ? "log" : "silent");
 
 // Note that importing `gql` by itself, then destructuring
 // additional properties separately before exporting, is intentional.

src/link/http/createHttpLink.ts

@@ -1,4 +1,4 @@
-import '../../utilities/globals';
+import { __DEV__ } from '../../utilities/globals';
 
 import { visit, DefinitionNode, VariableDefinitionNode } from 'graphql';
 

src/link/http/responseIterator.ts

@@ -11,7 +11,7 @@ import {
   isNodeReadableStream,
   isReadableStream,
   isStreamableBlob,
-} from "../../utilities/common/responseIterator";
+} from "../../utilities";
 
 import asyncIterator from "./iterators/async";
 import nodeStreamIterator from "./iterators/nodeStream";

src/react/hoc/__tests__/queries/recomposeWithState.ts

@@ -2,7 +2,7 @@
 // to avoid incurring an indirect dependency on ua-parser-js via fbjs.
 
 import React, { createFactory, Component } from "react";
-import '../../../../utilities/globals'; // For __DEV__
+import { __DEV__ } from "../../../../utilities/globals";
 
 const setStatic =
   (key: string, value: string) => (BaseComponent: React.ComponentClass) => {

src/react/hooks/internal/useIsomorphicLayoutEffect.ts

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useEffect } from 'react';
-import { canUseLayoutEffect } from '../../../utilities/common/canUse';
+import { canUseLayoutEffect } from '../../../utilities';
 
 export const useIsomorphicLayoutEffect = canUseLayoutEffect
   ? useLayoutEffect

src/react/hooks/useSubscription.ts

@@ -1,8 +1,7 @@
-import '../../utilities/globals';
+import { invariant } from '../../utilities/globals';
 import { useState, useRef, useEffect } from 'react';
 import { DocumentNode } from 'graphql';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { invariant } from '../../utilities/globals'
 import { equal } from '@wry/equality';
 
 import { DocumentType, verifyDocumentType } from '../parser';

src/react/hooks/useSuspenseQuery.ts

@@ -1,3 +1,4 @@
+import { invariant, __DEV__ } from '../../utilities/globals';
 import { useRef, useEffect, useCallback, useMemo, useState } from 'react';
 import { equal } from '@wry/equality';
 import {
@@ -11,7 +12,6 @@ import {
   WatchQueryOptions,
   WatchQueryFetchPolicy,
 } from '../../core';
-import { invariant } from '../../utilities/globals';
 import {
   compact,
   Concast,

src/react/hooks/useSyncExternalStore.ts

@@ -1,4 +1,4 @@
-import { invariant } from '../../utilities/globals';
+import { invariant, __DEV__ } from '../../utilities/globals';
 import * as React from 'react';
 
 import { canUseLayoutEffect } from '../../utilities';

src/utilities/common/maybeDeepFreeze.ts

@@ -1,4 +1,4 @@
-import '../globals'; // For __DEV__
+import { __DEV__ } from '../globals';
 import { isNonNullObject } from './objects';
 
 function deepFreeze(value: any) {