Merge pull request #962 from ethereum/pluginframework

[WIP] plugin framework
pull/1/head
yann300 7 years ago committed by GitHub
commit a2b60f0f95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      src/app.js
  2. 9
      src/app/panels/righthand-panel.js
  3. 28
      src/app/tabs/plugin-tab.js
  4. 38
      src/app/tabs/settings-tab.js
  5. 60
      src/pluginManager.js

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

@ -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 () {

@ -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
}

@ -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)
})

@ -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
Loading…
Cancel
Save