Skip to content

Commit b4ec7f8

Browse files
Methuselah96Methuselah96
authoredAug 26, 2020
feat(redux-devtools-dock-monitor): convert to TypeScript (#609)
* stash * more * Fix
·
v3.0.0-beta.1counter-redux@0.1.0
1 parent 47af8c9 commit b4ec7f8

14 files changed

+234
-85
lines changed
 

‎packages/redux-devtools-dock-monitor/.babelrc

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
2-
"presets": ["@babel/preset-env", "@babel/preset-react"],
3-
"plugins": [
4-
"@babel/plugin-proposal-class-properties",
5-
"@babel/plugin-proposal-export-default-from"
6-
]
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react",
5+
"@babel/preset-typescript"
6+
],
7+
"plugins": ["@babel/plugin-proposal-class-properties"]
78
}

‎packages/redux-devtools-dock-monitor/.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
lib

‎packages/redux-devtools-dock-monitor/.eslintrc.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
extends: '../../.eslintrc',
3+
overrides: [
4+
{
5+
files: ['*.ts', '*.tsx'],
6+
extends: '../../eslintrc.ts.react.base.json',
7+
parserOptions: {
8+
tsconfigRootDir: __dirname,
9+
project: ['./tsconfig.json'],
10+
},
11+
},
12+
],
13+
};

‎packages/redux-devtools-dock-monitor/package.json

