Move StackTraceTab and react-error-overlay

From zalmoxisus/remotedev-app/pull/43

packages/redux-devtools-trace-monitor/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [ ["env", {
+    "targets": {
+      "firefox" : 56,
+      "chrome" : 64
+    }
+  }], "react", "flow"],
+  "plugins": [ "transform-class-properties", "transform-object-rest-spread", "add-module-exports", "transform-decorators-legacy" ]
+}

packages/redux-devtools-trace-monitor/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+build
+dev
+dist
+lib

packages/redux-devtools-trace-monitor/.eslintrc

@@ -0,0 +1,36 @@
+{
+  "extends": "eslint-config-airbnb",
+  "globals": {
+    "chrome": true
+  },
+  "env": {
+    "jest": true,
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/sort-comp": 0,
+    "react/jsx-quotes": 0,
+    "block-scoped-var": 0,
+    "padded-blocks": 0,
+    "quotes": [ 1, "single" ],
+    "comma-style": [ 2, "last" ],
+    "eol-last": 0,
+    "no-unused-vars": 0,
+    "no-console": 0,
+    "func-names": 0,
+    "prefer-const": 0,
+    "comma-dangle": 0,
+    "id-length": 0,
+    "no-use-before-define": 0,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "new-cap": [2, { "capIsNewExceptions": ["Test"] }]
+  },
+  "plugins": [
+    "react"
+  ]
+}

packages/redux-devtools-trace-monitor/LICENSE

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/redux-devtools-trace-monitor/README.md

@@ -0,0 +1,36 @@
+Redux DevTools Stack Trace Monitor
+==================================
+
+Submonitor for Redux DevTools inspector to show stack traces. Based on [`react-error-overlay`](https://github.com/facebook/create-react-app/tree/master/packages/react-error-overlay) and the contribution of [Mark Erikson](https://github.com/markerikson) in [the PR from `remotedev-app`](https://github.com/zalmoxisus/remotedev-app/pull/43/).
+
+It's integrated in Redux DevTools browser extension. To use it separately with [`redux-devtools`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools) and [`redux-devtools-inspector`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector) according to [Walkthrough](https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md):
+
+##### `containers/DevTools.js`
+
+```js
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import Inspector from 'redux-devtools-inspector';
+import TraceMonitor from 'redux-devtools-trace-monitor';
+
+export default createDevTools(
+  <Inspector
+    tabs: defaultTabs => [...defaultTabs, { name: 'Trace', component: TraceMonitor }]
+  />
+);
+```
+
+##### `store/configureStore.js`
+
+```js
+// ...
+const enhancer = compose(
+  // ...
+  DevTools.instrument({ trace: true })
+);
+// ...
+```
+
+### License
+
+MIT

packages/redux-devtools-trace-monitor/index.js

@@ -0,0 +1,57 @@
+import React, { Component, PropTypes } from 'react';
+import InspectorMonitor from 'remotedev-inspector-monitor';
+import StackTraceTab from './StackTraceTab';
+import { DATA_TYPE_KEY } from '../../../constants/dataTypes';
+import SubTabs from './SubTabs';
+import TestTab from './TestTab';
+
+const DEFAULT_TABS = [{
+  name: 'Action',
+  component: SubTabs
+}, {
+  name: 'State',
+  component: SubTabs
+}, {
+  name: 'Diff',
+  component: SubTabs
+}];
+
+const NON_INIT_TABS = [
+  { name: 'Trace', component: StackTraceTab }
+];
+
+class InspectorWrapper extends Component {
+  static update = InspectorMonitor.update;
+
+  render() {
+    const { lib, ...rest } = this.props;
+    console.log(rest);
+    let tabs;
+    if (lib === 'redux') {
+      tabs = () => [
+        ...DEFAULT_TABS,
+        ...(!rest.monitorState || rest.monitorState.selectedActionId === null ? NON_INIT_TABS : []),
+        { name: 'Test', component: TestTab }
+      ];
+    } else {
+      tabs = () => DEFAULT_TABS;
+    }
+
+    return (
+      <InspectorMonitor
+        dataTypeKey={DATA_TYPE_KEY}
+        shouldPersistState={false}
+        invertTheme={false}
+        theme="nicinabox"
+        tabs={tabs}
+        {...rest}
+      />
+    );
+  }
+}
+
+InspectorWrapper.propTypes = {
+  lib: PropTypes.string
+};
+
+export default InspectorWrapper;

packages/redux-devtools-trace-monitor/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "redux-devtools-trace-monitor",
+  "version": "0.1.0",
+  "description": "Submonitor for Redux DevTools inspector to show stack traces.",
+  "repository": "https://github.com/reduxjs/redux-devtools",
+  "homepage": "https://github.com/reduxjs/redux-devtools",
+  "author": "Mark Erikson <[email protected]>",
+  "contributors": [
+    "Mihail Diordiev <[email protected]> (https://github.com/zalmoxisus)"
+  ],
+  "license": "MIT",
+  "main": "lib/StackTraceTab.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "babel src --out-dir lib",
+    "lint": "eslint src test",
+    "lint:fix": "eslint --fix src test",
+    "test": "jest --no-cache",
+    "postinstall": "npm run build",
+    "prepublishOnly": "npm run lint && npm run test && npm run clean && npm run build"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.0.5",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-react-transform": "^2.0.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-es2015-loose": "^7.0.0",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-react-app": "^3.1.2",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-register": "^6.11.6",
+    "enzyme": "^2.6.0",
+    "enzyme-to-json": "^1.3.0",
+    "eslint": "^2.13.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.9.2",
+    "eslint-plugin-jsx-a11y": "^1.5.3",
+    "eslint-plugin-react": "^5.2.2",
+    "jest": "^17.0.3",
+    "react-addons-test-utils": "^15.4.0",
+    "react-dom": "^15.4.0",
+    "rimraf": "^2.5.2"
+  },
+  "dependencies": {
+    "@babel/code-frame": "^7.0.0",
+    "anser": "^1.4.7",
+    "chalk": "^2.4.1",
+    "html-entities": "^1.2.1",
+    "react": "^15.4.0",
+    "settle-promise": "^1.0.0"
+  }
+}

