From 3019ccf46eb35dd5d544b49e3ebdced7c8bdb37d Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 13 Feb 2019 16:53:37 +0100 Subject: [PATCH] remixd as a module --- src/app.js | 3 +- src/app/files/remixd-handle.js | 87 ++++++++++++++++++++++++++++++++++ src/app/panels/file-panel.js | 65 +++---------------------- 3 files changed, 96 insertions(+), 59 deletions(-) create mode 100644 src/app/files/remixd-handle.js diff --git a/src/app.js b/src/app.js index 94881f0c81..80808f2b61 100644 --- a/src/app.js +++ b/src/app.js @@ -474,7 +474,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org { profile: run.profile(), api: run }, { profile: debug.profile(), api: debug }, { profile: analysis.profile(), api: analysis }, - { profile: test.profile(), api: test } + { profile: test.profile(), api: test }, + { profile: filePanel.remixdHandle.profile(), api: filePanel.remixdHandle } ]) appManager.registerMany(appManager.plugins()) diff --git a/src/app/files/remixd-handle.js b/src/app/files/remixd-handle.js new file mode 100644 index 0000000000..1958872ce4 --- /dev/null +++ b/src/app/files/remixd-handle.js @@ -0,0 +1,87 @@ +var yo = require('yo-yo') +var modalDialog = require('../ui/modaldialog') + +var csjs = require('csjs-inject') +var styleGuide = require('../ui/styles-guide/theme-chooser') +var styles = styleGuide.chooser() + +var css = csjs` + .dialog { + display: flex; + flex-direction: column; + } + .dialogParagraph { + ${styles.infoTextBox} + margin-bottom: 2em; + word-break: break-word; + } +` + +export class RemixdHandle { + constructor (fileSystemExplorer, locahostProvider) { + this.fileSystemExplorer = fileSystemExplorer + this.locahostProvider = locahostProvider + } + + profile () { + return { + name: 'remixd', + methods: [], + events: [], + description: 'using Remixd daemon, allow to access file system', + kind: 'other' + } + } + + deactivate () { + this.locahostProvider.close((error) => { + if (error) console.log(error) + }) + } + + activate () { + this.connectToLocalhost() + } + + /** + * connect to localhost if no connection and render the explorer + * disconnect from localhost if connected and remove the explorer + * + * @param {String} txHash - hash of the transaction + */ + connectToLocalhost () { + if (this.locahostProvider.isConnected()) { + this.locahostProvider.close((error) => { + if (error) console.log(error) + }) + } else { + modalDialog('Connect to localhost', remixdDialog(), + { label: 'Connect', + fn: () => { + this.locahostProvider.init((error) => { + if (error) { + console.log(error) + } else { + this.fileSystemExplorer.ensureRoot() + } + }) + }}) + } + } +} + +function remixdDialog () { + return yo` +
+
Interact with your file system from Remix. Click connect and find shared folder in the Remix file explorer (under localhost). + Before you get started, check out Tutorial_remixd_filesystem + to find out how to run Remixd. +
+
Connection will start a session between ${window.location.href} and your local file system ws://127.0.0.1:65520 + so please make sure your system is secured enough (port 65520 neither opened nor forwarded). + will show you current connection status. +
+
This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.
+
+ ` +} diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js index c41e88755f..bf69ecddd9 100644 --- a/src/app/panels/file-panel.js +++ b/src/app/panels/file-panel.js @@ -6,18 +6,15 @@ var CompilerMetadata = require('../files/compiler-metadata') var EventManager = require('../../lib/events') var Gists = require('gists') var FileExplorer = require('../files/file-explorer') -var modalDialog = require('../ui/modaldialog') var modalDialogCustom = require('../ui/modal-dialog-custom') var tooltip = require('../ui/tooltip') var QueryParams = require('../../lib/query-params') var queryParams = new QueryParams() var helper = require('../../lib/helper') +var { RemixdHandle } = require('../files/remixd-handle.js') var globalRegistry = require('../../global/registry') -var styleGuide = require('../ui/styles-guide/theme-chooser') -var styles = styleGuide.chooser() - var css = require('./styles/file-panel-styles') var canUpload = window.File || window.FileReader || window.FileList || window.Blob @@ -58,6 +55,8 @@ function filepanel (localRegistry) { var httpExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['http']) var httpsExplorer = new FileExplorer(self._components.registry, self._deps.fileProviders['https']) + self.remixdHandle = new RemixdHandle(fileSystemExplorer, self._deps.fileProviders['localhost']) + // ----------------- editor panel ---------------------- self._compilerMetadata = new CompilerMetadata( { @@ -70,22 +69,6 @@ function filepanel (localRegistry) { self.compilerMetadata = () => { return self._compilerMetadata } - function remixdDialog () { - return yo` -
-
Interact with your file system from Remix. Click connect and find shared folder in the Remix file explorer (under localhost). - Before you get started, check out Tutorial_remixd_filesystem - to find out how to run Remixd. -
-
Connection will start a session between ${window.location.href} and your local file system ws://127.0.0.1:65520 - so please make sure your system is secured enough (port 65520 neither opened nor forwarded). - will show you current connection status. -
-
This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.
-
- ` - } - function template () { return yo`
@@ -110,9 +93,6 @@ function filepanel (localRegistry) { - - -
${fileExplorer.init()}
@@ -134,27 +114,22 @@ function filepanel (localRegistry) { var element = template() fileExplorer.ensureRoot() configExplorer.ensureRoot() - var websocketconn = element.querySelector('.websocketconn') self._deps.fileProviders['localhost'].event.register('connecting', (event) => { - websocketconn.style.color = styles.colors.yellow - websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event)) + tooltip('Connecting to localhost. ' + JSON.stringify(event)) }) self._deps.fileProviders['localhost'].event.register('connected', (event) => { - websocketconn.style.color = styles.colors.green - websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event)) + tooltip('Connected to localhost. ' + JSON.stringify(event)) fileSystemExplorer.show() }) self._deps.fileProviders['localhost'].event.register('errored', (event) => { - websocketconn.style.color = styles.colors.red - websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event)) + tooltip('localhost connection errored. ' + JSON.stringify(event)) fileSystemExplorer.hide() }) self._deps.fileProviders['localhost'].event.register('closed', (event) => { - websocketconn.style.color = styles.colors.black - websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event)) + tooltip('localhost connection closed. ' + JSON.stringify(event)) fileSystemExplorer.hide() }) @@ -254,32 +229,6 @@ function filepanel (localRegistry) { }, null, true) } - /** - * connect to localhost if no connection and render the explorer - * disconnect from localhost if connected and remove the explorer - * - * @param {String} txHash - hash of the transaction - */ - function connectToLocalhost () { - if (self._deps.fileProviders['localhost'].isConnected()) { - self._deps.fileProviders['localhost'].close((error) => { - if (error) console.log(error) - }) - } else { - modalDialog('Connect to localhost', remixdDialog(), - { label: 'Connect', - fn: () => { - self._deps.fileProviders['localhost'].init((error) => { - if (error) { - console.log(error) - } else { - fileSystemExplorer.ensureRoot() - } - }) - }}) - } - } - // ------------------ gist publish -------------- function updateGist () {