Merge pull request #7207 from mc-petry/redux-devtools-v3

Update redux devtools to v3

redux-devtools-dock-monitor/redux-devtools-dock-monitor-tests.tsx

@@ -0,0 +1,7 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="./redux-devtools-dock-monitor.d.ts" />
+
+import * as React from 'react'
+import DockMonitor from 'redux-devtools-dock-monitor'
+
+let dockMonitor = <DockMonitor toggleVisibilityKey='ctrl-h' changePositionKey='ctrl-q' />

redux-devtools-dock-monitor/redux-devtools-dock-monitor.d.ts

@@ -0,0 +1,59 @@
+// Type definitions for redux-devtools-dock-monitor 1.0.1
+// Project: https://github.com/gaearon/redux-devtools-dock-monitor
+// Definitions by: Petryshyn Sergii <https://github.com/mc-petry>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts" />
+
+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
+  }
+
+  export default class DockMonitor extends React.Component<IDockMonitorProps, any> {}
+}

redux-devtools-log-monitor/redux-devtools-log-monitor-tests.tsx

@@ -0,0 +1,7 @@
+/// <reference path="../react/react.d.ts" />
+/// <reference path="./redux-devtools-log-monitor.d.ts" />
+
+import * as React from 'react'
+import LogMonitor from 'redux-devtools-log-monitor'
+
+let logMonitor = <LogMonitor />

redux-devtools-log-monitor/redux-devtools-log-monitor.d.ts

@@ -0,0 +1,39 @@
+// Type definitions for redux-devtools-log-monitor 1.0.1
+// Project: https://github.com/gaearon/redux-devtools-log-monitor
+// Definitions by: Petryshyn Sergii <https://github.com/mc-petry>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="../react/react.d.ts" />
+
+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
+  }
+
+  export default class LogMonitor extends React.Component<ILogMonitorProps, any> {}
+}

redux-devtools/redux-devtools-2.1.4-tests.tsx

@@ -0,0 +1,62 @@
+/// <reference path="redux-devtools-2.1.4.d.ts" />
+/// <reference path="../redux/redux.d.ts" />
+/// <reference path="../react/react.d.ts" />
+
+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<any, any> { };
+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=<name> in address bar to persist debug sessions
+    persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
+)(createStore);
+const store = finalCreateStore(reducer);
+
+class Root extends Component<any, any> {
+    render() {
+        return (
+            <div>
+                <Provider store={store}>
+                    {() => <CounterApp />}
+                </Provider>
+                <DebugPanel top right bottom>
+                    <DevTools store={store} monitor={LogMonitor} />
+                </DebugPanel>
+            </div>
+        );
+    }
+}
+
+//
+// https://github.com/gaearon/redux-devtools/blob/master/examples/counter/containers/App.js
+//
+
+class App extends Component<any, any> {
+    render() {
+        return (
+            <div>
+                <Provider store={store}>
+                    {() => <CounterApp />}
+                </Provider>
+                <DebugPanel top right bottom>
+                    <DevTools store={store}
+                        monitor={LogMonitor}
+                        visibleOnLoad={true} />
+                </DebugPanel>
+            </div>
+        );
+    }
+}

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 <https://github.com/tkqubo>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+/// <reference path="../redux/redux.d.ts" />
+/// <reference path="../react/react.d.ts" />
+
+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<any, any> {
+
+    }
+
+    export interface DevToolsProps {
+        monitor: Function;
+        store: Store;
+    }
+
+    export interface Store {
+        devToolStore: DevToolStore;
+    }
+
+    export class DevToolStore extends React.Component<any, any> {
+        dispatch: Function;
+    }
+
+    export class DebugPanel extends React.Component<DebugPanelProps, any> { }
+
+    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<LogMonitorProps, any> { }
+
+    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;
+    }
+}
+

redux-devtools/redux-devtools-tests.tsx

@@ -1,62 +1,31 @@
-/// <reference path="redux-devtools.d.ts" />
-/// <reference path="../redux/redux.d.ts" />
 /// <reference path="../react/react.d.ts" />
+/// <reference path="../redux/redux.d.ts" />
+/// <reference path="../react-redux/react-redux.d.ts" />
+/// <reference path="redux-devtools.d.ts" />
 
-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'
 
-declare var m1: Middleware;
-declare var m2: Middleware;
-declare var m3: Middleware;
-declare var reducer: Reducer;
-class CounterApp extends Component<any, any> { };
-class Provider extends Component<{ store: any }, any> { };
+class DevToolsMonitor extends React.Component<any, any> {  
+}
+
+const DevTools = createDevTools(
+  <DevToolsMonitor />
+)
 
 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=<name> 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<any, any> {
-    render() {
-        return (
-            <div>
-                <Provider store={store}>
-                    {() => <CounterApp />}
-                </Provider>
-                <DebugPanel top right bottom>
-                    <DevTools store={store} monitor={LogMonitor} />
-                </DebugPanel>
-            </div>
-        );
-    }
-}
-
-//
-// https://github.com/gaearon/redux-devtools/blob/master/examples/counter/containers/App.js
-//
-
-class App extends Component<any, any> {
-    render() {
-        return (
-            <div>
-                <Provider store={store}>
-                    {() => <CounterApp />}
-                </Provider>
-                <DebugPanel top right bottom>
-                    <DevTools store={store}
-                        monitor={LogMonitor}
-                        visibleOnLoad={true} />
-                </DebugPanel>
-            </div>
-        );
-    }
-}
+class App extends React.Component<any, any> {
+  render() {
+    return (
+      <Provider>
+        <DevTools />
+      </Provider>
+    )
+  }
+}

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 <https://github.com/tkqubo>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
+// Definitions by: Petryshyn Sergii <https://github.com/mc-petry>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
-/// <reference path="../redux/redux.d.ts" />
 /// <reference path="../react/react.d.ts" />
 
 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<any, any> {
+  export function createDevTools(el: React.ReactElement<any>): 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<any, any> {
-        dispatch: Function;
-    }
-
-    export class DebugPanel extends React.Component<DebugPanelProps, any> { }
-
-    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<LogMonitorProps, any> { }
-
-    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;
+}