Merge pull request #1119 from ethereum/eventW

refactor events part 1

apps/remix-ide/src/app/files/file-explorer.js

@@ -9,7 +9,7 @@ const helper = require('../../lib/helper')
 const yo = require('yo-yo')
 const Treeview = require('../ui/TreeView')
 const modalDialog = require('../ui/modaldialog')
-const EventManager = require('../../lib/events')
+const EventManager = require('events')
 const contextMenu = require('../ui/contextMenu')
 const css = require('./styles/file-explorer-styles')
 const globalRegistry = require('../../global/registry')
@@ -94,11 +94,11 @@ function fileExplorer (localRegistry, files, menuItems, plugin) {
   })
 
   // register to event of the file provider
-  files.event.register('fileRemoved', fileRemoved)
+  files.event.on('fileRemoved', fileRemoved)
-  files.event.register('fileRenamed', fileRenamed)
+  files.event.on('fileRenamed', fileRenamed)
-  files.event.register('fileRenamedError', fileRenamedError)
+  files.event.on('fileRenamedError', fileRenamedError)
-  files.event.register('fileAdded', fileAdded)
+  files.event.on('fileAdded', fileAdded)
-  files.event.register('folderAdded', folderAdded)
+  files.event.on('folderAdded', folderAdded)
 
   function fileRenamedError (error) {
     modalDialogCustom.alert(error)

apps/remix-ide/src/app/files/fileManager.js

@@ -329,18 +329,18 @@ class FileManager extends Plugin {
       workspaceExplorer: this._components.registry.get('fileproviders/workspace').api,
       filesProviders: this._components.registry.get('fileproviders').api
     }
-    this._deps.browserExplorer.event.register('fileChanged', (path) => { this.fileChangedEvent(path) })
+    this._deps.browserExplorer.event.on('fileChanged', (path) => { this.fileChangedEvent(path) })
-    this._deps.browserExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
+    this._deps.browserExplorer.event.on('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
-    this._deps.localhostExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
+    this._deps.localhostExplorer.event.on('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
-    this._deps.browserExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
+    this._deps.browserExplorer.event.on('fileRemoved', (path) => { this.fileRemovedEvent(path) })
-    this._deps.browserExplorer.event.register('fileAdded', (path) => { this.fileAddedEvent(path) })
+    this._deps.browserExplorer.event.on('fileAdded', (path) => { this.fileAddedEvent(path) })
-    this._deps.localhostExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
+    this._deps.localhostExplorer.event.on('fileRemoved', (path) => { this.fileRemovedEvent(path) })
-    this._deps.localhostExplorer.event.register('errored', (event) => { this.removeTabsOf(this._deps.localhostExplorer) })
+    this._deps.localhostExplorer.event.on('errored', (event) => { this.removeTabsOf(this._deps.localhostExplorer) })
-    this._deps.localhostExplorer.event.register('closed', (event) => { this.removeTabsOf(this._deps.localhostExplorer) })
+    this._deps.localhostExplorer.event.on('closed', (event) => { this.removeTabsOf(this._deps.localhostExplorer) })
-    this._deps.workspaceExplorer.event.register('fileChanged', (path) => { this.fileChangedEvent(path) })
+    this._deps.workspaceExplorer.event.on('fileChanged', (path) => { this.fileChangedEvent(path) })
-    this._deps.workspaceExplorer.event.register('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
+    this._deps.workspaceExplorer.event.on('fileRenamed', (oldName, newName, isFolder) => { this.fileRenamedEvent(oldName, newName, isFolder) })
-    this._deps.workspaceExplorer.event.register('fileRemoved', (path) => { this.fileRemovedEvent(path) })
+    this._deps.workspaceExplorer.event.on('fileRemoved', (path) => { this.fileRemovedEvent(path) })
-    this._deps.workspaceExplorer.event.register('fileAdded', (path) => { this.fileAddedEvent(path) })
+    this._deps.workspaceExplorer.event.on('fileAdded', (path) => { this.fileAddedEvent(path) })
 
     this.getCurrentFile = this.file
     this.getFile = this.readFile

apps/remix-ide/src/app/files/fileProvider.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const CompilerImport = require('../compiler/compiler-imports')
-const EventManager = require('../../lib/events')
+const EventManager = require('events')
 const modalDialogCustom = require('../ui/modal-dialog-custom')
 const tooltip = require('../ui/tooltip')
 const remixLib = require('@remix-project/remix-lib')
@@ -111,9 +111,9 @@ class FileProvider {
       return false
     }
     if (!exists) {
-      this.event.trigger('fileAdded', [this._normalizePath(unprefixedpath), false])
+      this.event.emit('fileAdded', this._normalizePath(unprefixedpath), false)
     } else {
-      this.event.trigger('fileChanged', [this._normalizePath(unprefixedpath)])
+      this.event.emit('fileChanged', this._normalizePath(unprefixedpath))
     }
     cb()
     return true
@@ -128,7 +128,7 @@ class FileProvider {
       currentCheck = currentCheck + '/' + value
       if (!window.remixFileSystem.existsSync(currentCheck)) {
         window.remixFileSystem.mkdirSync(currentCheck)
-        this.event.trigger('folderAdded', [this._normalizePath(currentCheck)])
+        this.event.emit('folderAdded', this._normalizePath(currentCheck))
       }
     })
     if (cb) cb()
@@ -184,7 +184,7 @@ class FileProvider {
               // folder is empty
               window.remixFileSystem.rmdirSync(path, console.log)
             }
-            this.event.trigger('fileRemoved', [this._normalizePath(path)])
+            this.event.emit('fileRemoved', this._normalizePath(path))
           }
         } catch (e) {
           console.log(e)
@@ -249,7 +249,7 @@ class FileProvider {
     path = this.removePrefix(path)
     if (window.remixFileSystem.existsSync(path) && !window.remixFileSystem.statSync(path).isDirectory()) {
       window.remixFileSystem.unlinkSync(path, console.log)
-      this.event.trigger('fileRemoved', [this._normalizePath(path)])
+      this.event.emit('fileRemoved', this._normalizePath(path))
       return true
     } else return false
   }
@@ -259,11 +259,11 @@ class FileProvider {
     var unprefixednewPath = this.removePrefix(newPath)
     if (this._exists(unprefixedoldPath)) {
       window.remixFileSystem.renameSync(unprefixedoldPath, unprefixednewPath)
-      this.event.trigger('fileRenamed', [
+      this.event.emit('fileRenamed',
         this._normalizePath(unprefixedoldPath),
         this._normalizePath(unprefixednewPath),
         isFolder
-      ])
+      )
       return true
     }
     return false

apps/remix-ide/src/app/files/remixDProvider.js

@@ -17,32 +17,32 @@ module.exports = class RemixDProvider extends FileProvider {
     var remixdEvents = ['connecting', 'connected', 'errored', 'closed']
     remixdEvents.forEach((value) => {
       this._appManager.on('remixd', value, (event) => {
-        this.event.trigger(value, [event])
+        this.event.emit(value, event)
       })
     })
 
     this._appManager.on('remixd', 'folderAdded', (path) => {
-      this.event.trigger('folderAdded', [path])
+      this.event.emit('folderAdded', path)
     })
 
     this._appManager.on('remixd', 'fileAdded', (path) => {
-      this.event.trigger('fileAdded', [path])
+      this.event.emit('fileAdded', path)
     })
 
     this._appManager.on('remixd', 'fileChanged', (path) => {
-      this.event.trigger('fileChanged', [path])
+      this.event.emit('fileChanged', path)
     })
 
     this._appManager.on('remixd', 'fileRemoved', (path) => {
-      this.event.trigger('fileRemoved', [path])
+      this.event.emit('fileRemoved', path)
     })
 
     this._appManager.on('remixd', 'fileRenamed', (oldPath, newPath) => {
-      this.event.trigger('fileRemoved', [oldPath, newPath])
+      this.event.emit('fileRemoved', oldPath, newPath)
     })
 
     this._appManager.on('remixd', 'rootFolderChanged', () => {
-      this.event.trigger('rootFolderChanged', [])
+      this.event.emit('rootFolderChanged')
     })
   }
 
@@ -53,11 +53,11 @@ module.exports = class RemixDProvider extends FileProvider {
   close (cb) {
     this._isReady = false
     cb()
-    this.event.trigger('disconnected')
+    this.event.emit('disconnected')
   }
 
   preInit () {
-    this.event.trigger('loading')
+    this.event.emit('loading')
   }
 
   init (cb) {
@@ -67,7 +67,7 @@ module.exports = class RemixDProvider extends FileProvider {
         this._isReady = true
         this._readOnlyMode = result
         this._registerEvent()
-        this.event.trigger('connected')
+        this.event.emit('connected')
         cb && cb()
       }).catch((error) => {
         cb && cb(error)
@@ -164,13 +164,13 @@ module.exports = class RemixDProvider extends FileProvider {
         this.filesContent[newPath] = this.filesContent[oldPath]
         delete this.filesContent[oldPath]
         this.init(() => {
-          this.event.trigger('fileRenamed', [oldPath, newPath, isFolder])
+          this.event.emit('fileRenamed', oldPath, newPath, isFolder)
         })
         return result
       }).catch(error => {
         console.log(error)
         if (this.error[error.code]) error = this.error[error.code]
-        this.event.trigger('fileRenamedError', [this.error[error.code]])
+        this.event.emit('fileRenamedError', this.error[error.code])
       })
   }
 

apps/remix-ide/src/app/files/workspaceFileProvider.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const EventManager = require('../../lib/events')
+const EventManager = require('events')
 const FileProvider = require('./fileProvider')
 const pathModule = require('path')
 
@@ -82,7 +82,7 @@ class WorkspaceFileProvider extends FileProvider {
 
   createWorkspace (name) {
     if (!name) name = 'default_workspace'
-    this.event.trigger('createWorkspace', [name])
+    this.event.emit('createWorkspace', name)
   }
 }
 

apps/remix-ide/src/app/panels/file-panel.js

@@ -6,14 +6,13 @@ import ReactDOM from 'react-dom'
 import { Workspace } from '@remix-ui/workspace' // eslint-disable-line
 import { bufferToHex, keccakFromString } from 'ethereumjs-util'
 import { checkSpecialChars, checkSlash } from '../../lib/helper'
-var EventManager = require('../../lib/events')
+const { RemixdHandle } = require('../files/remixd-handle.js')
-var { RemixdHandle } = require('../files/remixd-handle.js')
+const { GitHandle } = require('../files/git-handle.js')
-var { GitHandle } = require('../files/git-handle.js')
+const { HardhatHandle } = require('../files/hardhat-handle.js')
-var { HardhatHandle } = require('../files/hardhat-handle.js')
+const globalRegistry = require('../../global/registry')
-var globalRegistry = require('../../global/registry')
+const examples = require('../editor/examples')
-var examples = require('../editor/examples')
+const GistHandler = require('../../lib/gist-handler')
-var GistHandler = require('../../lib/gist-handler')
+const QueryParams = require('../../lib/query-params')
-var QueryParams = require('../../lib/query-params')
 const modalDialogCustom = require('../ui/modal-dialog-custom')
 /*
   Overview of APIs:
@@ -48,7 +47,6 @@ const profile = {
 module.exports = class Filepanel extends ViewPlugin {
   constructor (appManager) {
     super(profile)
-    this.event = new EventManager()
     this._components = {}
     this._components.registry = globalRegistry
     this._deps = {

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

@@ -52,7 +52,7 @@ module.exports = class TestTab extends ViewPlugin {
   }
 
   listenToEvents () {
-    this.filePanel.event.register('newTestFileCreated', file => {
+    this.on('filePanel', 'newTestFileCreated', file => {
       var testList = this._view.el.querySelector("[class^='testList']")
       var test = this.createSingleTest(file)
       testList.appendChild(test)

libs/remix-ui/file-explorer/src/lib/actions/fileSystem.ts

@@ -181,35 +181,35 @@ export const fileRenamedSuccess = (path: string, removePath: string, files) => {
 
 export const init = (provider, workspaceName: string, plugin, registry) => (dispatch: React.Dispatch<any>) => {
   if (provider) {
-    provider.event.register('fileAdded', async (filePath) => {
+    provider.event.on('fileAdded', async (filePath) => {
       if (extractParentFromKey(filePath) === '/.workspaces') return
       const path = extractParentFromKey(filePath) || provider.workspace || provider.type || ''
       const data = await fetchDirectoryContent(provider, path)
 
       dispatch(fileAddedSuccess(path, data))
       if (filePath.includes('_test.sol')) {
-        plugin.event.trigger('newTestFileCreated', [filePath])
+        plugin.emit('newTestFileCreated', filePath)
       }
     })
-    provider.event.register('folderAdded', async (folderPath) => {
+    provider.event.on('folderAdded', async (folderPath) => {
       if (extractParentFromKey(folderPath) === '/.workspaces') return
       const path = extractParentFromKey(folderPath) || provider.workspace || provider.type || ''
       const data = await fetchDirectoryContent(provider, path)
 
       dispatch(folderAddedSuccess(path, data))
     })
-    provider.event.register('fileRemoved', async (removePath) => {
+    provider.event.on('fileRemoved', async (removePath) => {
       const path = extractParentFromKey(removePath) || provider.workspace || provider.type || ''
 
       dispatch(fileRemovedSuccess(path, removePath))
     })
-    provider.event.register('fileRenamed', async (oldPath) => {
+    provider.event.on('fileRenamed', async (oldPath) => {
       const path = extractParentFromKey(oldPath) || provider.workspace || provider.type || ''
       const data = await fetchDirectoryContent(provider, path)
 
       dispatch(fileRenamedSuccess(path, oldPath, data))
     })
-    provider.event.register('fileExternallyChanged', async (path: string, file: { content: string }) => {
+    provider.event.on('fileExternallyChanged', async (path: string, file: { content: string }) => {
       const config = registry.get('config').api
       const editor = registry.get('editor').api
 
@@ -225,10 +225,10 @@ export const init = (provider, workspaceName: string, plugin, registry) => (disp
         ))
       }
     })
-    provider.event.register('fileRenamedError', async () => {
+    provider.event.on('fileRenamedError', async () => {
       dispatch(displayNotification('File Renamed Failed', '', 'Ok', 'Cancel'))
     })
-    provider.event.register('rootFolderChanged', async () => {
+    provider.event.on('rootFolderChanged', async () => {
       workspaceName = provider.workspace || provider.type || ''
       fetchDirectory(provider, workspaceName)(dispatch)
     })

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

@@ -97,24 +97,24 @@ export const Workspace = (props: WorkspaceProps) => {
       props.fileManager.setMode('browser')
     }
   }
-  props.localhost.event.unregister('disconnected', localhostDisconnect)
+  props.localhost.event.off('disconnected', localhostDisconnect)
-  props.localhost.event.register('disconnected', localhostDisconnect)
+  props.localhost.event.on('disconnected', localhostDisconnect)
 
   useEffect(() => {
-    props.localhost.event.register('connected', () => {
+    props.localhost.event.on('connected', () => {
       remixdExplorer.show()
       setWorkspace(LOCALHOST)
     })
 
-    props.localhost.event.register('disconnected', () => {
+    props.localhost.event.on('disconnected', () => {
       remixdExplorer.hide()
     })
 
-    props.localhost.event.register('loading', () => {
+    props.localhost.event.on('loading', () => {
       remixdExplorer.loading()
     })
 
-    props.workspace.event.register('createWorkspace', (name) => {
+    props.workspace.event.on('createWorkspace', (name) => {
       createNewWorkspace(name)
     })