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 2020-12-21 15:46:28 -05:00 committed by GitHub
parent cf357931e3
commit a46b43209d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 102 additions and 102 deletions

View File

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

View File

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

View File

@ -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)
@ -48,13 +48,13 @@ 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>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<br>} |
| `style` | {<br>&nbsp;&nbsp;width: '100%', height: '100%', // i.e fullscreen for [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)<br>&nbsp;&nbsp;text: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0D`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hover: `theme.base06`<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;node: {<br>&nbsp;&nbsp;&nbsp;&nbsp;colors: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'default': `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsed: `theme.base0B`,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent: `theme.base0E`<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;radius: 7<br>&nbsp;&nbsp;}<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>&nbsp;&nbsp;disabled: false,<br>&nbsp;&nbsp;indentationSize: 2,<br>&nbsp;&nbsp;style: {<br>&nbsp;&nbsp;&nbsp;&nbsp;'background-color': `theme.base06`,<br>&nbsp;&nbsp;&nbsp;&nbsp;'opacity': '0.7',<br>&nbsp;&nbsp;&nbsp;&nbsp;'border-radius': '5px',<br>&nbsp;&nbsp;&nbsp;&nbsp;'padding': '5px'<br>&nbsp;&nbsp;}<br>}<br>[More info](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3tooltip#api). |

View File

@ -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": [

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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": [

View File

@ -102,7 +102,7 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
console.error(
'<DockMonitor> requires at least one monitor inside. ' +
'Why dont 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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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": [

View File

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

View File

@ -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": [

View File

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

View File

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

View File

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

View File

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

View File

@ -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 youre 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 youre 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:
![redux-devtools-filterable-log-monitor](https://cloud.githubusercontent.com/assets/29597/12440009/182bb31c-beec-11e5-8fd0-bdda48e646b2.gif)
#### [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)
![redux-devtools-chart-monitor](http://i.imgur.com/MSgvU6l.gif)

View File

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

View File

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

View File

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

View File

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