Add support for socket plugin in localmode

src/app/components/local-plugin.js

@@ -2,6 +2,12 @@
 const yo = require('yo-yo')
 const modalDialog = require('../ui/modaldialog')
 
+const defaultProfile = {
+  methods: [],
+  location: 'sidePanel',
+  type: 'iframe',
+}
+
 module.exports = class LocalPlugin {
 
   /**
@@ -10,7 +16,7 @@ module.exports = class LocalPlugin {
    * @returns {Promise<{api: any, profile: any}>} A promise with the new plugin profile
    */
   open (plugins) {
-    this.profile = JSON.parse(localStorage.getItem('plugins/local')) || { notifications: {} }
+    this.profile = JSON.parse(localStorage.getItem('plugins/local')) || defaultProfile
     return new Promise((resolve, reject) => {
       const onValidation = () => {
         try {
@@ -35,6 +41,7 @@ module.exports = class LocalPlugin {
       icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjYyIDEwNzVxLTM3IDEyMS0xMzggMTk1dC0yMjggNzQtMjI4LTc0LTEzOC0xOTVxLTgtMjUgNC00OC41dDM4LTMxLjVxMjUtOCA0OC41IDR0MzEuNSAzOHEyNSA4MCA5Mi41IDEyOS41dDE1MS41IDQ5LjUgMTUxLjUtNDkuNSA5Mi41LTEyOS41cTgtMjYgMzItMzh0NDktNCAzNyAzMS41IDQgNDguNXptLTQ5NC00MzVxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptNTEyIDBxMCA1My0zNy41IDkwLjV0LTkwLjUgMzcuNS05MC41LTM3LjUtMzcuNS05MC41IDM3LjUtOTAuNSA5MC41LTM3LjUgOTAuNSAzNy41IDM3LjUgOTAuNXptMjU2IDI1NnEwLTEzMC01MS0yNDguNXQtMTM2LjUtMjA0LTIwNC0xMzYuNS0yNDguNS01MS0yNDguNSA1MS0yMDQgMTM2LjUtMTM2LjUgMjA0LTUxIDI0OC41IDUxIDI0OC41IDEzNi41IDIwNCAyMDQgMTM2LjUgMjQ4LjUgNTEgMjQ4LjUtNTEgMjA0LTEzNi41IDEzNi41LTIwNCA1MS0yNDguNXptMTI4IDBxMCAyMDktMTAzIDM4NS41dC0yNzkuNSAyNzkuNS0zODUuNSAxMDMtMzg1LjUtMTAzLTI3OS41LTI3OS41LTEwMy0zODUuNSAxMDMtMzg1LjUgMjc5LjUtMjc5LjUgMzg1LjUtMTAzIDM4NS41IDEwMyAyNzkuNSAyNzkuNSAxMDMgMzg1LjV6Ii8+PC9zdmc+',
       methods: [],
       location: 'sidePanel',
+      type: 'iframe',
       ...this.profile,
       hash: `local-${this.profile.name}`
     }
@@ -57,32 +64,41 @@ module.exports = class LocalPlugin {
     this.profile.displayName = target.value
   }
 
-  updateLoc ({target}) {
-    this.profile.location = target.value
+  updateProfile(key, e) {
+    this.profile[key] = e.target.value
   }
 
-  /**
-   * The form to create a local plugin
-   * @param {ProfileApi[]} plugins Liste of profile of the plugins
-   */
-  form (plugins = []) {
+  /** The form to create a local plugin */
+  form () {
     const name = this.profile.name || ''
     const url = this.profile.url || ''
     const displayName = this.profile.displayName || ''
-    const radioLocations = (label, displayN) => {
-      const radioButton = (this.profile.location === label)
-       ? yo`<div class="radio">
-          <label for="${label}">
-            <input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="${label}" id="${label}" checked="checked" />${displayN}</label>
+    const radioSelection = (key, label, message) => {
+      return this.profile[key] === label
+        ? yo`<div class="radio">
+          <input class="form-check-input" type="radio" name="${key}" onclick="${e => this.updateProfile(key, e)}" value="${label}" id="${label}" checked="checked" />
+          <label class="form-check-label" for="${label}">${message}</label>
         </div>`
-      : yo`<div class="radio">
-          <label for="${label}">
-            <input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="${label}" id="${label}" />${displayN}</label>
+        : yo`<div class="radio">
+          <input class="form-check-input" type="radio" name="${key}" onclick="${e => this.updateProfile(key, e)}" value="${label}" id="${label}" />
+          <label class="form-check-label" for="${label}">${message}</label>
         </div>`
-      return yo`<div>
-        ${radioButton}
-      </div>`
     }
+    // const radioLocations = (label, displayN) => {
+    //   const radioButton = (this.profile.location === label)
+    //    ? yo`<div class="radio">
+    //       <label for="${label}">
+    //         <input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="${label}" id="${label}" checked="checked" />${displayN}</label>
+    //     </div>`
+    //   : yo`<div class="radio">
+    //       <label for="${label}">
+    //         <input type="radio" name="location" onclick="${e => this.updateLoc(e)}" value="${label}" id="${label}" />${displayN}</label>
+    //     </div>`
+    //   return yo`<div>
+    //     ${radioButton}
+    //   </div>`
+    // }
+
     return yo`
     <form id="local-plugin-form">
       <div class="form-group">
@@ -97,11 +113,17 @@ module.exports = class LocalPlugin {
         <label for="plugin-url">Url <small>(required)</small></label>
         <input class="form-control" onchange="${e => this.updateUrl(e)}" value="${url}" id="plugin-url" placeholder="ex: https://localhost:8000">
       </div>
-      <div class="form-group">
+      <h6>Type of connection <small>(required)</small></h6>
+      <div class="form-check form-group">
+        ${radioSelection('type', 'iframe', 'Iframe')}
+        ${radioSelection('type', 'ws', 'Websocket')}
+      </div>
       <h6>Location in remix <small>(required)</small></h6>
-      ${radioLocations('sidePanel', 'Side Panel')}
-      ${radioLocations('mainPanel', 'Main Panel')}
-      ${radioLocations('none', 'None')}
+      <div class="form-check form-group">
+        ${radioSelection('location', 'sidePanel', 'Side Panel')}
+        ${radioSelection('location', 'mainPanel', 'Main Panel')}
+        ${radioSelection('location', 'none', 'None')}
+      </div>
     </form>`
   }
 }

src/app/components/plugin-manager-component.js

@@ -2,7 +2,7 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const EventEmitter = require('events')
 const LocalPlugin = require('./local-plugin')
-import { ViewPlugin, IframePlugin } from '@remixproject/engine'
+import { ViewPlugin, IframePlugin, WebsocketPlugin } from '@remixproject/engine'
 import { PluginManagerSettings } from './plugin-manager-settings'
 import * as packageJson from '../../../package.json'
 const addToolTip = require('../ui/tooltip')
@@ -130,7 +130,9 @@ class PluginManagerComponent extends ViewPlugin {
       if (this.appManager.getIds().includes(profile.name)) {
         throw new Error('This name has already been used')
       }
-      this.appManager.registerOne(new IframePlugin(profile))
+
+      const plugin = profile.type === 'iframe' ? new IframePlugin(profile) : new WebsocketPlugin(profile)
+      this.appManager.registerOne(plugin)
       this.appManager.activateOne(profile.name)
     } catch (err) {
       // TODO : Use an alert to handle this error instead of a console.log