feat: devtools are now native to the core repo/npm-package

Author: tannerlinsley

README.md

@@ -39,7 +39,7 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Tabl
 - Load-More + Infinite Scroll Queries w/ Scroll Recovery
 - Request Cancellation
 - [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) + Fetch-As-You-Render Query Prefetching
-- [Dedicated Devtools (React Query Devtools)](https://github.com/tannerlinsley/react-query-devtools)
+- [Dedicated Devtools
 - <a href="https://bundlephobia.com/result?p=react-query@latest" target="\_parent">
   <img alt="" src="https://badgen.net/bundlephobia/minzip/react-query@latest" />
   </a> (depending on features imported)

devtools/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../lib/devtools/index.js",
+  "module": "../es/devtools/index.js",
+  "types": "../types/devtools/index.d.ts"
+}

docs/src/pages/devtools.md

@@ -9,31 +9,71 @@ When you begin your React Query journey, you'll want these devtools by your side
 
 > Please note that for now, the devtools **do not support React Native**. If you would like to help use mae the devtools platform agnostic, please let us know!
 
-## Quick Installation
+## Import the Devtools
 
-To get going as fast as possible, do the following:
+The devtools are bundle split into the `react-query/devtools` package. No need to install anything extra, just:
 
-```bash
-$ npm i react-query-devtools
-# or
-$ yarn add react-query-devtools
+```js
+import { ReactQueryDevtools } from 'react-query/devtools'
 ```
 
+By default, React Query Devtools are not included in production bundles when `process.env.NODE_ENV === 'production'`, so you don't need to worry about excluding them during a production build.
+
+## Floating Mode
+
+Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
+
 Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
 
 ```js
-import { ReactQueryDevtools } from 'react-query-devtools'
+import { ReactQueryDevtools } from 'react-query/devtools'
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/* The rest of your application */}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}
+```
+
+### Options
+
+- `initialIsOpen: Boolean`
+  - Set this `true` if you want the dev tools to default to being open
+- `panelProps: PropsObject`
+  - Use this to add props to the panel. For example, you can add `className`, `style` (merge and override default style), etc.
+- `closeButtonProps: PropsObject`
+  - Use this to add props to the close button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
+- `toggleButtonProps: PropsObject`
+  - Use this to add props to the toggle button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
+- `position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
+  - Defaults to `bottom-left`
+  - The position of the React Query logo to open and close the devtools panel
+
+## Embedded Mode
+
+Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
+
+```js
+import { ReactQueryDevtoolsPanel } from 'react-query/devtools'
 
 function App() {
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       {/* The rest of your application */}
-      <ReactQueryDevtools initialIsOpen />
-    </>
+      <ReactQueryDevtoolsPanel style={styles} className={className} />
+    </QueryClientProvider>
   )
 }
 ```
 
-## Need more control?
+### Options
+
+Use these options to style the dev tools.
 
-Visit the [React Query Devtools Github Repo](https://github.com/tannerlinsley/react-query-devtools) for more documentation!
+- `style: StyleObject`
+  - 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

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

@@ -537,3 +537,7 @@ The core of React Query is now fully separated from React, which means it can al
 ```js
 import { QueryClient } from 'react-query/core'
 ```
+
+### Devtools are now part of the main repo and npm package
+
+The devtools are now included in the `react-query` package itself under the import `react-query/devtools`. Simply replace `react-query-devtools` imports with `react-query/devtools`

docs/src/pages/react-native.md

@@ -3,4 +3,4 @@ id: react-native
 title: React Native
 ---
 
-React Query is designed to work out of the box with React Native, with an expection to the devtools, which are not supported at this time. If you would like to help us make the devtools platform agnostic, please let us know!
+React Query is designed to work out of the box with React Native, with an exeption to the devtools, which are only supported with React DOM at this time. If you would like to help us make the devtools platform agnostic, please let us know!

examples/auto-refetching/package.json

@@ -9,8 +9,7 @@
     "next": "9.3.2",
     "react": "16.13.0",
     "react-dom": "16.13.0",
-    "react-query": "^3",
-    "react-query-devtools": "^3"
+    "react-query": "^3"
   },
   "scripts": {
     "dev": "next",

examples/auto-refetching/pages/index.js

@@ -10,7 +10,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
-import { ReactQueryDevtools } from 'react-query-devtools'
+import { ReactQueryDevtools } from 'react-query/devtools'
 
 const queryClient = new QueryClient()
 

examples/basic-graphql-request/package.json

@@ -13,7 +13,6 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-query": "^3",
-    "react-query-devtools": "^3",
     "react-scripts": "3.0.1",
     "stop-runaway-react-effects": "^1.2.0",
     "styled-components": "^4.3.2"

examples/basic-graphql-request/src/index.js

@@ -7,7 +7,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from "react-query";
-import { ReactQueryDevtools } from "react-query-devtools";
+import { ReactQueryDevtools } from "react-query/devtools";
 import { request, gql } from "graphql-request";
 
 const endpoint = "https://graphqlzero.almansi.me/api";

examples/basic/.rescriptsrc.js

@@ -1,29 +1,37 @@
-const path = require('path')
-const resolveFrom = require('resolve-from')
+const path = require("path");
+const resolveFrom = require("resolve-from");
 
-const fixLinkedDependencies = config => {
+const fixLinkedDependencies = (config) => {
   config.resolve = {
     ...config.resolve,
     alias: {
       ...config.resolve.alias,
-      react$: resolveFrom(path.resolve('node_modules'), 'react'),
-      'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+      react$: resolveFrom(path.resolve("node_modules"), "react"),
+      "react-dom$": resolveFrom(path.resolve("node_modules"), "react-dom"),
     },
-  }
-  return config
-}
+  };
+  return config;
+};
 
-const includeSrcDirectory = config => {
+const includeSrcDirectory = (config) => {
   config.resolve = {
     ...config.resolve,
-    modules: [path.resolve('src'), ...config.resolve.modules],
-  }
-  return config
-}
+    modules: [path.resolve("src"), ...config.resolve.modules],
+  };
+  return config;
+};
+
+const allowOutsideSrc = (config) => {
+  config.resolve.plugins = config.resolve.plugins.filter(
+    (p) => p.constructor.name !== "ModuleScopePlugin"
+  );
+  return config;
+};
 
 module.exports = [
-  ['use-babel-config', '.babelrc'],
-  ['use-eslint-config', '.eslintrc'],
+  ["use-babel-config", ".babelrc"],
+  ["use-eslint-config", ".eslintrc"],
   fixLinkedDependencies,
+  allowOutsideSrc,
   // includeSrcDirectory,
-]
+];