Refine createCache

src/types.ts

@@ -49,8 +49,8 @@ export interface Configuration<
 
   isOnline: () => boolean
   isDocumentVisible: () => boolean
-  registerOnFocus: (cb: () => void) => void
-  registerOnReconnect: (cb: () => void) => void
+  setupOnFocus: (cb: () => void) => () => void
+  setupOnReconnect: (cb: () => void) => () => void
 
   /**
    * @deprecated `revalidateOnMount` will be removed. Please considering using the `revalidateWhenStale` option.

src/use-swr.ts

@@ -45,22 +45,31 @@ const getGlobalState = (cache: Cache) => {
   ]
 }
 
-// Setup DOM events listeners for `focus` and `reconnect` actions
-if (!IS_SERVER) {
+function setupGlobalEvents(config: Configuration) {
   const [FOCUS_REVALIDATORS, RECONNECT_REVALIDATORS] = getGlobalState(
-    defaultConfig.cache
+    config.cache
   )
   const revalidate = (revalidators: Record<string, Revalidator[]>) => {
-    if (!defaultConfig.isDocumentVisible() || !defaultConfig.isOnline()) return
+    if (!config.isDocumentVisible() || !config.isOnline()) return
 
     for (const key in revalidators) {
       if (revalidators[key][0]) revalidators[key][0]()
     }
   }
-  defaultConfig.registerOnFocus(() => revalidate(FOCUS_REVALIDATORS))
-  defaultConfig.registerOnReconnect(() => revalidate(RECONNECT_REVALIDATORS))
+  const onFocus = () => revalidate(FOCUS_REVALIDATORS)
+  const onReconnect = () => revalidate(RECONNECT_REVALIDATORS)
+  const teardownOnFoucs = config.setupOnFocus(onFocus)
+  const teardownOnReconnect = config.setupOnReconnect(onReconnect)
+
+  return () => {
+    teardownOnFoucs()
+    teardownOnReconnect()
+  }
 }
 
+// Setup DOM events listeners for `focus` and `reconnect` actions
+if (!IS_SERVER) setupGlobalEvents(defaultConfig)
+
 const broadcastState: Broadcaster = (
   cache: Cache,
   key,
@@ -488,6 +497,10 @@ export function useSWRHandler<Data = any, Error = any>(
     configRef.current = config
   })
 
+  useIsomorphicLayoutEffect(() => {
+    return setupGlobalEvents(configRef.current)
+  }, [configRef.current.cache])
+
   // After mounted or key changed.
   useIsomorphicLayoutEffect(() => {
     if (!key) return UNDEFINED

src/utils/web-preset.ts

@@ -9,52 +9,63 @@ import { isUndefined } from './helper'
  */
 let online = true
 const isOnline = () => online
+const createNoop = (ret?: any) => () => ret
+const add = 'addEventListener'
+const remove = 'removeEventListener'
 
-// For node and React Native, `window.addEventListener` doesn't exist.
-const addWindowEventListener =
-  typeof window !== 'undefined' && !isUndefined(window.addEventListener)
-    ? window.addEventListener.bind(window)
-    : null
-const addDocumentEventListener =
-  typeof document !== 'undefined'
-    ? document.addEventListener.bind(document)
-    : null
+type EventAction = 'addEventListener' | 'removeEventListener'
+
+const hasWindow = typeof window !== 'undefined'
+const hasDocument = typeof document !== 'undefined'
+
+// For node and React Native, `add/removeEventListener` doesn't exist on window.
+const windowEventListener = (action: EventAction) =>
+  hasWindow && !isUndefined(window[action])
+    ? window[action].bind(window)
+    : createNoop()
+const documentEventListener = (action: EventAction) =>
+  hasDocument ? document[action].bind(document) : createNoop()
 
 const isDocumentVisible = () => {
-  if (addDocumentEventListener) {
-    const visibilityState = document.visibilityState
-    if (!isUndefined(visibilityState)) {
-      return visibilityState !== 'hidden'
-    }
+  const visibilityState = hasDocument && document.visibilityState
+  if (!isUndefined(visibilityState)) {
+    return visibilityState !== 'hidden'
   }
-  // always assume it's visible
   return true
 }
 
-const registerOnFocus = (cb: () => void) => {
-  if (addWindowEventListener && addDocumentEventListener) {
-    // focus revalidate
-    addDocumentEventListener('visibilitychange', cb)
-    addWindowEventListener('focus', cb)
+const setupOnFocus = (cb: () => void) => {
+  // focus revalidate
+  documentEventListener(add)('visibilitychange', cb)
+  windowEventListener(add)('focus', cb)
+  return () => {
+    documentEventListener(remove)('visibilitychange', cb)
+    windowEventListener(remove)('focus', cb)
   }
 }
 
-const registerOnReconnect = (cb: () => void) => {
-  if (addWindowEventListener) {
-    // reconnect revalidate
-    addWindowEventListener('online', () => {
-      online = true
-      cb()
-    })
+const setupOnReconnect = (cb: () => void) => {
+  const onOnline = () => {
+    online = true
+    cb()
+  }
+  const onOffline = () => {
+    online = false
+  }
+  // reconnect revalidate
+  windowEventListener(add)('online', onOnline)
+  // nothing to revalidate, just update the status
+  windowEventListener(add)('offline', onOffline)
 
-    // nothing to revalidate, just update the status
-    addWindowEventListener('offline', () => (online = false))
+  return () => {
+    windowEventListener(remove)('online', onOnline)
+    windowEventListener(remove)('offline', onOffline)
   }
 }
 
 export default {
   isOnline,
   isDocumentVisible,
-  registerOnFocus,
-  registerOnReconnect
+  setupOnFocus,
+  setupOnReconnect
 } as const

test/use-swr-focus.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import React, { useState } from 'react'
-import useSWR from 'swr'
+import useSWR, { createCache } from 'swr'
 import { sleep } from './utils'
 
 const waitForNextTick = () => act(() => sleep(1))
@@ -200,4 +200,26 @@ describe('useSWR - focus', () => {
     await focusWindow()
     await screen.findByText('data: 5')
   })
+
+  it('should revalidate on focus even with custom cache', async () => {
+    let value = 0
+    const { cache } = createCache(new Map())
+
+    function Page() {
+      const { data } = useSWR('revalidateOnFocus + cache', () => value++, {
+        cache,
+        revalidateOnFocus: true,
+        dedupingInterval: 0
+      })
+      return <div>data: {data}</div>
+    }
+
+    // reuse default test case
+    render(<Page />)
+    screen.getByText('data:')
+    await screen.findByText('data: 0')
+    await waitForNextTick()
+    await focusWindow()
+    await screen.findByText('data: 1')
+  })
 })