Merge pull request #5644 from ethereum/move-appjs-to-appts

Move AppComponent from js to ts

apps/remix-ide/src/app.ts

@@ -26,21 +26,21 @@ import { WalkthroughService } from './walkthroughService'
 
 import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, GistHandler } from '@remix-project/core-plugin'
 
-import {Registry} from '@remix-project/remix-lib'
+import { Registry } from '@remix-project/remix-lib'
-import {ConfigPlugin} from './app/plugins/config'
+import { ConfigPlugin } from './app/plugins/config'
-import {StoragePlugin} from './app/plugins/storage'
+import { StoragePlugin } from './app/plugins/storage'
-import {Layout} from './app/panels/layout'
+import { Layout } from './app/panels/layout'
-import {NotificationPlugin} from './app/plugins/notification'
+import { NotificationPlugin } from './app/plugins/notification'
-import {Blockchain} from './blockchain/blockchain'
+import { Blockchain } from './blockchain/blockchain'
-import {MergeVMProvider, LondonVMProvider, BerlinVMProvider, ShanghaiVMProvider, CancunVMProvider} from './app/providers/vm-provider'
+import { MergeVMProvider, LondonVMProvider, BerlinVMProvider, ShanghaiVMProvider, CancunVMProvider } from './app/providers/vm-provider'
-import {MainnetForkVMProvider} from './app/providers/mainnet-vm-fork-provider'
+import { MainnetForkVMProvider } from './app/providers/mainnet-vm-fork-provider'
-import {SepoliaForkVMProvider} from './app/providers/sepolia-vm-fork-provider'
+import { SepoliaForkVMProvider } from './app/providers/sepolia-vm-fork-provider'
-import {GoerliForkVMProvider} from './app/providers/goerli-vm-fork-provider'
+import { GoerliForkVMProvider } from './app/providers/goerli-vm-fork-provider'
-import {CustomForkVMProvider} from './app/providers/custom-vm-fork-provider'
+import { CustomForkVMProvider } from './app/providers/custom-vm-fork-provider'
-import {HardhatProvider} from './app/providers/hardhat-provider'
+import { HardhatProvider } from './app/providers/hardhat-provider'
-import {GanacheProvider} from './app/providers/ganache-provider'
+import { GanacheProvider } from './app/providers/ganache-provider'
-import {FoundryProvider} from './app/providers/foundry-provider'
+import { FoundryProvider } from './app/providers/foundry-provider'
-import {ExternalHttpProvider} from './app/providers/external-http-provider'
+import { ExternalHttpProvider } from './app/providers/external-http-provider'
 import { EnvironmentExplorer } from './app/providers/environment-explorer'
 import { FileDecorator } from './app/plugins/file-decorator'
 import { CodeFormat } from './app/plugins/code-format'
@@ -72,9 +72,9 @@ import { Matomo } from './app/plugins/matomo'
 
 import { TemplatesSelectionPlugin } from './app/plugins/templates-selection/templates-selection-plugin'
 
-const isElectron = require('is-electron')
+import isElectron from 'is-electron'
 
-const remixLib = require('@remix-project/remix-lib')
+import * as remixLib from '@remix-project/remix-lib'
 
 import { QueryParams } from '@remix-project/remix-lib'
 import { SearchPlugin } from './app/tabs/search'
@@ -82,27 +82,27 @@ import { ScriptRunnerUIPlugin } from './app/tabs/script-runner-ui'
 import { ElectronProvider } from './app/files/electronProvider'
 
 const Storage = remixLib.Storage
-const RemixDProvider = require('./app/files/remixDProvider')
+import RemixDProvider from './app/files/remixDProvider'
-const Config = require('./config')
+import Config from './config'
 
-const FileManager = require('./app/files/fileManager')
+import FileManager from './app/files/fileManager'
 import FileProvider from "./app/files/fileProvider"
 import { appPlatformTypes } from '@remix-ui/app'
 
-const DGitProvider = require('./app/files/dgitProvider')
+import DGitProvider from './app/files/dgitProvider'
-const WorkspaceFileProvider = require('./app/files/workspaceFileProvider')
+import WorkspaceFileProvider from './app/files/workspaceFileProvider'
 
-const PluginManagerComponent = require('./app/components/plugin-manager-component')
+import PluginManagerComponent from './app/components/plugin-manager-component'
 
