Fixed compiler external api

3 years ago · 01b3e593bd
parent ce59d793b6
commit 01b3e593bd
7 changed files with 86 additions and 60 deletions
--- a/apps/remix-ide-e2e/src/commands/verifyContracts.ts
+++ b/apps/remix-ide-e2e/src/commands/verifyContracts.ts
@ -22,12 +22,12 @@ function verifyContracts (browser: NightwatchBrowser, compiledContractNames: str
      if (opts.version) {
        browser
          .click('*[data-id="compilation-details"]')
-          .waitForElementVisible('*[data-id="treeViewDivcompiler"]')
+          .waitForElementVisible('*[data-id="treeViewDivtreeViewItemcompiler"]')
          .pause(2000)
-          .click('*[data-id="treeViewDivcompiler"]')
-          .waitForElementVisible('*[data-id="treeViewLicompiler/version"]')
-          .assert.containsText('*[data-id="treeViewLicompiler/version"]', `version:\n ${opts.version}`)
-          .modalFooterCancelClick()
+          .click('*[data-id="treeViewDivtreeViewItemcompiler"]')
+          .waitForElementVisible('*[data-id="treeViewLiversion"]')
+          .assert.containsText('*[data-id="treeViewLiversion"]', `${opts.version}`)
+          .click('[data-id="workspacesModalDialog-modal-footer-ok-react"]')
          .perform(() => {
            done()
            callback()
--- a/apps/remix-ide/src/app/tabs/compile-tab.js
+++ b/apps/remix-ide/src/app/tabs/compile-tab.js
@ -70,6 +70,8 @@ class CompileTab extends ViewPlugin {
    this.isHardHatProject = false
    this.compileErrors = {}
    this.compiledFileName = ''
+    this.selectedVersion = ''
+    this.configurationSettings = null

    this.el = document.createElement('div')
    this.el.setAttribute('id', 'compileTabView')
@ -196,6 +198,10 @@ class CompileTab extends ViewPlugin {
    this.hhCompilation = value
  }

+  setSelectedVersion (version) {
+    this.selectedVersion = version
+  }
+
  getCompilationResult () {
    return this.compileTabLogic.compiler.state.lastCompilationResult
  }
@ -219,7 +225,7 @@ class CompileTab extends ViewPlugin {
   * @param {object} settings {evmVersion, optimize, runs, version, language}
   */
  async compileWithParameters (compilationTargets, settings) {
-    settings.version = settings.version || this.compilerContainer.data.selectedVersion
+    settings.version = settings.version || this.selectedVersion
    const res = await compile(compilationTargets, settings)
    return res
  }
@ -227,7 +233,7 @@ class CompileTab extends ViewPlugin {
  // This function is used for passing the compiler configuration to 'remix-tests'
  getCurrentCompilerConfig () {
    return {
-      currentVersion: this.compilerContainer.data.selectedVersion,
+      currentVersion: this.selectedVersion,
      evmVersion: this.compileTabLogic.evmVersion,
      optimize: this.compileTabLogic.optimize,
      runs: this.compileTabLogic.runs
@ -240,20 +246,10 @@ class CompileTab extends ViewPlugin {
   * @param {object} settings {evmVersion, optimize, runs, version, language}
   */
  setCompilerConfig (settings) {
-    return new Promise((resolve, reject) => {
-      addTooltip(yo`<div><b>${this.currentRequest.from}</b> is updating the <b>Solidity compiler configuration</b>.<pre class="text-left">${JSON.stringify(settings, null, '\t')}</pre></div>`)
-      this.compilerContainer.setConfiguration(settings)
-      // @todo(#2875) should use loading compiler return value to check whether the compiler is loaded instead of "setInterval"
-      let timeout = 0
-      const id = setInterval(() => {
-        timeout++
-        console.log(this.data.loading)
-        if (!this.data.loading || timeout > 10) {
-          resolve()
-          clearInterval(id)
-        }
-      }, 200)
-    })
+    this.configurationSettings = settings
+    this.renderComponent()
+    // @todo(#2875) should use loading compiler return value to check whether the compiler is loaded instead of "setInterval"
+    addTooltip(yo`<div><b>${this.currentRequest.from}</b> is updating the <b>Solidity compiler configuration</b>.<pre class="text-left">${JSON.stringify(settings, null, '\t')}</pre></div>`)
  }

  // TODO : Add success alert when compilation succeed
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, useReducer } from 'react' // eslint-disable-line
 import semver from 'semver'
-import { CompilerContainerProps } from './types'
+import { CompilerContainerProps, ConfigurationSettings } from './types'
 import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promisedMiniXhr } from './logic/compiler-utils' // eslint-disable-line
 import { compilerReducer, compilerInitialState } from './reducers/compiler'
@ -9,7 +9,7 @@ import { resetCompilerMode, resetEditorMode, listenToEvents } from './actions/co
 import './css/style.css'

 export const CompilerContainer = (props: CompilerContainerProps) => {
-  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion, isHardHatProject } = props // eslint-disable-line
+  const { editor, config, queryParams, compileTabLogic, tooltip, modal, compiledFileName, setHardHatCompilation, updateCurrentVersion, isHardHatProject, configurationSettings  } = props // eslint-disable-line
  const [state, setState] = useState({
    hideWarnings: false,
    autoCompile: false,
@ -38,13 +38,13 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
      setState(prevState => {
        return { ...prevState, allversions }
      })
-      if (isURL) _updateVersionSelector(selectedVersion)
+      if (isURL) _updateVersionSelector(state.defaultVersion, selectedVersion)
      else {
        setState(prevState => {
          return { ...prevState, selectedVersion }
        })
        updateCurrentVersion(selectedVersion)
-        _updateVersionSelector()
+        _updateVersionSelector(selectedVersion)
      }
    })
    const currentFileName = config.get('currentFile')
@ -115,6 +115,12 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
    }
  }, [compilerContainer.editor.mode])

+  useEffect(() => {
+    if (configurationSettings) {
+      setConfiguration(configurationSettings)
+    }
+  }, [configurationSettings])
+
  // fetching both normal and wasm builds and creating a [version, baseUrl] map
  const fetchAllVersion = async (callback) => {
    let selectedVersion, allVersionsWasm, isURL
@ -197,8 +203,10 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
          const compilerToLoad = semver.maxSatisfying(releasedVersions, pragma)
          const compilerPath = state.allversions.filter(obj => !obj.prerelease && obj.version === compilerToLoad)[0].path
          if (state.selectedVersion !== compilerPath) {
-            state.selectedVersion = compilerPath
-            _updateVersionSelector()
+            setState((prevState) => {
+              return { ...prevState, selectedVersion: compilerPath }
+            })
+            _updateVersionSelector(compilerPath)
          }
        }
      }
@ -293,9 +301,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
    return semver.coerce(version) ? semver.coerce(version).version : ''
  }

-  const _updateVersionSelector = (customUrl = '') => {
+  const _updateVersionSelector = (version, customUrl = '') => {
    // update selectedversion of previous one got filtered out
-    let selectedVersion = state.selectedVersion
+    let selectedVersion = version
    if (!selectedVersion || !_shouldBeAdded(selectedVersion)) {
      selectedVersion = state.defaultVersion
      setState(prevState => {
@ -370,7 +378,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
    setState(prevState => {
      return { ...prevState, selectedVersion: url }
    })
-    _updateVersionSelector(url)
+    _updateVersionSelector(state.defaultVersion, url)
  }

  const handleLoadVersion = (value) => {
@ -378,7 +386,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
      return { ...prevState, selectedVersion: value }
    })
    updateCurrentVersion(value)
-    _updateVersionSelector()
+    _updateVersionSelector(value)
    _updateLanguageSelector()
  }

@ -402,8 +410,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
    })
  }

-  const handleOptimizeChange = (e) => {
-    const checked = !!e.target.checked
+  const handleOptimizeChange = (value) => {
+    const checked = !!value

    config.set('optimise', checked)
    compileTabLogic.setOptimize(checked)
@ -418,8 +426,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
    })
  }

-  const onChangeRuns = (e) => {
-    const runs = e.target.value
+  const onChangeRuns = (value) => {
+    const runs = value

    compileTabLogic.setRuns(parseInt(runs))
    state.autoCompile && compile()
@ -456,6 +464,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
  }

  const handleEvmVersionChange = (value) => {
+    if (!value) return
    let v = value
    if (v === 'default') {
      v = null
@ -474,6 +483,18 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
    setHardHatCompilation(checked)
  }

+    /*
+    The following functions map with the above event handlers.
+    They are an external API for modifying the compiler configuration.
+  */
+  const setConfiguration = (settings: ConfigurationSettings) => {
+    handleLoadVersion(`soljson-v${settings.version}.js`)
+    handleEvmVersionChange(settings.evmVersion)
+    handleLanguageChange(settings.language)
+    handleOptimizeChange(settings.optimize)
+    onChangeRuns(settings.runs)
+  }
+
  return (
    <section>
      <article>
@ -501,9 +522,9 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
          </div>
          <div className="mb-2">
            <label className="remixui_compilerLabel form-check-label" htmlFor="compilierLanguageSelector">Language</label>
-            <select onChange={(e) => handleLanguageChange(e.target.value)} className="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
-              <option>Solidity</option>
-              <option>Yul</option>
+            <select onChange={(e) => handleLanguageChange(e.target.value)} value={state.language} className="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
+              <option value='Solidity'>Solidity</option>
+              <option value='Yul'>Yul</option>
            </select>
          </div>
          <div className="mb-2">
@ -528,7 +549,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
            </div>
            <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
              <div className="justify-content-between align-items-center d-flex">
-                <input onChange={handleOptimizeChange} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimise} />
+                <input onChange={(e) => { handleOptimizeChange(e.target.checked) }} className="custom-control-input" id="optimize" type="checkbox" checked={state.optimise} />
                <label className="form-check-label custom-control-label" htmlFor="optimize">Enable optimization</label>
                <input
                  min="1"
@ -538,7 +559,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                  defaultValue="200"
                  type="number"
                  title="Estimated number of times each opcode of the deployed code will be executed across the life-time of the contract."
-                  onChange={onChangeRuns}
+                  onChange={(e) => onChangeRuns(e.target.value)}
                  disabled={!state.optimise}
                />
              </div>
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@ -19,7 +19,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
    })) : []

    setContractList(contractList)
