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
This commit is contained in:
FaberVitale 2021-06-14 19:44:21 +02:00
parent 20f4f5432e
commit 825a468ff1
7 changed files with 145 additions and 18 deletions

View File

@ -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"

View File

@ -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": [

View File

@ -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:
version: 4.1.3
resolution: "typescript@npm:4.1.3"
typescript@4.3.2:
version: 4.3.2
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>":
version: 4.1.3
resolution: "typescript@patch:typescript@npm%3A4.1.3#builtin<compat/typescript>::version=4.1.3&hash=ddfc1b"
"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: 28f0f616bf6284543bb14d4bfe0e1a74963e5df0396ebccfc6a57bfd4ab70b4284e51b3a2045ed2466151a4a58c8a549edb886a2f7a2232cf08fcf73496592e6
checksum: 68d48dc86dacfeab59a22414ff061c976c46b679a9717a3a710051ea7bab779fd23f4edb856434da8155e8e8646c90b3912e342cc0010dfd15ed321a42cb0578
languageName: node
linkType: hard

View File

@ -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",

View File

@ -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 {

View File

@ -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}

103
yarn.lock
View File

@ -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"