chore(bundling): bundle for modern browsers (#3342)

* chore(bundling): update babel dependencies

* chore(bundling): remove babel-plugin-transform-async-to-promises

we don't use async functions, and we also want to target envs that support async functions

* chore(bundling): update supported browsers

for a more modern output

* chore(bundling): tweak browserslist

and exclude transform-parameters plugin, which comes in because of any safari version, even though it should not be needed according to caniuse. This plugin transforms ES2015 parameters to ES5, this includes: Destructuring parameters, Default parameters and Rest parameters, all of which are supported by Safari

* chore(bundling): update terser

* chore(bundling): fix tests

ReferenceError: Cannot access 'promiseResolve' before initialization

* chore(bundling): docs about supported browsers

* chore(bundling): small docs fixes

Author: TkDodo

.babelrc.js

@@ -5,18 +5,20 @@ const loose = true
 module.exports = {
   presets: [
     [
-      '@babel/env',
+      '@babel/preset-env',
       {
         loose,
         modules: false,
-        exclude: ['@babel/plugin-transform-regenerator'],
+        exclude: [
+          '@babel/plugin-transform-regenerator',
+          '@babel/plugin-transform-parameters',
+        ],
       },
     ],
     '@babel/preset-typescript',
     '@babel/react',
   ],
   plugins: [
-    'babel-plugin-transform-async-to-promises',
     cjs && ['@babel/transform-modules-commonjs', { loose }],
     [
       '@babel/transform-runtime',

.browserslistrc

@@ -1,8 +1,7 @@
 # Browsers we support
-> 0.5%
 Chrome >= 73
-ChromeAndroid >= 75
-Firefox >= 67
-Edge >= 17
-Safari >= 12.1
-iOS >= 11.3
+Firefox >= 78
+Edge >= 79
+Safari >= 12.0
+iOS >= 12.0
+opera >= 53

docs/src/pages/guides/migrating-to-react-query-4.md

@@ -293,6 +293,10 @@ useQuery(
 
 This is now disallowed on type level; at runtime, `undefined` will be transformed to a _failed Promise_, which means you will get an `error`, which will also be logged to the console in development mode.
 
+### Supported Browsers
+
+As of v4, React Query is optimized for modern browsers. We have updated our browserslist to produce a more modern, performant and smaller bundle. You can read about the requirements [here](../installation#requirements).
+
 ## New Features 🚀
 
 ### Proper offline support

docs/src/pages/installation.md

@@ -30,3 +30,18 @@ If you're not using a module bundler or package manager we also have a global ("
 Once you've added this you will have access to the `window.ReactQuery` object and its exports.
 
 > This installation/usage requires the [React CDN script bundles](https://reactjs.org/docs/cdn-links.html) to be on the page as well.
+
+### Requirements
+
+React Query is optimized for modern browsers. It is compatible with the following browsers config
+
+```
+Chrome >= 73
+Firefox >= 78
+Edge >= 79
+Safari >= 12.0
+iOS >= 12.0
+opera >= 53
+```
+
+> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves.

package.json

@@ -84,12 +84,12 @@
     }
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@rollup/plugin-replace": "^3.0.0",
     "@svgr/rollup": "^6.1.1",
     "@testing-library/jest-dom": "^5.14.1",
@@ -102,7 +102,6 @@
     "@typescript-eslint/parser": "^5.6.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
-    "babel-plugin-transform-async-to-promises": "^0.8.15",
     "bundlewatch": "^0.3.2",
     "cross-env": "^7.0.2",
     "eslint": "7.x",
@@ -128,16 +127,16 @@
     "react-error-boundary": "^2.2.2",
     "replace": "^1.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.61.1",
+    "rollup": "^2.68.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-jscc": "^2.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-prettier": "^2.2.0",
+    "rollup-plugin-prettier": "^2.2.2",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.5.2",
+    "rollup-plugin-visualizer": "^5.6.0",
     "type-fest": "^0.21.0",
     "typescript": "4.5.3"
   },

src/core/retryer.ts

@@ -69,13 +69,14 @@ export function createRetryer<TData = unknown, TError = unknown>(
   let isRetryCancelled = false
   let failureCount = 0
   let isResolved = false
+  let continueFn: ((value?: unknown) => void) | undefined
+  let promiseResolve: (data: TData) => void
+  let promiseReject: (error: TError) => void
+
   const promise = new Promise<TData>((outerResolve, outerReject) => {
     promiseResolve = outerResolve
     promiseReject = outerReject
   })
-  let continueFn: ((value?: unknown) => void) | undefined
-  let promiseResolve: (data: TData) => void
-  let promiseReject: (error: TError) => void
 
   const cancel = (cancelOptions?: CancelOptions): void => {
     if (!isResolved) {