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

Work

Browse Source
This commit is contained in:
Nathan Bierema 2021-06-19 10:40:16 -04:00
parent ecb4916b74
commit afebd152f2
19 changed files with 79 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extension/src/app/api/importState.js
View File

@ -1,6 +1,6 @@
import mapValues from 'lodash/mapValues';
import jsan from 'jsan';
import seralizeImmutable from 'remotedev-serialize/immutable/serialize';
import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize';
function deprecate(param) {
// eslint-disable-next-line no-console

4
extension/src/app/api/index.js
View File

@ -1,7 +1,7 @@
import jsan from 'jsan';
import throttle from 'lodash/throttle';
import seralizeImmutable from 'remotedev-serialize/immutable/serialize';
import { getActionsArray } from 'remotedev-utils';
import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize';
import { getActionsArray } from '@redux-devtools/utils';
import { getLocalFilter, isFiltered } from './filters';
import importState from './importState';
import generateId from './generateInstanceId';

194
extension/src/app/containers/App.js
View File

@ -1,33 +1,12 @@
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import SliderMonitor from 'remotedev-slider/lib/Slider';
import { liftedDispatch, getReport } from 'remotedev-app/lib/actions';
import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
import styles from 'remotedev-app/lib/styles';
import enhance from 'remotedev-app/lib/hoc';
import DevTools from 'remotedev-app/lib/containers/DevTools';
import Dispatcher from 'remotedev-app/lib/containers/monitors/Dispatcher';
import MonitorSelector from 'remotedev-app/lib/components/MonitorSelector';
import Notification from 'remotedev-app/lib/components/Notification';
import Instances from 'remotedev-app/lib/components/Instances';
import Button from 'remotedev-app/lib/components/Button';
import RecordButton from 'remotedev-app/lib/components/buttons/RecordButton';
import LockButton from 'remotedev-app/lib/components/buttons/LockButton';
import DispatcherButton from 'remotedev-app/lib/components/buttons/DispatcherButton';
import SliderButton from 'remotedev-app/lib/components/buttons/SliderButton';
import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton';
import ExportButton from 'remotedev-app/lib/components/buttons/ExportButton';
import PrintButton from 'remotedev-app/lib/components/buttons/PrintButton';
import {
MdSettings,
MdBorderLeft,
MdBorderRight,
MdBorderBottom,
} from 'react-icons/md';
import { GoRadioTower, GoPin } from 'react-icons/go';
import { Container, Notification } from 'devui';
import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
import Settings from '@redux-devtools/app/lib/components/Settings';
import Actions from '@redux-devtools/app/lib/containers/Actions';
import Header from '@redux-devtools/app/lib/components/Header';
import { clearNotification } from '@redux-devtools/app/lib/actions';
@enhance
class App extends Component {
openWindow = (position) => {
chrome.runtime.sendMessage({ type: 'OPEN', position });
@ -41,15 +20,7 @@ class App extends Component {
};
render() {
const {
monitor,
position,
togglePersist,
dispatcherIsOpen,
sliderIsOpen,
options,
liftedState,
} = this.props;
const { position, options, section, theme, notification } = this.props;
if (!position && (!options || !options.features)) {
return (
<div style={{ padding: '20px', width: '100%', textAlign: 'center' }}>
@ -64,139 +35,46 @@ class App extends Component {
</div>
);
}
const features = options.features || {};
let body;
switch (section) {
case 'Settings':
body = <Settings />;
break;
default:
body = <Actions />;
}
return (
<div style={styles.container}>
<div style={styles.buttonBar}>
<MonitorSelector selected={monitor} />
<Instances selected={this.props.selected} />
</div>
<DevTools
monitor={monitor}
liftedState={liftedState}
monitorState={this.props.monitorState}
dispatch={this.props.liftedDispatch}
lib={options.lib || options.explicitLib}
/>
<Notification />
{sliderIsOpen && options.connectionId && options.features.jump && (
<SliderMonitor
monitor="SliderMonitor"
liftedState={liftedState}
dispatch={this.props.liftedDispatch}
getReport={this.props.getReport}
reports={this.props.reports}
showActions={monitor === 'ChartMonitor'}
style={{ padding: '15px 5px' }}
fillColor="rgb(120, 144, 156)"
/>
<Container themeData={theme}>
<Header section={section} />
{body}
{notification && (
<Notification
type={notification.type}
onClose={this.props.clearNotification}
>
{notification.message}
</Notification>
)}
{dispatcherIsOpen &&
options.connectionId &&
options.features.dispatch && <Dispatcher options={options} />}
<div style={styles.buttonBar}>
{!window.isElectron && position !== '#left' && (
<Button
Icon={MdBorderLeft}
onClick={() => {
this.openWindow('left');
}}
/>
)}
{!window.isElectron && position !== '#right' && (
<Button
Icon={MdBorderRight}
onClick={() => {
this.openWindow('right');
}}
/>
)}
{!window.isElectron && position !== '#bottom' && (
<Button
Icon={MdBorderBottom}
onClick={() => {
this.openWindow('bottom');
}}
/>
)}
{features.pause && <RecordButton paused={liftedState.isPaused} />}
{features.lock && <LockButton locked={liftedState.isLocked} />}
{features.persist && (
<Button Icon={GoPin} onClick={togglePersist}>
Persist
</Button>
)}
{features.dispatch && (
<DispatcherButton dispatcherIsOpen={dispatcherIsOpen} />
)}
{features.jump && <SliderButton isOpen={sliderIsOpen} />}
{features.import && <ImportButton />}
{features.export && <ExportButton />}
{position &&
(position !== '#popup' ||
navigator.userAgent.indexOf('Firefox') !== -1) && <PrintButton />}
{!window.isElectron && (
<Button
Icon={GoRadioTower}
onClick={() => {
this.openWindow('remote');
}}
>
Remote
</Button>
)}
{(chrome.runtime.openOptionsPage ||
navigator.userAgent.indexOf('Firefox') !== -1) && (
<Button Icon={MdSettings} onClick={this.openOptionsPage}>
Settings
</Button>
)}
</div>
</div>
</Container>
);
}
}
App.propTypes = {
bgStore: PropTypes.object,
liftedDispatch: PropTypes.func.isRequired,
getReport: PropTypes.func.isRequired,
togglePersist: PropTypes.func.isRequired,
selected: PropTypes.string,
liftedState: PropTypes.object.isRequired,
monitorState: PropTypes.object,
options: PropTypes.object.isRequired,
monitor: PropTypes.string,
position: PropTypes.string,
reports: PropTypes.array.isRequired,
dispatcherIsOpen: PropTypes.bool,
sliderIsOpen: PropTypes.bool,
};
function mapStateToProps(state) {
const instances = state.instances;
const id = getActiveInstance(instances);
return {
selected: instances.selected,
liftedState: instances.states[id],
monitorState: state.monitor.monitorState,
options: instances.options[id],
monitor: state.monitor.selected,
dispatcherIsOpen: state.monitor.dispatcherIsOpen,
sliderIsOpen: state.monitor.sliderIsOpen,
reports: state.reports.data,
shouldSync: state.instances.sync,
section: state.section,
theme: state.theme,
notification: state.notification,
};
}
function mapDispatchToProps(dispatch) {
return {
liftedDispatch: bindActionCreators(liftedDispatch, dispatch),
getReport: bindActionCreators(getReport, dispatch),
togglePersist: () => {
dispatch({ type: 'TOGGLE_PERSIST' });
},
};
}
const actionCreators = {
clearNotification,
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
export default connect(mapStateToProps, actionCreators)(App);

6
extension/src/app/middlewares/api.js
View File

@ -1,10 +1,10 @@
import stringifyJSON from 'remotedev-app/lib/utils/stringifyJSON';
import stringifyJSON from '@redux-devtools/app/lib/utils/stringifyJSON';
import {
UPDATE_STATE,
REMOVE_INSTANCE,
LIFTED_ACTION,
} from 'remotedev-app/lib/constants/actionTypes';
import { nonReduxDispatch } from 'remotedev-app/lib/utils/monitorActions';
} from '@redux-devtools/app/lib/constants/actionTypes';
import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions';
import syncOptions from '../../browser/extension/options/syncOptions';
import openDevToolsWindow from '../../browser/extension/background/openWindow';
import { getReport } from '../../browser/extension/background/logging';

2
extension/src/app/middlewares/instanceSelector.js
View File

@ -1,7 +1,7 @@
import {
SELECT_INSTANCE,
UPDATE_STATE,
} from 'remotedev-app/lib/constants/actionTypes';
} from '@redux-devtools/app/lib/constants/actionTypes';
function selectInstance(tabId, store, next) {
const instances = store.getState().instances;

4
extension/src/app/middlewares/panelSync.js
View File

@ -2,8 +2,8 @@ import {
LIFTED_ACTION,
UPDATE_STATE,
SELECT_INSTANCE,
} from 'remotedev-app/lib/constants/actionTypes';
import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
} from '@redux-devtools/app/lib/constants/actionTypes';
import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
function panelDispatcher(bgConnection) {
let autoselected = false;

4
extension/src/app/middlewares/windowSync.js
View File

@ -1,8 +1,8 @@
import {
UPDATE_STATE,
LIFTED_ACTION,
} from 'remotedev-app/lib/constants/actionTypes';
import { getActiveInstance } from 'remotedev-app/lib/reducers/instances';
} from '@redux-devtools/app/lib/constants/actionTypes';
import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
const syncStores = (baseStore) => (store) => (next) => (action) => {
if (action.type === UPDATE_STATE) {

2
extension/src/app/reducers/background/index.js
View File

@ -1,5 +1,5 @@
import { combineReducers } from 'redux';
import instances from 'remotedev-app/lib/reducers/instances';
import instances from '@redux-devtools/app/lib/reducers/instances';
import persistStates from './persistStates';
const rootReducer = combineReducers({

14
extension/src/app/reducers/panel/index.js
View File

@ -1,16 +1,18 @@
import { combineReducers } from 'redux';
import instances from 'remotedev-app/lib/reducers/instances';
import monitor from 'remotedev-app/lib/reducers/monitor';
import notification from 'remotedev-app/lib/reducers/notification';
import test from 'remotedev-app/lib/reducers/test';
import reports from 'remotedev-app/lib/reducers/reports';
import instances from '@redux-devtools/app/lib/reducers/instances';
import monitor from '@redux-devtools/app/lib/reducers/monitor';
import notification from '@redux-devtools/app/lib/reducers/notification';
import reports from '@redux-devtools/app/lib/reducers/reports';
import section from '@redux-devtools/app/lib/reducers/section';
import theme from '@redux-devtools/app/lib/reducers/theme';
const rootReducer = combineReducers({
instances,
monitor,
test,
reports,
notification,
section,
theme,
});
export default rootReducer;

14
extension/src/app/reducers/window/index.js
View File

@ -1,18 +1,20 @@
import { combineReducers } from 'redux';
import instances from './instances';
import monitor from 'remotedev-app/lib/reducers/monitor';
import notification from 'remotedev-app/lib/reducers/notification';
import socket from 'remotedev-app/lib/reducers/socket';
import reports from 'remotedev-app/lib/reducers/reports';
import test from 'remotedev-app/lib/reducers/test';
import monitor from '@redux-devtools/app/lib/reducers/monitor';
import notification from '@redux-devtools/app/lib/reducers/notification';
import socket from '@redux-devtools/app/lib/reducers/socket';
import reports from '@redux-devtools/app/lib/reducers/reports';
import section from '@redux-devtools/app/lib/reducers/section';
import theme from '@redux-devtools/app/lib/reducers/theme';
const rootReducer = combineReducers({
instances,
monitor,
test,
socket,
reports,
notification,
section,
theme,
});
export default rootReducer;

4
extension/src/app/reducers/window/instances.js
View File

@ -1,12 +1,12 @@
import {
initialState,
dispatchAction,
} from 'remotedev-app/lib/reducers/instances';
} from '@redux-devtools/app/lib/reducers/instances';
import {
UPDATE_STATE,
SELECT_INSTANCE,
LIFTED_ACTION,
} from 'remotedev-app/lib/constants/actionTypes';
} from '@redux-devtools/app/lib/constants/actionTypes';
export default function instances(state = initialState, action) {
switch (action.type) {

4
extension/src/app/stores/enhancerStore.js
View File

@ -1,6 +1,6 @@
import { compose } from 'redux';
import instrument from 'redux-devtools-instrument';
import persistState from 'redux-devtools/lib/persistState';
import instrument from '@redux-devtools/instrument';
import persistState from '@redux-devtools/core/lib/persistState';
export function getUrlParam(key) {
const matches = window.location.href.match(

9
extension/src/app/stores/panelStore.js
View File

@ -1,14 +1,9 @@
import { createStore, applyMiddleware } from 'redux';
import persist from 'remotedev-app/lib/middlewares/persist';
import exportState from 'remotedev-app/lib/middlewares/exportState';
import exportState from '@redux-devtools/app/lib/middlewares/exportState';
import panelDispatcher from '../middlewares/panelSync';
import rootReducer from '../reducers/panel';
export default function configureStore(position, bgConnection, preloadedState) {
const enhancer = applyMiddleware(
exportState,
panelDispatcher(bgConnection),
persist(position)
);
const enhancer = applyMiddleware(exportState, panelDispatcher(bgConnection));
return createStore(rootReducer, preloadedState, enhancer);
}

14
extension/src/app/stores/windowStore.js
View File

@ -1,20 +1,14 @@
import { createStore, compose, applyMiddleware } from 'redux';
import persist from 'remotedev-app/lib/middlewares/persist';
import exportState from 'remotedev-app/lib/middlewares/exportState';
import api from 'remotedev-app/lib/middlewares/api';
import { CONNECT_REQUEST } from 'remotedev-app/lib/constants/socketActionTypes';
import exportState from '@redux-devtools/app/lib/middlewares/exportState';
import api from '@redux-devtools/app/lib/middlewares/api';
import { CONNECT_REQUEST } from '@redux-devtools/app/lib/constants/socketActionTypes';
import syncStores from '../middlewares/windowSync';
import instanceSelector from '../middlewares/instanceSelector';
import rootReducer from '../reducers/window';
export default function configureStore(baseStore, position, preloadedState) {
let enhancer;
const middlewares = [
exportState,
api,
syncStores(baseStore),
persist(position),
];
const middlewares = [exportState, api, syncStores(baseStore)];
if (!position || position === '#popup') {
// select current tab instance for devPanel and pageAction
middlewares.push(instanceSelector);

2
extension/src/browser/extension/background/logging.js
View File

@ -1,4 +1,4 @@
import { LIFTED_ACTION } from 'remotedev-app/lib/constants/actionTypes';
import { LIFTED_ACTION } from '@redux-devtools/app/lib/constants/actionTypes';
export function getReport(reportId, tabId, instanceId) {
chrome.storage.local.get(['s:hostname', 's:port', 's:secure'], (options) => {

3
extension/src/browser/extension/devpanel/index.js
View File

@ -1,8 +1,7 @@
import 'remotedev-monitor-components/lib/presets';
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { Provider } from 'react-redux';
import { REMOVE_INSTANCE } from 'remotedev-app/lib/constants/actionTypes';
import { REMOVE_INSTANCE } from '@redux-devtools/app/lib/constants/actionTypes';
import App from '../../../app/containers/App';
import configureStore from '../../../app/stores/panelStore';
import getPreloadedState from '../background/getPreloadedState';

2
extension/src/browser/extension/inject/pageScript.js
View File

@ -1,4 +1,4 @@
import { getActionsArray, evalAction } from 'remotedev-utils';
import { getActionsArray, evalAction } from '@redux-devtools/utils';
import throttle from 'lodash/throttle';
import createStore from '../../../app/stores/createStore';
import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore';

3
extension/src/browser/extension/window/index.js
View File

@ -1,8 +1,7 @@
import 'remotedev-monitor-components/lib/presets';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { UPDATE_STATE } from 'remotedev-app/lib/constants/actionTypes';
import { UPDATE_STATE } from '@redux-devtools/app/lib/constants/actionTypes';
import App from '../../../app/containers/App';
import configureStore from '../../../app/stores/windowStore';
import getPreloadedState from '../background/getPreloadedState';

2
extension/src/browser/extension/window/remote.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { render } from 'react-dom';
import App from 'remotedev-app';
import App from '@redux-devtools/app';
import '../../views/remote.pug';