reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-07-27 00:19:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore(rtk-query): run prettier after prettier upgrade (55e2284)

Browse Source
This commit is contained in:
FaberVitale 2021-06-18 17:20:27 +02:00
parent 1e4b547366
commit 5eb9a588dd
26 changed files with 97 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/redux-devtools-rtk-query-inspector-monitor/.gitignore vendored
View File

@ -1 +0,0 @@
demo/src/generated-module/

1
packages/redux-devtools-rtk-query-inspector-monitor/README.md
View File

@ -13,7 +13,6 @@ Created by [FaberVitale](https://github.com/FaberVitale)
![RTK Query inspector monitor demo](./monitor-demo.gif) ![RTK Query inspector monitor demo](./monitor-demo.gif)
## Installation ## Installation
```bash ```bash

3
packages/redux-devtools-rtk-query-inspector-monitor/demo/README.md
View File

@ -2,10 +2,9 @@
## Running demo ## Running demo
### Working directory ### Working directory
Run the following commands from redux-devtools monorepo root directory.
Run the following commands from redux-devtools monorepo root directory.
### 1. Install depedencies ### 1. Install depedencies

BIN
packages/redux-devtools-rtk-query-inspector-monitor/demo/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

1
packages/redux-devtools-rtk-query-inspector-monitor/demo/public/index.html
View File

@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta <meta
name="description" name="description"

2
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/DevTools.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { createDevTools } from '@redux-devtools/core'; import { createDevTools } from '@redux-devtools/core';
import DockMonitor from '@redux-devtools/dock-monitor'; import DockMonitor from '@redux-devtools/dock-monitor';
import RtkQueryInspectorMonitor from './generated-module/RtkQueryInspectorMonitor.js'; import RtkQueryInspectorMonitor from './build/RtkQueryInspectorMonitor.js';
export default createDevTools( export default createDevTools(
<DockMonitor <DockMonitor

13
packages/redux-devtools-rtk-query-inspector-monitor/demo/src/Pokemon.tsx
View File

@ -16,15 +16,10 @@ const getRandomIntervalValue = () =>
export function Pokemon({ name }: { name: PokemonName }) { export function Pokemon({ name }: { name: PokemonName }) {
const [pollingInterval, setPollingInterval] = useState(60000); const [pollingInterval, setPollingInterval] = useState(60000);
const { const { data, error, isLoading, isFetching, refetch } =
data, useGetPokemonByNameQuery(name, {
error, pollingInterval,
isLoading, });
isFetching,
refetch,
} = useGetPokemonByNameQuery(name, {
pollingInterval,
});
return ( return (
<div <div

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

@ -120,13 +120,11 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends Component<
styleUtils: { styling }, styleUtils: { styling },
} = this.props; } = this.props;
const apiStates = this.selectors.selectApiStates(selectorsSource); const apiStates = this.selectors.selectApiStates(selectorsSource);
const allVisibleQueries = this.selectors.selectAllVisbileQueries( const allVisibleQueries =
selectorsSource this.selectors.selectAllVisbileQueries(selectorsSource);
);
const currentQueryInfo = this.selectors.selectorCurrentQueryInfo( const currentQueryInfo =
selectorsSource this.selectors.selectorCurrentQueryInfo(selectorsSource);
);
const currentRtkApi = getApiStateOf(currentQueryInfo, apiStates); const currentRtkApi = getApiStateOf(currentQueryInfo, apiStates);
const currentQuerySubscriptions = getQuerySubscriptionsOf( const currentQuerySubscriptions = getQuerySubscriptionsOf(

2
packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx
View File

@ -73,7 +73,7 @@ class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
} }
} }
export default (RtkQueryInspectorMonitor as unknown) as React.ComponentType< export default RtkQueryInspectorMonitor as unknown as React.ComponentType<
ExternalProps<unknown, Action<unknown>> ExternalProps<unknown, Action<unknown>>
> & { > & {
update( update(

4
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewHeader.tsx
View File

@ -9,9 +9,7 @@ export interface QueryPreviewHeaderProps {
selectedTab: QueryPreviewTabs; selectedTab: QueryPreviewTabs;
} }
export class QueryPreviewHeader extends React.Component< export class QueryPreviewHeader extends React.Component<QueryPreviewHeaderProps> {
QueryPreviewHeaderProps
> {
handleTabClick = (tab: QueryPreviewTabOption): void => { handleTabClick = (tab: QueryPreviewTabOption): void => {
if (this.props.selectedTab !== tab.value) { if (this.props.selectedTab !== tab.value) {
this.props.onTabChange(tab.value); this.props.onTabChange(tab.value);

9
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewInfo.tsx
View File

@ -55,13 +55,8 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewTabProps> {
); );
render(): ReactNode { render(): ReactNode {
const { const { queryInfo, isWideLayout, base16Theme, styling, invertTheme } =
queryInfo, this.props;
isWideLayout,
base16Theme,
styling,
invertTheme,
} = this.props;
const formattedQuery = this.selectFormattedQuery(queryInfo); const formattedQuery = this.selectFormattedQuery(queryInfo);

9
packages/redux-devtools-rtk-query-inspector-monitor/src/components/QueryPreviewTags.tsx
View File

@ -32,13 +32,8 @@ export class QueryPreviewTags extends PureComponent<
} }
render(): ReactNode { render(): ReactNode {
const { const { queryInfo, isWideLayout, base16Theme, styling, invertTheme } =
queryInfo, this.props;
isWideLayout,
base16Theme,
styling,
invertTheme,
} = this.props;
if (!queryInfo) { if (!queryInfo) {
return null; return null;

7
packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts
View File

@ -60,8 +60,5 @@ export function reducer<S, A extends Action<unknown>>(
return monitorSlice.reducer(state, action); return monitorSlice.reducer(state, action);
} }
export const { export const { selectQueryKey, changeQueryFormValues, selectedPreviewTab } =
selectQueryKey, monitorSlice.actions;
changeQueryFormValues,
selectedPreviewTab,
} = monitorSlice.actions;

7
packages/redux-devtools-rtk-query-inspector-monitor/src/utils/comparators.ts
View File

@ -86,10 +86,9 @@ function sortByApiReducerPath(
); );
} }
export const queryComparators: Readonly<Record< export const queryComparators: Readonly<
QueryComparators, Record<QueryComparators, Comparator<QueryInfo>>
Comparator<QueryInfo> > = {
>> = {
[QueryComparators.fulfilledTimeStamp]: sortQueryByFulfilled, [QueryComparators.fulfilledTimeStamp]: sortQueryByFulfilled,
[QueryComparators.status]: sortQueryByStatus, [QueryComparators.status]: sortQueryByStatus,
[QueryComparators.endpointName]: sortQueryByEndpointName, [QueryComparators.endpointName]: sortQueryByEndpointName,

7
packages/redux-devtools-rtk-query-inspector-monitor/src/utils/filters.ts
View File

@ -61,10 +61,9 @@ export const filterQueryOptions: SelectOption<QueryFilters>[] = [
{ label: 'endpoint', value: QueryFilters.endpointName }, { label: 'endpoint', value: QueryFilters.endpointName },
]; ];
export const queryListFilters: Readonly<Record< export const queryListFilters: Readonly<
QueryFilters, Record<QueryFilters, FilterList<QueryInfo>>
FilterList<QueryInfo> > = {
>> = {
[QueryFilters.queryKey]: filterByQueryKey, [QueryFilters.queryKey]: filterByQueryKey,
[QueryFilters.endpointName]: filterByEndpointName, [QueryFilters.endpointName]: filterByEndpointName,
[QueryFilters.reducerPath]: filterByReducerPath, [QueryFilters.reducerPath]: filterByReducerPath,

2
packages/redux-devtools-rtk-query-inspector-monitor/tsconfig.dev.json
View File

@ -1,7 +1,7 @@
{ {
"extends": "../../tsconfig.react.base.json", "extends": "../../tsconfig.react.base.json",
"compilerOptions": { "compilerOptions": {
"outDir": "./demo/src/generated-module", "outDir": "./demo/src/build",
"module": "ES2015", "module": "ES2015",
"strict": false "strict": false
}, },

37
packages/redux-devtools/examples/rtk-query-polling/public/index.html
View File

@ -1,17 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> name="viewport"
<meta name="theme-color" content="#000000"> content="width=device-width, initial-scale=1, shrink-to-fit=no"
<!-- />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@ -20,15 +22,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript> <noscript> You need to enable JavaScript to run this app. </noscript>
You need to enable JavaScript to run this app. <div id="root"></div>
</noscript> <!--
<div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@ -38,6 +38,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html> </html>

13
packages/redux-devtools/examples/rtk-query-polling/src/App.tsx
View File

@ -1,13 +1,13 @@
import * as React from 'react'; import * as React from 'react';
import { Pokemon } from './Pokemon' import { Pokemon } from './Pokemon';
import { PokemonName, POKEMON_NAMES } from './pokemon.data' import { PokemonName, POKEMON_NAMES } from './pokemon.data';
import './styles.css' import './styles.css';
const getRandomPokemonName = () => const getRandomPokemonName = () =>
POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)] POKEMON_NAMES[Math.floor(Math.random() * POKEMON_NAMES.length)];
export default function App() { export default function App() {
const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']) const [pokemon, setPokemon] = React.useState<PokemonName[]>(['bulbasaur']);
return ( return (
<div className="App"> <div className="App">
@ -28,6 +28,5 @@ export default function App() {
<Pokemon key={index} name={name} /> <Pokemon key={index} name={name} />
))} ))}
</div> </div>
) );
} }

23
packages/redux-devtools/examples/rtk-query-polling/src/Pokemon.tsx
View File

@ -8,25 +8,20 @@ const intervalOptions = [
{ label: '5s', value: 5000 }, { label: '5s', value: 5000 },
{ label: '10s', value: 10000 }, { label: '10s', value: 10000 },
{ label: '1m', value: 60000 }, { label: '1m', value: 60000 },
] ];
const getRandomIntervalValue = () => const getRandomIntervalValue = () =>
intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value intervalOptions[Math.floor(Math.random() * intervalOptions.length)].value;
export function Pokemon({ name }: { name: PokemonName }) { export function Pokemon({ name }: { name: PokemonName }) {
const [pollingInterval, setPollingInterval] = React.useState( const [pollingInterval, setPollingInterval] = React.useState(
getRandomIntervalValue() getRandomIntervalValue()
) );
const { const { data, error, isLoading, isFetching, refetch } =
data, useGetPokemonByNameQuery(name, {
error, pollingInterval,
isLoading, });
isFetching,
refetch,
} = useGetPokemonByNameQuery(name, {
pollingInterval,
})
return ( return (
<div <div
@ -75,5 +70,5 @@ export function Pokemon({ name }: { name: PokemonName }) {
'No Data' 'No Data'
)} )}
</div> </div>
) );
} }

14
packages/redux-devtools/examples/rtk-query-polling/src/index.tsx
View File

@ -1,14 +1,14 @@
import * as React from 'react'; import * as React from 'react';
import { render } from 'react-dom' import { render } from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import App from './App' import App from './App';
import { store } from './store' import { store } from './store';
const rootElement = document.getElementById('root') const rootElement = document.getElementById('root');
render( render(
<Provider store={store}> <Provider store={store}>
<App /> <App />
</Provider> , </Provider>,
rootElement rootElement
); );

4
packages/redux-devtools/examples/rtk-query-polling/src/pokemon.data.ts
View File

@ -150,6 +150,6 @@ export const POKEMON_NAMES = [
'dragonite', 'dragonite',
'mewtwo', 'mewtwo',
'mew', 'mew',
] as const ] as const;
export type PokemonName = typeof POKEMON_NAMES[number] export type PokemonName = typeof POKEMON_NAMES[number];

8
packages/redux-devtools/examples/rtk-query-polling/src/services/pokemon.ts
View File

@ -1,5 +1,5 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import type { PokemonName } from '../pokemon.data' import type { PokemonName } from '../pokemon.data';
export const pokemonApi = createApi({ export const pokemonApi = createApi({
reducerPath: 'pokemonApi', reducerPath: 'pokemonApi',
@ -9,7 +9,7 @@ export const pokemonApi = createApi({
query: (name: PokemonName) => `pokemon/${name}`, query: (name: PokemonName) => `pokemon/${name}`,
}), }),
}), }),
}) });
// Export hooks for usage in functional components // Export hooks for usage in functional components
export const { useGetPokemonByNameQuery } = pokemonApi export const { useGetPokemonByNameQuery } = pokemonApi;

