log-monitor

packages/redux-devtools-log-monitor/.babelrc

@@ -1,4 +1,10 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-export-default-from"]
+    "@babel/env",
+    "@babel/react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    "@babel/proposal-class-properties"
+  ]
 }

packages/redux-devtools-log-monitor/.eslintignore

@@ -0,0 +1 @@
+lib

packages/redux-devtools-log-monitor/.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: ['test/*.ts', 'test/*.tsx'],
+      extends: '../../eslintrc.ts.react.jest.base.json',
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./test/tsconfig.json']
+      }
+    }
+  ]
+};

packages/redux-devtools-log-monitor/.prettierignore

@@ -0,0 +1 @@
+lib

packages/redux-devtools-log-monitor/package.json

@@ -3,13 +3,20 @@
   "version": "1.4.0",
   "description": "The default tree view monitor for Redux DevTools",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "src"
   ],
   "scripts": {
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
     "clean": "rimraf lib",
-    "build": "babel src --out-dir lib",
+    "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",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tx --fix",
     "prepare": "npm run build",
     "prepublishOnly": "npm run test && npm run clean && npm run build"
   },
@@ -35,18 +42,23 @@
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
+    "@types/react": "^15.0.0 || ^16.0.0",
     "babel-loader": "^8.0.5",
+    "react": "^15.0.0 || ^16.0.0",
+    "redux-devtools": "^3.4.0",
     "rimraf": "^2.3.4"
   },
   "peerDependencies": {
+    "@types/react": "^15.0.0 || ^16.0.0",
     "react": "^15.0.0 || ^16.0.0",
     "redux-devtools": "^3.4.0"
   },
   "dependencies": {
+    "@types/lodash.debounce": "^4.0.4",
+    "@types/prop-types": "^15.0.0",
     "lodash.debounce": "^4.0.4",
     "prop-types": "^15.0.0",
     "react-json-tree": "^0.11.0",

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

@@ -2,16 +2,25 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shouldPureComponentUpdate from 'react-pure-render/function';
 import * as themes from 'redux-devtools-themes';
-import { ActionCreators } from 'redux-devtools';
+import { ActionCreators, LiftedAction, PerformAction } from 'redux-devtools';
-import { updateScrollTop, startConsecutiveToggle } from './actions';
+import { Base16Theme } from 'base16';
-import reducer from './reducers';
+import { Action, Dispatch } from 'redux';
+import {
+  updateScrollTop,
+  startConsecutiveToggle,
+  LogMonitorAction
+} from './actions';
+import reducer, { LogMonitorState } from './reducers';
 import LogMonitorButtonBar from './LogMonitorButtonBar';
 import LogMonitorEntryList from './LogMonitorEntryList';
 import debounce from 'lodash.debounce';
 
 const { toggleAction, setActionsActive } = ActionCreators;
 
-const styles = {
+const styles: {
+  container: React.CSSProperties;
+  elements: React.CSSProperties;
+} = {
   container: {
     fontFamily: 'monaco, Consolas, Lucida Console, monospace',
     position: 'relative',
@@ -32,7 +41,29 @@ const styles = {
   }
 };
 
-export default class LogMonitor extends Component {
+export interface Props<S, A extends Action> {
+  dispatch: Dispatch<
+    LogMonitorAction | LiftedAction<S, A, LogMonitorState, LogMonitorAction>
+  >;
+  computedStates: { state: S; error?: string }[];
+  actionsById: { [actionId: number]: PerformAction<A> };
+  stagedActionIds: number[];
+  skippedActionIds: number[];
+  currentStateIndex: number;
+  monitorState: LogMonitorState;
+
+  preserveScrollTop: boolean;
+  select: (state: S) => unknown;
+  theme: keyof typeof themes | Base16Theme;
+  expandActionRoot: boolean;
+  expandStateRoot: boolean;
+  markStateDiff: boolean;
+  hideMainButtons?: boolean;
+}
+
+export default class LogMonitor<S, A extends Action> extends Component<
+  Props<S, A>
+> {
   static update = reducer;
 
   static propTypes = {
@@ -56,7 +87,7 @@ export default class LogMonitor extends Component {
   };
 
   static defaultProps = {
-    select: state => state,
+    select: (state: unknown) => state,
     theme: 'nicinabox',
     preserveScrollTop: true,
     expandActionRoot: true,
@@ -64,6 +95,9 @@ export default class LogMonitor extends Component {
     markStateDiff: false
   };
 
+  scrollDown?: boolean;
+  node?: HTMLDivElement | null;
+
   shouldComponentUpdate = shouldPureComponentUpdate;
 
   updateScrollTop = debounce(() => {
@@ -71,15 +105,6 @@ export default class LogMonitor extends Component {
     this.props.dispatch(updateScrollTop(node ? node.scrollTop : 0));
   }, 500);
 
-  constructor(props) {
-    super(props);
-    this.handleToggleAction = this.handleToggleAction.bind(this);
-    this.handleToggleConsecutiveAction = this.handleToggleConsecutiveAction.bind(
-      this
-    );
-    this.getRef = this.getRef.bind(this);
-  }
-
   scroll() {
     const node = this.node;
     if (!node) {
@@ -114,7 +139,7 @@ export default class LogMonitor extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props<S, A>) {
     const node = this.node;
     if (!node) {
       this.scrollDown = true;
@@ -134,27 +159,27 @@ export default class LogMonitor extends Component {
     this.scroll();
   }
 
-  handleToggleAction(id) {
+  handleToggleAction = (id: number) => {
     this.props.dispatch(toggleAction(id));
-  }
+  };
 
-  handleToggleConsecutiveAction(id) {
+  handleToggleConsecutiveAction = (id: number) => {
     const { monitorState, actionsById } = this.props;
     const { consecutiveToggleStartId } = monitorState;
     if (consecutiveToggleStartId && actionsById[consecutiveToggleStartId]) {
       const { skippedActionIds } = this.props;
       const start = Math.min(consecutiveToggleStartId, id);
       const end = Math.max(consecutiveToggleStartId, id);
-      const active = skippedActionIds.indexOf(consecutiveToggleStartId) > -1;
+      const active = skippedActionIds.includes(consecutiveToggleStartId);
       this.props.dispatch(setActionsActive(start, end + 1, active));
       this.props.dispatch(startConsecutiveToggle(null));
     } else if (id > 0) {
       this.props.dispatch(startConsecutiveToggle(id));
     }
-  }
+  };
 
   getTheme() {
-    let { theme } = this.props;
+    const { theme } = this.props;
     if (typeof theme !== 'string') {
       return theme;
     }
@@ -170,9 +195,9 @@ export default class LogMonitor extends Component {
     return themes.nicinabox;
   }
 
-  getRef(node) {
+  getRef: React.RefCallback<HTMLDivElement> = node => {
     this.node = node;
-  }
+  };
 
   render() {
     const theme = this.getTheme();

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { Base16Theme } from 'base16';
 import brighten from './brighten';
 import shouldPureComponentUpdate from 'react-pure-render/function';
 
-const styles = {
+const styles: { base: React.CSSProperties } = {
   base: {
     cursor: 'pointer',
     fontWeight: 'bold',
@@ -20,48 +21,49 @@ const styles = {
   }
 };
 
-export default class LogMonitorButton extends React.Component {
+interface Props {
+  theme: Base16Theme;
+  onClick: () => void;
+  enabled: boolean;
+}
+
+interface State {
+  hovered: boolean;
+  active: boolean;
+}
+
+export default class LogMonitorButton extends React.Component<Props, State> {
   shouldComponentUpdate = shouldPureComponentUpdate;
 
-  constructor(props) {
+  state: State = {
-    super(props);
+    hovered: false,
+    active: false
+  };
 
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+  handleMouseEnter = () => {
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.onClick = this.onClick.bind(this);
-
-    this.state = {
-      hovered: false,
-      active: false
-    };
-  }
-
-  handleMouseEnter() {
     this.setState({ hovered: true });
-  }
+  };
 
-  handleMouseLeave() {
+  handleMouseLeave = () => {
     this.setState({ hovered: false });
-  }
+  };
 
-  handleMouseDown() {
+  handleMouseDown = () => {
     this.setState({ active: true });
-  }
+  };
 
-  handleMouseUp() {
+  handleMouseUp = () => {
     this.setState({ active: false });
-  }
+  };
 
-  onClick() {
+  onClick = () => {
     if (!this.props.enabled) {
       return;
     }
     if (this.props.onClick) {
       this.props.onClick();
     }
-  }
+  };
 
   render() {
     let style = {
@@ -80,7 +82,7 @@ export default class LogMonitorButton extends React.Component {
         opacity: 0.2,
         cursor: 'text',
         backgroundColor: 'transparent'
-      };
+      } as const;
     }
     return (
       <a

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

@@ -1,12 +1,16 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Action, Dispatch } from 'redux';
 import shouldPureComponentUpdate from 'react-pure-render/function';
-import { ActionCreators } from 'redux-devtools';
+import { Base16Theme } from 'base16';
+import { ActionCreators, LiftedAction } from 'redux-devtools';
 import LogMonitorButton from './LogMonitorButton';
+import { LogMonitorAction } from './actions';
+import { LogMonitorState } from './reducers';
 
 const { reset, rollback, commit, sweep } = ActionCreators;
 
-const style = {
+const style: React.CSSProperties = {
   textAlign: 'center',
   borderBottomWidth: 1,
   borderBottomStyle: 'solid',
@@ -16,7 +20,18 @@ const style = {
   flexDirection: 'row'
 };
 
-export default class LogMonitorButtonBar extends Component {
+interface Props<S, A extends Action> {
+  theme: Base16Theme;
+  dispatch: Dispatch<
+    LogMonitorAction | LiftedAction<S, A, LogMonitorState, LogMonitorAction>
+  >;
+  hasStates: boolean;
+  hasSkippedActions: boolean;
+}
+
+export default class LogMonitorButtonBar<S, A extends Action> extends Component<
+  Props<S, A>
+> {
   static propTypes = {
     dispatch: PropTypes.func,
     theme: PropTypes.object
@@ -24,29 +39,21 @@ export default class LogMonitorButtonBar extends Component {
 
   shouldComponentUpdate = shouldPureComponentUpdate;
 
-  constructor(props) {
+  handleRollback = () => {
-    super(props);
-    this.handleReset = this.handleReset.bind(this);
-    this.handleRollback = this.handleRollback.bind(this);
-    this.handleSweep = this.handleSweep.bind(this);
-    this.handleCommit = this.handleCommit.bind(this);
-  }
-
-  handleRollback() {
     this.props.dispatch(rollback());
-  }
+  };
 
-  handleSweep() {
+  handleSweep = () => {
     this.props.dispatch(sweep());
-  }
+  };
 
-  handleCommit() {
+  handleCommit = () => {
     this.props.dispatch(commit());
-  }
+  };
 
-  handleReset() {
+  handleReset = () => {
     this.props.dispatch(reset());
-  }
+  };
 
   render() {
     const { theme, hasStates, hasSkippedActions } = this.props;

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

@@ -1,10 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import JSONTree from 'react-json-tree';
+import { Base16Theme } from 'base16';
+import { Action } from 'redux';
 import LogMonitorEntryAction from './LogMonitorEntryAction';
 import shouldPureComponentUpdate from 'react-pure-render/function';
+import { Styling, StylingConfig, StylingValue } from 'react-base16-styling';
 
-const styles = {
+const styles: { entry: React.CSSProperties; root: React.CSSProperties } = {
   entry: {
     display: 'block',
     WebkitUserSelect: 'none'
@@ -15,15 +18,37 @@ const styles = {
   }
 };
 
-const getDeepItem = (data, path) =>
+const getDeepItem = (data: any, path: (string | number)[]) =>
   path.reduce((obj, key) => obj && obj[key], data);
-const dataIsEqual = (data, previousData, keyPath) => {
+const dataIsEqual = (
+  data: any,
+  previousData: unknown,
+  keyPath: (string | number)[]
+) => {
   const path = [...keyPath].reverse().slice(1);
 
   return getDeepItem(data, path) === getDeepItem(previousData, path);
 };
 
-export default class LogMonitorEntry extends Component {
+interface Props {
+  state: {};
+  action: any;
+  actionId: number;
+  select: (state: any) => any;
+  inFuture: boolean;
+  error: string | undefined;
+  onActionClick: (id: number) => void;
+  onActionShiftClick: (id: number) => void;
+  collapsed: boolean;
+  selected: boolean;
+  expandActionRoot: boolean;
+  expandStateRoot: boolean;
+  theme: Base16Theme;
+  previousState: any | undefined;
+  markStateDiff: boolean;
+}
+
+export default class LogMonitorEntry extends Component<Props> {
   static propTypes = {
     state: PropTypes.object.isRequired,
     action: PropTypes.object.isRequired,
@@ -41,25 +66,23 @@ export default class LogMonitorEntry extends Component {
 
   shouldComponentUpdate = shouldPureComponentUpdate;
 
-  constructor(props) {
+  printState(state: any, error: string | undefined) {
-    super(props);
-    this.handleActionClick = this.handleActionClick.bind(this);
-    this.shouldExpandNode = this.shouldExpandNode.bind(this);
-  }
-
-  printState(state, error) {
     let errorText = error;
     if (!errorText) {
       try {
         const data = this.props.select(state);
-        let theme;
+        let theme: StylingConfig | Base16Theme;
 
         if (this.props.markStateDiff) {
           const previousData =
             typeof this.props.previousState !== 'undefined'
               ? this.props.select(this.props.previousState)
               : undefined;
-          const getValueStyle = ({ style }, nodeType, keyPath) => ({
+          const getValueStyle: StylingValue = (
+            { style }: Styling,
+            nodeType: string,
+            keyPath: (string | number)[]
+          ): Styling => ({
             style: {
               ...style,
               backgroundColor: dataIsEqual(data, previousData, keyPath)
@@ -67,15 +90,17 @@ export default class LogMonitorEntry extends Component {
                 : this.props.theme.base01
             }
           });
-          const getNestedNodeStyle = ({ style }, keyPath) => ({
+          const getNestedNodeStyle: StylingValue = (
+            { style }: Styling,
+            keyPath: (string | number)[]
+          ): Styling => ({
             style: {
               ...style,
               ...(keyPath.length > 1 ? {} : styles.root)
             }
           });
           theme = {
-            extend: this.props.theme,
+            extend: (this.props.theme as unknown) as StylingValue,
-            tree: styles.tree,
             value: getValueStyle,
             nestedNode: getNestedNodeStyle
           };
@@ -112,7 +137,7 @@ export default class LogMonitorEntry extends Component {
     );
   }
 
-  handleActionClick(e) {
+  handleActionClick: MouseEventHandler<HTMLDivElement> = e => {
     const { actionId, onActionClick, onActionShiftClick } = this.props;
     if (actionId > 0) {
       if (e.shiftKey) {
@@ -121,11 +146,15 @@ export default class LogMonitorEntry extends Component {
         onActionClick(actionId);
       }
     }
-  }
+  };
 
-  shouldExpandNode(keyName, data, level) {
+  shouldExpandNode = (
+    keyName: (string | number)[],
+    data: unknown,
+    level: number
+  ) => {
     return this.props.expandStateRoot && level === 0;
-  }
+  };
 
   render() {
     const {
@@ -137,7 +166,7 @@ export default class LogMonitorEntry extends Component {
       selected,
       inFuture
     } = this.props;
-    const styleEntry = {
+    const styleEntry: React.CSSProperties = {
       opacity: collapsed ? 0.5 : 1,
       cursor: actionId > 0 ? 'pointer' : 'default'
     };

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

@@ -1,7 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component, MouseEventHandler } from 'react';
 import JSONTree from 'react-json-tree';
+import { Action } from 'redux';
+import { Base16Theme } from 'base16';
 
-const styles = {
+const styles: {
+  actionBar: React.CSSProperties;
+  payload: React.CSSProperties;
+} = {
   actionBar: {
     paddingTop: 8,
     paddingBottom: 7,
@@ -14,13 +19,19 @@ const styles = {
   }
 };
 
-export default class LogMonitorAction extends Component {
+interface Props<A extends Action<unknown>> {
-  constructor(props) {
+  theme: Base16Theme;
-    super(props);
+  collapsed: boolean;
-    this.shouldExpandNode = this.shouldExpandNode.bind(this);
+  action: A;
-  }
+  expandActionRoot: boolean;
+  onClick: MouseEventHandler<HTMLDivElement>;
+  style: React.CSSProperties;
+}
 
-  renderPayload(payload) {
+export default class LogMonitorAction<
+  A extends Action<unknown>
+> extends Component<Props<A>> {
+  renderPayload(payload: {}) {
     return (
       <div
         style={{
@@ -43,9 +54,13 @@ export default class LogMonitorAction extends Component {
     );
   }
 
-  shouldExpandNode(keyName, data, level) {
+  shouldExpandNode = (
+    keyName: (string | number)[],
+    data: unknown,
+    level: number
+  ) => {
     return this.props.expandActionRoot && level === 0;
-  }
+  };
 
   render() {
     const { type, ...payload } = this.props.action;
@@ -58,7 +73,7 @@ export default class LogMonitorAction extends Component {
         }}
       >
         <div style={styles.actionBar} onClick={this.props.onClick}>
-          {type !== null && type.toString()}
+          {type !== null && (type as any).toString()}
         </div>
         {!this.props.collapsed ? this.renderPayload(payload) : ''}
       </div>

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

@@ -1,9 +1,32 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Action } from 'redux';
+import { Base16Theme } from 'base16';
+import { PerformAction } from 'redux-devtools';
 import LogMonitorEntry from './LogMonitorEntry';
 import shouldPureComponentUpdate from 'react-pure-render/function';
 
-export default class LogMonitorEntryList extends Component {
+interface Props<S, A extends Action<unknown>> {
+  actionsById: { [actionId: number]: PerformAction<A> };
+  computedStates: { state: S; error?: string }[];
+  stagedActionIds: number[];
+  skippedActionIds: number[];
+  currentStateIndex: number;
+  consecutiveToggleStartId: number | null | undefined;
+
+  select: (state: S) => any;
+  onActionClick: (id: number) => void;
+  onActionShiftClick: (id: number) => void;
+  theme: Base16Theme;
+  expandActionRoot: boolean;
+  expandStateRoot: boolean;
+  markStateDiff: boolean;
+}
+
+export default class LogMonitorEntryList<
+  S,
+  A extends Action<unknown>
+> extends Component<Props<S, A>> {
   static propTypes = {
     actionsById: PropTypes.object,
     computedStates: PropTypes.array,
@@ -56,7 +79,7 @@ export default class LogMonitorEntryList extends Component {
           actionId={actionId}
           state={state}
           previousState={previousState}
-          collapsed={skippedActionIds.indexOf(actionId) > -1}
+          collapsed={skippedActionIds.includes(actionId)}
           inFuture={i > currentStateIndex}
           selected={consecutiveToggleStartId === i}
           error={error}

packages/redux-devtools-log-monitor/src/actions.js

@@ -1,11 +0,0 @@
-export const UPDATE_SCROLL_TOP =
-  '@@redux-devtools-log-monitor/UPDATE_SCROLL_TOP';
-export function updateScrollTop(scrollTop) {
-  return { type: UPDATE_SCROLL_TOP, scrollTop };
-}
-
-export const START_CONSECUTIVE_TOGGLE =
-  '@@redux-devtools-log-monitor/START_CONSECUTIVE_TOGGLE';
-export function startConsecutiveToggle(id) {
-  return { type: START_CONSECUTIVE_TOGGLE, id };
-}

packages/redux-devtools-log-monitor/src/actions.ts

@@ -0,0 +1,25 @@
+export const UPDATE_SCROLL_TOP =
+  '@@redux-devtools-log-monitor/UPDATE_SCROLL_TOP';
+interface UpdateScrollTopAction {
+  type: typeof UPDATE_SCROLL_TOP;
+  scrollTop: number;
+}
+export function updateScrollTop(scrollTop: number): UpdateScrollTopAction {
+  return { type: UPDATE_SCROLL_TOP, scrollTop };
+}
+
+export const START_CONSECUTIVE_TOGGLE =
+  '@@redux-devtools-log-monitor/START_CONSECUTIVE_TOGGLE';
+interface StartConsecutiveToggleAction {
+  type: typeof START_CONSECUTIVE_TOGGLE;
+  id: number | null;
+}
+export function startConsecutiveToggle(
+  id: number | null
+): StartConsecutiveToggleAction {
+  return { type: START_CONSECUTIVE_TOGGLE, id };
+}
+
+export type LogMonitorAction =
+  | UpdateScrollTopAction
+  | StartConsecutiveToggleAction;

packages/redux-devtools-log-monitor/src/base16.ts

@@ -0,0 +1,61 @@
+declare module 'base16' {
+  export interface Base16Theme {
+    scheme?: string;
+    author?: string;
+    base00: string;
+    base01: string;
+    base02: string;
+    base03: string;
+    base04: string;
+    base05: string;
+    base06: string;
+    base07: string;
+    base08: string;
+    base09: string;
+    base0A: string;
+    base0B: string;
+    base0C: string;
+    base0D: string;
+    base0E: string;
+    base0F: string;
+  }
+
+  export const threezerotwofour: Base16Theme;
+  export const apathy: Base16Theme;
+  export const ashes: Base16Theme;
+  export const atelierDune: Base16Theme;
+  export const atelierForest: Base16Theme;
+  export const atelierHeath: Base16Theme;
+  export const atelierLakeside: Base16Theme;
+  export const atelierSeaside: Base16Theme;
+  export const bespin: Base16Theme;
+  export const brewer: Base16Theme;
+  export const bright: Base16Theme;
+  export const chalk: Base16Theme;
+  export const codeschool: Base16Theme;
+  export const colors: Base16Theme;
+  const _default: Base16Theme;
+  export default _default;
+  export const eighties: Base16Theme;
+  export const embers: Base16Theme;
+  export const flat: Base16Theme;
+  export const google: Base16Theme;
+  export const grayscale: Base16Theme;
+  export const greenscreen: Base16Theme;
+  export const harmonic: Base16Theme;
+  export const hopscotch: Base16Theme;
+  export const isotope: Base16Theme;
+  export const marrakesh: Base16Theme;
+  export const mocha: Base16Theme;
+  export const monokai: Base16Theme;
+  export const ocean: Base16Theme;
+  export const paraiso: Base16Theme;
+  export const pop: Base16Theme;
+  export const railscasts: Base16Theme;
+  export const shapeshifter: Base16Theme;
+  export const solarized: Base16Theme;
+  export const summerfruit: Base16Theme;
+  export const tomorrow: Base16Theme;
+  export const tube: Base16Theme;
+  export const twilight: Base16Theme;
+}

packages/redux-devtools-log-monitor/src/brighten.ts

@@ -1,9 +1,9 @@
-export default function(hexColor, lightness) {
+export default function(hexColor: string, lightness: number) {
   let hex = String(hexColor).replace(/[^0-9a-f]/gi, '');
   if (hex.length < 6) {
     hex = hex.replace(/(.)/g, '$1$1');
   }
-  let lum = lightness || 0;
+  const lum = lightness || 0;
 
   let rgb = '#';
   let c;

packages/redux-devtools-log-monitor/src/index.js

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

packages/redux-devtools-log-monitor/src/index.ts

@@ -0,0 +1,5 @@
+import LogMonitor from './LogMonitor';
+import './base16';
+import './react-pure-render';
+import './redux-devtools-themes';
+export default LogMonitor;

packages/redux-devtools-log-monitor/src/react-pure-render.ts

@@ -0,0 +1,6 @@
+declare module 'react-pure-render/function' {
+  export default function shouldPureComponentUpdate(
+    nextProps: unknown,
+    nextState: unknown
+  ): boolean;
+}

packages/redux-devtools-log-monitor/src/reducers.js

@@ -1,24 +0,0 @@
-import { UPDATE_SCROLL_TOP, START_CONSECUTIVE_TOGGLE } from './actions';
-
-function initialScrollTop(props, state = 0, action) {
-  if (!props.preserveScrollTop) {
-    return 0;
-  }
-
-  return action.type === UPDATE_SCROLL_TOP ? action.scrollTop : state;
-}
-
-function startConsecutiveToggle(props, state, action) {
-  return action.type === START_CONSECUTIVE_TOGGLE ? action.id : state;
-}
-
-export default function reducer(props, state = {}, action) {
-  return {
-    initialScrollTop: initialScrollTop(props, state.initialScrollTop, action),
-    consecutiveToggleStartId: startConsecutiveToggle(
-      props,
-      state.consecutiveToggleStartId,
-      action
-    )
-  };
-}

packages/redux-devtools-log-monitor/src/reducers.ts

@@ -0,0 +1,52 @@
+import { Action } from 'redux';
+import {
+  UPDATE_SCROLL_TOP,
+  START_CONSECUTIVE_TOGGLE,
+  LogMonitorAction
+} from './actions';
+import { Props } from './LogMonitor';
+
+function initialScrollTop<S, A extends Action>(
+  props: Props<S, A>,
+  state: number | undefined = 0,
+  action: LogMonitorAction
+) {
+  if (!props.preserveScrollTop) {
+    return 0;
+  }
+
+  return action.type === UPDATE_SCROLL_TOP ? action.scrollTop : state;
+}
+
+function startConsecutiveToggle<S, A extends Action>(
+  props: Props<S, A>,
+  state: number | undefined | null,
+  action: LogMonitorAction
+) {
+  return action.type === START_CONSECUTIVE_TOGGLE ? action.id : state;
+}
+
+interface InitialLogMonitorState {
+  initialScrollTop?: number;
+  consecutiveToggleStartId?: number | null;
+}
+
+export interface LogMonitorState {
+  initialScrollTop: number;
+  consecutiveToggleStartId?: number | null;
+}
+
+export default function reducer<S, A extends Action>(
+  props: Props<S, A>,
+  state: InitialLogMonitorState = {},
+  action: LogMonitorAction
+): LogMonitorState {
+  return {
+    initialScrollTop: initialScrollTop(props, state.initialScrollTop, action),
+    consecutiveToggleStartId: startConsecutiveToggle(
+      props,
+      state.consecutiveToggleStartId,
+      action
+    )
+  };
+}

packages/redux-devtools-log-monitor/src/redux-devtools-themes.ts

@@ -0,0 +1,5 @@
+declare module 'redux-devtools-themes' {
+  import { Base16Theme } from 'base16';
+  export * from 'base16';
+  export const nicinabox: Base16Theme;
+}

packages/redux-devtools-log-monitor/tsconfig.json

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