Merge pull request #621 from ethereum/refactorDebugger

refactor debugger component

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -68,9 +68,25 @@ class DebuggerTab extends ViewPlugin {
     return this.el
   }
 
+  async discardHighlight () {
+    await this.call('editor', 'discardHighlight')
+  }
+
+  async highlight (lineColumnPos, path) {
+    await this.call('editor', 'highlight', lineColumnPos, path)
+  }
+
+  async getFile (path) {
+    await this.call('fileManager', 'getFile', path)
+  }
+
+  async setFile (path, content) {
+    await this.call('fileManager', 'setFile', path, content)
+  }
+
   renderComponent () {
     ReactDOM.render(
-      <DebuggerUI debuggerModule={this} />
+      <DebuggerUI debuggerAPI={this} />
       , this.el)
   }
 

libs/remix-solidity/src/index.ts

@@ -1,2 +1,3 @@
 export { Compiler } from './compiler/compiler'
 export { default as CompilerInput } from './compiler/compiler-input'
+export * from './compiler/types'

libs/remix-ui/debugger-ui/src/lib/DebuggerAPI.ts

@@ -0,0 +1,64 @@
+
+import type { CompilationResult, CompilationSource } from '@remix-project/remix-solidity-ts'
+
+export interface DebuggerUIProps {
+    debuggerAPI: DebuggerAPI  
+}
+
+interface EditorEvent {
+    event: { 
+        register(eventName: 'breakpointCleared' | 'breakpointAdded' | 'contentChanged', 
+        callback: (fileName: string, row: string | number) => void) 
+    }
+}
+
+interface LineColumnLocation {
+    start: {
+        line: number, column: number
+    }, 
+    end: {
+        line: number, column: number
+    }
+}
+
+interface RawLocation {
+    start: number, length: number
+}
+
+interface Sources {
+    [fileName: string] : {content: string}
+}
+
+interface CompilationOutput {
+    source: { sources: Sources, target: string }
+    data: CompilationResult
+    getSourceName: (id: number) => string
+}
+
+interface Asts {
+    [fileName: string] : CompilationSource // ast
+}
+
+interface TransactionReceipt {
+    blockHash: string
+    blockNumber: number
+    transactionHash: string
+    transactionIndex: number
+    from: string
+    to: string
+    contractAddress: string | null    
+  }
+
+export interface DebuggerAPI {
+    offsetToLineColumnConverter: { offsetToLineColumn: (sourceLocation: RawLocation, file: number, contents: Sources, asts: Asts) => LineColumnLocation }
+    debugHash: string
+    debugHashRequest: string
+    removeHighlights: boolean
+    editor: EditorEvent
+    discardHighlight: () => void
+    highlight: (lineColumnPos: LineColumnLocation, path: string) => void
+    fetchContractAndCompile: (address: string, currentReceipt: TransactionReceipt) => CompilationOutput
+    getFile: (path: string) => string
+    setFile: (path: string, content: string) => void
+    getDebugWeb3: () => any // returns an instance of web3.js
+} 

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

@@ -3,11 +3,13 @@ import TxBrowser from './tx-browser/tx-browser'
 import StepManager from './step-manager/step-manager'
 import VmDebugger from './vm-debugger/vm-debugger'
 import VmDebuggerHead from './vm-debugger/vm-debugger-head'
-import remixDebug, { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
+import { TransactionDebugger as Debugger } from '@remix-project/remix-debug'
+import { DebuggerAPI, DebuggerUIProps } from './DebuggerAPI'
 /* eslint-disable-next-line */
 import './debugger-ui.css'
 
-export const DebuggerUI = ({ debuggerModule }) => {
+export const DebuggerUI = (props: DebuggerUIProps) => {
+  const debuggerModule = props.debuggerAPI
   const [state, setState] = useState({
     isActive: false,
     statusMessage: '',
@@ -64,7 +66,7 @@ export const DebuggerUI = ({ debuggerModule }) => {
     if (!debuggerInstance) return
 
     debuggerInstance.event.register('debuggerStatus', async (isActive) => {
-      await debuggerModule.call('editor', 'discardHighlight')
+      await debuggerModule.discardHighlight()
       setState( prevState => {
         return { ...prevState, isActive }
       })
@@ -85,20 +87,20 @@ export const DebuggerUI = ({ debuggerModule }) => {
               path = `browser/.debugger/generated-sources/${source.name}`
               let content
               try {
-                content = await debuggerModule.call('fileManager', 'getFile', path, source.contents)
+                content = await debuggerModule.getFile(path)
               } catch (e) {
                 console.log('unable to fetch generated sources, the file probably doesn\'t exist yet', e)
               }
               if (content !== source.contents) {
-                await debuggerModule.call('fileManager', 'setFile', path, source.contents)
+                await debuggerModule.setFile(path, source.contents)
               }
               break
             }
           }
         }
         if (path) {
-          await debuggerModule.call('editor', 'discardHighlight')
-          await debuggerModule.call('editor', 'highlight', lineColumnPos, path)
+          await debuggerModule.discardHighlight()
+          await debuggerModule.highlight(lineColumnPos, path)
         }
       }
     })
@@ -183,7 +185,7 @@ const debug = (txHash) => {
 
 
 const deleteHighlights = async () => {
-  await debuggerModule.call('editor', 'discardHighlight')
+  await debuggerModule.discardHighlight()
 }
 
 const stepManager = {

tsconfig.json

@@ -28,7 +28,8 @@
       "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
       "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
       "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
-      "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"]
+      "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"],
+      "@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"],
     }
   },
   "exclude": ["node_modules", "tmp"]