-    if (!selectedContract && contractList.length) setSelectedContract(contractList[0].name)
+    if (contractList.length) setSelectedContract(contractList[0].name)
  }, [contractMap])

  const resetStorage = () => {
@ -162,7 +162,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
      swarmLocation: 'Swarm url where all metadata information can be found (contract needs to be published first)',
      web3Deploy: 'Copy/paste this code to any JavaScript/Web3 console to deploy this contract'
    }
-    const contractProperties = contractsDetails[selectedContract]
+    const contractProperties = contractsDetails[selectedContract] || {}
    const log = <div className="remixui_detailsJSON">
      {
        Object.keys(contractProperties).map((propertyName, index) => {
--- a/libs/remix-ui/solidity-compiler/src/lib/logic/compiler-helpers.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/logic/compiler-helpers.ts
@ -4,19 +4,16 @@ import { Compiler } from '@remix-project/remix-solidity'
 import { CompilerAbstract } from './compiler-abstract'

 export const compile = async (compilationTargets, settings, contentResolverCallback) => {
-  const res = await (() => {
-    return new Promise((resolve, reject) => {
-      const compiler = new Compiler(contentResolverCallback)
-      compiler.set('evmVersion', settings.evmVersion)
-      compiler.set('optimize', settings.optimize)
-      compiler.set('language', settings.language)
-      compiler.set('runs', settings.runs)
-      compiler.loadVersion(canUseWorker(settings.version), urlFromVersion(settings.version))
-      compiler.event.register('compilationFinished', (success, compilationData, source) => {
-        resolve(new CompilerAbstract(settings.version, compilationData, source))
-      })
-      compiler.event.register('compilerLoaded', _ => compiler.compile(compilationTargets, ''))
+  return new Promise((resolve, reject) => {
+    const compiler = new Compiler(contentResolverCallback)
+    compiler.set('evmVersion', settings.evmVersion)
+    compiler.set('optimize', settings.optimize)
+    compiler.set('language', settings.language)
+    compiler.set('runs', settings.runs)
+    compiler.loadVersion(canUseWorker(settings.version), urlFromVersion(settings.version))
+    compiler.event.register('compilationFinished', (success, compilationData, source) => {
+      resolve(new CompilerAbstract(settings.version, compilationData, source))
    })
-  })()
-  return res
+    compiler.event.register('compilerLoaded', _ => compiler.compile(compilationTargets, ''))
+  })
 }
--- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
@ -9,7 +9,7 @@ import { Renderer } from '@remix-ui/renderer'
 import './css/style.css'

 export const SolidityCompiler = (props: SolidityCompilerProps) => {
-  const { plugin, plugin : { editor, config, queryParams, compileTabLogic, currentFile, fileProvider, fileManager, contractsDetails, contractMap, compileErrors, isHardHatProject, setHardHatCompilation } } = props
+  const { plugin, plugin : { editor, config, queryParams, compileTabLogic, currentFile, fileProvider, fileManager, contractsDetails, contractMap, compileErrors, isHardHatProject, setHardHatCompilation, configurationSettings } } = props
  const [state, setState] = useState({
    contractsDetails: {},
    eventHandlers: {},
@ -42,6 +42,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {

  const updateCurrentVersion = (value) => {
    setCurrentVersion(value)
+    plugin.setSelectedVersion(value)
  }

  const modal = async (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => {
@ -81,7 +82,7 @@ export const SolidityCompiler = (props: SolidityCompilerProps) => {
  return (
    <>
      <div id="compileTabView">
-        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} setHardHatCompilation={setHardHatCompilation.bind(plugin)} updateCurrentVersion={updateCurrentVersion} isHardHatProject={isHardHatProject} />
+        <CompilerContainer editor={editor} config={config} queryParams={queryParams} compileTabLogic={compileTabLogic} tooltip={toast} modal={modal} compiledFileName={currentFile} setHardHatCompilation={setHardHatCompilation.bind(plugin)} updateCurrentVersion={updateCurrentVersion} isHardHatProject={isHardHatProject} configurationSettings={configurationSettings} />
        <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>
--- a/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
+++ b/libs/remix-ui/solidity-compiler/src/lib/types/index.ts
@ -18,6 +18,8 @@ export interface SolidityCompilerProps {
    call: (...args) => void
    on: (...args) => void,
    setHardHatCompilation: (value: boolean) => void,
+    setSelectedVersion: (value: string) => void,
+    configurationSettings: ConfigurationSettings
  },
 }

@ -26,12 +28,13 @@ export interface CompilerContainerProps {
  config: any,
  queryParams: any,
  compileTabLogic: any,
-  tooltip: (message: string) => void,
+  tooltip: (message: string | JSX.Element) => void,
  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
  compiledFileName: string,
  setHardHatCompilation: (value: boolean) => void,
  updateCurrentVersion: any,
-  isHardHatProject: boolean
+  isHardHatProject: boolean,
+  configurationSettings: ConfigurationSettings
 }
 export interface ContractSelectionProps {
  contractMap: {
@ -42,3 +45,11 @@ export interface ContractSelectionProps {
  modal: (title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
  contractsDetails: Record<string, any>
 }
+
+export interface ConfigurationSettings {
+  version: string,
+  evmVersion: string,
+  language: string,
+  optimize: boolean,
+  runs: string
+}