Merge pull request #1211 from ethereum/refactorApp.js

Refactor app.js

src/app.js

@@ -44,6 +44,7 @@ var BasicReadOnlyExplorer = require('./app/files/basicReadOnlyExplorer')
 var NotPersistedExplorer = require('./app/files/NotPersistedExplorer')
 var toolTip = require('./app/ui/tooltip')
 var CommandInterpreter = require('./lib/cmdInterpreter')
+var PluginAPI = require('./app/plugin/pluginAPI')
 
 var styleGuide = require('./app/ui/styles-guide/theme-chooser')
 var styles = styleGuide.chooser()
@@ -712,21 +713,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     currentFile: () => {
       return config.get('currentFile')
     },
-    getContracts: () => {
-      return compiler.getContracts()
-    },
-    getContract: (name) => {
-      return compiler.getContract(name)
-    },
     visitContracts: (cb) => {
       compiler.visitContracts(cb)
     },
-    udapp: () => {
-      return udapp
-    },
-    udappUI: () => {
-      return udappUI
-    },
     switchFile: function (path) {
       fileManager.switchFile(path)
     },
@@ -749,9 +738,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
         }
       })
     },
-    compilationMessage: (message, container, options) => {
-      renderer.error(message, container, options)
-    },
     currentCompiledSourceCode: () => {
       if (compiler.lastCompilationResult.source) {
         return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
@@ -766,31 +752,11 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
       compiler.setOptimize(optimize)
       if (runCompilation) runCompiler()
     },
-    loadCompiler: (usingWorker, url) => {
-      compiler.loadVersion(usingWorker, url)
-    },
     runCompiler: () => {
       runCompiler()
     },
     logMessage: (msg) => {
       self._components.editorpanel.log({type: 'log', value: msg})
-    },
-    getCompilationResult: () => {
-      return compiler.lastCompilationResult
-    },
-    newAccount: (pass, cb) => {
-      udapp.newAccount(pass, cb)
-    },
-    setConfig: (mod, path, content, cb) => {
-      self._api.filesProviders['config'].set(mod + '/' + path, content)
-      cb()
-    },
-    getConfig: (mod, path, cb) => {
-      cb(null, self._api.filesProviders['config'].get(mod + '/' + path))
-    },
-    removeConfig: (mod, path, cb) => {
-      cb(null, self._api.filesProviders['config'].remove(mod + '/' + path))
-      if (cb) cb()
     }
   }
   var rhpEvents = {
@@ -800,7 +766,15 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     editor: editor.event,
     staticAnalysis: staticanalysis.event
   }
-  self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents)
+  var rhpOpts = {
+    pluginAPI: new PluginAPI(self, compiler),
+    udapp: udapp,
+    udappUI: udappUI,
+    compiler: compiler,
+    renderer: renderer
+  }
+
+  self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, rhpOpts)
   self._view.rightpanel.appendChild(self._components.righthandpanel.render())
   self._components.righthandpanel.init()
   self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))

src/app/panels/righthand-panel.js

@@ -9,7 +9,7 @@ var AnalysisTab = require('../tabs/analysis-tab')
 var DebuggerTab = require('../tabs/debugger-tab')
 var SupportTab = require('../tabs/support-tab')
 var PluginTab = require('../tabs/plugin-tab')
-var PluginManager = require('../../pluginManager')
+var PluginManager = require('../plugin/pluginManager')
 
 var css = require('./styles/righthand-panel-styles')
 
@@ -23,7 +23,7 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
   // load tabbed menu component
   var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
