scaffold react lib

pull/453/head
ioedeveloper 4 years ago
parent 807fae6521
commit be64493582
  1. 4
      libs/debugger-ui/.babelrc
  2. 248
      libs/debugger-ui/.eslintrc
  3. 7
      libs/debugger-ui/README.md
  4. 14
      libs/debugger-ui/babel-jest.config.json
  5. 12
      libs/debugger-ui/jest.config.js
  6. 1
      libs/debugger-ui/src/index.ts
  7. 0
      libs/debugger-ui/src/lib/debugger-ui.css
  8. 11
      libs/debugger-ui/src/lib/debugger-ui.spec.tsx
  9. 246
      libs/debugger-ui/src/lib/debugger-ui.tsx
  10. 19
      libs/debugger-ui/tsconfig.json
  11. 13
      libs/debugger-ui/tsconfig.lib.json
  12. 15
      libs/debugger-ui/tsconfig.spec.json
  13. 3
      nx.json
  14. 9
      package.json
  15. 3
      tsconfig.json
  16. 2
      workspace.json

@ -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"
]
}

@ -66,6 +66,9 @@
},
"remixd": {
"tags": []
},
"debugger-ui": {
"tags": []
}
}
}

@ -151,7 +151,9 @@
"commander": "^2.20.3",
"fs-extra": "^3.0.1",
"isbinaryfile": "^3.0.2",
"ws": "^7.3.0"
"ws": "^7.3.0",
"react": "16.13.1",
"react-dom": "16.13.1"
},
"devDependencies": {
"@babel/core": "^7.4.5",
@ -271,6 +273,9 @@
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-standard": "4.0.1",
"nodemon": "^2.0.4",
"@types/jest": "25.1.4"
"@types/jest": "25.1.4",
"@babel/preset-typescript": "7.9.0",
"@babel/preset-react": "7.9.4",
"babel-jest": "25.1.0"
}
}

@ -24,7 +24,8 @@
"@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
"@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
"@remix-project/remix-url-resolver": ["dist/libs/remix-url-resolver/index.js"],
"@remix-project/remixd": ["dist/libs/remixd/index.js"]
"@remix-project/remixd": ["dist/libs/remixd/index.js"],
"@remix-project/debugger-ui": ["libs/debugger-ui/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]

@ -492,7 +492,7 @@
"builder": "@nrwl/node:package",
"options": {
"outputPath": "dist/libs/remixd",
"tsConfig": "libs/remixd/tsconfig.lib.json",
"tsConfig": "libs/remixd/tsconfig.lib.js on",
"packageJson": "libs/remixd/package.json",
"main": "libs/remixd/src/index.ts",
"assets": ["libs/remixd/*.md", "libs/remixd/src/origins.json"]

Loading…
Cancel
Save