diff --git a/packages/redux-devtools/examples/counter/.babelrc b/packages/redux-devtools/examples/counter/.babelrc index 3d0797a7..a01c7adc 100644 --- a/packages/redux-devtools/examples/counter/.babelrc +++ b/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" diff --git a/packages/redux-devtools/examples/counter/.eslintrc.js b/packages/redux-devtools/examples/counter/.eslintrc.js new file mode 100644 index 00000000..70e1445e --- /dev/null +++ b/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'], + }, + }, + ], +}; diff --git a/packages/redux-devtools/examples/counter/package.json b/packages/redux-devtools/examples/counter/package.json index 559bc385..c0a67c22 100644 --- a/packages/redux-devtools/examples/counter/package.json +++ b/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 } diff --git a/packages/redux-devtools/examples/counter/src/actions/CounterActions.js b/packages/redux-devtools/examples/counter/src/actions/CounterActions.js deleted file mode 100644 index ab5e98d9..00000000 --- a/packages/redux-devtools/examples/counter/src/actions/CounterActions.js +++ /dev/null @@ -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); - }; -} diff --git a/packages/redux-devtools/examples/counter/src/actions/CounterActions.ts b/packages/redux-devtools/examples/counter/src/actions/CounterActions.ts new file mode 100644 index 00000000..dbbc7e81 --- /dev/null +++ b/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); + }; +} diff --git a/packages/redux-devtools/examples/counter/src/components/Counter.js b/packages/redux-devtools/examples/counter/src/components/Counter.tsx similarity index 77% rename from packages/redux-devtools/examples/counter/src/components/Counter.js rename to packages/redux-devtools/examples/counter/src/components/Counter.tsx index 96b3b2c4..4ccf3eee 100644 --- a/packages/redux-devtools/examples/counter/src/components/Counter.js +++ b/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 { static propTypes = { increment: PropTypes.func.isRequired, incrementIfOdd: PropTypes.func.isRequired, diff --git a/packages/redux-devtools/examples/counter/src/constants/ActionTypes.js b/packages/redux-devtools/examples/counter/src/constants/ActionTypes.ts similarity index 100% rename from packages/redux-devtools/examples/counter/src/constants/ActionTypes.js rename to packages/redux-devtools/examples/counter/src/constants/ActionTypes.ts diff --git a/packages/redux-devtools/examples/counter/src/containers/CounterApp.js b/packages/redux-devtools/examples/counter/src/containers/CounterApp.tsx similarity index 59% rename from packages/redux-devtools/examples/counter/src/containers/CounterApp.js rename to packages/redux-devtools/examples/counter/src/containers/CounterApp.tsx index b324db87..d50ae50c 100644 --- a/packages/redux-devtools/examples/counter/src/containers/CounterApp.js +++ b/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; +} + +class CounterApp extends Component { 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, }; diff --git a/packages/redux-devtools/examples/counter/src/containers/DevTools.js b/packages/redux-devtools/examples/counter/src/containers/DevTools.tsx similarity index 100% rename from packages/redux-devtools/examples/counter/src/containers/DevTools.js rename to packages/redux-devtools/examples/counter/src/containers/DevTools.tsx diff --git a/packages/redux-devtools/examples/counter/src/containers/Root.dev.js b/packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx similarity index 64% rename from packages/redux-devtools/examples/counter/src/containers/Root.dev.js rename to packages/redux-devtools/examples/counter/src/containers/Root.dev.tsx index 7ffcee70..a912fb04 100644 --- a/packages/redux-devtools/examples/counter/src/containers/Root.dev.js +++ b/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; +} + +class Root extends Component { render() { const { store } = this.props; return ( diff --git a/packages/redux-devtools/examples/counter/src/containers/Root.prod.js b/packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx similarity index 58% rename from packages/redux-devtools/examples/counter/src/containers/Root.prod.js rename to packages/redux-devtools/examples/counter/src/containers/Root.prod.tsx index e190b4ed..974d64c0 100644 --- a/packages/redux-devtools/examples/counter/src/containers/Root.prod.js +++ b/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; +} + +class Root extends Component { render() { const { store } = this.props; return ( diff --git a/packages/redux-devtools/examples/counter/src/containers/Root.js b/packages/redux-devtools/examples/counter/src/containers/Root.ts similarity index 100% rename from packages/redux-devtools/examples/counter/src/containers/Root.js rename to packages/redux-devtools/examples/counter/src/containers/Root.ts diff --git a/packages/redux-devtools/examples/counter/src/index.js b/packages/redux-devtools/examples/counter/src/index.tsx similarity index 100% rename from packages/redux-devtools/examples/counter/src/index.js rename to packages/redux-devtools/examples/counter/src/index.tsx diff --git a/packages/redux-devtools/examples/counter/src/reducers/counter.js b/packages/redux-devtools/examples/counter/src/reducers/counter.ts similarity index 66% rename from packages/redux-devtools/examples/counter/src/reducers/counter.js rename to packages/redux-devtools/examples/counter/src/reducers/counter.ts index a23a1c7d..5ae928ac 100644 --- a/packages/redux-devtools/examples/counter/src/reducers/counter.js +++ b/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; diff --git a/packages/redux-devtools/examples/counter/src/reducers/index.js b/packages/redux-devtools/examples/counter/src/reducers/index.ts similarity index 74% rename from packages/redux-devtools/examples/counter/src/reducers/index.js rename to packages/redux-devtools/examples/counter/src/reducers/index.ts index eba07a15..0540e0f3 100644 --- a/packages/redux-devtools/examples/counter/src/reducers/index.js +++ b/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; diff --git a/packages/redux-devtools/examples/counter/src/store/configureStore.dev.js b/packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts similarity index 68% rename from packages/redux-devtools/examples/counter/src/store/configureStore.dev.js rename to packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts index cf9345ca..dbdaef66 100644 --- a/packages/redux-devtools/examples/counter/src/store/configureStore.dev.js +++ b/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 +) { const store = createStore(rootReducer, initialState, enhancer); if (module.hot) { diff --git a/packages/redux-devtools/examples/counter/src/store/configureStore.prod.js b/packages/redux-devtools/examples/counter/src/store/configureStore.prod.js deleted file mode 100644 index 29117e9f..00000000 --- a/packages/redux-devtools/examples/counter/src/store/configureStore.prod.js +++ /dev/null @@ -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); -} diff --git a/packages/redux-devtools/examples/counter/src/store/configureStore.prod.ts b/packages/redux-devtools/examples/counter/src/store/configureStore.prod.ts new file mode 100644 index 00000000..680fdd41 --- /dev/null +++ b/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 +) { + return createStore(rootReducer, initialState, enhancer); +} diff --git a/packages/redux-devtools/examples/counter/src/store/configureStore.js b/packages/redux-devtools/examples/counter/src/store/configureStore.ts similarity index 100% rename from packages/redux-devtools/examples/counter/src/store/configureStore.js rename to packages/redux-devtools/examples/counter/src/store/configureStore.ts diff --git a/packages/redux-devtools/examples/counter/tsconfig.json b/packages/redux-devtools/examples/counter/tsconfig.json new file mode 100644 index 00000000..c640259b --- /dev/null +++ b/packages/redux-devtools/examples/counter/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../../../tsconfig.react.base.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": ["src"] +} diff --git a/packages/redux-devtools/examples/counter/tsconfig.webpack.json b/packages/redux-devtools/examples/counter/tsconfig.webpack.json new file mode 100644 index 00000000..1d04dfd1 --- /dev/null +++ b/packages/redux-devtools/examples/counter/tsconfig.webpack.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../tsconfig.base.json", + "include": ["webpack.config.ts"] +} diff --git a/packages/redux-devtools/examples/counter/webpack.config.js b/packages/redux-devtools/examples/counter/webpack.config.ts similarity index 87% rename from packages/redux-devtools/examples/counter/webpack.config.js rename to packages/redux-devtools/examples/counter/webpack.config.ts index 41a69de6..0023a5ed 100644 --- a/packages/redux-devtools/examples/counter/webpack.config.js +++ b/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'), diff --git a/packages/redux-devtools/src/createDevTools.tsx b/packages/redux-devtools/src/createDevTools.tsx index e3525d89..9f7f1168 100644 --- a/packages/redux-devtools/src/createDevTools.tsx +++ b/packages/redux-devtools/src/createDevTools.tsx @@ -25,7 +25,7 @@ function logError(type: string) { } } -interface Props< +export interface Props< S, A extends Action, MonitorState,