11
packages/redux-devtools/examples/rtk-query-polling/src/store.ts
View File

@ -1,9 +1,10 @@
import { configureStore } from '@reduxjs/toolkit' import { configureStore } from '@reduxjs/toolkit';
import { pokemonApi } from './services/pokemon' import { pokemonApi } from './services/pokemon';
import devToolsEnhancer from 'remote-redux-devtools'; import devToolsEnhancer from 'remote-redux-devtools';
const remotePort = Number(process.env.REACT_APP_REMOTE_DEV_TOOLS_PORT) ?? 8000; const remotePort = Number(process.env.REACT_APP_REMOTE_DEV_TOOLS_PORT) ?? 8000;
const remoteHostname = process.env.REACT_APP_REMOTE_DEV_TOOLS_HOST ?? 'localhost'; const remoteHostname =
process.env.REACT_APP_REMOTE_DEV_TOOLS_HOST ?? 'localhost';
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
@ -13,5 +14,5 @@ export const store = configureStore({
// adding the api middleware enables caching, invalidation, polling and other features of `rtk-query` // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
middleware: (getDefaultMiddleware) => middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(pokemonApi.middleware), getDefaultMiddleware().concat(pokemonApi.middleware),
enhancers : [devToolsEnhancer({ port: remotePort, hostname: remoteHostname })] enhancers: [devToolsEnhancer({ port: remotePort, hostname: remoteHostname })],
}) });

