Are third-party javascript libs adding DOM elements are in conflict with yew's DOM management?

[da-x]

Toying a bit with webdev recently (I am far from being a web developer), I've been trying to integrate a Google sign-in button into one of the prominent yew examples out there. At first, the button did not appear at all, and later I managed to make it appear only once after initial load, and not after refreshes.

After trying to add this same button to the todomvc example, I reached the same result there too. Now, given that there is no error shown in the web browser console, and all resources loaded correctly, and recalling that yew does DOM management behind the scene, this led me to thinking perhaps yew is too aggressive in how it manages the DOM. Is it possible that Google's script are able to insert the button but Yew later removes it? The 'div element still exists but it is empty of sub-elements. Not too versed in web development, I am not sure how to debug this yet, and thought perhaps someone here may give some clue on how to proceed.

[jstarry]

Hey there @da-x! Welcome to the world of web dev!

That is a tricky situation. Google is doing some magic to render that button and indeed Yew could very well interfere with that magic.

The problem is most likely that the div you're rendering (the one that Google eventually turns into a sign-in button) is inside of a Component that gets re-rendered. When that happens, Yew tries to be smart and only update DOM elements that it needs to. But Yew is actually still pretty dumb and so if the DOM tree changes even slightly, it will recreate your div (and will lose all of Google's magic rendering).

If you can structure your app in a way that avoid re-rendering the component that is displaying that sign in button div, then you should be able to avoid this issue.

But I think your best bet is to opt out of some of the magic and interact with Google's js api to render the button explicitly. Here's a React guide that you could roughly follow: https://www.albertgao.xyz/2018/12/15/how-to-add-official-google-sign-in-to-your-react-application/

In order to access the JS api, you can use the stdweb js! macro to access window.gapi or you could use wasm-bindgen to create a Rust interface for the api methods you need.

Hope this helps!

[jstarry]

Actually I think an approach like this may work: https://stackoverflow.com/a/30296546

Also, just found this related issue: #90

[da-x]

Thanks! I've added a js!{} block in the fn mounted() of the login component to call the gapi.signin2.render function, and it seems to have fixed the issue.