From 9a06097d8c8b06898a9b09b583df7a77a8189d9c Mon Sep 17 00:00:00 2001 From: aniket-engg Date: Thu, 20 Jan 2022 17:50:02 +0530 Subject: [PATCH 1/3] lazy loading --- apps/remix-ide/src/index.tsx | 8 +++++--- apps/remix-ide/tsconfig.json | 2 -- libs/remix-ui/app/src/index.ts | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/remix-ide/src/index.tsx b/apps/remix-ide/src/index.tsx index 9a20939ed4..3f7f54674b 100644 --- a/apps/remix-ide/src/index.tsx +++ b/apps/remix-ide/src/index.tsx @@ -1,16 +1,18 @@ // eslint-disable-next-line no-use-before-define -import React from 'react' +import React, { Suspense, lazy } from 'react' import ReactDOM from 'react-dom' import AppComponent from './app' // eslint-disable-next-line no-unused-vars -import { RemixApp } from '@remix-ui/app' +const RemixApp = lazy(() => import ('@remix-ui/app')); const appComponent = new AppComponent() appComponent.run() ReactDOM.render( - + Loading...}> + + , document.getElementById('root') ) diff --git a/apps/remix-ide/tsconfig.json b/apps/remix-ide/tsconfig.json index 04d219a926..b2a6956c94 100644 --- a/apps/remix-ide/tsconfig.json +++ b/apps/remix-ide/tsconfig.json @@ -4,10 +4,8 @@ "jsx": "react", "allowJs": true, "esModuleInterop": true, - "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "types": ["node", "jest"], - "module": "es6", "resolveJsonModule": true }, "files": [ diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts index e706f1ad94..13056623bd 100644 --- a/libs/remix-ui/app/src/index.ts +++ b/libs/remix-ui/app/src/index.ts @@ -1,4 +1,4 @@ -export { default as RemixApp } from './lib/remix-app/remix-app' +export { default as default } from './lib/remix-app/remix-app' export { dispatchModalContext } from './lib/remix-app/context/context' export { ModalProvider } from './lib/remix-app/context/provider' export { AppModal } from './lib/remix-app/interface/index' From 819d859f662ed35b414c25ee981b922d4f318930 Mon Sep 17 00:00:00 2001 From: aniket-engg Date: Tue, 25 Jan 2022 14:18:54 +0530 Subject: [PATCH 2/3] dynamic imports --- apps/remix-ide/src/app.js | 30 ++++++++++-------------------- apps/remix-ide/src/index.tsx | 20 ++++++++++---------- 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js index 71360c1e9d..5d0308983f 100644 --- a/apps/remix-ide/src/app.js +++ b/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, diff --git a/apps/remix-ide/src/index.tsx b/apps/remix-ide/src/index.tsx index 3f7f54674b..dd1641e154 100644 --- a/apps/remix-ide/src/index.tsx +++ b/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( - - Loading...}> - - - , - document.getElementById('root') -) +appComponent.run().then(() => { + ReactDOM.render( + + Loading...}> + + + , + document.getElementById('root') + ) +}) From 031dea192dc7b570713285273093ecf356a3792a Mon Sep 17 00:00:00 2001 From: aniket-engg Date: Thu, 27 Jan 2022 13:30:39 +0530 Subject: [PATCH 3/3] splash screen before app loading --- apps/remix-ide/src/index.tsx | 39 +++++++++++++++++++++++++--------- libs/remix-ui/app/src/index.ts | 2 +- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/apps/remix-ide/src/index.tsx b/apps/remix-ide/src/index.tsx index dd1641e154..ff690d4c5e 100644 --- a/apps/remix-ide/src/index.tsx +++ b/apps/remix-ide/src/index.tsx @@ -1,18 +1,37 @@ // eslint-disable-next-line no-use-before-define -import React, { Suspense, lazy } from 'react' -import ReactDOM from 'react-dom' -import AppComponent from './app' +import React from 'react' +import { render } from 'react-dom' // eslint-disable-next-line no-unused-vars -const RemixApp = lazy(() => import ('@remix-ui/app')); +import { RemixApp } from '@remix-ui/app' -const appComponent = new AppComponent() -appComponent.run().then(() => { - ReactDOM.render( +(function () { + render( - Loading...}> - - +
+ + + + + +
+ REMIX IDE +
+
, document.getElementById('root') ) +})() + +import ('./app').then((AppComponent) => { + const appComponent = new AppComponent.default() + appComponent.run().then(() => { + render( + + + , + document.getElementById('root') + ) + }) +}).catch(err => { + console.log('Error on loading Remix:', err) }) diff --git a/libs/remix-ui/app/src/index.ts b/libs/remix-ui/app/src/index.ts index 13056623bd..e706f1ad94 100644 --- a/libs/remix-ui/app/src/index.ts +++ b/libs/remix-ui/app/src/index.ts @@ -1,4 +1,4 @@ -export { default as default } from './lib/remix-app/remix-app' +export { default as RemixApp } from './lib/remix-app/remix-app' export { dispatchModalContext } from './lib/remix-app/context/context' export { ModalProvider } from './lib/remix-app/context/provider' export { AppModal } from './lib/remix-app/interface/index'