dynamic imports

Author: Aniket-Engg

apps/remix-ide/src/app.js

@@ -1,16 +1,6 @@
 'use strict'
 import { RunTab, makeUdapp } from './app/udapp'
-import { RemixEngine } from './remixEngine'
 import { RemixAppManager } from './remixAppManager'
-import { ThemeModule } from './app/tabs/theme-module'
-import { NetworkModule } from './app/tabs/network-module'
-import { Web3ProviderModule } from './app/tabs/web3-provider'
-import { SidePanel } from './app/components/side-panel'
-import { HiddenPanel } from './app/components/hidden-panel'
-import { VerticalIcons } from './app/components/vertical-icons'
-import { LandingPage } from './app/ui/landing-page/landing-page'
-import { MainPanel } from './app/components/main-panel'
-import { PermissionHandlerPlugin } from './app/plugins/permission-handler-plugin'
 
 import { WalkthroughService } from './walkthroughService'
 
@@ -95,7 +85,7 @@ class AppComponent {
     const pluginLoader = self.appManager.pluginLoader
     self.panels = {}
     self.workspace = pluginLoader.get()
-    self.engine = new RemixEngine()
+    self.engine = new (await import('./remixEngine')).RemixEngine
     self.engine.register(appManager)
 
     const matomoDomains = {
@@ -126,7 +116,7 @@ class AppComponent {
     // ----------------- gist service ---------------------------------
     self.gistHandler = new GistHandler()
     // ----------------- theme service ---------------------------------
-    self.themeModule = new ThemeModule()
+    self.themeModule = new (await import('./app/tabs/theme-module')).ThemeModule()
     Registry.getInstance().put({ api: self.themeModule, name: 'themeModule' })
 
     // ----------------- editor service ----------------------------
@@ -159,9 +149,9 @@ class AppComponent {
     // service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it
     const fetchAndCompile = new FetchAndCompile()
     // ----------------- network service (resolve network id / name) -----
-    const networkModule = new NetworkModule(blockchain)
+    const networkModule = new (await import('./app/tabs/network-module')).NetworkModule(blockchain)
     // ----------------- represent the current selected web3 provider ----
-    const web3Provider = new Web3ProviderModule(blockchain)
+    const web3Provider = new (await import('./app/tabs/web3-provider')).Web3ProviderModule(blockchain)
     const hardhatProvider = new HardhatProvider(blockchain)
     // ----------------- convert offset to line/column service -----------
     const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
@@ -192,7 +182,7 @@ class AppComponent {
     const configPlugin = new ConfigPlugin()
     self.layout = new Layout()
 
-    const permissionHandler = new PermissionHandlerPlugin()
+    const permissionHandler = new (await import('./app/plugins/permission-handler-plugin')).PermissionHandlerPlugin()
 
     self.engine.register([
       permissionHandler,
@@ -219,22 +209,22 @@ class AppComponent {
     ])
 
     // LAYOUT & SYSTEM VIEWS
-    const appPanel = new MainPanel()
+    const appPanel = new (await import('./app/components/main-panel')).MainPanel()
     Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
     const tabProxy = new TabProxy(fileManager, editor)
     self.engine.register([appPanel, tabProxy])
 
     // those views depend on app_manager
-    self.menuicons = new VerticalIcons()
-    self.sidePanel = new SidePanel()
-    self.hiddenPanel = new HiddenPanel()
+    self.menuicons = new (await import('./app/components/vertical-icons')).VerticalIcons()
+    self.sidePanel = new (await import('./app/components/side-panel')).SidePanel()
+    self.hiddenPanel = new (await import('./app/components/hidden-panel')).HiddenPanel()
 
     const pluginManagerComponent = new PluginManagerComponent(
       appManager,
       self.engine
     )
     const filePanel = new FilePanel(appManager)
-    const landingPage = new LandingPage(
+    const landingPage = new (await import('./app/ui/landing-page/landing-page')).LandingPage(
       appManager,
       self.menuicons,
       fileManager,

apps/remix-ide/src/index.tsx

@@ -6,13 +6,13 @@ import AppComponent from './app'
 const RemixApp = lazy(() => import ('@remix-ui/app'));
 
 const appComponent = new AppComponent()
-appComponent.run()
-
-ReactDOM.render(
-  <React.StrictMode>
-    <Suspense fallback={<div>Loading...</div>}>
-      <RemixApp app={appComponent} />
-    </Suspense>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+appComponent.run().then(() => {
+  ReactDOM.render(
+    <React.StrictMode>
+      <Suspense fallback={<div>Loading...</div>}>
+        <RemixApp app={appComponent} />
+      </Suspense>
+    </React.StrictMode>,
+    document.getElementById('root')
+  )
+})