-  self._view.tabbedMenu = new TabbedMenu(self._api, tabEvents)
+  self._view.tabbedMenu = new TabbedMenu(appAPI, tabEvents)
   var options = self._view.tabbedMenu.render()
   options.classList.add(css.opts)
   self._view.element = yo`
@@ -43,17 +43,17 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
 
   events.rhp = self.event
 
-  var compileTab = new CompileTab(appAPI, events)
+  var compileTab = new CompileTab(appAPI, events, opts)
   optionViews.appendChild(compileTab.render())
-  var runTab = new RunTab(appAPI, events)
+  var runTab = new RunTab(appAPI, events, opts)
   optionViews.appendChild(runTab.render())
-  var settingsTab = new SettingsTab(appAPI, events)
+  var settingsTab = new SettingsTab(appAPI, events, opts)
   optionViews.appendChild(settingsTab.render())
-  var analysisTab = new AnalysisTab(appAPI, events)
+  var analysisTab = new AnalysisTab(appAPI, events, opts)
   optionViews.appendChild(analysisTab.render())
-  var debuggerTab = new DebuggerTab(appAPI, events)
+  var debuggerTab = new DebuggerTab(appAPI, events, opts)
   optionViews.appendChild(debuggerTab.render())
-  var supportTab = new SupportTab(appAPI, events)
+  var supportTab = new SupportTab(appAPI, events, opts)
   optionViews.appendChild(supportTab.render())
   this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
   this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
@@ -63,9 +63,9 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
   this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
   this._view.tabbedMenu.selectTabByTitle('Compile')
 
-  self.pluginManager = new PluginManager(appAPI, events)
+  self.pluginManager = new PluginManager(opts.pluginAPI, events)
   events.rhp.register('plugin-loadRequest', (json) => {
-    var tab = new PluginTab(appAPI, events, json)
+    var tab = new PluginTab({}, events, json)
     var content = tab.render()
     optionViews.appendChild(content)
     this._view.tabbedMenu.addTab(json.title, 'plugin', content)

src/app/plugin/pluginAPI.js

@@ -0,0 +1,26 @@
+'use strict'
+/*
+  Defines available API. `key` / `type`
+*/
+module.exports = (app, compiler) => {
+  return {
+    config: {
+      setConfig: (mod, path, content, cb) => {
+        app._api.filesProviders['config'].set(mod + '/' + path, content)
+        cb()
+      },
+      getConfig: (mod, path, cb) => {
+        cb(null, app._api.filesProviders['config'].get(mod + '/' + path))
+      },
+      removeConfig: (mod, path, cb) => {
+        cb(null, app._api.filesProviders['config'].remove(mod + '/' + path))
+        if (cb) cb()
+      }
+    },
+    compiler: {
+      getCompilationResult: () => {
+        return compiler.lastCompilationResult
+      }
+    }
+  }
+}

src/app/plugin/pluginManager.js

@@ -72,7 +72,7 @@ class PluginManager {
         this.inFocus = tabName
         this.post(tabName, JSON.stringify({
           type: 'compilationData',
-          value: api.getCompilationResult()
+          value: api.compiler.getCompilationResult()
         }))
       }
     })
@@ -93,7 +93,7 @@ class PluginManager {
           data.arguments.push((error, result) => {
             response(data.type, data.id, error, result)
           })
-          api[data.type].apply({}, data.arguments)
+          api[data.key][data.type].apply({}, data.arguments)
         }
       }
     }, false)

src/app/tabs/compile-tab.js

@@ -115,7 +115,7 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
   var el = yo`
     <div class="${css.compileTabView}" id="compileTabView">
       ${compileContainer}