+37-33
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,6 @@
22
"name": "redux-devtools-dock-monitor",
33
"version": "1.1.4",
44
"description": "A resizable and movable dock for Redux DevTools monitors",
5-
"main": "lib/index.js",
6-
"files": [
7-
"lib",
8-
"src"
9-
],
10-
"scripts": {
11-
"clean": "rimraf lib",
12-
"build": "babel src --out-dir lib",
13-
"prepare": "npm run build",
14-
"prepublishOnly": "npm run test && npm run clean && npm run build"
15-
},
16-
"repository": {
17-
"type": "git",
18-
"url": "https://github.com/reduxjs/redux-devtools.git"
19-
},
205
"keywords": [
216
"redux",
227
"devtools",
@@ -26,31 +11,50 @@
2611
"time travel",
2712
"live edit"
2813
],
29-
"author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
30-
"license": "MIT",
14+
"homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor",
3115
"bugs": {
3216
"url": "https://github.com/reduxjs/redux-devtools/issues"
3317
},
34-
"homepage": "https://github.com/reduxjs/redux-devtools",
35-
"devDependencies": {
36-
"@babel/cli": "^7.10.5",
37-
"@babel/core": "^7.11.1",
38-
"@babel/plugin-proposal-class-properties": "^7.10.4",
39-
"@babel/plugin-proposal-export-default-from": "^7.10.4",
40-
"@babel/preset-env": "^7.11.0",
41-
"@babel/preset-react": "^7.10.4",
42-
"babel-loader": "^8.1.0",
43-
"rimraf": "^3.0.2"
18+
"license": "MIT",
19+
"author": "Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)",
20+
"files": [
21+
"lib",
22+
"src"
23+
],
24+
"main": "lib/index.js",
25+
"types": "lib/index.d.ts",
26+
"repository": {
27+
"type": "git",
28+
"url": "https://github.com/reduxjs/redux-devtools.git"
4429
},
45-
"peerDependencies": {
46-
"react": "^0.14.9 || ^15.3.0 || ^16.0.0",
47-
"redux-devtools": "^3.4.0"
30+
"scripts": {
31+
"build": "npm run build:types && npm run build:js",
32+
"build:types": "tsc --emitDeclarationOnly",
33+
"build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline",
34+
"clean": "rimraf lib",
35+
"lint": "eslint . --ext .ts,.tsx",
36+
"lint:fix": "eslint . --ext .ts,.tsx --fix",
37+
"type-check": "tsc --noEmit",
38+
"type-check:watch": "npm run type-check -- --watch",
39+
"preversion": "npm run type-check && npm run lint && npm run test",
40+
"prepublishOnly": "npm run clean && npm run build"
4841
},
4942
"dependencies": {
50-
"babel-runtime": "^6.26.0",
43+
"@types/prop-types": "^15.7.3",
5144
"parse-key": "^0.2.1",
5245
"prop-types": "^15.7.2",
53-
"react-dock": "^0.2.4",
54-
"react-pure-render": "^1.0.2"
46+
"react-dock": "^0.2.4"
47+
},
48+
"devDependencies": {
49+
"@types/react": "^16.9.46",
50+
"react": "^16.13.1",
51+
"redux": "^4.0.5",
52+
"redux-devtools": "^3.6.1"
53+
},
54+
"peerDependencies": {
55+
"@types/react": "^16.3.18",
56+
"react": "^16.3.0",
57+
"redux": "^3.4.0 || ^4.0.0",
58+
"redux-devtools": "^3.4.0"
5559
}
5660
}

‎packages/redux-devtools-dock-monitor/src/DockMonitor.js renamed to ‎packages/redux-devtools-dock-monitor/src/DockMonitor.tsx

+69-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,49 @@
11
import React, { cloneElement, Children, Component } from 'react';
22
import PropTypes from 'prop-types';
33
import Dock from 'react-dock';
4+
import { Action, Dispatch } from 'redux';
5+
import { LiftedState, Monitor } from 'redux-devtools';
46
import { POSITIONS } from './constants';
57
import {
68
toggleVisibility,
79
changeMonitor,
810
changePosition,
911
changeSize,
12+
DockMonitorAction,
1013
} from './actions';
11-
import reducer from './reducers';
14+
import reducer, { DockMonitorState } from './reducers';
1215
import parseKey from 'parse-key';
1316

14-
export default class DockMonitor extends Component {
17+
interface KeyObject {
18+
name: string;
19+
ctrl: boolean;
20+
meta: boolean;
21+
shift: boolean;
22+
alt: boolean;
23+
sequence: string;
24+
}
25+
26+
export interface DockMonitorProps<S, A extends Action<unknown>>
27+
extends LiftedState<S, A, DockMonitorState> {
28+
defaultPosition: 'left' | 'top' | 'right' | 'bottom';
29+
defaultIsVisible: boolean;
30+
defaultSize: number;
31+
toggleVisibilityKey: string;
32+
changePositionKey: string;
33+
changeMonitorKey?: string;
34+
fluid: boolean;
35+
36+
dispatch: Dispatch<DockMonitorAction>;
37+
38+
children:
39+
| Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>
40+
| Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
41+
}
42+
43+
export default class DockMonitor<
44+
S,
45+
A extends Action<unknown>
46+
> extends Component<DockMonitorProps<S, A>> {
1547
static update = reducer;
1648

1749
static propTypes = {
@@ -39,10 +71,8 @@ export default class DockMonitor extends Component {
3971
fluid: true,
4072
};
4173

42-
constructor(props) {
74+
constructor(props: DockMonitorProps<S, A>) {
4375
super(props);
44-
this.handleKeyDown = this.handleKeyDown.bind(this);
45-
this.handleSizeChange = this.handleSizeChange.bind(this);
4676

4777
const childrenCount = Children.count(props.children);
4878
if (childrenCount === 0) {
@@ -71,7 +101,7 @@ export default class DockMonitor extends Component {
71101
window.removeEventListener('keydown', this.handleKeyDown);
72102
}
73103

74-
matchesKey(key, event) {
104+
matchesKey(key: KeyObject | undefined, event: KeyboardEvent) {
75105
if (!key) {
76106
return false;
77107
}
@@ -87,17 +117,17 @@ export default class DockMonitor extends Component {
87117
);
88118
}
89119

90-
handleKeyDown(e) {
120+
handleKeyDown = (e: KeyboardEvent) => {
91121
// Ignore regular keys when focused on a field
92122
// and no modifiers are active.
93123
if (
94124
!e.ctrlKey &&
95125
!e.metaKey &&
96126
!e.altKey &&
97-
(e.target.tagName === 'INPUT' ||
98-
e.target.tagName === 'SELECT' ||
99-
e.target.tagName === 'TEXTAREA' ||
100-
e.target.isContentEditable)
127+
((e.target! as { tagName?: string }).tagName === 'INPUT' ||
128+
(e.target! as { tagName?: string }).tagName === 'SELECT' ||
129+
(e.target! as { tagName?: string }).tagName === 'TEXTAREA' ||
130+
(e.target! as { isContentEditable?: boolean }).isContentEditable)
101131
) {
102132
return;
103133
}
@@ -120,13 +150,20 @@ export default class DockMonitor extends Component {
120150
e.preventDefault();
121151
this.props.dispatch(changeMonitor());
122152
}
123-
}
153+
};
124154

125-
handleSizeChange(requestedSize) {
155+
handleSizeChange = (requestedSize: number) => {
126156
this.props.dispatch(changeSize(requestedSize));
127-
}
157+
};
128158

129-
renderChild(child, index, otherProps) {
159+
renderChild(
160+
child: Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>,
161+
index: number,
162+
otherProps: Omit<
163+
DockMonitorProps<S, A>,
164+
'monitorState' | 'children' | 'fluid'
165+
>
166+
) {
130167
const { monitorState } = this.props;
131168
const { childMonitorIndex, childMonitorStates } = monitorState;
132169

@@ -153,8 +190,23 @@ export default class DockMonitor extends Component {
153190
onSizeChange={this.handleSizeChange}
154191
dimMode="none"
155192
>
156-
{Children.map(children, (child, index) =>
157-
this.renderChild(child, index, rest)
193+
{Children.map(
194+
children as
195+
| Monitor<
196+
S,
197+
A,
198+
LiftedState<S, A, unknown>,
199+
unknown,
200+
Action<unknown>
201+
>
202+
| Monitor<
203+
S,
204+
A,
205+
LiftedState<S, A, unknown>,
206+
unknown,
207+
Action<unknown>
208+
>[],
209+
(child, index) => this.renderChild(child, index, rest)
158210
)}
159211
</Dock>
160212
);

‎packages/redux-devtools-dock-monitor/src/actions.js

-20
This file was deleted.

‎packages/redux-devtools-dock-monitor/src/actions.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export const TOGGLE_VISIBILITY =
2+
'@@redux-devtools-log-monitor/TOGGLE_VISIBILITY';
3+
interface ToggleVisibilityAction {
4+
type: typeof TOGGLE_VISIBILITY;
5+
}
6+
export function toggleVisibility(): ToggleVisibilityAction {
7+
return { type: TOGGLE_VISIBILITY };
8+
}
9+
10+
export const CHANGE_POSITION = '@@redux-devtools-log-monitor/CHANGE_POSITION';
11+
interface ChangePositionAction {
12+
type: typeof CHANGE_POSITION;
13+
}
14+
export function changePosition(): ChangePositionAction {
15+
return { type: CHANGE_POSITION };
16+
}
17+
18+
export const CHANGE_SIZE = '@@redux-devtools-log-monitor/CHANGE_SIZE';
19+
interface ChangeSizeAction {
20+
type: typeof CHANGE_SIZE;
21+
size: number;
22+
}
23+
export function changeSize(size: number): ChangeSizeAction {
24+
return { type: CHANGE_SIZE, size: size };
25+
}
26+
27+
export const CHANGE_MONITOR = '@@redux-devtools-log-monitor/CHANGE_MONITOR';
28+
interface ChangeMonitorAction {
29+
type: typeof CHANGE_MONITOR;
30+
}
31+
export function changeMonitor(): ChangeMonitorAction {
32+
return { type: CHANGE_MONITOR };
33+
}
34+
35+
export type DockMonitorAction =
36+
| ToggleVisibilityAction
37+
| ChangePositionAction
38+
| ChangeSizeAction
39+
| ChangeMonitorAction;

‎packages/redux-devtools-dock-monitor/src/constants.js

-1
This file was deleted.

‎packages/redux-devtools-dock-monitor/src/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const POSITIONS = ['left', 'top', 'right', 'bottom'] as const;

‎packages/redux-devtools-dock-monitor/src/index.js

-1
This file was deleted.

‎packages/redux-devtools-dock-monitor/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import DockMonitor from './DockMonitor';
2+
export default DockMonitor;

‎packages/redux-devtools-dock-monitor/src/parse-key.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
declare module 'parse-key' {
2+
interface KeyObject {
3+
name: string;
4+
ctrl: boolean;
5+
meta: boolean;
6+
shift: boolean;
7+
alt: boolean;
8+
sequence: string;
9+
}
10+
11+
export default function parse(s: string): KeyObject;
12+
}

‎packages/redux-devtools-dock-monitor/src/reducers.js renamed to ‎packages/redux-devtools-dock-monitor/src/reducers.ts

+47-8
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,64 @@
1+
import { Children } from 'react';
2+
import { Action } from 'redux';
13
import {
24
CHANGE_MONITOR,
35
CHANGE_POSITION,
46
CHANGE_SIZE,
7+
DockMonitorAction,
58
TOGGLE_VISIBILITY,
69
} from './actions';
710
import { POSITIONS } from './constants';
8-
import { Children } from 'react';
11+
import { DockMonitorProps } from './DockMonitor';
12+
13+
export interface DockMonitorState {
14+
position: 'left' | 'top' | 'right' | 'bottom';
15+
size: number;
16+
isVisible: boolean;
17+
childMonitorStates: unknown[];
18+
childMonitorIndex: number;
19+
}
920

10-
function position(props, state = props.defaultPosition, action) {
21+
function position<S, A extends Action<unknown>>(
22+
props: DockMonitorProps<S, A>,
23+
state = props.defaultPosition,
24+
action: DockMonitorAction
25+
) {
1126
return action.type === CHANGE_POSITION
1227
? POSITIONS[(POSITIONS.indexOf(state) + 1) % POSITIONS.length]
1328
: state;
1429
}
1530

16-
function size(props, state = props.defaultSize, action) {
31+
function size<S, A extends Action<unknown>>(
32+
props: DockMonitorProps<S, A>,
33+
state = props.defaultSize,
34+
action: DockMonitorAction
35+
) {
1736
return action.type === CHANGE_SIZE ? action.size : state;
1837
}
1938

20-
function isVisible(props, state = props.defaultIsVisible, action) {
39+
function isVisible<S, A extends Action<unknown>>(
40+
props: DockMonitorProps<S, A>,
41+
state = props.defaultIsVisible,
42+
action: DockMonitorAction
43+
) {
2144
return action.type === TOGGLE_VISIBILITY ? !state : state;
2245
}
2346

24-
function childMonitorStates(props, state = [], action) {
47+
function childMonitorStates<S, A extends Action<unknown>>(
48+
props: DockMonitorProps<S, A>,
49+
state: unknown[] = [],
50+
action: DockMonitorAction
51+
) {
2552
return Children.map(props.children, (child, index) =>
2653
child.type.update(child.props, state[index], action)
2754
);
2855
}
2956

30-
function childMonitorIndex(props, state = 0, action) {
57+
function childMonitorIndex<S, A extends Action<unknown>>(
58+
props: DockMonitorProps<S, A>,
59+
state = 0,
60+
action: DockMonitorAction
61+
) {
3162
switch (action.type) {
3263
case CHANGE_MONITOR:
3364
return (state + 1) % Children.count(props.children);
@@ -36,14 +67,22 @@ function childMonitorIndex(props, state = 0, action) {
3667
}
3768
}
3869

39-
export default function reducer(props, state = {}, action) {
70+
export default function reducer<S, A extends Action<unknown>>(
71+
props: DockMonitorProps<S, A>,
72+
state: Partial<DockMonitorState> = {},
73+
action: DockMonitorAction
74+
): DockMonitorState {
4075
if (!state.childMonitorStates) {
4176
Children.forEach(props.children, (child, index) => {
4277
if (typeof child.type.update !== 'function') {
4378
// eslint-disable-next-line no-console
4479
console.error(
4580
`Child of <DockMonitor> with the index ${index} ` +
46-
`(${child.type.displayName || child.type.name || child.type}) ` +
81+
`(${
82+
child.type.displayName ||
83+
child.type.name ||
84+
((child.type as unknown) as string)
85+
}) ` +
4786
'does not appear to be a valid Redux DevTools monitor.'
4887
);
4988
}

‎packages/redux-devtools-dock-monitor/tsconfig.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "../../tsconfig.react.base.json",
3+
"compilerOptions": {
4+
"outDir": "lib"
5+
},
6+
"include": ["src"]
7+
}

0 commit comments

Comments
 (0)
Please sign in to comment.