stash

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,21 +2,23 @@
   "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"
   },
-  "homepage": "https://github.com/reduxjs/redux-devtools#readme",
   "dependencies": {
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^16.9.46",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -26,15 +28,9 @@
     "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-devtools-log-monitor": "^2.0.1"
+  },
+  "private": true
 }

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

@@ -1,33 +0,0 @@
-import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';
-
-export function increment() {
-  return {
-    type: INCREMENT_COUNTER,
-  };
-}
-
-export function decrement() {
-  return {
-    type: DECREMENT_COUNTER,
-  };
-}
-
-export function incrementIfOdd() {
-  return (dispatch, getState) => {
-    const { counter } = getState();
-
-    if (counter % 2 === 0) {
-      return;
-    }
-
-    dispatch(increment());
-  };
-}
-
-export function incrementAsync() {
-  return (dispatch) => {
-    setTimeout(() => {
-      dispatch(increment());
-    }, 1000);
-  };
-}

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.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.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,
   };

packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx

@@ -1,10 +1,17 @@
 import { hot } from 'react-hot-loader/root';
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import CounterApp from './CounterApp';
 import DevTools from './DevTools';
+import { CounterState } from '../reducers';
+import { CounterAction } from '../actions/CounterActions';
 
-class Root extends Component {
+interface Props {
+  store: Store<CounterState, CounterAction>;
+}
+
+class Root extends Component<Props> {
   render() {
     const { store } = this.props;
     return (

packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx

@@ -1,9 +1,16 @@
 import { hot } from 'react-hot-loader/root';
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import CounterApp from './CounterApp';
+import { CounterState } from '../reducers';
+import { CounterAction } from '../actions/CounterActions';
 
-class Root extends Component {
+interface Props {
+  store: Store<CounterState, CounterAction>;
+}
+
+class Root extends Component<Props> {
   render() {
     const { store } = this.props;
     return (

packages/redux-devtools/examples/counter/src/reducers/counter.ts

@@ -1,6 +1,7 @@
 import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../constants/ActionTypes';
+import { CounterAction } from '../actions/CounterActions';
 
-export default function counter(state = 0, action) {
+export default function counter(state = 0, action: CounterAction) {
   switch (action.type) {
     case INCREMENT_COUNTER:
       return state + 1;

packages/redux-devtools/examples/counter/src/reducers/index.ts

@@ -5,4 +5,8 @@ const rootReducer = combineReducers({
   counter,
 });
 
+export interface CounterState {
+  counter: number;
+}
+
 export default rootReducer;

packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts

@@ -1,7 +1,7 @@
-import { createStore, applyMiddleware, compose } from 'redux';
+import { createStore, applyMiddleware, compose, PreloadedState } from 'redux';
 import { persistState } from 'redux-devtools';
 import thunk from 'redux-thunk';
-import rootReducer from '../reducers';
+import rootReducer, { CounterState } from '../reducers';
 import DevTools from '../containers/DevTools';
 
 const enhancer = compose(
@@ -10,7 +10,9 @@ const enhancer = compose(
   persistState(window.location.href.match(/[?&]debug_session=([^&#]+)\b/))
 );
 
-export default function configureStore(initialState) {
+export default function configureStore(
+  initialState?: PreloadedState<CounterState>
+) {
   const store = createStore(rootReducer, initialState, enhancer);
 
   if (module.hot) {

packages/redux-devtools/examples/counter/src/store/configureStore.prod.js

@@ -1,9 +0,0 @@
-import { createStore, applyMiddleware } from 'redux';
-import thunk from 'redux-thunk';
-import rootReducer from '../reducers';
-
-const enhancer = applyMiddleware(thunk);
-
-export default function configureStore(initialState) {
-  return createStore(rootReducer, initialState, enhancer);
-}

packages/redux-devtools/examples/counter/src/store/configureStore.prod.ts

@@ -0,0 +1,11 @@
+import { createStore, applyMiddleware, PreloadedState } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer, { CounterState } from '../reducers';
+
+const enhancer = applyMiddleware(thunk);
+
+export default function configureStore(
+  initialState?: PreloadedState<CounterState>
+) {
+  return createStore(rootReducer, initialState, enhancer);
+}

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

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

packages/redux-devtools/examples/counter/tsconfig.webpack.json

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

packages/redux-devtools/examples/counter/webpack.config.ts

@@ -1,5 +1,5 @@
-var path = require('path');
-var webpack = require('webpack');
+import * as path from 'path';
+import * as webpack from 'webpack';
 
 module.exports = {
   mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
@@ -18,7 +18,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|ts)x?$/,
         loaders: ['babel-loader'],
         exclude: /node_modules/,
         include: path.join(__dirname, 'src'),

packages/redux-devtools/src/createDevTools.tsx

@@ -25,7 +25,7 @@ function logError(type: string) {
   }
 }
 
-interface Props<
+export interface Props<
   S,
   A extends Action<unknown>,
   MonitorState,