settings and debugger

apps/remix-ide/src/app/tabs/debugger-tab.js

@@ -51,9 +51,8 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     this.on('fetchAndCompile', 'sourceVerificationNotAvailable', () => {
       this.call('notification', 'toast', sourceVerificationNotAvailableToastMsg())
     })
-
-    this.renderComponent()
-    return this.el
+    
+    return <DebuggerUI debuggerAPI={this} />
   }
 
   showMessage (title, message) {
@@ -68,9 +67,4 @@ export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
     }
   }
 
-  renderComponent () {
-    ReactDOM.render(
-      <DebuggerUI debuggerAPI={this} />
-      , this.el)
-  }
 }

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

@@ -33,11 +33,19 @@ module.exports = class SettingsTab extends ViewPlugin {
   }
 
   onActivation () {
-    this.renderComponent()
   }
 
-  render () {
-    return this.element
+  render() {
+    return (
+      <div id='settingsTab'>
+      <RemixUiSettings
+        config={this.config}
+        editor={this.editor}
+        _deps={this._deps}
+        useMatomoAnalytics={this.useMatomoAnalytics}
+      />
+      </div>
+    );
   }
 
   renderComponent () {

libs/remix-ui/app/src/lib/remix-app/remix-app.tsx

@@ -92,14 +92,14 @@ export const ViewPluginUI = (props: IViewPluginUI) => {
   const [state, setState] = useState<any>(null)
 
   useEffect(() => {
-    console.log(props.plugin)
+    // console.log(props.plugin)
     if(props.plugin.setDispatch){
       props.plugin.setDispatch(setState)
     }
   }, [])
 
   useEffect(() => {
-    console.log(state)
+    // console.log(state)
   }, [state])
 
   return (

libs/remix-ui/panel/src/lib/plugins/panel-plugin.tsx

@@ -10,8 +10,14 @@ const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => {
   const localRef = useRef<HTMLDivElement>(null)
   const [view, setView] = useState<JSX.Element | HTMLDivElement>()
   useEffect(() => {
+    
     const ref:any = panelRef || localRef
     if (ref.current) {
+      if(React.isValidElement(props.pluginRecord.view)) {
+        console.log('is REACT element', props.pluginRecord.profile.name)
+      }else{
+        console.log('is HTML element', props.pluginRecord.profile.name)
+      }
       if (props.pluginRecord.view) {
         if (React.isValidElement(props.pluginRecord.view)) {
           setView(props.pluginRecord.view)