feat(redux-devtools): convert counter example to TypeScript (#616)

* stash

* finish

* optional

packages/react-json-tree/examples/package.json

@@ -13,7 +13,11 @@
   },
   "scripts": {
     "start": "webpack-dev-server --open",
-    "stats": "NODE_ENV=production webpack --json > dist/stats.json"
+    "stats": "NODE_ENV=production webpack --json > dist/stats.json",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch"
   },
   "dependencies": {
     "immutable": "^4.0.0-rc.12",

packages/redux-devtools-dock-monitor/src/DockMonitor.tsx

@@ -23,6 +23,29 @@ interface KeyObject {
   sequence: string;
 }
 
+interface ExternalProps<S, A extends Action<unknown>> {
+  defaultPosition: 'left' | 'top' | 'right' | 'bottom';
+  defaultIsVisible: boolean;
+  defaultSize: number;
+  toggleVisibilityKey: string;
+  changePositionKey: string;
+  changeMonitorKey?: string;
+  fluid: boolean;
+
+  dispatch: Dispatch<DockMonitorAction>;
+
+  children:
+    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>
+    | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
+}
+
+interface DefaultProps {
+  defaultIsVisible: boolean;
+  defaultPosition: 'left' | 'top' | 'right' | 'bottom';
+  defaultSize: number;
+  fluid: boolean;
+}
+
 export interface DockMonitorProps<S, A extends Action<unknown>>
   extends LiftedState<S, A, DockMonitorState> {
   defaultPosition: 'left' | 'top' | 'right' | 'bottom';
@@ -40,10 +63,9 @@ export interface DockMonitorProps<S, A extends Action<unknown>>
     | Monitor<S, A, LiftedState<S, A, unknown>, unknown, Action<unknown>>[];
 }
 
-export default class DockMonitor<
-  S,
-  A extends Action<unknown>
-> extends Component<DockMonitorProps<S, A>> {
+class DockMonitor<S, A extends Action<unknown>> extends Component<
+  DockMonitorProps<S, A>
+> {
   static update = reducer;
 
   static propTypes = {
@@ -64,7 +86,7 @@ export default class DockMonitor<
     }),
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps = {
     defaultIsVisible: true,
     defaultPosition: 'right',
     defaultSize: 0.3,
@@ -212,3 +234,14 @@ export default class DockMonitor<
     );
   }
 }
+
+export default (DockMonitor as unknown) as React.ComponentType<
+  ExternalProps<unknown, Action<unknown>>
+> & {
+  update(
+    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    state: DockMonitorState | undefined,
+    action: DockMonitorAction
+  ): DockMonitorState;
+  defaultProps: DefaultProps;
+};

packages/redux-devtools-log-monitor/src/LogMonitor.tsx

@@ -13,6 +13,8 @@ import reducer, { LogMonitorState } from './reducers';
 import LogMonitorButtonBar from './LogMonitorButtonBar';
 import LogMonitorEntryList from './LogMonitorEntryList';
 import debounce from 'lodash.debounce';
+import { DockMonitorState } from 'redux-devtools-dock-monitor/lib/reducers';
+import { DockMonitorAction } from 'redux-devtools-dock-monitor/lib/actions';
 
 // eslint-disable-next-line @typescript-eslint/unbound-method
 const { toggleAction, setActionsActive } = ActionCreators;
@@ -41,6 +43,27 @@ const styles: {
   },
 };
 
+interface ExternalProps<S, A extends Action<unknown>> {
+  dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
+
+  preserveScrollTop: boolean;
+  select: (state: S) => unknown;
+  theme: keyof typeof themes | Base16Theme;
+  expandActionRoot: boolean;
+  expandStateRoot: boolean;
+  markStateDiff: boolean;
+  hideMainButtons?: boolean;
+}
+
+interface DefaultProps<S> {
+  select: (state: unknown) => unknown;
+  theme: keyof typeof themes | Base16Theme;
+  preserveScrollTop: boolean;
+  expandActionRoot: boolean;
+  expandStateRoot: boolean;
+  markStateDiff: boolean;
+}
+
 export interface LogMonitorProps<S, A extends Action<unknown>>
   extends LiftedState<S, A, LogMonitorState> {
   dispatch: Dispatch<LogMonitorAction | LiftedAction<S, A, LogMonitorState>>;
@@ -54,10 +77,9 @@ export interface LogMonitorProps<S, A extends Action<unknown>>
   hideMainButtons?: boolean;
 }
 
