Interface with external JS library

[runfalk]

Hi!

I'm interested in using Seed but I also need Mapbox GL). I tried to look for that in the documentation, but there doesn't seem to be any mention on how to interface Seed with JS libraries (if it's even possible?).

What's the best way of doing this?

[MartinKavik]

Hi @runfalk,

Rust <-> Js communication is possible (for instance, all Rust frameworks have to talk with the Js world to call browser APIs). There is also a WIP tutorial that uses Auth0's Js library to provide authentication - see e.g. https://seed-rs.org/0.7.0/time_tracker_authentication.

However for your case I would recommend to wrap Mapbox into a custom element. This way, the Mapbox Js libraries can modify DOM as they wish and it doesn't fight with the framework's DOM patching and you will be able to use it in any SPA framework.

Some links that should help you a bit:

• https://github.com/seed-rs/seed/tree/master/examples/custom_elements
• https://package.elm-lang.org/packages/gampleman/elm-mapbox/latest/
• https://www.webcomponents.org/element/PolymerVis/mapbox-gl
• https://rustwasm.github.io/wasm-bindgen/introduction.html

Hope it helps!

[flosse]

@runfalk https://github.com/kartevonmorgen/leaflet-rs might be interesting for you.

[seanybaggins]

Kinda a similar question...

Is using bootstrap by just modifying the class attributes within the html macros okay?

Does bootstrap interact with the DOM in a way that could not play nice with Seed?

[MartinKavik]

@seanybaggins Bootstrap uses jQuery.. so it modifies DOM a lot (if nothing changed recently). There are some efforts to create a "native Bootstrap" (i.e. Bootstrap with JS without jQuery) or even a combination of Bootstrap with lit-element (it should work with Seed) - see e.g. https://medium.com/lightbaseio/bootstrap-4-lit-element-37c857a6bcca. But generally there is a reason why React, Vuejs and others have a special Bootstrap library. I've written some Bootstrap components during a job for my client but nothing complete or open-source. It makes sense to write a proper Bootstrap library once Styles and Hooks are fully integrated into Seed. Until then I would suggest to use CSS-only frameworks like Bulma or WebComponent frameworks like https://www.fast.design/ (I didn't test fast but it should work).

[seanybaggins]

@MartinKavik Could this work within an electron application? I am guessing you would not get access to the file system because the framework is only designed to target wasm.

[MartinKavik]

@seanybaggins I haven't tried to integrate Seed into an Electron app, but I was able to write an Electron app with Elm and Typescript several years ago. So if I'm not wrong, the architecture is similar to a standard browser app - Seed/Elm is a "view + business logic" layer and Electron/Browser exposes some methods that allow "view" layer to do safe IO operations. So I think it should be doable. (Similar architecture allows to write also serverless backend with WASM.)

Btw there are potential Electron alternatives:

• https://tauri.studio/en/
• https://azul.rs/

[seanybaggins]

@MartinKavik. Thanks for the reply. Tauri looks pretty cool. Definitely something I will keep my eye on.

[runfalk]

Thanks for the great pointers @MartinKavik and @flosse. I feel your replies answer my question pretty well.

If I, or someone else, do something with this, would you be interested in a PR for the official documentation?

[MartinKavik]

If I, or someone else, do something with this, would you be interested in a PR for the official documentation?

Yes, PRs with examples or docs are very welcome.