generating Abstract Panel

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

apps/remix-ide/src/app.js

@@ -90,6 +90,7 @@ const css = csjs`
     display            : flex;
     flex-direction     : row-reverse;
     width              : 320px;
+    overflow           : auto;
   }
   .highlightcode       {
     position           : absolute;
@@ -318,7 +319,7 @@ class App {
     ])
 
     // LAYOUT & SYSTEM VIEWS
-    const appPanel = new MainPanel()
+    const appPanel = new MainPanel(registry.get('config').api)
     const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
     registry.put({ api: mainview, name: 'mainview' })
 

apps/remix-ide/src/app/components/hidden-panel.js

@@ -1,7 +1,7 @@
+import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 const csjs = require('csjs-inject')
-const yo = require('yo-yo')
 
 const css = csjs`
   .pluginsContainer {
@@ -20,12 +20,20 @@ const profile = {
 export class HiddenPanel extends AbstractPanel {
   constructor () {
     super(profile)
+    this.container = document.createElement('div')
   }
 
   render () {
-    return yo`
-      <div class=${css.pluginsContainer}>
-        ${this.view}
-      </div>`
+    return this.container
+  }
+
+  renderComponent () {
+    return ReactDOM.render(
+      <div class={css.pluginsContainer}>
+        {this.element}
+      </div>
+      ,
+      this.container
+    )
   }
 }

apps/remix-ide/src/app/components/main-panel.js

@@ -1,15 +1,9 @@
+/* global Node, requestAnimationFrame */   // eslint-disable-line
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom' // eslint-disable-line
+import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
-const yo = require('yo-yo')
-const csjs = require('csjs-inject')
-
-const css = csjs`
-  .pluginsContainer {
-    height: 100%;
-    display: flex;
-    overflow-y: hidden;
-  }
-`
 
 const profile = {
   name: 'mainPanel',
@@ -20,19 +14,48 @@ const profile = {
 }
 
 export class MainPanel extends AbstractPanel {
-  constructor () {
+  constructor (config) {
     super(profile)
+    this.mainelement = document.createElement('div')
+    this.mainelement.setAttribute('class', 'mainPanelPluginsContainer')
+    this.config = config
+  }
+
+  onActivation () {
+    this.renderComponent()
   }
 
   focus (name) {
     this.emit('focusChanged', name)
     super.focus(name)
+    this.renderComponent()
+  }
+
+  addView (profile, view) {
+    super.addView(profile, view)
+    view.style.height = '100%'
+    this.renderComponent()
+  }
+
+  removeView (profile) {
+    super.removeView(profile)
+    this.renderComponent()
+  }
+
+  onActivation () {
+    this.renderComponent()
   }
 
   render () {
-    return yo`
-      <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
-        ${this.view}
-      </div>`
+    return this.mainelement
+  }
+
+  renderComponent () {
+    ReactDOM.render(
+      <RemixUiMainPanel
+        plugin={this} contents={this.contents}
+      />,
+      this.mainelement
+    )
   }
 }

apps/remix-ide/src/app/components/panel.js

@@ -1,82 +1,35 @@
+import React from 'react' // eslint-disable-line
 import { EventEmitter } from 'events'
-import { HostPlugin } from '@remixproject/engine-web'
-const csjs = require('csjs-inject')
-const yo = require('yo-yo')
-
-const css = csjs`
-  .plugins        {
-    height: 100%;
-  }
-  .plugItIn       {
-    display        : none;
-    height         : 100%;
-  }
-  .plugItIn > div {
-    overflow-y     : auto;
-    overflow-x     : hidden;
-    height         : 100%;
-    width          : 100%;
-  }
-  .plugItIn.active     {
-    display        : block;
-  }
-  .pluginsContainer {
-    height         : 100%;
-    overflow-y     : hidden;
-  }
-`
+const EventManager = require('../../lib/events')
+import { HostPlugin } from '@remixproject/engine-web' // eslint-disable-line
 
 /** Abstract class used for hosting the view of a plugin */
 export class AbstractPanel extends HostPlugin {
   constructor (profile) {
     super(profile)
     this.events = new EventEmitter()
+    this.event = new EventManager()
     this.contents = {}
     this.active = undefined
-
-    // View where the plugin HTMLElement leaves
-    this.view = yo`<div id="plugins" class="${css.plugins}"></div>`
   }
 
-  /**
-   * Add the plugin to the panel
-   * @param {String} name the name of the plugin
-   * @param {HTMLElement} content the HTMLContent of the plugin
-   */
-  add (view, name) {
-    if (this.contents[name]) throw new Error(`Plugin ${name} already rendered`)
+  addView (profile, view) {
+    if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
     view.style.height = '100%'
     view.style.width = '100%'
     view.style.border = '0'
 
-    const isIframe = view.tagName === 'IFRAME'
-    view.style.display = isIframe ? 'none' : 'block'
-    const loading = isIframe ? yo`
-      <div class="d-flex justify-content-center align-items-center">
-        <div class="spinner-border" role="status">
-          <span class="sr-only">Loading...</span>
-        </div>
-      </div>  
-    ` : ''
-    this.contents[name] = yo`<div class="${css.plugItIn}" >${view}${loading}</div>`
-
     if (view.tagName === 'IFRAME') {
-      view.addEventListener('load', () => {
-        if (this.contents[name].contains(loading)) {
-          this.contents[name].removeChild(loading)
-        }
-        view.style.display = 'block'
-      })
+      view.style.display = 'block'
     }
-    this.contents[name].style.display = 'none'
-    this.view.appendChild(this.contents[name])
-  }
 
-  addView (profile, view) {
-    this.add(view, profile.name)
+    this.contents[profile.name] = view
+    this.contents[profile.name].style.display = 'none'
   }
 
   removeView (profile) {
+    this.emit('pluginDisabled', profile.name)
+    this.verticalIcons.unlinkContent(profile)
     this.remove(profile.name)
   }
 
@@ -87,7 +40,6 @@ export class AbstractPanel extends HostPlugin {
   remove (name) {
     const el = this.contents[name]
     delete this.contents[name]
-    if (el) el.parentElement.removeChild(el)
     if (name === this.active) this.active = undefined
   }
 
@@ -102,6 +54,9 @@ export class AbstractPanel extends HostPlugin {
       this.contents[this.active].style.display = 'none'
     }
     this.contents[name].style.display = 'flex'
+    this.contents[name].style.paddingTop = '20%'
+    this.contents[name].style.flexDirection = 'column'
+
     this.active = name
   }