-      ${contractNames(appAPI, appEvents)}
+      ${contractNames(appAPI, appEvents, opts)}
       ${errorContainer}
     </div>
   `
@@ -124,7 +124,7 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
     section CONTRACT DROPDOWN, DETAILS AND PUBLISH
   ------------------------------------------------ */
 
-  function contractNames (appAPI, appEvents) {
+  function contractNames (appAPI, appEvents, opts) {
     var contractsDetails = {}
 
     appEvents.compiler.register('compilationStarted', () => {
@@ -146,18 +146,18 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
       var error = false
       if (data['error']) {
         error = true
-        appAPI.compilationMessage(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity})
+        opts.renderer.error(data['error'].formattedMessage, $(errorContainer), {type: data['error'].severity})
       }
       if (data['errors']) {
         if (data['errors'].length) error = true
         data['errors'].forEach(function (err) {
-          appAPI.compilationMessage(err.formattedMessage, $(errorContainer), {type: err.severity})
+          opts.renderer.error(err.formattedMessage, $(errorContainer), {type: err.severity})
         })
       }
       if (!error) {
         if (data.contracts) {
           appAPI.visitContracts((contract) => {
-            appAPI.compilationMessage(contract.name, $(errorContainer), {type: 'success'})
+            opts.renderer.error(contract.name, $(errorContainer), {type: 'success'})
           })
         }
       }
@@ -165,7 +165,7 @@ function compileTab (appAPI = {}, appEvents = {}, opts = {}) {
 
     appEvents.staticAnalysis.register('staticAnaysisWarning', (count) => {
       if (count) {
-        appAPI.compilationMessage(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
+        opts.renderer.error(`Static Analysis raised ${count} warning(s) that requires your attention.`, $(errorContainer), {
           type: 'warning',
           click: () => appAPI.switchTab('staticanalysisView')
         })

src/app/tabs/run-tab.js

@@ -30,7 +30,7 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
   clearInstanceElement.addEventListener('click', () => {
     event.trigger('clearInstance', [])
   })
-  var recorderInterface = makeRecorder(event, appAPI, appEvents)
+  var recorderInterface = makeRecorder(event, appAPI, appEvents, opts)
   var pendingTxsContainer = yo`
   <div class="${css.pendingTxsContainer}">
     <div class="${css.pendingTxsText}">
