asm-dom

FWIW if you look around, C++ and Rust libraries for DOM manipulation exist (I haven't searched for other languages which compile to WASM): https://github.com/mbasso/asm-dom https://github.com/sycamore-rs/sycamore I think solving the problem of DOM access on the library level is exactly the right way to tackle this problem. The library user don't need to care about specific WASM features, and the library implementation can be simplified when those WASM features become available (and also implement per-browser fallback paths)

Via https://github.com/mbasso/asm-dom? (for example). For every complex self generated challenge there is an even more complex solution?

There are already several libs that compile to WebAssembly and let you manipulate the DOM, e.g. https://github.com/mbasso/asm-dom You can already call out to small JS code snippets that work on the DOM from WAM, and since DOM manipulation is slow anyway, the small overhead you get for calling into JS won't make a difference. So I'd say, go ahead and manipulate the DOM from WASM, even if WASM supports direct DOM access later it won't make much of a difference (apart from slightly less and cleaner code in the DOM-access library).

Virtual DOM springs to mind. React/Vue.js/Ember all implement a lightweight fascimile of the DOM used to do support DOM diffing, which that could be ported to WASM. Here's an example of someone who has written one already: https://github.com/mbasso/asm-dom

yes, please read https://kripken.github.io/emscripten-site/docs/porting/conne... also debug this project and see how it controls html via c++ https://github.com/mbasso/asm-dom

Rust -- https://github.com/koute/stdweb C++ -- https://github.com/mbasso/asm-dom I don't know exactly how these work but Emscripten allows interop both ways (embedding JS in native code and calling native code from JS) -- https://kripken.github.io/emscripten-site/docs/porting/conne...

I am extremely unclear on whatever point you're trying to make, here, because it really does seem to come from a place of ignorance on WASM and JS. It makes no sense. It seems like you're claiming, in a really roundabout way, that WASM will never have DOM access, even though it's planned[1]. There are even VDOMs[2] for WASM already. Future WASM implementations that include DOM access can absolutely, and for many folks will, replace Javascript. [1]: https://github.com/WebAssembly/design/blob/master/FAQ.md [2]: https://github.com/mbasso/asm-dom

>WebAssembler does not interact with the DOM and probably never will do. Because it doesn't really need to. You can already bridge this gap by using javascript as a bridge or "glue" between WebAssembly and the DOM. Example: https://github.com/mbasso/asm-dom > Page scripting will still be done in JS for several years. There are people who thought that corporate web pages would be done in Flash (& Actionscript) for several years.

https://github.com/mbasso/asm-dom/commit/1e1659ebc2357bf34be... Is in the example the usual place to put this?

Very cool, thanks for publishing this! I'm learning some interesting things by reading the code. I'm curious about the three different coding styles used to define functions in domApi.js, if they have different behaviors, are meant to imply different meanings, or if they are just different styles for the same thing: https://github.com/mbasso/asm-dom/blob/master/src/js/domApi.... 'setAttribute'(nodePtr, attr, value) { 'parentNode': nodePtr => ( 'setTextContent': (nodePtr, text) => { Why the single quotes around function names? Why are some normal functions and others fat arrow functions? Why omit the parens around the param of a one parameter fat arrow function -- does that define a get accessor?

I was going to say that the API is almost identical to Snabbdom's and ask whether that was voluntary or an independent reinvention, but given how similar the "inline example" is[0][1] (down to the comments) I assume either snabbdom was used as a starting point or the inspiration is very much wilful? [0] https://github.com/mbasso/asm-dom#inline-example [1] https://github.com/snabbdom/snabbdom#inline-example