Don’t destructure require from react to improve the esbuild bundl…

…e size.

See evanw/esbuild#1183 .

changelog.md

@@ -17,6 +17,7 @@
 - Test the bundle size using [`esbuild`](https://npm.im/esbuild) instead of [`webpack`](https://npm.im/webpack) and [`disposable-directory`](https://npm.im/disposable-directory).
 - Increased the documented bundle size to “< 4 kB” to match that of [`esbuild`](https://npm.im/esbuild) instead of [`webpack`](https://npm.im/webpack).
 - Use the correct `kB` symbol instead of `KB` wherever bundle size is mentioned in the package description and readme.
+- Don’t destructure `require` from [`react`](https://npm.im/react) to slightly improve the [`esbuild`](https://npm.im/esbuild) bundle size.
 - Updated the [example Next.js app](https://graphql-react.vercel.app) URL in the readme.
 
 ## 13.0.0

private/useForceUpdate.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useReducer } = require('react');
+const React = require('react');
 
 /**
  * A React hook to force the component to update and re-render.
@@ -12,5 +12,5 @@ const { useReducer } = require('react');
  * @ignore
  */
 module.exports = function useForceUpdate() {
-  return useReducer(() => Symbol())[1];
+  return React.useReducer(() => Symbol())[1];
 };

public/CacheContext.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createContext } = require('react');
+const React = require('react');
 
 /**
  * React context for a [`Cache`]{@link Cache} instance.
@@ -26,7 +26,7 @@ const { createContext } = require('react');
  * const CacheContext = require('graphql-react/public/CacheContext.js');
  * ```
  */
-const CacheContext = createContext();
+const CacheContext = React.createContext();
 
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
   CacheContext.displayName = 'CacheContext';

public/HydrationTimeStampContext.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createContext } = require('react');
+const React = require('react');
 
 /**
  * React context for the client side hydration [time stamp]{@link HighResTimeStamp}.
@@ -26,7 +26,7 @@ const { createContext } = require('react');
  * const HydrationTimeStampContext = require('graphql-react/public/HydrationTimeStampContext.js');
  * ```
  */
-const HydrationTimeStampContext = createContext();
+const HydrationTimeStampContext = React.createContext();
 
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
   HydrationTimeStampContext.displayName = 'HydrationTimeStampContext';

public/LoadingContext.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { createContext } = require('react');
+const React = require('react');
 
 /**
  * React context for a [`Loading`]{@link Loading} instance.
@@ -26,7 +26,7 @@ const { createContext } = require('react');
  * const LoadingContext = require('graphql-react/public/LoadingContext.js');
  * ```
  */
-const LoadingContext = createContext();
+const LoadingContext = React.createContext();
 
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
   LoadingContext.displayName = 'LoadingContext';

public/Provider.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useRef } = require('react');
+const React = require('react');
 const { jsx } = require('react/jsx-runtime');
 const Cache = require('./Cache');
 const CacheContext = require('./CacheContext');
