From 5b4d51844315721f62afb5f3b358e4fd2fc9f93d Mon Sep 17 00:00:00 2001 From: mc-petry Date: Tue, 15 Dec 2015 13:27:17 +0200 Subject: [PATCH 1/4] Update redux devtools to v3 --- .../redux-devtools-dock-monitor.d.ts | 63 ++++++++++ .../redux-devtools-log-monitor.d.ts | 43 +++++++ redux-devtools/redux-devtools-2.1.4-tests.tsx | 62 ++++++++++ redux-devtools/redux-devtools-2.1.4.d.ts | 109 +++++++++++++++++ redux-devtools/redux-devtools-tests.tsx | 84 +++++-------- redux-devtools/redux-devtools.d.ts | 113 ++---------------- 6 files changed, 318 insertions(+), 156 deletions(-) create mode 100644 redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts create mode 100644 redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts create mode 100644 redux-devtools/redux-devtools-2.1.4-tests.tsx create mode 100644 redux-devtools/redux-devtools-2.1.4.d.ts diff --git a/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts b/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts new file mode 100644 index 0000000000..f7e3ded8c6 --- /dev/null +++ b/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts @@ -0,0 +1,63 @@ +// Type definitions for redux-devtools-dock-monitor 1.0.1 +// Project: https://github.com/gaearon/redux-devtools-dock-monitor +// Definitions by: Petryshyn Sergii +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare module "redux-devtools-dock-monitor" { + import * as React from 'react' + + interface IDockMonitorProps { + /** + * Any valid Redux DevTools monitor. + */ + children?: React.ReactNode + + /** + * A key or a key combination that toggles the dock visibility. + * Must be recognizable by parse-key (for example, 'ctrl-h') + */ + toggleVisibilityKey: string + + /** + * A key or a key combination that toggles the dock position. + * Must be recognizable by parse-key (for example, 'ctrl-w') + */ + changePositionKey: string + + /** + * When true, the dock size is a fraction of the window size, fixed otherwise. + * + * @default true + */ + fluid?: boolean + + /** + * Size of the dock. When fluid is true, a float (0.5 means half the window size). + * When fluid is false, a width in pixels + * + * @default 0.3 (3/10th of the window size) + */ + defaultSize?: number + + /** + * Where the dock appears on the screen. + * Valid values: 'left', 'top', 'right', 'bottom' + * + * @default 'right' + */ + defaultPosition?: string + + /** + * @default true + */ + defaultIsVisible?: boolean + } + + class DockMonitor extends React.Component { + } + + let dockMonitor: (new () => DockMonitor) + export = dockMonitor +} \ No newline at end of file diff --git a/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts b/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts new file mode 100644 index 0000000000..0dbd2e107b --- /dev/null +++ b/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts @@ -0,0 +1,43 @@ +// Type definitions for redux-devtools-log-monitor 1.0.1 +// Project: https://github.com/gaearon/redux-devtools-log-monitor +// Definitions by: Petryshyn Sergii +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare module "redux-devtools-log-monitor" { + import * as React from 'react' + + interface ILogMonitorProps { + /** + * Either a string referring to one of the themes provided by + * redux-devtools-themes or a custom object of the same format. + * + * @see https://github.com/gaearon/redux-devtools-themes + */ + theme?: string + + /** + * A function that selects the slice of the state for DevTools to show. + * + * @example state => state.thePart.iCare.about. + * @default state => state. + */ + select?: (state: any) => any + + /** + * When true, records the current scroll top every second so it + * can be restored on refresh. This only has effect when used together + * with persistState() enhancer from Redux DevTools. + * + * @default true + */ + preserveScrollTop?: boolean + } + + class LogMonitor extends React.Component { + } + + var logMonitor: (new () => LogMonitor) + export = logMonitor +} \ No newline at end of file diff --git a/redux-devtools/redux-devtools-2.1.4-tests.tsx b/redux-devtools/redux-devtools-2.1.4-tests.tsx new file mode 100644 index 0000000000..c17aa38abd --- /dev/null +++ b/redux-devtools/redux-devtools-2.1.4-tests.tsx @@ -0,0 +1,62 @@ +/// +/// +/// + +import { compose, createStore, applyMiddleware, Middleware, Reducer } from 'redux'; +import { devTools, persistState } from 'redux-devtools'; +import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'; +import * as React from 'react'; +import { Component } from 'react'; + +declare var m1: Middleware; +declare var m2: Middleware; +declare var m3: Middleware; +declare var reducer: Reducer; +class CounterApp extends Component { }; +class Provider extends Component<{ store: any }, any> { }; + +const finalCreateStore = compose( + // Enables your middleware: + applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-thunk + // Provides support for DevTools: + devTools(), + // Lets you write ?debug_session= in address bar to persist debug sessions + persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) +)(createStore); +const store = finalCreateStore(reducer); + +class Root extends Component { + render() { + return ( +
+ + {() => } + + + + +
+ ); + } +} + +// +// https://github.com/gaearon/redux-devtools/blob/master/examples/counter/containers/App.js +// + +class App extends Component { + render() { + return ( +
+ + {() => } + + + + +
+ ); + } +} diff --git a/redux-devtools/redux-devtools-2.1.4.d.ts b/redux-devtools/redux-devtools-2.1.4.d.ts new file mode 100644 index 0000000000..7612adb7c9 --- /dev/null +++ b/redux-devtools/redux-devtools-2.1.4.d.ts @@ -0,0 +1,109 @@ +// Type definitions for redux-devtools 2.1.4 +// Project: https://github.com/gaearon/redux-devtools +// Definitions by: Qubo +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// +/// + +declare module "redux-devtools" { + export function devTools(): Function; + export function persistState(sessionId: any, stateDeserializer?: Function, actionDeserializer?: Function): Function; +} + +declare module "redux-devtools/lib/react" { + import * as React from 'react'; + + export class DevTools extends React.Component { + + } + + export interface DevToolsProps { + monitor: Function; + store: Store; + } + + export interface Store { + devToolStore: DevToolStore; + } + + export class DevToolStore extends React.Component { + dispatch: Function; + } + + export class DebugPanel extends React.Component { } + + export interface DebugPanelProps { + position?: string; + zIndex?: number; + fontSize?: string; + overflow?: string; + opacity?: number; + color?: string; + left?: boolean|number; + right?: boolean|number; + top?: boolean|number; + bottom?: boolean|number; + maxHeight?: string; + maxWidth?: string; + wordWrap?: string; + boxSizing?: string; + boxShadow?: string; + getStyle?: () => DebugPanelProps; + } + + export class LogMonitor extends React.Component { } + + export interface LogMonitorProps { + computedStates?: ComputedState[]; + currentStateIndex?: number; + monitorState?: MonitorState; + stagedActions?: Action[]; + skippedActions?: boolean[]; + reset?: Function; + commit?: Function; + rollback?: Function; + sweep?: Function; + toggleAction?: Function; + jumpToState?: Function; + setMonitorState?: Function; + select?: Function; + visibleOnLoad?: boolean; + theme?: Theme|string; + } + + export interface ComputedState { + state?: any; + error?: string; + } + + export interface MonitorState { + isViaible?: boolean; + } + + export interface Action { + type: string; + } + + export interface Theme { + 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; + } +} + diff --git a/redux-devtools/redux-devtools-tests.tsx b/redux-devtools/redux-devtools-tests.tsx index c17aa38abd..45d5410910 100644 --- a/redux-devtools/redux-devtools-tests.tsx +++ b/redux-devtools/redux-devtools-tests.tsx @@ -1,62 +1,34 @@ -/// -/// /// +/// +/// +/// +/// +/// -import { compose, createStore, applyMiddleware, Middleware, Reducer } from 'redux'; -import { devTools, persistState } from 'redux-devtools'; -import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'; -import * as React from 'react'; -import { Component } from 'react'; +import * as React from 'react' +import { createStore, applyMiddleware, compose } from 'redux' +import { Provider } from 'react-redux' +import { createDevTools, persistState } from 'redux-devtools' +import * as LogMonitor from 'redux-devtools-log-monitor' +import * as DockMonitor from 'redux-devtools-dock-monitor' -declare var m1: Middleware; -declare var m2: Middleware; -declare var m3: Middleware; -declare var reducer: Reducer; -class CounterApp extends Component { }; -class Provider extends Component<{ store: any }, any> { }; +const DevTools = createDevTools( + + + +) const finalCreateStore = compose( - // Enables your middleware: - applyMiddleware(m1, m2, m3), // any Redux middleware, e.g. redux-thunk - // Provides support for DevTools: - devTools(), - // Lets you write ?debug_session= in address bar to persist debug sessions - persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)) -)(createStore); -const store = finalCreateStore(reducer); + DevTools.instrument(), + persistState('test-session') +)(createStore) -class Root extends Component { - render() { - return ( -
- - {() => } - - - - -
- ); - } -} - -// -// https://github.com/gaearon/redux-devtools/blob/master/examples/counter/containers/App.js -// - -class App extends Component { - render() { - return ( -
- - {() => } - - - - -
- ); - } -} +class App extends React.Component { + render() { + return ( + + + + ) + } +} \ No newline at end of file diff --git a/redux-devtools/redux-devtools.d.ts b/redux-devtools/redux-devtools.d.ts index 7612adb7c9..8494b0322c 100644 --- a/redux-devtools/redux-devtools.d.ts +++ b/redux-devtools/redux-devtools.d.ts @@ -1,109 +1,22 @@ -// Type definitions for redux-devtools 2.1.4 +// Type definitions for redux-devtools 3.0.0 // Project: https://github.com/gaearon/redux-devtools -// Definitions by: Qubo -// Definitions: https://github.com/borisyankov/DefinitelyTyped +// Definitions by: Petryshyn Sergii +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -/// /// declare module "redux-devtools" { - export function devTools(): Function; - export function persistState(sessionId: any, stateDeserializer?: Function, actionDeserializer?: Function): Function; -} + import * as React from 'react' -declare module "redux-devtools/lib/react" { - import * as React from 'react'; + interface IDevTools { + new (): JSX.ElementClass + instrument(): Function + } - export class DevTools extends React.Component { + export function createDevTools(el: React.ReactElement): IDevTools + export function persistState(debugSessionKey: () => string): Function - } - - export interface DevToolsProps { - monitor: Function; - store: Store; - } - - export interface Store { - devToolStore: DevToolStore; - } - - export class DevToolStore extends React.Component { - dispatch: Function; - } - - export class DebugPanel extends React.Component { } - - export interface DebugPanelProps { - position?: string; - zIndex?: number; - fontSize?: string; - overflow?: string; - opacity?: number; - color?: string; - left?: boolean|number; - right?: boolean|number; - top?: boolean|number; - bottom?: boolean|number; - maxHeight?: string; - maxWidth?: string; - wordWrap?: string; - boxSizing?: string; - boxShadow?: string; - getStyle?: () => DebugPanelProps; - } - - export class LogMonitor extends React.Component { } - - export interface LogMonitorProps { - computedStates?: ComputedState[]; - currentStateIndex?: number; - monitorState?: MonitorState; - stagedActions?: Action[]; - skippedActions?: boolean[]; - reset?: Function; - commit?: Function; - rollback?: Function; - sweep?: Function; - toggleAction?: Function; - jumpToState?: Function; - setMonitorState?: Function; - select?: Function; - visibleOnLoad?: boolean; - theme?: Theme|string; - } - - export interface ComputedState { - state?: any; - error?: string; - } - - export interface MonitorState { - isViaible?: boolean; - } - - export interface Action { - type: string; - } - - export interface Theme { - 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; - } -} + var factory: { instrument(): Function } + export default factory; +} \ No newline at end of file From 36e2ea37c5b57e0eaa7f2cddf52a1fa255a8b8f3 Mon Sep 17 00:00:00 2001 From: mc-petry Date: Tue, 15 Dec 2015 15:08:54 +0200 Subject: [PATCH 2/4] Add log & dock monitors tests, fix devtools persostState --- .../redux-devtools-dock-monitor-tests.tsx | 7 +++++++ .../redux-devtools-log-monitor-tests.tsx | 7 +++++++ redux-devtools/redux-devtools-tests.tsx | 11 ++++------- redux-devtools/redux-devtools.d.ts | 2 +- 4 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx create mode 100644 redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx diff --git a/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx b/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx new file mode 100644 index 0000000000..dee4b39c2a --- /dev/null +++ b/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx @@ -0,0 +1,7 @@ +/// +/// + +import * as React from 'react' +import * as DockMonitor from 'redux-devtools-dock-monitor' + +let dockMonitor = \ No newline at end of file diff --git a/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx b/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx new file mode 100644 index 0000000000..a472705e4c --- /dev/null +++ b/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx @@ -0,0 +1,7 @@ +/// +/// + +import * as React from 'react' +import * as LogMonitor from 'redux-devtools-log-monitor' + +let logMonitor = \ No newline at end of file diff --git a/redux-devtools/redux-devtools-tests.tsx b/redux-devtools/redux-devtools-tests.tsx index 45d5410910..2cacd47c7a 100644 --- a/redux-devtools/redux-devtools-tests.tsx +++ b/redux-devtools/redux-devtools-tests.tsx @@ -1,21 +1,18 @@ /// /// /// -/// -/// /// import * as React from 'react' import { createStore, applyMiddleware, compose } from 'redux' import { Provider } from 'react-redux' import { createDevTools, persistState } from 'redux-devtools' -import * as LogMonitor from 'redux-devtools-log-monitor' -import * as DockMonitor from 'redux-devtools-dock-monitor' + +class DevToolsMonitor extends React.Component { +} const DevTools = createDevTools( - - - + ) const finalCreateStore = compose( diff --git a/redux-devtools/redux-devtools.d.ts b/redux-devtools/redux-devtools.d.ts index 8494b0322c..47ad2198d9 100644 --- a/redux-devtools/redux-devtools.d.ts +++ b/redux-devtools/redux-devtools.d.ts @@ -14,7 +14,7 @@ declare module "redux-devtools" { } export function createDevTools(el: React.ReactElement): IDevTools - export function persistState(debugSessionKey: () => string): Function + export function persistState(debugSessionKey: string): Function var factory: { instrument(): Function } From 31c6eea1529cb2d35c87e0c3975ea7c50b87f449 Mon Sep 17 00:00:00 2001 From: mc-petry Date: Tue, 15 Dec 2015 15:16:56 +0200 Subject: [PATCH 3/4] Fix redux-devtools 2.1.4 tests --- redux-devtools/redux-devtools-2.1.4-tests.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redux-devtools/redux-devtools-2.1.4-tests.tsx b/redux-devtools/redux-devtools-2.1.4-tests.tsx index c17aa38abd..a57811f16b 100644 --- a/redux-devtools/redux-devtools-2.1.4-tests.tsx +++ b/redux-devtools/redux-devtools-2.1.4-tests.tsx @@ -1,4 +1,4 @@ -/// +/// /// /// From a507ed9ef2955734b3cf362a0a74b21c7241cebc Mon Sep 17 00:00:00 2001 From: mc-petry Date: Wed, 16 Dec 2015 12:36:41 +0200 Subject: [PATCH 4/4] Use ES6 default style export --- .../redux-devtools-dock-monitor-tests.tsx | 2 +- .../redux-devtools-dock-monitor.d.ts | 6 +----- .../redux-devtools-log-monitor-tests.tsx | 2 +- redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts | 6 +----- 4 files changed, 4 insertions(+), 12 deletions(-) diff --git a/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx b/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx index dee4b39c2a..00845bdc0a 100644 --- a/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx +++ b/redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx @@ -2,6 +2,6 @@ /// import * as React from 'react' -import * as DockMonitor from 'redux-devtools-dock-monitor' +import DockMonitor from 'redux-devtools-dock-monitor' let dockMonitor = \ No newline at end of file diff --git a/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts b/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts index f7e3ded8c6..09e3d96036 100644 --- a/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts +++ b/redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts @@ -55,9 +55,5 @@ declare module "redux-devtools-dock-monitor" { defaultIsVisible?: boolean } - class DockMonitor extends React.Component { - } - - let dockMonitor: (new () => DockMonitor) - export = dockMonitor + export default class DockMonitor extends React.Component {} } \ No newline at end of file diff --git a/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx b/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx index a472705e4c..dbcdbcf7a2 100644 --- a/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx +++ b/redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx @@ -2,6 +2,6 @@ /// import * as React from 'react' -import * as LogMonitor from 'redux-devtools-log-monitor' +import LogMonitor from 'redux-devtools-log-monitor' let logMonitor = \ No newline at end of file diff --git a/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts b/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts index 0dbd2e107b..8c96c804da 100644 --- a/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts +++ b/redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts @@ -35,9 +35,5 @@ declare module "redux-devtools-log-monitor" { preserveScrollTop?: boolean } - class LogMonitor extends React.Component { - } - - var logMonitor: (new () => LogMonitor) - export = logMonitor + export default class LogMonitor extends React.Component {} } \ No newline at end of file