Espruino Web IDE modification : tab-bar, multi tab/files

[espruino-discuss3]

Posted at 2020-05-21 by FlorianDH

Hi everyone!

I'm a Belgian student in applied informatics and currently I'm following a traineeship at Tomas Bata University in the Czech Republic.
The university gave me the assignment to make some modifications for the Espruino Web IDE and share it with @gfwilliams and the open-source community so it would have a chance to be used and implemented in the public build of the IDE.

TAB-BAR

As the title suggests I have been working on some changes that have to do with a tab-bar.
The current version of the IDE only allows to work in a code or blocky editor.
With my changes it is now possible to work and switch between multiple files without having to load every file or change the editor.

To make it more clear how everything works and looks I've made a video to show it off : (see youtube-link below)
https://youtu.be/VzUx1m-8Mnw

My fork of the Espruino Web IDE can be found on my Github : (see github-link below)
https://github.com/FlorianDH/EspruinoWebIDE

I really hope my modifications are useful for the Espruino comunity.
Thank you for your interest and kind regards.

Florian

[espruino-discuss3]

Posted at 2020-05-21 by @fanoush

Very nice. Tried it, went to https://floriandh.github.io/EspruinoWebIDE/ but cannot create javascript file, it throws "code.js:137 Uncaught TypeError: Cannot read property 'setFilesArray' of undefined at HTMLButtonElement. "

also one letter name "t" gives error "Name cannot contain whitespace".

Can it load other files from other tabs as modules? i.e. you have tab "module1" and "main" and main would use require("module1") and it would get loaded from the other tab?

---

Posted at 2020-05-21 by FlorianDH

Hi Fanoush thank you for the fast review, I will check it out.
I have to disappoint you, my modification doesn't support the use of the require() function.
(Nice idea though!)

---

Posted at 2020-05-21 by FlorianDH

Hi Fanoush, I can't seem to find your error, how do you run the IDE? On Chrome or Node.js?
I did fixed the letter error, now it is possible to have a one character named file.

---

Posted at 2020-05-21 by @fanoush

opened https://floriandh.github.io/EspruinoWebI­DE/ in Chrome
see screenshot https://ibb.co/7V5zK3m the error marked happens on each click and dialog does not close. Also there are other errors on load, maybe related.

---

Posted at 2020-05-21 by FlorianDH

Thank you for pointing this out, I have only been running it as a Chrome extensions or with Node.js.
Not with github.io, I will see if I can make it work this way.

---

Posted at 2020-05-21 by @fanoush

Thank you. Not sure if github.io hosting is somewhat special but the webide itself is hosted at https://www.espruino.com/ide/ in same/similar way without needing node.js or chrome extension too.

---

Posted at 2020-05-22 by @allObjects

Looking forward to that... excellent work.... had at one time taken an attempt... but it had to take a back seat... because with any IDE I could manage my modules and the only thing to upload is one file... so there it lost importance.

If you change something and you have cycles left, take a look at the find replace... it is just a bit too much vi / linux / shell script like... If you can dumb the UI down / make it more like most ides support find / find-replace w/ and w/o regular expressions ...single replace and find next, replace all globally or in selected line (and w/ and w/o wrap around... - got the ideas from Eclipse (also pre populate find expression w/ selected text if there is....).

---

Posted at 2020-05-22 by @MaBecker

What a nice work - Thanks for sharing.

---

Posted at 2020-05-22 by @gfwilliams

This looks amazing - thank you! I'm planning to add an online element to the IDE soon (allowing cloud saves) so this will fit in with that perfectly.

If you could get this working well on the github.io version that would be great - that's what most new users use at the moment I believe, and what 99% will do when Google shuts the app store soon.

Just a few questions though...

• If you have a modified file and you click close, does it warn you?
• If you choose the 'save graphical editor to JS' option in settings, where does the JS file created from the graphical editor end up?
• Does this integrate with the 'Storage' icon? eg. being able to download a file from Storage to a new tab?
• Are you able to keep track of modified files correctly? I know chrome's storage tends to be rate limited so after a few minutes of saving updates for every change it tends to break. I recently made a change to localStorage so actually it might all be fine though.

For modules, it may actually be trivial. Since there's now the 'upload to' option in the upload icon, if that was changed per-file, it would be possible to:

• Create a new module file
• Choose to upload it to a file called mymodule in Storage

Then you could flick back to your main application and when you click upload it'd then upload that to ram/flash/whatever and it'd load your module.

But yes, I'm definitely up for including this once it works fine online - and I can look at adding the module support at a later date.

---

Posted at 2020-05-22 by @fanoush

because with any IDE I could manage my modules and the only thing to upload is one file... so there it lost importance.

So would that idea I mentioned help - require("module") would first try to load module from opened tab with same name? It is still sort of hack as those tabs are now unrelated, some extra project file would be better so whole set would be treated as one project and then module could be loaded even if it is not opened in tab, and whole set could be closed or opened. But even without this project management, would it be worth it to have this simple way? I hope it would be relatively easy to add to this.

EDIT: oh what gordon mentioned - uploading each module to storage before main file is also solution for this

---

Posted at 2020-05-22 by TomasJ

Hi, it looks like the only problem is that your manifest is not loaded. The requested URL is https://floriandh.github.io/manifest.json but the correct address should look like this https://espruino.github.io/EspruinoWebIDE/manifest.json.

---

Posted at 2020-05-26 by @gfwilliams

@fanoush yeah, I was wondering about that. I think it probably makes sense to integrate that functionality into the 'online IDE' stuff when it comes along and files can be stored - I can imagine it being a bit frustrating if you happen to close a window and then the upload stops going :)