Merge branch 'master' into clear-cache

Author: shuding

package.json

@@ -1,10 +1,11 @@
 {
   "name": "swr",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-beta.9",
   "description": "React Hooks library for remote data fetching",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
       "import": "./dist/index.esm.js",
       "require": "./dist/index.js",

src/use-swr.ts

@@ -49,12 +49,12 @@ const broadcastState: Broadcaster = (
   return Promise.all(promises).then(() => cache.get(key))
 }
 
-async function internalMutate<Data = any>(
+const internalMutate = async <Data>(
   cache: Cache,
   _key: Key,
   _data?: Data | Promise<Data | undefined> | MutatorCallback<Data>,
   shouldRevalidate = true
-): Promise<Data | undefined> {
+) => {
   const [key, , keyErr] = serialize(_key)
   if (!key) return UNDEFINED
 
@@ -91,26 +91,27 @@ async function internalMutate<Data = any>(
     }
   }
 
+  // `_data` is a promise/thenable, resolve the final data first.
   if (_data && typeof (_data as Promise<Data>).then === 'function') {
-    // `_data` is a promise/thenable, resolve the final data.
+    // This means that the mutation is async, we need to check timestamps to
+    // avoid race conditions.
     try {
       data = await _data
     } catch (err) {
       error = err
     }
+
+    // Check if other mutations have occurred since we've started this mutation.
+    // If there's a race we don't update cache or broadcast the change,
+    // just return the data.
+    if (beforeMutationTs !== MUTATION_TS[key]) {
+      if (error) throw error
+      return data
+    }
   } else {
     data = _data
   }
 
-  // Check if other mutations have occurred since we've started this mutation.
-  const shouldAbort = beforeMutationTs !== MUTATION_TS[key]
-
-  // If there's a race we don't update cache or broadcast change, just return the data.
-  if (shouldAbort) {
-    if (error) throw error
-    return data
-  }
-
   if (!isUndefined(data)) {
     // update cached data
     cache.set(key, data)
@@ -161,11 +162,11 @@ const addRevalidator = (
   }
 }
 
-export function useSWRHandler<Data = any, Error = any>(
+export const useSWRHandler = <Data = any, Error = any>(
   _key: Key,
   fn: Fetcher<Data> | null,
   config: typeof defaultConfig & SWRConfiguration<Data, Error>
-): SWRResponse<Data, Error> {
+) => {
   const {
     cache,
     compare,
@@ -457,45 +458,20 @@ export function useSWRHandler<Data = any, Error = any>(
     const keyChanged = initialMountedRef.current
     const softRevalidate = () => revalidate({ dedupe: true })
 
-    // Mark the component as mounted and update corresponding refs.
-    unmountedRef.current = false
-    keyRef.current = key
-
-    // When `key` updates, reset the state to the initial value
-    // and trigger a rerender if necessary.
-    if (keyChanged) {
-      setState({
-        data,
-        error,
-        isValidating
-      })
-    }
-
-    // Trigger a revalidation.
-    if (keyChanged || shouldRevalidateOnMount()) {
-      if (isUndefined(data) || IS_SERVER) {
-        // Revalidate immediately.
-        softRevalidate()
-      } else {
-        // Delay the revalidate if we have data to return so we won't block
-        // rendering.
-        rAF(softRevalidate)
-      }
-    }
-
     const isActive = () =>
       configRef.current.isVisible() && configRef.current.isOnline()
 
     // Add event listeners.
-    let pending = false
+    let nextFocusRevalidatedAt = 0
     const onFocus = () => {
-      if (configRef.current.revalidateOnFocus && !pending && isActive()) {
-        pending = true
+      const now = Date.now()
+      if (
+        configRef.current.revalidateOnFocus &&
+        now > nextFocusRevalidatedAt &&
+        isActive()
+      ) {
+        nextFocusRevalidatedAt = now + configRef.current.focusThrottleInterval
         softRevalidate()
-        setTimeout(
-          () => (pending = false),
-          configRef.current.focusThrottleInterval
-        )
       }
     }
 
@@ -534,6 +510,32 @@ export function useSWRHandler<Data = any, Error = any>(
     const unsubReconn = addRevalidator(RECONNECT_REVALIDATORS, key, onReconnect)
     const unsubUpdate = addRevalidator(CACHE_REVALIDATORS, key, onUpdate)
 
+    // Mark the component as mounted and update corresponding refs.
+    unmountedRef.current = false
+    keyRef.current = key
+
+    // When `key` updates, reset the state to the initial value
+    // and trigger a rerender if necessary.
+    if (keyChanged) {
+      setState({
+        data,
+        error,
+        isValidating
+      })
+    }
+
+    // Trigger a revalidation.
+    if (keyChanged || shouldRevalidateOnMount()) {
+      if (isUndefined(data) || IS_SERVER) {
+        // Revalidate immediately.
+        softRevalidate()
+      } else {
+        // Delay the revalidate if we have data to return so we won't block
+        // rendering.
+        rAF(softRevalidate)
+      }
+    }
+
     // Finally, the component is mounted.
     initialMountedRef.current = true
 
@@ -549,36 +551,38 @@ export function useSWRHandler<Data = any, Error = any>(
 
   // Polling
   useIsomorphicLayoutEffect(() => {
-    let timer: any = 0
-
-    function nextTick() {
-      if (refreshInterval) {
-        timer = setTimeout(tick, refreshInterval)
+    let timer: any
+
+    function next() {
+      // We only start next interval if `refreshInterval` is not 0, and:
+      // - `force` is true, which is the start of polling
+      // - or `timer` is not 0, which means the effect wasn't canceled
+      if (refreshInterval && timer !== -1) {
+        timer = setTimeout(execute, refreshInterval)
       }
     }
 
-    async function tick() {
+    function execute() {
+      // Check if it's OK to execute:
+      // Only revalidate when the page is visible, online and not errored.
       if (
         !stateRef.current.error &&
         (refreshWhenHidden || config.isVisible()) &&
         (refreshWhenOffline || config.isOnline())
       ) {
-        // only revalidate when the page is visible
-        // if API request errored, we stop polling in this round
-        // and let the error retry function handle it
-        await revalidate({ dedupe: true })
+        revalidate({ dedupe: true }).then(() => next())
+      } else {
+        // Schedule next interval to check again.
+        next()
       }
-
-      // Read the latest refreshInterval
-      if (timer) nextTick()
     }
 
-    nextTick()
+    next()
 
     return () => {
       if (timer) {
         clearTimeout(timer)
-        timer = 0
+        timer = -1
       }
     }
   }, [refreshInterval, refreshWhenHidden, refreshWhenOffline, revalidate])
@@ -640,13 +644,10 @@ export const mutate = internalMutate.bind(
   defaultConfig.cache
 ) as ScopedMutator
 
-export function createCache<Data>(
+export const createCache = <Data = any>(
   provider: Cache,
   options?: Partial<ProviderOptions>
-): {
-  cache: Cache
-  mutate: ScopedMutator<Data>
-} {
+) => {
   const cache = wrapCache<Data>(provider, options)
   return {
     cache,

src/utils/cache.ts

@@ -36,7 +36,7 @@ function setupGlobalEvents(cache: Cache, options: ProviderOptions) {
 export function wrapCache<Data = any>(
   provider: Cache<Data>,
   options?: Partial<ProviderOptions>
-): Cache {
+): Cache<Data> {
   // Initialize global state for the specific data storage that will be used to
   // deduplicate requests and store listeners.
   SWRGlobalState.set(provider, [{}, {}, {}, {}, {}, {}, {}])

src/utils/config.ts

@@ -4,9 +4,7 @@ import { wrapCache } from './cache'
 import { preset } from './web-preset'
 import { slowConnection } from './env'
 import { Configuration, RevalidatorOptions, Revalidator } from '../types'
-import { UNDEFINED } from './helper'
-
-const noop = () => {}
+import { UNDEFINED, noop } from './helper'
 
 // error retry
 function onErrorRetry(

src/utils/helper.ts

@@ -1,3 +1,4 @@
 // `undefined` can possibly be replaced by something else.
 export const UNDEFINED: undefined = ({} as any)[0]
 export const isUndefined = (v: any) => v === UNDEFINED
+export const noop = () => {}

src/utils/normalize-args.ts

@@ -9,5 +9,5 @@ export function normalize<KeyType = Key, Data = any>(
 ): [KeyType, Fetcher<Data> | null, Partial<SWRConfiguration<Data>>] {
   return typeof args[1] === 'function'
     ? [args[0], args[1], args[2] || {}]
-    : [args[0], null, (typeof args[1] === 'object' ? args[1] : args[2]) || {}]
+    : [args[0], null, (args[1] === null ? args[2] : args[1]) || {}]
 }

src/utils/state.ts

@@ -48,9 +48,7 @@ export default function useStateWithDeps<Data, Error, S = State<Data, Error>>(
       let shouldRerender = false
 
       const currentState = stateRef.current
-      for (const _ of Object.keys(payload)) {
-        // Type casting to work around the `for...in` loop
-        // https://github.com/Microsoft/TypeScript/issues/3500
+      for (const _ in payload) {
         const k = _ as keyof S & StateKeys
 
         // If the property has changed, update the state and mark rerender as

src/utils/web-preset.ts

@@ -1,5 +1,5 @@
 import { ProviderOptions } from '../types'
-import { isUndefined } from './helper'
+import { isUndefined, noop } from './helper'
 
 /**
  * Due to bug https://bugs.chromium.org/p/chromium/issues/detail?id=678075,
@@ -12,12 +12,12 @@ let online = true
 const isOnline = () => online
 const hasWindow = typeof window !== 'undefined'
 const hasDocument = typeof document !== 'undefined'
-const add = 'addEventListener'
-function noop() {}
+const ADD_EVENT_LISTENER = 'addEventListener'
 
 // For node and React Native, `add/removeEventListener` doesn't exist on window.
-const onWindowEvent = hasWindow && window[add] ? window[add] : noop
-const onDocumentEvent = hasDocument ? document[add] : noop
+const onWindowEvent =
+  hasWindow && window[ADD_EVENT_LISTENER] ? window[ADD_EVENT_LISTENER] : noop
+const onDocumentEvent = hasDocument ? document[ADD_EVENT_LISTENER] : noop
 
 const isVisible = () => {
   const visibilityState = hasDocument && document.visibilityState

test/unit.test.tsx

@@ -0,0 +1,26 @@
+import { normalize } from '../src/utils/normalize-args'
+
+describe('Unit tests', () => {
+  it('should normalize arguments correctly', async () => {
+    const fetcher = () => {}
+    const opts = { revalidateOnFocus: false }
+
+    // Only the `key` argument is passed
+    expect(normalize(['key'])).toEqual(['key', null, {}])
+
+    // `key` and `null` as fetcher (no fetcher)
+    expect(normalize(['key', null])).toEqual(['key', null, {}])
+
+    // `key` and `fetcher`
+    expect(normalize(['key', fetcher])).toEqual(['key', fetcher, {}])
+
+    // `key` and `options`
+    expect(normalize(['key', opts])).toEqual(['key', null, opts])
+
+    // `key`, `null` as fetcher, and `options`
+    expect(normalize(['key', null, opts])).toEqual(['key', null, opts])
+
+    // `key`, `fetcher`, and `options`
+    expect(normalize(['key', fetcher, opts])).toEqual(['key', fetcher, opts])
+  })
+})