Restore Node.js (SSR) compatibility.

Author: ghengeveld

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

@@ -3,14 +3,18 @@ import { actionTypes, reducer } 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 state = {
-  intercept: window.sessionStorage.getItem("intercept") === "true",
-  latency: window.sessionStorage.getItem("latency") || "0",
+  intercept: root.sessionStorage.getItem("intercept") === "true",
+  latency: root.sessionStorage.getItem("latency") || "0",
   update: () => {},
 }
 
-window.__REACT_ASYNC__ = window.__REACT_ASYNC__ || {}
-window.__REACT_ASYNC__.devToolsDispatcher = (action, dispatch) => {
+root.__REACT_ASYNC__ = root.__REACT_ASYNC__ || {}
+root.__REACT_ASYNC__.devToolsDispatcher = (action, dispatch) => {
   const run = () => {
     dispatch(action)
     state.update(action)
@@ -46,13 +50,13 @@ const DevTools = () => {
     }))
   }
   const updateLatency = event => {
-    window.sessionStorage.setItem("latency", event.target.value)
+    root.sessionStorage.setItem("latency", event.target.value)
     delay.current = event.target.value * 1000
     state.latency = event.target.value
     setLatency(event.target.value)
   }
   const updateIntercept = event => {
-    window.sessionStorage.setItem("intercept", event.target.checked ? "true" : "false")
+    root.sessionStorage.setItem("intercept", event.target.checked ? "true" : "false")
     state.intercept = event.target.checked
     intercept.current = event.target.checked
     setIntercept(event.target.checked)

packages/react-async/src/Async.js

@@ -3,6 +3,10 @@ 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.
@@ -44,7 +48,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       }
       this.debugLabel = props.debugLabel || defaultProps.debugLabel
 
-      const { devToolsDispatcher } = window.__REACT_ASYNC__ || {}
+      const { devToolsDispatcher } = root.__REACT_ASYNC__ || {}
       const _reducer = props.reducer || defaultProps.reducer
       const _dispatcher = props.dispatcher || defaultProps.dispatcher || devToolsDispatcher
       const reducer = _reducer
@@ -100,9 +104,9 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     start(promiseFn) {
-      if ("AbortController" in window) {
+      if ("AbortController" in root) {
         this.abortController.abort()
-        this.abortController = new window.AbortController()
+        this.abortController = new root.AbortController()
       }
       this.counter++
       return new Promise((resolve, reject) => {

packages/react-async/src/useAsync.js

@@ -2,6 +2,9 @@ import { useCallback, useDebugValue, useEffect, useMemo, useRef, useReducer } fr
 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
@@ -12,7 +15,7 @@ const useAsync = (arg1, arg2) => {
   const prevOptions = useRef(undefined)
   const abortController = useRef({ abort: noop })
 
-  const { devToolsDispatcher } = window.__REACT_ASYNC__ || {}
+  const { devToolsDispatcher } = root.__REACT_ASYNC__ || {}
   const { reducer, dispatcher = devToolsDispatcher } = options
   const [state, _dispatch] = useReducer(
     reducer ? (state, action) => reducer(state, action, asyncReducer) : asyncReducer,
@@ -48,9 +51,9 @@ const useAsync = (arg1, arg2) => {
     count === counter.current && setError(error, () => onReject && onReject(error))
 
   const start = promiseFn => {
-    if ("AbortController" in window) {
+    if ("AbortController" in root) {
       abortController.current.abort()
-      abortController.current = new window.AbortController()
+      abortController.current = new root.AbortController()
     }
     counter.current++
     return new Promise((resolve, reject) => {
@@ -133,7 +136,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) => window.fetch(input, init).then(parseResponse(accept, json))
+  const doFetch = (input, init) => root.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({