bunsenstraat
3 years ago
parent
8cf924de2d
commit
e092445a7e
@ -0,0 +1,521 @@ |
||||
'use strict' |
||||
import { basicLogo } from './app/ui/svgLogo' |
||||
|
||||
import { RunTab, makeUdapp } from './app/udapp' |
||||
|
||||
import PanelsResize from './lib/panels-resize' |
||||
import { RemixEngine } from './remixEngine' |
||||
import { RemixAppManager } from './remixAppManager' |
||||
import { FramingService } from './framingService' |
||||
import { WalkthroughService } from './walkthroughService' |
||||
import { MainView } from './app/panels/main-view' |
||||
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 { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports } from '@remix-project/core-plugin' |
||||
|
||||
import migrateFileSystem from './migrateFileSystem' |
||||
|
||||
const isElectron = require('is-electron') |
||||
const csjs = require('csjs-inject') |
||||
const yo = require('yo-yo') |
||||
const remixLib = require('@remix-project/remix-lib') |
||||
const registry = require('./global/registry') |
||||
|
||||
const QueryParams = require('./lib/query-params') |
||||
const Storage = remixLib.Storage |
||||
const RemixDProvider = require('./app/files/remixDProvider') |
||||
const HardhatProvider = require('./app/tabs/hardhat-provider') |
||||
const Config = require('./config') |
||||
const modalDialogCustom = require('./app/ui/modal-dialog-custom') |
||||
const modalDialog = require('./app/ui/modaldialog') |
||||
const FileManager = require('./app/files/fileManager') |
||||
const FileProvider = require('./app/files/fileProvider') |
||||
const DGitProvider = require('./app/files/dgitProvider') |
||||
const WorkspaceFileProvider = require('./app/files/workspaceFileProvider') |
||||
const toolTip = require('./app/ui/tooltip') |
||||
|
||||
const Blockchain = require('./blockchain/blockchain.js') |
||||
|
||||
const PluginManagerComponent = require('./app/components/plugin-manager-component') |
||||
|
||||
const CompileTab = require('./app/tabs/compile-tab') |
||||
const SettingsTab = require('./app/tabs/settings-tab') |
||||
const AnalysisTab = require('./app/tabs/analysis-tab') |
||||
const { DebuggerTab } = require('./app/tabs/debugger-tab') |
||||
const TestTab = require('./app/tabs/test-tab') |
||||
const FilePanel = require('./app/panels/file-panel') |
||||
const Editor = require('./app/editor/editor') |
||||
const Terminal = require('./app/panels/terminal') |
||||
const ContextualListener = require('./app/editor/contextualListener') |
||||
const _paq = window._paq = window._paq || [] |
||||
|
||||
const css = csjs` |
||||
html { box-sizing: border-box; } |
||||
*, *:before, *:after { box-sizing: inherit; } |
||||
body { |
||||
/* font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; */ |
||||
font-size : .8rem; |
||||
} |
||||
pre { |
||||
overflow-x: auto; |
||||
} |
||||
.remixIDE { |
||||
width : 100vw; |
||||
height : 100vh; |
||||
overflow : hidden; |
||||
flex-direction : row; |
||||
display : flex; |
||||
} |
||||
.mainpanel { |
||||
display : flex; |
||||
flex-direction : column; |
||||
overflow : hidden; |
||||
flex : 1; |
||||
} |
||||
.iconpanel { |
||||
display : flex; |
||||
flex-direction : column; |
||||
overflow : hidden; |
||||
width : 50px; |
||||
user-select : none; |
||||
} |
||||
.sidepanel { |
||||
display : flex; |
||||
flex-direction : row-reverse; |
||||
width : 320px; |
||||
} |
||||
.highlightcode { |
||||
position : absolute; |
||||
z-index : 20; |
||||
background-color : var(--info); |
||||
} |
||||
.highlightcode_fullLine { |
||||
position : absolute; |
||||
z-index : 20; |
||||
background-color : var(--info); |
||||
opacity : 0.5; |
||||
} |
||||
.centered { |
||||
position : fixed; |
||||
top : 20%; |
||||
left : 45%; |
||||
width : 200px; |
||||
height : 200px; |
||||
} |
||||
.centered svg path { |
||||
fill: var(--secondary); |
||||
} |
||||
.centered svg polygon { |
||||
fill : var(--secondary); |
||||
} |
||||
.onboarding { |
||||
color : var(--text-info); |
||||
background-color : var(--info); |
||||
} |
||||
.matomoBtn { |
||||
width : 100px; |
||||
} |
||||
` |
||||
|
||||
class App { |
||||
constructor (api = {}, events = {}, opts = {}) { |
||||
var self = this |
||||
self.appManager = new RemixAppManager({}) |
||||
self._components = {} |
||||
self._view = {} |
||||
self._view.splashScreen = yo` |
||||
<div class=${css.centered}> |
||||
${basicLogo()} |
||||
<div class="info-secondary" style="text-align:center"> |
||||
REMIX IDE |
||||
</div> |
||||
</div> |
||||
` |
||||
document.body.appendChild(self._view.splashScreen) |
||||
|
||||
// setup storage
|
||||
const configStorage = new Storage('config-v0.8:') |
||||
|
||||
// load app config
|
||||
const config = new Config(configStorage) |
||||
registry.put({ api: config, name: 'config' }) |
||||
|
||||
// load file system
|
||||
self._components.filesProviders = {} |
||||
self._components.filesProviders.browser = new FileProvider('browser') |
||||
registry.put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' }) |
||||
self._components.filesProviders.localhost = new RemixDProvider(self.appManager) |
||||
registry.put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' }) |
||||
self._components.filesProviders.workspace = new WorkspaceFileProvider() |
||||
registry.put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' }) |
||||
|
||||
registry.put({ api: self._components.filesProviders, name: 'fileproviders' }) |
||||
|
||||
migrateFileSystem(self._components.filesProviders.browser) |
||||
} |
||||
|
||||
init () { |
||||
this.run().catch(console.error) |
||||
} |
||||
|
||||
render () { |
||||
var self = this |
||||
if (self._view.el) return self._view.el |
||||
// not resizable
|
||||
self._view.iconpanel = yo` |
||||
<div id="icon-panel" data-id="remixIdeIconPanel" class="${css.iconpanel} bg-light"> |
||||
${''} |
||||
</div> |
||||
` |
||||
|
||||
// center panel, resizable
|
||||
self._view.sidepanel = yo` |
||||
<div id="side-panel" data-id="remixIdeSidePanel" style="min-width: 320px;" class="${css.sidepanel} border-right border-left"> |
||||
${''} |
||||
</div> |
||||
` |
||||
|
||||
// handle the editor + terminal
|
||||
self._view.mainpanel = yo` |
||||
<div id="main-panel" data-id="remixIdeMainPanel" class=${css.mainpanel}> |
||||
${''} |
||||
</div> |
||||
` |
||||
|
||||
self._components.resizeFeature = new PanelsResize(self._view.sidepanel) |
||||
|
||||
self._view.el = yo` |
||||
<div style="visibility:hidden" class=${css.remixIDE} data-id="remixIDE"> |
||||
${self._view.iconpanel} |
||||
${self._view.sidepanel} |
||||
${self._components.resizeFeature.render()} |
||||
${self._view.mainpanel} |
||||
</div> |
||||
` |
||||
return self._view.el |
||||
} |
||||
|
||||
async run () { |
||||
var self = this |
||||
|
||||
// check the origin and warn message
|
||||
if (window.location.hostname === 'yann300.github.io') { |
||||
modalDialogCustom.alert('This UNSTABLE ALPHA branch of Remix has been moved to http://ethereum.github.io/remix-live-alpha.') |
||||
} else if (window.location.hostname === 'remix-alpha.ethereum.org' || |
||||
(window.location.hostname === 'ethereum.github.io' && window.location.pathname.indexOf('/remix-live-alpha') === 0)) { |
||||
modalDialogCustom.alert('Welcome to the Remix alpha instance. Please use it to try out latest features. But use preferably https://remix.ethereum.org for any production work.') |
||||
} else if (window.location.protocol.indexOf('http') === 0 && |
||||
window.location.hostname !== 'remix.ethereum.org' && |
||||
window.location.hostname !== 'localhost' && |
||||
window.location.hostname !== '127.0.0.1') { |
||||
modalDialogCustom.alert(`The Remix IDE has moved to http://remix.ethereum.org.\n |
||||
This instance of Remix you are visiting WILL NOT BE UPDATED.\n |
||||
Please make a backup of your contracts and start using http://remix.ethereum.org`)
|
||||
} |
||||
if (window.location.protocol.indexOf('https') === 0) { |
||||
toolTip('You are using an `https` connection. Please switch to `http` if you are using Remix against an `http Web3 provider` or allow Mixed Content in your browser.') |
||||
} |
||||
|
||||
const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080'] |
||||
// workaround for Electron support
|
||||
if (!isElectron() && !hosts.includes(window.location.host)) { |
||||
// Oops! Accidentally trigger refresh or bookmark.
|
||||
window.onbeforeunload = function () { |
||||
return 'Are you sure you want to leave?' |
||||
} |
||||
} |
||||
|
||||
// APP_MANAGER
|
||||
const appManager = self.appManager |
||||
const pluginLoader = appManager.pluginLoader |
||||
const workspace = pluginLoader.get() |
||||
const engine = new RemixEngine() |
||||
engine.register(appManager) |
||||
|
||||
// SERVICES
|
||||
// ----------------- theme service ---------------------------------
|
||||
const themeModule = new ThemeModule(registry) |
||||
registry.put({ api: themeModule, name: 'themeModule' }) |
||||
themeModule.initTheme(() => { |
||||
setTimeout(() => { |
||||
document.body.removeChild(self._view.splashScreen) |
||||
self._view.el.style.visibility = 'visible' |
||||
}, 1500) |
||||
}) |
||||
// ----------------- editor service ----------------------------
|
||||
const editor = new Editor() // wrapper around ace editor
|
||||
registry.put({ api: editor, name: 'editor' }) |
||||
editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile()) |
||||
|
||||
// ----------------- fileManager service ----------------------------
|
||||
const fileManager = new FileManager(editor, appManager) |
||||
registry.put({ api: fileManager, name: 'filemanager' }) |
||||
// ----------------- dGit provider ---------------------------------
|
||||
const dGitProvider = new DGitProvider() |
||||
|
||||
// ----------------- import content service ------------------------
|
||||
const contentImport = new CompilerImports() |
||||
|
||||
const blockchain = new Blockchain(registry.get('config').api) |
||||
|
||||
// ----------------- compilation metadata generation service ---------
|
||||
const compilerMetadataGenerator = new CompilerMetadata() |
||||
// ----------------- compilation result service (can keep track of compilation results) ----------------------------
|
||||
const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name)
|
||||
registry.put({ api: compilersArtefacts, name: 'compilersartefacts' }) |
||||
|
||||
// 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) |
||||
// ----------------- represent the current selected web3 provider ----
|
||||
const web3Provider = new Web3ProviderModule(blockchain) |
||||
const hardhatProvider = new HardhatProvider(blockchain) |
||||
// ----------------- convert offset to line/column service -----------
|
||||
const offsetToLineColumnConverter = new OffsetToLineColumnConverter() |
||||
registry.put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' }) |
||||
|
||||
// -------------------Terminal----------------------------------------
|
||||
makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl)) |
||||
const terminal = new Terminal( |
||||
{ appManager, blockchain }, |
||||
{ |
||||
getPosition: (event) => { |
||||
var limitUp = 36 |
||||
var limitDown = 20 |
||||
var height = window.innerHeight |
||||
var newpos = (event.pageY < limitUp) ? limitUp : event.pageY |
||||
newpos = (newpos < height - limitDown) ? newpos : height - limitDown |
||||
return height - newpos |
||||
} |
||||
} |
||||
) |
||||
const contextualListener = new ContextualListener({ editor }) |
||||
|
||||
engine.register([ |
||||
blockchain, |
||||
contentImport, |
||||
themeModule, |
||||
editor, |
||||
fileManager, |
||||
compilerMetadataGenerator, |
||||
compilersArtefacts, |
||||
networkModule, |
||||
offsetToLineColumnConverter, |
||||
contextualListener, |
||||
terminal, |
||||
web3Provider, |
||||
fetchAndCompile, |
||||
dGitProvider, |
||||
hardhatProvider |
||||
]) |
||||
|
||||
// LAYOUT & SYSTEM VIEWS
|
||||
const appPanel = new MainPanel() |
||||
const mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal) |
||||
registry.put({ api: mainview, name: 'mainview' }) |
||||
|
||||
engine.register([ |
||||
appPanel, |
||||
mainview.tabProxy |
||||
]) |
||||
|
||||
// those views depend on app_manager
|
||||
const menuicons = new VerticalIcons(appManager) |
||||
const sidePanel = new SidePanel(appManager, menuicons) |
||||
const hiddenPanel = new HiddenPanel() |
||||
const pluginManagerComponent = new PluginManagerComponent(appManager, engine) |
||||
const filePanel = new FilePanel(appManager) |
||||
const landingPage = new LandingPage(appManager, menuicons, fileManager, filePanel, contentImport) |
||||
const settings = new SettingsTab( |
||||
registry.get('config').api, |
||||
editor, |
||||
appManager |
||||
) |
||||
|
||||
// adding Views to the DOM
|
||||
self._view.mainpanel.appendChild(mainview.render()) |
||||
self._view.iconpanel.appendChild(menuicons.render()) |
||||
self._view.sidepanel.appendChild(sidePanel.render()) |
||||
document.body.appendChild(hiddenPanel.render()) // Hidden Panel is display none, it can be directly on body
|
||||
|
||||
engine.register([ |
||||
menuicons, |
||||
landingPage, |
||||
hiddenPanel, |
||||
sidePanel, |
||||
filePanel, |
||||
pluginManagerComponent, |
||||
settings |
||||
]) |
||||
|
||||
const queryParams = new QueryParams() |
||||
const params = queryParams.get() |
||||
|
||||
const onAcceptMatomo = () => { |
||||
_paq.push(['forgetUserOptOut']) |
||||
// @TODO remove next line when https://github.com/matomo-org/matomo/commit/9e10a150585522ca30ecdd275007a882a70c6df5 is used
|
||||
document.cookie = 'mtm_consent_removed=; expires=Thu, 01 Jan 1970 00:00:01 GMT;' |
||||
settings.updateMatomoAnalyticsChoice(true) |
||||
const el = document.getElementById('modal-dialog') |
||||
el.parentElement.removeChild(el) |
||||
startWalkthroughService() |
||||
} |
||||
const onDeclineMatomo = () => { |
||||
settings.updateMatomoAnalyticsChoice(false) |
||||
_paq.push(['optUserOut']) |
||||
const el = document.getElementById('modal-dialog') |
||||
el.parentElement.removeChild(el) |
||||
startWalkthroughService() |
||||
} |
||||
|
||||
const startWalkthroughService = () => { |
||||
const walkthroughService = new WalkthroughService(localStorage) |
||||
if (!params.code && !params.url && !params.minimizeterminal && !params.gist && !params.minimizesidepanel) { |
||||
walkthroughService.start() |
||||
} |
||||
} |
||||
|
||||
// Ask to opt in to Matomo for remix, remix-alpha and remix-beta
|
||||
const matomoDomains = { |
||||
'remix-alpha.ethereum.org': 27, |
||||
'remix-beta.ethereum.org': 25, |
||||
'remix.ethereum.org': 23 |
||||
} |
||||
if (matomoDomains[window.location.hostname] && !registry.get('config').api.exists('settings/matomo-analytics')) { |
||||
modalDialog( |
||||
'Help us to improve Remix IDE', |
||||
yo` |
||||
<div> |
||||
<p>An Opt-in version of <a href="https://matomo.org" target="_blank">Matomo</a>, an open source data analytics platform is being used to improve Remix IDE.</p> |
||||
<p>We realize that our users have sensitive information in their code and that their privacy - your privacy - must be protected.</p> |
||||
<p>All data collected through Matomo is stored on our own server - no data is ever given to third parties. Our analytics reports are public: <a href="https://matomo.ethereum.org/index.php?module=MultiSites&action=index&idSite=23&period=day&date=yesterday" target="_blank">take a look</a>.</p> |
||||
<p>We do not collect nor store any personally identifiable information (PII).</p> |
||||
<p>For more info, see: <a href="https://medium.com/p/66ef69e14931/" target="_blank">Matomo Analyitcs on Remix iDE</a>.</p> |
||||
<p>You can change your choice in the Settings panel anytime.</p> |
||||
<div class="d-flex justify-content-around pt-3 border-top"> |
||||
<button class="btn btn-primary ${css.matomoBtn}" onclick=${() => onAcceptMatomo()}>Sure</button> |
||||
<button class="btn btn-secondary ${css.matomoBtn}" onclick=${() => onDeclineMatomo()}>Decline</button> |
||||
</div> |
||||
</div>`, |
||||
{ |
||||
label: '', |
||||
fn: null |
||||
}, |
||||
{ |
||||
label: '', |
||||
fn: null |
||||
} |
||||
) |
||||
} else { |
||||
startWalkthroughService() |
||||
} |
||||
|
||||
// CONTENT VIEWS & DEFAULT PLUGINS
|
||||
const compileTab = new CompileTab(registry.get('config').api, registry.get('filemanager').api) |
||||
const run = new RunTab( |
||||
blockchain, |
||||
registry.get('config').api, |
||||
registry.get('filemanager').api, |
||||
registry.get('editor').api, |
||||
filePanel, |
||||
registry.get('compilersartefacts').api, |
||||
networkModule, |
||||
mainview, |
||||
registry.get('fileproviders/browser').api |
||||
) |
||||
const analysis = new AnalysisTab(registry) |
||||
const debug = new DebuggerTab() |
||||
const test = new TestTab( |
||||
registry.get('filemanager').api, |
||||
registry.get('offsettolinecolumnconverter').api, |
||||
filePanel, |
||||
compileTab, |
||||
appManager, |
||||
contentImport |
||||
) |
||||
|
||||
engine.register([ |
||||
compileTab, |
||||
run, |
||||
debug, |
||||
analysis, |
||||
test, |
||||
filePanel.remixdHandle, |
||||
filePanel.gitHandle, |
||||
filePanel.hardhatHandle, |
||||
filePanel.slitherHandle |
||||
]) |
||||
|
||||
if (isElectron()) { |
||||
appManager.activatePlugin('remixd') |
||||
} |
||||
|
||||
try { |
||||
engine.register(await appManager.registeredPlugins()) |
||||
} catch (e) { |
||||
console.log('couldn\'t register iframe plugins', e.message) |
||||
} |
||||
|
||||
await appManager.activatePlugin(['editor']) |
||||
await appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter']) |
||||
await appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs']) |
||||
await appManager.activatePlugin(['sidePanel']) // activating host plugin separately
|
||||
await appManager.activatePlugin(['home']) |
||||
await appManager.activatePlugin(['settings']) |
||||
await appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport']) |
||||
|
||||
appManager.on('filePanel', 'workspaceInitializationCompleted', async () => { |
||||
await appManager.registerContextMenuItems() |
||||
}) |
||||
await appManager.activatePlugin(['filePanel']) |
||||
// Set workspace after initial activation
|
||||
appManager.on('editor', 'editorMounted', () => { |
||||
if (Array.isArray(workspace)) { |
||||
appManager.activatePlugin(workspace).then(async () => { |
||||
try { |
||||
if (params.deactivate) { |
||||
await appManager.deactivatePlugin(params.deactivate.split(',')) |
||||
} |
||||
} catch (e) { |
||||
console.log(e) |
||||
} |
||||
|
||||
if (params.code) { |
||||
// if code is given in url we focus on solidity plugin
|
||||
menuicons.select('solidity') |
||||
} else { |
||||
// If plugins are loaded from the URL params, we focus on the last one.
|
||||
if (pluginLoader.current === 'queryParams' && workspace.length > 0) menuicons.select(workspace[workspace.length - 1]) |
||||
} |
||||
|
||||
if (params.call) { |
||||
const callDetails = params.call.split('//') |
||||
if (callDetails.length > 1) { |
||||
toolTip(`initiating ${callDetails[0]} ...`) |
||||
// @todo(remove the timeout when activatePlugin is on 0.3.0)
|
||||
appManager.call(...callDetails).catch(console.error) |
||||
} |
||||
} |
||||
}).catch(console.error) |
||||
} |
||||
}) |
||||
// activate solidity plugin
|
||||
appManager.activatePlugin(['solidity', 'udapp']) |
||||
|
||||
// Load and start the service who manager layout and frame
|
||||
const framingService = new FramingService(sidePanel, menuicons, mainview, this._components.resizeFeature) |
||||
|
||||
if (params.embed) framingService.embed() |
||||
framingService.start(params) |
||||
} |
||||
} |
||||
|
||||
module.exports = App |
||||
@ -0,0 +1,307 @@ |
||||
'use strict' |
||||
import { RunTab, makeUdapp } from './app/udapp' |
||||
import { RemixEngine } from './remixEngine' |
||||
import { RemixAppManager } from './remixAppManager' |
||||
import { MainView } from './app/panels/main-view' |
||||
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 { WalkthroughService } from './walkthroughService' |
||||
|
||||
import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports } from '@remix-project/core-plugin' |
||||
|
||||
import migrateFileSystem from './migrateFileSystem' |
||||
|
||||
const isElectron = require('is-electron') |
||||
|
||||
const remixLib = require('@remix-project/remix-lib') |
||||
const registry = require('./global/registry') |
||||
|
||||
const QueryParams = require('./lib/query-params') |
||||
const Storage = remixLib.Storage |
||||
const RemixDProvider = require('./app/files/remixDProvider') |
||||
const HardhatProvider = require('./app/tabs/hardhat-provider') |
||||
const Config = require('./config') |
||||
|
||||
const FileManager = require('./app/files/fileManager') |
||||
const FileProvider = require('./app/files/fileProvider') |
||||
const DGitProvider = require('./app/files/dgitProvider') |
||||
const WorkspaceFileProvider = require('./app/files/workspaceFileProvider') |
||||
const toolTip = require('./app/ui/tooltip') |
||||
|
||||
const Blockchain = require('./blockchain/blockchain.js') |
||||
|
||||
const PluginManagerComponent = require('./app/components/plugin-manager-component') |
||||
|
||||
const CompileTab = require('./app/tabs/compile-tab') |
||||
const SettingsTab = require('./app/tabs/settings-tab') |
||||
const AnalysisTab = require('./app/tabs/analysis-tab') |
||||
const { DebuggerTab } = require('./app/tabs/debugger-tab') |
||||
const TestTab = require('./app/tabs/test-tab') |
||||
const FilePanel = require('./app/panels/file-panel') |
||||
const Editor = require('./app/editor/editor') |
||||
const Terminal = require('./app/panels/terminal') |
||||
const ContextualListener = require('./app/editor/contextualListener') |
||||
|
||||
class AppComponent { |
||||
constructor (api = {}, events = {}, opts = {}) { |
||||
const self = this |
||||
self.appManager = new RemixAppManager({}) |
||||
self._components = {} |
||||
// setup storage
|
||||
const configStorage = new Storage('config-v0.8:') |
||||
|
||||
// load app config
|
||||
const config = new Config(configStorage) |
||||
registry.put({ api: config, name: 'config' }) |
||||
|
||||
// load file system
|
||||
self._components.filesProviders = {} |
||||
self._components.filesProviders.browser = new FileProvider('browser') |
||||
registry.put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' }) |
||||
self._components.filesProviders.localhost = new RemixDProvider(self.appManager) |
||||
registry.put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' }) |
||||
self._components.filesProviders.workspace = new WorkspaceFileProvider() |
||||
registry.put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' }) |
||||
|
||||
registry.put({ api: self._components.filesProviders, name: 'fileproviders' }) |
||||
|
||||
migrateFileSystem(self._components.filesProviders.browser) |
||||
} |
||||
|
||||
async run () { |
||||
const self = this |
||||
// APP_MANAGER
|
||||
const appManager = self.appManager |
||||
const pluginLoader = self.appManager.pluginLoader |
||||
self.workspace = pluginLoader.get() |
||||
self.engine = new RemixEngine() |
||||
self.engine.register(appManager) |
||||
|
||||
// SERVICES
|
||||
// ----------------- theme service ---------------------------------
|
||||
const themeModule = new ThemeModule(registry) |
||||
registry.put({ api: themeModule, name: 'themeModule' }) |
||||
themeModule.initTheme(() => { |
||||
setTimeout(() => { |
||||
// document.body.removeChild(self._view.splashScreen)
|
||||
// self._view.el.style.visibility = 'visible'
|
||||
}, 1500) |
||||
}) |
||||
// ----------------- editor service ----------------------------
|
||||
const editor = new Editor() // wrapper around ace editor
|
||||
registry.put({ api: editor, name: 'editor' }) |
||||
editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile()) |
||||
|
||||
// ----------------- fileManager service ----------------------------
|
||||
const fileManager = new FileManager(editor, appManager) |
||||
registry.put({ api: fileManager, name: 'filemanager' }) |
||||
// ----------------- dGit provider ---------------------------------
|
||||
const dGitProvider = new DGitProvider() |
||||
|
||||
// ----------------- import content service ------------------------
|
||||
const contentImport = new CompilerImports() |
||||
|
||||
const blockchain = new Blockchain(registry.get('config').api) |
||||
|
||||
// ----------------- compilation metadata generation service ---------
|
||||
const compilerMetadataGenerator = new CompilerMetadata() |
||||
// ----------------- compilation result service (can keep track of compilation results) ----------------------------
|
||||
const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name)
|
||||
registry.put({ api: compilersArtefacts, name: 'compilersartefacts' }) |
||||
|
||||
// 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) |
||||
// ----------------- represent the current selected web3 provider ----
|
||||
const web3Provider = new Web3ProviderModule(blockchain) |
||||
const hardhatProvider = new HardhatProvider(blockchain) |
||||
// ----------------- convert offset to line/column service -----------
|
||||
const offsetToLineColumnConverter = new OffsetToLineColumnConverter() |
||||
registry.put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' }) |
||||
|
||||
// -------------------Terminal----------------------------------------
|
||||
makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl)) |
||||
const terminal = new Terminal( |
||||
{ appManager, blockchain }, |
||||
{ |
||||
getPosition: (event) => { |
||||
var limitUp = 36 |
||||
var limitDown = 20 |
||||
var height = window.innerHeight |
||||
var newpos = (event.pageY < limitUp) ? limitUp : event.pageY |
||||
newpos = (newpos < height - limitDown) ? newpos : height - limitDown |
||||
return height - newpos |
||||
} |
||||
} |
||||
) |
||||
const contextualListener = new ContextualListener({ editor }) |
||||
|
||||
self.engine.register([ |
||||
blockchain, |
||||
contentImport, |
||||
themeModule, |
||||
editor, |
||||
fileManager, |
||||
compilerMetadataGenerator, |
||||
compilersArtefacts, |
||||
networkModule, |
||||
offsetToLineColumnConverter, |
||||
contextualListener, |
||||
terminal, |
||||
web3Provider, |
||||
fetchAndCompile, |
||||
dGitProvider, |
||||
hardhatProvider |
||||
]) |
||||
|
||||
// LAYOUT & SYSTEM VIEWS
|
||||
const appPanel = new MainPanel() |
||||
self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal) |
||||
registry.put({ api: self.mainview, name: 'mainview' }) |
||||
|
||||
self.engine.register([ |
||||
appPanel, |
||||
self.mainview.tabProxy |
||||
]) |
||||
|
||||
// those views depend on app_manager
|
||||
self.menuicons = new VerticalIcons(appManager) |
||||
self.sidePanel = new SidePanel(appManager, self.menuicons) |
||||
self.hiddenPanel = new HiddenPanel() |
||||
const pluginManagerComponent = new PluginManagerComponent(appManager, self.engine) |
||||
const filePanel = new FilePanel(appManager) |
||||
const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport) |
||||
const settings = new SettingsTab( |
||||
registry.get('config').api, |
||||
editor, |
||||
appManager |
||||
) |
||||
|
||||
self.engine.register([ |
||||
self.menuicons, |
||||
landingPage, |
||||
self.hiddenPanel, |
||||
self.sidePanel, |
||||
filePanel, |
||||
pluginManagerComponent, |
||||
settings |
||||
]) |
||||
|
||||
// CONTENT VIEWS & DEFAULT PLUGINS
|
||||
const compileTab = new CompileTab(registry.get('config').api, registry.get('filemanager').api) |
||||
const run = new RunTab( |
||||
blockchain, |
||||
registry.get('config').api, |
||||
registry.get('filemanager').api, |
||||
registry.get('editor').api, |
||||
filePanel, |
||||
registry.get('compilersartefacts').api, |
||||
networkModule, |
||||
self.mainview, |
||||
registry.get('fileproviders/browser').api |
||||
) |
||||
const analysis = new AnalysisTab(registry) |
||||
const debug = new DebuggerTab() |
||||
const test = new TestTab( |
||||
registry.get('filemanager').api, |
||||
registry.get('offsettolinecolumnconverter').api, |
||||
filePanel, |
||||
compileTab, |
||||
appManager, |
||||
contentImport |
||||
) |
||||
|
||||
self.engine.register([ |
||||
compileTab, |
||||
run, |
||||
debug, |
||||
analysis, |
||||
test, |
||||
filePanel.remixdHandle, |
||||
filePanel.gitHandle, |
||||
filePanel.hardhatHandle, |
||||
filePanel.slitherHandle |
||||
]) |
||||
} |
||||
|
||||
async activate () { |
||||
const queryParams = new QueryParams() |
||||
const params = queryParams.get() |
||||
const self = this |
||||
|
||||
if (isElectron()) { |
||||
self.appManager.activatePlugin('remixd') |
||||
} |
||||
|
||||
try { |
||||
self.engine.register(await self.appManager.registeredPlugins()) |
||||
} catch (e) { |
||||
console.log('couldn\'t register iframe plugins', e.message) |
||||
} |
||||
|
||||
await self.appManager.activatePlugin(['editor']) |
||||
await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter']) |
||||
await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs']) |
||||
await self.appManager.activatePlugin(['sidePanel']) // activating host plugin separately
|
||||
await self.appManager.activatePlugin(['home']) |
||||
await self.appManager.activatePlugin(['settings']) |
||||
await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport']) |
||||
|
||||
self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => { |
||||
await self.appManager.registerContextMenuItems() |
||||
}) |
||||
|
||||
const startWalkthroughService = () => { |
||||
const walkthroughService = new WalkthroughService(localStorage) |
||||
if (!params.code && !params.url && !params.minimizeterminal && !params.gist && !params.minimizesidepanel) { |
||||
walkthroughService.start() |
||||
} |
||||
} |
||||
|
||||
startWalkthroughService() |
||||
|
||||
await self.appManager.activatePlugin(['filePanel']) |
||||
// Set workspace after initial activation
|
||||
self.appManager.on('editor', 'editorMounted', () => { |
||||
if (Array.isArray(self.workspace)) { |
||||
self.appManager.activatePlugin(self.workspace).then(async () => { |
||||
try { |
||||
if (params.deactivate) { |
||||
await self.appManager.deactivatePlugin(params.deactivate.split(',')) |
||||
} |
||||
} catch (e) { |
||||
console.log(e) |
||||
} |
||||
if (params.code) { |
||||
// if code is given in url we focus on solidity plugin
|
||||
self.menuicons.select('solidity') |
||||
} else { |
||||
// If plugins are loaded from the URL params, we focus on the last one.
|
||||
if (self.appManager.pluginLoader.current === 'queryParams' && self.workspace.length > 0) self.menuicons.select(self.workspace[self.workspace.length - 1]) |
||||
} |
||||
|
||||
if (params.call) { |
||||
const callDetails = params.call.split('//') |
||||
if (callDetails.length > 1) { |
||||
toolTip(`initiating ${callDetails[0]} ...`) |
||||
// @todo(remove the timeout when activatePlugin is on 0.3.0)
|
||||
self.appManager.call(...callDetails).catch(console.error) |
||||
} |
||||
} |
||||
}).catch(console.error) |
||||
} |
||||
}) |
||||
// activate solidity plugin
|
||||
self.appManager.activatePlugin(['solidity', 'udapp']) |
||||
} |
||||
} |
||||
|
||||
module.exports = AppComponent |
||||
@ -0,0 +1,4 @@ |
||||
{ |
||||
"presets": ["@nrwl/react/babel"], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,248 @@ |
||||
{ |
||||
"rules": { |
||||
"array-callback-return": "warn", |
||||
"dot-location": ["warn", "property"], |
||||
"eqeqeq": ["warn", "smart"], |
||||
"new-parens": "warn", |
||||
"no-caller": "warn", |
||||
"no-cond-assign": ["warn", "except-parens"], |
||||
"no-const-assign": "warn", |
||||
"no-control-regex": "warn", |
||||
"no-delete-var": "warn", |
||||
"no-dupe-args": "warn", |
||||
"no-dupe-keys": "warn", |
||||
"no-duplicate-case": "warn", |
||||
"no-empty-character-class": "warn", |
||||
"no-empty-pattern": "warn", |
||||
"no-eval": "warn", |
||||
"no-ex-assign": "warn", |
||||
"no-extend-native": "warn", |
||||
"no-extra-bind": "warn", |
||||
"no-extra-label": "warn", |
||||
"no-fallthrough": "warn", |
||||
"no-func-assign": "warn", |
||||
"no-implied-eval": "warn", |
||||
"no-invalid-regexp": "warn", |
||||
"no-iterator": "warn", |
||||
"no-label-var": "warn", |
||||
"no-labels": ["warn", { "allowLoop": true, "allowSwitch": false }], |
||||
"no-lone-blocks": "warn", |
||||
"no-loop-func": "warn", |
||||
"no-mixed-operators": [ |
||||
"warn", |
||||
{ |
||||
"groups": [ |
||||
["&", "|", "^", "~", "<<", ">>", ">>>"], |
||||
["==", "!=", "===", "!==", ">", ">=", "<", "<="], |
||||
["&&", "||"], |
||||
["in", "instanceof"] |
||||
], |
||||
"allowSamePrecedence": false |
||||
} |
||||
], |
||||
"no-multi-str": "warn", |
||||
"no-native-reassign": "warn", |
||||
"no-negated-in-lhs": "warn", |
||||
"no-new-func": "warn", |
||||
"no-new-object": "warn", |
||||
"no-new-symbol": "warn", |
||||
"no-new-wrappers": "warn", |
||||
"no-obj-calls": "warn", |
||||
"no-octal": "warn", |
||||
"no-octal-escape": "warn", |
||||
"no-redeclare": "warn", |
||||
"no-regex-spaces": "warn", |
||||
"no-restricted-syntax": ["warn", "WithStatement"], |
||||
"no-script-url": "warn", |
||||
"no-self-assign": "warn", |
||||
"no-self-compare": "warn", |
||||
"no-sequences": "warn", |
||||
"no-shadow-restricted-names": "warn", |
||||
"no-sparse-arrays": "warn", |
||||
"no-template-curly-in-string": "warn", |
||||
"no-this-before-super": "warn", |
||||
"no-throw-literal": "warn", |
||||
"no-restricted-globals": [ |
||||
"error", |
||||
"addEventListener", |
||||
"blur", |
||||
"close", |
||||
"closed", |
||||
"confirm", |
||||
"defaultStatus", |
||||
"defaultstatus", |
||||
"event", |
||||
"external", |
||||
"find", |
||||
"focus", |
||||
"frameElement", |
||||
"frames", |
||||
"history", |
||||
"innerHeight", |
||||
"innerWidth", |
||||
"length", |
||||
"location", |
||||
"locationbar", |
||||
"menubar", |
||||
"moveBy", |
||||
"moveTo", |
||||
"name", |
||||
"onblur", |
||||
"onerror", |
||||
"onfocus", |
||||
"onload", |
||||
"onresize", |
||||
"onunload", |
||||
"open", |
||||
"opener", |
||||
"opera", |
||||
"outerHeight", |
||||
"outerWidth", |
||||
"pageXOffset", |
||||
"pageYOffset", |
||||
"parent", |
||||
"print", |
||||
"removeEventListener", |
||||
"resizeBy", |
||||
"resizeTo", |
||||
"screen", |
||||
"screenLeft", |
||||
"screenTop", |
||||
"screenX", |
||||
"screenY", |
||||
"scroll", |
||||
"scrollbars", |
||||
"scrollBy", |
||||
"scrollTo", |
||||
"scrollX", |
||||
"scrollY", |
||||
"self", |
||||
"status", |
||||
"statusbar", |
||||
"stop", |
||||
"toolbar", |
||||
"top" |
||||
], |
||||
"no-unexpected-multiline": "warn", |
||||
"no-unreachable": "warn", |
||||
"no-unused-expressions": [ |
||||
"error", |
||||
{ |
||||
"allowShortCircuit": true, |
||||
"allowTernary": true, |
||||
"allowTaggedTemplates": true |
||||
} |
||||
], |
||||
"no-unused-labels": "warn", |
||||
"no-useless-computed-key": "warn", |
||||
"no-useless-concat": "warn", |
||||
"no-useless-escape": "warn", |
||||
"no-useless-rename": [ |
||||
"warn", |
||||
{ |
||||
"ignoreDestructuring": false, |
||||
"ignoreImport": false, |
||||
"ignoreExport": false |
||||
} |
||||
], |
||||
"no-with": "warn", |
||||
"no-whitespace-before-property": "warn", |
||||
"react-hooks/exhaustive-deps": "warn", |
||||
"require-yield": "warn", |
||||
"rest-spread-spacing": ["warn", "never"], |
||||
"strict": ["warn", "never"], |
||||
"unicode-bom": ["warn", "never"], |
||||
"use-isnan": "warn", |
||||
"valid-typeof": "warn", |
||||
"no-restricted-properties": [ |
||||
"error", |
||||
{ |
||||
"object": "require", |
||||
"property": "ensure", |
||||
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" |
||||
}, |
||||
{ |
||||
"object": "System", |
||||
"property": "import", |
||||
"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting" |
||||
} |
||||
], |
||||
"getter-return": "warn", |
||||
"import/first": "error", |
||||
"import/no-amd": "error", |
||||
"import/no-webpack-loader-syntax": "error", |
||||
"react/forbid-foreign-prop-types": ["warn", { "allowInPropTypes": true }], |
||||
"react/jsx-no-comment-textnodes": "warn", |
||||
"react/jsx-no-duplicate-props": "warn", |
||||
"react/jsx-no-target-blank": "warn", |
||||
"react/jsx-no-undef": "error", |
||||
"react/jsx-pascal-case": ["warn", { "allowAllCaps": true, "ignore": [] }], |
||||
"react/jsx-uses-react": "warn", |
||||
"react/jsx-uses-vars": "warn", |
||||
"react/no-danger-with-children": "warn", |
||||
"react/no-direct-mutation-state": "warn", |
||||
"react/no-is-mounted": "warn", |
||||
"react/no-typos": "error", |
||||
"react/react-in-jsx-scope": "error", |
||||
"react/require-render-return": "error", |
||||
"react/style-prop-object": "warn", |
||||
"react/jsx-no-useless-fragment": "warn", |
||||
"jsx-a11y/accessible-emoji": "warn", |
||||
"jsx-a11y/alt-text": "warn", |
||||
"jsx-a11y/anchor-has-content": "warn", |
||||
"jsx-a11y/anchor-is-valid": [ |
||||
"warn", |
||||
{ "aspects": ["noHref", "invalidHref"] } |
||||
], |
||||
"jsx-a11y/aria-activedescendant-has-tabindex": "warn", |
||||
"jsx-a11y/aria-props": "warn", |
||||
"jsx-a11y/aria-proptypes": "warn", |
||||
"jsx-a11y/aria-role": "warn", |
||||
"jsx-a11y/aria-unsupported-elements": "warn", |
||||
"jsx-a11y/heading-has-content": "warn", |
||||
"jsx-a11y/iframe-has-title": "warn", |
||||
"jsx-a11y/img-redundant-alt": "warn", |
||||
"jsx-a11y/no-access-key": "warn", |
||||
"jsx-a11y/no-distracting-elements": "warn", |
||||
"jsx-a11y/no-redundant-roles": "warn", |
||||
"jsx-a11y/role-has-required-aria-props": "warn", |
||||
"jsx-a11y/role-supports-aria-props": "warn", |
||||
"jsx-a11y/scope": "warn", |
||||
"react-hooks/rules-of-hooks": "error", |
||||
"default-case": "off", |
||||
"no-dupe-class-members": "off", |
||||
"no-undef": "off", |
||||
"@typescript-eslint/consistent-type-assertions": "warn", |
||||
"no-array-constructor": "off", |
||||
"@typescript-eslint/no-array-constructor": "warn", |
||||
"@typescript-eslint/no-namespace": "error", |
||||
"no-use-before-define": "off", |
||||
"@typescript-eslint/no-use-before-define": [ |
||||
"warn", |
||||
{ |
||||
"functions": false, |
||||
"classes": false, |
||||
"variables": false, |
||||
"typedefs": false |
||||
} |
||||
], |
||||
"no-unused-vars": "off", |
||||
"@typescript-eslint/no-unused-vars": [ |
||||
"warn", |
||||
{ "args": "none", "ignoreRestSiblings": true } |
||||
], |
||||
"no-useless-constructor": "off", |
||||
"@typescript-eslint/no-useless-constructor": "warn" |
||||
}, |
||||
"env": { |
||||
"browser": true, |
||||
"commonjs": true, |
||||
"es6": true, |
||||
"jest": true, |
||||
"node": true |
||||
}, |
||||
"settings": { "react": { "version": "detect" } }, |
||||
"plugins": ["import", "jsx-a11y", "react", "react-hooks"], |
||||
"extends": ["../../../.eslintrc"], |
||||
"ignorePatterns": ["!**/*"] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
# remix-ui-clipboard |
||||
|
||||
This library was generated with [Nx](https://nx.dev). |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `nx test remix-ui-clipboard` to execute the unit tests via [Jest](https://jestjs.io). |
||||
@ -0,0 +1 @@ |
||||
export * from './lib/remix-app/remix-app' |
||||
@ -0,0 +1,66 @@ |
||||
html { box-sizing: border-box; } |
||||
*, *:before, *:after { box-sizing: inherit; } |
||||
body { |
||||
/* font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; */ |
||||
font-size : .8rem; |
||||
} |
||||
pre { |
||||
overflow-x: auto; |
||||
} |
||||
.remixIDE { |
||||
width : 100vw; |
||||
height : 100vh; |
||||
overflow : hidden; |
||||
flex-direction : row; |
||||
display : flex; |
||||
} |
||||
.mainpanel { |
||||
display : flex; |
||||
flex-direction : column; |
||||
overflow : hidden; |
||||
flex : 1; |
||||
min-width : 320px; |
||||
} |
||||
.iconpanel { |
||||
display : flex; |
||||
flex-direction : column; |
||||
overflow : hidden; |
||||
width : 50px; |
||||
user-select : none; |
||||
} |
||||
.sidepanel { |
||||
display : flex; |
||||
flex-direction : row-reverse; |
||||
width : 320px; |
||||
} |
||||
.highlightcode { |
||||
position : absolute; |
||||
z-index : 20; |
||||
background-color : var(--info); |
||||
} |
||||
.highlightcode_fullLine { |
||||
position : absolute; |
||||
z-index : 20; |
||||
background-color : var(--info); |
||||
opacity : 0.5; |
||||
} |
||||
.centered { |
||||
position : fixed; |
||||
top : 20%; |
||||
left : 45%; |
||||
width : 200px; |
||||
height : 200px; |
||||
} |
||||
.centered svg path { |
||||
fill: var(--secondary); |
||||
} |
||||
.centered svg polygon { |
||||
fill : var(--secondary); |
||||
} |
||||
.onboarding { |
||||
color : var(--text-info); |
||||
background-color : var(--info); |
||||
} |
||||
.matomoBtn { |
||||
width : 100px; |
||||
} |
||||
@ -0,0 +1,85 @@ |
||||
import React, { useEffect, useRef, useState } from 'react' |
||||
import { ModalDialog } from '@remix-ui/modal-dialog' |
||||
import './remix-app.css' |
||||
|
||||
interface IRemixAppUi { |
||||
app: any |
||||
} |
||||
export const RemixApp = (props: IRemixAppUi) => { |
||||
const [visible, setVisible] = useState<boolean>(false) |
||||
const sidePanelRef = useRef(null) |
||||
const mainPanelRef = useRef(null) |
||||
const iconPanelRef = useRef(null) |
||||
const hiddenPanelRef = useRef(null) |
||||
|
||||
useEffect(() => { |
||||
|
||||
}) |
||||
|
||||
useEffect(() => { |
||||
console.log('mounting app') |
||||
if (sidePanelRef.current) { |
||||
if (props.app.sidePanel) { |
||||
sidePanelRef.current.appendChild(props.app.sidePanel.render()) |
||||
} |
||||
} |
||||
if (mainPanelRef.current) { |
||||
if (props.app.mainview) { |
||||
mainPanelRef.current.appendChild(props.app.mainview.render()) |
||||
} |
||||
} |
||||
if (iconPanelRef.current) { |
||||
if (props.app.menuicons) { |
||||
iconPanelRef.current.appendChild(props.app.menuicons.render()) |
||||
} |
||||
} |
||||
if (hiddenPanelRef.current) { |
||||
if (props.app.hiddenPanel) { |
||||
hiddenPanelRef.current.appendChild(props.app.hiddenPanel.render()) |
||||
} |
||||
} |
||||
if (props.app) { |
||||
console.log('app', props.app) |
||||
props.app.activate() |
||||
} |
||||
}, []) |
||||
|
||||
const components = { |
||||
iconPanel: <div ref={iconPanelRef} id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light"></div>, |
||||
sidePanel: <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className="sidepanel border-right border-left"></div>, |
||||
mainPanel: <div ref={mainPanelRef} id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'></div>, |
||||
hiddenPanel: <div ref={hiddenPanelRef}></div> |
||||
} |
||||
|
||||
const handleModalOkClick = async () => { |
||||
|
||||
} |
||||
|
||||
const closeModal = async () => { |
||||
|
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<div className='remixIDE' hidden={false} data-id="remixIDE"> |
||||
{components.iconPanel} |
||||
{components.sidePanel} |
||||
{components.mainPanel} |
||||
</div> |
||||
<ModalDialog |
||||
handleHide={closeModal} |
||||
id="pluginManagerLocalPluginModalDialog" |
||||
hide={!visible} |
||||
title="Modal" |
||||
okLabel="OK" |
||||
okFn={ handleModalOkClick } |
||||
cancelLabel="Cancel" |
||||
cancelFn={closeModal} |
||||
>test</ModalDialog> |
||||
{components.hiddenPanel} |
||||
</> |
||||
|
||||
) |
||||
} |
||||
|
||||
export default RemixApp |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"extends": "../../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.lib.json" |
||||
}, |
||||
{ |
||||
"path": "./tsconfig.spec.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../../dist/out-tsc", |
||||
"module": "commonjs", |
||||
"types": ["jest", "node"] |
||||
}, |
||||
"include": [ |
||||
"**/*.spec.ts", |
||||
"**/*.spec.tsx", |
||||
"**/*.spec.js", |
||||
"**/*.spec.jsx", |
||||
"**/*.d.ts" |
||||
] |
||||
} |
||||
Loading…
Reference in new issue