language selector disable/enable for '<'/'>'0.5.7

src/app/tabs/compileTab/compilerContainer.js

@@ -110,6 +110,11 @@ class CompilerContainer {
     return el
   }
 
+  _retriveVersion() {
+    let version = this._view.versionSelector.value
+    return version.substring(9,14)
+  }
+
   render () {
     this.compileTabLogic.compiler.event.register('compilerLoaded', (version) => this.setVersionText(version))
     this.fetchAllVersion((allversions, selectedVersion) => {
@@ -132,6 +137,11 @@ class CompilerContainer {
       <select onchange="${this.onchangeLoadVersion.bind(this)}" class="custom-select" id="versionSelector" disabled>
         <option disabled selected>Select new compiler version</option>
       </select>`
+    this._view.languageSelector = yo`
+      <select onchange="${this.onchangeLanguage.bind(this)}" class="custom-select" id="compilierLanguageSelector" title="Available since v0.5.7">
+        <option>Solidity</option>
+        <option>Yul</option>
+      </select>`
     this._view.version = yo`<span id="version"></span>`
 
     this._view.evmVersionSelector = yo`
@@ -177,13 +187,10 @@ class CompilerContainer {
             </div>
             <div class="row w-100 no-gutters mb-2">
               <div class="col-sm-4">
-                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="languageSelector">Language</label>
+                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label>
               </div>
               <div class="col-sm-8">
-              <select onchange="${this.onchangeLanguage.bind(this)}" class="custom-select" id="languageSelector">
-                <option>Solidity</option>
-                <option>Yul</option>
-              </select>
+                ${this._view.languageSelector}
               </div>
             </div>
             <div class="row w-100 no-gutters">
@@ -217,6 +224,7 @@ class CompilerContainer {
         </article>
       </section>`
 
+    this._updateLanguageSelector()
     return this._view.compileContainer
   }
 
@@ -240,7 +248,9 @@ class CompilerContainer {
 
   onchangeLanguage (event) {
     this.compileTabLogic.setLanguage(event.target.value)
-    this.compile()
+    if (this.config.get('currentFile') && this.config.get('autoCompile')) {
+      this.compile()
+    }
   }
 
   onchangeEvmVersion (_) {
@@ -256,6 +266,7 @@ class CompilerContainer {
   onchangeLoadVersion (event) {
     this.data.selectedVersion = this._view.versionSelector.value
     this._updateVersionSelector()
+    this._updateLanguageSelector()
   }
 
   _updateVersionSelector () {
@@ -294,6 +305,16 @@ class CompilerContainer {
     }
   }
 
+  _updateLanguageSelector () {
+    if (this._retriveVersion() < '0.5.7') {
+      this._view.languageSelector.setAttribute('disabled', '')
+      this._view.languageSelector.value = 'Solidity'
+      this.compileTabLogic.setLanguage('Solidity')
+    } else {
+      this._view.languageSelector.removeAttribute('disabled')
+    }
+  }
+
   setVersionText (text) {
     this.data.version = text
     if (this._view.version) this._view.version.innerText = text