10
packages/redux-devtools/examples/rtk-query-polling/tsconfig.json
View File

@ -1,14 +1,8 @@
{ {
"extends": "../../../../tsconfig.react.base.json", "extends": "../../../../tsconfig.react.base.json",
"include": [ "include": ["src"],
"src"
],
"compilerOptions": { "compilerOptions": {
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,

28
yarn.lock
View File

@ -29334,19 +29334,23 @@ typescript@~4.0.7:
languageName: node languageName: node
linkType: hard linkType: hard
"uglify-js@npm:^2.6.1": "typescript@patch:typescript@~4.0.7#builtin<compat/typescript>":
version: 2.8.29 version: 4.0.8
resolution: "uglify-js@npm:2.8.29" resolution: "typescript@patch:typescript@npm%3A4.0.8#builtin<compat/typescript>::version=4.0.8&hash=ddfc1b"
dependencies:
source-map: ~0.5.1
uglify-to-browserify: ~1.0.0
yargs: ~3.10.0
dependenciesMeta:
uglify-to-browserify:
optional: true
bin: bin:
uglifyjs: bin/uglifyjs tsc: bin/tsc
checksum: de5e5af14b788c9a0360fdfad6283b6ad89ecf3bf319924048628c87265252998d6f4bc8ca8bb7f163dd599cfe8262bca5b02396584fc120623a0225484309c6 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 languageName: node
linkType: hard linkType: hard