DEMO HERE and as soon as github gets itself back together I can also push the newest changes to it!

Refactor, refactor and some more refactoring

Actual new features

I added options to the top. You can switch the output type and script language. But seeing as there currently is only 1 language (Rhai) and 1 output type (Grid) they are kinda pointless. I also added output specific options, for Grid it is currently just the resolution. Also I added a spinner to the run button to indicate that the script is running but that didn’t work until a refactor/feature mentioned later.

Refactors

The rest of the time was all spent on refactoring. But I do think it was worth it and it is now way easier to add new features.

Modularity

I introduced a state system where each output type has its own module. Each output only exposes a common interface with a init, deinit and pipeline method. This way other parts, don’t need to deal with what output is set. Each output also deals with its specific settings and UI itself.

->

I fully switched from to . I was kind of fed up with the loosey goosey attitude of javascript where nothing is really defined. Typescript doesn’t fix that entirely but does help to find a lot more bugs when writing the code and not at runtime.

Vite

As does need some sort of bundler/builder I set up vite for the project. This also means I can make the repo more source files only. Before I had the compiled wasm also in the repo, but now it gets compiled together with vite’s build process in the github action. Probably vite also has some other performance benefits.

Web Worker

As I mentioned before I added a spinner to when the script was being run to show that something is actually happening, but the that wasn’t showing. Because I had everything running off of the main thread calling the WASM blocked everything else even the UI and the browser would ask whether to close the page. The solution is to move it to a web worker, which runs in a separate thread.

This was probably the most difficult thing, because it required major changes and it is a bit more complicated because of WASM. When a WASM function returns something, it normally uses a pointer to shared memory, so that there is no unnecessary cloning, but because the WASM runs in the memory of the web worker the main thread can’t access it. So I had to work around that.