scaffold react lib

libs/debugger-ui/.babelrc

+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}

libs/debugger-ui/.eslintrc

+{
+  "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": ["!**/*"]
+}

libs/debugger-ui/README.md

+# 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).

libs/debugger-ui/babel-jest.config.json

+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

libs/debugger-ui/jest.config.js

+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'
+};

libs/debugger-ui/src/index.ts

+export * from './lib/debugger-ui';

libs/debugger-ui/src/lib/debugger-ui.spec.tsx

+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();
+  });
+});

libs/debugger-ui/src/lib/debugger-ui.tsx

+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

libs/debugger-ui/tsconfig.json

+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/debugger-ui/tsconfig.lib.json

+{
+  "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"]
+}

libs/debugger-ui/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

nx.json

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

package.json

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

tsconfig.json

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

workspace.json

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