mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-21 17:16:42 +03:00
chore(*): make more packages scoped (#692)
* dock-monitor * log-monitor * serialize * slider-monitor * inspector-monitor * chart-monitor * test-tab * trace-tab * Fix
This commit is contained in:
Nathan Bierema
GitHub
parent
cf357931e3
commit
a46b43209d
|
|
@ -1,5 +1,5 @@
|
|||
// Based on unikitty theme and on
|
||||
// https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector/src/themes/inspector.ts
|
||||
// https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-inspector-monitor/src/themes/inspector.ts
|
||||
|
||||
export default {
|
||||
scheme: 'default',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
A pure function to convert a map into a tree structure. Created by [@romseguy](https://github.com/romseguy) and merged from [`romseguy/map2tree`](https://github.com/romseguy/map2tree).
|
||||
|
||||
The following opinions must be taken into account since the primary use case of this library is [redux-devtools-chart-monitor](https://github.com/romseguy/redux-devtools-chart-monitor):
|
||||
The following opinions must be taken into account since the primary use case of this library is [redux-devtools-chart-monitor](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor):
|
||||
|
||||
- Objects and arrays deeply nested within collections are not converted into a tree structure. See `someNestedObject` and `someNestedArray` in the [output](https://github.com/romseguy/map2tree#output) below, or the [corresponding test](https://github.com/romseguy/map2tree/blob/master/test/map2tree.js#L140).
|
||||
- Provides support for [Immutable.js](https://github.com/facebook/immutable-js) data structures (only List and Map though).
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ It shows a real-time view of the store aka the current state of the app.
|
|||
### Installation
|
||||
|
||||
```
|
||||
yarn add redux-devtools-chart-monitor
|
||||
yarn add @redux-devtools/chart-monitor
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
|
@ -27,15 +27,15 @@ You can use `ChartMonitor` as the only monitor in your app:
|
|||
```js
|
||||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import ChartMonitor from 'redux-devtools-chart-monitor';
|
||||
import ChartMonitor from '@redux-devtools/chart-monitor';
|
||||
|
||||
export default createDevTools(<ChartMonitor />);
|
||||
```
|
||||
|
||||
Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
|
||||
|
||||
Alternatively, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable.
|
||||
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach.
|
||||
Alternatively, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
|
||||
Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
|
||||
|
||||
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
|
||||
|
||||
|
|
@ -47,16 +47,16 @@ Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-doc
|
|||
|
||||
You can read the React component [propTypes](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-chart-monitor/src/Chart.js#L11) in addition to the details below:
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `defaultIsVisible` | By default, set to `true`. |
|
||||
| `transitionDuration` | By default, set to `750`, in milliseconds. |
|
||||
| `heightBetweenNodesCoeff` | By default, set to `1`. |
|
||||
| `widthBetweenNodesCoeff` | By default, set to `1.3`. |
|
||||
| `isSorted` | By default, set to `false`. |
|
||||
| `style` | {<br> width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)<br> text: {<br> colors: {<br> 'default': `theme.base0D`,<br> hover: `theme.base06`<br> }<br> },<br> node: {<br> colors: {<br> 'default': `theme.base0B`,<br> collapsed: `theme.base0B`,<br> parent: `theme.base0E`<br> },<br> radius: 7<br> }<br>} |
|
||||
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
|
||||
| `tooltipOptions` | {<br> disabled: false,<br> indentationSize: 2,<br> style: {<br> 'background-color': `theme.base06`,<br> 'opacity': '0.7',<br> 'border-radius': '5px',<br> 'padding': '5px'<br> }<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |
|
||||
| Name | Description |
|
||||
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `defaultIsVisible` | By default, set to `true`. |
|
||||
| `transitionDuration` | By default, set to `750`, in milliseconds. |
|
||||
| `heightBetweenNodesCoeff` | By default, set to `1`. |
|
||||
| `widthBetweenNodesCoeff` | By default, set to `1.3`. |
|
||||
| `isSorted` | By default, set to `false`. |
|
||||
| `style` | {<br> width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br> text: {<br> colors: {<br> 'default': `theme.base0D`,<br> hover: `theme.base06`<br> }<br> },<br> node: {<br> colors: {<br> 'default': `theme.base0B`,<br> collapsed: `theme.base0B`,<br> parent: `theme.base0E`<br> },<br> radius: 7<br> }<br>} |
|
||||
| `onClickText` | Function called with a reference to the clicked node as first argument when clicking on the text next to a node. |
|
||||
| `tooltipOptions` | {<br> disabled: false,<br> indentationSize: 2,<br> style: {<br> 'background-color': `theme.base06`,<br> 'opacity': '0.7',<br> 'border-radius': '5px',<br> 'padding': '5px'<br> }<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |
|
||||
|
||||
#### Redux DevTools props
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-chart-monitor",
|
||||
"name": "@redux-devtools/chart-monitor",
|
||||
"version": "1.7.2",
|
||||
"description": "Chart monitor for Redux DevTools",
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -37,7 +37,14 @@
|
|||
"prepublishOnly": "npm run clean && npm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@redux-devtools/chart-monitor": "^1.7.2",
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/inspector-monitor": "^0.14.0",
|
||||
"@redux-devtools/inspector-monitor-test-tab": "^0.6.2",
|
||||
"@redux-devtools/inspector-monitor-trace-tab": "^0.1.3",
|
||||
"@redux-devtools/log-monitor": "^2.1.0",
|
||||
"@redux-devtools/serialize": "^0.2.0",
|
||||
"@redux-devtools/slider-monitor": "^2.0.0-5",
|
||||
"d3-state-visualizer": "^1.3.4",
|
||||
"devui": "^1.0.0-6",
|
||||
"get-params": "^0.1.2",
|
||||
|
|
@ -53,13 +60,6 @@
|
|||
"react-is": "^16.13.1",
|
||||
"react-redux": "^7.2.1",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-chart-monitor": "^1.7.2",
|
||||
"redux-devtools-inspector-monitor": "^0.14.0",
|
||||
"redux-devtools-inspector-monitor-test-tab": "^0.6.2",
|
||||
"redux-devtools-inspector-monitor-trace-tab": "^0.1.3",
|
||||
"redux-devtools-log-monitor": "^2.1.0",
|
||||
"redux-devtools-serialize": "^0.2.0",
|
||||
"redux-devtools-slider-monitor": "^2.0.0-5",
|
||||
"redux-persist": "^4.10.2",
|
||||
"socketcluster-client": "^14.3.1",
|
||||
"styled-components": "^5.1.1"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import { connect, ResolveThunks } from 'react-redux';
|
||||
import ChartMonitor from 'redux-devtools-chart-monitor';
|
||||
import ChartMonitor from '@redux-devtools/chart-monitor';
|
||||
import { NodeWithId } from 'd3-state-visualizer';
|
||||
import { selectMonitorWithState } from '../../actions';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { Component } from 'react';
|
||||
import { connect, ResolveThunks } from 'react-redux';
|
||||
import { Tab, Tabs } from 'devui';
|
||||
import { TabComponentProps } from 'redux-devtools-inspector-monitor';
|
||||
import { TabComponentProps } from '@redux-devtools/inspector-monitor';
|
||||
import { Action } from 'redux';
|
||||
import StateTree from 'redux-devtools-inspector-monitor/lib/tabs/StateTab';
|
||||
import ActionTree from 'redux-devtools-inspector-monitor/lib/tabs/ActionTab';
|
||||
import DiffTree from 'redux-devtools-inspector-monitor/lib/tabs/DiffTab';
|
||||
import StateTree from '@redux-devtools/inspector-monitor/lib/tabs/StateTab';
|
||||
import ActionTree from '@redux-devtools/inspector-monitor/lib/tabs/ActionTab';
|
||||
import DiffTree from '@redux-devtools/inspector-monitor/lib/tabs/DiffTab';
|
||||
import { selectMonitorTab } from '../../../actions';
|
||||
import RawTab from './RawTab';
|
||||
import ChartTab from './ChartTab';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import InspectorMonitor, { Tab } from 'redux-devtools-inspector-monitor';
|
||||
import TraceTab from 'redux-devtools-inspector-monitor-trace-tab';
|
||||
import TestTab from 'redux-devtools-inspector-monitor-test-tab';
|
||||
import InspectorMonitor, { Tab } from '@redux-devtools/inspector-monitor';
|
||||
import TraceTab from '@redux-devtools/inspector-monitor-trace-tab';
|
||||
import TestTab from '@redux-devtools/inspector-monitor-test-tab';
|
||||
import { DATA_TYPE_KEY } from '../../../constants/dataTypes';
|
||||
import SubTabs from './SubTabs';
|
||||
import { Action } from 'redux';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
import SliderMonitor from 'redux-devtools-slider-monitor';
|
||||
import SliderMonitor from '@redux-devtools/slider-monitor';
|
||||
import { LiftedAction } from '@redux-devtools/core';
|
||||
import { Action } from 'redux';
|
||||
import { ThemeFromProvider } from 'devui';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import LogMonitor from 'redux-devtools-log-monitor';
|
||||
import LogMonitor from '@redux-devtools/log-monitor';
|
||||
import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper';
|
||||
import InspectorWrapper from '../containers/monitors/InspectorWrapper';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import mapValues from 'lodash/mapValues';
|
||||
import jsan from 'jsan';
|
||||
import { immutableSerialize } from 'redux-devtools-serialize';
|
||||
import { immutableSerialize } from '@redux-devtools/serialize';
|
||||
import { Action } from 'redux';
|
||||
import Immutable from 'immutable';
|
||||
import { State } from '../app/reducers/instances';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import getParams from 'get-params';
|
||||
import jsan from 'jsan';
|
||||
import { nanoid } from 'nanoid/non-secure';
|
||||
import { immutableSerialize } from 'redux-devtools-serialize';
|
||||
import { immutableSerialize } from '@redux-devtools/serialize';
|
||||
import Immutable from 'immutable';
|
||||
import { Action } from 'redux';
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ Powered by [React Dock](https://github.com/alexkuz/react-dock).
|
|||
### Installation
|
||||
|
||||
```
|
||||
yarn add redux-devtools-dock-monitor
|
||||
yarn add @redux-devtools/dock-monitor
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
|
@ -21,9 +21,9 @@ For example, you can use it together with [`LogMonitor`](https://github.com/redu
|
|||
```js
|
||||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import LogMonitor from 'redux-devtools-log-monitor';
|
||||
import SliderMonitor from 'redux-devtools-slider-monitor';
|
||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||
import LogMonitor from '@redux-devtools/log-monitor';
|
||||
import SliderMonitor from '@redux-devtools/slider-monitor';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
|
||||
export default createDevTools(
|
||||
<DockMonitor
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-dock-monitor",
|
||||
"name": "@redux-devtools/dock-monitor",
|
||||
"version": "1.2.0",
|
||||
"description": "A resizable and movable dock for Redux DevTools monitors",
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
|
|||
console.error(
|
||||
'<DockMonitor> requires at least one monitor inside. ' +
|
||||
'Why don’t you try <LogMonitor>? You can get it at ' +
|
||||
'https://github.com/gaearon/redux-devtools-log-monitor.'
|
||||
'https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor.'
|
||||
);
|
||||
} else if (childrenCount > 1 && !props.changeMonitorKey) {
|
||||
// eslint-disable-next-line no-console
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
### Installation
|
||||
|
||||
```
|
||||
yarn add redux-devtools-inspector-monitor-test-tab
|
||||
yarn add @redux-devtools/inspector-monitor-test-tab
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
|
@ -17,9 +17,9 @@ With [`redux-devtools`](https://github.com/reduxjs/redux-devtools) and [`redux-d
|
|||
```js
|
||||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import InspectorMonitor from 'redux-devtools-inspector-monitor';
|
||||
import TestGenerator from 'redux-devtools-inspector-monitor-test-tab';
|
||||
import mochaTemplate from 'redux-devtools-inspector-monitor-test-tab/lib/redux/mocha'; // If using default tests.
|
||||
import InspectorMonitor from '@redux-devtools/inspector-monitor';
|
||||
import TestGenerator from '@redux-devtools/inspector-monitor-test-tab';
|
||||
import mochaTemplate from '@redux-devtools/inspector-monitor-test-tab/lib/redux/mocha'; // If using default tests.
|
||||
|
||||
const testComponent = (props) => (
|
||||
<TestGenerator
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import { createDevTools } from '@redux-devtools/core';
|
|||
import InspectorMonitor, {
|
||||
base16Themes,
|
||||
Tab,
|
||||
} from 'redux-devtools-inspector-monitor';
|
||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||
} from '@redux-devtools/inspector-monitor';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
import { Location } from 'history';
|
||||
import getOptions from './getOptions';
|
||||
import TestGenerator from '../../../src';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-inspector-monitor-test-tab",
|
||||
"name": "@redux-devtools/inspector-monitor-test-tab",
|
||||
"version": "0.6.2",
|
||||
"description": "Generate tests for redux devtools.",
|
||||
"keywords": [
|
||||
|
|
@ -55,6 +55,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||
"@redux-devtools/inspector-monitor": "^0.14.0",
|
||||
"@types/es6template": "^1.0.0",
|
||||
"@types/history": "^4.7.7",
|
||||
"@types/jsan": "^3.1.0",
|
||||
|
|
@ -77,15 +79,13 @@
|
|||
"react-redux": "^7.2.1",
|
||||
"react-router": "^5.2.0",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-dock-monitor": "^1.2.0",
|
||||
"redux-devtools-inspector-monitor": "^0.14.0",
|
||||
"redux-logger": "^3.0.6",
|
||||
"seamless-immutable": "^7.1.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/inspector-monitor": "^0.14.0",
|
||||
"@types/react": "^16.3.18",
|
||||
"react": "^16.3.0",
|
||||
"redux": "^3.4.0 || ^4.0.0",
|
||||
"redux-devtools-inspector-monitor": "^0.14.0"
|
||||
"redux": "^3.4.0 || ^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import jsan from 'jsan';
|
|||
import diff, { Event } from 'simple-diff';
|
||||
import es6template from 'es6template';
|
||||
import { Editor } from 'devui';
|
||||
import { TabComponentProps } from 'redux-devtools-inspector-monitor';
|
||||
import { TabComponentProps } from '@redux-devtools/inspector-monitor';
|
||||
import { Action } from 'redux';
|
||||
import { AssertionLocals, DispatcherLocals, WrapLocals } from './types';
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { Action } from 'redux';
|
|||
import {
|
||||
DevtoolsInspectorState,
|
||||
TabComponentProps,
|
||||
} from 'redux-devtools-inspector-monitor';
|
||||
} from '@redux-devtools/inspector-monitor';
|
||||
import { formSchema, uiSchema, defaultFormData } from './templateForm';
|
||||
import TestGenerator from './TestGenerator';
|
||||
import jestTemplate from './redux/jest/template';
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ It's integrated in Redux DevTools browser extension. To use it separately with [
|
|||
```js
|
||||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import InspectorMonitor from 'redux-devtools-inspector-monitor';
|
||||
import TraceTab from 'redux-devtools-inspector-monitor-trace-tab';
|
||||
import InspectorMonitor from '@redux-devtools/inspector-monitor';
|
||||
import TraceTab from '@redux-devtools/inspector-monitor-trace-tab';
|
||||
|
||||
export default createDevTools(
|
||||
<Inspector
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-inspector-monitor-trace-tab",
|
||||
"name": "@redux-devtools/inspector-monitor-trace-tab",
|
||||
"version": "0.1.3",
|
||||
"description": "Submonitor for Redux DevTools inspector to show stack traces.",
|
||||
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor-trace-tab",
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/inspector-monitor": "^0.14.0",
|
||||
"@types/babel__code-frame": "^7.0.2",
|
||||
"@types/enzyme": "^3.10.5",
|
||||
"@types/enzyme-adapter-react-16": "^1.0.6",
|
||||
|
|
@ -49,13 +50,12 @@
|
|||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-test-renderer": "^16.13.1",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-inspector-monitor": "^0.14.0"
|
||||
"redux": "^4.0.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@redux-devtools/inspector-monitor": "^0.14.0",
|
||||
"@types/react": "^16.3.18",
|
||||
"react": "^16.3.0",
|
||||
"redux": "^3.4.0 || ^4.0.0",
|
||||
"redux-devtools-inspector-monitor": "^0.14.0"
|
||||
"redux": "^3.4.0 || ^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { getStackFrames } from './react-error-overlay/utils/getStackFrames';
|
|||
import StackTrace from './react-error-overlay/containers/StackTrace';
|
||||
import openFile from './openFile';
|
||||
import { Action } from 'redux';
|
||||
import { TabComponentProps } from 'redux-devtools-inspector-monitor';
|
||||
import { TabComponentProps } from '@redux-devtools/inspector-monitor';
|
||||
import StackFrame from './react-error-overlay/utils/stack-frame';
|
||||
import { ErrorLocation } from './react-error-overlay/utils/parseCompileError';
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ A state monitor for [Redux DevTools](https://github.com/reduxjs/redux-devtools)
|
|||
### Installation
|
||||
|
||||
```
|
||||
yarn add redux-devtools-inspector-monitor
|
||||
yarn add @redux-devtools/inspector-monitor
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
|
@ -21,15 +21,15 @@ You can use `Inspector` as the only monitor in your app:
|
|||
```js
|
||||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import Inspector from 'redux-devtools-inspector-monitor';
|
||||
import Inspector from '@redux-devtools/inspector-monitor';
|
||||
|
||||
export default createDevTools(<Inspector />);
|
||||
```
|
||||
|
||||
Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
|
||||
|
||||
Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable.
|
||||
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach.
|
||||
Alternative, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
|
||||
Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
|
||||
|
||||
[Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
import { Location } from 'history';
|
||||
import DevtoolsInspector from '../../../src/DevtoolsInspector';
|
||||
import getOptions from './getOptions';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-inspector-monitor",
|
||||
"name": "@redux-devtools/inspector-monitor",
|
||||
"version": "0.14.0",
|
||||
"description": "Redux DevTools Diff Monitor",
|
||||
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector-monitor",
|
||||
|
|
@ -54,6 +54,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||
"@types/dateformat": "^3.0.1",
|
||||
"@types/hex-rgba": "^1.0.0",
|
||||
"@types/history": "^4.7.7",
|
||||
|
|
@ -73,7 +74,6 @@
|
|||
"react-redux": "^7.2.1",
|
||||
"react-router": "^5.2.0",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-dock-monitor": "^1.2.0",
|
||||
"redux-logger": "^3.0.6",
|
||||
"seamless-immutable": "^7.1.4"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default function configureStore(initialState) {
|
|||
`instrument(monitorReducer, [options])`
|
||||
|
||||
- arguments
|
||||
- **monitorReducer** _function_ called whenever an action is dispatched ([see the example of a monitor reducer](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/src/reducers.js#L13)).
|
||||
- **monitorReducer** _function_ called whenever an action is dispatched ([see the example of a monitor reducer](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-log-monitor/src/reducers.ts#L34)).
|
||||
- **options** _object_
|
||||
- **maxAge** _number_ or _function_(currentLiftedAction, previousLiftedState) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once `maxAge` is reached. Can be generated dynamically with a function getting current action as argument.
|
||||
- **shouldCatchErrors** _boolean_ - if specified as `true`, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ It shows a log of states and actions, and lets you change their history. Created
|
|||
### Installation
|
||||
|
||||
```
|
||||
npm install --save-dev redux-devtools-log-monitor
|
||||
yarn add @redux-devtools/log-monitor
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
|
@ -20,15 +20,15 @@ You can use `LogMonitor` as the only monitor in your app:
|
|||
```js
|
||||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import LogMonitor from 'redux-devtools-log-monitor';
|
||||
import LogMonitor from '@redux-devtools/log-monitor';
|
||||
|
||||
export default createDevTools(<LogMonitor />);
|
||||
```
|
||||
|
||||
Then you can render `<DevTools>` to any place inside app or even into a separate popup window.
|
||||
|
||||
Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable.
|
||||
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach.
|
||||
Alternative, you can use it together with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to make it dockable.
|
||||
Consult the [`DockMonitor` README](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) for details of this approach.
|
||||
|
||||
[Read how to start using Redux DevTools.](https://github.com/reduxjs/redux-devtools)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-log-monitor",
|
||||
"name": "@redux-devtools/log-monitor",
|
||||
"version": "2.1.0",
|
||||
"description": "The default tree view monitor for Redux DevTools",
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
### Installation
|
||||
|
||||
```
|
||||
yarn add redux-devtools-serialize
|
||||
yarn add @redux-devtools/serialize
|
||||
```
|
||||
|
||||
### Usage with ImmutableJS data structures
|
||||
|
|
@ -12,7 +12,7 @@ Just pass the Immutable library to our class:
|
|||
|
||||
```js
|
||||
import Immutable from 'immutable';
|
||||
import Serialize from 'redux-devtools-serialize';
|
||||
import Serialize from '@redux-devtools/serialize';
|
||||
const { stringify, parse } = Serialize.immutable(Immutable);
|
||||
|
||||
const data = Immutable.fromJS({ foo: 'bar', baz: { qux: 42 } });
|
||||
|
|
@ -32,7 +32,7 @@ To parse a Record class back, you need to specify a reference to it:
|
|||
|
||||
```js
|
||||
import Immutable from 'immutable';
|
||||
import Serialize from 'redux-devtools-serialize';
|
||||
import Serialize from '@redux-devtools/serialize';
|
||||
|
||||
const ABRecord = Immutable.Record({ a: 1, b: 2 });
|
||||
const { stringify, parse } = Serialize.immutable(Immutable, [ABRecord]);
|
||||
|
|
@ -52,7 +52,7 @@ You can pass custom replacer and reviver functions to Serialize:
|
|||
|
||||
```js
|
||||
import Immutable from 'immutable';
|
||||
import Serialize from 'redux-devtools-serialize';
|
||||
import Serialize from '@redux-devtools/serialize';
|
||||
|
||||
function customReplacer(key, value, defaultReplacer) {
|
||||
if (value === 1) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-serialize",
|
||||
"name": "@redux-devtools/serialize",
|
||||
"version": "0.2.0",
|
||||
"description": "Serialize unserializable data and parse it back.",
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@ It uses a slider based on [react-slider](https://github.com/mpowaga/react-slider
|
|||
|
||||
### Installation
|
||||
|
||||
`yarn add redux-devtools-slider-monitor`
|
||||
`yarn add @redux-devtools/slider-monitor`
|
||||
|
||||
### Recommended Usage
|
||||
|
||||
Use with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)
|
||||
Use with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)
|
||||
|
||||
```javascript
|
||||
<DockMonitor
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||
import SliderMonitor from 'redux-devtools-slider-monitor';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
import SliderMonitor from '@redux-devtools/slider-monitor';
|
||||
|
||||
export default createDevTools(
|
||||
<DockMonitor
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||
"@redux-devtools/log-monitor": "^2.1.0",
|
||||
"@redux-devtools/slider-monitor": "^2.0.0-5",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-hot-loader": "^4.12.21",
|
||||
"react-redux": "^7.2.1",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-dock-monitor": "^1.2.0",
|
||||
"redux-devtools-log-monitor": "^2.1.0",
|
||||
"redux-devtools-slider-monitor": "^2.0.0-5",
|
||||
"todomvc-app-css": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "redux-devtools-slider-monitor",
|
||||
"name": "@redux-devtools/slider-monitor",
|
||||
"version": "2.0.0-5",
|
||||
"description": "A custom monitor for replaying Redux actions that works similarly to a video player",
|
||||
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-slider-monitor",
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@ A live-editing time travel environment for [Redux](https://github.com/reactjs/re
|
|||
|
||||
### Overview
|
||||
|
||||
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](../../docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
|
||||
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](../../docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
|
||||
|
||||
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/README.md#features).
|
||||
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor#features).
|
||||
|
||||
### Browser Extension
|
||||
|
||||
|
|
@ -78,7 +78,7 @@ Also try opening `http://localhost:3000/?debug_session=123`, click around, and t
|
|||
|
||||
### Custom Monitors
|
||||
|
||||
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) are just examples of what is possible.
|
||||
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) are just examples of what is possible.
|
||||
|
||||
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ Some crazy ideas for custom monitors:
|
|||
- A slider that lets you jump between computed states just by dragging it
|
||||
- An in-app layer that shows the last N states right in the app (e.g. for animation)
|
||||
- A time machine like interface where the last N states of your app reside on different Z layers
|
||||
- Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) `propTypes` to see what you can do.
|
||||
- Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) `propTypes` to see what you can do.
|
||||
|
||||
In fact some of these are implemented already:
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ In fact some of these are implemented already:
|
|||
|
||||
|
||||
|
||||
#### [Chart Monitor](https://github.com/romseguy/redux-devtools-chart-monitor)
|
||||
#### [Chart Monitor](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-chart-monitor)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,14 +20,14 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||
"@redux-devtools/log-monitor": "^2.1.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-hot-loader": "^4.12.21",
|
||||
"react-redux": "^7.2.1",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-dock-monitor": "^1.2.0",
|
||||
"redux-devtools-log-monitor": "^2.1.0",
|
||||
"redux-thunk": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import LogMonitor from 'redux-devtools-log-monitor';
|
||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||
import LogMonitor from '@redux-devtools/log-monitor';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
|
||||
export default createDevTools(
|
||||
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { createDevTools } from '@redux-devtools/core';
|
||||
import LogMonitor from 'redux-devtools-log-monitor';
|
||||
import DockMonitor from 'redux-devtools-dock-monitor';
|
||||
import LogMonitor from '@redux-devtools/log-monitor';
|
||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||
|
||||
export default createDevTools(
|
||||
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@redux-devtools/core": "^3.7.0",
|
||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||
"@redux-devtools/log-monitor": "^2.1.0",
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.13.1",
|
||||
|
|
@ -39,8 +41,6 @@
|
|||
"react-hot-loader": "^4.12.21",
|
||||
"react-redux": "^7.2.1",
|
||||
"redux": "^4.0.5",
|
||||
"redux-devtools-dock-monitor": "^1.2.0",
|
||||
"redux-devtools-log-monitor": "^2.1.0",
|
||||
"todomvc-app-css": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user