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