diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/README.md b/packages/redux-devtools-rtk-query-inspector-monitor/README.md index d09c0a2e..480ee9da 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/README.md +++ b/packages/redux-devtools-rtk-query-inspector-monitor/README.md @@ -1,21 +1,21 @@ -# Redux DevTools Chart Monitor +# Redux DevTools RTK Query inspector monitor -A chart monitor for [Redux DevTools](https://github.com/gaearon/redux-devtools). +Displays rtk-query queries and mutations for [Redux DevTools](https://github.com/gaearon/redux-devtools). -Created by [@romseguy](https://github.com/romseguy) and merged from [`reduxjs/redux-devtools-chart-monitor`](https://github.com/reduxjs/redux-devtools-chart-monitor). +Created by [FaberVitale](https://github.com/FaberVitale) -It shows a real-time view of the store aka the current state of the app. -:rocket: Now with immutable-js support. - -[Demo](http://romseguy.github.io/redux-store-visualizer/) [(Source)](https://github.com/romseguy/redux-store-visualizer) - -![Chart Monitor](https://camo.githubusercontent.com/19aebaeba929e97f97225115c49dc994299cb76e/687474703a2f2f692e696d6775722e636f6d2f4d53677655366c2e676966) +![RTK Query inspector monitor demo](./monitor-demo.gif) ### Installation -``` -yarn add @redux-devtools/chart-monitor +```bash +npm i @redux-devtools/rtk-query-inspector-monitor --save # npm + +# or + +yarn add @redux-devtools/rtk-query-inspector-monitor # yarn + ``` ### Usage @@ -24,12 +24,12 @@ You can use `ChartMonitor` as the only monitor in your app: ##### `containers/DevTools.js` -```js +```ts import React from 'react'; import { createDevTools } from '@redux-devtools/core'; -import ChartMonitor from '@redux-devtools/chart-monitor'; +import RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor'; -export default createDevTools(); +export default createDevTools(); ``` Then you can render `` to any place inside app or even into a separate popup window. @@ -39,32 +39,12 @@ Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tre [Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools) -### Features - -### Props - -#### ChartMonitor props - -You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below: - -| Name | Description | -| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `defaultIsVisible` | By default, set to `true`. | -| `transitionDuration` | By default, set to `750`, in milliseconds. | -| `heightBetweenNodesCoeff` | By default, set to `1`. | -| `widthBetweenNodesCoeff` | By default, set to `1.3`. | -| `isSorted` | By default, set to `false`. | -| `style` | {
  width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
  text: {
    colors: {
      'default': `theme.base0D`,
      hover: `theme.base06`
    }
  },
  node: {
    colors: {
      'default': `theme.base0B`,
      collapsed: `theme.base0B`,
      parent: `theme.base0E`
    },
    radius: 7
  }
} | -| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. | -| `tooltipOptions` | {
  disabled: false,
  indentationSize: 2,
  style: {
    'background-color': `theme.base06`,
    'opacity': '0.7',
    'border-radius': '5px',
    'padding': '5px'
  }
}
[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). | - #### 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` | -| `select` | A function that selects the slice of the state for DevTools to show. For example, `state => state.thePart.iCare.about`. Optional. By default, set to `state => state`. | ### License diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md b/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md index 7722026f..30a53a6a 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md +++ b/packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md @@ -1,25 +1,23 @@ -# New Project +# RTK Query Inspector monitor demo -> ✨ Bootstrapped with Create Snowpack App (CSA). +## Running demo -## Available Scripts -### npm start +### Working directory +Run the following commands from redux-devtools monorepo root directory. -Runs the app in the development mode. -Open http://localhost:8080 to view it in the browser. -The page will reload if you make edits. -You will also see any lint errors in the console. +### 1. Install depedencies -### npm run build +```bash +yarn +``` -Builds a static copy of your site to the `build/` folder. -Your app is ready to be deployed! +### 2. Start demo -**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.mjs` config file. - -### npm test - -Launches the application test runner. -Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode. +```bash +# working directory is monorepo root +yarn lerna run --parallel start \ +--scope '@redux-devtools/rtk-query-inspector-monitor' \ +--scope 'rtk-query-imspector-monitor-demo' +``` diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/monitor-demo.gif b/packages/redux-devtools-rtk-query-inspector-monitor/monitor-demo.gif new file mode 100644 index 00000000..f2ed5992 Binary files /dev/null and b/packages/redux-devtools-rtk-query-inspector-monitor/monitor-demo.gif differ diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/package.json b/packages/redux-devtools-rtk-query-inspector-monitor/package.json index fc4dffe5..93e46c1d 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/package.json +++ b/packages/redux-devtools-rtk-query-inspector-monitor/package.json @@ -1,7 +1,7 @@ { "name": "@redux-devtools/rtk-query-inspector-monitor", "version": "1.0.0", - "description": "rtk-query Monitor for Redux DevTools", + "description": "rtk-query monitor for Redux DevTools", "keywords": [ "redux", "devtools", @@ -10,12 +10,15 @@ "redux-toolkit", "rtk-query" ], - "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor", + "homepage": "https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor", "bugs": { "url": "https://github.com/reduxjs/redux-devtools/issues" }, "license": "MIT", - "author": "FaberVitale", + "author": { + "name": "FaberVitale", + "url": "https://github.com/FaberVitale" + }, "files": [ "lib", "src" diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts index 2f328a20..65f8225e 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/selectors.ts @@ -85,13 +85,15 @@ export function createInspectorSelectors(): InspectorSelectors { } ); + const selectComparatorOrder = ({ monitorState }: SelectorsSource) => + monitorState.queryForm.values.isAscendingQueryComparatorOrder; + const selectAllVisbileQueries = createSelector( [ selectQueryComparator, selectQueryListFilter, selectAllQueries, - ({ monitorState }: SelectorsSource) => - monitorState.queryForm.values.isAscendingQueryComparatorOrder, + selectComparatorOrder, selectSearchQueryRegex, ], (comparator, queryListFilter, queryList, isAscending, searchRegex) => { diff --git a/packages/redux-devtools/examples/rtk-query-polling/package.json b/packages/redux-devtools/examples/rtk-query-polling/package.json index 2c07d5cf..61b1746e 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/package.json +++ b/packages/redux-devtools/examples/rtk-query-polling/package.json @@ -3,12 +3,11 @@ "version": "1.0.0", "private": true, "description": "A redux app powered by rtk-query connected via remote-redux-devtools", - "keywords": [], "main": "src/index.tsx", "dependencies": { "@reduxjs/toolkit": "^1.6.0", - "react": "^16.3.0", - "react-dom": "^16.3.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", "react-redux": "7.2.2", "react-scripts": "4.0.2", "remote-redux-devtools": "0.5.16" @@ -17,7 +16,7 @@ "@types/react": "17.0.0", "@types/react-dom": "17.0.0", "@types/react-redux": "7.1.9", - "typescript": "4.1.3" + "typescript": "4.3.2" }, "eslintConfig": { "extends": [ diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx b/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx index d73b488e..f2781953 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx +++ b/packages/redux-devtools/examples/rtk-query-polling/src/App.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import * as React from 'react'; import { Pokemon } from './Pokemon' import { PokemonName, POKEMON_NAMES } from './pokemon.data' import './styles.css' @@ -7,7 +7,7 @@ const getRandomPokemonName = () => POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)] export default function App() { - const [pokemon, setPokemon] = useState(['bulbasaur']) + const [pokemon, setPokemon] = React.useState(['bulbasaur']) return (
diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx b/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx index 001a064a..57018957 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx +++ b/packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx @@ -1,8 +1,6 @@ -import { useState, version } from 'react' -import { useGetPokemonByNameQuery } from './services/pokemon' -import type { PokemonName } from './pokemon.data' - -console.log(version); +import * as React from 'react'; +import { useGetPokemonByNameQuery } from './services/pokemon'; +import type { PokemonName } from './pokemon.data'; const intervalOptions = [ { label: 'Off', value: 0 }, @@ -16,7 +14,7 @@ const getRandomIntervalValue = () => intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value export function Pokemon({ name }: { name: PokemonName }) { - const [pollingInterval, setPollingInterval] = useState( + const [pollingInterval, setPollingInterval] = React.useState( getRandomIntervalValue() ) diff --git a/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx b/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx index f7ffca45..9182195b 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx +++ b/packages/redux-devtools/examples/rtk-query-polling/src/index.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { render } from 'react-dom' import { Provider } from 'react-redux'; import App from './App' diff --git a/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json b/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json index 5f488e8e..326e0c97 100644 --- a/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json +++ b/packages/redux-devtools/examples/rtk-query-polling/tsconfig.json @@ -1,25 +1,22 @@ { + "extends": "../../../../tsconfig.react.base.json", "include": [ - "./src/**/*" + "src" ], "compilerOptions": { - "strict": true, - "esModuleInterop": true, "lib": [ "dom", - "es2015" + "dom.iterable", + "esnext" ], - "jsx": "react-jsx", - "target": "es5", "allowJs": true, "skipLibCheck": true, - "allowSyntheticDefaultImports": true, - "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "noEmit": true + "noEmit": true, + "jsx": "react-jsx" } } diff --git a/yarn.lock b/yarn.lock index c1e400db..6097e80e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24378,7 +24378,7 @@ fsevents@^1.2.7: languageName: unknown linkType: soft -"react-dom@npm:^16.14.0, react-dom@npm:^16.3.0": +"react-dom@npm:^16.14.0": version: 16.14.0 resolution: "react-dom@npm:16.14.0" dependencies: @@ -24392,7 +24392,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-dom@npm:^17.0.2": +"react-dom@npm:^17.0.0, react-dom@npm:^17.0.2": version: 17.0.2 resolution: "react-dom@npm:17.0.2" dependencies: @@ -24879,7 +24879,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react@npm:^16.13.1, react@npm:^16.14.0, react@npm:^16.3.0": +"react@npm:^16.13.1, react@npm:^16.14.0": version: 16.14.0 resolution: "react@npm:16.14.0" dependencies: @@ -24890,7 +24890,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react@npm:^17.0.2": +"react@npm:^17.0.0, react@npm:^17.0.2": version: 17.0.2 resolution: "react@npm:17.0.2" dependencies: @@ -26192,12 +26192,12 @@ resolve@^2.0.0-next.3: "@types/react": 17.0.0 "@types/react-dom": 17.0.0 "@types/react-redux": 7.1.9 - react: ^16.3.0 - react-dom: ^16.3.0 + react: ^17.0.0 + react-dom: ^17.0.0 react-redux: 7.2.2 react-scripts: 4.0.2 remote-redux-devtools: 0.5.16 - typescript: 4.1.3 + typescript: 4.3.2 languageName: unknown linkType: soft @@ -29274,16 +29274,6 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -typescript@4.1.3: - version: 4.1.3 - resolution: "typescript@npm:4.1.3" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: 4f7ab1506ea22c7a1c313ec5b4285e93ce08d709ad6086d02d3096adb399ca339972ee56d1e578213c51dd0fb7b0fad50283c2d3c39642405644458ae29774f8 - languageName: node - linkType: hard - typescript@4.3.2: version: 4.3.2 resolution: "typescript@npm:4.3.2" @@ -29294,16 +29284,6 @@ typescript@4.3.2: languageName: node linkType: hard -typescript@^3.9.7: - version: 3.9.10 - resolution: "typescript@npm:3.9.10" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: 544f3810ac3d3fcd141907e7f52f0b8c70af178adc83af47e2b8a48351e5a119919a4d3bfbe2f62d5165b5aa203e896fe0432024cfbda670dbd03a4f53ce7748 - languageName: node - linkType: hard - typescript@^4.3.4: version: 4.3.4 resolution: "typescript@npm:4.3.4" @@ -29314,16 +29294,6 @@ typescript@^4.3.4: languageName: node linkType: hard -"typescript@patch:typescript@4.1.3#builtin": - version: 4.1.3 - resolution: "typescript@patch:typescript@npm%3A4.1.3#builtin::version=4.1.3&hash=ddfc1b" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: 28f0f616bf6284543bb14d4bfe0e1a74963e5df0396ebccfc6a57bfd4ab70b4284e51b3a2045ed2466151a4a58c8a549edb886a2f7a2232cf08fcf73496592e6 - languageName: node - linkType: hard - "typescript@patch:typescript@4.3.2#builtin": version: 4.3.2 resolution: "typescript@patch:typescript@npm%3A4.3.2#builtin::version=4.3.2&hash=ddfc1b" @@ -29334,16 +29304,6 @@ typescript@^4.3.4: languageName: node linkType: hard -"typescript@patch:typescript@^3.9.7#builtin": - version: 3.9.10 - resolution: "typescript@patch:typescript@npm%3A3.9.10#builtin::version=3.9.10&hash=ddfc1b" - bin: - tsc: bin/tsc - tsserver: bin/tsserver - checksum: 744dab471ae59659b1618be636ab56b9c0afbca801e0640c3cdfad0a894315c87d30a290b7063c6a3f1860bf47fe44d9188cb85e46b2bdadda7f207d67e6b4e1 - languageName: node - linkType: hard - "typescript@patch:typescript@^4.3.4#builtin": version: 4.3.4 resolution: "typescript@patch:typescript@npm%3A4.3.4#builtin::version=4.3.4&hash=ddfc1b" @@ -29354,6 +29314,26 @@ typescript@^4.3.4: languageName: node linkType: hard +"typescript@patch:typescript@~4.0.7#builtin": + version: 4.0.8 + resolution: "typescript@patch:typescript@npm%3A4.0.8#builtin::version=4.0.8&hash=ddfc1b" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: d12e73e6fb00f0ed42b10b42493d2eb907f31b8c6eb6cfb896be45d79d8fcbf46c9bc1e2aced88898f91191e3f49c5a13d3f86d01bb386ee29f502c7ccfe0b6a + languageName: node + linkType: hard + +typescript@~4.0.7: + version: 4.0.8 + resolution: "typescript@npm:4.0.8" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: f7789f9c531dffcf4c849a806627562ad6297f608aab85c0514d87a2ab3e060bcfadd63963735994796c45326eebeb479c004065af47e72ee44ba8c935fc9a54 + languageName: node + linkType: hard + "uglify-js@npm:^2.6.1": version: 2.8.29 resolution: "uglify-js@npm:2.8.29"