packages/redux-devtools-trace-monitor/src/StackTraceTab.js

@@ -0,0 +1,141 @@
+import React, { Component, PropTypes } from 'react';
+// import ErrorStackParser from "error-stack-parser";
+
+import {getStackFrames} from "./react-error-overlay/utils/getStackFrames";
+import StackTrace from "./react-error-overlay/containers/StackTrace";
+
+export default class StackTraceTab extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            stackFrames : []
+        };
+    }
+    componentDidMount() {
+        //console.log("StackTraceTab mounted");
+        this.checkForStackTrace();
+    }
+
+    componentDidUpdate(prevProps) {
+        const {action, actions} = prevProps;
+
+        if(action !== this.props.action || actions !== this.props.actions) {
+            this.checkForStackTrace();
+        }
+    }
+
+    checkForStackTrace() {
+        const {action, actions : liftedActionsById} = this.props;
+
+        if(!action) {
+            return;
+        }
+
+        const liftedActions = Object.values(liftedActionsById);
+        const liftedAction = liftedActions.find(liftedAction => liftedAction.action === action);
+
+
+        if(liftedAction && typeof liftedAction.stack === 'string') {
+            const deserializedError = Object.assign(new Error(), {stack: liftedAction.stack});
+
+            getStackFrames(deserializedError)
+                .then(stackFrames => {
+                    console.log("Stack frames: ", stackFrames);
+                    this.setState({stackFrames, currentError : deserializedError});
+                })
+        }
+        else {
+            this.setState({stackFrames : []})
+        }
+    }
+
+    /*
+    onStackFrameClicked = (i) => {
+        const stackFrame = this.state.stackFrames[i];
+
+        if(stackFrame) {
+            const parsedFramesNoSourcemaps = ErrorStackParser.parse(this.state.currentError)
+            console.log("Parsed stack frames: ", parsedFramesNoSourcemaps);
+
+            if(chrome && chrome.devtools.panels.openResource) {
+                const frameWithoutSourcemap = parsedFramesNoSourcemaps[i];
+                const {fileName, lineNumber} = frameWithoutSourcemap;
+                console.log("Parsed stack frame: ", stackFrame);
+                console.log("Original stack frame: ", frameWithoutSourcemap);
+
+                const adjustedLineNumber = Math.max(lineNumber - 1, 0);
+
+
+                chrome.devtools.panels.openResource(fileName, adjustedLineNumber, (...callbackArgs) => {
+                    console.log("openResource callback args: ", callbackArgs);
+                    //console.log("Testing");
+                });
+            }
+        }
+    }
+    */
+
+    onStackLocationClicked = (fileLocation = {}) => {
+        //console.log("Stack location args: ", ...args);
+
+        // const parsedFramesNoSourcemaps = ErrorStackParser.parse(this.state.currentError)
+        //console.log("Parsed stack frames: ", parsedFramesNoSourcemaps);
+
+        const {fileName, lineNumber} = fileLocation;
+
+        if(fileName && lineNumber) {
+            const matchingStackFrame = this.state.stackFrames.find(stackFrame => {
+                const matches = (
+                    (stackFrame._originalFileName === fileName && stackFrame._originalLineNumber === lineNumber) ||
+                    (stackFrame.fileName === fileName && stackFrame.lineNumber === lineNumber)
+                );
+                return matches;
+            })
+
+            //console.log("Matching stack frame: ", matchingStackFrame);
+
+            if(matchingStackFrame) {
+                /*
+                const frameIndex = this.state.stackFrames.indexOf(matchingStackFrame);
+                const originalStackFrame = parsedFramesNoSourcemaps[frameIndex];
+                console.log("Original stack frame: ", originalStackFrame);
+                */
+                const adjustedLineNumber = Math.max(lineNumber - 1, 0);
+
+
+                chrome.devtools.panels.openResource(fileName, adjustedLineNumber, (result) => {
+                    //console.log("openResource callback args: ", callbackArgs);
+                    //console.log("Testing");
+                    if(result.isError) {
+                        const {fileName : finalFileName, lineNumber : finalLineNumber} = matchingStackFrame;
+                        const adjustedLineNumber = Math.max(finalLineNumber - 1, 0);
+                        chrome.devtools.panels.openResource(finalFileName, adjustedLineNumber, (result) => {
+                            //console.log("openResource result: ", result);
+                        });
+                    }
+                });
+            }
+        }
+
+    }
+
+
+    render() {
+        const {stackFrames} = this.state;
+
+        return (
+            <div style={{backgroundColor : "white", color : "black"}}>
+                <h2>Dispatched Action Stack Trace</h2>
+                <div style={{display : "flex", flexDirection : "column"}}>
+                    <StackTrace
+                        stackFrames={stackFrames}
+                        errorName={"N/A"}
+                        contextSize={3}
+                        editorHandler={this.onStackLocationClicked}
+                    />
+                </div>
+            </div>
+        )
+    }
+}