chore(rtk-query): rename package to '@redux-devtools/rtk-query-monitor'

This commit is contained in:
FaberVitale 2021-06-21 11:49:27 +02:00
parent a87b5b6109
commit c986ca5fa0
63 changed files with 62 additions and 67 deletions

View File

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

View File

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

View File

@ -1,2 +0,0 @@
export { default } from './RtkQueryInspectorMonitor';
export { ExternalProps } from './types';

View File

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

View File

@ -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'
```

View File

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

View File

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

View File

@ -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>
);

View File

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

View File

Before

Width:  |  Height:  |  Size: 4.4 MiB

After

Width:  |  Height:  |  Size: 4.4 MiB

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,2 @@
export { default } from './RtkQueryMonitor';
export { ExternalProps } from './types';

View File

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

View File

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

View File

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

View File

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

View File

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