From 27d20f471491f8fa01eda3407129a2906b19e7ff Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 19 Dec 2017 11:27:19 +0100 Subject: [PATCH] plugin framework --- src/app.js | 3 ++ src/app/panels/righthand-panel.js | 9 +++++ src/app/tabs/plugin-tab.js | 28 +++++++++++++++ src/app/tabs/settings-tab.js | 38 ++++++++++++++++++-- src/pluginManager.js | 60 +++++++++++++++++++++++++++++++ 5 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 src/app/tabs/plugin-tab.js create mode 100644 src/pluginManager.js diff --git a/src/app.js b/src/app.js index b398d7db8a..bcdb8fd08c 100644 --- a/src/app.js +++ b/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 = { diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js index e6a29d2956..843a925b55 100644 --- a/src/app/panels/righthand-panel.js +++ b/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 () { diff --git a/src/app/tabs/plugin-tab.js b/src/app/tabs/plugin-tab.js new file mode 100644 index 0000000000..62347ca7eb --- /dev/null +++ b/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` +
+ +
` + container.appendChild(el) + return el +} diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index f37d8c4c5f..924c027386 100644 --- a/src/app/tabs/settings-tab.js +++ b/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`` + var optionVM = yo`` var el = yo`
@@ -54,7 +67,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
-
+
Text Wrap
@@ -62,12 +75,31 @@ function SettingsTab (container, appAPI, appEvents, opts) { Always use VM at Load
-
+
Enable Optimization
+
+
+
Plugin ( Do not use this alpha feature if you are not sure what you are doing!)
+
+ + +
+
` + 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) }) diff --git a/src/pluginManager.js b/src/pluginManager.js new file mode 100644 index 0000000000..2c8d4393dd --- /dev/null +++ b/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