plugin framework

src/app.js

@@ -608,6 +608,9 @@ function run () {
     },
     logMessage: (msg) => {
       self._components.editorpanel.log({type: 'log', value: msg})
+    },
+    getCompilationResult: () => {
+      return compiler.lastCompilationResult
     }
   }
   var rhpEvents = {

src/app/panels/righthand-panel.js

@@ -8,6 +8,8 @@ var settingsTab = require('../tabs/settings-tab')
 var analysisTab = require('../tabs/analysis-tab')
 var debuggerTab = require('../tabs/debugger-tab')
 var supportTab = require('../tabs/support-tab')
+var pluginTab = require('../tabs/plugin-tab')
+var PluginManager = require('../../pluginManager')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
@@ -156,6 +158,13 @@ function RighthandPanel (appAPI, events, opts) {
   this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, appAPI, events, opts))
   this._view.tabbedMenu.selectTabByTitle('Compile')
 
+  self.pluginManager = new PluginManager(appAPI, events)
+  events.rhp.register('plugin-loadRequest', (json) => {
+    var content = pluginTab(optionViews, {}, {}, {}, json.url)
+    this._view.tabbedMenu.addTab(json.title, 'plugin', content)
+    self.pluginManager.register(json, content)
+  })
+
   self.render = function () { return self._view.element }
 
   self.init = function () {

src/app/tabs/plugin-tab.js

@@ -0,0 +1,28 @@
+var yo = require('yo-yo')
+
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .pluginTabView {
+    height: 100%;
+    width: 100%;
+  }
+  
+  .iframe {
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+`
+
+module.exports = plugintab
+
+function plugintab (container, appAPI, events, opts, url) {
+  var el = yo`
+    <div class="${css.pluginTabView}" id="pluginView">
+      <iframe class="${css.iframe}" src="${url}/index.html"></iframe>
+    </div>`
+  container.appendChild(el)
+  return el
+}

src/app/tabs/settings-tab.js

@@ -9,6 +9,7 @@ var remixLib = require('remix-lib')
 var styleGuide = remixLib.ui.styleGuide
 var styles = styleGuide()
 var helper = require('../../lib/helper')
+var modal = require('../ui/modal-dialog-custom')
 
 var css = csjs`
   .settingsTabView {
@@ -27,12 +28,24 @@ var css = csjs`
     padding: .5em;
     font-weight: bold;
   }
+  .crowNoFlex {
+    overflow: auto;
+    clear: both;
+    padding: .5em;
+    font-weight: bold;
+  }
   .select {
     ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
   }
   input {
     margin-right: 3px;
   }
+  .pluginTextArea {
+    font-family: unset;
+  }
+  .pluginLoad {
+    vertical-align: top;
+  }
 }
 `
 module.exports = SettingsTab
@@ -43,7 +56,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
 
   var queryParams = new QueryParams()
 
-  var optionVM = yo`<input class="${css.col1}" id="alwaysUseVM" type="checkbox">`
+  var optionVM = yo`<input id="alwaysUseVM" type="checkbox">`
   var el = yo`
     <div class="${css.settingsTabView} "id="settingsView">
       <div class="${css.info}">
@@ -54,7 +67,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <select class="${css.select}" id="versionSelector"></select>
       </div>
       <div class="${css.crow}">
-        <div><input class="${css.col1}" id="editorWrap" type="checkbox"></div>
+        <div><input id="editorWrap" type="checkbox"></div>
         <span class="${css.checkboxText}">Text Wrap</span>
       </div>
       <div class="${css.crow}">
@@ -62,12 +75,31 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <span class="${css.checkboxText}">Always use VM at Load</span>
       </div>
       <div class="${css.crow}">
-        <div><input class="${css.col1}" id="optimize" type="checkbox"></div>
+        <div><input id="optimize" type="checkbox"></div>
         <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
+      <hr>
+      <div class="${css.crowNoFlex}">
+        <div>Plugin (<i title="Do not use this feature yet" class="fa fa-exclamation-triangle" aria-hidden="true"></i><span> Do not use this alpha feature if you are not sure what you are doing!</span>)</div>
+         <div>
+          <textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>
+          <input onclick=${loadPlugin} type="button" value="Load" class="${css.pluginLoad}">
+         </div>
+        </div>
     </div>
   `
 
+  function loadPlugin () {
+    var json = el.querySelector('#plugininput').value
+    try {
+      json = JSON.parse(json)
+    } catch (e) {
+      modal.alert('cannot parse the plugin definition to JSON')
+      return
+    }
+    appEvents.rhp.trigger('plugin-loadRequest', [json])
+  }
+
   appEvents.compiler.register('compilerLoaded', (version) => {
     setVersionText(version, el)
   })

src/pluginManager.js

@@ -0,0 +1,60 @@
+'use strict'
+/**
+ * Register and Manage plugin:
+ * Plugin receive 4 types of message:
+ * - focus (when he get focus)
+ * - unfocus (when he loose focus - is hidden)
+ * - compilationData (that is triggered just after a focus - and send the current compilation data or null)
+ * - compilationFinished (that is only sent to the plugin that has focus)
+ *
+ * @param {String} txHash    - hash of the transaction
+ */
+class PluginManager {
+  constructor (api, events) {
+    this.plugins = {}
+    this.inFocus
+    events.compiler.register('compilationFinished', (success, data, source) => {
+      if (this.inFocus) {
+        // trigger to the current focus
+        this.post(this.inFocus, JSON.stringify({
+          type: 'compilationFinished',
+          value: {
+            success: success,
+            data: data,
+            source: source
+          }
+        }))
+      }
+    })
+
+    events.app.register('tabChanged', (tabName) => {
+      if (this.inFocus && this.inFocus !== tabName) {
+        // trigger unfocus
+        this.post(this.inFocus, JSON.stringify({
+          type: 'unfocus'
+        }))
+      }
+      if (this.plugins[tabName]) {
+        // trigger focus
+        this.post(tabName, JSON.stringify({
+          type: 'focus'
+        }))
+        this.inFocus = tabName
+        this.post(tabName, JSON.stringify({
+          type: 'compilationData',
+          value: api.getCompilationResult()
+        }))
+      }
+    })
+  }
+  register (desc, content) {
+    this.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)
+    }
+  }
+}
+
+module.exports = PluginManager