-export default class LogMonitor<
-  S,
-  A extends Action<unknown>
-> extends PureComponent<LogMonitorProps<S, A>> {
+class LogMonitor<S, A extends Action<unknown>> extends PureComponent<
+  LogMonitorProps<S, A>
+> {
   static update = reducer;
 
   static propTypes = {
@@ -80,7 +102,7 @@ export default class LogMonitor<
     hideMainButtons: PropTypes.bool,
   };
 
-  static defaultProps = {
+  static defaultProps: DefaultProps<unknown> = {
     select: (state: unknown) => state,
     theme: 'nicinabox',
     preserveScrollTop: true,
@@ -248,3 +270,14 @@ export default class LogMonitor<
     );
   }
 }
+
+export default (LogMonitor as unknown) as React.ComponentType<
+  ExternalProps<unknown, Action<unknown>>
+> & {
+  update(
+    monitorProps: ExternalProps<unknown, Action<unknown>>,
+    state: DockMonitorState | undefined,
+    action: DockMonitorAction
+  ): DockMonitorState;
+  defaultProps: DefaultProps<unknown>;
+};

packages/redux-devtools/examples/counter/.babelrc

@@ -1,5 +1,9 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
   "plugins": [
     "@babel/plugin-proposal-class-properties",
     "react-hot-loader/babel"

packages/redux-devtools/examples/counter/.eslintrc.js

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

packages/redux-devtools/examples/counter/package.json

@@ -2,39 +2,40 @@
   "name": "counter-redux",
   "version": "0.0.1",
   "description": "Counter example for redux",
-  "private": true,
-  "main": "src/index.js",
-  "scripts": {
-    "start": "webpack-dev-server --open"
+  "homepage": "https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools/examples/counter",
+  "bugs": {
+    "url": "https://github.com/reduxjs/redux-devtools/issues"
   },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/reduxjs/redux-devtools.git"
   },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/reduxjs/redux-devtools/issues"
+  "scripts": {
+    "start": "webpack-dev-server --open",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch"
   },
-  "homepage": "https://github.com/reduxjs/redux-devtools#readme",
   "dependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.21",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "babel-loader": "^8.1.0",
     "redux-devtools": "^3.6.1",
     "redux-devtools-dock-monitor": "^1.1.4",
     "redux-devtools-log-monitor": "^2.0.1",
-    "webpack": "^4.44.1",
-    "webpack-dev-server": "^3.11.0"
-  }
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/webpack-env": "^1.15.2"
+  },
+  "private": true
 }

packages/redux-devtools/examples/counter/src/actions/CounterActions.ts

@@ -0,0 +1,53 @@
+import { ThunkAction } from 'redux-thunk';
+import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';
+import { CounterState } from '../reducers';
+
+interface IncrementCounterAction {
+  type: typeof INCREMENT_COUNTER;
+}
+export function increment(): IncrementCounterAction {
+  return {
+    type: INCREMENT_COUNTER,
+  };
+}
+
+interface DecrementCounterAction {
+  type: typeof DECREMENT_COUNTER;
+}
+export function decrement(): DecrementCounterAction {
+  return {
+    type: DECREMENT_COUNTER,
+  };
+}
+
+export type CounterAction = IncrementCounterAction | DecrementCounterAction;
+
+export function incrementIfOdd(): ThunkAction<
+  void,
+  CounterState,
+  never,
+  CounterAction
+> {
+  return (dispatch, getState) => {
+    const { counter } = getState();
+
+    if (counter % 2 === 0) {
+      return;
+    }
+
+    dispatch(increment());
+  };
+}
+
+export function incrementAsync(): ThunkAction<
+  void,
+  CounterState,
+  never,
+  CounterAction
+> {
+  return (dispatch) => {
+    setTimeout(() => {
+      dispatch(increment());
+    }, 1000);
+  };
+}

packages/redux-devtools/examples/counter/src/components/Counter.js → packages/redux-devtools/examples/counter/src/components/Counter.tsx

@@ -1,7 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-export default class Counter extends Component {
+interface Props {
+  increment: () => void;
+  incrementIfOdd: () => void;
+  decrement: () => void;
+  counter: number;
+}
+
+export default class Counter extends Component<Props> {
   static propTypes = {
     increment: PropTypes.func.isRequired,
     incrementIfOdd: PropTypes.func.isRequired,

packages/redux-devtools/examples/counter/src/containers/CounterApp.js → packages/redux-devtools/examples/counter/src/containers/CounterApp.tsx

@@ -1,10 +1,17 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from 'redux';
+import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import Counter from '../components/Counter';
 import * as CounterActions from '../actions/CounterActions';
+import { CounterAction } from '../actions/CounterActions';
+import { CounterState } from '../reducers';
 
-class CounterApp extends Component {
+interface Props {
+  counter: number;
+  dispatch: Dispatch<CounterAction>;
+}
+
+class CounterApp extends Component<Props> {
   render() {
     const { counter, dispatch } = this.props;
     return (
@@ -16,7 +23,7 @@ class CounterApp extends Component {
   }
 }
 
-function select(state) {
+function select(state: CounterState) {
   return {
     counter: state.counter,
   };