mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-25 19:13:56 +03:00
refactor(redux-devtools-inspector-monitor): rename package (#633)
This commit is contained in:
parent
ec75d3a4b6
commit
d1c222d847
|
@ -1,5 +1,5 @@
|
||||||
// Based on unikitty theme and on
|
// Based on unikitty theme and on
|
||||||
// https://github.com/alexkuz/redux-devtools-inspector/blob/master/src/themes/inspector.js
|
// https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector/src/themes/inspector.ts
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
scheme: 'default',
|
scheme: 'default',
|
||||||
|
|
|
@ -79,7 +79,7 @@
|
||||||
"redux": "^4.0.5",
|
"redux": "^4.0.5",
|
||||||
"redux-devtools": "^3.7.0",
|
"redux-devtools": "^3.7.0",
|
||||||
"redux-devtools-chart-monitor": "^1.7.2",
|
"redux-devtools-chart-monitor": "^1.7.2",
|
||||||
"redux-devtools-inspector": "^0.14.0",
|
"redux-devtools-inspector-monitor": "^0.14.0",
|
||||||
"redux-devtools-instrument": "^1.10.0",
|
"redux-devtools-instrument": "^1.10.0",
|
||||||
"redux-devtools-log-monitor": "^2.1.0",
|
"redux-devtools-log-monitor": "^2.1.0",
|
||||||
"redux-devtools-serialize": "^0.2.0",
|
"redux-devtools-serialize": "^0.2.0",
|
||||||
|
|
|
@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
|
||||||
import { bindActionCreators } from 'redux';
|
import { bindActionCreators } from 'redux';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { Tabs } from 'devui';
|
import { Tabs } from 'devui';
|
||||||
import StateTree from 'redux-devtools-inspector/lib/tabs/StateTab';
|
import StateTree from 'redux-devtools-inspector-monitor/lib/tabs/StateTab';
|
||||||
import ActionTree from 'redux-devtools-inspector/lib/tabs/ActionTab';
|
import ActionTree from 'redux-devtools-inspector-monitor/lib/tabs/ActionTab';
|
||||||
import DiffTree from 'redux-devtools-inspector/lib/tabs/DiffTab';
|
import DiffTree from 'redux-devtools-inspector-monitor/lib/tabs/DiffTab';
|
||||||
import { selectMonitorTab } from '../../../actions';
|
import { selectMonitorTab } from '../../../actions';
|
||||||
import RawTab from './RawTab';
|
import RawTab from './RawTab';
|
||||||
import ChartTab from './ChartTab';
|
import ChartTab from './ChartTab';
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import InspectorMonitor from 'redux-devtools-inspector';
|
import InspectorMonitor from 'redux-devtools-inspector-monitor';
|
||||||
import StackTraceTab from 'redux-devtools-trace-monitor';
|
import StackTraceTab from 'redux-devtools-trace-monitor';
|
||||||
import TestTab from 'redux-devtools-test-generator';
|
import TestTab from 'redux-devtools-test-generator';
|
||||||
import { DATA_TYPE_KEY } from '../../../constants/dataTypes';
|
import { DATA_TYPE_KEY } from '../../../constants/dataTypes';
|
||||||
|
|
|
@ -22,7 +22,7 @@ For example, you can use it together with [`LogMonitor`](https://github.com/redu
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from 'redux-devtools';
|
import { createDevTools } from 'redux-devtools';
|
||||||
import LogMonitor from 'redux-devtools-log-monitor';
|
import LogMonitor from 'redux-devtools-log-monitor';
|
||||||
import SliderMonitor from 'redux-slider-monitor';
|
import SliderMonitor from 'redux-devtools-slider-monitor';
|
||||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||||
|
|
||||||
export default createDevTools(
|
export default createDevTools(
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
# redux-devtools-inspector
|
# redux-devtools-inspector-monitor
|
||||||
|
|
||||||
[![npm version](https://badge.fury.io/js/redux-devtools-inspector.svg)](https://badge.fury.io/js/redux-devtools-inspector)
|
[![npm version](https://badge.fury.io/js/redux-devtools-inspector.svg)](https://badge.fury.io/js/redux-devtools-inspector)
|
||||||
|
|
||||||
|
@ -9,7 +9,7 @@ A state monitor for [Redux DevTools](https://github.com/reduxjs/redux-devtools)
|
||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install --save-dev redux-devtools-inspector
|
yarn add --dev redux-devtools-inspector-monitor
|
||||||
```
|
```
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
@ -21,7 +21,7 @@ You can use `Inspector` as the only monitor in your app:
|
||||||
```js
|
```js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from 'redux-devtools';
|
import { createDevTools } from 'redux-devtools';
|
||||||
import Inspector from 'redux-devtools-inspector';
|
import Inspector from 'redux-devtools-inspector-monitor';
|
||||||
|
|
||||||
export default createDevTools(<Inspector />);
|
export default createDevTools(<Inspector />);
|
||||||
```
|
```
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
@ -102,7 +102,9 @@ const themeOptions = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const ROOT =
|
const ROOT =
|
||||||
process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
|
process.env.NODE_ENV === 'production'
|
||||||
|
? '/redux-devtools-inspector-monitor/'
|
||||||
|
: '/';
|
||||||
|
|
||||||
function buildUrl(options: Options) {
|
function buildUrl(options: Options) {
|
||||||
return (
|
return (
|
|
@ -24,7 +24,9 @@ function getDebugSessionKey() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const ROOT =
|
const ROOT =
|
||||||
process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
|
process.env.NODE_ENV === 'production'
|
||||||
|
? '/redux-devtools-inspector-monitor/'
|
||||||
|
: '/';
|
||||||
|
|
||||||
const DevTools = getDevTools(window.location);
|
const DevTools = getDevTools(window.location);
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
{
|
{
|
||||||
"name": "redux-devtools-inspector",
|
"name": "redux-devtools-inspector-monitor",
|
||||||
"version": "0.14.0",
|
"version": "0.14.0",
|
||||||
"description": "Redux DevTools Diff Monitor",
|
"description": "Redux DevTools Diff Monitor",
|
||||||
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector",
|
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
"url": "https://github.com/reduxjs/redux-devtools/issues"
|
||||||
},
|
},
|
|
@ -1,7 +1,8 @@
|
||||||
import { Action } from 'redux';
|
import { Action } from 'redux';
|
||||||
import { DevtoolsInspectorProps } from './DevtoolsInspector';
|
import { DevtoolsInspectorProps } from './DevtoolsInspector';
|
||||||
|
|
||||||
const UPDATE_MONITOR_STATE = '@@redux-devtools-inspector/UPDATE_MONITOR_STATE';
|
const UPDATE_MONITOR_STATE =
|
||||||
|
'@@redux-devtools-inspector-monitor/UPDATE_MONITOR_STATE';
|
||||||
|
|
||||||
interface UpdateMonitorStateAction {
|
interface UpdateMonitorStateAction {
|
||||||
type: typeof UPDATE_MONITOR_STATE;
|
type: typeof UPDATE_MONITOR_STATE;
|
|
@ -1,4 +1,4 @@
|
||||||
## Redux Slider Monitor
|
## Redux DevTools Slider Monitor
|
||||||
|
|
||||||
[![npm version](https://img.shields.io/npm/v/redux-slider-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-slider-monitor)
|
[![npm version](https://img.shields.io/npm/v/redux-slider-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-slider-monitor)
|
||||||
|
|
||||||
|
@ -48,12 +48,9 @@ Pass the `keyboardEnabled` prop to use these shortcuts
|
||||||
You can do this:
|
You can do this:
|
||||||
|
|
||||||
```
|
```
|
||||||
git clone https://github.com/calesce/redux-slider-monitor.git
|
git clone https://github.com/reduxjs/redux-devtools.git
|
||||||
cd redux-slider-monitor
|
cd packages/redux-devtools-slider-monitor/examples/todomvc
|
||||||
npm install
|
yarn install
|
||||||
|
|
||||||
cd examples/todomvc
|
|
||||||
npm install
|
|
||||||
npm start
|
npm start
|
||||||
open http://localhost:3000
|
open http://localhost:3000
|
||||||
```
|
```
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/calesce/redux-slider-monitor.git"
|
"url": "https://github.com/reduxjs/redux-devtools.git"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "webpack-dev-server",
|
"start": "webpack-dev-server",
|
||||||
|
|
|
@ -10,14 +10,14 @@ npm install --save-dev redux-devtools-test-generator
|
||||||
|
|
||||||
If you use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev), it's already there, and no additional actions required.
|
If you use [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev), it's already there, and no additional actions required.
|
||||||
|
|
||||||
With [`redux-devtools`](https://github.com/reduxjs/redux-devtools) and [`redux-devtools-inspector`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector):
|
With [`redux-devtools`](https://github.com/reduxjs/redux-devtools) and [`redux-devtools-inspector-monitor`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector-monitor):
|
||||||
|
|
||||||
##### `containers/DevTools.js`
|
##### `containers/DevTools.js`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from 'redux-devtools';
|
import { createDevTools } from 'redux-devtools';
|
||||||
import Inspector from 'redux-devtools-inspector';
|
import InspectorMonitor from 'redux-devtools-inspector-monitor';
|
||||||
import TestGenerator from 'redux-devtools-test-generator';
|
import TestGenerator from 'redux-devtools-test-generator';
|
||||||
import mochaTemplate from 'redux-devtools-test-generator/lib/redux/mocha'; // If using default tests.
|
import mochaTemplate from 'redux-devtools-test-generator/lib/redux/mocha'; // If using default tests.
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { createDevTools } from 'redux-devtools';
|
import { createDevTools } from 'redux-devtools';
|
||||||
import DevtoolsInspector from 'redux-devtools-inspector';
|
import InspectorMonitor from 'redux-devtools-inspector-monitor';
|
||||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||||
import getOptions from './getOptions';
|
import getOptions from './getOptions';
|
||||||
import TestGenerator from '../../../src';
|
import TestGenerator from '../../../src';
|
||||||
|
@ -14,7 +14,7 @@ export const getDevTools = (location) =>
|
||||||
changePositionKey="ctrl-q"
|
changePositionKey="ctrl-q"
|
||||||
changeMonitorKey="ctrl-m"
|
changeMonitorKey="ctrl-m"
|
||||||
>
|
>
|
||||||
<DevtoolsInspector
|
<InspectorMonitor
|
||||||
theme={getOptions(location).theme}
|
theme={getOptions(location).theme}
|
||||||
shouldPersistState
|
shouldPersistState
|
||||||
invertTheme={!getOptions(location).dark}
|
invertTheme={!getOptions(location).dark}
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
"redux": "^4.0.5",
|
"redux": "^4.0.5",
|
||||||
"redux-devtools": "^3.7.0",
|
"redux-devtools": "^3.7.0",
|
||||||
"redux-devtools-dock-monitor": "^1.2.0",
|
"redux-devtools-dock-monitor": "^1.2.0",
|
||||||
"redux-devtools-inspector": "^0.14.0",
|
"redux-devtools-inspector-monitor": "^0.14.0",
|
||||||
"redux-logger": "^3.0.6",
|
"redux-logger": "^3.0.6",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"seamless-immutable": "^7.1.4",
|
"seamless-immutable": "^7.1.4",
|
||||||
|
|
|
@ -2,14 +2,14 @@
|
||||||
|
|
||||||
Submonitor for Redux DevTools inspector to show stack traces. Based on [`react-error-overlay`](https://github.com/facebook/create-react-app/tree/master/packages/react-error-overlay) and the contribution of [Mark Erikson](https://github.com/markerikson) in [the PR from `remotedev-app`](https://github.com/zalmoxisus/remotedev-app/pull/43/).
|
Submonitor for Redux DevTools inspector to show stack traces. Based on [`react-error-overlay`](https://github.com/facebook/create-react-app/tree/master/packages/react-error-overlay) and the contribution of [Mark Erikson](https://github.com/markerikson) in [the PR from `remotedev-app`](https://github.com/zalmoxisus/remotedev-app/pull/43/).
|
||||||
|
|
||||||
It's integrated in Redux DevTools browser extension. To use it separately with [`redux-devtools`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools) and [`redux-devtools-inspector`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector) according to [Walkthrough](https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md):
|
It's integrated in Redux DevTools browser extension. To use it separately with [`redux-devtools`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools) and [`redux-devtools-inspector-monitor`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector-monitor) according to [Walkthrough](https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md):
|
||||||
|
|
||||||
##### `containers/DevTools.js`
|
##### `containers/DevTools.js`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from 'redux-devtools';
|
import { createDevTools } from 'redux-devtools';
|
||||||
import Inspector from 'redux-devtools-inspector';
|
import InspectorMonitor from 'redux-devtools-inspector-monitor';
|
||||||
import TraceMonitor from 'redux-devtools-trace-monitor';
|
import TraceMonitor from 'redux-devtools-trace-monitor';
|
||||||
|
|
||||||
export default createDevTools(
|
export default createDevTools(
|
||||||
|
|
|
@ -91,11 +91,11 @@ Some crazy ideas for custom monitors:
|
||||||
|
|
||||||
In fact some of these are implemented already:
|
In fact some of these are implemented already:
|
||||||
|
|
||||||
#### [Slider Monitor](https://github.com/calesce/redux-slider-monitor)
|
#### [Slider Monitor](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-slider-monitor)
|
||||||
|
|
||||||
![](https://camo.githubusercontent.com/47a3f427c9d2e0c763b74e33417b3001fe8604b6/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f662e636c2e6c792f6974656d732f3149335032323243334e3252314d3279314b33622f53637265656e2532305265636f7264696e67253230323031352d31322d3232253230617425323030372e3230253230504d2e6769663f763d3162363236376537)
|
![](https://camo.githubusercontent.com/47a3f427c9d2e0c763b74e33417b3001fe8604b6/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f662e636c2e6c792f6974656d732f3149335032323243334e3252314d3279314b33622f53637265656e2532305265636f7264696e67253230323031352d31322d3232253230617425323030372e3230253230504d2e6769663f763d3162363236376537)
|
||||||
|
|
||||||
#### [Inspector](https://github.com/alexkuz/redux-devtools-inspector)
|
#### [Inspector Monitor](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector-monitor)
|
||||||
|
|
||||||
![](http://i.imgur.com/fYh8fk5.gif)
|
![](http://i.imgur.com/fYh8fk5.gif)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user