@@ -48,11 +48,11 @@ const LoadingContext = require('./LoadingContext');
  * ```
  */
 module.exports = function Provider({ cache, children }) {
-  const hydrationTimeStampRef = useRef();
+  const hydrationTimeStampRef = React.useRef();
   if (!hydrationTimeStampRef.current)
     hydrationTimeStampRef.current = performance.now();
 
-  const loadingRef = useRef();
+  const loadingRef = React.useRef();
   if (!loadingRef.current) loadingRef.current = new Loading();
 
   if (!(cache instanceof Cache))

public/useAutoAbortLoad.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useEffect, useRef } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 
 /**
@@ -37,9 +37,9 @@ module.exports = function useAutoAbortLoad(load) {
         : createArgErrorMessageProd(1)
     );
 
-  const lastLoadingCacheValueRef = useRef();
+  const lastLoadingCacheValueRef = React.useRef();
 
-  useEffect(
+  React.useEffect(
     () => () => {
       if (lastLoadingCacheValueRef.current)
         // Abort the last loading as it’s now redundant due to the changed
@@ -50,7 +50,7 @@ module.exports = function useAutoAbortLoad(load) {
     [load]
   );
 
-  return useCallback(() => {
+  return React.useCallback(() => {
     if (lastLoadingCacheValueRef.current)
       // Ensure the last loading is aborted before starting new loading.
       // Checking if it’s already ended or aborted first is unnecessary.

public/useCache.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useContext, useDebugValue } = require('react');
+const React = require('react');
 const Cache = require('./Cache');
 const CacheContext = require('./CacheContext');
 
@@ -27,11 +27,11 @@ const CacheContext = require('./CacheContext');
  * ```
  */
 module.exports = function useCache() {
-  const cache = useContext(CacheContext);
+  const cache = React.useContext(CacheContext);
 
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDebugValue(cache);
+    React.useDebugValue(cache);
 
   if (cache === undefined) throw new TypeError('Cache context missing.');
 

public/useCacheEntry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useDebugValue, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useForceUpdate = require('../private/useForceUpdate');
 const useCache = require('./useCache');
@@ -40,11 +40,11 @@ module.exports = function useCacheEntry(cacheKey) {
   const cache = useCache();
   const forceUpdate = useForceUpdate();
 
-  const onTriggerUpdate = useCallback(() => {
+  const onTriggerUpdate = React.useCallback(() => {
     forceUpdate();
   }, [forceUpdate]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNameSet = `${cacheKey}/set`;
     const eventNameDelete = `${cacheKey}/delete`;
 
@@ -61,7 +61,7 @@ module.exports = function useCacheEntry(cacheKey) {
 
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDebugValue(value);
+    React.useDebugValue(value);
 
   return value;
 };

public/useCacheEntryPrunePrevention.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useCache = require('./useCache');
 
@@ -38,11 +38,11 @@ module.exports = function useCacheEntryPrunePrevention(cacheKey) {
 
   const cache = useCache();
 
-  const onCacheEntryPrune = useCallback((event) => {
+  const onCacheEntryPrune = React.useCallback((event) => {
     event.preventDefault();
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNamePrune = `${cacheKey}/prune`;
 
     cache.addEventListener(eventNamePrune, onCacheEntryPrune);

public/useLoadGraphQL.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const isObject = require('isobject/index.cjs.js');
-const { useCallback } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const LoadingCacheValue = require('./LoadingCacheValue');
 const fetchGraphQL = require('./fetchGraphQL');
@@ -34,7 +34,7 @@ module.exports = function useLoadGraphQL() {
   const cache = useCache();
   const loading = useLoading();
 
-  return useCallback(
+  return React.useCallback(
     (cacheKey, fetchUri, fetchOptions) => {
       if (typeof cacheKey !== 'string')
         throw new TypeError(

public/useLoadOnDelete.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useCache = require('./useCache');
 
@@ -46,11 +46,11 @@ module.exports = function useLoadOnDelete(cacheKey, load) {
 
   const cache = useCache();
 
-  const onCacheEntryDelete = useCallback(() => {
+  const onCacheEntryDelete = React.useCallback(() => {
     load();
   }, [load]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNameDelete = `${cacheKey}/delete`;
 
     cache.addEventListener(eventNameDelete, onCacheEntryDelete);

public/useLoadOnMount.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useContext, useEffect, useRef } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const HYDRATION_TIME_MS = require('./HYDRATION_TIME_MS');
 const HydrationTimeStampContext = require('./HydrationTimeStampContext');
@@ -50,7 +50,7 @@ module.exports = function useLoadOnMount(cacheKey, load) {
     );
 
   const cache = useCache();
-  const hydrationTimeStamp = useContext(HydrationTimeStampContext);
+  const hydrationTimeStamp = React.useContext(HydrationTimeStampContext);
 
   if (
     // Allowed to be undefined for apps that don’t provide this context.
@@ -59,9 +59,9 @@ module.exports = function useLoadOnMount(cacheKey, load) {
   )
     throw new TypeError('Hydration time stamp context value must be a number.');
 
-  const startedRef = useRef();
+  const startedRef = React.useRef();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (
       // Loading the same as currently specified wasn’t already started.
       !(

public/useLoadOnStale.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useCache = require('./useCache');
 
@@ -46,11 +46,11 @@ module.exports = function useLoadOnStale(cacheKey, load) {
 
   const cache = useCache();
 
-  const onCacheEntryStale = useCallback(() => {
+  const onCacheEntryStale = React.useCallback(() => {
     load();
   }, [load]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNameStale = `${cacheKey}/stale`;
 
     cache.addEventListener(eventNameStale, onCacheEntryStale);

public/useLoading.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useContext, useDebugValue } = require('react');
+const React = require('react');
 const Loading = require('./Loading');
 const LoadingContext = require('./LoadingContext');
 
@@ -27,11 +27,11 @@ const LoadingContext = require('./LoadingContext');
  * ```
  */
 module.exports = function useLoading() {
-  const loading = useContext(LoadingContext);
+  const loading = React.useContext(LoadingContext);
 
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDebugValue(loading);
+    React.useDebugValue(loading);
 
   if (loading === undefined) throw new TypeError('Loading context missing.');
 

public/useLoadingEntry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useCallback, useDebugValue, useEffect } = require('react');
+const React = require('react');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const useForceUpdate = require('../private/useForceUpdate');
 const useLoading = require('./useLoading');
@@ -40,11 +40,11 @@ module.exports = function useLoadingEntry(cacheKey) {
   const loading = useLoading();
   const forceUpdate = useForceUpdate();
 
-  const onTriggerUpdate = useCallback(() => {
+  const onTriggerUpdate = React.useCallback(() => {
     forceUpdate();
   }, [forceUpdate]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const eventNameStart = `${cacheKey}/start`;
     const eventNameEnd = `${cacheKey}/end`;
 
@@ -61,7 +61,7 @@ module.exports = function useLoadingEntry(cacheKey) {
 
   if (typeof process === 'object' && process.env.NODE_ENV !== 'production')
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDebugValue(value);
+    React.useDebugValue(value);
 
   return value;
 };

public/useWaterfallLoad.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { useContext } = require('react');
+const React = require('react');
 const WaterfallRenderContext = require('react-waterfall-render/public/WaterfallRenderContext.js');
 const createArgErrorMessageProd = require('../private/createArgErrorMessageProd');
 const LoadingCacheValue = require('./LoadingCacheValue');
@@ -52,7 +52,7 @@ module.exports = function useWaterfallLoad(cacheKey, load) {
     );
 
   const cache = useCache();
-  const declareLoading = useContext(WaterfallRenderContext);
+  const declareLoading = React.useContext(WaterfallRenderContext);
 
   if (declareLoading && !(cacheKey in cache.store)) {
     // Todo: First, check if already loading?