Examples on (or a HOWTO) JavaScript/Node.js/wasm-bindgen integration with Leptos

[metatoaster]

So I created an example project originally under my local clone of leptos-rs/leptos, but given that it can function as a standalone project I have instead created a separate repo as leptos_axum_js_ssr, mostly because I want to (or at least try to)/be able to structure the changesets into logical sets of standalone improvements to show how the solution evolves.

This repo was for me to toy/test around with ideas while functional as a way to showcase examples on how (not) to integrate Leptos with JavaScript libraries, via both <script>/<Script> and wasm-bindgen, and how to deal with hydration vs. "unexpected" DOM manipulation done by those JavaScript libraries. Also generally functions as a sandbox for me to observe effects. I think I am at the point where I am comfortable with showing it to a wider audience.

I have also noticed a number of discussion on various platforms related to Leptos about the lack of examples in this topic that I thought this may be a useful addition as a one of the examples in the Leptos source tree. Often times the solution is pointing vaguely at wasm-bindgen but that's often done without the consideration of the framework(s) being integrated together.

This discussion thread caught my eye because one of my actual goals for the project I am working on is to integrate that very same library (highlight.js) into Leptos, and so the demo I wrote integrates that JavaScript package into a Leptos application in 7 similar but different ways (as of posting of this), 5 of which is definitely broken to showcase how folks inexperienced with mixing frameworks (or unfamiliar with Leptos or wasm in general) might mistakenly do and end up with (often subtly) non-working solutions. Especially when sometimes it works and then sometimes it doesn't, not realizing that this a frustrating mess sometimes boils down to a race condition between two competing sources of truth, or that there are other ways to work around the problem.

There is one more example I want to try and I hope to whack it out by next week (specifically to toy with inner html), but in the mean time I am interested in your thoughts on the examples, especially whether the Leptos project leads are interested in having this as part of the examples with the Leptos source tree, i.e. whether or not what I've done is a sufficient candidate for inclusion.

[ssizan01]

This is very helpful. Thank you!!