using new engine

package.json

@@ -78,7 +78,7 @@
     "yo-yoify": "^3.7.3"
   },
   "dependencies": {
-    "@remixproject/engine": "^0.2.0",
+    "@remixproject/engine": "^0.2.0-alpha.1",
     "http-server": "^0.11.1",
     "remixd": "0.1.8-alpha.10",
     "standard": "^8.5.0"

src/app.js

@@ -35,12 +35,14 @@ const DebuggerTab = require('./app/tabs/debugger-tab')
 const TestTab = require('./app/tabs/test-tab')
 const FilePanel = require('./app/panels/file-panel')
 const Editor = require('./app/editor/editor')
-
+const Terminal = require('./app/panels/terminal')
+const ContextualListener = require('./app/editor/contextualListener')
 import { basicLogo } from './app/ui/svgLogo'
 
 import { RunTab, makeUdapp } from './app/udapp'
 
 import PanelsResize from './lib/panels-resize'
+import { Engine } from '@remixproject/engine'
 import { RemixAppManager } from './remixAppManager'
 import { FramingService } from './framingService'
 import { MainView } from './app/panels/main-view'
@@ -229,12 +231,14 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
 
   // APP_MANAGER
   const appManager = new RemixAppManager({})
+  const engine = new Engine(appManager)
+  await engine.onload()
   const workspace = appManager.pluginLoader.get()
 
   // SERVICES
-  // ----------------- import content servive ----------------------------
+  // ----------------- import content servive ------------------------
   const contentImport = new CompilerImport()
-  // ----------------- theme servive ----------------------------
+  // ----------------- theme servive ---------------------------------
   const themeModule = new ThemeModule(registry)
   registry.put({api: themeModule, name: 'themeModule'})
   themeModule.initTheme(() => {
@@ -247,6 +251,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const editor = new Editor({}, themeModule) // wrapper around ace editor
   registry.put({api: editor, name: 'editor'})
   editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile())
+
   // ----------------- fileManager servive ----------------------------
   const fileManager = new FileManager(editor)
   registry.put({api: fileManager, name: 'filemanager'})
@@ -254,20 +259,38 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const blockchain = new Blockchain(registry.get('config').api)
   const pluginUdapp = new PluginUDapp(blockchain)
 
-  // ----------------- compilation metadata generation servive ----------------------------
+  // ----------------- compilation metadata generation servive ---------
   const compilerMetadataGenerator = new CompilerMetadata(blockchain, fileManager, registry.get('config').api)
   // ----------------- compilation result service (can keep track of compilation results) ----------------------------
   const compilersArtefacts = new CompilersArtefacts() // store all the compilation results (key represent a compiler name)
   registry.put({api: compilersArtefacts, name: 'compilersartefacts'})
 
-  const {eventsDecoder, txlistener} = makeUdapp(blockchain, compilersArtefacts, (domEl) => mainview.getTerminal().logHtml(domEl))
-  // ----------------- network service (resolve network id / name) ----------------------------
+  // ----------------- network service (resolve network id / name) -----
   const networkModule = new NetworkModule(blockchain)
-  // ----------------- convert offset to line/column service ----------------------------
-  var offsetToLineColumnConverter = new OffsetToLineColumnConverter()
+  // ----------------- convert offset to line/column service -----------
+  const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
   registry.put({api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter'})
 
-  appManager.register([
+  // -------------------Terminal----------------------------------------
+
+  const terminal = new Terminal(
+    { appManager, blockchain },
+    {
+      getPosition: (event) => {
+        var limitUp = 36
+        var limitDown = 20
+        var height = window.innerHeight
+        var newpos = (event.pageY < limitUp) ? limitUp : event.pageY
+        newpos = (newpos < height - limitDown) ? newpos : height - limitDown
+        return height - newpos
+      }
+    }
+  )
+  makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl))
+
+  const contextualListener = new ContextualListener({editor})
+
+  engine.register([
     contentImport,
     themeModule,
     editor,
@@ -275,15 +298,17 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     compilerMetadataGenerator,
     compilersArtefacts,
     networkModule,
-    offsetToLineColumnConverter
+    offsetToLineColumnConverter,
+    contextualListener,
+    terminal
   ])
 
   // LAYOUT & SYSTEM VIEWS
   const appPanel = new MainPanel()
-  const mainview = new MainView(editor, appPanel, fileManager, appManager, txlistener, eventsDecoder, blockchain)
+  const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
   registry.put({ api: mainview, name: 'mainview' })
 
-  appManager.register([
+  engine.register([
     appPanel
   ])
 
@@ -306,7 +331,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   self._view.sidepanel.appendChild(sidePanel.render())
   document.body.appendChild(hiddenPanel.render()) // Hidden Panel is display none, it can be directly on body
 
-  appManager.register([
+  engine.register([
     menuicons,
     landingPage,
     sidePanel,
@@ -344,7 +369,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     new Renderer()
   )
 
-  appManager.register([
+  engine.register([
     compileTab,
     run,
     debug,
@@ -354,14 +379,14 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   ])
 
   try {
-    appManager.register(await appManager.registeredPlugins())
+    engine.register(await appManager.registeredPlugins())
   } catch (e) {
     console.log('couldn\'t register iframe plugins', e.message)
   }
 
   await appManager.activate(['contentImport', 'theme', 'editor', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'offsetToLineColumnConverter'])
   await appManager.activate(['mainPanel'])
-  await appManager.activate(['menuicons', 'home', 'sidePanel', 'pluginManager', 'fileExplorers', 'settings'])
+  await appManager.activate(['menuicons', 'home', 'sidePanel', 'pluginManager', 'fileExplorers', 'settings', 'contextualListener', 'terminal'])
 
   // Set workspace after initial activation
   if (Array.isArray(workspace)) await appManager.activate(workspace)

src/app/components/plugin-manager-component.js

@@ -88,7 +88,7 @@ class PluginManagerComponent extends ViewPlugin {
   }
 
   renderItem (name) {
-    const api = this.appManager.getOne(name)
+    const api = this.appManager.getPlugin(name)
     if (!api) return
     const isActive = this.appManager.isActive(name)
     const displayName = (api.profile.displayName) ? api.profile.displayName : name
@@ -106,11 +106,11 @@ class PluginManagerComponent extends ViewPlugin {
 
     const activationButton = isActive
       ? yo`
-      <button onclick="${_ => this.appManager.deactivateOne(name)}" class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${name}">
+      <button onclick="${_ => this.appManager.deactivatePlugin(name)}" class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${name}">
         Deactivate
       </button>`
       : yo`
-      <button onclick="${_ => this.appManager.activateOne(name)}" class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${name}">
+      <button onclick="${_ => this.appManager.activatePlugin(name)}" class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${name}">
         Activate
       </button>`
 
@@ -144,7 +144,7 @@ class PluginManagerComponent extends ViewPlugin {
 
       const plugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
       this.appManager.registerOne(plugin)
-      this.appManager.activateOne(profile.name)
+      this.appManager.activatePlugin(profile.name)
     } catch (err) {
       // TODO : Use an alert to handle this error instead of a console.log
       console.log(`Cannot create Plugin : ${err.message}`)

src/app/components/side-panel.js

@@ -118,7 +118,7 @@ export class SidePanel extends AbstractPanel {
     let docLink = ''
     let versionWarning
     if (this.active) {
-      const { profile } = this.appManager.getOne(this.active)
+      const { profile } = this.appManager.getPlugin(this.active)
       name = profile.displayName ? profile.displayName : profile.name
       docLink = profile.documentation ? yo`<a href="${profile.documentation}" class="${css.titleInfo}" title="link to documentation" target="_blank"><i aria-hidden="true" class="fas fa-book"></i></a>` : ''
       if (profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) {

src/app/files/fileManager.js

@@ -9,6 +9,7 @@ const toaster = require('../ui/tooltip')
 const modalDialogCustom = require('../ui/modal-dialog-custom')
 const helper = require('../../lib/helper.js')
 import { Plugin } from '@remixproject/engine'
+import { isNative } from '../../remixAppManager.js'
 import * as packageJson from '../../../package.json'
 
 /*
@@ -172,7 +173,7 @@ class FileManager extends Plugin {
       toaster.hide()
     }
     if (this.currentRequest) {
-      if (this.currentRequest.isFromNative) {
+      if (isNative(this.currentRequest.from)) {
         this._setFileInternal(path, content)
         return
       }

src/app/panels/main-view.js

 var yo = require('yo-yo')
 var EventManager = require('../../lib/events')
 
-var Terminal = require('./terminal')
 var globalRegistry = require('../../global/registry')
 var { TabProxy } = require('./tab-proxy.js')
 
-var ContextualListener = require('../editor/contextualListener')
 var ContextView = require('../editor/contextView')
 
 var csjs = require('csjs-inject')
@@ -20,7 +18,7 @@ var css = csjs`
 `
 
 export class MainView {
-  constructor (editor, mainPanel, fileManager, appManager, txListener, eventsDecoder, blockchain) {
+  constructor (contextualListener, editor, mainPanel, fileManager, appManager, terminal) {
     var self = this
     self.event = new EventManager()
     self._view = {}
@@ -29,9 +27,9 @@ export class MainView {
     self.editor = editor
     self.fileManager = fileManager
     self.mainPanel = mainPanel
-    self.txListener = txListener
-    self.eventsDecoder = eventsDecoder
-    self.blockchain = blockchain
+    self.txListener = globalRegistry.get('txlistener').api
+    self._components.terminal = terminal
+    self._components.contextualListener = contextualListener
     this.appManager = appManager
     this.init()
   }
@@ -88,32 +86,10 @@ export class MainView {
       }
     }
 
-    var contextualListener = new ContextualListener({editor: self.editor})
-    this.appManager.registerOne(contextualListener)
-    this.appManager.activate('contextualListener')
-
-    var contextView = new ContextView({contextualListener, editor: self.editor})
+    const contextView = new ContextView({contextualListener: self._components.contextualListener, editor: self.editor})
 
-    self._components.contextualListener = contextualListener
     self._components.contextView = contextView
 
-    self._components.terminal = new Terminal({
-      appManager: this.appManager,
-      eventsDecoder: this.eventsDecoder,
-      txListener: this.txListener,
-      blockchain: this.blockchain
-    },
-      {
-        getPosition: (event) => {
-          var limitUp = 36
-          var limitDown = 20
-          var height = window.innerHeight
-          var newpos = (event.pageY < limitUp) ? limitUp : event.pageY
-          newpos = (newpos < height - limitDown) ? newpos : height - limitDown
-          return height - newpos
-        }
-      })
-
     self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
     if (self.txListener) {
       self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {

src/app/panels/tab-proxy.js

@@ -50,7 +50,7 @@ export class TabProxy {
     })
 
     appManager.event.on('activate', (name) => {
-      const { profile } = appManager.getOne(name)
+      const { profile } = appManager.getPlugin(name)
       if (profile.location === 'mainPanel') {
         this.addTab(
           name,
@@ -58,7 +58,7 @@ export class TabProxy {
           () => this.event.emit('switchApp', name),
           () => {
             this.event.emit('closeApp', name)
-            this.appManager.deactivateOne(name)
+            this.appManager.deactivatePlugin(name)
           },
           profile.icon
         )

src/app/panels/terminal.js

@@ -45,7 +45,7 @@ class Terminal extends Plugin {
     self._api = api
     self._opts = opts
     self.data = {
-      lineLength: opts.lineLength || 80,
+      lineLength: opts.lineLength || 80, // ???
       session: [],
       activeFilters: { commands: {}, input: '' },
       filterFns: {}
@@ -95,14 +95,12 @@ class Terminal extends Plugin {
     self._jsSandboxContext = {}
     self._jsSandboxRegistered = {}
 
-    // TODO move this to the application start. Put it in mainView.
-    // We should have a HostPlugin which add the terminal.
-    opts.appManager.register(this)
-    opts.appManager.activate('terminal')
-
-    if (opts.shell) self._shell = opts.shell
+    if (opts.shell) self._shell = opts.shell // ???
     register(self)
   }
+  setTxListener(txListener) {
+    this._opts.txListener = txListener
+  }
   logHtml (html) {
     var command = this.commands['html']
     if (typeof command === 'function') command(html)
@@ -441,7 +439,7 @@ class Terminal extends Plugin {
     self._components.txLogger = new TxLogger(self._opts.eventsDecoder, self._opts.txListener, this, self.blockchain)
     self._components.txLogger.event.register('debuggingRequested', (hash) => {
       // TODO should probably be in the run module
-      if (!self._opts.appManager.isActive('debugger')) self._opts.appManager.activateOne('debugger')
+      if (!self._opts.appManager.isActive('debugger')) self._opts.appManager.activatePlugin('debugger')
       this.call('debugger', 'debug', hash)
       this.call('menuicons', 'select', 'debugger')
     })

src/app/udapp/make-udapp.js

@@ -52,6 +52,5 @@ export function makeUdapp (blockchain, compilersArtefacts, logHtmlCallback) {
     }
   })
   txlistener.startListening()
-
-  return {txlistener, eventsDecoder}
+  registry.put({api: eventsDecoder, name: 'eventsDecoder'})
 }

src/app/ui/auto-complete-popup.js

@@ -190,7 +190,7 @@ class AutoCompletePopup {
   extendAutocompletion () {
     // TODO: this is not using the appManager interface. Terminal should be put as module
     this.opts.appManager.event.on('activate', (id) => {
-      const profile = this.opts.appManager.getOne(id).profile
+      const profile = this.opts.appManager.getPlugin(id).profile
       if (!profile.methods) return
       profile.methods.forEach((method) => {
         const key = `remix.call({name: '${id}', key:'${method}', payload: []}).then((result) => { console.log(result) }).catch((error) => { console.log(error) })`

src/app/ui/txLogger.js

@@ -116,7 +116,7 @@ var css = csjs`
   *
   */
 class TxLogger {
-  constructor (eventsDecoder, txListener, terminal, blockchain) {
+  constructor (terminal, blockchain) {
     this.event = new EventManager()
     this.seen = {}
     function filterTx (value, query) {
@@ -125,8 +125,8 @@ class TxLogger {
       }
       return false
     }
-    this.eventsDecoder = eventsDecoder
-    this.txListener = txListener
+    this.eventsDecoder = globalRegistry.get('teventsDecoder').api
+    this.txListener = globalRegistry.get('txListener').api
     this.terminal = terminal
     // dependencies
     this._deps = {

src/remixAppManager.js

 /* global localStorage, fetch */
-import { PluginEngine, IframePlugin } from '@remixproject/engine'
+import { PluginManager, IframePlugin } from '@remixproject/engine'
 import { EventEmitter } from 'events'
-import { PermissionHandler } from './app/ui/persmission-handler'
 import QueryParams from './lib/query-params'
 
 const requiredModules = [ // services + layout views + system views
@@ -9,22 +8,34 @@ const requiredModules = [ // services + layout views + system views
   'mainPanel', 'hiddenPanel', 'sidePanel', 'menuicons', 'fileExplorers',
   'terminal', 'settings', 'pluginManager']
 
-const settings = {
-  permissionHandler: new PermissionHandler(),
-  autoActivate: false,
-  natives: ['vyper', 'workshops', 'ethdoc', 'etherscan'] // Force iframe plugin to be seen as native
+export function isNative(name) {
+  const nativePlugins = ['vyper', 'workshops', 'ethdoc', 'etherscan']
+  return nativePlugins.includes(name)
 }
 
-export class RemixAppManager extends PluginEngine {
+export class RemixAppManager extends PluginManager {
 
   constructor (plugins) {
-    super(plugins, settings)
+    super()
     this.event = new EventEmitter()
     this.registered = {}
     this.pluginsDirectory = 'https://raw.githubusercontent.com/ethereum/remix-plugins-directory/master/build/metadata.json'
     this.pluginLoader = new PluginLoader()
   }
 
+  async canActivate (from, to) {
+    return true
+  }
+
+  async canDeactivate (from, to) {
+    return from.name === 'manager'
+  }
+
+  async canCall (From, to, method) {
+    // todo This is the dafault behaviour, we could save user choises in session scope
+    return true
+  }
+
   onActivated (plugin) {
     this.pluginLoader.set(plugin, this.actives)
     this.event.emit('activate', plugin.name)
@@ -36,10 +47,6 @@ export class RemixAppManager extends PluginEngine {
     })
   }
 
-  getOne (name) {
-    return this.registered[name]
-  }
-
   getIds () {
     return Object.keys(this.registered)
   }
@@ -55,21 +62,9 @@ export class RemixAppManager extends PluginEngine {
     this.event.emit('added', plugin.name)
   }
 
-  // TODO check whether this can be removed
-  ensureActivated (apiName) {
-    if (!this.isActive(apiName)) this.activateOne(apiName)
-    this.event.emit('ensureActivated', apiName)
-  }
-
-  // TODO check whether this can be removed
-  ensureDeactivated (apiName) {
-    if (this.isActive(apiName)) this.deactivateOne(apiName)
-    this.event.emit('ensureDeactivated', apiName)
-  }
-
-  deactivateOne (name) {
+  deactivatePlugin (name) {
     if (requiredModules.includes(name)) return
-    super.deactivateOne(name)
+    super.deactivatePlugin(name)
   }
 
   isRequired (name) {