reduxjs · Methuselah96 · Aug 26, 2021 · Jun 9, 2021 · Jun 11, 2021 · Jun 12, 2021
diff --git a/.prettierignore b/.prettierignore
@@ -9,3 +9,5 @@ node_modules
 __snapshots__
 dev
 .yarn/*
+**/.yarn/*
+**/demo/public/**
diff --git a/package.json b/package.json
@@ -50,6 +50,9 @@
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2"
   },
+  "resolutions": {
+    "@types/react": "16.14.8"
+  },
   "scripts": {
     "lerna": "lerna",
     "build:all": "lerna run build",

diff --git a/packages/redux-devtools-app/package.json b/packages/redux-devtools-app/package.json
@@ -43,7 +43,9 @@
     "@redux-devtools
10000
/inspector-monitor-test-tab": "^0.7.2",
     "@redux-devtools/inspector-monitor-trace-tab": "^0.2.2",
     "@redux-devtools/log-monitor": "^2.3.0",
+    "@redux-devtools/rtk-query-monitor": "^1.0.0",
     "@redux-devtools/slider-monitor": "^2.0.0-8",
+    "@reduxjs/toolkit": "^1.6.0",
     "d3-state-visualizer": "^1.4.0",
     "devui": "^1.0.0-9",
     "javascript-stringify": "^2.1.0",

diff --git a/packages/redux-devtools-app/src/utils/getMonitor.tsx b/packages/redux-devtools-app/src/utils/getMonitor.tsx
@@ -2,11 +2,13 @@ import React from 'react';
 import LogMonitor from '@redux-devtools/log-monitor';
 import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper';
 import InspectorWrapper from '../containers/monitors/InspectorWrapper';
+import RtkQueryMonitor from '@redux-devtools/rtk-query-monitor';
 
 export const monitors = [
   { value: 'InspectorMonitor', name: 'Inspector' },
   { value: 'LogMonitor', name: 'Log monitor' },
   { value: 'ChartMonitor', name: 'Chart' },
+  { value: 'RtkQueryMonitor', name: 'RTK Query' },
 ];
 
 export default function getMonitor({ monitor }: { monitor: string }) {
@@ -17,6 +19,8 @@ export default function getMonitor({ monitor }: { monitor: string }) {
       );
     case 'ChartMonitor':
       return <ChartMonitorWrapper />;
+    case 'RtkQueryMonitor':
+      return <RtkQueryMonitor />;
     default:
       return <InspectorWrapper />;
   }

diff --git a/packages/redux-devtools-cli/bin/redux-devtools.js b/packages/redux-devtools-cli/bin/redux-devtools.js
diff --git a/packages/redux-devtools-rtk-query-monitor/.babelrc b/packages/redux-devtools-rtk-query-monitor/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintignore b/packages/redux-devtools-rtk-query-monitor/.eslintignore
@@ -0,0 +1,2 @@
+lib
+demo/
diff --git a/packages/redux-devtools-rtk-query-monitor/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: '../../.eslintrc',
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: '../../eslintrc.ts.react.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+  ],
+};
diff --git a/packages/redux-devtools-rtk-query-monitor/LICENSE.md b/packages/redux-devtools-rtk-query-monitor/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Fabrizio Vitale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE S
3D11
OFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/redux-devtools-rtk-query-monitor/README.md b/packages/redux-devtools-rtk-query-monitor/README.md
@@ -0,0 +1,108 @@
+# Redux DevTools RTK Query inspector monitor
+
+A monitor that displays [RTK query](https://redux-toolkit.js.org/rtk-query/overview) queries and mutations for [Redux DevTools](https://github.com/gaearon/redux-devtools).
+
+Created by [FaberVitale](https://github.com/FaberVitale), inspired by [react-query devtools](https://github.com/tannerlinsley/react-query/tree/master/devtools).
+
+## Demo
+
+- [link](https://rtk-query-monitor-demo.netlify.app/)
+- [demo source](https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor/demo)
+
+## Preview
+
+![RTK Query inspector monitor demo](./monitor-demo.gif)
+
+## Installation
+
+### npm
+
+```bash
+npm i @redux-devtools/rtk-query-monitor --save
+```
+
+### yarn
+
+```bash
+yarn add @redux-devtools/rtk-query-monitor
+```
+
+## Usage
+
+You can use `RtkQueryMonitor` as the only monitor in your app:
+
+##### `containers/DevTools.js`
+
+```ts
+import React from 'react';
+import { createDevTools } from '@redux-devtools/core';
+import RtkQueryrMonitor from '@redux-devtools/rtk-query-monitor';
+
+export default createDevTools(<RtkQueryrMonitor />);
+```
+
+Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
+
+Alternatively, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
+
+See also
+
+- [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
+
+- [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
+
+- [Redux Devtools walkthrough](https://github.com/reduxjs/redux-devtools/tree/master/docs/Walkthrough.md)
+
+## Features
+
+- sorts queries in ascending or descending order by:
+  - fulfilledTimeStamp
+  - query key
+  - query status
+  - endpoint
+  - api reducerPath
+- filters queries by:
+  - fulfilledTimeStamp
+  - query key
+  - query status
+  - endpoint
+  - api reducerPath
+- displays
+  - status flags
+  - query state
+  - tags
+  - subscriptions
+  - api state
+  - api stats
+
+## TODO
+
+- [ ] display mutations
+- [ ] filter by tags types
+- [ ] download query.data
+- [ ] upload query.data(?)
+- [ ] refetch query button(?)
+- ...suggestions are welcome
+
+## Redux DevTools props
+
+| Name          | Description                                                                                                                                                                                                                                                                                                                         |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `theme`       | Either a string referring to one of the themes provided by [redux-devtools-themes](https://github.com/gaearon/redux-devtools-themes) (feel free to contribute!) or a custom object of the same format. Optional. By default, set to [`'nicinabox'`](https://github.com/gaearon/redux-devtools-themes/blob/master/src/nicinabox.js). |
+| `invertTheme` | Boolean value that will invert the colors of the selected theme. Optional. By default, set to `false`                                                                                                                                                                                                                               |
+
+<br/>
+
+### Development
+
+#### Start Demo
+
+```bash
+yarn lerna run start --stream --scope @redux-devtools/rtk-query-monitor
+```
+
+<br/>
+
+## License
+
+[MIT](./LICENSE.md)
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.babelrc b/packages/redux-devtools-rtk-query-monitor/demo/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime"
+  ]
+}
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js b/packages/redux-devtools-rtk-query-monitor/demo/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['react-app'],
+};
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/.gitignore b/packages/redux-devtools-rtk-query-monitor/demo/.gitignore
@@ -0,0 +1,4 @@
+.snowpack
+build
+node_modules
+.yarn/*
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/config/tsconfig.json b/packages/redux-devtools-rtk-query-monitor/demo/config/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "resolveJsonModule": true
+  },
+  "include": ["webpack.config.ts"]
+}
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/config/webpack.config.ts b/packages/redux-devtools-rtk-query-monitor/demo/config/webpack.config.ts
@@ -0,0 +1,88 @@
+import * as path from 'path';
+import * as webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import * as pkg from '../../package.json';
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const isProduction = process.env.NODE_ENV === 'production';
+
+const demoSrc = path.join(__dirname, '../src');
+const libSrc = path.join(__dirname, '../../src');
+const publicDir = path.join(__dirname, '../public');
+
+module.exports = {
+  mode: process.env.NODE_ENV || 'development',
+  entry: isProduction
+    ? ['./demo/src/index']
+    : [
+        'webpack-dev-server/client?http://localhost:3000',
+        'webpack/hot/only-dev-server',
+        './demo/src/index',
+      ],
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: isProduction ? '[name].[contenthash:8].js' : 'js/bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|ts)x?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        include: [demoSrc, libSrc],
+      },
+      {
+        test: /\.css?$/,
+        loaders: ['style-loader', 'css-loader'],
+        include: demoSrc,
+      },
+    ],
+  },
+  resolve: {
+    modules: ['node_modules', demoSrc],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+  optimization: {
+    minimize: isProduction,
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: 'demo/public/index.html',
+      package: pkg,
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'demo/public/assets/*.js',
+          to: ({ absoluteFilename }: any) => {
+            return `./${path.basename(absoluteFilename)}`;
+          },
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+        },
+      ],
+    }),
+    new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        configFile: 'demo/tsconfig.json',
+      },
+    }),
+  ].concat(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()]),
+  devServer: isProduction
+    ? {}
+    : {
+        quiet: false,
+        port: 3000,
+        hot: true,
+        stats: {
+          chunkModules: false,
+          colors: true,
+        },
+        historyApiFallback: true,
+      },
+  devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+};