Move RemixAppManager and PluginManagerComponent to ts

apps/remix-ide/.gitignore

@@ -13,4 +13,7 @@ TODO
 .tern-port
 temp_publish_docker
 src/assets/version.json
-src/assets/js/soljson/soljson-v*
+src/assets/js/soljson/soljson-v*
+.env
+.env.*.local
+.env.local

apps/remix-ide/src/app.ts

@@ -103,6 +103,7 @@ import Filepanel from './app/panels/file-panel'
 import Editor from './app/editor/editor'
 import Terminal from './app/panels/terminal'
 import TabProxy from './app/panels/tab-proxy.js'
+import { Plugin } from '@remixproject/engine'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -203,7 +204,7 @@ class AppComponent {
     this.panels = {}
     this.workspace = pluginLoader.get()
     this.engine = new RemixEngine()
-    this.engine.register(appManager)
+    this.engine.register(appManager as unknown as Plugin)
 
     const matomoDomains = {
       'remix-alpha.ethereum.org': 27,

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

@@ -1,8 +1,11 @@
 import { ViewPlugin } from '@remixproject/engine-web'
 import React from 'react' // eslint-disable-line
-import {RemixUiPluginManager} from '@remix-ui/plugin-manager' // eslint-disable-line
+import { RemixUiPluginManager } from '@remix-ui/plugin-manager' // eslint-disable-line
 import * as packageJson from '../../../../../package.json'
 import { PluginViewWrapper } from '@remix-ui/helper'
+import { Profile } from '@remixproject/plugin-utils'
+import { RemixAppManager } from '../../remixAppManager'
+import { RemixEngine } from '../../remixEngine'
 const _paq = window._paq = window._paq || []
 
 const profile = {
@@ -20,7 +23,16 @@ const profile = {
 }
 
 export default class PluginManagerComponent extends ViewPlugin {
-  constructor (appManager, engine) {
+  appManager: RemixAppManager
+  engine: RemixEngine
+  htmlElement: HTMLDivElement
+  filter: string
+  activePlugins: Profile[]
+  inactivePlugins: Profile[]
+  activeProfiles: string[]
+  dispatch: (state: unknown) => void | null
+  private _paq: string[] | string
+  constructor (appManager: RemixAppManager, engine: RemixEngine) {
     super(profile)
     this.appManager = appManager
     this.engine = engine
@@ -88,12 +100,11 @@ export default class PluginManagerComponent extends ViewPlugin {
   }
 
   updateComponent(state){
-    return <RemixUiPluginManager
-      pluginComponent={state}/>
+    return <RemixUiPluginManager pluginComponent={state} />
   }
 
   renderComponent () {
-    if(this.dispatch) this.dispatch({...this, activePlugins: this.activePlugins, inactivePlugins: this.inactivePlugins})
+    if (this.dispatch) this.dispatch({ ...this, activePlugins: this.activePlugins, inactivePlugins: this.inactivePlugins }) // { PluginManagerComponent, activePlugins, inactivePlugins }
   }
 
   render () {
@@ -103,7 +114,7 @@ export default class PluginManagerComponent extends ViewPlugin {
 
   }
 
-  getAndFilterPlugins = (filter) => {
+  getAndFilterPlugins = (filter: string | never = '') => {
     this.filter = typeof filter === 'string' ? filter.toLowerCase() : this.filter
     const isFiltered = (profile) => (profile.displayName + profile.name + profile.description).toLowerCase().includes(this.filter)
     const isNotRequired = (profile) => !this.appManager.isRequired(profile.name)
@@ -145,5 +156,3 @@ export default class PluginManagerComponent extends ViewPlugin {
     })
   }
 }
-
-module.exports = PluginManagerComponent

apps/remix-ide/src/remixAppManager.js → apps/remix-ide/src/remixAppManager.ts

@@ -1,8 +1,10 @@
-import {PluginManager} from '@remixproject/engine'
-import {EventEmitter} from 'events'
-import {QueryParams} from '@remix-project/remix-lib'
-import {IframePlugin} from '@remixproject/engine-web'
-import {Registry} from '@remix-project/remix-lib'
+import { Plugin, PluginManager } from '@remixproject/engine'
+import { EventEmitter } from 'events'
+import { QueryParams } from '@remix-project/remix-lib'
+import { IframePlugin } from '@remixproject/engine-web'
+import { Registry } from '@remix-project/remix-lib'
+import { IRemixAppManager, RemixNavigator } from './types'
+import { Profile } from '@remixproject/plugin-utils'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -170,6 +172,10 @@ export function canActivate(from, to) {
 }
 
 export class RemixAppManager extends PluginManager {
+  actives = []
+  pluginsDirectory: string
+  event: EventEmitter
+  pluginLoader: PluginLoader
   constructor() {
     super()
     this.event = new EventEmitter()
@@ -188,8 +194,8 @@ export class RemixAppManager extends PluginManager {
     if (this.isRequired(to.name)) return false
     return isNative(from.name)
   }
-
-  async canDeactivate(from, to) {
+  //@ts-ignore - did this compensate for plugins calling this signature of canDeactivate which expects a profile
+  async canDeactivate (from, to) {
     return this.canDeactivatePlugin(from, to)
   }
 
@@ -205,7 +211,7 @@ export class RemixAppManager extends PluginManager {
         }
       }
       await this.toggleActive(name)
-    }else{
+    } else {
       console.log('cannot deactivate', name)
     }
   }
@@ -259,16 +265,16 @@ export class RemixAppManager extends PluginManager {
     _paq.push(['trackEvent', 'pluginManager', 'deactivate', plugin.name])
   }
 
-  isDependent(name) {
+  isDependent(name: string): boolean {
     return dependentModules.includes(name)
   }
 
-  isRequired(name) {
+  isRequired(name: string): boolean {
     // excluding internal use plugins
     return requiredModules.includes(name) || isInjectedProvider(name) || isVM(name) || isScriptRunner(name)
   }
 
-  async registeredPlugins() {
+  async registeredPlugins(): Promise<IframePlugin[]> {
     let plugins
     try {
       const res = await fetch(this.pluginsDirectory)
@@ -295,7 +301,7 @@ export class RemixAppManager extends PluginManager {
     const testPluginName = localStorage.getItem('test-plugin-name')
     const testPluginUrl = localStorage.getItem('test-plugin-url')
 
-    for (let plugin of loadLocalPlugins) {
+    for (const plugin of loadLocalPlugins) {
       // fetch the profile from the local plugin
       try {
         const profile = await fetch(`plugins/${plugin}/profile.json`)
@@ -379,7 +385,7 @@ export class RemixAppManager extends PluginManager {
       await this.call('filePanel', 'registerContextMenuItem', {
         id: 'fs',
         name: 'revealInExplorer',
-        label: navigator.userAgentData.platform.indexOf('mac') > -1 ? 'Reveal in Finder' : 'Reveal in Explorer',
+        label: (navigator as RemixNavigator).userAgentData.platform.indexOf('mac') > -1 ? 'Reveal in Finder' : 'Reveal in Explorer',
         type: ['folder', 'file'],
         extension: [],
         path: [],
@@ -407,6 +413,9 @@ export class RemixAppManager extends PluginManager {
  *  (localStorage, queryParams)
  **/
 class PluginLoader {
+  loaders: any
+  current: any
+  donotAutoReload: string[]
   get currentLoader() {
     return this.loaders[this.current]
   }
@@ -442,13 +451,13 @@ class PluginLoader {
         /* Do nothing. */
       },
       get: () => {
-        const {activate} = queryParams.get()
-        if (!activate) return []
-        return activate.split(',')
+        const getContents = queryParams.get()
+        if (!(getContents as any).activate) return []
+        return (getContents as any).activate.split(',')
       },
     }
 
-    this.current = queryParams.get().activate ? 'queryParams' : 'localStorage'
+    this.current = (queryParams.get() as any).activate ? 'queryParams' : 'localStorage'
   }
 
   set(plugin, actives) {

apps/remix-ide/src/types/index.d.ts

@@ -17,3 +17,48 @@ export interface StatusBarInterface {
   dispatch: React.Dispatch<any>
   setDispatch(dispatch: React.Dispatch<any>): void
 }
+
+type NavigatorUAData = {
+  brands: Record<string, string>
+  fullVersion: string
+  mobile: boolean
+  platform: string
+  getHighEntropyValues: (options: string[]) => Promise<Record<string, {
+    wow64: boolean,
+    uaFullVersion: string,
+    platformVersion: string,
+    model: string,
+    fullVersionList: Record<string, string>[]
+    formFactor: string,
+    bitness: string,
+    architecture: string,
+    platform: string,
+    mobile: boolean,
+    brands: Record<string, string>
+  }>>
+  toJson: () => string
+}
+
+export interface RemixNavigator extends Navigator {
+  userAgentData: NavigatorUAData
+}
+
+export interface IRemixAppManager {
+  actives: string[]
+  pluginsDirectory: string
+  event: EventEmitter
+  pluginLoader: PluginLoader
+  canActivatePlugin(from: any, to: any): Promise<boolean>
+  canDeactivatePlugin(from: any, to: any): Promise<boolean>
+  canDeactivate(from: any, to: any): Promise<boolean>
+  deactivatePlugin(name: string): Promise<void>
+  canCall(from: string, to: string, method: string, message: string): Promise<boolean>
+  onPluginActivated(plugin: any): void
+  onPluginDeactivated(plugin: any): void
+  getAll(): Profile<any>[]
+  getIds(): string[]
+  isDependent(name: string): boolean
+  isRequired(name: string): boolean
+  registeredPlugins(): Promise<any[]>
+  registerContextMenuItems(): Promise<void>
+}

apps/remix-ide/tsconfig.json

@@ -12,5 +12,5 @@
     "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
     "../../node_modules/@nrwl/react/typings/image.d.ts"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "src/app/components/plugin-manager-component copy.js.bkup"]
 }

libs/remix-ui/editor/src/lib/remix-plugin-types.ts

@@ -545,7 +545,7 @@ declare interface ISettings {
 }
 
 declare interface ITerminal {
-    events: {   
+    events: {
     } & StatusEvents
     methods: {
         log(message: TerminalMessage): void
@@ -931,4 +931,4 @@ declare interface VMAccount {
 }
 
 export { }
-`
+`

libs/remix-ui/plugin-manager/src/types.d.ts

@@ -137,7 +137,7 @@ export interface PluginManagerContextProviderProps {
 
 export interface RemixUiPluginManagerProps {
   pluginComponent: PluginManagerComponent
-  pluginManagerSettings: PluginManagerSettings
+  pluginManagerSettings?: PluginManagerSettings
 }
 /** @class Reference loaders.
  *  A loader is a get, set based object which load a workspace from a defined sources.