trying to import react component

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

 import { IframePlugin, ViewPlugin, WebsocketPlugin } from '@remixproject/engine-web'
 import { PluginManagerSettings } from './plugin-manager-settings'
+import React from 'react'
+import { ReactDOM } from 'react-dom'
+import { RemixUIPluginManager } from '@remix-ui/plugin-manager'
 import * as packageJson from '../../../../../package.json'
 const yo = require('yo-yo')
 const csjs = require('csjs-inject')
@@ -96,6 +99,12 @@ class PluginManagerComponent extends ViewPlugin {
     this.appManager.event.on('deactivate', () => { this.reRender() })
     this.engine = engine
     this.engine.event.on('onRegistration', () => { this.reRender() })
+    this.htmlElement = document.createElement('div')
+    this.htmlElement.setAttribute('id', 'pluginManager')
+  }
+
+  onActivation () {
+    this.renderComponent()
   }
 
   isActive (name) {
@@ -188,8 +197,14 @@ class PluginManagerComponent extends ViewPlugin {
     }
   }
 
+  // return this.htmlElement()
+
+  // render () {
+  //   return this.htmlElement()
+  // }
+
   render () {
-    // Filtering helpers
+  // Filtering helpers
     const isFiltered = (profile) => (profile.displayName ? profile.displayName : profile.name).toLowerCase().includes(this.filter)
     const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
     const isNotDependent = (profile) => !this.appManager.isDependent(profile.name)
@@ -215,46 +230,52 @@ class PluginManagerComponent extends ViewPlugin {
 
     const activeTile = actives.length !== 0
       ? yo`
-      <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
-        <span class="navbar-brand plugins-list-title">Active Modules</span>
-        <span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
-      </nav>`
+    <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+    <span class="navbar-brand plugins-list-title">Active Modules</span>
+    <span class="badge badge-primary" data-id="pluginManagerComponentActiveTilesCount">${actives.length}</span>
+    </nav>
+    `
       : ''
     const inactiveTile = inactives.length !== 0
       ? yo`
-      <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
-        <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
-        <span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
-      </nav>`
+    <nav class="plugins-list-header justify-content-between navbar navbar-expand-lg bg-light navbar-light align-items-center">
+    <span class="navbar-brand plugins-list-title h6 mb-0 mr-2">Inactive Modules</span>
+    <span class="badge badge-primary" style = "cursor: default;" data-id="pluginManagerComponentInactiveTilesCount">${inactives.length}</span>
+    </nav>
+    `
       : ''
 
     const settings = new PluginManagerSettings().render()
 
     const rootView = yo`
-      <div id='pluginManager' data-id="pluginManagerComponentPluginManager">
-        <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
-          <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
-          <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
-            Connect to a Local Plugin
-          </button>
-        </header>
-        <section data-id="pluginManagerComponentPluginManagerSection">
-          ${activeTile}
-          <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-            ${actives.map(profile => this.renderItem(profile))}
-          </div>
-          ${inactiveTile}
-          <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
-            ${inactives.map(profile => this.renderItem(profile))}
-          </div>
-        </section>
-        ${settings}
-      </div>
-    `
+  <div id='pluginManager' data-id="pluginManagerComponentPluginManager">
+  <header class="form-group ${css.pluginSearch} plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
+    <input onkeyup="${e => this.filterPlugins(e)}" class="${css.pluginSearchInput} form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput">
+    <button onclick="${_ => this.openLocalPlugin()}" class="${css.pluginSearchButton} btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
+      Connect to a Local Plugin
+    </button>
+  </header>
+  <section data-id="pluginManagerComponentPluginManagerSection">
+    ${activeTile}
+    <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
+      ${actives.map(profile => this.renderItem(profile))}
+    </div>
+    ${inactiveTile}
+    <div class="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentInactiveTile">
+      ${inactives.map(profile => this.renderItem(profile))}
+    </div>
+  </section>
+  ${settings}
+  </div>
+  `
     if (!this.views.root) this.views.root = rootView
     return rootView
   }
 
+  renderComponent () {
+    ReactDOM.render(<RemixUIPluginManager />, this.htmElement)
+  }
+
   reRender () {
     if (this.views.root) {
       yo.update(this.views.root, this.render())

libs/remix-ui/plugin-manager/src/customTypes.ts

@@ -18,3 +18,12 @@ export type Profile = {
   documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
   version: string
 }
+
+export type LocalPlugin = {
+  create: () => Profile
+  updateName: (target: string) => void
+  updateDisplayName: (displayName: string) => void
+  updateProfile: (key: string, e: Event) => void
+  updateMethods: (target: any) => void
+  form: () => HTMLElement
+}

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

 import React from 'react'
+import { Profile } from '../customTypes'
 import './remix-ui-plugin-manager.css'
 
 /* eslint-disable-next-line */
 export interface RemixUiPluginManagerProps {
-
+  activatePlugin: (name: string) => void
+  deActivatePlugin: (name: string) => void
+  isActive: () => void
+  openLocalPlugin: () => Promise<void>
+  filterPlugins: () => void
+  reRender: () => void
+  profile: Profile
 }
 
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {

libs/remix-ui/plugin-manager/tsconfig.json

 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "jsx": "react",
     "allowJs": true,

tsconfig.base.json

-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "rootDir": ".",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "commonjs",
-    "typeRoots": ["node_modules/@types"],
-    "lib": ["es2017", "es2019", "dom"],
-    "skipLibCheck": true,
-    "skipDefaultLibCheck": true,
-    "baseUrl": ".",
-    "paths": {
-      "@remix-project/remix-analyzer": ["dist/libs/remix-analyzer/index.js"],
-      "@remix-project/remix-astwalker": ["dist/libs/remix-astwalker/index.js"],
-      "@remix-project/remix-debug": ["dist/libs/remix-debug/src/index.js"],
-      "@remix-project/remix-lib": ["dist/libs/remix-lib/src/index.js"],
-      "@remix-project/remix-simulator": [
-        "dist/libs/remix-simulator/src/index.js"
-      ],
-      "@remix-project/remix-solidity": ["dist/libs/remix-solidity/index.js"],
-      "@remix-project/remix-tests": ["dist/libs/remix-tests/src/index.js"],
-      "@remix-project/remix-url-resolver": [
-        "dist/libs/remix-url-resolver/index.js"
-      ],
-      "@remixproject/debugger-plugin": ["apps/debugger/src/index.ts"],
-      "@remix-project/remixd": ["dist/libs/remixd/index.js"],
-      "@remix-ui/tree-view": ["libs/remix-ui/tree-view/src/index.ts"],
-      "@remix-ui/debugger-ui": ["libs/remix-ui/debugger-ui/src/index.ts"],
-      "@remix-ui/utils": ["libs/remix-ui/utils/src/index.ts"],
-      "@remix-ui/clipboard": ["libs/remix-ui/clipboard/src/index.ts"],
-      "@remix-project/remix-solidity-ts": ["libs/remix-solidity/src/index.ts"],
-      "@remix-ui/modal-dialog": ["libs/remix-ui/modal-dialog/src/index.ts"],
-      "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
-      "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
-      "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
-      "@remix-ui/static-analyser": [
-        "libs/remix-ui/static-analyser/src/index.ts"
-      ],
-      "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"],
-      "@remix-ui/project-manager": ["libs/remix-ui/plugin-manager/src/index.ts"]
-    }
-  },
-  "exclude": ["node_modules", "tmp"]
-}

tsconfig.json

@@ -39,10 +39,10 @@
       "@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
       "@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
       "@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
-      "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"],
       "@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"],
       "@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"],
-      "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"]
+      "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"],
+      "@remix-ui/plugin-manager": ["libs/remix-ui/plugin-manager/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]