Completed error rendering

pull/1339/head
ioedeveloper 3 years ago
parent 6302aed4ea
commit 9ae6ac1815
  1. 47
      libs/remix-ui/renderer/src/lib/renderer.css
  2. 122
      libs/remix-ui/renderer/src/lib/renderer.tsx
  3. 9
      libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx

@ -0,0 +1,47 @@
.remixui_sol.success,
.remixui_sol.error,
.remixui_sol.warning {
white-space: pre-line;
word-wrap: break-word;
cursor: pointer;
position: relative;
margin: 0.5em 0 1em 0;
border-radius: 5px;
line-height: 20px;
padding: 8px 15px;
}
.remixui_sol.success pre,
.remixui_sol.error pre,
.remixui_sol.warning pre {
white-space: pre-line;
overflow-y: hidden;
background-color: transparent;
margin: 0;
font-size: 12px;
border: 0 none;
padding: 0;
border-radius: 0;
}
.remixui_sol.success .close,
.remixui_sol.error .close,
.remixui_sol.warning .close {
white-space: pre-line;
font-weight: bold;
position: absolute;
color: hsl(0, 0%, 0%); /* black in style-guide.js */
top: 0;
right: 0;
padding: 0.5em;
}
.remixui_sol.error {
}
.remixui_sol.warning {
}
.remixui_sol.success {
/* background-color: // styles.rightPanel.message_Success_BackgroundColor; */
}

