filip mertens
2 years ago
parent
924dc0b208
commit
2898da6470
@ -1,220 +0,0 @@ |
|||||||
'use strict' |
|
||||||
import { Plugin } from '@remixproject/engine' |
|
||||||
import { sourceMappingDecoder } from '@remix-project/remix-debug' |
|
||||||
|
|
||||||
const profile = { |
|
||||||
name: 'contextualListener', |
|
||||||
methods: ['getActiveHighlights', 'gasEstimation', 'jumpToPosition', 'jumpToDefinition'], |
|
||||||
events: [], |
|
||||||
version: '0.0.1' |
|
||||||
} |
|
||||||
|
|
||||||
/* |
|
||||||
trigger contextChanged(nodes) |
|
||||||
*/ |
|
||||||
export class EditorContextListener extends Plugin { |
|
||||||
_activeHighlights: Array<any> |
|
||||||
astWalker: any |
|
||||||
currentPosition: any |
|
||||||
currentFile: string |
|
||||||
nodes: Array<any> |
|
||||||
results: any |
|
||||||
estimationObj: any |
|
||||||
creationCost: any |
|
||||||
codeDepositCost: any |
|
||||||
contract: any |
|
||||||
activated: boolean |
|
||||||
|
|
||||||
constructor(astWalker) { |
|
||||||
super(profile) |
|
||||||
this.activated = false |
|
||||||
|
|
||||||
this._activeHighlights = [] |
|
||||||
|
|
||||||
this.astWalker = astWalker |
|
||||||
} |
|
||||||
|
|
||||||
async onActivation() { |
|
||||||
return |
|
||||||
this.on('editor', 'contentChanged', async () => { |
|
||||||
console.log('contentChanged') |
|
||||||
this._stopHighlighting() |
|
||||||
}) |
|
||||||
|
|
||||||
this.on('fileManager', 'currentFileChanged', async () => { |
|
||||||
this._stopHighlighting() |
|
||||||
}) |
|
||||||
|
|
||||||
setInterval(async () => { |
|
||||||
console.log('interval') |
|
||||||
const compilationResult = await this.call('codeParser', 'getLastCompilationResult') |
|
||||||
if (compilationResult && compilationResult.languageversion.indexOf('soljson') === 0) { |
|
||||||
|
|
||||||
let currentFile |
|
||||||
try { |
|
||||||
currentFile = await this.call('fileManager', 'file') |
|
||||||
} catch (error) { |
|
||||||
if (error.message !== 'Error: No such file or directory No file selected') throw error |
|
||||||
} |
|
||||||
this._highlightItems( |
|
||||||
await this.call('editor', 'getCursorPosition'), |
|
||||||
compilationResult, |
|
||||||
currentFile |
|
||||||
) |
|
||||||
} |
|
||||||
}, 1000) |
|
||||||
} |
|
||||||
|
|
||||||
getActiveHighlights() { |
|
||||||
return [...this._activeHighlights] |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async _highlightItems(cursorPosition, compilationResult, file) { |
|
||||||
if (this.currentPosition === cursorPosition) return |
|
||||||
this._stopHighlighting() |
|
||||||
this.currentPosition = cursorPosition |
|
||||||
this.currentFile = file |
|
||||||
const urlFromPath = await this.call('fileManager', 'getUrlFromPath', this.currentFile) |
|
||||||
if (compilationResult && compilationResult.data && (compilationResult.data.sources[file] || compilationResult.data.sources[urlFromPath.file])) { |
|
||||||
const nodes = sourceMappingDecoder.nodesAtPosition(null, cursorPosition, compilationResult.data.sources[file] || compilationResult.data.sources[urlFromPath.file]) |
|
||||||
this.nodes = nodes |
|
||||||
if (nodes && nodes.length && nodes[nodes.length - 1]) { |
|
||||||
await this._highlightExpressions(nodes[nodes.length - 1], compilationResult) |
|
||||||
} |
|
||||||
this.emit('contextChanged', nodes) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async _highlight(node, compilationResult) { |
|
||||||
if (!node) return |
|
||||||
const position = sourceMappingDecoder.decode(node.src) |
|
||||||
const fileTarget = compilationResult.getSourceName(position.file) |
|
||||||
const nodeFound = this._activeHighlights.find((el) => el.fileTarget === fileTarget && el.position.file === position.file && el.position.length === position.length && el.position.start === position.start) |
|
||||||
if (nodeFound) return // if the content is already highlighted, do nothing.
|
|
||||||
|
|
||||||
await this._highlightInternal(position, node, compilationResult) |
|
||||||
if (compilationResult && compilationResult.languageversion.indexOf('soljson') === 0) { |
|
||||||
this._activeHighlights.push({ position, fileTarget, nodeId: node.id }) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
async _highlightInternal(position, node, compilationResult) { |
|
||||||
if (node.nodeType === 'Block') return |
|
||||||
if (compilationResult && compilationResult.languageversion.indexOf('soljson') === 0) { |
|
||||||
let lineColumn = await this.call('offsetToLineColumnConverter', 'offsetToLineColumn', position, position.file, compilationResult.getSourceCode().sources, compilationResult.getAsts()) |
|
||||||
if (node.nodes && node.nodes.length) { |
|
||||||
// If node has children, highlight the entire line. if not, just highlight the current source position of the node.
|
|
||||||
lineColumn = { |
|
||||||
start: { |
|
||||||
line: lineColumn.start.line, |
|
||||||
column: 0 |
|
||||||
}, |
|
||||||
end: { |
|
||||||
line: lineColumn.start.line + 1, |
|
||||||
column: 0 |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
const fileName = compilationResult.getSourceName(position.file) |
|
||||||
if (fileName) { |
|
||||||
return await this.call('editor', 'highlight', lineColumn, fileName, '', { focus: false }) |
|
||||||
} |
|
||||||
} |
|
||||||
return null |
|
||||||
} |
|
||||||
|
|
||||||
async _highlightExpressions(node, compilationResult) { |
|
||||||
|
|
||||||
const highlights = async (id) => { |
|
||||||
const refs = await this.call('codeParser', 'getDeclaration', id) |
|
||||||
if (refs) { |
|
||||||
for (const ref in refs) { |
|
||||||
const node = refs[ref] |
|
||||||
await this._highlight(node, compilationResult) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
if (node && node.referencedDeclaration) { |
|
||||||
await highlights(node.referencedDeclaration) |
|
||||||
const current = await this.call('codeParser', 'getNodeById', node.referencedDeclaration) // this._index.FlatReferences[node.referencedDeclaration]
|
|
||||||
await this._highlight(current, compilationResult) |
|
||||||
} else { |
|
||||||
await highlights(node.id) |
|
||||||
await this._highlight(node, compilationResult) |
|
||||||
} |
|
||||||
|
|
||||||
this.results = compilationResult |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
_stopHighlighting() { |
|
||||||
this.call('editor', 'discardHighlight') |
|
||||||
this.emit('stopHighlighting') |
|
||||||
this._activeHighlights = [] |
|
||||||
} |
|
||||||
|
|
||||||
gasEstimation(node) { |
|
||||||
this._loadContractInfos(node) |
|
||||||
let executionCost, codeDepositCost |
|
||||||
if (node.nodeType === 'FunctionDefinition') { |
|
||||||
const visibility = node.visibility |
|
||||||
if (node.kind !== 'constructor') { |
|
||||||
const fnName = node.name |
|
||||||
const fn = fnName + this._getInputParams(node) |
|
||||||
if (visibility === 'public' || visibility === 'external') { |
|
||||||
executionCost = this.estimationObj === null ? '-' : this.estimationObj.external[fn] |
|
||||||
} else if (visibility === 'private' || visibility === 'internal') { |
|
||||||
executionCost = this.estimationObj === null ? '-' : this.estimationObj.internal[fn] |
|
||||||
} |
|
||||||
} else { |
|
||||||
executionCost = this.creationCost |
|
||||||
codeDepositCost = this.codeDepositCost |
|
||||||
} |
|
||||||
} else { |
|
||||||
executionCost = '-' |
|
||||||
} |
|
||||||
return { executionCost, codeDepositCost } |
|
||||||
} |
|
||||||
|
|
||||||
_loadContractInfos(node) { |
|
||||||
console.log(this.results) |
|
||||||
const path = (this.nodes.length && this.nodes[0].absolutePath) || this.results.source.target |
|
||||||
for (const i in this.nodes) { |
|
||||||
if (this.nodes[i].id === node.scope) { |
|
||||||
const contract = this.nodes[i] |
|
||||||
this.contract = this.results.data.contracts && this.results.data.contracts[path] && this.results.data.contracts[path][contract.name] |
|
||||||
if (this.contract) { |
|
||||||
this.estimationObj = this.contract.evm && this.contract.evm.gasEstimates |
|
||||||
if (this.estimationObj) { |
|
||||||
this.creationCost = this.estimationObj === null ? '-' : this.estimationObj.creation.totalCost |
|
||||||
this.codeDepositCost = this.estimationObj === null ? '-' : this.estimationObj.creation.codeDepositCost |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
_getInputParams(node) { |
|
||||||
const params = [] |
|
||||||
const target = node.parameters |
|
||||||
// for (const i in node.children) {
|
|
||||||
// if (node.children[i].name === 'ParameterList') {
|
|
||||||
// target = node.children[i]
|
|
||||||
// break
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
if (target) { |
|
||||||
const children = target.parameters |
|
||||||
for (const j in children) { |
|
||||||
if (children[j].nodeType === 'VariableDeclaration') { |
|
||||||
params.push(children[j].typeDescriptions.typeString) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
return '(' + params.toString() + ')' |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,4 +0,0 @@ |
|||||||
{ |
|
||||||
"presets": ["@nrwl/react/babel"], |
|
||||||
"plugins": [] |
|
||||||
} |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
{ |
|
||||||
"env": { |
|
||||||
"browser": true, |
|
||||||
"es6": true |
|
||||||
}, |
|
||||||
"extends": "../../../.eslintrc", |
|
||||||
"globals": { |
|
||||||
"Atomics": "readonly", |
|
||||||
"SharedArrayBuffer": "readonly" |
|
||||||
}, |
|
||||||
"parserOptions": { |
|
||||||
"ecmaVersion": 11, |
|
||||||
"sourceType": "module" |
|
||||||
}, |
|
||||||
"rules": { |
|
||||||
"no-unused-vars": "off", |
|
||||||
"@typescript-eslint/no-unused-vars": "error" |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,7 +0,0 @@ |
|||||||
# remix-ui-editor-context-view |
|
||||||
|
|
||||||
This library was generated with [Nx](https://nx.dev). |
|
||||||
|
|
||||||
## Running unit tests |
|
||||||
|
|
||||||
Run `nx test remix-ui-editor-context-view` to execute the unit tests via [Jest](https://jestjs.io). |
|
||||||
@ -1 +0,0 @@ |
|||||||
export * from './lib/remix-ui-editor-context-view' |
|
||||||
@ -1,43 +0,0 @@ |
|||||||
|
|
||||||
.container-context-view { |
|
||||||
padding : 1px 15px; |
|
||||||
} |
|
||||||
.line { |
|
||||||
display : flex; |
|
||||||
align-items : center; |
|
||||||
text-overflow : ellipsis; |
|
||||||
overflow : hidden; |
|
||||||
white-space : nowrap; |
|
||||||
font-size : 13px; |
|
||||||
} |
|
||||||
.type { |
|
||||||
font-style : italic; |
|
||||||
margin-right : 5px; |
|
||||||
} |
|
||||||
.name { |
|
||||||
font-weight : bold; |
|
||||||
} |
|
||||||
.jump { |
|
||||||
cursor : pointer; |
|
||||||
margin : 0 5px; |
|
||||||
} |
|
||||||
.jump:hover { |
|
||||||
color : var(--secondary); |
|
||||||
} |
|
||||||
.referencesnb { |
|
||||||
float : right; |
|
||||||
margin-left : 15px; |
|
||||||
} |
|
||||||
.gasEstimation { |
|
||||||
margin-right : 15px; |
|
||||||
display : flex; |
|
||||||
align-items : center; |
|
||||||
} |
|
||||||
.gasStationIcon { |
|
||||||
margin-right : 5px; |
|
||||||
} |
|
||||||
.contextviewcontainer { |
|
||||||
z-index : 50; |
|
||||||
border-radius : 1px; |
|
||||||
border : 2px solid var(--secondary); |
|
||||||
} |
|
||||||
@ -1,184 +0,0 @@ |
|||||||
import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line
|
|
||||||
import { sourceMappingDecoder } from '@remix-project/remix-debug' |
|
||||||
|
|
||||||
import './remix-ui-editor-context-view.css' |
|
||||||
|
|
||||||
/* eslint-disable-next-line */ |
|
||||||
|
|
||||||
export type astNode = { |
|
||||||
name: string, |
|
||||||
id: number, |
|
||||||
children?: Array<any>, |
|
||||||
typeDescriptions: any, |
|
||||||
nodeType: string, |
|
||||||
src: string // e.g "142:1361:0"
|
|
||||||
} |
|
||||||
|
|
||||||
export type nodePositionLight = { |
|
||||||
file: number, |
|
||||||
length: number, |
|
||||||
start: number |
|
||||||
} |
|
||||||
|
|
||||||
export type astNodeLight = { |
|
||||||
fileTarget: string, |
|
||||||
nodeId: number, |
|
||||||
position: nodePositionLight |
|
||||||
} |
|
||||||
|
|
||||||
export type onContextListenerChangedListener = (nodes: Array<astNode>) => void |
|
||||||
export type ononCurrentFileChangedListener = (name: string) => void |
|
||||||
|
|
||||||
export type gasEstimationType = { |
|
||||||
executionCost: string, |
|
||||||
codeDepositCost: string |
|
||||||
} |
|
||||||
export interface RemixUiEditorContextViewProps { |
|
||||||
hide: boolean, |
|
||||||
jumpToPosition: (position: any) => void |
|
||||||
onContextListenerChanged: (listener: onContextListenerChangedListener) => void |
|
||||||
onCurrentFileChanged: (listener: ononCurrentFileChangedListener) => void |
|
||||||
getActiveHighlights: () => Array<astNodeLight> |
|
||||||
gasEstimation: (node: astNode) => gasEstimationType |
|
||||||
declarationOf: (node: astNode) => astNode |
|
||||||
} |
|
||||||
|
|
||||||
function isDefinition (node: any) { |
|
||||||
return node.nodeType === 'ContractDefinition' || |
|
||||||
node.nodeType === 'FunctionDefinition' || |
|
||||||
node.nodeType === 'ModifierDefinition' || |
|
||||||
node.nodeType === 'VariableDeclaration' || |
|
||||||
node.nodeType === 'StructDefinition' || |
|
||||||
node.nodeType === 'EventDefinition' |
|
||||||
} |
|
||||||
|
|
||||||
type nullableAstNode = astNode | null |
|
||||||
|
|
||||||
export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps) { |
|
||||||
const loopOverReferences = useRef(0) |
|
||||||
const currentNodeDeclaration = useRef<nullableAstNode>(null) |
|
||||||
const [state, setState] = useState<{ |
|
||||||
nodes: Array<astNode>, |
|
||||||
activeHighlights: Array<any> |
|
||||||
gasEstimation: gasEstimationType |
|
||||||
}>({ |
|
||||||
nodes: [], |
|
||||||
activeHighlights: [], |
|
||||||
gasEstimation: { executionCost: '', codeDepositCost: '' } |
|
||||||
}) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
props.onCurrentFileChanged(() => { |
|
||||||
currentNodeDeclaration.current = null |
|
||||||
setState(prevState => { |
|
||||||
return { ...prevState, nodes: [], activeHighlights: [] } |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
props.onContextListenerChanged(async (nodes: Array<astNode>) => { |
|
||||||
let nextNodeDeclaration |
|
||||||
let nextNode |
|
||||||
if (!props.hide && nodes && nodes.length) { |
|
||||||
nextNode = nodes[nodes.length - 1] |
|
||||||
if (!isDefinition(nextNode)) { |
|
||||||
nextNodeDeclaration = await props.declarationOf(nextNode) |
|
||||||
} else { |
|
||||||
nextNodeDeclaration = nextNode |
|
||||||
} |
|
||||||
} |
|
||||||
//console.log(nextNode, nextNodeDeclaration)
|
|
||||||
if (nextNodeDeclaration && currentNodeDeclaration.current && nextNodeDeclaration.id === currentNodeDeclaration.current.id) return |
|
||||||
|
|
||||||
currentNodeDeclaration.current = nextNodeDeclaration |
|
||||||
|
|
||||||
let gasEstimation |
|
||||||
if (currentNodeDeclaration.current) { |
|
||||||
if (currentNodeDeclaration.current.nodeType === 'FunctionDefinition') { |
|
||||||
gasEstimation = await props.gasEstimation(currentNodeDeclaration.current) |
|
||||||
} |
|
||||||
} |
|
||||||
const activeHighlights: Array<astNodeLight> = await props.getActiveHighlights() |
|
||||||
// console.log('active highlights', activeHighlights)
|
|
||||||
if (nextNode && activeHighlights && activeHighlights.length) { |
|
||||||
loopOverReferences.current = activeHighlights.findIndex((el: astNodeLight) => `${el.position.start}:${el.position.length}:${el.position.file}` === nextNode.src) |
|
||||||
loopOverReferences.current = loopOverReferences.current === -1 ? 0 : loopOverReferences.current |
|
||||||
} else { |
|
||||||
loopOverReferences.current = 0 |
|
||||||
} |
|
||||||
setState(prevState => { |
|
||||||
return { ...prevState, nodes, activeHighlights, gasEstimation } |
|
||||||
}) |
|
||||||
}) |
|
||||||
}, []) |
|
||||||
|
|
||||||
/* |
|
||||||
* show gas estimation |
|
||||||
*/ |
|
||||||
const gasEstimation = (node) => { |
|
||||||
if (node.nodeType === 'FunctionDefinition' && state && state.gasEstimation) { |
|
||||||
const result: gasEstimationType = state.gasEstimation |
|
||||||
const executionCost = ' Execution cost: ' + result.executionCost + ' gas' |
|
||||||
const codeDepositCost = 'Code deposit cost: ' + result.codeDepositCost + ' gas' |
|
||||||
const estimatedGas = result.codeDepositCost ? `${codeDepositCost}, ${executionCost}` : `${executionCost}` |
|
||||||
return ( |
|
||||||
<div className="gasEstimation"> |
|
||||||
<i className="fas fa-gas-pump gasStationIcon" title='Gas estimation'></i> |
|
||||||
<span>{estimatedGas}</span> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} else { |
|
||||||
return (<div></div>) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const _render = () => { |
|
||||||
const node = currentNodeDeclaration.current |
|
||||||
if (!node) return (<div></div>) |
|
||||||
const references = state.activeHighlights |
|
||||||
// console.log(node)
|
|
||||||
const type = node.typeDescriptions && node.typeDescriptions.typeString ? node.typeDescriptions.typeString : node.nodeType |
|
||||||
const referencesCount = `${references ? references.length : '0'} reference(s)` |
|
||||||
|
|
||||||
const nodes: Array<astNodeLight> = state.activeHighlights |
|
||||||
|
|
||||||
const jumpTo = () => { |
|
||||||
if (node && node.src) { |
|
||||||
// console.log(node)
|
|
||||||
const position = sourceMappingDecoder.decode(node.src) |
|
||||||
if (position) { |
|
||||||
props.jumpToPosition(position) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// JUMP BETWEEN REFERENCES
|
|
||||||
const jump = (e: any) => { |
|
||||||
e.target.dataset.action === 'next' ? loopOverReferences.current++ : loopOverReferences.current-- |
|
||||||
if (loopOverReferences.current < 0) loopOverReferences.current = nodes.length - 1 |
|
||||||
if (loopOverReferences.current >= nodes.length) loopOverReferences.current = 0 |
|
||||||
console.log(loopOverReferences.current) |
|
||||||
props.jumpToPosition(nodes[loopOverReferences.current].position) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="line">{gasEstimation(node)} |
|
||||||
<div title={type} className="type">{type}</div> |
|
||||||
<div title={node.name} className="name mr-2">{node.name}</div> |
|
||||||
<i className="fas fa-share jump" data-action='gotoref' aria-hidden="true" onClick={jumpTo}></i> |
|
||||||
<span className="referencesnb">{referencesCount}</span> |
|
||||||
<i data-action='previous' className="fas fa-chevron-up jump" aria-hidden="true" onClick={jump}></i> |
|
||||||
<i data-action='next' className="fas fa-chevron-down jump" aria-hidden="true" onClick={jump}></i> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
!props.hide && <div className="container-context-view contextviewcontainer bg-light text-dark border-0 py-1"> |
|
||||||
{_render()} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default RemixUiEditorContextView |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
{ |
|
||||||
"extends": "../../../tsconfig.base.json", |
|
||||||
"compilerOptions": { |
|
||||||
"jsx": "react", |
|
||||||
"allowJs": true, |
|
||||||
"esModuleInterop": true, |
|
||||||
"allowSyntheticDefaultImports": true |
|
||||||
}, |
|
||||||
"files": [], |
|
||||||
"include": [], |
|
||||||
"references": [ |
|
||||||
{ |
|
||||||
"path": "./tsconfig.lib.json" |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
{ |
|
||||||
"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"] |
|
||||||
} |
|
||||||
Loading…
Reference in new issue