refactor plugin tab

src/app/plugin/pluginManager.js

@@ -37,42 +37,39 @@
  * See index.html and remix.js in test-browser folder for sample
  *
  */
-class PluginManager {
+module.exports = class PluginManager {
-  constructor (api = {}, events = {}, opts = {}) {
+  constructor  (api = {}, events = {}, opts = {}) {
-    var self = this
+    const self = this
-    this.plugins = {}
+    self._api = api
-    this.inFocus
+    self._events = events
+    self.plugins = {}
+    self.inFocus
     var allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
-    events.compiler.register('compilationFinished', (success, data, source) => {
+    self._events.compiler.register('compilationFinished', (success, data, source) => {
-      if (this.inFocus) {
+      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
-          }
         }))
       }
     })
-
+    self._events.app.register('tabChanged', (tabName) => {
-    events.app.register('tabChanged', (tabName) => {
+      if (self.inFocus && self.inFocus !== tabName) {
-      if (this.inFocus && this.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()
+          value: self._api.getCompilationResult()
         }))
       }
     })
@@ -107,5 +104,3 @@ class PluginManager {
     }
   }
 }
-
-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._api = api
+    self._events = events
+    self._view = { el: null }
+    self.data = { url: opts.url }
+    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.data.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