add "Compile and Run" button

pull/5370/head
yann300 3 years ago
parent bafac74281
commit 0feec2e3d8
  1. 7
      apps/remix-ide/src/app/tabs/compile-and-run.ts
  2. 11
      apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
  3. 13
      apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
  4. 9
      apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
  5. 11
      apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
  6. 8
      apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
  7. 8
      apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
  8. 8
      apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
  9. 8
      apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
  10. 8
      apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
  11. 4
      apps/solidity-compiler/src/app/compiler-api.ts
  12. 1
      libs/remix-lib/src/types/ICompilerApi.ts
  13. 88
      libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
  14. 2
      libs/remix-ui/solidity-compiler/src/lib/css/style.css

@ -11,7 +11,7 @@ export const profile = {
name: 'compileAndRun',
displayName: 'Compile and Run',
description: 'after each compilation, run the script defined in Natspec.',
methods: [],
methods: ['runScriptAfterCompilation'],
version: packageJson.version,
kind: 'none'
}
@ -42,6 +42,11 @@ export class CompileAndRun extends Plugin {
}
}
runScriptAfterCompilation (fileName: string) {
this.targetFileName = fileName
_paq.push(['trackEvent', 'ScriptExecutor', 'request_run_script'])
}
async runScript (fileName, clearAllInstances) {
await this.call('terminal', 'log', `running ${fileName} ...`)
try {

@ -30,6 +30,7 @@
--warning:#dd5600;
--danger:#c71c22;
--light:#f8f9fa;
--text:#343a40;
--dark:#343a40;
--body-bg: #fff;
--text-bg-mark: #fcf8e3;
@ -5186,11 +5187,11 @@ a.close.disabled {
border-left-color:#000
}
.tooltip-inner {
padding:.25rem .5rem;
color:#fff;
text-align:center;
background-color:var(--text-background);
border-radius:.25rem
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color: var(--light);
border-radius: .25rem
}
.popover {
position:absolute;

@ -32,6 +32,7 @@
--warning:#f80;
--danger:#c00;
--light:#222;
--text:#adafae;
--dark:#adafae;
--body-bg: #060606;
--text-bg-mark: #fcf8e3;
@ -5189,12 +5190,12 @@ a.close.disabled {
border-left-color:#282828
}
.tooltip-inner {
padding:.25rem .5rem;
color:#fff;
text-align:center;
background-color:var(--text-background);
border-radius:.25rem
}
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color: var(--light);
border-radius: .25rem
}
.popover {
position:absolute;
top:0;

@ -30,6 +30,7 @@
--warning:#f39c12;
--danger:#e74c3c;
--light:#ecf0f1;
--text:#7b8a8b;
--dark:#7b8a8b;
--body-bg: #fff;
--text-bg-mark: #fcf8e3;
@ -4226,8 +4227,12 @@ a.close.disabled {
left:0; border-width:.4rem 0 .4rem .4rem; border-left-color:#000
}
.tooltip-inner {
padding:.25rem .5rem; color:#fff; text-align:center; background-color:var(--text-background); border-radius:.25rem
}
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color: var(--light);
border-radius: .25rem
}
.popover {
position:absolute; top:0; left:0; z-index:1060; display:block; max-width:276px; font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-style:normal; font-weight:400; line-height:1.5; text-align:left; text-align:start; text-decoration:none; text-shadow:none; text-transform:none; letter-spacing:normal; word-break:normal; word-spacing:normal; white-space:normal; line-break:auto; font-size:.825rem; word-wrap:break-word; background-color:#fff; background-clip:padding-box; border:1px solid rgba(0,0,0,.2); border-radius:.3rem
}

@ -30,6 +30,7 @@
--info:#3399f3;
--warning:#d47500;
--danger:#cd0200;
--text:#eee;
--light:#eee;
--dark:#333;
--body-bg:#fff;
@ -5187,11 +5188,11 @@ a.close.disabled {
border-left-color:#000
}
.tooltip-inner {
padding:.25rem .5rem;
color:#fff;
text-align:center;
background-color:var(--text-background);
border-radius:.25rem
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color: var(--light);
border-radius: .25rem
}
.popover {
position:absolute;

@ -5240,11 +5240,11 @@ a.close.disabled {
border-left-color: #000;
}
.tooltip-inner {
padding: 3px 8px;
color: #d5d5d5;
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color: var(--text-background);
border-radius: 2px;
background-color: var(--light);
border-radius: .25rem
}
.popover {
position: absolute;

@ -5701,11 +5701,11 @@ a.close.disabled {
}
.tooltip-inner {
padding: 0.25rem 0.5rem;
color: #fff;
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color:var(--text-background);
border-radius: 0.25rem;
background-color: var(--light);
border-radius: .25rem
}
.popover {

@ -5236,11 +5236,11 @@ a.close.disabled {
border-left-color: #000;
}
.tooltip-inner {
padding: 3px 8px;
color: #fff;
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color:var(--text-background);
border-radius: 2px;
background-color: var(--light);
border-radius: .25rem
}
.popover {
position: absolute;

@ -5697,11 +5697,11 @@ a.close.disabled {
}
.tooltip-inner {
padding: 0.25rem 0.5rem;
color: #fff;
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color:var(--text-background);
border-radius: 0.25rem;
background-color: var(--light);
border-radius: .25rem
}
.popover {

@ -5703,11 +5703,11 @@ a.close.disabled {
}
.tooltip-inner {
padding: 0.25rem 0.5rem;
color: #eeede9;
padding: .25rem .5rem;
color: var(--text);
text-align: center;
background-color: var(--text-background);
border-radius: 0.25rem;
background-color: var(--light);
border-radius: .25rem
}
.popover {

@ -97,6 +97,10 @@ export const CompilerApiMixin = (Base) => class extends Base {
return this.call('contentImport', 'resolveAndSave', url)
}
runScriptAfterCompilation (fileName: string) {
this.call('compileAndRun', 'runScriptAfterCompilation', fileName)
}
compileWithHardhat (configFile) {
return this.call('hardhat', 'compile', configFile)
}

@ -37,6 +37,7 @@ export interface ICompilerApi {
readFile: (file: string) => Promise<string>
open: (file: string) => void
saveCurrentFile: () => void
runScriptAfterCompilation: (fileName: string) => void,
logToTerminal: (log: terminalLog) => void

@ -8,6 +8,7 @@ import { compilerReducer, compilerInitialState } from './reducers/compiler'
import { resetEditorMode, listenToEvents } from './actions/compiler'
import { OverlayTrigger, Tooltip } from 'react-bootstrap' // eslint-disable-line
import { getValidLanguage } from '@remix-project/remix-solidity'
import { CopyToClipboard } from '@remix-ui/clipboard'
import './css/style.css'
@ -332,6 +333,19 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
compileTabLogic.runCompiler(externalCompType)
}
const compileAndRun = () => {
const currentFile = api.currentFile
if (!isSolFileSelected()) return
_setCompilerVersionFromPragma(currentFile)
let externalCompType
if (hhCompilation) externalCompType = 'hardhat'
else if (truffleCompilation) externalCompType = 'truffle'
api.runScriptAfterCompilation(currentFile)
compileTabLogic.runCompiler(externalCompType)
}
const _updateVersionSelector = (version, customUrl = '') => {
// update selectedversion of previous one got filtered out
let selectedVersion = version
@ -523,7 +537,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
onChangeRuns(settings.runs)
}
return (
return (
<section>
<article>
<header className='remixui_compilerSection border-bottom'>
@ -596,7 +610,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
<a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
<OverlayTrigger placement={'right'} overlay={
<Tooltip className="text-nowrap" id="overlay-tooltip">
<Tooltip className="text-nowrap" id="overlay-tooltip-hardhat">
<span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
</Tooltip>
}>
@ -612,7 +626,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
<label className="form-check-label custom-control-label" htmlFor="enableTruffle">Enable Truffle Compilation</label>
<a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/' target={'_blank'}>
<OverlayTrigger placement={'right'} overlay={
<Tooltip className="text-nowrap" id="overlay-tooltip">
<Tooltip className="text-nowrap" id="overlay-tooltip-truffle">
<span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Truffle Compilation</span>
</Tooltip>
}>
@ -621,35 +635,61 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
</a>
</div>
}
<div className='d-flex align-items-center'>
<button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_solidityCompileButton d-inline-block remixui_disabled mb-1 mt-3" title="Compile" onClick={compile} disabled={disableCompileButton}>
<div>
<button id="compileBtn" data-id="compilerContainerCompileBtn" className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3" onClick={compile} disabled={disableCompileButton}>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip-compile">
<div className="text-left">
<div><b>Ctrl+S</b> for compiling</div>
</div>
</Tooltip>
}>
<span>
{ <i ref={compileIcon} className="fas fa-sync remixui_iconbtn" aria-hidden="true"></i> }
Compile { typeof state.compiledFileName === 'string' ? extractNameFromKey(state.compiledFileName) || '<no file selected>' : '<no file selected>' }
</span>
</button>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip">
</OverlayTrigger>
</button>
<div className='d-flex align-items-center'>
<button id="compileAndRunBtn" data-id="compilerContainerCompileAndRunBtn" className="btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-3" onClick={compileAndRun} disabled={disableCompileButton}>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip-compile-run">
<div className="text-left">
<div><b>Ctrl+S</b> for compiling</div>
<div><b>Ctrl+Shift+S</b> for compiling and script execution:</div>
<div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div>
<pre>
<code>
/**<br />
* @title ContractName<br />
* @dev ContractDescription<br />
* @custom:dev-run-script file_path<br />
*/<br />
contract ContractName {'{}'}<br />
</code>
</pre>
Click to know more
<div><b>Ctrl+Shift+S</b> for compiling and script execution</div>
</div>
</Tooltip>
}>
<a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="ml-2 mt-3 mb-1 fas fa-info"></i></a>
</OverlayTrigger>
<span>
Compile and Run script
</span>
</OverlayTrigger>
</button>
<OverlayTrigger overlay={
<Tooltip id="overlay-tooltip-compile-run-doc">
<div className="text-left p-2">
<div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div>
<pre>
<code>
/**<br />
* @title ContractName<br />
* @dev ContractDescription<br />
* @custom:dev-run-script file_path<br />
*/<br />
contract ContractName {'{}'}<br />
</code>
</pre>
Click to know more
</div>
</Tooltip>
}>
<a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
</OverlayTrigger>
<CopyToClipboard tip="Copy tag to use in contract NatSpec" getContent={() => '@custom:dev-run-script file_path'} direction='top'>
<button className="btn remixui_copyButton ml-2 mt-3 mb-1 text-dark">
<i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
</button>
</CopyToClipboard>
</div>
</div>
</header>
</article>

@ -172,7 +172,7 @@
-webkit-animation: spin 2s infinite linear;
}
.remixui_solidityCompileButton {
.remixui_solidityCompileAndRunButton {
width: 94%;
}

Loading…
Cancel
Save