From a8c53c84c7624cfc5492a55c6b448a6a4248c10b Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Tue, 10 Apr 2018 18:26:43 +0100
Subject: [PATCH 1/2] refactor plugin tab

---
 src/app/plugin/pluginManager.js          | 43 +++++++++++-------------
 src/app/tabs/plugin-tab.js               | 43 +++++++++++++++++++-----
 src/app/tabs/styles/plugin-tab-styles.js | 16 ---------
 3 files changed, 53 insertions(+), 49 deletions(-)
 delete mode 100644 src/app/tabs/styles/plugin-tab-styles.js

diff --git a/src/app/plugin/pluginManager.js b/src/app/plugin/pluginManager.js
index 9b06e98804..b5abe2dd52 100644
--- a/src/app/plugin/pluginManager.js
+++ b/src/app/plugin/pluginManager.js
@@ -37,42 +37,39 @@
  * See index.html and remix.js in test-browser folder for sample
  *
  */
-class PluginManager {
-  constructor (api = {}, events = {}, opts = {}) {
-    var self = this
-    this.plugins = {}
-    this.inFocus
+module.exports = class PluginManager {
+  constructor  (api = {}, events = {}, opts = {}) {
+    const self = this
+    self._api = api
+    self._events = events
+    self.plugins = {}
+    self.inFocus
     var allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
-    events.compiler.register('compilationFinished', (success, data, source) => {
-      if (this.inFocus) {
+    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: {
-            success: success,
-            data: data,
-            source: source
-          }
+          value: { success, data, source }
         }))
       }
     })
-
-    events.app.register('tabChanged', (tabName) => {
-      if (this.inFocus && this.inFocus !== tabName) {
+    self._events.app.register('tabChanged', (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
-        this.post(tabName, JSON.stringify({
+        self.inFocus = tabName
+        self.post(tabName, JSON.stringify({
           type: 'compilationData',
-          value: api.compiler.getCompilationResult()
+          value: self._api.getCompilationResult()
         }))
       }
     })
@@ -107,5 +104,3 @@ class PluginManager {
     }
   }
 }
-
-module.exports = PluginManager
diff --git a/src/app/tabs/plugin-tab.js b/src/app/tabs/plugin-tab.js
index 6a8c700485..35dd5b4c30 100644
--- a/src/app/tabs/plugin-tab.js
+++ b/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 el = yo`
-    <div class="${css.pluginTabView}" id="pluginView">
-      <iframe class="${css.iframe}" src="${opts.url}/index.html"></iframe>
-    </div>`
-  return { render () { return el } }
-}
+var EventManager = remixLib.EventManager
 
-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;
+  }
+`
diff --git a/src/app/tabs/styles/plugin-tab-styles.js b/src/app/tabs/styles/plugin-tab-styles.js
deleted file mode 100644
index 3e22de4fa8..0000000000
--- a/src/app/tabs/styles/plugin-tab-styles.js
+++ /dev/null
@@ -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

From 29296e5cc7eb4f7d195187e6f1c05c9d64343217 Mon Sep 17 00:00:00 2001
From: serapath <dev@serapath.de>
Date: Sun, 15 Apr 2018 21:24:36 +0100
Subject: [PATCH 2/2] refactor this2self + adapt passing of compiler

---
 src/app/plugin/pluginManager.js | 22 +++++++++++++---------
 src/app/tabs/plugin-tab.js      |  4 ++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app/plugin/pluginManager.js b/src/app/plugin/pluginManager.js
index b5abe2dd52..cbf263cb16 100644
--- a/src/app/plugin/pluginManager.js
+++ b/src/app/plugin/pluginManager.js
@@ -38,13 +38,14 @@
  *
  */
 module.exports = class PluginManager {
-  constructor  (api = {}, events = {}, opts = {}) {
+  constructor (api = {}, events = {}, opts = {}) {
     const self = this
+    self._opts = opts
     self._api = api
     self._events = events
     self.plugins = {}
     self.inFocus
-    var allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
+    self.allowedapi = {'setConfig': 1, 'getConfig': 1, 'removeConfig': 1}
     self._events.compiler.register('compilationFinished', (success, data, source) => {
       if (self.inFocus) {
         // trigger to the current focus
@@ -54,6 +55,7 @@ module.exports = class PluginManager {
         }))
       }
     })
+
     self._events.app.register('tabChanged', (tabName) => {
       if (self.inFocus && self.inFocus !== tabName) {
         // trigger unfocus
@@ -69,7 +71,7 @@ module.exports = class PluginManager {
         self.inFocus = tabName
         self.post(tabName, JSON.stringify({
           type: 'compilationData',
-          value: self._api.getCompilationResult()
+          value: api.compiler.getCompilationResult()
         }))
       }
     })
@@ -83,10 +85,10 @@ module.exports = 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)
-        if (allowedapi[data.type]) {
+        data.arguments.unshift(self.inFocus)
+        if (self.allowedapi[data.type]) {
           data.arguments.push((error, result) => {
             response(data.type, data.id, error, result)
           })
@@ -96,11 +98,13 @@ module.exports = 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]) {
-      this.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, this.plugins[name].origin)
+    const self = this
+    if (self.plugins[name]) {
+      self.plugins[name].content.querySelector('iframe').contentWindow.postMessage(value, self.plugins[name].origin)
     }
   }
 }
diff --git a/src/app/tabs/plugin-tab.js b/src/app/tabs/plugin-tab.js
index 35dd5b4c30..9b92233c0c 100644
--- a/src/app/tabs/plugin-tab.js
+++ b/src/app/tabs/plugin-tab.js
@@ -8,10 +8,10 @@ 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.data = { url: opts.url }
     self._components = {}
   }
   render () {
@@ -19,7 +19,7 @@ module.exports = class plugintab {
     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>
+        <iframe class="${css.iframe}" src="${self._opts.url}/index.html"></iframe>
       </div>`
     return self._view.el
   }