plugin manager

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -3,6 +3,7 @@ import React from 'react' // eslint-disable-line
 import ReactDOM from 'react-dom'
 import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 const _paq = window._paq = window._paq || []
 
 const profile = {
@@ -31,6 +32,7 @@ class PluginManagerComponent extends ViewPlugin {
     this.inactivePlugins = []
     this.activeProfiles = this.appManager.actives
     this._paq = _paq
+    this.dispatch = null
     this.listenOnEvent()
   }
 
@@ -40,7 +42,7 @@ class PluginManagerComponent extends ViewPlugin {
    * RemixAppManager
    * @param {string} name name of Plugin
    */
-  isActive (name) {
+  isActive = (name) =>{
     return this.appManager.actives.includes(name)
   }
 
@@ -49,7 +51,7 @@ class PluginManagerComponent extends ViewPlugin {
    * RemixAppManager to enable plugin activation
    * @param {string} name name of Plugin
    */
-  activateP (name) {
+  activateP = (name) => {
     this.appManager.activatePlugin(name)
     _paq.push(['trackEvent', 'manager', 'activate', name])
   }
@@ -60,7 +62,7 @@ class PluginManagerComponent extends ViewPlugin {
    * @param {Profile} pluginName
    * @returns {void}
    */
-  async activateAndRegisterLocalPlugin (localPlugin) {
+  activateAndRegisterLocalPlugin = async (localPlugin) => {
     if (localPlugin) {
       this.engine.register(localPlugin)
       this.appManager.activatePlugin(localPlugin.profile.name)
@@ -75,28 +77,37 @@ class PluginManagerComponent extends ViewPlugin {
    * of the plugin
    * @param {string} name name of Plugin
    */
-  deactivateP (name) {
+  deactivateP = (name) => {
     this.call('manager', 'deactivatePlugin', name)
     _paq.push(['trackEvent', 'manager', 'deactivate', name])
   }
 
   onActivation () {
+
+  }
+
+  setDispatch (dispatch) {
+    this.dispatch = dispatch
     this.renderComponent()
   }
 
+  updateComponent(state){
+    return <div id='pluginManager'><RemixUiPluginManager
+      pluginComponent={state}/></div>
+  }
+
   renderComponent () {
-    ReactDOM.render(
+    if(this.dispatch) this.dispatch({...this, activePlugins: this.activePlugins, inactivePlugins: this.inactivePlugins})
-      <RemixUiPluginManager
-        pluginComponent={this}
-      />,
-      this.htmlElement)
   }
 
   render () {
-    return this.htmlElement
+    return (
+        <ViewPluginUI plugin={this} />
+    );
+    
   }
 
-  getAndFilterPlugins (filter) {
+  getAndFilterPlugins = (filter) => {
     this.filter = typeof filter === 'string' ? filter.toLowerCase() : this.filter
 
     const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)

apps/remix-ide/src/app/plugins/ViewPluginUI.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { useEffect, useState } from "react"
+
+interface IViewPluginUI {
+    plugin: any
+  }
+  
+export const ViewPluginUI = (props: IViewPluginUI) => {
+  
+    const [state, setState] = useState<any>(null)
+  
+    useEffect(() => {
+      console.log(props.plugin)
+      if(props.plugin.setDispatch){
+        props.plugin.setDispatch(setState)
+      }
+    }, [])
+  
+    useEffect(() => {
+      console.log(state)
+    }, [state])
+  
+    return (
+      <>{state? 
+        <div>{props.plugin.updateComponent(state)}</div>
+      :<></>
+      }</>
+    )
+  }

apps/remix-ide/src/app/tabs/settings-tab.tsx

@@ -5,6 +5,7 @@ import * as packageJson from '../../../../../package.json'
 import { RemixUiSettings } from '@remix-ui/settings' //eslint-disable-line
 import Registry from '../state/registry'
 import { ViewReactPlugin } from '../plugins/viewReactPlugin'
+import { ViewPluginUI } from '../plugins/ViewPluginUI'
 
 const profile = {
   name: 'settings',
@@ -48,7 +49,6 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   render() {      
-    
     return (
       <div id='settingsTab'>
         <ViewPluginUI plugin={this} />
@@ -57,7 +57,6 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   updateComponent(state: any){
-    console.log('updateComponent', state)
     return <RemixUiSettings
     config={state.config}
     editor={state.editor}
@@ -68,7 +67,6 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   renderComponent () {
-    console.log('dispatching', this.useMatomoAnalytics, this.dispatch)
     this.dispatch(this)
   }
 
@@ -77,7 +75,6 @@ module.exports = class SettingsTab extends ViewReactPlugin {
   }
 
   updateMatomoAnalyticsChoice (isChecked) {
-    console.log('update matomo')
     this.config.set('settings/matomo-analytics', isChecked)
     this.useMatomoAnalytics = isChecked
     this.dispatch({
@@ -85,31 +82,3 @@ module.exports = class SettingsTab extends ViewReactPlugin {
     })
   }
 }
-
-
-export interface IViewPluginUI {
-  plugin: any
-}
-
-export const ViewPluginUI = (props: IViewPluginUI) => {
-
-  const [state, setState] = useState<any>(null)
-
-  useEffect(() => {
-    console.log(props.plugin)
-    if(props.plugin.setDispatch){
-      props.plugin.setDispatch(setState)
-    }
-  }, [])
-
-  useEffect(() => {
-    console.log(state)
-  }, [state])
-
-  return (
-    <>{state? 
-      <div>{props.plugin.updateComponent(state)}</div>
-    :<></>
-    }</>
-  )
-}