feat: ESM support (#4092)

* fix: restore missing `exports` declarations (#3892)

* fix: restore missing `exports` declarations

* fix: restore package.json exports[C

* fix: reexport types used by vue-query

* fix: react-native uSES usage

* fix: emit mjs for esm

* fix: uSES build

* fix: devtools exports to allow devtools in prod

* fix: cjs and esm build bundled to lib dir

* fix: sideEffect in react-query, better files paths

* fix: generate declarations to lib

* fix: lint and tests

* fix: use the same ts build method for tests

* fix: change force prod import

* fix: subpackage dependencies (#4013)

* fix: umd-build (#3924)

* - Fix UMD build getting overwritten
- Updating "browser" field for @tanstack/react-query-devtools

* Updating the "browser" field to be the same as "main"

* release: v4.0.11-beta.0

* release: v4.0.11-beta.1

* fix(react-query-devtools): cjs devtools fallback (#4048)

* release: v4.0.11-beta.2

* fix: remove browser entry, fix umd size (#4044)

* fix: remove browser entry, fix umd size

* fix: bundle query-core with react-query for umd

* fix: remove missed browser entry

* chore: remove 'browser' field from package validation

because it doesn't exist anymore

* release: v4.0.11-beta.3

* release: v4.0.11-beta.4

* chore: react-query should be a peerDependency of the devtools

* release: v4.0.11-beta.5

* release: v4.3.0-beta.0

* fix: webpack 4 fallback to cjs (#4069)

* fix: publish script shouldn't check against module anymore

* fix: publish script

I don't think we can have single quotes in commit message when passing them to --notes

* release: v4.3.0-beta.2

* release: v4.3.0-beta.3

* fix: umd build size, force prod devtools (#4074)

* fix: umd build size

* fix: devtools force production

* release: v4.3.0-beta.4

* release: v4.3.0-beta.5

* fix: reintroduce production export (#4090)

* release: v4.3.0-beta.6

* fix(react-query-devtools): always useEffect for the mounted check

no effect runs on the server, and there is no real advantage to useLayoutEffect on the client; somehow, this dynamic check creates problems with the production build of the devtools

* release: v4.3.0-beta.7

* docs: document devtools in production

* docs: document devtools in production

* docs: document devtools in production

nodenext needs 4.7

* fix: support react-native (#4125)

* fix: support react-native

* chore: remove banner from build

Co-authored-by: Damian Osipiuk <[email protected]>
Co-authored-by: John Daly <[email protected]>
Co-authored-by: Tanner Linsley <[email protected]>

Author: 4 people

docs/devtools.md

@@ -87,3 +87,61 @@ Use these options to style the dev tools.
   - The standard React style object used to style a component with inline styles
 - `className: string`
   - The standard React className property used to style a component with classes
+
+## Devtools in production
+
+Devtools are excluded in production builds. However, it might be desirable to lazy load the devtools in production:
+
+```tsx
+import * as React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { Example } from './Example'
+
+const queryClient = new QueryClient()
+
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+    import('@tanstack/react-query-devtools/build/lib/index.prod.js').then(d => ({
+          default: d.ReactQueryDevtools
+    }))
+)
+
+function App() {
+    const [showDevtools, setShowDevtools] = React.useState(false)
+
+    React.useEffect(() => {
+        // @ts-ignore
+        window.toggleDevtools = () => setShowDevtools(old => !old)
+    }, [])
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <Example />
+            <ReactQueryDevtools initialIsOpen />
+            { showDevtools && (
+                <React.Suspense fallback={null}>
+                    <ReactQueryDevtoolsProduction />
+                </React.Suspense>
+            )}
+        </QueryClientProvider>
+    );
+}
+
+export default App
+```
+
+With this, calling `window.toggleDevtools()` will download the devtools bundle and show them.
+
+### Modern bundlers
+
+If your bundler supports package exports, you can use the following import path:
+
+```tsx
+const ReactQueryDevtoolsProduction = React.lazy(() =>
+    import('@tanstack/react-query-devtools/production').then(d => ({
+          default: d.ReactQueryDevtools
+    }))
+)
+```
+
+For TypeScript, you would need to set `moduleResolution: 'nodenext'` in your tsconfig, which requires at least TypeScript v4.7.

examples/react/auto-refetching/package.json

@@ -10,8 +10,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "scripts": {
     "dev": "next",

examples/react/basic-graphql-request/package.json

@@ -13,8 +13,8 @@
     "graphql-request": "^3.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/basic-typescript/package.json

@@ -13,10 +13,10 @@
     "broadcast-channel": "^3.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
-    "@tanstack/react-query-persist-client": "4.2.1",
-    "@tanstack/query-sync-storage-persister": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
+    "@tanstack/react-query-persist-client": "4.3.0-beta.4",
+    "@tanstack/query-sync-storage-persister": "4.3.0-beta.4",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2",

examples/react/basic/package.json

@@ -12,8 +12,8 @@
     "axios": "^0.21.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/custom-hooks/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@tanstack/query-example-react-custom-hooks",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "start": "rescripts start",
+    "build": "rescripts build",
+    "test": "rescripts test",
+    "eject": "rescripts eject"
+  },
+  "dependencies": {
+    "axios": "^0.26.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
+    "react-scripts": "3.0.1",
+    "stop-runaway-react-effects": "^1.2.0",
+    "styled-components": "^4.3.2"
+  },
+  "devDependencies": {
+    "@rescripts/cli": "^0.0.11",
+    "@rescripts/rescript-use-babel-config": "^0.0.8",
+    "@rescripts/rescript-use-eslint-config": "^0.0.9",
+    "babel-eslint": "10.0.1",
+    "eslint-config-prettier": "^6.12.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/react/default-query-function/package.json

@@ -12,8 +12,8 @@
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^2.0.0",

examples/react/focus-refetching/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-react-focus-revalidate",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.21.1",
+    "isomorphic-unfetch": "3.0.0",
+    "next": "12.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/react/load-more-infinite-scroll/package.json

@@ -11,8 +11,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^8.33.1",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3"
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7"
   },
   "scripts": {
     "dev": "next",

examples/react/nextjs/package.json

@@ -13,8 +13,8 @@
     "next": "12.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@tanstack/react-query": "4.2.3",
-    "@tanstack/react-query-devtools": "4.2.3",
+    "@tanstack/react-query": "4.3.0-beta.4",
+    "@tanstack/react-query-devtools": "4.3.0-beta.7",
     "resolve-from": "^5.0.0",
     "web-streams-polyfill": "^3.0.3"
   },