-const CompileTab = require('./app/tabs/compile-tab')
+import CompileTab from './app/tabs/compile-tab'
-const SettingsTab = require('./app/tabs/settings-tab')
+import SettingsTab from './app/tabs/settings-tab'
-const AnalysisTab = require('./app/tabs/analysis-tab')
+import AnalysisTab from './app/tabs/analysis-tab'
-const { DebuggerTab } = require('./app/tabs/debugger-tab')
+import DebuggerTab from './app/tabs/debugger-tab'
-const TestTab = require('./app/tabs/test-tab')
+import TestTab from './app/tabs/test-tab'
-const FilePanel = require('./app/panels/file-panel')
+import Filepanel from './app/panels/file-panel'
-const Editor = require('./app/editor/editor')
+import Editor from './app/editor/editor'
-const Terminal = require('./app/panels/terminal')
+import Terminal from './app/panels/terminal'
-const { TabProxy } = require('./app/panels/tab-proxy.js')
+import TabProxy from './app/panels/tab-proxy.js'
 
 const _paq = (window._paq = window._paq || [])
 
@@ -115,16 +115,49 @@ export class platformApi {
   }
 }
 
+type Components = {
+  filesProviders: {
+    browser?: any
+    localhost?: any
+    workspace?: any
+    electron?: any
+  }
+}
+
 class AppComponent {
+  appManager: RemixAppManager
+  queryParams: QueryParams
+  private _components: Components
+  panels: any
+  workspace: any
+  engine: RemixEngine
+  matomoConfAlreadySet: any
+  matomoCurrentSetting: any
+  showMatomo: boolean
+  walkthroughService: WalkthroughService
+  platform: 'desktop' | 'web'
+  gistHandler: GistHandler
+  themeModule: ThemeModule
+  localeModule: LocaleModule
+  notification: NotificationPlugin
+  layout: Layout
+  mainview: any
+  menuicons: VerticalIcons
+  sidePanel: SidePanel
+  hiddenPanel: HiddenPanel
+  pinnedPanel: PinnedPanel
+  popupPanel: PopupPanel
+  statusBar: StatusBar
+  settings: SettingsTab
   constructor() {
     const PlatFormAPi = new platformApi()
     Registry.getInstance().put({
       api: PlatFormAPi,
       name: 'platform'
     })
-    this.appManager = new RemixAppManager({})
+    this.appManager = new RemixAppManager()
     this.queryParams = new QueryParams()
-    this._components = {}
+    this._components = {} as Components
     // setup storage
     const configStorage = new Storage('config-v0.8:')
 
@@ -161,7 +194,6 @@ class AppComponent {
       name: 'fileproviders'
     })
 
-
   }
 
   async run() {
@@ -184,7 +216,7 @@ class AppComponent {
     this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
     this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
 
-    let electronTracking = window.electronAPI ? await window.electronAPI.canTrackMatomo() : false
+    const electronTracking = (window as any).electronAPI ? await (window as any).electronAPI.canTrackMatomo() : false
 
     const lastMatomoCheck = window.localStorage.getItem('matomo-analytics-consent')
     const sixMonthsAgo = new Date();
@@ -456,10 +488,10 @@ class AppComponent {
     this.popupPanel = new PopupPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(appManager, this.engine)
-    const filePanel = new FilePanel(appManager, contentImport)
+    const filePanel = new Filepanel(appManager, contentImport)
     this.statusBar = new StatusBar(filePanel, this.menuicons)
     const landingPage = new LandingPage(appManager, this.menuicons, fileManager, filePanel, contentImport)
-    this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor, appManager)
+    this.settings = new SettingsTab(Registry.getInstance().get('config').api, editor)//, appManager)
 
     this.engine.register([this.menuicons, landingPage, this.hiddenPanel, this.sidePanel, this.statusBar, filePanel, pluginManagerComponent, this.settings, this.pinnedPanel, this.popupPanel])
 
@@ -514,7 +546,7 @@ class AppComponent {
 
   async activate() {
     const queryParams = new QueryParams()
-    const params = queryParams.get()
+    const params: any = queryParams.get()
 
     try {
       this.engine.register(await this.appManager.registeredPlugins())
@@ -610,10 +642,11 @@ class AppComponent {
             }
 
             if (params.call) {
-              const callDetails = params.call.split('//')
+              const callDetails: any = params.call.split('//')
               if (callDetails.length > 1) {
                 this.appManager.call('notification', 'toast', `initiating ${callDetails[0]} and calling "${callDetails[1]}" ...`)
                 // @todo(remove the timeout when activatePlugin is on 0.3.0)
+                //@ts-ignore
                 await this.appManager.call(...callDetails).catch(console.error)
               }
             }
@@ -629,6 +662,7 @@ class AppComponent {
 
                   // @todo(remove the timeout when activatePlugin is on 0.3.0)
                   try {
+                    //@ts-ignore
                     await this.appManager.call(...callDetails)
                   } catch (e) {
                     console.error(e)

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

@@ -15,7 +15,7 @@ const profile = {
 export class MainPanel extends AbstractPanel {
   element: HTMLDivElement
   dispatch: React.Dispatch<any> = () => {}
-  constructor(config) {
+  constructor(config = null) {
     super(profile)
     this.element = document.createElement('div')
     this.element.setAttribute('data-id', 'mainPanelPluginsContainer')

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

@@ -19,7 +19,7 @@ const profile = {
   maintainedBy: "Remix"
 }
 
-class PluginManagerComponent extends ViewPlugin {
+export default class PluginManagerComponent extends ViewPlugin {
   constructor (appManager, engine) {
     super(profile)
     this.appManager = appManager

apps/remix-ide/src/app/components/popup-panel.tsx

@@ -24,7 +24,7 @@ export class PopupPanel extends AbstractPanel {
   dispatch: React.Dispatch<any> = () => { }
   appStateDispatch: React.Dispatch<AppAction> = () => { }
 
-  constructor(config) {
+  constructor(config = null) {
     super(profile)
     this.event = new EventEmitter()
   }

apps/remix-ide/src/app/editor/editor.js

@@ -16,7 +16,7 @@ const profile = {
   methods: ['highlight', 'discardHighlight', 'clearAnnotations', 'addLineText', 'discardLineTexts', 'addAnnotation', 'gotoLine', 'revealRange', 'getCursorPosition', 'open', 'addModel','addErrorMarker', 'clearErrorMarkers', 'getText', 'getPositionAt', 'openReadOnly'],
 }
 
-class Editor extends Plugin {
+export default class Editor extends Plugin {
   constructor () {
     super(profile)
 
@@ -601,5 +601,3 @@ class Editor extends Plugin {
     return this.api.getPositionAt(offset)
   }
 }
-
-module.exports = Editor

apps/remix-ide/src/app/files/dgitProvider.ts

@@ -28,7 +28,7 @@ const profile: LibraryProfile = {
     , 'getGitHubUser', 'remotebranches', 'remotecommits', 'repositories', 'getCommitChanges', 'compareBranches'],
   kind: 'file-system'
 }
-class DGitProvider extends Plugin<any, CustomRemixApi> {
+export default class DGitProvider extends Plugin<any, CustomRemixApi> {
   constructor() {
     super(profile)
   }

apps/remix-ide/src/app/files/fileManager.ts

@@ -40,7 +40,7 @@ const errorMsg = {
 const createError = (err) => {
   return new Error(`${errorMsg[err.code]} ${err.message || ''}`)
 }
-class FileManager extends Plugin {
+export default class FileManager extends Plugin {
   mode: string
   openedFiles: any
   editor: any

apps/remix-ide/src/app/files/remixDProvider.js

@@ -1,7 +1,7 @@
 'use strict'
 import FileProvider from "./fileProvider"
 
-module.exports = class RemixDProvider extends FileProvider {
+export default class RemixDProvider extends FileProvider {
   constructor (appManager) {
     super('localhost')
     this._appManager = appManager

apps/remix-ide/src/app/files/workspaceFileProvider.js

@@ -3,7 +3,7 @@
 const EventManager = require('events')
 import FileProvider from "./fileProvider"
 
-class WorkspaceFileProvider extends FileProvider {
+export default class WorkspaceFileProvider extends FileProvider {
   constructor () {
     super('')
     this.workspacesPath = '.workspaces'

apps/remix-ide/src/app/panels/file-panel.js

@@ -55,7 +55,7 @@ const profile = {
   version: packageJson.version,
   maintainedBy: 'Remix'
 }
-module.exports = class Filepanel extends ViewPlugin {
+export default class Filepanel extends ViewPlugin {
   constructor(appManager, contentImport) {
     super(profile)
     this.registry = Registry.getInstance()

apps/remix-ide/src/app/panels/layout.ts

@@ -12,7 +12,7 @@ const profile: Profile = {
 interface panelState {
   active: boolean
   plugin: Plugin
-  minimized: boolean
+  minimized?: boolean
 }
 interface panels {
   tabs: panelState

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -10,7 +10,7 @@ const profile = {
   kind: 'other'
 }
 
-export class TabProxy extends Plugin {
+export default class TabProxy extends Plugin {
   constructor (fileManager, editor) {
     super(profile)
     this.event = new EventEmitter()

apps/remix-ide/src/app/panels/terminal.tsx

@@ -24,7 +24,7 @@ const profile = {
   version: packageJson.version
 }
 
-class Terminal extends Plugin {
+export default class Terminal extends Plugin {
   fileImport: CompilerImports
   event: any
   globalRegistry: Registry
@@ -163,4 +163,3 @@ class Terminal extends Plugin {
   }
 }
 
-module.exports = Terminal

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

@@ -22,7 +22,7 @@ const profile = {
   maintainedBy: 'Remix'
 }
 
-class AnalysisTab extends ViewPlugin {
+export default class AnalysisTab extends ViewPlugin {
   constructor () {
     super(profile)
     this.event = new EventManager()

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

@@ -28,7 +28,7 @@ const profile = {
 // - events: ['compilationFinished'],
 // - methods: ['getCompilationResult']
 
-class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerApi
+export default class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerApi
   constructor (config, fileManager) {
     super(profile)
     this.fileManager = fileManager

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

@@ -22,7 +22,7 @@ const profile = {
   maintainedBy: 'Remix'
 }
 
-export class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
+export default class DebuggerTab extends DebuggerApiMixin(ViewPlugin) {
   constructor () {
     super(profile)
     this.el = document.createElement('div')

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

@@ -27,7 +27,7 @@ const profile = {
   maintainedBy: 'Remix'
 }
 
-module.exports = class SettingsTab extends ViewPlugin {
+export default class SettingsTab extends ViewPlugin {
   config: any = {}
   editor: any
   private _deps: {

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

@@ -22,7 +22,7 @@ const profile = {
   maintainedBy: 'Remix'
 }
 
-module.exports = class TestTab extends ViewPlugin {
+export default class TestTab extends ViewPlugin {
   constructor (fileManager, offsetToLineColumnConverter, filePanel, compileTab, appManager, contentImport) {
     super(profile)
     this.compileTab = compileTab

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

@@ -34,14 +34,11 @@ export class RemixAppManager extends PluginManager {
   event: EventEmitter
   pluginsDirectory: string
   pluginLoader: PluginLoader // eslint-disable-line no-use-before-define
-  permissionHandler: PermissionHandler
   getAll(): import('@remixproject/plugin-utils').Profile<any>[]
   getIds(): string[]
   isDependent(name: any): any
   isRequired(name: any): any
   registeredPlugins(): Promise<any>
-  turnPluginOn(name: string | string[])
-  turnPluginOff(name: string)
 }
 
 export class PluginManagerSettings {
@@ -67,7 +64,7 @@ export type PluginPermissions = {
   }
 }
 
-export class PluginManagerComponent extends ViewPlugin extends Plugin implements PluginBase {
+export class PluginManagerComponent extends ViewPlugin implements PluginBase {
   constructor(appManager: RemixAppManager, engine: Engine)
   appManager: RemixAppManager
   pluginSettings: PluginManagerSettings
@@ -154,14 +151,6 @@ declare class PluginLoader {
   set(plugin: any, actives: any): void
   get(): any
 }
-// eslint-disable-next-line no-redeclare
-export type PluginManagerSettings = {
-  openDialog: () => void
-  onValidation: () => void
-  clearPermission: (from: any, to: any, method: any) => void
-  settings: () => HTMLElement
-  render: () => HTMLElement
-}
 
 export interface DefaultLocalPlugin extends Profile {
   name: string
@@ -198,14 +187,5 @@ export type PluginManagerProfile = Profile & {
   type: 'iframe' | 'ws'
   hash: string
 }
-// eslint-disable-next-line no-redeclare
-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
-}
 
 export { }

libs/remix-ui/workspace/src/lib/types/index.ts

@@ -70,7 +70,7 @@ export interface FilePanelType extends ViewPlugin {
   setWorkspace: ({ name, isLocalhost }, setEvent: boolean) => void
   createWorkspace: (name: string, workspaceTemplateName: string) => void
   renameWorkspace: (oldName: string, newName: string) => void
-  compileContractForUml: (path: string) => void
+  compileContractForUml?: (path: string) => void
   workspaceRenamed: ({ name }) => void
   workspaceCreated: ({ name }) => void
   workspaceDeleted: ({ name }) => void
@@ -81,7 +81,7 @@ export interface FilePanelType extends ViewPlugin {
   appManager: RemixAppManager
   registry?: any // registry
   pluginApi?: any
-  request: {
+  request?: {
     createWorkspace: () => void
     setWorkspace: (workspaceName: string) => void
     createNewFile: () => void
@@ -89,10 +89,10 @@ export interface FilePanelType extends ViewPlugin {
     getCurrentWorkspace: () => void
   } // api request,
   workspaces: any
-  registeredMenuItems: MenuItems // menu items
+  registeredMenuItems?: MenuItems // menu items
-  removedMenuItems: MenuItems
+  removedMenuItems?: MenuItems
-  initialWorkspace: string
+  initialWorkspace?: string
-  resetNewFile: () => void
+  resetNewFile?: () => void
   getWorkspaces: () => string[]
   expandPath: string[]
 }