@ -1,14 +1,61 @@
import React from 'react' //eslint-disable-line
import React, { useEffect, useState } from 'react' //eslint-disable-line
import './renderer.css'
interface RendererProps {
message: any;
opt: any,
editor: any
opt?: any,
plugin: any,
config: any
}
export const Renderer = ({ message, opt, editor }: RendererProps) => {
console.log('message: ', message)
console.log('opt: ', opt)
export const Renderer = ({ message, opt = {}, plugin, config }: RendererProps) => {
const [messageText, setMessageText] = useState(null)
const [editorOptions, setEditorOptions] = useState({
useSpan: false,
type: ''
})
const [classList] = useState(opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning')
const [close, setClose] = useState(false)
useEffect(() => {
if (!message) return
let text
if (typeof message === 'string') {
text = message
} else if (message.innerText) {
text = message.innerText
}
// ^ e.g:
// browser/gm.sol: Warning: Source file does not specify required compiler version! Consider adding "pragma solidity ^0.6.12
// https://github.com/OpenZeppelin/openzeppelin-contracts/blob/release-v3.2.0/contracts/introspection/IERC1820Registry.sol:3:1: ParserError: Source file requires different compiler version (current compiler is 0.7.4+commit.3f05b770.Emscripten.clang) - note that nightly builds are considered to be strictly less than the released version
let positionDetails = getPositionDetails(text)
const options = opt
if (!positionDetails.errFile || (opt.errorType && opt.errorType === positionDetails.errFile)) {
// Updated error reported includes '-->' before file details
const errorDetails = text.split('-->')
// errorDetails[1] will have file details
if (errorDetails.length > 1) positionDetails = getPositionDetails(errorDetails[1])
}
options.errLine = positionDetails.errLine
options.errCol = positionDetails.errCol
options.errFile = positionDetails.errFile.trim()
if (!opt.noAnnotations && opt.errFile) {
addAnnotation(opt.errFile, {
row: opt.errLine,
column: opt.errCol,
text: text,
type: opt.type
})
}
setMessageText(text)
setEditorOptions(options)
setClose(false)
}, [message])
const getPositionDetails = (msg: any) => {
const result = { } as Record<string, number | string>
@ -16,49 +63,42 @@ export const Renderer = ({ message, opt, editor }: RendererProps) => {
if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
// extract line / column
let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
result.errLine = position ? parseInt(position[2]) - 1 : -1
result.errCol = position ? parseInt(position[3]) : -1
let pos = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
result.errLine = pos ? parseInt(pos[2]) - 1 : -1
result.errCol = pos ? parseInt(pos[3]) : -1
// extract file
position = msg.match(/^(https:.*?|http:.*?|.*?):/)
result.errFile = position ? position[1] : ''
pos = msg.match(/^(https:.*?|http:.*?|.*?):/)
result.errFile = pos ? pos[1] : ''
return result
}
const addAnnotation = (file, error) => {
if (file === config.get('currentFile')) {
plugin.call('editor', 'addAnnotation', error, file)
}
}
const handlePointToErrorOnClick = (location, fileName) => {
editor.call('editor', 'discardHighlight')
editor.call('editor', 'highlight', location, fileName)
plugin.call('editor', 'discardHighlight')
plugin.call('editor', 'highlight', location, fileName)
}
if (!message) return
let position = getPositionDetails(message)
if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
// Updated error reported includes '-->' before file details
const errorDetails = message.split('-->')
// errorDetails[1] will have file details
if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1])
const handleClose = () => {
setClose(true)
}
opt.errLine = position.errLine
opt.errCol = position.errCol
opt.errFile = position.errFile.trim()
const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
return (
<div>
<div className={`sol ${opt.type} ${classList}`}>
<div className="close" data-id="renderer">
<i className="fas fa-times"></i>
</div>
<span className='d-flex flex-column' onClick={() => handlePointToErrorOnClick(opt.location, opt.fileName)}>
<span className='h6 font-weight-bold'>{opt.name}</span>
{ opt.item && opt.item.warning }
{ opt.item && opt.item.more
? <span><a href={opt.item.more} target='_blank'>more</a></span>
: <span> </span>
}
<span title={`Position in ${opt.errFile}`}>Pos: {opt.locationString}</span>
</span>
</div>
</div>
<>
{
messageText && !close && (
<div className={`sol ${editorOptions.type} ${classList}`} data-id={opt.errFile} onClick={() => handlePointToErrorOnClick(opt.location, opt.fileName)}>
{ editorOptions.useSpan ? <span> { messageText } </span> : <pre><span>{ messageText }</span></pre> }
<div className="close" data-id="renderer" onClick={handleClose}>
<i className="fas fa-times"></i>
</div>
</div>)
}
</>
)
}

@ -28,9 +28,6 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
handleHide: null
}
})
useEffect(() => {
console.log('compileErrors: ', compileErrors)
}, [compileErrors])
const [currentVersion, setCurrentVersion] = useState('')
const toast = (message: string) => {
@ -88,15 +85,15 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
<ContractSelection contractMap={contractMap} fileProvider={fileProvider} fileManager={fileManager} contractsDetails={contractsDetails} modal={modal} />
<div className="remixui_errorBlobs p-4" data-id="compiledErrors">
<span data-id={`compilationFinishedWith_${currentVersion}`}></span>
{ compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} editor={plugin} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} /> }
{ compileErrors.error && <Renderer message={compileErrors.error.formattedMessage || compileErrors.error} plugin={plugin} opt={{ type: compileErrors.error.severity || 'error', errorType: compileErrors.error.type }} config={config} /> }
{ compileErrors.error && (compileErrors.error.mode === 'panic') && modal('Error', panicMessage(compileErrors.error.formattedMessage), 'Close', null) }
{ compileErrors.errors && compileErrors.errors.length && compileErrors.errors.map((err) => {
if (config.get('hideWarnings')) {
if (err.severity !== 'warning') {
return <Renderer message={err.formattedMessage} editor={plugin} opt={{ type: err.severity, errorType: err.type }} />
return <Renderer message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
}
} else {
return <Renderer message={err.formattedMessage} editor={plugin} opt={{ type: err.severity, errorType: err.type }} />
return <Renderer message={err.formattedMessage} plugin={plugin} opt={{ type: err.severity, errorType: err.type }} config={config} />
}
}) }
</div>

Loading…
Cancel
Save