mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-27 00:19:55 +03:00
chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor'
This commit is contained in:
parent
a87b5b6109
commit
c986ca5fa0
|
@ -43,7 +43,7 @@
|
|||
"@redux-devtools/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-inspector-monitor": "^1.0.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",
|
||||
|
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import LogMonitor from '@redux-devtools/log-monitor';
|
||||
import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper';
|
||||
import InspectorWrapper from '../containers/monitors/InspectorWrapper';
|
||||
import RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor/lib/RtkQueryInspectorMonitor';
|
||||
import RtkQueryMonitor from '@redux-devtools/rtk-query-monitor';
|
||||
|
||||
export const monitors = [
|
||||
{ value: 'InspectorMonitor', name: 'Inspector' },
|
||||
|
@ -20,7 +20,7 @@ export default function getMonitor({ monitor }: { monitor: string }) {
|
|||
case 'ChartMonitor':
|
||||
return <ChartMonitorWrapper />;
|
||||
case 'RtkQueryMonitor':
|
||||
return <RtkQueryInspectorMonitor />;
|
||||
return <RtkQueryMonitor />;
|
||||
default:
|
||||
return <InspectorWrapper />;
|
||||
}
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
export { default } from './RtkQueryInspectorMonitor';
|
||||
export { ExternalProps } from './types';
|
|
@ -7,7 +7,7 @@ Created by [FaberVitale](https://github.com/FaberVitale), inspired by [react-que
|
|||
## 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-inspector-monitor/demo)
|
||||
- [demo source](https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor/demo)
|
||||
|
||||
## Preview
|
||||
|
||||
|
@ -18,27 +18,27 @@ Created by [FaberVitale](https://github.com/FaberVitale), inspired by [react-que
|
|||
### npm
|
||||
|
||||
```bash
|
||||
npm i @redux-devtools/rtk-query-inspector-monitor --save
|
||||
npm i @redux-devtools/rtk-query-monitor --save
|
||||
```
|
||||
|
||||
### yarn
|
||||
|
||||
```bash
|
||||
yarn add @redux-devtools/rtk-query-inspector-monitor
|
||||
yarn add @redux-devtools/rtk-query-monitor
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
You can use `RtkQueryInspectorMonitor` as the only monitor in your app:
|
||||
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 RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor';
|
||||
import RtkQueryrMonitor from '@redux-devtools/rtk-query-monitor';
|
||||
|
||||
export default createDevTools(<RtkQueryInspectorMonitor />);
|
||||
export default createDevTools(<RtkQueryrMonitor />);
|
||||
```
|
||||
|
||||
Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
|
|
@ -15,11 +15,11 @@ yarn
|
|||
### 2. Install demo dependencies
|
||||
|
||||
```bash
|
||||
yarn exec --cwd 'packages/redux-devtools-rtk-query-inspector-monitor/demo' yarn
|
||||
yarn exec --cwd 'packages/redux-devtools-rtk-query-monitor/demo' yarn
|
||||
```
|
||||
|
||||
### 3. Start demo
|
||||
|
||||
```bash
|
||||
yarn lerna run --stream start --scope '@redux-devtools/rtk-query-inspector-monitor'
|
||||
yarn lerna run --stream start --scope '@redux-devtools/rtk-query-monitor'
|
||||
```
|
|
@ -1,10 +1,15 @@
|
|||
{
|
||||
"name": "rtk-query-imspector-monitor-demo",
|
||||
"name": "rtk-query-monitor-demo",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts start",
|
||||
"build": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts build"
|
||||
},
|
||||
"author": {
|
||||
"name": "FaberVitale",
|
||||
"url": "https://github.com/FaberVitale"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "1.0.0",
|
||||
"@emotion/react": "^11.4.0",
|
|
@ -29,7 +29,7 @@ export function App() {
|
|||
<Link
|
||||
className="link"
|
||||
isExternal
|
||||
href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor/demo"
|
||||
href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor/demo"
|
||||
>
|
||||
demo source
|
||||
</Link>
|
||||
|
@ -38,9 +38,9 @@ export function App() {
|
|||
<Link
|
||||
className="link"
|
||||
isExternal
|
||||
href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor"
|
||||
href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor"
|
||||
>
|
||||
@redux-devtools/rtk-query-inspector-monitor source
|
||||
@redux-devtools/rtk-query-monitor source
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
import RtkQueryInspectorMonitor from './build/RtkQueryInspectorMonitor.js';
|
||||
import RtkQueryMonitor from './build/RtkQueryMonitor.js';
|
||||
|
||||
export default createDevTools(
|
||||
<DockMonitor
|
||||
|
@ -9,6 +9,6 @@ export default createDevTools(
|
|||
changePositionKey="ctrl-q"
|
||||
changeMonitorKey="ctrl-m"
|
||||
>
|
||||
<RtkQueryInspectorMonitor />
|
||||
<RtkQueryMonitor />
|
||||
</DockMonitor>
|
||||
);
|
|
@ -14985,9 +14985,9 @@ resolve@^2.0.0-next.3:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"rtk-query-imspector-monitor-demo@workspace:.":
|
||||
"rtk-query-monitor-demo@workspace:.":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "rtk-query-imspector-monitor-demo@workspace:."
|
||||
resolution: "rtk-query-monitor-demo@workspace:."
|
||||
dependencies:
|
||||
"@chakra-ui/react": 1.0.0
|
||||
"@emotion/react": ^11.4.0
|
Before Width: | Height: | Size: 4.4 MiB After Width: | Height: | Size: 4.4 MiB |
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@redux-devtools/rtk-query-inspector-monitor",
|
||||
"name": "@redux-devtools/rtk-query-monitor",
|
||||
"version": "1.0.0",
|
||||
"description": "rtk-query monitor for Redux DevTools",
|
||||
"keywords": [
|
||||
|
@ -10,7 +10,7 @@
|
|||
"redux-toolkit",
|
||||
"rtk-query"
|
||||
],
|
||||
"homepage": "https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-inspector-monitor",
|
||||
"homepage": "https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor",
|
||||
"bugs": {
|
||||
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||
},
|
|
@ -7,7 +7,7 @@ import {
|
|||
QueryFormValues,
|
||||
QueryInfo,
|
||||
QueryPreviewTabs,
|
||||
RtkQueryInspectorMonitorState,
|
||||
RtkQueryMonitorState,
|
||||
StyleUtils,
|
||||
} from './types';
|
||||
import { createInspectorSelectors, computeSelectorSource } from './selectors';
|
||||
|
@ -23,12 +23,12 @@ import { getApiStateOf, getQuerySubscriptionsOf } from './utils/rtk-query';
|
|||
|
||||
type SelectorsSource<S> = {
|
||||
userState: S | null;
|
||||
monitorState: RtkQueryInspectorMonitorState;
|
||||
monitorState: RtkQueryMonitorState;
|
||||
};
|
||||
|
||||
export interface RtkQueryInspectorProps<S, A extends Action<unknown>>
|
||||
extends LiftedState<S, A, RtkQueryInspectorMonitorState> {
|
||||
dispatch: Dispatch<LiftedAction<S, A, RtkQueryInspectorMonitorState>>;
|
||||
extends LiftedState<S, A, RtkQueryMonitorState> {
|
||||
dispatch: Dispatch<LiftedAction<S, A, RtkQueryMonitorState>>;
|
||||
theme: keyof typeof themes | Base16Theme;
|
||||
invertTheme: boolean;
|
||||
state: S | null;
|
|
@ -5,8 +5,8 @@ import RtkQueryInspector from './RtkQueryInspector';
|
|||
import { reducer } from './reducers';
|
||||
import {
|
||||
ExternalProps,
|
||||
RtkQueryInspectorMonitorProps,
|
||||
RtkQueryInspectorMonitorState,
|
||||
RtkQueryMonitorProps,
|
||||
RtkQueryMonitorState,
|
||||
StyleUtils,
|
||||
} from './types';
|
||||
import {
|
||||
|
@ -19,13 +19,13 @@ interface DefaultProps {
|
|||
invertTheme: boolean;
|
||||
}
|
||||
|
||||
export interface RtkQueryInspectorComponentState {
|
||||
export interface RtkQueryComponentState {
|
||||
readonly styleUtils: StyleUtils;
|
||||
}
|
||||
|
||||
class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
|
||||
RtkQueryInspectorMonitorProps<S, A>,
|
||||
RtkQueryInspectorComponentState
|
||||
class RtkQueryMonitor<S, A extends Action<unknown>> extends Component<
|
||||
RtkQueryMonitorProps<S, A>,
|
||||
RtkQueryComponentState
|
||||
> {
|
||||
static update = reducer;
|
||||
|
||||
|
@ -46,7 +46,7 @@ class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
|
|||
invertTheme: false,
|
||||
};
|
||||
|
||||
constructor(props: RtkQueryInspectorMonitorProps<S, A>) {
|
||||
constructor(props: RtkQueryMonitorProps<S, A>) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
|
@ -73,13 +73,13 @@ class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
|
|||
}
|
||||
}
|
||||
|
||||
export default RtkQueryInspectorMonitor as unknown as React.ComponentType<
|
||||
export default RtkQueryMonitor as unknown as React.ComponentType<
|
||||
ExternalProps<unknown, Action<unknown>>
|
||||
> & {
|
||||
update(
|
||||
monitorProps: ExternalProps<unknown, Action<unknown>>,
|
||||
state: RtkQueryInspectorMonitorState | undefined,
|
||||
state: RtkQueryMonitorState | undefined,
|
||||
action: Action
|
||||
): RtkQueryInspectorMonitorState;
|
||||
): RtkQueryMonitorState;
|
||||
defaultProps: DefaultProps;
|
||||
};
|
|
@ -1,11 +1,11 @@
|
|||
import React, { PureComponent, ReactNode } from 'react';
|
||||
import { StyleUtilsContext } from '../styles/createStylingFromTheme';
|
||||
import { QueryInfo, RtkQueryInspectorMonitorState } from '../types';
|
||||
import { QueryInfo, RtkQueryMonitorState } from '../types';
|
||||
import { isQuerySelected } from '../utils/rtk-query';
|
||||
|
||||
export interface QueryListProps {
|
||||
queryInfos: QueryInfo[];
|
||||
selectedQueryKey: RtkQueryInspectorMonitorState['selectedQueryKey'];
|
||||
selectedQueryKey: RtkQueryMonitorState['selectedQueryKey'];
|
||||
onSelectQuery: (query: QueryInfo) => void;
|
||||
}
|
||||
|
2
packages/redux-devtools-rtk-query-monitor/src/index.ts
Normal file
2
packages/redux-devtools-rtk-query-monitor/src/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export { default } from './RtkQueryMonitor';
|
||||
export { ExternalProps } from './types';
|
|
@ -3,14 +3,14 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
|||
import { RtkQueryInspectorProps } from './RtkQueryInspector';
|
||||
import {
|
||||
QueryInfo,
|
||||
RtkQueryInspectorMonitorState,
|
||||
RtkQueryMonitorState,
|
||||
QueryFormValues,
|
||||
QueryPreviewTabs,
|
||||
} from './types';
|
||||
import { QueryComparators } from './utils/comparators';
|
||||
import { QueryFilters } from './utils/filters';
|
||||
|
||||
const initialState: RtkQueryInspectorMonitorState = {
|
||||
const initialState: RtkQueryMonitorState = {
|
||||
queryForm: {
|
||||
values: {
|
||||
queryComparator: QueryComparators.fulfilledTimeStamp,
|
||||
|
@ -28,7 +28,7 @@ const monitorSlice = createSlice({
|
|||
* `@@` prefix is mandatory.
|
||||
* @see lifedAction @ `packages/redux-devtools-app/src/actions/index.ts`
|
||||
*/
|
||||
name: '@@rtk-query-inspector-monitor',
|
||||
name: '@@rtk-query-monitor',
|
||||
initialState,
|
||||
reducers: {
|
||||
changeQueryFormValues(
|
||||
|
@ -54,9 +54,9 @@ const monitorSlice = createSlice({
|
|||
|
||||
export function reducer<S, A extends Action<unknown>>(
|
||||
props: RtkQueryInspectorProps<S, A>,
|
||||
state: RtkQueryInspectorMonitorState | undefined,
|
||||
state: RtkQueryMonitorState | undefined,
|
||||
action: AnyAction
|
||||
): RtkQueryInspectorMonitorState {
|
||||
): RtkQueryMonitorState {
|
||||
return monitorSlice.reducer(state, action);
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ import {
|
|||
import rgba from 'hex-rgba';
|
||||
import * as reduxThemes from 'redux-devtools-themes';
|
||||
import { Action } from 'redux';
|
||||
import { RtkQueryInspectorMonitorProps, StyleUtils } from '../types';
|
||||
import { RtkQueryMonitorProps, StyleUtils } from '../types';
|
||||
import { createContext } from 'react';
|
||||
|
||||
jss.setup(preset());
|
||||
|
@ -366,7 +366,7 @@ export const createStylingFromTheme = createStyling(getDefaultThemeStyling, {
|
|||
});
|
||||
|
||||
export function createThemeState<S, A extends Action<unknown>>(
|
||||
props: RtkQueryInspectorMonitorProps<S, A>
|
||||
props: RtkQueryMonitorProps<S, A>
|
||||
): StyleUtils {
|
||||
const base16Theme =
|
||||
getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox;
|
|
@ -20,7 +20,7 @@ export interface QueryFormValues {
|
|||
searchValue: string;
|
||||
queryFilter: QueryFilters;
|
||||
}
|
||||
export interface RtkQueryInspectorMonitorState {
|
||||
export interface RtkQueryMonitorState {
|
||||
readonly queryForm: {
|
||||
values: QueryFormValues;
|
||||
};
|
||||
|
@ -28,11 +28,9 @@ export interface RtkQueryInspectorMonitorState {
|
|||
readonly selectedPreviewTab: QueryPreviewTabs;
|
||||
}
|
||||
|
||||
export interface RtkQueryInspectorMonitorProps<S, A extends Action<unknown>>
|
||||
extends LiftedState<S, A, RtkQueryInspectorMonitorState> {
|
||||
dispatch: Dispatch<
|
||||
Action | LiftedAction<S, A, RtkQueryInspectorMonitorState>
|
||||
>;
|
||||
export interface RtkQueryMonitorProps<S, A extends Action<unknown>>
|
||||
extends LiftedState<S, A, RtkQueryMonitorState> {
|
||||
dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
|
||||
theme: keyof typeof themes | Base16Theme;
|
||||
invertTheme?: boolean;
|
||||
}
|
||||
|
@ -54,16 +52,8 @@ export type RtkQueryApiConfig = RtkQueryApiState['config'];
|
|||
export type RtkQueryProvided = RtkQueryApiState['provided'];
|
||||
|
||||
export interface ExternalProps<S, A extends Action<unknown>> {
|
||||
dispatch: Dispatch<
|
||||
Action | LiftedAction<S, A, RtkQueryInspectorMonitorState>
|
||||
>;
|
||||
|
||||
preserveScrollTop: boolean;
|
||||
select: (state: S) => unknown;
|
||||
dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
|
||||
theme: keyof typeof themes | Base16Theme;
|
||||
expandActionRoot: boolean;
|
||||
expandStateRoot: boolean;
|
||||
markStateDiff: boolean;
|
||||
hideMainButtons?: boolean;
|
||||
invertTheme: boolean;
|
||||
}
|
||||
|
@ -92,7 +82,7 @@ export interface SelectOption<T = string> {
|
|||
|
||||
export interface SelectorsSource<S> {
|
||||
userState: S | null;
|
||||
monitorState: RtkQueryInspectorMonitorState;
|
||||
monitorState: RtkQueryMonitorState;
|
||||
}
|
||||
|
||||
export interface StyleUtils {
|
|
@ -2,7 +2,7 @@ import { isPlainObject } from '@reduxjs/toolkit';
|
|||
import { QueryStatus } from '@reduxjs/toolkit/query';
|
||||
import {
|
||||
QueryInfo,
|
||||
RtkQueryInspectorMonitorState,
|
||||
RtkQueryMonitorState,
|
||||
RtkQueryApiState,
|
||||
RTKQuerySubscribers,
|
||||
RtkQueryTag,
|
||||
|
@ -206,7 +206,7 @@ export function flipComparator<T>(comparator: Comparator<T>): Comparator<T> {
|
|||
}
|
||||
|
||||
export function isQuerySelected(
|
||||
selectedQueryKey: RtkQueryInspectorMonitorState['selectedQueryKey'],
|
||||
selectedQueryKey: RtkQueryMonitorState['selectedQueryKey'],
|
||||
queryInfo: QueryInfo
|
||||
): boolean {
|
||||
return (
|
|
@ -3377,7 +3377,7 @@ __metadata:
|
|||
"@redux-devtools/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-inspector-monitor": ^1.0.0
|
||||
"@redux-devtools/rtk-query-monitor": ^1.0.0
|
||||
"@redux-devtools/slider-monitor": ^2.0.0-8
|
||||
"@reduxjs/toolkit": ^1.6.0
|
||||
"@rjsf/core": ^2.5.1
|
||||
|
@ -3680,9 +3680,9 @@ __metadata:
|
|||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@redux-devtools/rtk-query-inspector-monitor@^1.0.0, @redux-devtools/rtk-query-inspector-monitor@workspace:packages/redux-devtools-rtk-query-inspector-monitor":
|
||||
"@redux-devtools/rtk-query-monitor@^1.0.0, @redux-devtools/rtk-query-monitor@workspace:packages/redux-devtools-rtk-query-monitor":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@redux-devtools/rtk-query-inspector-monitor@workspace:packages/redux-devtools-rtk-query-inspector-monitor"
|
||||
resolution: "@redux-devtools/rtk-query-monitor@workspace:packages/redux-devtools-rtk-query-monitor"
|
||||
dependencies:
|
||||
"@redux-devtools/core": ^3.9.0
|
||||
"@redux-devtools/dock-monitor": ^1.4.0
|
||||
|
|
Loading…
Reference in New Issue
Block a user