@@ -45,8 +45,8 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
 
   var el = yo`
   <div>
-    ${settings(container, appAPI, appEvents)}
+    ${settings(container, appAPI, appEvents, opts)}
-    ${contractDropdown(event, appAPI, appEvents, instanceContainer)}
+    ${contractDropdown(event, appAPI, appEvents, opts, instanceContainer)}
     ${pendingTxsContainer}
     ${instanceContainer}
   </div>
@@ -55,7 +55,7 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
 
   // PENDING transactions
   function updatePendingTxs (container, appAPI) {
-    var pendingCount = Object.keys(appAPI.udapp().pendingTransactions()).length
+    var pendingCount = Object.keys(opts.udapp.pendingTransactions()).length
     pendingTxsText.innerText = pendingCount + ' pending transactions'
   }
 
@@ -90,7 +90,7 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
   executionContext.event.register('contextChanged', (context, silent) => {
     setFinalContext()
   })
-  fillAccountsList(appAPI, el)
+  fillAccountsList(appAPI, opts, el)
   setInterval(() => {
     updateAccountBalances(container, appAPI)
     updatePendingTxs(container, appAPI)
@@ -104,10 +104,10 @@ function runTab (appAPI = {}, appEvents = {}, opts = {}) {
   return { render () { return container } }
 }
 
-function fillAccountsList (appAPI, container) {
+function fillAccountsList (appAPI, opts, container) {
   var $txOrigin = $(container.querySelector('#txorigin'))
   $txOrigin.empty()
-  appAPI.udapp().getAccounts((err, accounts) => {
+  opts.udapp.getAccounts((err, accounts) => {
     if (err) { addTooltip(`Cannot get account list: ${err}`) }
     if (accounts && accounts[0]) {
       for (var a in accounts) { $txOrigin.append($('<option />').val(accounts[a]).text(accounts[a])) }
@@ -134,8 +134,8 @@ function updateAccountBalances (container, appAPI) {
 /* ------------------------------------------------
     RECORDER
 ------------------------------------------------ */
-function makeRecorder (events, appAPI, appEvents) {
+function makeRecorder (events, appAPI, appEvents, opts) {
-  var recorder = new Recorder({
+  var recorder = new Recorder(opts.compiler, {
     events: {
       udapp: appEvents.udapp,
       executioncontext: executionContext.event,
@@ -190,8 +190,8 @@ function makeRecorder (events, appAPI, appEvents) {
           }
           if (txArray.length) {
             noInstancesText.style.display = 'none'
-            recorder.run(txArray, accounts, options, abis, linkReferences, (abi, address, contractName) => {
+            recorder.run(txArray, accounts, options, abis, linkReferences, opts.udapp, (abi, address, contractName) => {
-              instanceContainer.appendChild(appAPI.udappUI().renderInstanceFromABI(abi, address, contractName))
+              instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, contractName))
             })
           }
         } else {
@@ -206,7 +206,7 @@ function makeRecorder (events, appAPI, appEvents) {
     section CONTRACT DROPDOWN and BUTTONS
 ------------------------------------------------ */
 
-function contractDropdown (events, appAPI, appEvents, instanceContainer) {
+function contractDropdown (events, appAPI, appEvents, opts, instanceContainer) {
   instanceContainer.appendChild(noInstancesText)
   var compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
   appEvents.compiler.register('compilationFinished', function (success, data, source) {
@@ -229,7 +229,7 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
     if (contractName) {
       return {
         name: contractName,
-        contract: appAPI.getContract(contractName)
+        contract: opts.compiler.getContract(contractName)
       }
     }
     return null
@@ -256,7 +256,7 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
 
   function setInputParamsPlaceHolder () {
     createButtonInput.value = ''
-    if (appAPI.getContract && selectContractNames.selectedIndex >= 0 && selectContractNames.children.length > 0) {
+    if (opts.compiler.getContract && selectContractNames.selectedIndex >= 0 && selectContractNames.children.length > 0) {
       var ctrabi = txHelper.getConstructorInterface(getSelectedContract().contract.object.abi)
       if (ctrabi.inputs.length) {
         createButtonInput.setAttribute('placeholder', txHelper.inputParametersDeclarationToString(ctrabi.inputs))
@@ -281,10 +281,10 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
 
     var constructor = txHelper.getConstructorInterface(selectedContract.contract.object.abi)
     var args = createButtonInput.value
-    txFormat.buildData(selectedContract.name, selectedContract.contract.object, appAPI.getContracts(), true, constructor, args, (error, data) => {
+    txFormat.buildData(selectedContract.name, selectedContract.contract.object, opts.compiler.getContracts(), true, constructor, args, (error, data) => {
       if (!error) {
         appAPI.logMessage(`creation of ${selectedContract.name} pending...`)
-        appAPI.udapp().createContract(data, (error, txResult) => {
+        opts.udapp.createContract(data, (error, txResult) => {
           if (!error) {
             var isVM = executionContext.isVM()
             if (isVM) {
@@ -296,7 +296,7 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
             }
             noInstancesText.style.display = 'none'
             var address = isVM ? txResult.result.createdAddress : txResult.result.contractAddress
-            instanceContainer.appendChild(appAPI.udappUI().renderInstance(selectedContract.contract.object, address, selectContractNames.value))
+            instanceContainer.appendChild(opts.udappUI.renderInstance(selectedContract.contract.object, address, selectContractNames.value))
           } else {
             appAPI.logMessage(`creation of ${selectedContract.name} errored: ` + error)
           }
@@ -308,7 +308,7 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
       appAPI.logMessage(msg)
     }, (data, runTxCallback) => {
       // called for libraries deployment
-      appAPI.udapp().runTx(data, runTxCallback)
+      opts.udapp.runTx(data, runTxCallback)
     })
   }
 
@@ -330,11 +330,11 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
         } catch (e) {
           return modalDialogCustom.alert('Failed to parse the current file as JSON ABI.')
         }
-        instanceContainer.appendChild(appAPI.udappUI().renderInstanceFromABI(abi, address, address))
+        instanceContainer.appendChild(opts.udappUI.renderInstanceFromABI(abi, address, address))
       })
     } else {
-      var contract = appAPI.getContract(contractNames.children[contractNames.selectedIndex].innerHTML)
+      var contract = opts.compiler.getContract(contractNames.children[contractNames.selectedIndex].innerHTML)
-      instanceContainer.appendChild(appAPI.udappUI().renderInstance(contract.object, address, selectContractNames.value))
+      instanceContainer.appendChild(opts.udappUI.renderInstance(contract.object, address, selectContractNames.value))
     }
   }
 
@@ -359,7 +359,7 @@ function contractDropdown (events, appAPI, appEvents, instanceContainer) {
 /* ------------------------------------------------
     section SETTINGS: Environment, Account, Gas, Value
 ------------------------------------------------ */
-function settings (container, appAPI, appEvents) {
+function settings (container, appAPI, appEvents, opts) {
   // SETTINGS HTML
   var net = yo`<span class=${css.network}></span>`
   const updateNetwork = () => {
@@ -374,7 +374,7 @@ function settings (container, appAPI, appEvents) {
   }
   setInterval(updateNetwork, 5000)
   function newAccount () {
-    appAPI.newAccount('', (error, address) => {
+    opts.udapp.newAccount('', (error, address) => {
       if (!error) {
         container.querySelector('#txorigin').appendChild(yo`<option value=${address}>${address}</option>`)
         addTooltip(`account ${address} created`)

src/app/tabs/settings-tab.js

@@ -178,7 +178,7 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
 
   // load the new version upon change
   versionSelector.addEventListener('change', function () {
-    loadVersion(versionSelector.value, queryParams, appAPI, el)
+    loadVersion(versionSelector.value, queryParams, opts.compiler, el)
   })
 
   var header = new Option('Select new compiler version')
@@ -195,7 +195,7 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
 
       // loading failed for some reason, fall back to local compiler
       versionSelector.append(new Option('latest local version', 'builtin'))
-      loadVersion('builtin', queryParams, appAPI, el)
+      loadVersion('builtin', queryParams, opts.compiler, el)
       return
     }
 
@@ -217,7 +217,7 @@ function SettingsTab (appAPI = {}, appEvents = {}, opts = {}) {
       selectedVersion = queryParams.get().version
     }
 
-    loadVersion(selectedVersion, queryParams, appAPI, el)
+    loadVersion(selectedVersion, queryParams, opts.compiler, el)
   })
 
   return { render () { return el } }
@@ -227,7 +227,7 @@ function setVersionText (text, el) {
   el.querySelector('#version').innerText = text
 }
 
-function loadVersion (version, queryParams, appAPI, el) {
+function loadVersion (version, queryParams, compiler, el) {
   queryParams.update({ version: version })
   var url
   if (version === 'builtin') {
@@ -253,10 +253,10 @@ function loadVersion (version, queryParams, appAPI, el) {
     // Workers cannot load js on "file:"-URLs and we get a
     // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium,
     // resort to non-worker version in that case.
-    appAPI.loadCompiler(true, url)
+    compiler.loadVersion(true, url)
     setVersionText('(loading using worker)', el)
   } else {
-    appAPI.loadCompiler(false, url)
+    compiler.loadVersion(false, url)
     setVersionText('(loading)', el)
   }
 }

src/recorder.js

@@ -13,7 +13,7 @@ var modal = require('./app/ui/modal-dialog-custom')
   *
   */
 class Recorder {
-  constructor (opts = {}) {
+  constructor (compiler, opts = {}) {
     var self = this
     self._api = opts.api
     self.event = new EventManager()
@@ -33,7 +33,7 @@ class Recorder {
       if (this.data._listen) {
         var record = { value, parameters: payLoad.funArgs }
         if (!to) {
-          var selectedContract = self._api.getContract(payLoad.contractName)
+          var selectedContract = compiler.getContract(payLoad.contractName)
           if (selectedContract) {
             var abi = selectedContract.object.abi
             var sha3 = ethutil.bufferToHex(ethutil.sha3(abi))
@@ -175,10 +175,11 @@ class Recorder {
     * @param {Object} accounts
     * @param {Object} options
     * @param {Object} abis
+    * @param {Object} udapp
     * @param {Function} newContractFn
     *
     */
-  run (records, accounts, options, abis, linkReferences, newContractFn) {
+  run (records, accounts, options, abis, linkReferences, udapp, newContractFn) {
     var self = this
     self.setListen(false)
     self._api.logMessage(`Running ${records.length} transaction(s) ...`)
@@ -242,7 +243,7 @@ class Recorder {
         self._api.logMessage(`(${index}) data: ${data.data}`)
         record.data = { dataHex: data.data, funArgs: tx.record.parameters, funAbi: fnABI, contractBytecode: tx.record.bytecode, contractName: tx.record.contractName }
       }
-      self._api.udapp().runTx(record, function (err, txResult) {
+      udapp.runTx(record, function (err, txResult) {
         if (err) {
           console.error(err)
           self._api.logMessage(err + '. Execution failed at ' + index)