This experiment was with compiling C++ code to JavaScript code using the Cheerp compiler. Cheerp does C++ to JavaScript and C++ to WASM, though for this experiment I only used the C+ to JavaScript functionality.

Writing the C++ code for DOM manipulation was pretty straightforward. Their API mirrors that of Vanilla JS. Since I have familiarity with DOM manipulation via Vanilla JS, I was able to use Cheerp pretty easily.

There were a few quirks, such as the need to cast input elements to "HTMLInputElement" in order to get the value out, but it worked pretty well. I was able to bundle the todo CSS in the C++ package, but I did it by having the CSS as a C++ string - there isn't a CSS in C++ setup that I know of.

The release build was almost half the size of the debug build, so having compiler optimizations does help quite a bit. Both builds are minified, and since it compiled to native JS the bundle size was actually pretty small (only about 25KB for the release build - way smaller than anything I get from Emscripten's WASM builds which are usually 500+kB).