reload runner

apps/remix-ide/src/app/components/hidden-panel.tsx

@@ -23,11 +23,18 @@ export class HiddenPanel extends AbstractPanel {
   }
 
   addView(profile: any, view: any): void {
+    console.log('addView', profile, view)
     super.removeView(profile)
+    this.renderComponent()
     super.addView(profile, view)
     this.renderComponent()
   }
 
+  removeView(profile: any): void {
+    super.removeView(profile)
+    this.renderComponent()
+  }
+
   updateComponent(state: any) {
     return <RemixPluginPanel header={<></>} plugins={state.plugins} />
   }

apps/remix-ide/src/app/components/panel.ts

@@ -23,6 +23,8 @@ export class AbstractPanel extends HostPlugin {
   }
 
   addView (profile, view) {
+    console.log('addView', profile, view)
+    console.log('this', this.plugins)
     if (this.plugins[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
     this.plugins[profile.name] = {
       profile: profile,

apps/remix-ide/src/app/tabs/script-runner-ui.tsx

@@ -15,7 +15,7 @@ const profile = {
   displayName: 'Script configuration',
   methods: ['execute'],
   events: ['log', 'info', 'warn', 'error'],
-  icon: 'assets/img/settings.webp',
+  icon: 'assets/img/ts-logo.svg',
   description: 'Set up a script runner',
   kind: '',
   location: 'sidePanel',
@@ -122,13 +122,12 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
   }
 
   async selectScriptRunner(config: ProjectConfiguration) {
-    console.log('selectScriptRunner', config)
+    if (await this.loadScriptRunner(config))
-    await this.loadScriptRunner(config)
       await this.saveCustomConfig(this.customConfig)
   }
 
   async loadScriptRunner(config: ProjectConfiguration): Promise<boolean> {
-    console.log('loadScriptRunner', config)
+    //console.log('loadScriptRunner', config)
     const profile: Profile = await this.plugin.call('manager', 'getProfile', 'scriptRunner')
     this.scriptRunnerProfileName = profile.name
     const testPluginName = localStorage.getItem('test-plugin-name')
@@ -144,13 +143,14 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
         url = `${baseUrl}?template=${config.name}&timestamp=${Date.now()}`
       }
     }
-    console.log('loadScriptRunner', profile)
+    //console.log('loadScriptRunner', profile)
     const newProfile: IframeProfile = {
       ...profile,
       name: profile.name + config.name,
       location: 'hiddenPanel',
       url: url
     }
+
     console.log('loadScriptRunner', newProfile)
     let result = null
     try {
@@ -161,7 +161,7 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
         await this.engine.register(plugin)
       }
       await this.plugin.call('manager', 'activatePlugin', newProfile.name)
-
+      console.log('activate done', newProfile.name)
       this.activeConfig = config
       this.on(newProfile.name, 'log', this.log.bind(this))
       this.on(newProfile.name, 'info', this.info.bind(this))
@@ -172,13 +172,22 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
       this.setErrorStatus(config.name, false, '')
       result = true
     } catch (e) {
-
+      console.log('Error loading script runner: ', newProfile.name, e)
-      this.engine.remove(newProfile.name)
+      const iframe = document.getElementById(`plugin-${newProfile.name}`);
+      if (iframe) {
+        console.log('remove iframe', iframe)
+        await this.call('hiddenPanel', 'removeView', newProfile)
+      }
+      console.log('deactivate', (this.engine as any))
+      delete (this.engine as any).manager.profiles[newProfile.name]
+      delete (this.engine as any).plugins[newProfile.name]
       console.log('is registered', newProfile.name, this.engine.isRegistered(newProfile.name))
       console.log('Error loading script runner: ', newProfile.name, e)
+      console.log('REMOVE', newProfile.name)
       this.setErrorStatus(config.name, true, e)
       result = false
     }
+    console.log('ENGINE', this.engine)
     this.setIsLoading(config.name, false)
     this.renderComponent()
     return result
@@ -186,6 +195,7 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
   }
 
   async execute(script: string, filePath: string) {
+    console.log(this.engine)
     console.log('is registered', `${this.scriptRunnerProfileName}${this.activeConfig.name}`, this.engine.isRegistered(`${this.scriptRunnerProfileName}${this.activeConfig.name}`))
     if (!this.scriptRunnerProfileName || !this.engine.isRegistered(`${this.scriptRunnerProfileName}${this.activeConfig.name}`)) {
       if (!await this.loadScriptRunner(this.activeConfig)) {
@@ -195,10 +205,12 @@ export class ScriptRunnerUIPlugin extends ViewPlugin {
     }
     console.log('execute', this.activeConfig)
     try {
+      this.setIsLoading(this.activeConfig.name, true)
       await this.call(`${this.scriptRunnerProfileName}${this.activeConfig.name}`, 'execute', script, filePath)
     } catch (e) {
       console.error('Error executing script', e)
     }
+    this.setIsLoading(this.activeConfig.name, false)
 
   }
 

apps/remix-ide/src/assets/img/ts-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M285.4 417.9V488c11.5 5.8 25 10.2 40.3 13.1c15.4 3.2 32 4.2 49.3 4.2c16.6 0 32.6-1.6 48-4.8s28.5-8.6 40-16s20.2-17 27.2-28.8c6.7-11.8 9.9-26.6 9.9-44.2c0-12.8-1.9-24-5.4-33.6s-9.3-17.9-16.6-25.6c-7-7.4-15.7-14.1-25.6-20.2c-9.9-5.8-21.4-11.5-33.6-16.6c-9.3-3.8-17.6-7.4-25-11.2c-7.4-3.5-13.4-7-18.6-10.9s-9.3-7.7-11.8-11.8c-2.9-4.2-4.2-9-4.2-14.1c0-4.8 1.3-9.3 3.8-12.8c2.6-3.8 6.1-7 10.6-9.9s10.2-4.8 16.6-6.4c6.7-1.6 14.1-2.2 21.8-2.2c5.8 0 11.8 .6 18.6 1.3s12.8 2.2 19.5 4.2s12.8 4.2 19.2 6.7c6.1 2.9 11.8 6.1 17.3 9.6V192.6c-10.6-4.2-22.4-7-34.9-9.3s-27.2-3.2-43.5-3.2c-16.6 0-32.6 1.9-47.4 5.4s-27.8 9.3-39.4 16.6c-11.5 7.7-20.2 17.3-26.9 28.8s-9.9 25.9-9.9 42.2c0 20.8 6.1 38.7 17.9 53.4c12.2 14.7 30.4 27.2 54.7 37.4c9.6 4.2 18.6 8 26.9 11.5s15.4 7.7 21.4 11.8s10.9 8.6 14.4 13.4s5.4 10.6 5.4 16.6c0 4.5-1 8.6-3.2 12.8c-2.2 3.8-5.4 7-9.9 10.2c-4.2 3.2-9.9 5.1-16.6 6.7s-14.4 2.2-23.4 2.2c-15.4 0-30.1-2.9-45.1-8c-15.4-5.1-29.1-13.1-41.9-23.7l0 0zM168.6 243.5h90.2V185.6H7.4v57.9H97v257h71.4l.3-257 0 0z"/></svg>

apps/remix-ide/src/remixEngine.js

@@ -29,7 +29,7 @@ export class RemixEngine extends Engine {
     if (name === 'solcoder') return { queueTimeout: 60000 * 2 }
     if (name === 'cookbookdev') return { queueTimeout: 60000 * 3 }
     if (name === 'contentImport') return { queueTimeout: 60000 * 3 }
-    
+    if (name === 'scriptRunnerBridge') return { queueTimeout: 2000 }
     return { queueTimeout: 10000 }
   }
 

libs/remix-ui/scriptrunner/src/lib/script-runner-ui.tsx

@@ -3,7 +3,7 @@ import { Accordion, Card, Button } from "react-bootstrap";
 import axios from "axios";
 import { customScriptRunnerConfig, Dependency, ProjectConfiguration } from "../types";
 import { FormattedMessage } from "react-intl";
-import { faCheck, faExclamationCircle, faToggleOn } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDown, faAngleRight, faCaretDown, faCaretRight, faCheck, faChevronLeft, faChevronUp, faExclamationCircle, faRedoAlt, faToggleOn } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Profile } from "@remixproject/plugin-utils";
 import { IframeProfile, ViewProfile } from "@remixproject/engine-web";
@@ -29,13 +29,18 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
   const { loadScriptRunner, configurations, activeConfig, enableCustomScriptRunner } = props;
   const [activeKey, setActiveKey] = useState('default');
 
+  useEffect(() => {
+  }, [activeKey])
+
   if (!configurations) {
     return <div>Loading...</div>;
   }
 
+
+
   return (
     <div className="px-1">
-      <Accordion defaultActiveKey="default">
+      <Accordion activeKey={activeKey} defaultActiveKey="default">
         {configurations.filter((config) => config.publish).map((config: ProjectConfiguration, index) => (
           <div key={index}>
             <div className="d-flex align-items-baseline justify-content-between">
@@ -44,8 +49,14 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
                   overflowX: 'hidden',
                   textOverflow: 'ellipsis'
                 }}
+                onClick={() => setActiveKey(activeKey === config.name ? '' : config.name)}
               >
+                <div className="d-flex">
+                  {activeKey === config.name ?
+                    <FontAwesomeIcon icon={faCaretDown}></FontAwesomeIcon> :
+                    <FontAwesomeIcon icon={faCaretRight}></FontAwesomeIcon>}
                   <div className="pl-2">{config.title || config.name}</div>
+                </div>
               </Accordion.Toggle>
               <div className="d-flex align-items-baseline">
                 {config.isLoading && <div className="">
@@ -55,8 +66,13 @@ export const ScriptRunnerUI = (props: ScriptRunnerUIProps) => {
                   <CustomTooltip tooltipText={config.error}>
                     <FontAwesomeIcon icon={faExclamationCircle}></FontAwesomeIcon>
                   </CustomTooltip>
+
+                </div>}
+                {!config.isLoading && config.errorStatus && config.error &&
+                  <div onClick={() => loadScriptRunner(config)} className="pointer px-2">
+                    <FontAwesomeIcon icon={faRedoAlt}></FontAwesomeIcon>
                   </div>}
-                {!config.isLoading &&
+                {!config.isLoading && !config.errorStatus && !config.error &&
                   <div onClick={() => loadScriptRunner(config)} className="pointer px-2">
                     {activeConfig && activeConfig.name !== config.name ?
                       <FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon> :