Centralize global scope object and make it compatible with React Native.

Author: ghengeveld

packages/react-async-devtools/src/index.js

@@ -1,23 +1,17 @@
 import React from "react"
-import { actionTypes, reducer } from "react-async"
+import { actionTypes, reducer, globalScope } from "react-async"
 
 import { Root, Range, Checkbox, Label, Small, Ol, Li, Button } from "./components"
 
-const root =
-  (typeof self === "object" && self.self === self && self) ||
-  (typeof global === "object" && global.global === global && global) ||
-  {}
-
-const storage = root.sessionStorage
+const storage = globalScope.sessionStorage
 
 const state = {
   intercept: (storage && storage.getItem("intercept") === "true") || false,
   latency: (storage && storage.getItem("latency")) || "0",
   update: () => {},
 }
 
-root.__REACT_ASYNC__ = root.__REACT_ASYNC__ || {}
-root.__REACT_ASYNC__.devToolsDispatcher = (action, dispatch) => {
+globalScope.__REACT_ASYNC__.devToolsDispatcher = (action, dispatch) => {
   const run = () => {
     dispatch(action)
     state.update(action)

packages/react-async/src/Async.js

@@ -1,12 +1,10 @@
 import React from "react"
+
+import globalScope from "./globalScope"
 import { Initial, Pending, Fulfilled, Rejected, Settled } from "./helpers"
 import propTypes from "./propTypes"
 import { actionTypes, init, dispatchMiddleware, reducer as asyncReducer } from "./reducer"
 
-const root =
-  (typeof self === "object" && self.self === self && self) ||
-  (typeof global === "object" && global.global === global && global)
-
 /**
  * createInstance allows you to create instances of Async that are bound to a specific promise.
  * A unique instance also uses its own React context for better nesting capability.
@@ -48,7 +46,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       }
       this.debugLabel = props.debugLabel || defaultProps.debugLabel
 
-      const { devToolsDispatcher } = root.__REACT_ASYNC__ || {}
+      const { devToolsDispatcher } = globalScope.__REACT_ASYNC__
       const _reducer = props.reducer || defaultProps.reducer
       const _dispatcher = props.dispatcher || defaultProps.dispatcher || devToolsDispatcher
       const reducer = _reducer
@@ -104,9 +102,9 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     start(promiseFn) {
-      if ("AbortController" in root) {
+      if ("AbortController" in globalScope) {
         this.abortController.abort()
-        this.abortController = new root.AbortController()
+        this.abortController = new globalScope.AbortController()
       }
       this.counter++
       return new Promise((resolve, reject) => {

packages/react-async/src/Async.spec.js

@@ -3,7 +3,7 @@
 import "jest-dom/extend-expect"
 import React from "react"
 import { render, fireEvent, cleanup, waitForElement } from "@testing-library/react"
-import Async, { createInstance } from "./index"
+import Async, { createInstance, globalScope } from "./index"
 import {
   resolveIn,
   resolveTo,
@@ -17,7 +17,7 @@ import {
 } from "./specs"
 
 const abortCtrl = { abort: jest.fn() }
-window.AbortController = jest.fn().mockImplementation(() => abortCtrl)
+globalScope.AbortController = jest.fn().mockImplementation(() => abortCtrl)
 
 beforeEach(abortCtrl.abort.mockClear)
 afterEach(cleanup)

packages/react-async/src/globalScope.js

@@ -0,0 +1,16 @@
+/**
+ * Universal global scope object. In the browser this is `self`, in Node.js and React Native it's `global`.
+ */
+const globalScope = (() => {
+  if (typeof self === "object" && self.self === self) return self
+  if (typeof global === "object" && global.global === global) return global
+  if (typeof global === "object" && global.GLOBAL === global) return global
+  return {} // fallback that relies on imported modules to be singletons
+})()
+
+/**
+ * Globally available object used to connect the DevTools to all React Async instances.
+ */
+globalScope.__REACT_ASYNC__ = globalScope.__REACT_ASYNC__ || {}
+
+export default globalScope

packages/react-async/src/index.js

@@ -3,5 +3,6 @@ export { createInstance } from "./Async"
 export { default as useAsync, useFetch } from "./useAsync"
 export default Async
 export { statusTypes } from "./status"
+export { default as globalScope } from "./globalScope"
 export * from "./helpers"
 export * from "./reducer"

packages/react-async/src/useAsync.js

@@ -1,10 +1,9 @@
 import { useCallback, useDebugValue, useEffect, useMemo, useRef, useReducer } from "react"
+
+import globalScope from "./globalScope"
 import { actionTypes, init, dispatchMiddleware, reducer as asyncReducer } from "./reducer"
 
 const noop = () => {}
-const root =
-  (typeof self === "object" && self.self === self && self) ||
-  (typeof global === "object" && global.global === global && global)
 
 const useAsync = (arg1, arg2) => {
   const options = typeof arg1 === "function" ? { ...arg2, promiseFn: arg1 } : arg1
@@ -15,7 +14,7 @@ const useAsync = (arg1, arg2) => {
   const prevOptions = useRef(undefined)
   const abortController = useRef({ abort: noop })
 
-  const { devToolsDispatcher } = root.__REACT_ASYNC__ || {}
+  const { devToolsDispatcher } = globalScope.__REACT_ASYNC__
   const { reducer, dispatcher = devToolsDispatcher } = options
   const [state, _dispatch] = useReducer(
     reducer ? (state, action) => reducer(state, action, asyncReducer) : asyncReducer,
@@ -51,9 +50,9 @@ const useAsync = (arg1, arg2) => {
     count === counter.current && setError(error, () => onReject && onReject(error))
 
   const start = promiseFn => {
-    if ("AbortController" in root) {
+    if ("AbortController" in globalScope) {
       abortController.current.abort()
-      abortController.current = new root.AbortController()
+      abortController.current = new globalScope.AbortController()
     }
     counter.current++
     return new Promise((resolve, reject) => {
@@ -136,7 +135,7 @@ const useAsyncFetch = (input, init, { defer, json, ...options } = {}) => {
   const method = input.method || (init && init.method)
   const headers = input.headers || (init && init.headers) || {}
   const accept = headers["Accept"] || headers["accept"] || (headers.get && headers.get("accept"))
-  const doFetch = (input, init) => root.fetch(input, init).then(parseResponse(accept, json))
+  const doFetch = (input, init) => globalScope.fetch(input, init).then(parseResponse(accept, json))
   const isDefer = defer === true || ~["POST", "PUT", "PATCH", "DELETE"].indexOf(method)
   const fn = defer === false || !isDefer ? "promiseFn" : "deferFn"
   const state = useAsync({

packages/react-async/src/useAsync.spec.js

@@ -3,7 +3,7 @@
 import "jest-dom/extend-expect"
 import React from "react"
 import { render, fireEvent, cleanup, waitForElement } from "@testing-library/react"
-import { useAsync, useFetch } from "./index"
+import { useAsync, useFetch, globalScope } from "./index"
 import {
   sleep,
   resolveTo,
@@ -17,13 +17,13 @@ import {
 import "../../../jest.setup"
 
 const abortCtrl = { abort: jest.fn(), signal: "SIGNAL" }
-window.AbortController = jest.fn(() => abortCtrl)
+globalScope.AbortController = jest.fn(() => abortCtrl)
 
 const json = jest.fn(() => ({}))
-window.fetch = jest.fn(() => Promise.resolve({ ok: true, json }))
+globalScope.fetch = jest.fn(() => Promise.resolve({ ok: true, json }))
 
 beforeEach(abortCtrl.abort.mockClear)
-beforeEach(window.fetch.mockClear)
+beforeEach(globalScope.fetch.mockClear)
 beforeEach(json.mockClear)
 afterEach(cleanup)
 
@@ -89,7 +89,7 @@ describe("useAsync", () => {
 describe("useFetch", () => {
   test("sets up a fetch request", () => {
     render(<Fetch input="/test" />)
-    expect(window.fetch).toHaveBeenCalledWith(
+    expect(globalScope.fetch).toHaveBeenCalledWith(
       "/test",
       expect.objectContaining({ signal: abortCtrl.signal })
     )
@@ -103,9 +103,9 @@ describe("useFetch", () => {
       </Fetch>
     )
     const { getByText } = render(component)
-    expect(window.fetch).not.toHaveBeenCalled()
+    expect(globalScope.fetch).not.toHaveBeenCalled()
     fireEvent.click(getByText("run"))
-    expect(window.fetch).toHaveBeenCalledWith(
+    expect(globalScope.fetch).toHaveBeenCalledWith(
       "/test",
       expect.objectContaining({ method: "POST", signal: abortCtrl.signal })
     )
@@ -118,9 +118,9 @@ describe("useFetch", () => {
       </Fetch>
     )
     const { getByText } = render(component)
-    expect(window.fetch).not.toHaveBeenCalled()
+    expect(globalScope.fetch).not.toHaveBeenCalled()
     fireEvent.click(getByText("run"))
-    expect(window.fetch).toHaveBeenCalledWith(
+    expect(globalScope.fetch).toHaveBeenCalledWith(
       "/test",
       expect.objectContaining({ signal: abortCtrl.signal })
     )
@@ -132,7 +132,7 @@ describe("useFetch", () => {
         {({ run }) => <button onClick={run}>run</button>}
       </Fetch>
     )
-    expect(window.fetch).toHaveBeenCalledWith(
+    expect(globalScope.fetch).toHaveBeenCalledWith(
       "/test",
       expect.objectContaining({ method: "POST", signal: abortCtrl.signal })
     )