feat(config) add default fetcher, webPresets (#120)

* chore(eslint) add eol rules
* feat(config) add default fetcher, webPresets
* test(compat) fix version pinning for compat-all

Author: Darren Jennings

.eslintrc.js

@@ -11,7 +11,10 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'promise/param-names': 'off'
+    'promise/param-names': 'off',
+    'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 1 }],
+    'no-trailing-spaces': 'error',
+    'eol-last': 'error'
   },
   parserOptions: {
     parser: '@typescript-eslint/parser'

jest.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+  setupFiles: ['<rootDir>/tests/setupJest.ts'],
   testMatch: [
     '<rootDir>/tests/**/*.spec.[jt]s?(x)'
   ]

src/lib/is-document-visible.ts

@@ -0,0 +1,27 @@
+function isOnline (): boolean {
+  if (typeof navigator.onLine !== 'undefined') {
+    return navigator.onLine
+  }
+  // always assume it's online
+  return true
+}
+
+function isDocumentVisible (): boolean {
+  if (
+    typeof document !== 'undefined' &&
+    typeof document.visibilityState !== 'undefined'
+  ) {
+    return document.visibilityState !== 'hidden'
+  }
+  // always assume it's visible
+  return true
+}
+
+const fetcher = url => fetch(url).then(res => res.json())
+
+export default {
+  isOnline,
+  isDocumentVisible,
+  fetcher
+}
+

src/lib/is-online.ts

@@ -3,7 +3,10 @@ import SWRVCache from './lib/cache'
 
 export type fetcherFn<Data> = (...args: any) => Data | Promise<Data>
 
-export interface IConfig {
+export interface IConfig<
+  Data = any,
+  Fn extends fetcherFn<Data> = fetcherFn<Data>
+> {
   refreshInterval?: number
   cache?: SWRVCache
   dedupingInterval?: number
@@ -14,6 +17,9 @@ export interface IConfig {
   shouldRetryOnError?: boolean
   errorRetryInterval?: number
   errorRetryCount?: number
+  fetcher?: Fn,
+  isOnline?: () => boolean
+  isDocumentVisible?: () => boolean
 }
 
 export interface IResponse<Data = any, Error = any> {

src/lib/web-preset.ts

@@ -29,8 +29,7 @@ import {
   onUnmounted,
   getCurrentInstance
 } from 'vue'
-import isDocumentVisible from './lib/is-document-visible'
-import isOnline from './lib/is-online'
+import webPreset from './lib/web-preset'
 import SWRVCache from './lib/cache'
 import { IConfig, IKey, IResponse, fetcherFn, revalidateOptions } from './types'
 
@@ -48,7 +47,10 @@ const defaultConfig: IConfig = {
   revalidateDebounce: 0,
   shouldRetryOnError: true,
   errorRetryInterval: 5000,
-  errorRetryCount: 5
+  errorRetryCount: 5,
+  fetcher: webPreset.fetcher,
+  isOnline: webPreset.isOnline,
+  isDocumentVisible: webPreset.isDocumentVisible
 }
 
 /**
@@ -66,7 +68,7 @@ function setRefCache (key: string, theRef: StateRef<any, any>, ttl: number) {
 }
 
 function onErrorRetry (revalidate: (any, opts: revalidateOptions) => void, errorRetryCount: number, config: IConfig): void {
-  if (!isDocumentVisible()) {
+  if (!config.isDocumentVisible()) {
     return
   }
 
@@ -153,7 +155,8 @@ function useSWRV<Data = any, Error = any> (...args): IResponse<Data, Error> {
   let unmounted = false
   let isHydrated = false
 
-  const vm = getCurrentInstance() as any
+  const instance = getCurrentInstance() as any
+  const vm = instance
   const IS_SERVER = vm.$isServer
 
   // #region ssr
@@ -183,6 +186,11 @@ function useSWRV<Data = any, Error = any> (...args): IResponse<Data, Error> {
   const ttl = IS_SERVER ? config.serverTTL : config.ttl
   const keyRef = typeof key === 'function' ? (key as any) : ref(key)
 
+  if (typeof fn === 'undefined') {
+    // use the global fetcher
+    fn = config.fetcher
+  }
+
   let stateRef = null as StateRef<Data, Error>
 
   // #region ssr
@@ -230,7 +238,7 @@ function useSWRV<Data = any, Error = any> (...args): IResponse<Data, Error> {
     }
 
     const fetcher = data || fn
-    if (!fetcher || !isDocumentVisible() || (opts?.forceRevalidate !== undefined && !opts?.forceRevalidate)) {
+    if (!fetcher || !config.isDocumentVisible() || (opts?.forceRevalidate !== undefined && !opts?.forceRevalidate)) {
       stateRef.isValidating = false
       return
     }
@@ -289,7 +297,7 @@ function useSWRV<Data = any, Error = any> (...args): IResponse<Data, Error> {
       // if this is the case, but continue to revalidate since promises can't
       // be cancelled and new hook instances might rely on promise/data cache or
       // from pre-fetch
-      if (!stateRef.error && isOnline()) {
+      if (!stateRef.error && config.isOnline()) {
         // if API request errored, we stop polling in this round
         // and let the error retry function handle it
         await revalidate()

src/types.ts

@@ -0,0 +1 @@
+import 'whatwg-fetch'

src/use-swrv.ts

@@ -612,6 +612,23 @@ describe('useSWRV', () => {
 
     done()
   })
+
+  it('should use fetch api as default fetcher', async () => {
+    const users = [{ name: 'bob' }, { name: 'sue' }]
+    const mockFetch = body => Promise.resolve({ json: () => Promise.resolve(body) } as any)
+    jest.spyOn(window, 'fetch').mockImplementation(() => mockFetch(users))
+
+    const vm = new Vue({
+      template: `<div v-if="data">hello, {{ data.map(u => u.name).join(' and ') }}</div>`,
+      setup  () {
+        return useSWRV('http://localhost:3000/api/users')
+      }
+    }).$mount()
+
+    await tick(vm, 4)
+
+    expect(vm.$el.textContent).toBe('hello, bob and sue')
+  })
 })
 
 describe('useSWRV - loading', () => {

tests/setupJest.ts

@@ -10984,6 +10984,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
+whatwg-fetch@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
+  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
+
 whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"