refactor: explicitly mark package side effects

Author: boschni

.eslintrc

@@ -1,9 +1,10 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "import"],
   "extends": [
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
     "react-app",
     "prettier"
   ],
@@ -26,6 +27,7 @@
         "ignoreParameters": true
       }
     ],
-    "no-shadow": "error"
+    "no-shadow": "error",
+    "import/no-cycle": "error"
   }
 }

package.json

@@ -14,6 +14,12 @@
   "unpkg": "dist/react-query.development.js",
   "types": "types/index.d.ts",
   "module": "es/index.js",
+  "sideEffects": [
+    "es/react/setBatchUpdatesFn.js",
+    "es/react/setLogger.js",
+    "lib/react/setBatchUpdatesFn.js",
+    "lib/react/setLogger.js"
+  ],
   "scripts": {
     "test": "is-ci \"test:ci\" \"test:dev\"",
     "test:dev": "npm run test:types && npm run test:eslint && jest --watch",
@@ -22,8 +28,8 @@
     "test:types": "tsc",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "build": "yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types",
-    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/*.test.tsx ./src --out-dir lib",
-    "build:es": "rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/*.test.tsx ./src --out-dir es",
+    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir lib",
+    "build:es": "rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/tests/**/* ./src --out-dir es",
     "build:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
     "build:types": "rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
     "now-build": "yarn && cd www && yarn && yarn build",
@@ -88,7 +94,7 @@
     "eslint-config-standard": "^14.1.1",
     "eslint-config-standard-react": "^9.2.0",
     "eslint-plugin-flowtype": "5.x",
-    "eslint-plugin-import": "2.x",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "6.x",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.3",

src/core/focusHandler.ts

@@ -0,0 +1,34 @@
+import { isServer, noop } from './utils'
+
+let focusCallback: () => void = noop
+let removePreviousHandler: (() => void) | void
+
+export function setFocusHandler(callback: (handler: () => void) => void) {
+  if (removePreviousHandler) {
+    removePreviousHandler()
+  }
+  removePreviousHandler = callback(() => {
+    focusCallback()
+  })
+}
+
+export function initFocusHandler(callback: () => void) {
+  // Set the callback to execute on focus
+  focusCallback = callback
+
+  // Set a default focus handler if needed
+  if (!removePreviousHandler)
+    setFocusHandler(handleFocus => {
+      if (!isServer && window?.addEventListener) {
+        // Listen to visibillitychange and focus
+        window.addEventListener('visibilitychange', handleFocus, false)
+        window.addEventListener('focus', handleFocus, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('visibilitychange', handleFocus)
+          window.removeEventListener('focus', handleFocus)
+        }
+      }
+    })
+}

src/core/index.ts

@@ -8,8 +8,8 @@ export {
   setUpdateFn,
 } from './notifyManager'
 export { setLogger } from './logger'
-export { setFocusHandler } from './setFocusHandler'
-export { setOnlineHandler } from './setOnlineHandler'
+export { setFocusHandler } from './focusHandler'
+export { setOnlineHandler } from './onlineHandler'
 export {
   CancelledError,
   hashQueryKey,

src/core/onlineHandler.ts

@@ -0,0 +1,33 @@
+import { isServer, noop } from './utils'
+
+let onlineCallback: () => void = noop
+let removePreviousHandler: (() => void) | void
+
+export function setOnlineHandler(callback: (handler: () => void) => void) {
+  if (removePreviousHandler) {
+    removePreviousHandler()
+  }
+  removePreviousHandler = callback(() => {
+    onlineCallback()
+  })
+}
+
+export function initOnlineHandler(callback: () => void) {
+  // Set the callback to execute on online
+  onlineCallback = callback
+
+  // Set a default focus handler if needed
+  if (!removePreviousHandler) {
+    setOnlineHandler(handleOnline => {
+      if (!isServer && window?.addEventListener) {
+        // Listen to online
+        window.addEventListener('online', handleOnline, false)
+
+        return () => {
+          // Be sure to unsubscribe if a new handler is set
+          window.removeEventListener('online', handleOnline)
+        }
+      }
+    })
+  }
+}

src/core/queryClient.ts

@@ -21,11 +21,13 @@ import type {
   QueryOptions,
   RefetchOptions,
 } from './types'
-import { notifyManager } from './notifyManager'
+import type { QueryState } from './query'
+import type { QueryCache } from './queryCache'
 import { QueriesObserver } from './queriesObserver'
-import { QueryCache } from './queryCache'
 import { QueryObserver } from './queryObserver'
-import { QueryState } from './query'
+import { initFocusHandler } from './focusHandler'
+import { initOnlineHandler } from './onlineHandler'
+import { notifyManager } from './notifyManager'
 
 // TYPES
 
@@ -55,6 +57,8 @@ export class QueryClient {
 
   mount(): void {
     mountedClients.push(this)
+    initFocusHandler(onFocus)
+    initOnlineHandler(onOnline)
   }
 
   unmount(): void {
@@ -338,7 +342,15 @@ export class QueryClient {
 
 const mountedClients: QueryClient[] = []
 
-export function onExternalEvent(type: 'focus' | 'online') {
+function onFocus() {
+  onExternalEvent('focus')
+}
+
+function onOnline() {
+  onExternalEvent('online')
+}
+
+function onExternalEvent(type: 'focus' | 'online') {
   if (isDocumentVisible() && isOnline()) {
     notifyManager.batch(() => {
       uniq(mountedClients.map(x => x.getCache())).forEach(cache => {

src/core/queryObserver.ts

@@ -19,7 +19,7 @@ import type {
   ResultOptions,
 } from './types'
 import type { Query, QueryState, Action, FetchOptions } from './query'
-import { QueryClient } from './queryClient'
+import type { QueryClient } from './queryClient'
 
 export interface QueryObserverConfig<
   TData = unknown,

src/core/setFocusHandler.ts

@@ -1,4 +1,4 @@
-import { QueryFilters } from './utils'
+import type { QueryFilters } from './utils'
 
 export type QueryKey = string | unknown[]