Merge pull request #1234 from ethereum/refactor_plugin

refactor plugin tab

src/app/plugin/pluginManager.js

@@ -37,40 +37,39 @@
  * See index.html and remix.js in test-browser folder for sample
  *
  */
-class PluginManager {
+module.exports = class PluginManager {
   constructor (api = {}, events = {}, opts = {}) {
-    var self = this
+    const self = this
-    this.plugins = {}
+    self._opts = opts
-    this.inFocus
+    self._api = api
-    var allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
+    self._events = events
-    events.compiler.register('compilationFinished', (success, data, source) => {
+    self.plugins = {}
-      if (this.inFocus) {
+    self.inFocus
+    self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
+    self._events.compiler.register('compilationFinished', (success, data, source) => {
+      if (self.inFocus) {
         // trigger to the current focus
-        this.post(this.inFocus, JSON.stringify({
+        self.post(self.inFocus, JSON.stringify({
           type: 'compilationFinished',
-          value: {
+          value: { success, data, source }
-            success: success,
-            data: data,
-            source: source
-          }
         }))
       }
     })
 
-    events.app.register('tabChanged', (tabName) => {
+    self._events.app.register('tabChanged', (tabName) => {
-      if (this.inFocus && this.inFocus !== tabName) {
+      if (self.inFocus && self.inFocus !== tabName) {
         // trigger unfocus
-        this.post(this.inFocus, JSON.stringify({
+        self.post(self.inFocus, JSON.stringify({
           type: 'unfocus'
         }))
       }
-      if (this.plugins[tabName]) {
+      if (self.plugins[tabName]) {
         // trigger focus
-        this.post(tabName, JSON.stringify({
+        self.post(tabName, JSON.stringify({
           type: 'focus'
         }))
-        this.inFocus = tabName
+        self.inFocus = tabName
-        this.post(tabName, JSON.stringify({
+        self.post(tabName, JSON.stringify({
           type: 'compilationData',
           value: api.compiler.getCompilationResult()
         }))
@@ -86,10 +85,10 @@ class PluginManager {
           result: result
         }))
       }
-      if (event.type === 'message' && this.inFocus && this.plugins[this.inFocus] && this.plugins[this.inFocus].origin === event.origin) {
+      if (event.type === 'message' && self.inFocus && self.plugins[self.inFocus] && self.plugins[self.inFocus].origin === event.origin) {
         var data = JSON.parse(event.data)
-        data.arguments.unshift(this.inFocus)
+        data.arguments.unshift(self.inFocus)
-        if (allowedapi[data.type]) {
+        if (self.allowedapi[data.type]) {
           data.arguments.push((error, result) => {
             response(data.type, data.id, error, result)
           })
@@ -99,13 +98,13 @@ class PluginManager {
     }, false)
   }
   register (desc, content) {
-    this.plugins[desc.title] = {content, origin: desc.url}
+    const self = this
+    self.plugins[desc.title] = {content, origin: desc.url}
   }
   post (name, value) {
-    if (this.plugins[name]) {
+    const self = this
-      this.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, this.plugins[name].origin)
+    if (self.plugins[name]) {
+      self.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, self.plugins[name].origin)
     }
   }
 }
-
-module.exports = PluginManager

src/app/tabs/plugin-tab.js

@@ -1,12 +1,37 @@
 var yo = require('yo-yo')
-var css = require('./styles/plugin-tab-styles')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
 
-function plugintab (api = {}, events = {}, opts = {}) {
+var EventManager = remixLib.EventManager
-  var el = yo`
-    <div class="${css.pluginTabView}" id="pluginView">
-      <iframe class="${css.iframe}" src="${opts.url}/index.html"></iframe>
-    </div>`
-  return { render () { return el } }
-}
 
-module.exports = plugintab
+module.exports = class plugintab {
+  constructor (api = {}, events = {}, opts = {}) {
+    const self = this
+    self.event = new EventManager()
+    self._opts = opts
+    self._api = api
+    self._events = events
+    self._view = { el: null }
+    self._components = {}
+  }
+  render () {
+    const self = this
+    if (self._view.el) return self._view.el
+    self._view.el = yo`
+      <div class="${css.pluginTabView}" id="pluginView">
+        <iframe class="${css.iframe}" src="${self._opts.url}/index.html"></iframe>
+      </div>`
+    return self._view.el
+  }
+}
+const css = csjs`
+  .pluginTabView {
+    height: 100%;
+    width: 100%;
+  }
+  .iframe {
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+`

src/app/tabs/styles/plugin-tab-styles.js

@@ -1,16 +0,0 @@
-var csjs = require('csjs-inject')
-
-var css = csjs`
-  .pluginTabView {
-    height: 100%;
-    width: 100%;
-  }
-  
-  .iframe {
-    height: 100%;
-    width: 100%;
-    border: 0;
-  }
-`
-
-module.exports = css