Merge pull request #1211 from ethereum/refactorApp.js

Refactor app.js
7 years ago · 24621265a6
parent e6225164e0 8bb2a55ddb
commit 24621265a6
8 changed files with 88 additions and 87 deletions
--- a/src/app.js
+++ b/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))
--- a/src/app/panels/righthand-panel.js
+++ b/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)
--- a/src/app/plugin/pluginAPI.js
+++ b/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
+      }
+    }
+  }
+}
--- a/src/app/plugin/pluginManager.js
+++ b/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)
--- a/src/app/tabs/compile-tab.js
+++ b/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')
        })
--- a/src/app/tabs/run-tab.js
+++ b/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)}
-    ${contractDropdown(event, appAPI, appEvents, instanceContainer)}
+    ${settings(container, appAPI, appEvents, opts)}
+    ${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) {
-  var recorder = new Recorder({
+function makeRecorder (events, appAPI, appEvents, opts) {
+  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) => {
-              instanceContainer.appendChild(appAPI.udappUI().renderInstanceFromABI(abi, address, contractName))
+            recorder.run(txArray, accounts, options, abis, linkReferences, opts.udapp, (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)
-      instanceContainer.appendChild(appAPI.udappUI().renderInstance(contract.object, address, selectContractNames.value))
+      var contract = opts.compiler.getContract(contractNames.children[contractNames.selectedIndex].innerHTML)
+      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`)
--- a/src/app/tabs/settings-tab.js
+++ b/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)
  }
 }
--- a/src/recorder.js
+++ b/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)