chore(rtk-query-inspector): add demo to monorepo

Other changes:

chore: increase isWideScreen polling interval to 300

refactor: add subscription as root node in QueryPreviewSubscriptions

package.json

@@ -70,7 +70,8 @@
     "packages/redux-devtools/examples/counter",
     "packages/redux-devtools/examples/todomvc",
     "packages/redux-devtools/examples/rtk-query-polling",
-    "packages/redux-devtools-slider-monitor/examples/todomvc"
+    "packages/redux-devtools-slider-monitor/examples/todomvc",
+    "packages/redux-devtools-rtk-query-inspector-monitor/demo"
   ],
   "engines": {
     "node": ">=10.13.0"

packages/redux-devtools-rtk-query-inspector-monitor/demo/package.json

@@ -25,7 +25,7 @@
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
     "@types/react-redux": "7.1.9",
-    "typescript": "4.1.3"
+    "typescript": "^3.9.7"
   },
   "eslintConfig": {
     "extends": [

packages/redux-devtools-rtk-query-inspector-monitor/demo/yarn.lock

@@ -13331,7 +13331,7 @@ resolve@^2.0.0-next.3:
     react-scripts: 4.0.2
     redux: ^4.0.5
     redux-devtools-themes: ^1.0.0
-    typescript: 4.1.3
+    typescript: 4.3.2
   languageName: unknown
   linkType: soft
 
@@ -14913,23 +14913,23 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-typescript@4.1.3:
+typescript@4.3.2:
-  version: 4.1.3
+  version: 4.3.2
-  resolution: "typescript@npm:4.1.3"
+  resolution: "typescript@npm:4.3.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 4f7ab1506ea22c7a1c313ec5b4285e93ce08d709ad6086d02d3096adb399ca339972ee56d1e578213c51dd0fb7b0fad50283c2d3c39642405644458ae29774f8
+  checksum: 21e1285402e32fd240f6ad3f97b6fea81b90d2591f412677d01b570a8bd93151d1e08460d58f43689fc758671a5baaebb16fa93d3c8260181612c8e619bd24f7
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@4.1.3#builtin<compat/typescript>":
+"typescript@patch:typescript@4.3.2#builtin<compat/typescript>":
-  version: 4.1.3
+  version: 4.3.2
-  resolution: "typescript@patch:typescript@npm%3A4.1.3#builtin<compat/typescript>::version=4.1.3&hash=ddfc1b"
+  resolution: "typescript@patch:typescript@npm%3A4.3.2#builtin<compat/typescript>::version=4.3.2&hash=ddfc1b"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 28f0f616bf6284543bb14d4bfe0e1a74963e5df0396ebccfc6a57bfd4ab70b4284e51b3a2045ed2466151a4a58c8a549edb886a2f7a2232cf08fcf73496592e6
+  checksum: 68d48dc86dacfeab59a22414ff061c976c46b679a9717a3a710051ea7bab779fd23f4edb856434da8155e8e8646c90b3912e342cc0010dfd15ed321a42cb0578
   languageName: node
   linkType: hard
 

packages/redux-devtools-rtk-query-inspector-monitor/package.json

@@ -29,7 +29,7 @@
   "scripts": {
     "build": "npm run build:types && npm run build:js",
     "build:types": "tsc --emitDeclarationOnly",
-    "start:dev": "tsc -p ./tsconfig.dev.json --watch",
+    "start": "tsc -p ./tsconfig.dev.json --watch",
     "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
     "clean": "rimraf lib",
     "lint": "eslint . --ext .ts,.tsx",
@@ -54,7 +54,8 @@
     "@reduxjs/toolkit": "^1.6.0",
     "@types/react": "^16.9.46",
     "react": "^16.13.1",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "typescript": "4.3.2"
   },
   "peerDependencies": {
     "@redux-devtools/core": "^3.7.0",

packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspector.tsx

@@ -93,7 +93,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
   componentDidMount(): void {
     this.updateSizeMode();
 
-    this.isWideIntervalRef = setInterval(this.updateSizeMode, 200);
+    this.isWideIntervalRef = setInterval(this.updateSizeMode, 300);
   }
 
   componentWillUnmount(): void {

packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewSubscriptions.tsx

@@ -2,9 +2,35 @@ import React, { ReactNode, PureComponent } from 'react';
 import { QueryPreviewTabProps } from '../types';
 import { TreeView } from './TreeView';
 
+export interface QueryPreviewSubscriptionsState {
+  data: { subscriptions: QueryPreviewTabProps['querySubscriptions'] };
+}
+
 export class QueryPreviewSubscriptions extends PureComponent<
-  QueryPreviewTabProps
+  QueryPreviewTabProps,
+  QueryPreviewSubscriptionsState
 > {
+  static getDerivedStateFromProps(
+    props: QueryPreviewTabProps,
+    state: QueryPreviewSubscriptionsState
+  ): Partial<QueryPreviewSubscriptionsState> | null {
+    if (props.querySubscriptions !== state.data.subscriptions) {
+      return {
+        data: { subscriptions: props.querySubscriptions },
+      };
+    }
+
+    return null;
+  }
+
+  constructor(props: QueryPreviewTabProps) {
+    super(props);
+
+    this.state = {
+      data: { subscriptions: props.querySubscriptions },
+    };
+  }
+
   render(): ReactNode {
     const {
       queryInfo,
@@ -22,7 +48,7 @@ export class QueryPreviewSubscriptions extends PureComponent<
     return (
       <>
         <TreeView
-          data={querySubscriptions}
+          data={this.state.data}
           isWideLayout={isWideLayout}
           base16Theme={base16Theme}
           styling={styling}

yarn.lock

@@ -4013,6 +4013,7 @@ __metadata:
     react-json-tree: ^0.15.0
     redux: ^4.0.5
     redux-devtools-themes: ^1.0.0
+    typescript: 4.3.2
   peerDependencies:
     "@redux-devtools/core": ^3.7.0
     "@reduxjs/toolkit": ^1.6.0
@@ -24392,6 +24393,19 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"react-dom@npm:^17.0.2":
+  version: 17.0.2
+  resolution: "react-dom@npm:17.0.2"
+  dependencies:
+    loose-envify: ^1.1.0
+    object-assign: ^4.1.1
+    scheduler: ^0.20.2
+  peerDependencies:
+    react: 17.0.2
+  checksum: 960a74ff6670766846a73097a599115963df1574833c59ca0c2fd909758ebe7a6214cd14f5e6aa63ce846d8f39fde7f3b80474ccfcfadc45dd7f3246364718c6
+  languageName: node
+  linkType: hard
+
 "react-draggable@npm:^4.4.3":
   version: 4.4.3
   resolution: "react-draggable@npm:4.4.3"
@@ -24632,7 +24646,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-redux@npm:^7.2.4":
+"react-redux@npm:^7.2.1, react-redux@npm:^7.2.4":
   version: 7.2.4
   resolution: "react-redux@npm:7.2.4"
   dependencies:
@@ -24877,7 +24891,17 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"read-cmd-shim@npm:^1.0.1, read-cmd-shim@npm:~1.0.1":
+"react@npm:^17.0.2":
+  version: 17.0.2
+  resolution: "react@npm:17.0.2"
+  dependencies:
+    loose-envify: ^1.1.0
+    object-assign: ^4.1.1
+  checksum: 7d0dfebafe1d297503157abb2e9acdb49852185deb8700c16f4a6faad87642f84903ab18cfc16f40b9a0dfe97540f99834982ee953e6d48b39c41608dc3e4b29
+  languageName: node
+  linkType: hard
+
+"read-cmd-shim@npm:^1.0.1":
   version: 1.0.5
   resolution: "read-cmd-shim@npm:1.0.5"
   dependencies:
@@ -26136,6 +26160,31 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"rtk-query-imspector-monitor-demo@workspace:packages/redux-devtools-rtk-query-inspector-monitor/demo":
+  version: 0.0.0-use.local
+  resolution: "rtk-query-imspector-monitor-demo@workspace:packages/redux-devtools-rtk-query-inspector-monitor/demo"
+  dependencies:
+    "@redux-devtools/core": ^3.9.0
+    "@redux-devtools/dock-monitor": ^1.4.0
+    "@reduxjs/toolkit": ^1.6.0
+    "@types/react": 17.0.0
+    "@types/react-dom": 17.0.0
+    "@types/react-redux": 7.1.9
+    cross-env: ^7.0.3
+    devui: ^1.0.0-8
+    lodash.debounce: ^4.0.8
+    react: ^17.0.2
+    react-base16-styling: ^0.8.0
+    react-dom: ^17.0.2
+    react-json-tree: ^0.15.0
+    react-redux: ^7.2.1
+    react-scripts: 4.0.2
+    redux: ^4.0.5
+    redux-devtools-themes: ^1.0.0
+    typescript: ^3.9.7
+  languageName: unknown
+  linkType: soft
+
 "rtk-query-polling@workspace:packages/redux-devtools/examples/rtk-query-polling":
   version: 0.0.0-use.local
   resolution: "rtk-query-polling@workspace:packages/redux-devtools/examples/rtk-query-polling"
@@ -26407,6 +26456,16 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.20.2":
+  version: 0.20.2
+  resolution: "scheduler@npm:0.20.2"
+  dependencies:
+    loose-envify: ^1.1.0
+    object-assign: ^4.1.1
+  checksum: 2ba121e53e8a438394598612ec9a8f465b39157042f912d2dd5956af643e0d45ec6937ae4eeb0a807d1945b209515263aed12fc3bca95c7a027ec2a54e76b399
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:2.7.0":
   version: 2.7.0
   resolution: "schema-utils@npm:2.7.0"
@@ -29226,6 +29285,26 @@ typescript@4.1.3:
   languageName: node
   linkType: hard
 
+typescript@4.3.2:
+  version: 4.3.2
+  resolution: "typescript@npm:4.3.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 21e1285402e32fd240f6ad3f97b6fea81b90d2591f412677d01b570a8bd93151d1e08460d58f43689fc758671a5baaebb16fa93d3c8260181612c8e619bd24f7
+  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"
@@ -29246,6 +29325,26 @@ typescript@^4.3.4:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@4.3.2#builtin<compat/typescript>":
+  version: 4.3.2
+  resolution: "typescript@patch:typescript@npm%3A4.3.2#builtin<compat/typescript>::version=4.3.2&hash=ddfc1b"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 68d48dc86dacfeab59a22414ff061c976c46b679a9717a3a710051ea7bab779fd23f4edb856434da8155e8e8646c90b3912e342cc0010dfd15ed321a42cb0578
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@^3.9.7#builtin<compat/typescript>":
+  version: 3.9.10
+  resolution: "typescript@patch:typescript@npm%3A3.9.10#builtin<compat/typescript>::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<compat/typescript>":
   version: 4.3.4
   resolution: "typescript@patch:typescript@npm%3A4.3.4#builtin<compat/typescript>::version=4.3.4&hash=ddfc1b"