From e4c6b1496e987cd3b73d4ec5a5b6abde98ddb8b8 Mon Sep 17 00:00:00 2001 From: David Disu Date: Mon, 21 Feb 2022 17:38:04 +0100 Subject: [PATCH 1/4] Clear error message when switching tabs --- apps/remix-ide/src/app/tabs/compile-tab.js | 4 ++++ apps/solidity-compiler/src/app/compiler-api.ts | 7 +++++++ libs/remix-lib/src/types/ICompilerApi.ts | 1 + .../solidity-compiler/src/lib/solidity-compiler.tsx | 12 ++++++++++-- .../solidity-compiler/src/lib/types/index.ts | 11 +++++++++++ 5 files changed, 33 insertions(+), 2 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js index 4718b4dee6..262d64f6e5 100644 --- a/apps/remix-ide/src/app/tabs/compile-tab.js +++ b/apps/remix-ide/src/app/tabs/compile-tab.js @@ -63,6 +63,10 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA this.renderComponent() } + onFileClosed () { + this.renderComponent() + } + onCompilationFinished () { this.renderComponent() } diff --git a/apps/solidity-compiler/src/app/compiler-api.ts b/apps/solidity-compiler/src/app/compiler-api.ts index 2e81d08ba1..b3d46a4712 100644 --- a/apps/solidity-compiler/src/app/compiler-api.ts +++ b/apps/solidity-compiler/src/app/compiler-api.ts @@ -21,6 +21,7 @@ export const CompilerApiMixin = (Base) => class extends Base { onCompilationFinished: (contractsDetails: any, contractMap: any) => void onSessionSwitched: () => void onContentChanged: () => void + onFileClosed: (name: string) => void initCompilerApi () { this.configurationSettings = null @@ -249,6 +250,12 @@ export const CompilerApiMixin = (Base) => class extends Base { } this.on('fileManager', 'noFileSelected', this.data.eventHandlers.onNoFileSelected) + this.data.eventHandlers.onFileClosed = (name: string) => { + this.onFileClosed(name) + } + + this.on('fileManager', 'fileClosed', this.data.eventHandlers.onFileClosed) + this.data.eventHandlers.onCompilationFinished = (success, data, source) => { this.compileErrors = data if (success) { diff --git a/libs/remix-lib/src/types/ICompilerApi.ts b/libs/remix-lib/src/types/ICompilerApi.ts index 62f86b5652..4cdea95799 100644 --- a/libs/remix-lib/src/types/ICompilerApi.ts +++ b/libs/remix-lib/src/types/ICompilerApi.ts @@ -26,6 +26,7 @@ export interface ICompilerApi { onCompilationFinished: (contractsDetails: any, contractMap: any) => void onSessionSwitched: () => void onContentChanged: () => void + onFileClosed: (name: string) => void resolveContentAndSave: (url: string) => Promise fileExists: (file: string) => Promise diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx index dcc86f387f..18ded67061 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' // eslint-disable-line -import { SolidityCompilerProps } from './types' +import { CompileErrors, SolidityCompilerProps } from './types' import { CompilerContainer } from './compiler-container' // eslint-disable-line import { ContractSelection } from './contract-selection' // eslint-disable-line import { Toaster } from '@remix-ui/toaster' // eslint-disable-line @@ -9,7 +9,7 @@ import { Renderer } from '@remix-ui/renderer' // eslint-disable-line import './css/style.css' export const SolidityCompiler = (props: SolidityCompilerProps) => { - const { api, api: { currentFile, compileTabLogic, contractsDetails, contractMap, compileErrors, configurationSettings } } = props + const { api, api: { currentFile, compileTabLogic, contractsDetails, contractMap, configurationSettings } } = props const [state, setState] = useState({ isHardhatProject: false, currentFile, @@ -32,6 +32,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { }) const [currentVersion, setCurrentVersion] = useState('') const [hideWarnings, setHideWarnings] = useState(false) + const [compileErrors, setCompileErrors] = useState(api.compileErrors) useEffect(() => { (async () => { @@ -63,12 +64,19 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { setState(prevState => { return { ...prevState, currentFile: '' } }) + setCompileErrors({} as CompileErrors) } api.onCompilationFinished = (contractsDetails: any, contractMap: any) => { setState(prevState => { return { ...prevState, contractsDetails, contractMap } }) + setCompileErrors(api.compileErrors) + } + + api.onFileClosed = (name) => { + console.log('path/name: ', name, currentFile) + if (name === currentFile) setCompileErrors({} as CompileErrors) } const toast = (message: string) => { diff --git a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts index 4932b1456c..eefc8c69ab 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts +++ b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts @@ -24,3 +24,14 @@ export interface ContractSelectionProps { modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void, contractsDetails: Record } + +interface CompileError { + mode?: string, + severity?: string, + formattedMessage?: string, + type?: string +} +export interface CompileErrors { + error: CompileError, + errors: CompileError[] +} From 29814a7efd43d682dbabe1a0ba17727b8f325fb9 Mon Sep 17 00:00:00 2001 From: David Disu Date: Tue, 22 Feb 2022 06:05:13 +0100 Subject: [PATCH 2/4] Store compile errors for opened files --- .../src/lib/solidity-compiler.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx index 18ded67061..a478b592cd 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx @@ -32,7 +32,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { }) const [currentVersion, setCurrentVersion] = useState('') const [hideWarnings, setHideWarnings] = useState(false) - const [compileErrors, setCompileErrors] = useState(api.compileErrors) + const [compileErrors, setCompileErrors] = useState>({ [currentFile]: api.compileErrors }) useEffect(() => { (async () => { @@ -64,19 +64,18 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { setState(prevState => { return { ...prevState, currentFile: '' } }) - setCompileErrors({} as CompileErrors) + setCompileErrors({} as Record) } api.onCompilationFinished = (contractsDetails: any, contractMap: any) => { setState(prevState => { return { ...prevState, contractsDetails, contractMap } }) - setCompileErrors(api.compileErrors) + setCompileErrors({ ...compileErrors, [currentFile]: api.compileErrors }) } api.onFileClosed = (name) => { - console.log('path/name: ', name, currentFile) - if (name === currentFile) setCompileErrors({} as CompileErrors) + if (name === currentFile) setCompileErrors({ ...compileErrors, [currentFile]: {} as CompileErrors }) } const toast = (message: string) => { @@ -129,20 +128,22 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
-
- - { compileErrors.error && } - { compileErrors.error && (compileErrors.error.mode === 'panic') && modal('Error', panicMessage(compileErrors.error.formattedMessage), 'Close', null) } - { compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err, index) => { - if (hideWarnings) { - if (err.severity !== 'warning') { + { compileErrors[currentFile] && +
+ + { compileErrors[currentFile].error && } + { compileErrors[currentFile].error && (compileErrors[currentFile].error.mode === 'panic') && modal('Error', panicMessage(compileErrors[currentFile].error.formattedMessage), 'Close', null) } + { compileErrors[currentFile].errors && compileErrors[currentFile].errors.length && compileErrors[currentFile].errors.map((err, index) => { + if (hideWarnings) { + if (err.severity !== 'warning') { + return + } + } else { return } - } else { - return - } - }) } -
+ }) } +
+ }
Date: Tue, 22 Feb 2022 13:15:47 +0100 Subject: [PATCH 3/4] Store badge info for opened files --- apps/remix-ide/src/app/tabs/compile-tab.js | 1 + apps/solidity-compiler/src/app/compiler-api.ts | 17 +++++++++-------- libs/remix-lib/src/types/ICompilerApi.ts | 2 ++ .../src/lib/solidity-compiler.tsx | 18 +++++++++++++++++- 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js index 262d64f6e5..9e7094317e 100644 --- a/apps/remix-ide/src/app/tabs/compile-tab.js +++ b/apps/remix-ide/src/app/tabs/compile-tab.js @@ -86,6 +86,7 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA } getFileManagerMode () { + this.emit() return this.fileManager.mode } diff --git a/apps/solidity-compiler/src/app/compiler-api.ts b/apps/solidity-compiler/src/app/compiler-api.ts index b3d46a4712..a4fe434ef1 100644 --- a/apps/solidity-compiler/src/app/compiler-api.ts +++ b/apps/solidity-compiler/src/app/compiler-api.ts @@ -22,6 +22,7 @@ export const CompilerApiMixin = (Base) => class extends Base { onSessionSwitched: () => void onContentChanged: () => void onFileClosed: (name: string) => void + statusChanged: (data: { key: string, title?: string, type?: string }) => void initCompilerApi () { this.configurationSettings = null @@ -190,31 +191,31 @@ export const CompilerApiMixin = (Base) => class extends Base { resetResults () { this.currentFile = '' this.contractsDetails = {} - this.emit('statusChanged', { key: 'none' }) + this.statusChanged({ key: 'none' }) if (this.onResetResults) this.onResetResults() } listenToEvents () { this.on('editor', 'contentChanged', () => { - this.emit('statusChanged', { key: 'edited', title: 'the content has changed, needs recompilation', type: 'info' }) + this.statusChanged({ key: 'edited', title: 'the content has changed, needs recompilation', type: 'info' }) if (this.onContentChanged) this.onContentChanged() }) this.data.eventHandlers.onLoadingCompiler = (url) => { this.data.loading = true this.data.loadingUrl = url - this.emit('statusChanged', { key: 'loading', title: 'loading compiler...', type: 'info' }) + this.statusChanged({ key: 'loading', title: 'loading compiler...', type: 'info' }) } this.compiler.event.register('loadingCompiler', this.data.eventHandlers.onLoadingCompiler) this.data.eventHandlers.onCompilerLoaded = () => { this.data.loading = false - this.emit('statusChanged', { key: 'none' }) + this.statusChanged({ key: 'none' }) } this.compiler.event.register('compilerLoaded', this.data.eventHandlers.onCompilerLoaded) this.data.eventHandlers.onStartingCompilation = () => { - this.emit('statusChanged', { key: 'loading', title: 'compiling...', type: 'info' }) + this.statusChanged({ key: 'loading', title: 'compiling...', type: 'info' }) } this.data.eventHandlers.onRemoveAnnotations = () => { @@ -262,12 +263,12 @@ export const CompilerApiMixin = (Base) => class extends Base { // forwarding the event to the appManager infra this.emit('compilationFinished', source.target, source, 'soljson', data) if (data.errors && data.errors.length > 0) { - this.emit('statusChanged', { + this.statusChanged({ key: data.errors.length, title: `compilation finished successful with warning${data.errors.length > 1 ? 's' : ''}`, type: 'warning' }) - } else this.emit('statusChanged', { key: 'succeed', title: 'compilation successful', type: 'success' }) + } else this.statusChanged({ key: 'succeed', title: 'compilation successful', type: 'success' }) // Store the contracts this.contractsDetails = {} this.compiler.visitContracts((contract) => { @@ -279,7 +280,7 @@ export const CompilerApiMixin = (Base) => class extends Base { }) } else { const count = (data.errors ? data.errors.filter(error => error.severity === 'error').length : 0 + (data.error ? 1 : 0)) - this.emit('statusChanged', { key: count, title: `compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' }) + this.statusChanged({ key: count, title: `compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' }) } // Update contract Selection this.contractMap = {} diff --git a/libs/remix-lib/src/types/ICompilerApi.ts b/libs/remix-lib/src/types/ICompilerApi.ts index 4cdea95799..7daa74e7cf 100644 --- a/libs/remix-lib/src/types/ICompilerApi.ts +++ b/libs/remix-lib/src/types/ICompilerApi.ts @@ -38,6 +38,8 @@ export interface ICompilerApi { logToTerminal: (log: terminalLog) => void compileWithHardhat: (configPath: string) => Promise + statusChanged: (data: { key: string, title?: string, type?: string }) => void, + emit: (key: string, ...payload: any) => void } export type terminalLog = { diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx index a478b592cd..d60ce9c0d9 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx @@ -33,6 +33,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { const [currentVersion, setCurrentVersion] = useState('') const [hideWarnings, setHideWarnings] = useState(false) const [compileErrors, setCompileErrors] = useState>({ [currentFile]: api.compileErrors }) + const [badgeStatus, setBadgeStatus] = useState>({}) useEffect(() => { (async () => { @@ -41,6 +42,14 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { })() }, []) + useEffect(() => { + if (badgeStatus[currentFile]) { + api.emit('statusChanged', badgeStatus[currentFile]) + } else { + api.emit('statusChanged', { key: 'none' }) + } + }, [badgeStatus[currentFile], currentFile]) + api.onCurrentFileChanged = (currentFile: string) => { setState(prevState => { return { ...prevState, currentFile } @@ -75,7 +84,14 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => { } api.onFileClosed = (name) => { - if (name === currentFile) setCompileErrors({ ...compileErrors, [currentFile]: {} as CompileErrors }) + if (name === currentFile) { + setCompileErrors({ ...compileErrors, [currentFile]: {} as CompileErrors }) + setBadgeStatus({ ...badgeStatus, [currentFile]: { key: 'none' } }) + } + } + + api.statusChanged = (data: { key: string, title?: string, type?: string }) => { + setBadgeStatus({ ...badgeStatus, [currentFile]: data }) } const toast = (message: string) => { From c9cff0f1a4c1cb5d81d147bf6cdafbf543bc874b Mon Sep 17 00:00:00 2001 From: David Disu Date: Wed, 23 Feb 2022 13:46:06 +0100 Subject: [PATCH 4/4] Store compilation details for opened files --- apps/remix-ide/src/app/tabs/compile-tab.js | 7 ++- .../solidity-compiler/src/app/compiler-api.ts | 43 +++++++++++-------- libs/remix-lib/src/types/ICompilerApi.ts | 15 ++++--- .../src/lib/remix-ui-modal-dialog.tsx | 2 +- .../src/lib/contract-selection.tsx | 22 ++-------- .../src/lib/solidity-compiler.tsx | 36 +++++++++------- .../solidity-compiler/src/lib/types/index.ts | 16 +++++-- 7 files changed, 75 insertions(+), 66 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/compile-tab.js b/apps/remix-ide/src/app/tabs/compile-tab.js index 9e7094317e..c57a51d089 100644 --- a/apps/remix-ide/src/app/tabs/compile-tab.js +++ b/apps/remix-ide/src/app/tabs/compile-tab.js @@ -51,9 +51,9 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA this.renderComponent() } - onResetResults () { - this.renderComponent() - } + // onResetResults () { + // this.renderComponent() + // } onSetWorkspace () { this.renderComponent() @@ -86,7 +86,6 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA } getFileManagerMode () { - this.emit() return this.fileManager.mode } diff --git a/apps/solidity-compiler/src/app/compiler-api.ts b/apps/solidity-compiler/src/app/compiler-api.ts index a4fe434ef1..abfe0b377b 100644 --- a/apps/solidity-compiler/src/app/compiler-api.ts +++ b/apps/solidity-compiler/src/app/compiler-api.ts @@ -4,21 +4,22 @@ import type { ConfigurationSettings } from '@remix-project/remix-lib-ts' export const CompilerApiMixin = (Base) => class extends Base { currentFile: string - contractMap: { - file: string - } | Record - + compilationDetails: { + contractMap: { + file: string + } | Record, + contractsDetails: Record, + target?: string + } compileErrors: any compileTabLogic: CompileTabLogic - contractsDetails: Record - configurationSettings: ConfigurationSettings onCurrentFileChanged: (fileName: string) => void - onResetResults: () => void + // onResetResults: () => void onSetWorkspace: (workspace: any) => void onNoFileSelected: () => void - onCompilationFinished: (contractsDetails: any, contractMap: any) => void + onCompilationFinished: (compilationDetails: { contractMap: { file: string } | Record, contractsDetails: Record }) => void onSessionSwitched: () => void onContentChanged: () => void onFileClosed: (name: string) => void @@ -33,15 +34,15 @@ export const CompilerApiMixin = (Base) => class extends Base { contractEl: null } - this.contractsDetails = {} + this.compilationDetails = { + contractsDetails:{}, + contractMap: {} + } this.data = { eventHandlers: {}, loading: false } - this.contractMap = {} - this.contractsDetails = {} - this.compileErrors = {} this.compiledFileName = '' this.currentFile = '' @@ -190,9 +191,12 @@ export const CompilerApiMixin = (Base) => class extends Base { resetResults () { this.currentFile = '' - this.contractsDetails = {} + this.compilationDetails = { + contractsDetails: {}, + contractMap: {} + } this.statusChanged({ key: 'none' }) - if (this.onResetResults) this.onResetResults() + // if (this.onResetResults) this.onResetResults() } listenToEvents () { @@ -270,9 +274,9 @@ export const CompilerApiMixin = (Base) => class extends Base { }) } else this.statusChanged({ key: 'succeed', title: 'compilation successful', type: 'success' }) // Store the contracts - this.contractsDetails = {} + this.compilationDetails.contractsDetails = {} this.compiler.visitContracts((contract) => { - this.contractsDetails[contract.name] = parseContracts( + this.compilationDetails.contractsDetails[contract.name] = parseContracts( contract.name, contract.object, this.compiler.getSource(contract.file) @@ -283,9 +287,10 @@ export const CompilerApiMixin = (Base) => class extends Base { this.statusChanged({ key: count, title: `compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' }) } // Update contract Selection - this.contractMap = {} - if (success) this.compiler.visitContracts((contract) => { this.contractMap[contract.name] = contract }) - if (this.onCompilationFinished) this.onCompilationFinished(this.contractsDetails, this.contractMap) + this.compilationDetails.contractMap = {} + if (success) this.compiler.visitContracts((contract) => { this.compilationDetails.contractMap[contract.name] = contract }) + this.compilationDetails.target = source.target + if (this.onCompilationFinished) this.onCompilationFinished(this.compilationDetails) } this.compiler.event.register('compilationFinished', this.data.eventHandlers.onCompilationFinished) diff --git a/libs/remix-lib/src/types/ICompilerApi.ts b/libs/remix-lib/src/types/ICompilerApi.ts index 7daa74e7cf..4c796ee3c1 100644 --- a/libs/remix-lib/src/types/ICompilerApi.ts +++ b/libs/remix-lib/src/types/ICompilerApi.ts @@ -1,11 +1,14 @@ export interface ICompilerApi { currentFile: string - contractMap: { - file: string - } | Record + compilationDetails: { + contractMap: { + file: string + } | Record, + contractsDetails: Record, + target?: string + } compileErrors: any compileTabLogic: any - contractsDetails: Record configurationSettings: ConfigurationSettings getCompilerParameters: () => ConfigurationSettings @@ -20,7 +23,7 @@ export interface ICompilerApi { getCompilationResult: () => any onCurrentFileChanged: (fileName: string) => void - onResetResults: () => void, + // onResetResults: () => void, onSetWorkspace: (workspace: any) => void onNoFileSelected: () => void onCompilationFinished: (contractsDetails: any, contractMap: any) => void @@ -39,7 +42,7 @@ export interface ICompilerApi { compileWithHardhat: (configPath: string) => Promise statusChanged: (data: { key: string, title?: string, type?: string }) => void, - emit: (key: string, ...payload: any) => void + emit?: (key: string, ...payload: any) => void } export type terminalLog = { diff --git a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx index 714255aa93..38df2fd8b8 100644 --- a/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx +++ b/libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx @@ -37,7 +37,7 @@ export const ModalDialog = (props: ModalDialogProps) => { modal.current.addEventListener('blur', handleBlur) } return () => { - modal.current.removeEventListener('blur', handleBlur) + modal.current && modal.current.removeEventListener('blur', handleBlur) } }, [modal.current]) diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx index efac0765ec..338fe7fd7e 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx +++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx @@ -7,32 +7,18 @@ import { CopyToClipboard } from '@remix-ui/clipboard' // eslint-disable-line import './css/style.css' export const ContractSelection = (props: ContractSelectionProps) => { - const { api, contractMap, contractsDetails, modal } = props - const [contractList, setContractList] = useState([]) + const { api, contractsDetails, contractList, modal } = props const [selectedContract, setSelectedContract] = useState('') const [storage, setStorage] = useState(null) useEffect(() => { - const contractList = contractMap ? Object.keys(contractMap).map((key) => ({ - name: key, - file: getFileName(contractMap[key].file) - })) : [] - - setContractList(contractList) if (contractList.length) setSelectedContract(contractList[0].name) - }, [contractMap, contractsDetails]) + }, [contractList]) const resetStorage = () => { setStorage('') } - // Return the file name of a path: ex "browser/ballot.sol" -> "ballot.sol" - const getFileName = (path) => { - const part = path.split('/') - - return part[part.length - 1] - } - const handleContractChange = (contractName: string) => { setSelectedContract(contractName) } @@ -214,13 +200,13 @@ export const ContractSelection = (props: ContractSelectionProps) => {
- + - +