From 72b8ef502edab771c57f5ad11f1cb06fec30ba28 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Thu, 27 Aug 2020 21:51:05 -0400 Subject: [PATCH] finish --- .../react-json-tree/examples/package.json | 6 ++- .../src/DockMonitor.tsx | 43 ++++++++++++++++--- .../src/LogMonitor.tsx | 43 ++++++++++++++++--- .../examples/counter/package.json | 21 +++++---- .../examples/counter/src/containers/Root.ts | 18 ++++++-- .../examples/counter/src/index.tsx | 1 + .../counter/src/store/configureStore.dev.ts | 8 +++- .../counter/src/store/configureStore.ts | 18 +++++--- .../examples/counter/webpack.config.ts | 7 ++- .../redux-devtools/src/createDevTools.tsx | 4 +- packages/redux-devtools/src/persistState.ts | 2 +- tsconfig.base.json | 2 +- yarn.lock | 5 +++ 13 files changed, 144 insertions(+), 34 deletions(-) diff --git a/packages/react-json-tree/examples/package.json b/packages/react-json-tree/examples/package.json index 5924d687..af8841b4 100644 --- a/packages/react-json-tree/examples/package.json +++ b/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", diff --git a/packages/redux-devtools-dock-monitor/src/DockMonitor.tsx b/packages/redux-devtools-dock-monitor/src/DockMonitor.tsx index 0849c70f..0e9824eb 100644 --- a/packages/redux-devtools-dock-monitor/src/DockMonitor.tsx +++ b/packages/redux-devtools-dock-monitor/src/DockMonitor.tsx @@ -23,6 +23,29 @@ interface KeyObject { sequence: string; } +interface ExternalProps> { + defaultPosition: 'left' | 'top' | 'right' | 'bottom'; + defaultIsVisible: boolean; + defaultSize: number; + toggleVisibilityKey: string; + changePositionKey: string; + changeMonitorKey?: string; + fluid: boolean; + + dispatch: Dispatch; + + children: + | Monitor, unknown, Action> + | Monitor, unknown, Action>[]; +} + +interface DefaultProps { + defaultIsVisible: boolean; + defaultPosition: 'left' | 'top' | 'right' | 'bottom'; + defaultSize: number; + fluid: boolean; +} + export interface DockMonitorProps> extends LiftedState { defaultPosition: 'left' | 'top' | 'right' | 'bottom'; @@ -40,10 +63,9 @@ export interface DockMonitorProps> | Monitor, unknown, Action>[]; } -export default class DockMonitor< - S, - A extends Action -> extends Component> { +class DockMonitor> extends Component< + DockMonitorProps +> { 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> +> & { + update( + monitorProps: ExternalProps>, + state: DockMonitorState | undefined, + action: DockMonitorAction + ): DockMonitorState; + defaultProps: DefaultProps; +}; diff --git a/packages/redux-devtools-log-monitor/src/LogMonitor.tsx b/packages/redux-devtools-log-monitor/src/LogMonitor.tsx index 132cfe36..f224987a 100644 --- a/packages/redux-devtools-log-monitor/src/LogMonitor.tsx +++ b/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> { + dispatch: Dispatch>; + + preserveScrollTop: boolean; + select: (state: S) => unknown; + theme: keyof typeof themes | Base16Theme; + expandActionRoot: boolean; + expandStateRoot: boolean; + markStateDiff: boolean; + hideMainButtons?: boolean; +} + +interface DefaultProps { + select: (state: unknown) => unknown; + theme: keyof typeof themes | Base16Theme; + preserveScrollTop: boolean; + expandActionRoot: boolean; + expandStateRoot: boolean; + markStateDiff: boolean; +} + export interface LogMonitorProps> extends LiftedState { dispatch: Dispatch>; @@ -54,10 +77,9 @@ export interface LogMonitorProps> hideMainButtons?: boolean; } -export default class LogMonitor< - S, - A extends Action -> extends PureComponent> { +class LogMonitor> extends PureComponent< + LogMonitorProps +> { static update = reducer; static propTypes = { @@ -80,7 +102,7 @@ export default class LogMonitor< hideMainButtons: PropTypes.bool, }; - static defaultProps = { + static defaultProps: DefaultProps = { 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> +> & { + update( + monitorProps: ExternalProps>, + state: DockMonitorState | undefined, + action: DockMonitorAction + ): DockMonitorState; + defaultProps: DefaultProps; +}; diff --git a/packages/redux-devtools/examples/counter/package.json b/packages/redux-devtools/examples/counter/package.json index c0a67c22..01238ab7 100644 --- a/packages/redux-devtools/examples/counter/package.json +++ b/packages/redux-devtools/examples/counter/package.json @@ -12,25 +12,30 @@ "url": "https://github.com/reduxjs/redux-devtools.git" }, "scripts": { - "start": "webpack-dev-server --open" + "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" }, "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", "react-hot-loader": "^4.12.21", "react-redux": "^7.2.1", "redux": "^4.0.5", + "redux-devtools": "^3.6.1", + "redux-devtools-dock-monitor": "^1.1.4", + "redux-devtools-log-monitor": "^2.0.1", "redux-thunk": "^2.3.0" }, "devDependencies": { - "redux-devtools": "^3.6.1", - "redux-devtools-dock-monitor": "^1.1.4", - "redux-devtools-log-monitor": "^2.0.1" + "@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 } diff --git a/packages/redux-devtools/examples/counter/src/containers/Root.ts b/packages/redux-devtools/examples/counter/src/containers/Root.ts index 9cea0b22..57e22c84 100644 --- a/packages/redux-devtools/examples/counter/src/containers/Root.ts +++ b/packages/redux-devtools/examples/counter/src/containers/Root.ts @@ -1,5 +1,15 @@ -if (process.env.NODE_ENV === 'production') { - module.exports = require('./Root.prod'); -} else { - module.exports = require('./Root.dev'); +import { Store } from 'redux'; +import { CounterState } from '../reducers'; +import { CounterAction } from '../actions/CounterActions'; +import { ComponentType } from 'react'; + +interface Props { + store: Store; } +const Root: ComponentType = + process.env.NODE_ENV === 'production' + ? // eslint-disable-next-line @typescript-eslint/no-var-requires + require('./Root.prod').default + : // eslint-disable-next-line @typescript-eslint/no-var-requires + require('./Root.dev').default; +export default Root; diff --git a/packages/redux-devtools/examples/counter/src/index.tsx b/packages/redux-devtools/examples/counter/src/index.tsx index a94ac68d..78661700 100644 --- a/packages/redux-devtools/examples/counter/src/index.tsx +++ b/packages/redux-devtools/examples/counter/src/index.tsx @@ -15,6 +15,7 @@ render( if (module.hot) { module.hot.accept('./containers/Root', () => { + // eslint-disable-next-line @typescript-eslint/no-var-requires const RootContainer = require('./containers/Root').default; render( diff --git a/packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts b/packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts index dbdaef66..347834fb 100644 --- a/packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts +++ b/packages/redux-devtools/examples/counter/src/store/configureStore.dev.ts @@ -4,10 +4,15 @@ import thunk from 'redux-thunk'; import rootReducer, { CounterState } from '../reducers'; import DevTools from '../containers/DevTools'; +function getDebugSessionKey() { + const matches = /[?&]debug_session=([^&#]+)\b/.exec(window.location.href); + return matches && matches.length > 0 ? matches[1] : null; +} + const enhancer = compose( applyMiddleware(thunk), DevTools.instrument(), - persistState(window.location.href.match(/[?&]debug_session=([^&#]+)\b/)) + persistState(getDebugSessionKey()) ); export default function configureStore( @@ -17,6 +22,7 @@ export default function configureStore( if (module.hot) { module.hot.accept('../reducers', () => + // eslint-disable-next-line @typescript-eslint/no-var-requires store.replaceReducer(require('../reducers').default) ); } diff --git a/packages/redux-devtools/examples/counter/src/store/configureStore.ts b/packages/redux-devtools/examples/counter/src/store/configureStore.ts index 78c9ea1f..51bf9eb3 100644 --- a/packages/redux-devtools/examples/counter/src/store/configureStore.ts +++ b/packages/redux-devtools/examples/counter/src/store/configureStore.ts @@ -1,5 +1,13 @@ -if (process.env.NODE_ENV === 'production') { - module.exports = require('./configureStore.prod'); -} else { - module.exports = require('./configureStore.dev'); -} +import { PreloadedState, Store } from 'redux'; +import { CounterState } from '../reducers'; +import { CounterAction } from '../actions/CounterActions'; + +const configureStore: ( + initialState?: PreloadedState +) => Store = + process.env.NODE_ENV === 'production' + ? // eslint-disable-next-line @typescript-eslint/no-var-requires + require('./configureStore.prod').default + : // eslint-disable-next-line @typescript-eslint/no-var-requires + require('./configureStore.dev').default; +export default configureStore; diff --git a/packages/redux-devtools/examples/counter/webpack.config.ts b/packages/redux-devtools/examples/counter/webpack.config.ts index 0023a5ed..8b0200b7 100644 --- a/packages/redux-devtools/examples/counter/webpack.config.ts +++ b/packages/redux-devtools/examples/counter/webpack.config.ts @@ -3,7 +3,6 @@ import * as webpack from 'webpack'; module.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', - devtool: 'eval-source-map', entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', @@ -14,7 +13,6 @@ module.exports = { filename: 'bundle.js', publicPath: '/static/', }, - plugins: [new webpack.HotModuleReplacementPlugin()], module: { rules: [ { @@ -25,9 +23,14 @@ module.exports = { }, ], }, + resolve: { + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }, + plugins: [new webpack.HotModuleReplacementPlugin()], devServer: { historyApiFallback: true, hot: true, port: 3000, }, + devtool: 'eval-source-map', }; diff --git a/packages/redux-devtools/src/createDevTools.tsx b/packages/redux-devtools/src/createDevTools.tsx index 9f7f1168..5fe59db6 100644 --- a/packages/redux-devtools/src/createDevTools.tsx +++ b/packages/redux-devtools/src/createDevTools.tsx @@ -78,7 +78,9 @@ export default function createDevTools< liftedStore?: LiftedStore; - static instrument = (options: Options) => + static instrument = ( + options?: Options + ) => instrument( (state, action) => Monitor.update(monitorProps, state, action), options diff --git a/packages/redux-devtools/src/persistState.ts b/packages/redux-devtools/src/persistState.ts index c619754f..f0717df7 100644 --- a/packages/redux-devtools/src/persistState.ts +++ b/packages/redux-devtools/src/persistState.ts @@ -8,7 +8,7 @@ export default function persistState< A extends Action, MonitorState >( - sessionId?: string, + sessionId: string | null | undefined, deserializeState: (state: S) => S = identity, deserializeAction: (action: A) => A = identity ): StoreEnhancer { diff --git a/tsconfig.base.json b/tsconfig.base.json index 94dc9a42..2a17a794 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -8,6 +8,6 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311 - "types": ["node", "jest"] + "types": ["node", "jest", "webpack-env"] } } diff --git a/yarn.lock b/yarn.lock index 180b96b1..46d50aa9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3408,6 +3408,11 @@ "@types/serve-static" "*" "@types/webpack" "*" +"@types/webpack-env@^1.15.2": + version "1.15.2" + resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.2.tgz#927997342bb9f4a5185a86e6579a0a18afc33b0a" + integrity sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ== + "@types/webpack-sources@*": version "1.4.2" resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c"