reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-22 09:36:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(redux-devtools-inspector): convert to TypeScript (#623)

Browse Source 
* stash

* stash

* stash

* stash

* preset

* @types/dragula
This commit is contained in:
Nathan Bierema 2020-08-30 17:49:06 -04:00 committed by GitHub
parent 3cd1ae1754
commit c7b0c7aa6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 1375 additions and 630 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -4,6 +4,7 @@
"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-typescript": "^7.10.4",
"@types/jest": "^26.0.9",
@ -14,12 +15,16 @@
"@typescript-eslint/parser": "^3.9.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.2",
"eslint": "^7.6.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-jest": "^23.20.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.5",
"fork-ts-checker-webpack-plugin": "^5.1.0",
"html-webpack-plugin": "^4.3.0",
"jest": "^26.2.2",
"lerna": "^3.22.1",
"prettier": "^2.0.5",

6
packages/react-base16-styling/src/index.ts
View File

@ -142,7 +142,7 @@ const mergeStylings = (
const getStylingByKeys = (
mergedStyling: StylingConfig,
keys: string | string[],
keys: (string | false | undefined) | (string | false | undefined)[],
...args: any[]
): Styling => {
if (keys === null) {
@ -153,7 +153,9 @@ const getStylingByKeys = (
keys = [keys];
}
const styles = keys.map((key) => mergedStyling[key]).filter(Boolean);
const styles = keys
.map((key) => mergedStyling[key as string])
.filter(Boolean);
const props = styles.reduce(
(obj, s) => {

2
packages/react-base16-styling/src/types.ts
View File

@ -27,6 +27,6 @@ export type StylingConfig = {
export type Theme = string | Base16Theme | StylingConfig;
export type StylingFunction = (
keys: string | string[],
keys: (string | false | undefined) | (string | false | undefined)[],
...rest: any[]
) => Styling;

2
packages/react-dock/demo/src/App.tsx
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { hot } from 'react-hot-loader/root';
import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { BsX } from 'react-icons/bs';

10
packages/react-dock/webpack.config.ts
View File

@ -5,7 +5,6 @@ const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
mode: isProduction ? 'production' : 'development',
devtool: 'eval',
entry: isProduction
? ['./demo/src/index']
: [
@ -18,10 +17,6 @@ module.exports = {
filename: 'bundle.js',
publicPath: isProduction ? 'static/' : '/static/',
},
plugins: isProduction ? [] : [new webpack.HotModuleReplacementPlugin()],
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
@ -34,6 +29,10 @@ module.exports = {
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
plugins: isProduction ? [] : [new webpack.HotModuleReplacementPlugin()],
devServer: isProduction
? null
: {
@ -46,4 +45,5 @@ module.exports = {
},
historyApiFallback: true,
},
devtool: 'eval-source-map',
};

10
packages/redux-devtools-inspector/.babelrc
View File

@ -1,9 +1,11 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-do-expressions"
"@babel/plugin-transform-runtime"
]
}

1
packages/redux-devtools-inspector/.eslintignore Normal file
View File

@ -0,0 +1 @@
lib

29
packages/redux-devtools-inspector/.eslintrc.js Normal file
View File

@ -0,0 +1,29 @@
module.exports = {
extends: '../../.eslintrc',
overrides: [
{
files: ['*.ts', '*.tsx'],
extends: '../../eslintrc.ts.react.base.json',
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
},
{
files: ['demo/**/*.ts', 'demo/**/*.tsx'],
extends: '../../eslintrc.ts.react.base.json',
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./demo/tsconfig.json'],
},
},
{
files: ['demo/config/webpack.config.ts'],
extends: '../../eslintrc.ts.base.json',
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./demo/config/tsconfig.json'],
},
},
],
};

8
packages/redux-devtools-inspector/.npmignore
View File

@ -1,8 +0,0 @@
static
src
demo
.*
webpack.config.js
index.html
*.gif
*.png

7
packages/redux-devtools-inspector/demo/config/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "../../../../tsconfig.base.json",
"compilerOptions": {
"resolveJsonModule": true
},
"include": ["webpack.config.ts"]
}

52
packages/redux-devtools-inspector/webpack.config.js → packages/redux-devtools-inspector/demo/config/webpack.config.ts
View File

@ -1,15 +1,14 @@
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
import * as path from 'path';
import * as webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import pkg from '../../package.json';
var pkg = require('./package.json');
var isProduction = process.env.NODE_ENV === 'production';
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
mode: process.env.NODE_ENV || 'development',
devtool: 'eval-source-map',
entry: isProduction
? ['./demo/src/js/index']
: [
@ -21,6 +20,21 @@ module.exports = {
path: path.join(__dirname, 'demo/dist'),
filename: 'js/bundle.js',
},
module: {
rules: [
{
test: /\.(js|ts)x?$/,
loader: 'babel-loader',
include: [
path.join(__dirname, '../../src'),
path.join(__dirname, '../src/js'),
],
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
@ -28,27 +42,12 @@ module.exports = {
template: 'demo/src/index.html',
package: pkg,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
new ForkTsCheckerWebpackPlugin({
typescript: {
configFile: 'demo/tsconfig.json',
},
}),
].concat(isProduction ? [] : [new webpack.HotModuleReplacementPlugin()]),
resolve: {
extensions: ['*', '.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
include: [
path.join(__dirname, 'src'),
path.join(__dirname, 'demo/src/js'),
],
},
],
},
devServer: isProduction
? {}
: {
@ -61,4 +60,5 @@ module.exports = {
},
historyApiFallback: true,
},
devtool: 'eval-source-map',
};

131
packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx → packages/redux-devtools-inspector/demo/src/js/DemoApp.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { CSSProperties } from 'react';
import { connect } from 'react-redux';
import pkg from '../../../package.json';
import Button from 'react-bootstrap/Button';
@ -8,12 +8,45 @@ import FormLabel from 'react-bootstrap/FormLabel';
import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';
import InputGroup from 'react-bootstrap/InputGroup';
import Row from 'react-bootstrap/Row';
import * as base16 from 'base16';
import * as inspectorThemes from '../../../src/themes';
import getOptions from './getOptions';
import { push as pushRoute } from 'connected-react-router';
import { Path } from 'history';
import * as inspectorThemes from '../../../src/themes';
import getOptions, { Options } from './getOptions';
import {
AddFunctionAction,
AddHugeObjectAction,
AddImmutableMapAction,
AddIteratorAction,
AddNativeMapAction,
AddRecursiveAction,
AddSymbolAction,
ChangeImmutableNestedAction,
ChangeNestedAction,
DemoAppState,
HugePayloadAction,
IncrementAction,
PopAction,
PushAction,
PushHugeArrayAction,
ReplaceAction,
ShuffleArrayAction,
TimeoutUpdateAction,
ToggleTimeoutUpdateAction,
} from './reducers';
const styles = {
const styles: {
wrapper: CSSProperties;
header: CSSProperties;
content: CSSProperties;
buttons: CSSProperties;
muted: CSSProperties;
button: CSSProperties;
links: CSSProperties;
link: CSSProperties;
input: CSSProperties;
} = {
wrapper: {
height: '100vh',
width: '80%',
@ -57,18 +90,21 @@ const styles = {
const themeOptions = [
...Object.keys(inspectorThemes).map((value) => ({
value,
label: inspectorThemes[value].scheme,
label: inspectorThemes[value as keyof typeof inspectorThemes].scheme,
})),
null,
...Object.keys(base16)
.map((value) => ({ value, label: base16[value].scheme }))
.map((value) => ({
value,
label: base16[value as keyof typeof base16].scheme,
}))
.filter((opt) => opt.label),
];
const ROOT =
process.env.NODE_ENV === 'production' ? '/redux-devtools-inspector/' : '/';
function buildUrl(options) {
function buildUrl(options: Options) {
return (
`${ROOT}?` +
[
@ -82,7 +118,32 @@ function buildUrl(options) {
);
}
class DemoApp extends React.Component {
interface Props
extends Omit<DemoAppState, 'addFunction' | 'addSymbol' | 'shuffleArray'> {
toggleTimeoutUpdate: (timeoutUpdateEnabled: boolean) => void;
timeoutUpdate: () => void;
increment: () => void;
push: () => void;
pop: () => void;
replace: () => void;
changeNested: () => void;
pushHugeArray: () => void;
addIterator: () => void;
addHugeObject: () => void;
addRecursive: () => void;
addNativeMap: () => void;
addImmutableMap: () => void;
changeImmutableNested: () => void;
hugePayload: () => void;
addFunction: () => void;
addSymbol: () => void;
shuffleArray: () => void;
pushRoute: (path: Path) => void;
}
class DemoApp extends React.Component<Props> {
timeout?: number;
render() {
const options = getOptions(this.props.router.location);
@ -98,8 +159,8 @@ class DemoApp extends React.Component {
</h5>
<div style={styles.links}>
<div style={styles.input}>
<Form horizontal>
<FormGroup>
<Form>
<FormGroup as={Row}>
<Col as={FormLabel} sm={3}>
Theme:
</Col>
@ -115,7 +176,7 @@ class DemoApp extends React.Component {
<option
key={(theme && theme.label) || 'empty'}
label={(theme && theme.label) || '──────────'}
value={theme && theme.value}
value={theme ? theme.value : undefined}
disabled={!theme}
/>
))}
@ -151,7 +212,7 @@ class DemoApp extends React.Component {
<Button onClick={this.props.pushHugeArray} style={styles.button}>
Push Huge Array
</Button>
<Button onClick={this.props.addHugeObect} style={styles.button}>
<Button onClick={this.props.addHugeObject} style={styles.button}>
Add Huge Object
</Button>
<Button onClick={this.props.addIterator} style={styles.button}>
@ -226,7 +287,7 @@ class DemoApp extends React.Component {
this.props.pushRoute(buildUrl({ ...options, dark: !options.dark }));
};
setTheme = (options, theme) => {
setTheme = (options: Options, theme: string) => {
this.props.pushRoute(buildUrl({ ...options, theme }));
};
@ -235,37 +296,41 @@ class DemoApp extends React.Component {
this.props.toggleTimeoutUpdate(enabled);
if (enabled) {
this.timeout = setInterval(this.props.timeoutUpdate, 1000);
this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
} else {
clearTimeout(this.timeout);
}
};
}
export default connect((state) => state, {
toggleTimeoutUpdate: (timeoutUpdateEnabled) => ({
export default connect((state: DemoAppState) => state, {
toggleTimeoutUpdate: (
timeoutUpdateEnabled: boolean
): ToggleTimeoutUpdateAction => ({
type: 'TOGGLE_TIMEOUT_UPDATE',
timeoutUpdateEnabled,
}),
timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }),
increment: () => ({ type: 'INCREMENT' }),
push: () => ({ type: 'PUSH' }),
pop: () => ({ type: 'POP' }),
replace: () => ({ type: 'REPLACE' }),
changeNested: () => ({ type: 'CHANGE_NESTED' }),
pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }),
addIterator: () => ({ type: 'ADD_ITERATOR' }),
addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }),
addRecursive: () => ({ type: 'ADD_RECURSIVE' }),
addNativeMap: () => ({ type: 'ADD_NATIVE_MAP' }),
addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }),
changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }),
hugePayload: () => ({
timeoutUpdate: (): TimeoutUpdateAction => ({ type: 'TIMEOUT_UPDATE' }),
increment: (): IncrementAction => ({ type: 'INCREMENT' }),
push: (): PushAction => ({ type: 'PUSH' }),
pop: (): PopAction => ({ type: 'POP' }),
replace: (): ReplaceAction => ({ type: 'REPLACE' }),
changeNested: (): ChangeNestedAction => ({ type: 'CHANGE_NESTED' }),
pushHugeArray: (): PushHugeArrayAction => ({ type: 'PUSH_HUGE_ARRAY' }),
addIterator: (): AddIteratorAction => ({ type: 'ADD_ITERATOR' }),
addHugeObject: (): AddHugeObjectAction => ({ type: 'ADD_HUGE_OBJECT' }),
addRecursive: (): AddRecursiveAction => ({ type: 'ADD_RECURSIVE' }),
addNativeMap: (): AddNativeMapAction => ({ type: 'ADD_NATIVE_MAP' }),
addImmutableMap: (): AddImmutableMapAction => ({ type: 'ADD_IMMUTABLE_MAP' }),
changeImmutableNested: (): ChangeImmutableNestedAction => ({
type: 'CHANGE_IMMUTABLE_NESTED',
}),
hugePayload: (): HugePayloadAction => ({
type: 'HUGE_PAYLOAD',
payload: Array.from({ length: 10000 }).map((_, i) => i),
}),
addFunction: () => ({ type: 'ADD_FUNCTION' }),
addSymbol: () => ({ type: 'ADD_SYMBOL' }),
shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }),
addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
pushRoute,
})(DemoApp);

12
packages/redux-devtools-inspector/demo/src/js/DevTools.jsx → packages/redux-devtools-inspector/demo/src/js/DevTools.tsx
View File

@ -4,6 +4,9 @@ import { createDevTools } from 'redux-devtools';
import DockMonitor from 'redux-devtools-dock-monitor';
import DevtoolsInspector from '../../../src/DevtoolsInspector';
import getOptions from './getOptions';
import { base16Themes } from '../../../src/utils/createStylingFromTheme';
import { Location } from 'history';
import { DemoAppState } from './reducers';
const CustomComponent = () => (
<div
@ -20,7 +23,7 @@ const CustomComponent = () => (
</div>
);
export const getDevTools = (location) =>
export const getDevTools = (location: { search: string }) =>
createDevTools(
<DockMonitor
defaultIsVisible
@ -29,8 +32,7 @@ export const getDevTools = (location) =>
changeMonitorKey="ctrl-m"
>
<DevtoolsInspector
theme={getOptions(location).theme}
shouldPersistState
theme={getOptions(location).theme as keyof typeof base16Themes}
invertTheme={!getOptions(location).dark}
supportImmutable={getOptions(location).supportImmutable}
tabs={(defaultTabs) => [
@ -44,12 +46,12 @@ export const getDevTools = (location) =>
</DockMonitor>
);
const UnconnectedDevTools = ({ location }) => {
const UnconnectedDevTools = ({ location }: { location: Location }) => {
const DevTools = getDevTools(location);
return <DevTools />;
};
const mapStateToProps = (state) => ({
const mapStateToProps = (state: DemoAppState) => ({
location: state.router.location,
});

11
packages/redux-devtools-inspector/demo/src/js/getOptions.js
View File

@ -1,11 +0,0 @@
export default function getOptions(location) {
return {
useExtension: location.search.indexOf('ext') !== -1,
supportImmutable: location.search.indexOf('immutable') !== -1,
theme: do {
const match = location.search.match(/theme=([^&]+)/);
match ? match[1] : 'inspector';
},
dark: location.search.indexOf('dark') !== -1,
};
}

20
packages/redux-devtools-inspector/demo/src/js/getOptions.ts Normal file
View File

@ -0,0 +1,20 @@
export interface Options {
useExtension: boolean;
supportImmutable: boolean;
theme: string;
dark: boolean;
}
export default function getOptions(location: { search: string }) {
return {
useExtension: location.search.indexOf('ext') !== -1,
supportImmutable: location.search.indexOf('immutable') !== -1,
theme: getTheme(),
dark: location.search.indexOf('dark') !== -1,
};
}
function getTheme() {
const match = /theme=([^&]+)/.exec(location.search);
return match ? match[1] : 'inspector';
}

29
packages/redux-devtools-inspector/demo/src/js/index.js → packages/redux-devtools-inspector/demo/src/js/index.tsx
View File

@ -1,20 +1,25 @@
import '@babel/polyfill';
import React from 'react';
import { render } from 'react-dom';
import DemoApp from './DemoApp';
import { Provider } from 'react-redux';
import createRootReducer from './reducers';
import { createStore, applyMiddleware, compose } from 'redux';
import {
createStore,
applyMiddleware,
compose,
StoreEnhancerStoreCreator,
StoreEnhancer,
} from 'redux';
import logger from 'redux-logger';
import { Route } from 'react-router';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
import { persistState } from 'redux-devtools';
import DemoApp from './DemoApp';
import createRootReducer from './reducers';
import getOptions from './getOptions';
import { ConnectedDevTools, getDevTools } from './DevTools';
function getDebugSessionKey() {
const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href);
return matches && matches.length > 0 ? matches[1] : null;
}
@ -26,21 +31,23 @@ const DevTools = getDevTools(window.location);
const history = createBrowserHistory();
const useDevtoolsExtension =
!!window.__REDUX_DEVTOOLS_EXTENSION__ &&
getOptions(window.location).useExtension;
!!((window as unknown) as { __REDUX_DEVTOOLS_EXTENSION__: unknown })
.__REDUX_DEVTOOLS_EXTENSION__ && getOptions(window.location).useExtension;
const enhancer = compose(
applyMiddleware(logger, routerMiddleware(history)),
(...args) => {
(next: StoreEnhancerStoreCreator) => {
const instrument = useDevtoolsExtension
? window.__REDUX_DEVTOOLS_EXTENSION__()
? ((window as unknown) as {
__REDUX_DEVTOOLS_EXTENSION__(): StoreEnhancer;
}).__REDUX_DEVTOOLS_EXTENSION__()
: DevTools.instrument();
return instrument(...args);
return instrument(next);
},
persistState(getDebugSessionKey())
);
const store = createStore(createRootReducer(history), {}, enhancer);
const store = createStore(createRootReducer(history), enhancer);
render(
<Provider store={store}>

148
packages/redux-devtools-inspector/demo/src/js/reducers.js
View File

@ -1,148 +0,0 @@
import Immutable from 'immutable';
import shuffle from 'lodash.shuffle';
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
const NESTED = {
long: {
nested: [
{
path: {
to: {
a: 'key',
},
},
},
],
},
};
const IMMUTABLE_NESTED = Immutable.fromJS(NESTED);
/* eslint-disable babel/new-cap */
const IMMUTABLE_MAP = Immutable.Map({
map: Immutable.Map({ a: 1, b: 2, c: 3 }),
list: Immutable.List(['a', 'b', 'c']),
set: Immutable.Set(['a', 'b', 'c']),
stack: Immutable.Stack(['a', 'b', 'c']),
seq: Immutable.Seq([1, 2, 3, 4, 5, 6, 7, 8]),
});
const NATIVE_MAP = new window.Map([
[
'map',
new window.Map([
[{ first: true }, 1],
['second', 2],
]),
],
[
'weakMap',
new window.WeakMap([
[{ first: true }, 1],
[{ second: 1 }, 2],
]),
],
['set', new window.Set([{ first: true }, 'second'])],
['weakSet', new window.WeakSet([{ first: true }, { second: 1 }])],
]);
/* eslint-enable babel/new-cap */
const HUGE_ARRAY = Array.from({ length: 5000 }).map((_, key) => ({
str: 'key ' + key,
}));
const HUGE_OBJECT = Array.from({ length: 5000 }).reduce(
(o, _, key) => ((o['key ' + key] = 'item ' + key), o),
{}
);
const FUNC = function (a, b, c) {
return a + b + c;
};
const RECURSIVE = {};
RECURSIVE.obj = RECURSIVE;
function createIterator() {
const iterable = {};
iterable[window.Symbol.iterator] = function* iterator() {
for (var i = 0; i < 333; i++) {
yield 'item ' + i;
}
};
return iterable;
}
const DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];
const createRootReducer = (history) =>
combineReducers({
router: connectRouter(history),
timeoutUpdateEnabled: (state = false, action) =>
action.type === 'TOGGLE_TIMEOUT_UPDATE'
? action.timeoutUpdateEnabled
: state,
store: (state = 0, action) =>
action.type === 'INCREMENT' ? state + 1 : state,
undefined: (state = { val: undefined }) => state,
null: (state = null) => state,
func: (state = () => {}) => state,
array: (state = [], action) =>
action.type === 'PUSH'
? [...state, Math.random()]
: action.type === 'POP'
? state.slice(0, state.length - 1)
: action.type === 'REPLACE'
? [Math.random(), ...state.slice(1)]
: state,
hugeArrays: (state = [], action) =>
action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,
hugeObjects: (state = [], action) =>
action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,
iterators: (state = [], action) =>
action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,
nested: (state = NESTED, action) =>
action.type === 'CHANGE_NESTED'
? {
...state,
long: {
nested: [
{
path: {
to: {
a: state.long.nested[0].path.to.a + '!',
},
},
},
],
},
}
: state,
recursive: (state = [], action) =>
action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,
immutables: (state = [], action) =>
action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,
maps: (state = [], action) =>
action.type === 'ADD_NATIVE_MAP' ? [...state, NATIVE_MAP] : state,
immutableNested: (state = IMMUTABLE_NESTED, action) =>
action.type === 'CHANGE_IMMUTABLE_NESTED'
? state.updateIn(
['long', 'nested', 0, 'path', 'to', 'a'],
(str) => str + '!'
)
: state,
addFunction: (state = null, action) =>
action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,
addSymbol: (state = null, action) =>
action.type === 'ADD_SYMBOL'
? { s: window.Symbol('symbol'), error: new Error('TEST') }
: state,
shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
});
export default createRootReducer;

267
packages/redux-devtools-inspector/demo/src/js/reducers.ts Normal file
View File

@ -0,0 +1,267 @@
import Immutable from 'immutable';
import shuffle from 'lodash.shuffle';
import { combineReducers, Reducer } from 'redux';
import {
connectRouter,
LocationChangeAction,
RouterState,
} from 'connected-react-router';
import { History } from 'history';
type Nested = { long: { nested: { path: { to: { a: string } } }[] } };
const NESTED = {
long: {
nested: [
{
path: {
to: {
a: 'key',
},
},
},
],
},
};
const IMMUTABLE_NESTED = Immutable.fromJS(NESTED);
const IMMUTABLE_MAP = Immutable.Map({
map: Immutable.Map({ a: 1, b: 2, c: 3 }),
list: Immutable.List(['a', 'b', 'c']),
set: Immutable.Set(['a', 'b', 'c']),
stack: Immutable.Stack(['a', 'b', 'c']),
seq: Immutable.Seq([1, 2, 3, 4, 5, 6, 7, 8]),
});
type MapValue =
| Map<{ first: boolean } | string, number>
| WeakMap<{ first: boolean } | { second: number }, number>
| Set<{ first: boolean } | string>
| WeakSet<{ first: boolean } | { second: number }>;
const NATIVE_MAP = new window.Map<string, MapValue>([
[
'map',
new window.Map<{ first: boolean } | string, number>([
[{ first: true }, 1],
['second', 2],
]),
],
[
'weakMap',
new window.WeakMap<{ first: boolean } | { second: number }, number>([
[{ first: true }, 1],
[{ second: 1 }, 2],
]),
],
['set', new window.Set([{ first: true }, 'second'])],
['weakSet', new window.WeakSet([{ first: true }, { second: 1 }])],
]);
const HUGE_ARRAY = Array.from({ length: 5000 }).map((_, key) => ({
str: `key ${key}`,
}));
const HUGE_OBJECT = Array.from({ length: 5000 }).reduce(
(o: { [key: string]: string }, _, key) => (
(o[`key ${key}`] = `item ${key}`), o
),
{}
);
const FUNC = function (a: number, b: number, c: number) {
return a + b + c;
};
const RECURSIVE: { obj?: unknown } = {};
RECURSIVE.obj = RECURSIVE;
function createIterator() {
const iterable: { [Symbol.iterator](): IterableIterator<string> } = {
[Symbol.iterator]: function* iterator() {
for (let i = 0; i < 333; i++) {
yield `item ${i}`;
}
},
};
return iterable;
}
const DEFAULT_SHUFFLE_ARRAY = [0, 1, null, { id: 1 }, { id: 2 }, 'string'];
export interface ToggleTimeoutUpdateAction {
type: 'TOGGLE_TIMEOUT_UPDATE';
timeoutUpdateEnabled: boolean;
}
export interface TimeoutUpdateAction {
type: 'TIMEOUT_UPDATE';
}
export interface IncrementAction {
type: 'INCREMENT';
}
export interface PushAction {
type: 'PUSH';
}
export interface PopAction {
type: 'POP';
}
export interface ReplaceAction {
type: 'REPLACE';
}
export interface ChangeNestedAction {
type: 'CHANGE_NESTED';
}
export interface PushHugeArrayAction {
type: 'PUSH_HUGE_ARRAY';
}
export interface AddIteratorAction {
type: 'ADD_ITERATOR';
}
export interface AddHugeObjectAction {
type: 'ADD_HUGE_OBJECT';
}
export interface AddRecursiveAction {
type: 'ADD_RECURSIVE';
}
export interface AddNativeMapAction {
type: 'ADD_NATIVE_MAP';
}
export interface AddImmutableMapAction {
type: 'ADD_IMMUTABLE_MAP';
}
export interface ChangeImmutableNestedAction {
type: 'CHANGE_IMMUTABLE_NESTED';
}
export interface HugePayloadAction {
type: 'HUGE_PAYLOAD';
payload: number[];
}
export interface AddFunctionAction {
type: 'ADD_FUNCTION';
}
export interface AddSymbolAction {
type: 'ADD_SYMBOL';
}
export interface ShuffleArrayAction {
type: 'SHUFFLE_ARRAY';
}
type DemoAppAction =
| ToggleTimeoutUpdateAction
| TimeoutUpdateAction
| IncrementAction
| PushAction
| PopAction
| ReplaceAction
| ChangeNestedAction
| PushHugeArrayAction
| AddIteratorAction
| AddHugeObjectAction
| AddRecursiveAction
| AddNativeMapAction
| AddImmutableMapAction
| ChangeImmutableNestedAction
| HugePayloadAction
| AddFunctionAction
| AddSymbolAction
| ShuffleArrayAction
| LocationChangeAction;
export interface DemoAppState {
router: RouterState;
timeoutUpdateEnabled: boolean;
store: number;
undefined: { val: undefined };
null: null;
func: () => void;
array: number[];
hugeArrays: { str: string }[];
hugeObjects: { [key: string]: string }[];
iterators: { [Symbol.iterator](): IterableIterator<string> }[];
nested: Nested;
recursive: { obj?: unknown }[];
immutables: Immutable.Map<string, unknown>[];
maps: Map<string, MapValue>[];
immutableNested: Immutable.Map<unknown, unknown>;
addFunction: { f: (a: number, b: number, c: number) => number } | null;
addSymbol: { s: symbol; error: Error } | null;
shuffleArray: unknown[];
}
const createRootReducer = (
history: History
): Reducer<DemoAppState, DemoAppAction> =>
combineReducers<DemoAppState, DemoAppAction>({
router: connectRouter(history) as Reducer<RouterState, DemoAppAction>,
timeoutUpdateEnabled: (state = false, action: DemoAppAction) =>
action.type === 'TOGGLE_TIMEOUT_UPDATE'
? action.timeoutUpdateEnabled
: state,
store: (state = 0, action) =>
action.type === 'INCREMENT' ? state + 1 : state,
undefined: (state = { val: undefined }) => state,
null: (state = null) => state,
func: (
state = () => {
// noop
}
) => state,
array: (state = [], action: DemoAppAction) =>
action.type === 'PUSH'
? [...state, Math.random()]
: action.type === 'POP'
? state.slice(0, state.length - 1)
: action.type === 'REPLACE'
? [Math.random(), ...state.slice(1)]
: state,
hugeArrays: (state = [], action: DemoAppAction) =>
action.type === 'PUSH_HUGE_ARRAY' ? [...state, ...HUGE_ARRAY] : state,
hugeObjects: (state = [], action: DemoAppAction) =>
action.type === 'ADD_HUGE_OBJECT' ? [...state, HUGE_OBJECT] : state,
iterators: (state = [], action: DemoAppAction) =>
action.type === 'ADD_ITERATOR' ? [...state, createIterator()] : state,
nested: (state = NESTED, action: DemoAppAction) =>
action.type === 'CHANGE_NESTED'
? {
...state,
long: {
nested: [
{
path: {
to: {
a: state.long.nested[0].path.to.a + '!',
},
},
},
],
},
}
: state,
recursive: (state: { obj?: unknown }[] = [], action: DemoAppAction) =>
action.type === 'ADD_RECURSIVE' ? [...state, { ...RECURSIVE }] : state,
immutables: (
state: Immutable.Map<string, unknown>[] = [],
action: DemoAppAction
) =>
action.type === 'ADD_IMMUTABLE_MAP' ? [...state, IMMUTABLE_MAP] : state,
maps: (state: Map<string, MapValue>[] = [], action: DemoAppAction) =>
action.type === 'ADD_NATIVE_MAP' ? [...state, NATIVE_MAP] : state,
immutableNested: (state = IMMUTABLE_NESTED, action: DemoAppAction) =>
action.type === 'CHANGE_IMMUTABLE_NESTED'
? state.updateIn(
['long', 'nested', 0, 'path', 'to', 'a'],
(str: string) => str + '!'
)
: state,
addFunction: (state = null, action: DemoAppAction) =>
action.type === 'ADD_FUNCTION' ? { f: FUNC } : state,
addSymbol: (state = null, action: DemoAppAction) =>
action.type === 'ADD_SYMBOL'
? { s: window.Symbol('symbol'), error: new Error('TEST') }
: state,
shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action: DemoAppAction) =>
action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
});
export default createRootReducer;

7
packages/redux-devtools-inspector/demo/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "../../../tsconfig.react.base.json",
"compilerOptions": {
"resolveJsonModule": true
},
"include": ["../src", "src"]
}

3
packages/redux-devtools-inspector/jest.config.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
preset: 'ts-jest',
};

122
packages/redux-devtools-inspector/package.json
View File

@ -2,70 +2,42 @@
"name": "redux-devtools-inspector",
"version": "0.13.1",
"description": "Redux DevTools Diff Monitor",
"scripts": {
"build": "npm run build:lib",
"build:lib": "cross-env NODE_ENV=production babel src --out-dir lib",
"build:demo": "cross-env NODE_ENV=production webpack -p",
"stats": "webpack --profile --json > stats.json",
"start": "webpack-dev-server",
"lint": "eslint --ext .jsx,.js --max-warnings 0 src",
"preversion": "npm run lint",
"version": "npm run build:demo && git add -A .",
"postversion": "git push",
"prepare": "npm run build:lib",
"prepublishOnly": "npm run build:lib",
"gh": "git subtree push --prefix demo/dist origin gh-pages"
},
"main": "lib/index.js",
"repository": {
"url": "https://github.com/reduxjs/redux-devtools"
},
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-do-expressions": "^7.10.4",
"@babel/plugin-proposal-export-default-from": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.11.0",
"@babel/polyfill": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"base16": "^1.0.0",
"clean-webpack-plugin": "^3.0.0",
"connected-react-router": "^6.8.0",
"cross-env": "^7.0.2",
"history": "^4.10.1",
"html-webpack-plugin": "^4.3.0",
"immutable": "^4.0.0-rc.12",
"lodash.isequalwith": "^4.4.0",
"lodash.shuffle": "^4.2.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-transform-hmr": "^1.0.4",
"redux": "^4.0.5",
"redux-devtools": "^3.6.1",
"redux-devtools-dock-monitor": "^1.1.4",
"redux-logger": "^3.0.6",
"seamless-immutable": "^7.1.4",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"peerDependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0"
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector",
"bugs": {
"url": "https://github.com/reduxjs/redux-devtools/issues"
},
"license": "MIT",
"author": "Alexander <alexkuz@gmail.com> (http://kuzya.org/)",
"contributors": [
"Mihail Diordiev <zalmoxisus@gmail.com> (https://github.com/zalmoxisus)"
],
"license": "MIT",
"files": [
"lib",
"src"
],
"main": "lib/index.js",
"types": "lib/index.d.ts",
"repository": {
"url": "https://github.com/reduxjs/redux-devtools"
},
"scripts": {
"start": "webpack-dev-server --config demo/config/webpack.config.ts",
"stats": "webpack --profile --json > stats.json",
"build:demo": "NODE_ENV=production webpack -p",
"build": "npm run build:types && npm run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
"clean": "rimraf lib",
"lint": "eslint . --ext .ts,.tsx",
"lint:fix": "eslint . --ext .ts,.tsx --fix",
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"preversion": "npm run type-check && npm run lint",
"prepublishOnly": "npm run clean && npm run build"
},
"dependencies": {
"babel-runtime": "^6.26.0",
"@types/dragula": "^3.7.0",
"@types/prop-types": "^15.7.3",
"dateformat": "^3.0.3",
"hex-rgba": "^1.0.2",
"javascript-stringify": "^2.0.1",
@ -77,7 +49,39 @@
"react-base16-styling": "^0.7.0",
"react-dragula": "^1.1.17",
"react-json-tree": "^0.12.1",
"react-pure-render": "^1.0.2",
"redux-devtools-themes": "^1.0.0"
},
"devDependencies": {
"@babel/runtime": "^7.11.2",
"@types/dateformat": "^3.0.1",
"@types/hex-rgba": "^1.0.0",
"@types/history": "^4.7.7",
"@types/lodash.debounce": "^4.0.6",
"@types/lodash.shuffle": "^4.2.6",
"@types/react": "^16.9.46",
"@types/react-dragula": "^1.1.0",
"@types/react-router": "^5.1.8",
"@types/redux-logger": "^3.0.8",
"base16": "^1.0.0",
"connected-react-router": "^6.8.0",
"history": "^4.10.1",
"immutable": "^4.0.0-rc.12",
"lodash.isequalwith": "^4.4.0",
"lodash.shuffle": "^4.2.0",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools": "^3.6.1",
"redux-devtools-dock-monitor": "^1.1.4",
"redux-logger": "^3.0.6",
"seamless-immutable": "^7.1.4"
},
"peerDependencies": {
"@types/react": "^16.3.18",
"react": "^16.3.0",
"redux": "^3.4.0 || ^4.0.0"
}
}

3
packages/redux-devtools-inspector/src/.noderequirer.json
View File

@ -1,3 +0,0 @@
{
"import": true
}

73
packages/redux-devtools-inspector/src/ActionList.jsx → packages/redux-devtools-inspector/src/ActionList.tsx
View File

@ -1,10 +1,17 @@
import React, { Component } from 'react';
import React, { PureComponent, RefCallback } from 'react';
import { Drake } from 'dragula';
import dragula from 'react-dragula';
import { Action } from 'redux';
import { PerformAction } from 'redux-devtools';
import { StylingFunction } from 'react-base16-styling';
import ActionListRow from './ActionListRow';
import ActionListHeader from './ActionListHeader';
import shouldPureComponentUpdate from 'react-pure-render/function';
function getTimestamps(actions, actionIds, actionId) {
function getTimestamps<A extends Action<unknown>>(
actions: { [actionId: number]: PerformAction<A> },
actionIds: number[],
actionId: number
) {
const idx = actionIds.indexOf(actionId);
const prevActionId = actionIds[idx - 1];
@ -14,10 +21,37 @@ function getTimestamps(actions, actionIds, actionId) {
};
}
export default class ActionList extends Component {
shouldComponentUpdate = shouldPureComponentUpdate;
interface Props<A extends Action<unknown>> {
actions: { [actionId: number]: PerformAction<A> };
actionIds: number[];
isWideLayout: boolean;
searchValue: string | undefined;
selectedActionId: number | null;
startActionId: number | null;
skippedActionIds: number[];
draggableActions: boolean;
hideMainButtons: boolean | undefined;
hideActionButtons: boolean | undefined;
styling: StylingFunction;
onSearch: (value: string) => void;
onSelect: (e: React.MouseEvent<HTMLDivElement>, actionId: number) => void;
onToggleAction: (actionId: number) => void;
onJumpToState: (actionId: number) => void;
onCommit: () => void;
onSweep: () => void;
onReorderAction: (actionId: number, beforeActionId: number) => void;
currentActionId: number;
lastActionId: number;
}
UNSAFE_componentWillReceiveProps(nextProps) {
export default class ActionList<
A extends Action<unknown>
> extends PureComponent<Props<A>> {
node?: HTMLDivElement | null;
scrollDown?: boolean;
drake?: Drake;
UNSAFE_componentWillReceiveProps(nextProps: Props<A>) {
const node = this.node;
if (!node) {
this.scrollDown = true;
@ -35,22 +69,22 @@ export default class ActionList extends Component {
this.scrollToBottom();
if (!this.props.draggableActions) return;
const container = this.node;
const container = this.node!;
this.drake = dragula([container], {
copy: false,
copySortSource: false,
mirrorContainer: container,
accepts: (el, target, source, sibling) =>
!sibling || parseInt(sibling.getAttribute('data-id')),
!sibling || !!parseInt(sibling.getAttribute('data-id')!),
moves: (el, source, handle) =>
parseInt(el.getAttribute('data-id')) &&
handle.className.indexOf('selectorButton') !== 0,
!!parseInt(el!.getAttribute('data-id')!) &&
handle!.className.indexOf('selectorButton') !== 0,
}).on('drop', (el, target, source, sibling) => {
let beforeActionId = this.props.actionIds.length;
if (sibling && sibling.className.indexOf('gu-mirror') === -1) {
beforeActionId = parseInt(sibling.getAttribute('data-id'));
beforeActionId = parseInt(sibling.getAttribute('data-id')!);
}
const actionId = parseInt(el.getAttribute('data-id'));
const actionId = parseInt(el.getAttribute('data-id')!);
this.props.onReorderAction(actionId, beforeActionId);
});
}
@ -69,7 +103,7 @@ export default class ActionList extends Component {
}
}
getRef = (node) => {
getRef: RefCallback<HTMLDivElement> = (node) => {
this.node = node;
};
@ -97,8 +131,9 @@ export default class ActionList extends Component {
const filteredActionIds = searchValue
? actionIds.filter(
(id) =>
actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !==
-1
(actions[id].action.type as string)
.toLowerCase()
.indexOf(lowerSearchValue as string) !== -1
)
: actionIds;
@ -129,18 +164,20 @@ export default class ActionList extends Component {
isSelected={
(startActionId !== null &&
actionId >= startActionId &&
actionId <= selectedActionId) ||
actionId <= (selectedActionId as number)) ||
actionId === selectedActionId
}
isInFuture={
actionIds.indexOf(actionId) > actionIds.indexOf(currentActionId)
}
onSelect={(e) => onSelect(e, actionId)}
onSelect={(e: React.MouseEvent<HTMLDivElement>) =>
onSelect(e, actionId)
}
timestamps={getTimestamps(actions, actionIds, actionId)}
action={actions[actionId].action}
onToggleClick={() => onToggleAction(actionId)}
onJumpClick={() => onJumpToState(actionId)}
onCommitClick={() => onCommit(actionId)}
onCommitClick={() => onCommit()}
hideActionButtons={hideActionButtons}
isSkipped={skippedActionIds.indexOf(actionId) !== -1}
/>

32
packages/redux-devtools-inspector/src/ActionListHeader.jsx → packages/redux-devtools-inspector/src/ActionListHeader.tsx
View File

@ -1,10 +1,24 @@
import React from 'react';
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { StylingFunction } from 'react-base16-styling';
import RightSlider from './RightSlider';
const getActiveButtons = (hasSkippedActions) =>
[hasSkippedActions && 'Sweep', 'Commit'].filter((a) => a);
const getActiveButtons = (hasSkippedActions: boolean): ('Sweep' | 'Commit')[] =>
[hasSkippedActions && 'Sweep', 'Commit'].filter(
(a): a is 'Sweep' | 'Commit' => !!a
);
const ActionListHeader = ({
interface Props {
styling: StylingFunction;
onSearch: (value: string) => void;
onCommit: () => void;
onSweep: () => void;
hideMainButtons: boolean | undefined;
hasSkippedActions: boolean;
hasStagedActions: boolean;
}
const ActionListHeader: FunctionComponent<Props> = ({
styling,
onSearch,
hasSkippedActions,
@ -48,4 +62,14 @@ const ActionListHeader = ({
</div>
);
ActionListHeader.propTypes = {
styling: PropTypes.func.isRequired,
onSearch: PropTypes.func.isRequired,
onCommit: PropTypes.func.isRequired,
onSweep: PropTypes.func.isRequired,
hideMainButtons: PropTypes.bool,
hasSkippedActions: PropTypes.bool.isRequired,
hasStagedActions: PropTypes.bool.isRequired,
};
export default ActionListHeader;

74
packages/redux-devtools-inspector/src/ActionListRow.jsx → packages/redux-devtools-inspector/src/ActionListRow.tsx
View File

@ -1,15 +1,40 @@
import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import shouldPureComponentUpdate from 'react-pure-render/function';
import React, { MouseEvent, MouseEventHandler, PureComponent } from 'react';
import PropTypes from 'prop-types';
import dateformat from 'dateformat';
import debounce from 'lodash.debounce';
import { StylingFunction } from 'react-base16-styling';
import { Action } from 'redux';
import RightSlider from './RightSlider';
const BUTTON_SKIP = 'Skip';
const BUTTON_JUMP = 'Jump';
export default class ActionListRow extends Component {
state = { hover: false };
type Button = typeof BUTTON_SKIP | typeof BUTTON_JUMP;
interface Props<A extends Action<unknown>> {
styling: StylingFunction;
actionId: number;
isInitAction: boolean;
isSelected: boolean;
isInFuture: boolean;
onSelect: MouseEventHandler<HTMLDivElement>;
timestamps: { current: number; previous: number };
action: A;
onToggleClick: () => void;
onJumpClick: () => void;
onCommitClick: () => void;
hideActionButtons: boolean | undefined;
isSkipped: boolean;
}
interface State {
hover: boolean;
}
export default class ActionListRow<
A extends Action<unknown>
> extends PureComponent<Props<A>, State> {
state: State = { hover: false };
static propTypes = {
styling: PropTypes.func.isRequired,
@ -25,8 +50,6 @@ export default class ActionListRow extends Component {
isSkipped: PropTypes.bool.isRequired,
};
shouldComponentUpdate = shouldPureComponentUpdate;
render() {
const {
styling,
@ -44,18 +67,26 @@ export default class ActionListRow extends Component {
const timeDelta = timestamps.current - timestamps.previous;
const showButtons = (hover && !isInitAction) || isSkipped;
const isButtonSelected = (btn) => btn === BUTTON_SKIP && isSkipped;
const isButtonSelected = (btn: Button) => btn === BUTTON_SKIP && isSkipped;
let actionType = action.type;
if (typeof actionType === 'undefined') actionType = '<UNDEFINED>';
else if (actionType === null) actionType = '<NULL>';
else actionType = actionType.toString() || '<EMPTY>';
else actionType = (actionType as string).toString() || '<EMPTY>';
return (
<div
onClick={onSelect}
onMouseEnter={!hideActionButtons && this.handleMouseEnter}
onMouseLeave={!hideActionButtons && this.handleMouseLeave}
onMouseEnter={
(!hideActionButtons && this.handleMouseEnter) as MouseEventHandler<
HTMLDivElement
>
}
onMouseLeave={
(!hideActionButtons && this.handleMouseLeave) as MouseEventHandler<
HTMLDivElement
>
}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseEnter}
data-id={actionId}
@ -76,7 +107,7 @@ export default class ActionListRow extends Component {
isSkipped && 'actionListItemNameSkipped',
])}
>
{actionType}
{actionType as string}
</div>
{hideActionButtons ? (
<RightSlider styling={styling} shown>
@ -103,12 +134,12 @@ export default class ActionListRow extends Component {
</RightSlider>
<RightSlider styling={styling} shown={showButtons} rotate>
<div {...styling('actionListItemSelector')}>
{[BUTTON_JUMP, BUTTON_SKIP].map(
{([BUTTON_JUMP, BUTTON_SKIP] as const).map(
(btn) =>
(!isInitAction || btn !== BUTTON_SKIP) && (
<div
key={btn}
onClick={this.handleButtonClick.bind(this, btn)}
onClick={(e) => this.handleButtonClick(btn, e)}
{...styling(
[
'selectorButton',
@ -131,7 +162,7 @@ export default class ActionListRow extends Component {
);
}
handleButtonClick(btn, e) {
handleButtonClick(btn: Button, e: MouseEvent<HTMLDivElement>) {
e.stopPropagation();
switch (btn) {
@ -144,8 +175,8 @@ export default class ActionListRow extends Component {
}
}
handleMouseEnter = (e) => {
if (this.hover) return;
handleMouseEnter = (e: MouseEvent<HTMLDivElement>) => {
if (this.state.hover) return;
this.handleMouseLeave.cancel();
this.handleMouseEnterDebounced(e.buttons);
};
@ -160,8 +191,13 @@ export default class ActionListRow extends Component {
if (this.state.hover) this.setState({ hover: false });
}, 100);
handleMouseDown = (e) => {
if (e.target.className.indexOf('selectorButton') === 0) return;
handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
if (
((e.target as unknown) as { className: string[] }).className.indexOf(
'selectorButton'
) === 0
)
return;
this.handleMouseLeave();
};
}

78
packages/redux-devtools-inspector/src/ActionPreview.jsx → packages/redux-devtools-inspector/src/ActionPreview.tsx
View File

@ -1,10 +1,43 @@
import React, { Component } from 'react';
import { DEFAULT_STATE } from './redux';
import { Base16Theme } from 'redux-devtools-themes';
import { Action } from 'redux';
import { StylingFunction } from 'react-base16-styling';
import { PerformAction } from 'redux-devtools';
import { Delta } from 'jsondiffpatch';
import { DEFAULT_STATE, DevtoolsInspectorState } from './redux';
import ActionPreviewHeader from './ActionPreviewHeader';
import DiffTab from './tabs/DiffTab';
import StateTab from './tabs/StateTab';
import ActionTab from './tabs/ActionTab';
export interface TabComponentProps<S, A extends Action<unknown>> {
labelRenderer: (
keyPath: (string | number)[],
nodeType: string,
expanded: boolean,
expandable: boolean
) => React.ReactNode;
styling: StylingFunction;
computedStates: { state: S; error?: string }[];
actions: { [actionId: number]: PerformAction<A> };
selectedActionId: number | null;
startActionId: number | null;
base16Theme: Base16Theme;
invertTheme: boolean;
isWideLayout: boolean;
dataTypeKey: string | undefined;
delta: Delta | null | undefined | false;
action: A;
nextState: S;
monitorState: DevtoolsInspectorState;
updateMonitorState: (monitorState: Partial<DevtoolsInspectorState>) => void;
}
export interface Tab<S, A extends Action<unknown>> {
name: string;
component: React.ComponentType<TabComponentProps<S, A>>;
}
const DEFAULT_TABS = [
{
name: 'Action',
@ -20,7 +53,32 @@ const DEFAULT_TABS = [
},
];
class ActionPreview extends Component {
interface Props<S, A extends Action<unknown>> {
base16Theme: Base16Theme;
invertTheme: boolean;
isWideLayout: boolean;
tabs: Tab<S, A>[] | ((tabs: Tab<S, A>[]) => Tab<S, A>[]);
tabName: string;
delta: Delta | null | undefined | false;
error: string | undefined;
nextState: S;
computedStates: { state: S; error?: string }[];
action: A;
actions: { [actionId: number]: PerformAction<A> };
selectedActionId: number | null;
startActionId: number | null;
dataTypeKey: string | undefined;
monitorState: DevtoolsInspectorState;
updateMonitorState: (monitorState: Partial<DevtoolsInspectorState>) => void;
styling: StylingFunction;
onInspectPath: (path: (string | number)[]) => void;
inspectedPath: (string | number)[];
onSelectTab: (tabName: string) => void;
}
class ActionPreview<S, A extends Action<unknown>> extends Component<
Props<S, A>
> {
static defaultProps = {
tabName: DEFAULT_STATE.tabName,
};
@ -49,21 +107,21 @@ class ActionPreview extends Component {
updateMonitorState,
} = this.props;
const renderedTabs =
const renderedTabs: Tab<S, A>[] =
typeof tabs === 'function'
? tabs(DEFAULT_TABS)
? tabs(DEFAULT_TABS as Tab<S, A>[])
: tabs
? tabs
: DEFAULT_TABS;
: (DEFAULT_TABS as Tab<S, A>[]);
const { component: TabComponent } =
renderedTabs.find((tab) => tab.name === tabName) ||
renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName);
renderedTabs.find((tab) => tab.name === DEFAULT_STATE.tabName)!;
return (
<div key="actionPreview" {...styling('actionPreview')}>
<ActionPreviewHeader
tabs={renderedTabs}
tabs={(renderedTabs as unknown) as Tab<unknown, Action<unknown>>[]}
{...{ styling, inspectedPath, onInspectPath, tabName, onSelectTab }}
/>
{!error && (
@ -94,7 +152,11 @@ class ActionPreview extends Component {
);
}
labelRenderer = ([key, ...rest], nodeType, expanded) => {
labelRenderer = (
[key, ...rest]: (string | number)[],
nodeType: string,
expanded: boolean
) => {
const { styling, onInspectPath, inspectedPath } = this.props;
return (

29
packages/redux-devtools-inspector/src/ActionPreviewHeader.jsx → packages/redux-devtools-inspector/src/ActionPreviewHeader.tsx
View File

@ -1,6 +1,22 @@
import React from 'react';
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { Action } from 'redux';
import { StylingFunction } from 'react-base16-styling';
import { Tab } from './ActionPreview';
const ActionPreviewHeader = ({
interface Props<S, A extends Action<unknown>> {
tabs: Tab<S, A>[];
styling: StylingFunction;
inspectedPath: (string | number)[];
onInspectPath: (path: (string | number)[]) => void;
tabName: string;
onSelectTab: (tabName: string) => void;
}
const ActionPreviewHeader: FunctionComponent<Props<
unknown,
Action<unknown>
>> = ({
styling,
inspectedPath,
onInspectPath,
@ -57,4 +73,13 @@ const ActionPreviewHeader = ({
</div>
);
ActionPreviewHeader.propTypes = {
tabs: PropTypes.array.isRequired,
styling: PropTypes.func.isRequired,
inspectedPath: PropTypes.array.isRequired,
onInspectPath: PropTypes.func.isRequired,
tabName: PropTypes.string.isRequired,
onSelectTab: PropTypes.func.isRequired,
};
export default ActionPreviewHeader;

180
packages/redux-devtools-inspector/src/DevtoolsInspector.js → packages/redux-devtools-inspector/src/DevtoolsInspector.tsx
View File

@ -1,18 +1,30 @@
import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Base16Theme } from 'redux-devtools-themes';
import {
getBase16Theme,
invertTheme,
StylingFunction,
} from 'react-base16-styling';
import { ActionCreators, LiftedAction, LiftedState } from 'redux-devtools';
import { Action, Dispatch } from 'redux';
import { Delta, DiffContext } from 'jsondiffpatch';
import {
createStylingFromTheme,
base16Themes,
} from './utils/createStylingFromTheme';
import shouldPureComponentUpdate from 'react-pure-render/function';
import ActionList from './ActionList';
import ActionPreview from './ActionPreview';
import ActionPreview, { Tab } from './ActionPreview';
import getInspectedState from './utils/getInspectedState';
import createDiffPatcher from './createDiffPatcher';
import { getBase16Theme, invertTheme } from 'react-base16-styling';
import { reducer, updateMonitorState } from './redux';
import { ActionCreators } from 'redux-devtools';
import {
DevtoolsInspectorAction,
DevtoolsInspectorState,
reducer,
updateMonitorState,
} from './redux';
// eslint-disable-next-line @typescript-eslint/unbound-method
const {
commit,
sweep,
@ -22,21 +34,26 @@ const {
reorderAction,
} = ActionCreators;
function getLastActionId(props) {
function getLastActionId<S, A extends Action<unknown>>(
props: DevtoolsInspectorProps<S, A>
) {
return props.stagedActionIds[props.stagedActionIds.length - 1];
}
function getCurrentActionId(props, monitorState) {
function getCurrentActionId<S, A extends Action<unknown>>(
props: DevtoolsInspectorProps<S, A>,
monitorState: DevtoolsInspectorState
) {
return monitorState.selectedActionId === null
? props.stagedActionIds[props.currentStateIndex]
: monitorState.selectedActionId;
}
function getFromState(
actionIndex,
stagedActionIds,
computedStates,
monitorState
function getFromState<S>(
actionIndex: number,
stagedActionIds: number[],
computedStates: { state: S; error?: string }[],
monitorState: DevtoolsInspectorState
) {
const { startActionId } = monitorState;
if (startActionId === null) {
@ -47,7 +64,10 @@ function getFromState(
return computedStates[fromStateIdx];
}
function createIntermediateState(props, monitorState) {
function createIntermediateState<S, A extends Action<unknown>>(
props: DevtoolsInspectorProps<S, A>,
monitorState: DevtoolsInspectorState
) {
const {
supportImmutable,
computedStates,
@ -97,8 +117,10 @@ function createIntermediateState(props, monitorState) {
};
}
function createThemeState(props) {
const base16Theme = getBase16Theme(props.theme, base16Themes);
function createThemeState<S, A extends Action<unknown>>(
props: DevtoolsInspectorProps<S, A>
) {
const base16Theme = getBase16Theme(props.theme, base16Themes)!;
const theme = props.invertTheme ? invertTheme(props.theme) : props.theme;
const styling = createStylingFromTheme(theme);
@ -106,15 +128,69 @@ function createThemeState(props) {
return { base16Theme, styling };
}
export default class DevtoolsInspector extends Component {
constructor(props) {
super(props);
this.state = {
...createIntermediateState(props, props.monitorState),
interface ExternalProps<S, A extends Action<unknown>> {
dispatch: Dispatch<
DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
>;
preserveScrollTop?: boolean;
draggableActions: boolean;
select: (state: S) => unknown;
theme: keyof typeof base16Themes | Base16Theme;
supportImmutable: boolean;
diffObjectHash?: (item: unknown, index: number) => string;
diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
hideMainButtons?: boolean;
hideActionButtons?: boolean;
invertTheme: boolean;
dataTypeKey?: string;
tabs: Tab<S, A>[] | ((tabs: Tab<S, A>[]) => Tab<S, A>[]);
}
interface DefaultProps {
select: (state: unknown) => unknown;
supportImmutable: boolean;
draggableActions: boolean;
theme: keyof typeof base16Themes;
invertTheme: boolean;
}
export interface DevtoolsInspectorProps<S, A extends Action<unknown>>
extends LiftedState<S, A, DevtoolsInspectorState> {
dispatch: Dispatch<
DevtoolsInspectorAction | LiftedAction<S, A, DevtoolsInspectorState>
>;
preserveScrollTop?: boolean;
draggableActions: boolean;
select: (state: S) => unknown;
theme: keyof typeof base16Themes | Base16Theme;
supportImmutable: boolean;
diffObjectHash?: (item: unknown, index: number) => string;
diffPropertyFilter?: (name: string, context: DiffContext) => boolean;
hideMainButtons?: boolean;
hideActionButtons?: boolean;
invertTheme: boolean;
dataTypeKey?: string;
tabs: Tab<S, A>[] | ((tabs: Tab<S, A>[]) => Tab<S, A>[]);
}
interface State<S, A extends Action<unknown>> {
delta: Delta | null | undefined | false;
nextState: S;
action: A;
error: string | undefined;
isWideLayout: boolean;
themeState: { base16Theme: Base16Theme; styling: StylingFunction };
}
class DevtoolsInspector<S, A extends Action<unknown>> extends PureComponent<
DevtoolsInspectorProps<S, A>,
State<S, A>
> {
state: State<S, A> = {
...createIntermediateState(this.props, this.props.monitorState),
isWideLayout: false,
themeState: createThemeState(props),
themeState: createThemeState(this.props),
};
}
static propTypes = {
dispatch: PropTypes.func,
@ -127,7 +203,6 @@ export default class DevtoolsInspector extends Component {
}),
preserveScrollTop: PropTypes.bool,
draggableActions: PropTypes.bool,
stagedActions: PropTypes.array,
select: PropTypes.func.isRequired,
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
supportImmutable: PropTypes.bool,
@ -144,38 +219,42 @@ export default class DevtoolsInspector extends Component {
static update = reducer;
static defaultProps = {
select: (state) => state,
select: (state: unknown) => state,
supportImmutable: false,
draggableActions: true,
theme: 'inspector',
invertTheme: true,
};
shouldComponentUpdate = shouldPureComponentUpdate;
updateSizeTimeout?: number;
inspectorRef?: HTMLDivElement | null;
componentDidMount() {
this.updateSizeMode();
this.updateSizeTimeout = setInterval(this.updateSizeMode.bind(this), 150);
this.updateSizeTimeout = window.setInterval(
this.updateSizeMode.bind(this),
150
);
}
componentWillUnmount() {
clearTimeout(this.updateSizeTimeout);
}
updateMonitorState = (monitorState) => {
updateMonitorState = (monitorState: Partial<DevtoolsInspectorState>) => {
this.props.dispatch(updateMonitorState(monitorState));
};
updateSizeMode() {
const isWideLayout = this.inspectorRef.offsetWidth > 500;
const isWideLayout = this.inspectorRef!.offsetWidth > 500;
if (isWideLayout !== this.state.isWideLayout) {
this.setState({ isWideLayout });
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
let nextMonitorState = nextProps.monitorState;
UNSAFE_componentWillReceiveProps(nextProps: DevtoolsInspectorProps<S, A>) {
const nextMonitorState = nextProps.monitorState;
const monitorState = this.props.monitorState;
if (
@ -199,7 +278,7 @@ export default class DevtoolsInspector extends Component {
}
}
inspectorCreateRef = (node) => {
inspectorCreateRef: React.RefCallback<HTMLDivElement> = (node) => {
this.inspectorRef = node;
};
@ -289,7 +368,9 @@ export default class DevtoolsInspector extends Component {
monitorState={this.props.monitorState}
updateMonitorState={this.updateMonitorState}
styling={styling}
onInspectPath={this.handleInspectPath.bind(this, inspectedPathType)}
onInspectPath={(path: (string | number)[]) =>
this.handleInspectPath(inspectedPathType, path)
}
inspectedPath={monitorState[inspectedPathType]}
onSelectTab={this.handleSelectTab}
/>
@ -297,11 +378,11 @@ export default class DevtoolsInspector extends Component {
);
}
handleToggleAction = (actionId) => {
handleToggleAction = (actionId: number) => {
this.props.dispatch(toggleAction(actionId));
};
handleJumpToState = (actionId) => {
handleJumpToState = (actionId: number) => {
if (jumpToAction) {
this.props.dispatch(jumpToAction(actionId));
} else {
@ -311,7 +392,7 @@ export default class DevtoolsInspector extends Component {
}
};
handleReorderAction = (actionId, beforeActionId) => {
handleReorderAction = (actionId: number, beforeActionId: number) => {
if (reorderAction)
this.props.dispatch(reorderAction(actionId, beforeActionId));
};
@ -324,11 +405,14 @@ export default class DevtoolsInspector extends Component {
this.props.dispatch(sweep());
};
handleSearch = (val) => {
handleSearch = (val: string) => {
this.updateMonitorState({ searchValue: val });
};
handleSelectAction = (e, actionId) => {
handleSelectAction = (
e: React.MouseEvent<HTMLDivElement>,
actionId: number
) => {
const { monitorState } = this.props;
let startActionId;
let selectedActionId;
@ -367,11 +451,25 @@ export default class DevtoolsInspector extends Component {
this.updateMonitorState({ startActionId, selectedActionId });
};
handleInspectPath = (pathType, path) => {
handleInspectPath = (
pathType: 'inspectedActionPath' | 'inspectedStatePath',
path: (string | number)[]
) => {
this.updateMonitorState({ [pathType]: path });
};
handleSelectTab = (tabName) => {
handleSelectTab = (tabName: string) => {
this.updateMonitorState({ tabName });
};
}
export default (DevtoolsInspector as unknown) as React.ComponentType<
ExternalProps<unknown, Action<unknown>>
> & {
update(
monitorProps: ExternalProps<unknown, Action<unknown>>,
state: DevtoolsInspectorState | undefined,
action: DevtoolsInspectorAction
): DevtoolsInspectorState;
defaultProps: DefaultProps;
};

21
packages/redux-devtools-inspector/src/RightSlider.jsx
View File

@ -1,21 +0,0 @@
import React from 'react';
import { PropTypes } from 'prop-types';
const RightSlider = ({ styling, shown, children, rotate }) => (
<div
{...styling([
'rightSlider',
shown && 'rightSliderShown',
rotate && 'rightSliderRotate',
rotate && shown && 'rightSliderRotateShown',
])}
>
{children}
</div>
);
RightSlider.propTypes = {
shown: PropTypes.bool,
};
export default RightSlider;

37
packages/redux-devtools-inspector/src/RightSlider.tsx Normal file
View File

@ -0,0 +1,37 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { StylingFunction } from 'react-base16-styling';
interface Props {
styling: StylingFunction;
shown?: boolean;
children: React.ReactNode;
rotate?: boolean;
}
const RightSlider: FunctionComponent<Props> = ({
styling,
shown,
children,
rotate,
}) => (
<div
{...styling([
'rightSlider',
shown && 'rightSliderShown',
rotate && 'rightSliderRotate',
rotate && shown && 'rightSliderRotateShown',
])}
>
{children}
</div>
);
RightSlider.propTypes = {
styling: PropTypes.func.isRequired,
shown: PropTypes.bool,
children: PropTypes.any.isRequired,
rotate: PropTypes.bool,
};
export default RightSlider;

23
packages/redux-devtools-inspector/src/createDiffPatcher.js → packages/redux-devtools-inspector/src/createDiffPatcher.ts
View File

@ -1,28 +1,37 @@
import { DiffPatcher } from 'jsondiffpatch';
import { DiffContext, DiffPatcher } from 'jsondiffpatch';
const defaultObjectHash = (o, idx) =>
const defaultObjectHash = (o: any, idx: number) =>
(o === null && '$$null') ||
(o && (o.id || o.id === 0) && `$$id:${JSON.stringify(o.id)}`) ||
(o && (o._id || o._id === 0) && `$$_id:${JSON.stringify(o._id)}`) ||
'$$index:' + idx;
`$$index:${idx}`;
const defaultPropertyFilter = (name, context) =>
const defaultPropertyFilter = (name: string, context: DiffContext) =>
typeof context.left[name] !== 'function' &&
typeof context.right[name] !== 'function';
const defaultDiffPatcher = new DiffPatcher({
arrays: { detectMove: false },
arrays: { detectMove: false } as {
detectMove: boolean;
includeValueOnMove: boolean;
},
objectHash: defaultObjectHash,
propertyFilter: defaultPropertyFilter,
});
export default function createDiffPatcher(objectHash, propertyFilter) {
export default function createDiffPatcher(
objectHash: ((item: unknown, index: number) => string) | undefined,
propertyFilter: ((name: string, context: DiffContext) => boolean) | undefined
) {
if (!objectHash && !propertyFilter) {
return defaultDiffPatcher;
}
return new DiffPatcher({
arrays: { detectMove: false },
arrays: { detectMove: false } as {
detectMove: boolean;
includeValueOnMove: boolean;
},
objectHash: objectHash || defaultObjectHash,
propertyFilter: propertyFilter || defaultPropertyFilter,
});

1
packages/redux-devtools-inspector/src/index.js
View File

@ -1 +0,0 @@
export default from './DevtoolsInspector';

2
packages/redux-devtools-inspector/src/index.ts Normal file
View File

@ -0,0 +1,2 @@
import DevtoolsInspector from './DevtoolsInspector';
export default DevtoolsInspector;

28
packages/redux-devtools-inspector/src/redux.js
View File

@ -1,28 +0,0 @@
const UPDATE_MONITOR_STATE = '@@redux-devtools-inspector/UPDATE_MONITOR_STATE';
export const DEFAULT_STATE = {
selectedActionId: null,
startActionId: null,
inspectedActionPath: [],
inspectedStatePath: [],
tabName: 'Diff',
};
export function updateMonitorState(monitorState) {
return { type: UPDATE_MONITOR_STATE, monitorState };
}
function reduceUpdateState(state, action) {
return action.type === UPDATE_MONITOR_STATE
? {
...state,
...action.monitorState,
}
: state;
}
export function reducer(props, state = DEFAULT_STATE, action) {
return {
...reduceUpdateState(state, action),
};
}

55
packages/redux-devtools-inspector/src/redux.ts Normal file
View File

@ -0,0 +1,55 @@
import { Action } from 'redux';
import { DevtoolsInspectorProps } from './DevtoolsInspector';
const UPDATE_MONITOR_STATE = '@@redux-devtools-inspector/UPDATE_MONITOR_STATE';
interface UpdateMonitorStateAction {
type: typeof UPDATE_MONITOR_STATE;
monitorState: Partial<DevtoolsInspectorState>;
}
export function updateMonitorState(
monitorState: Partial<DevtoolsInspectorState>
): UpdateMonitorStateAction {
return { type: UPDATE_MONITOR_STATE, monitorState };
}
export type DevtoolsInspectorAction = UpdateMonitorStateAction;
export interface DevtoolsInspectorState {
selectedActionId: number | null;
startActionId: number | null;
inspectedActionPath: (string | number)[];
inspectedStatePath: (string | number)[];
tabName: string;
searchValue?: string;
}
export const DEFAULT_STATE: DevtoolsInspectorState = {
selectedActionId: null,
startActionId: null,
inspectedActionPath: [],
inspectedStatePath: [],
tabName: 'Diff',
};
function reduceUpdateState(
state: DevtoolsInspectorState,
action: DevtoolsInspectorAction
) {
return action.type === UPDATE_MONITOR_STATE
? {
...state,
...action.monitorState,
}
: state;
}
export function reducer<S, A extends Action<unknown>>(
props: DevtoolsInspectorProps<S, A>,
state = DEFAULT_STATE,
action: DevtoolsInspectorAction
) {
return {
...reduceUpdateState(state, action),
};
}

27
packages/redux-devtools-inspector/src/tabs/ActionTab.jsx
View File

@ -1,27 +0,0 @@
import React from 'react';
import JSONTree from 'react-json-tree';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
const ActionTab = ({
action,
styling,
base16Theme,
invertTheme,
labelRenderer,
dataTypeKey,
isWideLayout,
}) => (
<JSONTree
labelRenderer={labelRenderer}
theme={getJsonTreeTheme(base16Theme)}
data={action}
getItemString={(type, data) =>
getItemString(styling, type, data, dataTypeKey, isWideLayout)
}
invertTheme={invertTheme}
hideRoot
/>
);
export default ActionTab;

43
packages/redux-devtools-inspector/src/tabs/ActionTab.tsx Normal file
View File

@ -0,0 +1,43 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import JSONTree from 'react-json-tree';
import { Action } from 'redux';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
import { TabComponentProps } from '../ActionPreview';
const ActionTab: FunctionComponent<TabComponentProps<
unknown,
Action<unknown>
>> = ({
action,
styling,
base16Theme,
invertTheme,
labelRenderer,
dataTypeKey,
isWideLayout,
}) => (
<JSONTree
labelRenderer={labelRenderer}
theme={getJsonTreeTheme(base16Theme)}
data={action}
getItemString={(type, data) =>
getItemString(styling, type, data, dataTypeKey, isWideLayout)
}
invertTheme={invertTheme}
hideRoot
/>
);
ActionTab.propTypes = {
action: PropTypes.any.isRequired,
styling: PropTypes.func.isRequired,
base16Theme: PropTypes.any.isRequired,
invertTheme: PropTypes.bool.isRequired,
labelRenderer: PropTypes.func.isRequired,
dataTypeKey: PropTypes.string,
isWideLayout: PropTypes.bool.isRequired,
};
export default ActionTab;

24
packages/redux-devtools-inspector/src/tabs/DiffTab.jsx
View File

@ -1,24 +0,0 @@
import React from 'react';
import JSONDiff from './JSONDiff';
const DiffTab = ({
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
}) => (
<JSONDiff
{...{
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
}}
/>
);
export default DiffTab;

42
packages/redux-devtools-inspector/src/tabs/DiffTab.tsx Normal file
View File

@ -0,0 +1,42 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import JSONDiff from './JSONDiff';
import { TabComponentProps } from '../ActionPreview';
import { Action } from 'redux';
const DiffTab: FunctionComponent<TabComponentProps<
unknown,
Action<unknown>
>> = ({
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
dataTypeKey,
}) => (
<JSONDiff
{...{
delta,
styling,
base16Theme,
invertTheme,
labelRenderer,
isWideLayout,
dataTypeKey,
}}
/>
);
DiffTab.propTypes = {
delta: PropTypes.any,
styling: PropTypes.func.isRequired,
base16Theme: PropTypes.any.isRequired,
invertTheme: PropTypes.bool.isRequired,
labelRenderer: PropTypes.func.isRequired,
isWideLayout: PropTypes.bool.isRequired,
dataTypeKey: PropTypes.string,
};
export default DiffTab;

48
packages/redux-devtools-inspector/src/tabs/JSONDiff.jsx → packages/redux-devtools-inspector/src/tabs/JSONDiff.tsx
View File

@ -1,10 +1,13 @@
import React, { Component } from 'react';
import JSONTree from 'react-json-tree';
import { stringify } from 'javascript-stringify';
import { Delta } from 'jsondiffpatch';
import { StylingFunction } from 'react-base16-styling';
import { Base16Theme } from 'redux-devtools-themes';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
function stringifyAndShrink(val, isWideLayout) {
function stringifyAndShrink(val: any, isWideLayout?: boolean) {
if (val === null) {
return 'null';
}
@ -19,12 +22,16 @@ function stringifyAndShrink(val, isWideLayout) {
return str.length > 22 ? `${str.substr(0, 15)}…${str.substr(-5)}` : str;
}
const expandFirstLevel = (keyName, data, level) => level <= 1;
const expandFirstLevel = (
keyName: (string | number)[],
data: any,
level: number
) => level <= 1;
function prepareDelta(value) {
function prepareDelta(value: any) {
if (value && value._t === 'a') {
const res = {};
for (let key in value) {
const res: { [key: string]: any } = {};
for (const key in value) {
if (key !== '_t') {
if (key[0] === '_' && !value[key.substr(1)]) {
res[key.substr(1)] = value[key];
@ -41,14 +48,33 @@ function prepareDelta(value) {
return value;
}
export default class JSONDiff extends Component {
state = { data: {} };
interface Props {
delta: Delta | null | undefined | false;
styling: StylingFunction;
base16Theme: Base16Theme;
invertTheme: boolean;
labelRenderer: (
keyPath: (string | number)[],
nodeType: string,
expanded: boolean,
expandable: boolean
) => React.ReactNode;
isWideLayout: boolean;
dataTypeKey: string | undefined;
}
interface State {
data: any;
}
export default class JSONDiff extends Component<Props, State> {
state: State = { data: {} };
componentDidMount() {
this.updateData();
}
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: Props) {
if (prevProps.delta !== this.props.delta) {
this.updateData();
}
@ -84,7 +110,7 @@ export default class JSONDiff extends Component {
);
}
getItemString = (type, data) =>
getItemString = (type: string, data: any) =>
getItemString(
this.props.styling,
type,
@ -94,10 +120,10 @@ export default class JSONDiff extends Component {
true
);
valueRenderer = (raw, value) => {
valueRenderer = (raw: any, value: any) => {
const { styling, isWideLayout } = this.props;
function renderSpan(name, body) {
function renderSpan(name: string, body: string) {
return (
<span key={name} {...styling(['diff', name])}>
{body}

18
packages/redux-devtools-inspector/src/tabs/StateTab.jsx → packages/redux-devtools-inspector/src/tabs/StateTab.tsx
View File

@ -1,9 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import JSONTree from 'react-json-tree';
import { Action } from 'redux';
import getItemString from './getItemString';
import getJsonTreeTheme from './getJsonTreeTheme';
import { TabComponentProps } from '../ActionPreview';
const StateTab = ({
const StateTab: React.FunctionComponent<TabComponentProps<
any,
Action<unknown>
>> = ({
nextState,
styling,
base16Theme,
@ -24,4 +30,14 @@ const StateTab = ({
/>
);
StateTab.propTypes = {
nextState: PropTypes.any.isRequired,
styling: PropTypes.func.isRequired,
base16Theme: PropTypes.any.isRequired,
invertTheme: PropTypes.bool.isRequired,
labelRenderer: PropTypes.func.isRequired,
dataTypeKey: PropTypes.string,
isWideLayout: PropTypes.bool.isRequired,
};
export default StateTab;

42
packages/redux-devtools-inspector/src/tabs/getItemString.js → packages/redux-devtools-inspector/src/tabs/getItemString.tsx
View File

@ -1,18 +1,15 @@
import React from 'react';
import { Iterable } from 'immutable';
import { isCollection, isIndexed, isKeyed } from 'immutable';
import { StylingFunction } from 'react-base16-styling';
import isIterable from '../utils/isIterable';
const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
function isImmutable(value) {
return (
Iterable.isKeyed(value) ||
Iterable.isIndexed(value) ||
Iterable.isIterable(value)
);
function isImmutable(value: any) {
return isKeyed(value) || isIndexed(value) || isCollection(value);
}
function getShortTypeString(val, diff) {
function getShortTypeString(val: any, diff: boolean | undefined) {
if (diff && Array.isArray(val)) {
val = val[val.length === 2 ? 1 : 0];
}
@ -38,14 +35,21 @@ function getShortTypeString(val, diff) {
}
}
function getText(type, data, isWideLayout, isDiff) {
function getText(
type: string,
data: any,
isWideLayout: boolean,
isDiff: boolean | undefined
) {
if (type === 'Object') {
const keys = Object.keys(data);
if (!isWideLayout) return keys.length ? '{…}' : '{}';
const str = keys
.slice(0, 3)
.map((key) => `${key}: ${getShortTypeString(data[key], isDiff)}`)
.map(
(key) => `${key}: ${getShortTypeString(data[key], isDiff) as string}`
)
.concat(keys.length > 3 ? ['…'] : [])
.join(', ');
@ -55,27 +59,27 @@ function getText(type, data, isWideLayout, isDiff) {
const str = data
.slice(0, 4)
.map((val) => getShortTypeString(val, isDiff))
.map((val: any) => getShortTypeString(val, isDiff))
.concat(data.length > 4 ? ['…'] : [])
.join(', ');
return `[${str}]`;
return `[${str as string}]`;
} else {
return type;
}
}
const getItemString = (
styling,
type,
data,
dataTypeKey,
isWideLayout,
isDiff
styling: StylingFunction,
type: string,
data: any,
dataTypeKey: string | undefined,
isWideLayout: boolean,
isDiff?: boolean
) => (
<span {...styling('treeItemHint')}>
{data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
{dataTypeKey && data[dataTypeKey] ? data[dataTypeKey] + ' ' : ''}
{dataTypeKey && data[dataTypeKey] ? `${data[dataTypeKey] as string} ` : ''}
{getText(type, data, isWideLayout, isDiff)}
</span>
);

7
packages/redux-devtools-inspector/src/tabs/getJsonTreeTheme.js → packages/redux-devtools-inspector/src/tabs/getJsonTreeTheme.ts
View File

@ -1,4 +1,9 @@
export default function getJsonTreeTheme(base16Theme) {
import { Base16Theme } from 'redux-devtools-themes';
import { StylingConfig } from 'react-base16-styling';
export default function getJsonTreeTheme(
base16Theme: Base16Theme
): StylingConfig {
return {
extend: base16Theme,
nestedNode: ({ style }, keyPath, nodeType, expanded) => ({

0
packages/redux-devtools-inspector/src/themes/index.js → packages/redux-devtools-inspector/src/themes/index.ts
View File

0
packages/redux-devtools-inspector/src/themes/inspector.js → packages/redux-devtools-inspector/src/themes/inspector.ts
View File

16
packages/redux-devtools-inspector/src/utils/createStylingFromTheme.js → packages/redux-devtools-inspector/src/utils/createStylingFromTheme.ts
View File

@ -1,14 +1,15 @@
import jss from 'jss';
import jss, { Styles, StyleSheet } from 'jss';
import preset from 'jss-preset-default';
import { createStyling } from 'react-base16-styling';
import rgba from 'hex-rgba';
import { Base16Theme } from 'redux-devtools-themes';
import inspector from '../themes/inspector';
import * as reduxThemes from 'redux-devtools-themes';
import * as inspectorThemes from '../themes';
jss.setup(preset());
const colorMap = (theme) => ({
const colorMap = (theme: Base16Theme) => ({
TEXT_COLOR: theme.base06,
TEXT_PLACEHOLDER_COLOR: rgba(theme.base06, 60),
BACKGROUND_COLOR: theme.base00,
@ -34,7 +35,12 @@ const colorMap = (theme) => ({
ERROR_COLOR: theme.base08,
});
const getSheetFromColorMap = (map) => ({
type Color = keyof ReturnType<typeof colorMap>;
type ColorMap = {
[color in Color]: string;
};
const getSheetFromColorMap = (map: ColorMap) => ({
inspector: {
display: 'flex',
'flex-direction': 'column',
@ -384,9 +390,9 @@ const getSheetFromColorMap = (map) => ({
},
});
let themeSheet;
let themeSheet: StyleSheet;
const getDefaultThemeStyling = (theme) => {
const getDefaultThemeStyling = (theme: Base16Theme) => {
if (themeSheet) {
themeSheet.detach();
}

30
packages/redux-devtools-inspector/src/utils/deepMap.js
View File

@ -1,30 +0,0 @@
function deepMapCached(obj, f, ctx, cache) {
cache.push(obj);
if (Array.isArray(obj)) {
return obj.map(function (val, key) {
val = f.call(ctx, val, key);
return typeof val === 'object' && cache.indexOf(val) === -1
? deepMapCached(val, f, ctx, cache)
: val;
});
} else if (typeof obj === 'object') {
const res = {};
for (const key in obj) {
let val = obj[key];
if (val && typeof val === 'object') {
val = f.call(ctx, val, key);
res[key] =
cache.indexOf(val) === -1 ? deepMapCached(val, f, ctx, cache) : val;
} else {
res[key] = f.call(ctx, val, key);
}
}
return res;
} else {
return obj;
}
}
export default function deepMap(obj, f, ctx) {
return deepMapCached(obj, f, ctx, []);
}

22
packages/redux-devtools-inspector/src/utils/getInspectedState.js → packages/redux-devtools-inspector/src/utils/getInspectedState.ts
View File

@ -1,10 +1,10 @@
import { Iterable, fromJS } from 'immutable';
import { fromJS, isAssociative } from 'immutable';
import isIterable from './isIterable';
function iterateToKey(obj, key) {
function iterateToKey(obj: any, key: string | number) {
// maybe there's a better way, dunno
let idx = 0;
for (let entry of obj) {
for (const entry of obj) {
if (Array.isArray(entry)) {
if (entry[0] === key) return entry[1];
} else {
@ -15,24 +15,28 @@ function iterateToKey(obj, key) {
}
}
export default function getInspectedState(state, path, convertImmutable) {
export default function getInspectedState<S>(
state: S,
path: (string | number)[],
convertImmutable: boolean
): S {
state =
path && path.length
? {
[path[path.length - 1]]: path.reduce((s, key) => {
? ({
[path[path.length - 1]]: path.reduce((s: any, key) => {
if (!s) {
return s;
}
if (Iterable.isAssociative(s)) {
return s.get(key);
if (isAssociative(s)) {
return s.get(key as number);
} else if (isIterable(s)) {
return iterateToKey(s, key);
}
return s[key];
}, state),
}
} as S)
: state;
if (convertImmutable) {

2
packages/redux-devtools-inspector/src/utils/isIterable.js → packages/redux-devtools-inspector/src/utils/isIterable.ts
View File

@ -1,4 +1,4 @@
export default function isIterable(obj) {
export default function isIterable(obj: any) {
return (
obj !== null &&
typeof obj === 'object' &&

8
packages/redux-devtools-inspector/tsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "../../tsconfig.react.base.json",
"compilerOptions": {
"outDir": "lib",
"resolveJsonModule": true
},
"include": ["src"]
}

154
yarn.lock
View File

@ -25,7 +25,7 @@
dependencies:
"@babel/highlight" "^7.0.0"
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.8.3":
version "7.10.4"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
@ -1224,7 +1224,7 @@
dependencies:
regenerator-runtime "^0.12.0"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@ -3082,6 +3082,16 @@
dependencies:
"@types/node" "*"
"@types/dateformat@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@types/dateformat/-/dateformat-3.0.1.tgz#98d747a2e5e9a56070c6bf14e27bff56204e34cc"
integrity sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g==
"@types/dragula@*", "@types/dragula@^3.7.0":
version "3.7.0"
resolved "https://registry.yarnpkg.com/@types/dragula/-/dragula-3.7.0.tgz#62178f21c3896ab9823a33d08ed844ab9af496af"
integrity sha512-Scr3lQ7pDmwic+I4qrzDEIfPVGUhc/qo8S0VJJ9v5pzTyIIJzAXrnFajjsMSL8J84VERIkZUh7wH6wYEisY+TA==
"@types/eslint-visitor-keys@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@ -3121,6 +3131,16 @@
dependencies:
"@types/node" "*"
"@types/hex-rgba@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/hex-rgba/-/hex-rgba-1.0.0.tgz#b2aed2aa9fdd6152b7f0ac5e3733b974d4eba35a"
integrity sha512-u3AGV8fjRsDBqY4wOvVWhVCgKDfh2b0h3mux7KPKU1cm/6mJp14OWBINLgBypeBTM89Nm2j+eKQqIoIe7150DA==
"@types/history@*", "@types/history@^4.7.7":
version "4.7.7"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896"
integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg==
"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@ -3195,7 +3215,7 @@
resolved "https://registry.yarnpkg.com/@types/jsan/-/jsan-3.1.0.tgz#128fdb14a102134ede764b11682e795d1b380c43"
integrity sha512-V5wfm0++TqM92D0ZkAhl9MDQHPTi88fXhMNVin5LV/Y3RnuU/FUv6wML4Vt/amZmPN9WaFTmDhKW+h58kAFmIg==
"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4":
"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5":
version "7.0.5"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
@ -3214,6 +3234,13 @@
dependencies:
"@types/lodash" "*"
"@types/lodash.shuffle@^4.2.6":
version "4.2.6"
resolved "https://registry.yarnpkg.com/@types/lodash.shuffle/-/lodash.shuffle-4.2.6.tgz#191b0fc66699214558352123811d1657d9ed8930"
integrity sha512-ucI9VswlV9jOZiIh43Nd0tJ4Z8pfXy3PbQ9cB6Re1gPds8gLbOdmB0l3UkVI2crZjnQB95bhyNZVEDH8DgglYA==
dependencies:
"@types/lodash" "*"
"@types/lodash@*", "@types/lodash@^4.14.159":
version "4.14.159"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.159.tgz#61089719dc6fdd9c5cb46efc827f2571d1517065"
@ -3296,6 +3323,13 @@
dependencies:
"@types/react" "*"
"@types/react-dragula@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@types/react-dragula/-/react-dragula-1.1.0.tgz#c7a6840891c52aa5007a8f8b87b31985fbc3c5b2"
integrity sha512-wgRIVV2jo/Gria1PK3K26II7gfRD3VTcMfPYhL0CuIApSeon7xjBTj8Xs8Ln+Vbb/FuRKWfUaJXmF4R3KUGntA==
dependencies:
"@types/dragula" "*"
"@types/react-native@*":
version "0.63.8"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.8.tgz#73ec087122c64c309eeaf150b565b8d755f0fb1f"
@ -3313,6 +3347,14 @@
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-router@^5.1.8":
version "5.1.8"
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.8.tgz#4614e5ba7559657438e17766bb95ef6ed6acc3fa"
integrity sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg==
dependencies:
"@types/history" "*"
"@types/react" "*"
"@types/react-test-renderer@^16.9.3":
version "16.9.3"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.3.tgz#96bab1860904366f4e848b739ba0e2f67bcae87e"
@ -3342,6 +3384,13 @@
dependencies:
"@types/base16" "*"
"@types/redux-logger@^3.0.8":
version "3.0.8"
resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.8.tgz#1fb6d26917bb198792bb1cf57feb31cae1532c5d"
integrity sha512-zM+cxiSw6nZtRbxpVp9SE3x/X77Z7e7YAfHD1NkxJyJbAGSXJGF0E9aqajZfPOa/sTYnuwutmlCldveExuCeLw==
dependencies:
redux "^4.0.0"
"@types/serve-static@*":
version "1.13.5"
resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.5.tgz#3d25d941a18415d3ab092def846e135a08bbcf53"
@ -4270,6 +4319,11 @@ asynckit@^0.4.0:
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
at-least-node@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
atoa@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/atoa/-/atoa-1.0.0.tgz#0cc0e91a480e738f923ebc103676471779b34a49"
@ -7886,6 +7940,23 @@ forever-agent@~0.6.1:
resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
fork-ts-checker-webpack-plugin@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.1.0.tgz#586fbee24aeea950c53bab529e32017f543e71cf"
integrity sha512-vuKyEjSLGbhQbEr5bifXXOkr9iV73L6n72mHoHIv7okvrf7O7z6RKeplM6C6ATPsukoQivij+Ba1vcptL60Z2g==
dependencies:
"@babel/code-frame" "^7.8.3"
"@types/json-schema" "^7.0.5"
chalk "^4.1.0"
cosmiconfig "^6.0.0"
deepmerge "^4.2.2"
fs-extra "^9.0.0"
memfs "^3.1.2"
minimatch "^3.0.4"
schema-utils "2.7.0"
semver "^7.3.2"
tapable "^1.0.0"
form-data@^2.3.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
@ -7972,6 +8043,16 @@ fs-extra@^8.1.0:
jsonfile "^4.0.0"
universalify "^0.1.0"
fs-extra@^9.0.0:
version "9.0.1"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
dependencies:
at-least-node "^1.0.0"
graceful-fs "^4.2.0"
jsonfile "^6.0.1"
universalify "^1.0.0"
fs-minipass@^1.2.5:
version "1.2.7"
resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
@ -7979,6 +8060,11 @@ fs-minipass@^1.2.5:
dependencies:
minipass "^2.6.0"
fs-monkey@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.1.tgz#4a82f36944365e619f4454d9fff106553067b781"
integrity sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA==
fs-readdir-recursive@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@ -10248,6 +10334,15 @@ jsonfile@^4.0.0:
optionalDependencies:
graceful-fs "^4.1.6"
jsonfile@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
integrity sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==
dependencies:
universalify "^1.0.0"
optionalDependencies:
graceful-fs "^4.1.6"
jsonify@~0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
@ -10866,7 +10961,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, lodash@^4.8.0:
lodash@^4.0.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0:
version "4.17.19"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
@ -11106,6 +11201,13 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
memfs@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.2.0.tgz#f9438e622b5acd1daa8a4ae160c496fdd1325b26"
integrity sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==
dependencies:
fs-monkey "1.0.1"
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -13238,11 +13340,6 @@ react-color@^2.14.1:
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-deep-force-update@^1.0.0:
version "1.1.2"
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
integrity sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA==
react-dev-utils@^6.1.0:
version "6.1.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-6.1.1.tgz#a07e3e8923c4609d9f27e5af5207e3ca20724895"
@ -13404,14 +13501,6 @@ react-overlays@^4.1.0:
uncontrollable "^7.0.0"
warning "^4.0.3"
react-proxy@^1.1.7:
version "1.1.8"
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
integrity sha1-nb/Z2SdSjDqp9ETkVYw3gwq4wmo=
dependencies:
lodash "^4.6.1"
react-deep-force-update "^1.0.0"
react-pure-render@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-pure-render/-/react-pure-render-1.0.2.tgz#9d8a928c7f2c37513c2d064e57b3e3c356e9fabb"
@ -13487,14 +13576,6 @@ react-textarea-autosize@^7.0.4:
"@babel/runtime" "^7.1.2"
prop-types "^15.6.0"
react-transform-hmr@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
integrity sha1-4aQL0Krvxy6N/Xp82gmvhQZjl7s=
dependencies:
global "^4.3.0"
react-proxy "^1.1.7"
react-transition-group@^2.0.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@ -14322,6 +14403,15 @@ scheduler@^0.19.1:
loose-envify "^1.1.0"
object-assign "^4.1.1"
schema-utils@2.7.0, schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
dependencies:
"@types/json-schema" "^7.0.4"
ajv "^6.12.2"
ajv-keywords "^3.4.1"
schema-utils@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@ -14331,15 +14421,6 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
dependencies:
"@types/json-schema" "^7.0.4"
ajv "^6.12.2"
ajv-keywords "^3.4.1"
seamless-immutable@^7.1.4:
version "7.1.4"
resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
@ -16132,6 +16213,11 @@ universalify@^0.1.0:
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
universalify@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
unpipe@1.0.0, unpipe@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"