ioedeveloper
4 years ago
parent
807fae6521
commit
be64493582
@ -0,0 +1,4 @@ |
||||
{ |
||||
"presets": ["@nrwl/react/babel"], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,248 @@ |
||||
{ |
||||
"rules": { |
||||
"array-callback-return": "warn", |
||||
"dot-location": ["warn", "property"], |
||||
"eqeqeq": ["warn", "smart"], |
||||
"new-parens": "warn", |
||||
"no-caller": "warn", |
||||
"no-cond-assign": ["warn", "except-parens"], |
||||
"no-const-assign": "warn", |
||||
"no-control-regex": "warn", |
||||
"no-delete-var": "warn", |
||||
"no-dupe-args": "warn", |
||||
"no-dupe-keys": "warn", |
||||
"no-duplicate-case": "warn", |
||||
"no-empty-character-class": "warn", |
||||
"no-empty-pattern": "warn", |
||||
"no-eval": "warn", |
||||
"no-ex-assign": "warn", |
||||
"no-extend-native": "warn", |
||||
"no-extra-bind": "warn", |
||||
"no-extra-label": "warn", |
||||
"no-fallthrough": "warn", |
||||
"no-func-assign": "warn", |
||||
"no-implied-eval": "warn", |
||||
"no-invalid-regexp": "warn", |
||||
"no-iterator": "warn", |
||||
"no-label-var": "warn", |
||||
"no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], |
||||
"no-lone-blocks": "warn", |
||||
"no-loop-func": "warn", |
||||
"no-mixed-operators": [ |
||||
"warn", |
||||
{ |
||||
"groups": [ |
||||
["&", "|", "^", "~", "<<", ">>", ">>>"], |
||||
["==", "!=", "===", "!==", ">", ">=", "<", "<="], |
||||
["&&", "||"], |
||||
["in", "instanceof"] |
||||
], |
||||
"allowSamePrecedence": false |
||||
} |
||||
], |
||||
"no-multi-str": "warn", |
||||
"no-native-reassign": "warn", |
||||
"no-negated-in-lhs": "warn", |
||||
"no-new-func": "warn", |
||||
"no-new-object": "warn", |
||||
"no-new-symbol": "warn", |
||||
"no-new-wrappers": "warn", |
||||
"no-obj-calls": "warn", |
||||
"no-octal": "warn", |
||||
"no-octal-escape": "warn", |
||||
"no-redeclare": "warn", |
||||
"no-regex-spaces": "warn", |
||||
"no-restricted-syntax": ["warn", "WithStatement"], |
||||
"no-script-url": "warn", |
||||
"no-self-assign": "warn", |
||||
"no-self-compare": "warn", |
||||
"no-sequences": "warn", |
||||
"no-shadow-restricted-names": "warn", |
||||
"no-sparse-arrays": "warn", |
||||
"no-template-curly-in-string": "warn", |
||||
"no-this-before-super": "warn", |
||||
"no-throw-literal": "warn", |
||||
"no-restricted-globals": [ |
||||
"error", |
||||
"addEventListener", |
||||
"blur", |
||||
"close", |
||||
"closed", |
||||
"confirm", |
||||
"defaultStatus", |
||||
"defaultstatus", |
||||
"event", |
||||
"external", |
||||
"find", |
||||
"focus", |
||||
"frameElement", |
||||
"frames", |
||||
"history", |
||||
"innerHeight", |
||||
"innerWidth", |
||||
"length", |
||||
"location", |
||||
"locationbar", |
||||
"menubar", |
||||
"moveBy", |
||||
"moveTo", |
||||
"name", |
||||
"onblur", |
||||
"onerror", |
||||
"onfocus", |
||||
"onload", |
||||
"onresize", |
||||
"onunload", |
||||
"open", |
||||
"opener", |
||||
"opera", |
||||
"outerHeight", |
||||
"outerWidth", |
||||
"pageXOffset", |
||||
"pageYOffset", |
||||
"parent", |
||||
"print", |
||||
"removeEventListener", |
||||
"resizeBy", |
||||
"resizeTo", |
||||
"screen", |
||||
"screenLeft", |
||||
"screenTop", |
||||
"screenX", |
||||
"screenY", |
||||
"scroll", |
||||
"scrollbars", |
||||
"scrollBy", |
||||
"scrollTo", |
||||
"scrollX", |
||||
"scrollY", |
||||
"self", |
||||
"status", |
||||
"statusbar", |
||||
"stop", |
||||
"toolbar", |
||||
"top" |
||||
], |
||||
"no-unexpected-multiline": "warn", |
||||
"no-unreachable": "warn", |
||||
"no-unused-expressions": [ |
||||
"error", |
||||
{ |
||||
"allowShortCircuit": true, |
||||
"allowTernary": true, |
||||
"allowTaggedTemplates": true |
||||
} |
||||
], |
||||
"no-unused-labels": "warn", |
||||
"no-useless-computed-key": "warn", |
||||
"no-useless-concat": "warn", |
||||
"no-useless-escape": "warn", |
||||
"no-useless-rename": [ |
||||
"warn", |
||||
{ |
||||
"ignoreDestructuring": false, |
||||
"ignoreImport": false, |
||||
"ignoreExport": false |
||||
} |
||||
], |
||||
"no-with": "warn", |
||||
"no-whitespace-before-property": "warn", |
||||
"react-hooks/exhaustive-deps": "warn", |
||||
"require-yield": "warn", |
||||
"rest-spread-spacing": ["warn", "never"], |
||||
"strict": ["warn", "never"], |
||||
"unicode-bom": ["warn", "never"], |
||||
"use-isnan": "warn", |
||||
"valid-typeof": "warn", |
||||
"no-restricted-properties": [ |
||||
"error", |
||||
{ |
||||
"object": "require", |
||||
"property": "ensure", |
||||
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" |
||||
}, |
||||
{ |
||||
"object": "System", |
||||
"property": "import", |
||||
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" |
||||
} |
||||
], |
||||
"getter-return": "warn", |
||||
"import/first": "error", |
||||
"import/no-amd": "error", |
||||
"import/no-webpack-loader-syntax": "error", |
||||
"react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], |
||||
"react/jsx-no-comment-textnodes": "warn", |
||||
"react/jsx-no-duplicate-props": "warn", |
||||
"react/jsx-no-target-blank": "warn", |
||||
"react/jsx-no-undef": "error", |
||||
"react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], |
||||
"react/jsx-uses-react": "warn", |
||||
"react/jsx-uses-vars": "warn", |
||||
"react/no-danger-with-children": "warn", |
||||
"react/no-direct-mutation-state": "warn", |
||||
"react/no-is-mounted": "warn", |
||||
"react/no-typos": "error", |
||||
"react/react-in-jsx-scope": "error", |
||||
"react/require-render-return": "error", |
||||
"react/style-prop-object": "warn", |
||||
"react/jsx-no-useless-fragment": "warn", |
||||
"jsx-a11y/accessible-emoji": "warn", |
||||
"jsx-a11y/alt-text": "warn", |
||||
"jsx-a11y/anchor-has-content": "warn", |
||||
"jsx-a11y/anchor-is-valid": [ |
||||
"warn", |
||||
{ "aspects": ["noHref", "invalidHref"] } |
||||
], |
||||
"jsx-a11y/aria-activedescendant-has-tabindex": "warn", |
||||
"jsx-a11y/aria-props": "warn", |
||||
"jsx-a11y/aria-proptypes": "warn", |
||||
"jsx-a11y/aria-role": "warn", |
||||
"jsx-a11y/aria-unsupported-elements": "warn", |
||||
"jsx-a11y/heading-has-content": "warn", |
||||
"jsx-a11y/iframe-has-title": "warn", |
||||
"jsx-a11y/img-redundant-alt": "warn", |
||||
"jsx-a11y/no-access-key": "warn", |
||||
"jsx-a11y/no-distracting-elements": "warn", |
||||
"jsx-a11y/no-redundant-roles": "warn", |
||||
"jsx-a11y/role-has-required-aria-props": "warn", |
||||
"jsx-a11y/role-supports-aria-props": "warn", |
||||
"jsx-a11y/scope": "warn", |
||||
"react-hooks/rules-of-hooks": "error", |
||||
"default-case": "off", |
||||
"no-dupe-class-members": "off", |
||||
"no-undef": "off", |
||||
"@typescript-eslint/consistent-type-assertions": "warn", |
||||
"no-array-constructor": "off", |
||||
"@typescript-eslint/no-array-constructor": "warn", |
||||
"@typescript-eslint/no-namespace": "error", |
||||
"no-use-before-define": "off", |
||||
"@typescript-eslint/no-use-before-define": [ |
||||
"warn", |
||||
{ |
||||
"functions": false, |
||||
"classes": false, |
||||
"variables": false, |
||||
"typedefs": false |
||||
} |
||||
], |
||||
"no-unused-vars": "off", |
||||
"@typescript-eslint/no-unused-vars": [ |
||||
"warn", |
||||
{ "args": "none", "ignoreRestSiblings": true } |
||||
], |
||||
"no-useless-constructor": "off", |
||||
"@typescript-eslint/no-useless-constructor": "warn" |
||||
}, |
||||
"env": { |
||||
"browser": true, |
||||
"commonjs": true, |
||||
"es6": true, |
||||
"jest": true, |
||||
"node": true |
||||
}, |
||||
"settings": { "react": { "version": "detect" } }, |
||||
"plugins": ["import", "jsx-a11y", "react", "react-hooks"], |
||||
"extends": ["../../.eslintrc"], |
||||
"ignorePatterns": ["!**/*"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
# debugger-ui |
||||
|
||||
This library was generated with [Nx](https://nx.dev). |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `nx test debugger-ui` to execute the unit tests via [Jest](https://jestjs.io). |
||||
@ -0,0 +1,14 @@ |
||||
{ |
||||
"presets": [ |
||||
[ |
||||
"@babel/preset-env", |
||||
{ |
||||
"targets": { |
||||
"node": "current" |
||||
} |
||||
} |
||||
], |
||||
"@babel/preset-typescript", |
||||
"@babel/preset-react" |
||||
] |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
module.exports = { |
||||
name: 'debugger-ui', |
||||
preset: '../../jest.config.js', |
||||
transform: { |
||||
'^.+\\.[tj]sx?$': [ |
||||
'babel-jest', |
||||
{ cwd: __dirname, configFile: './babel-jest.config.json' } |
||||
] |
||||
}, |
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'], |
||||
coverageDirectory: '../../coverage/libs/debugger-ui' |
||||
}; |
||||
@ -0,0 +1 @@ |
||||
export * from './lib/debugger-ui'; |
||||
@ -0,0 +1,11 @@ |
||||
import React from 'react'; |
||||
import { render } from '@testing-library/react'; |
||||
|
||||
import DebuggerUi from './debugger-ui'; |
||||
|
||||
describe(' DebuggerUi', () => { |
||||
it('should render successfully', () => { |
||||
const { baseElement } = render(<DebuggerUi />); |
||||
expect(baseElement).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,246 @@ |
||||
import React from 'react' |
||||
import * as EventManager from '../../../../apps/remix-ide/src/lib/events' |
||||
|
||||
const { useState } = React |
||||
const DebuggerUI = ({ debuggerModule, component, fetchContractAndCompile }) => { |
||||
const [state, setState] = useState({ |
||||
debuggerModule, |
||||
fetchContractAndCompile, |
||||
event |
||||
}) |
||||
return ( |
||||
<div> |
||||
<h1>Welcome to debugger-ui!</h1> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default DebuggerUi |
||||
|
||||
var TxBrowser = require('./debuggerUI/TxBrowser') |
||||
var StepManagerUI = require('./debuggerUI/StepManager') |
||||
var VmDebugger = require('./debuggerUI/VmDebugger') |
||||
var toaster = require('../../ui/tooltip') |
||||
|
||||
var Debugger = require('@remix-project/remix-debug').TransactionDebugger |
||||
|
||||
var SourceHighlighter = require('../../editor/sourceHighlighter') |
||||
|
||||
var globalRegistry = require('../../../global/registry') |
||||
|
||||
var remixLib = require('@remix-project/remix-lib') |
||||
|
||||
var init = remixLib.init |
||||
|
||||
var yo = require('yo-yo') |
||||
var csjs = require('csjs-inject') |
||||
|
||||
var css = csjs` |
||||
.statusMessage { |
||||
margin-left: 15px; |
||||
} |
||||
` |
||||
|
||||
class DebuggerUI { |
||||
|
||||
constructor (debuggerModule, component, fetchContractAndCompile) { |
||||
this.fetchContractAndCompile = fetchContractAndCompile |
||||
this.event = new EventManager() |
||||
|
||||
this.isActive = false |
||||
|
||||
this.sourceHighlighter = new SourceHighlighter() |
||||
|
||||
this.startTxBrowser() |
||||
this.stepManager = null |
||||
|
||||
this.statusMessage = '' |
||||
this.currentReceipt |
||||
|
||||
this.view |
||||
|
||||
component.appendChild(this.render()) |
||||
|
||||
this.setEditor() |
||||
} |
||||
|
||||
setEditor () { |
||||
this.editor = globalRegistry.get('editor').api |
||||
|
||||
this.editor.event.register('breakpointCleared', (fileName, row) => { |
||||
if (this.debugger) this.debugger.breakPointManager.remove({fileName: fileName, row: row}) |
||||
}) |
||||
|
||||
this.editor.event.register('breakpointAdded', (fileName, row) => { |
||||
if (this.debugger) this.debugger.breakPointManager.add({fileName: fileName, row: row}) |
||||
}) |
||||
|
||||
this.editor.event.register('contentChanged', () => { |
||||
if (this.debugger) this.debugger.unload() |
||||
}) |
||||
} |
||||
|
||||
listenToEvents () { |
||||
if (!this.debugger) return |
||||
|
||||
this.debugger.event.register('debuggerStatus', async (isActive) => { |
||||
await this.debuggerModule.call('editor', 'discardHighlight') |
||||
this.isActive = isActive |
||||
}) |
||||
|
||||
this.debugger.event.register('newSourceLocation', async (lineColumnPos, rawLocation) => { |
||||
const contracts = await this.fetchContractAndCompile( |
||||
this.currentReceipt.contractAddress || this.currentReceipt.to, |
||||
this.currentReceipt) |
||||
if (contracts) { |
||||
const path = contracts.getSourceName(rawLocation.file) |
||||
if (path) { |
||||
await this.debuggerModule.call('editor', 'discardHighlight') |
||||
await this.debuggerModule.call('editor', 'highlight', lineColumnPos, path) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
this.debugger.event.register('debuggerUnloaded', () => this.unLoad()) |
||||
} |
||||
|
||||
startTxBrowser () { |
||||
let txBrowser = new TxBrowser() |
||||
this.txBrowser = txBrowser |
||||
|
||||
txBrowser.event.register('requestDebug', (blockNumber, txNumber, tx) => { |
||||
if (this.debugger) this.debugger.unload() |
||||
this.startDebugging(blockNumber, txNumber, tx) |
||||
}) |
||||
|
||||
txBrowser.event.register('unloadRequested', this, (blockNumber, txIndex, tx) => { |
||||
if (this.debugger) this.debugger.unload() |
||||
}) |
||||
} |
||||
|
||||
isDebuggerActive () { |
||||
return this.isActive |
||||
} |
||||
|
||||
getDebugWeb3 () { |
||||
return new Promise((resolve, reject) => { |
||||
this.debuggerModule.blockchain.detectNetwork((error, network) => { |
||||
let web3 |
||||
if (error || !network) { |
||||
web3 = init.web3DebugNode(this.debuggerModule.blockchain.web3()) |
||||
} else { |
||||
const webDebugNode = init.web3DebugNode(network.name) |
||||
web3 = !webDebugNode ? this.debuggerModule.blockchain.web3() : webDebugNode |
||||
} |
||||
init.extendWeb3(web3) |
||||
resolve(web3) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
async startDebugging (blockNumber, txNumber, tx) { |
||||
if (this.debugger) this.unLoad() |
||||
|
||||
let web3 = await this.getDebugWeb3() |
||||
this.currentReceipt = await web3.eth.getTransactionReceipt(txNumber) |
||||
this.debugger = new Debugger({ |
||||
web3, |
||||
offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, |
||||
compilationResult: async (address) => { |
||||
try { |
||||
return await this.fetchContractAndCompile(address, this.currentReceipt) |
||||
} catch (e) { |
||||
console.error(e) |
||||
} |
||||
return null |
||||
} |
||||
}) |
||||
|
||||
this.listenToEvents() |
||||
this.debugger.debug(blockNumber, txNumber, tx, () => { |
||||
this.stepManager = new StepManagerUI(this.debugger.step_manager) |
||||
this.vmDebugger = new VmDebugger(this.debugger.vmDebuggerLogic) |
||||
this.txBrowser.setState({ blockNumber, txNumber, debugging: true }) |
||||
this.renderDebugger() |
||||
}).catch((error) => { |
||||
toaster(error) |
||||
this.unLoad() |
||||
}) |
||||
} |
||||
|
||||
getTrace (hash) { |
||||
return new Promise(async (resolve, reject) => { |
||||
const web3 = await this.getDebugWeb3() |
||||
|
||||
this.currentReceipt = await web3.eth.getTransactionReceipt(hash) |
||||
const debug = new Debugger({ |
||||
web3, |
||||
offsetToLineColumnConverter: globalRegistry.get('offsettolinecolumnconverter').api, |
||||
compilationResult: async (address) => { |
||||
try { |
||||
return await this.fetchContractAndCompile(address, this.currentReceipt) |
||||
} catch (e) { |
||||
console.error(e) |
||||
} |
||||
return null |
||||
} |
||||
}) |
||||
debug.debugger.traceManager.traceRetriever.getTrace(hash, (error, trace) => { |
||||
if (error) return reject(error) |
||||
resolve(trace) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
debug (txHash) { |
||||
this.startDebugging(null, txHash, null) |
||||
} |
||||
|
||||
render () { |
||||
this.debuggerPanelsView = yo`<div class="px-2"></div>` |
||||
this.debuggerHeadPanelsView = yo`<div class="px-2"></div>` |
||||
this.stepManagerView = yo`<div class="px-2"></div>` |
||||
|
||||
var view = yo` |
||||
<div> |
||||
<div class="px-2"> |
||||
${this.txBrowser.render()} |
||||
${this.stepManagerView} |
||||
${this.debuggerHeadPanelsView} |
||||
</div> |
||||
<div class="${css.statusMessage}">${this.statusMessage}</div> |
||||
${this.debuggerPanelsView} |
||||
</div> |
||||
` |
||||
if (!this.view) { |
||||
this.view = view |
||||
} |
||||
return view |
||||
} |
||||
|
||||
async unLoad () { |
||||
yo.update(this.debuggerHeadPanelsView, yo`<div></div>`) |
||||
yo.update(this.debuggerPanelsView, yo`<div></div>`) |
||||
yo.update(this.stepManagerView, yo`<div></div>`) |
||||
if (this.vmDebugger) this.vmDebugger.remove() |
||||
if (this.stepManager) this.stepManager.remove() |
||||
if (this.txBrowser) this.txBrowser.setState({debugging: false}) |
||||
this.vmDebugger = null |
||||
this.stepManager = null |
||||
if (this.debugger) delete this.debugger |
||||
this.event.trigger('traceUnloaded') |
||||
} |
||||
|
||||
async deleteHighlights () { |
||||
await this.debuggerModule.call('editor', 'discardHighlight') |
||||
} |
||||
|
||||
renderDebugger () { |
||||
yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead()) |
||||
yo.update(this.debuggerPanelsView, this.vmDebugger.render()) |
||||
yo.update(this.stepManagerView, this.stepManager.render()) |
||||
} |
||||
|
||||
} |
||||
|
||||
module.exports = DebuggerUI |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"extends": "../../tsconfig.json", |
||||
"compilerOptions": { |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.lib.json" |
||||
}, |
||||
{ |
||||
"path": "./tsconfig.spec.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../dist/out-tsc", |
||||
"module": "commonjs", |
||||
"types": ["jest", "node"] |
||||
}, |
||||
"include": [ |
||||
"**/*.spec.ts", |
||||
"**/*.spec.tsx", |
||||
"**/*.spec.js", |
||||
"**/*.spec.jsx", |
||||
"**/*.d.ts" |
||||
] |
||||
} |
||||
Loading…
Reference in new issue