Turbolinks and observeMutations problem

[montulli]

I have a rails project with turbolinks classic and I am trying to use the new SVG version of font-awesome 5.

The font-awesome.js file loads once and bootstrap() runs once when it loads. After the initial load turbolinks does a dom replacement of each additional page load and skips the reloading of all the js files.

When the dom is replaced by turbolinks I call i2svg() and the icon classes within the new html are replaced with SVGs.

The problem I am having is that JS changes to the classes to swap out icons do not work on subsequent dom loads. They work on the first load, since bootstrap calls 'observe' to watch for mutations, but on subsequent loads using i2svg(), observe() is not called so that part of the DOM is not changing when icons are supposed to change. (fa-chevron-right and fa-chevron-down swaps are a simple example)

I tried adding the code at the bottom to i2svg(), but it caused my app to start taking multiple seconds to load subsequent pages. I suspect that I'm causing N squared observations and I need something that clears the old observers and just inserts the new ones.

Here is the code I added to i2svg. It did make js icons swaps work, but performance was too slow:

if (config.observeMutations && typeof MutationObserver === 'function') {
observe({
treeCallback: onTree,
nodeCallback: onNode,
pseudoElementsCallback: searchPseudoElements
});
}

[cireficc]

I have this issue too... exactly as described above. For the time being, I've reverted back to the CSS CDN which works, but it would be nice if FontAwesome (JS) could play nicely with Turbolinks!

[robmadole]

I think we have an idea how we can elegantly fix this. It's on the list and high priority.

[mlwilkerson]

@montulli Could you try to use the new dom.watch() API in Font Awesome 5.1 (currently in preview status, but available for experimentation)?

invoke dom.watch() with parameter observeMutationsRoot: document

I think that would attach the mutation observer to the higher document level and allow the child body element to be replaced by Turbolinks without breaking the mutation observer.

Again, you'd need to make sure you're using all of the new Font Awesome 5.1 packages. Here are upgrade instructions.

[tagliala]

@mlwilkerson as a RoR developer, I'm trying this solution myself

Anyway, it doesn't seem to work on localhost and I can't show you at the moment the results because deploy on Heroku doesn't work:

An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.0-11.tgz: Request failed "401 Unauthorized"".

js: https://github.com/diowa/ruby2-rails5-bootstrap-heroku/blob/master/app/javascript/src/fontawesome.js#L11

yarn.lock: https://github.com/diowa/ruby2-rails5-bootstrap-heroku/blob/master/yarn.lock#L5-L31

Anyway, the result is still the same of the old deploy: https://ruby2-rails5-bootstrap-heroku.herokuapp.com/ (try to click on "hello world")

---

edit

I was able to deploy a version with observeMutationsRoot set to document

https://ruby2-rails5-bootstrap-heroku.herokuapp.com/

Click on "Rails 5 Starter App" in the navbar or on "Hello world" and the github icon will disappear

You can confirm that observeMutationsRoot is set to document by checking at the very end of the application.js file

[mlwilkerson]

@tagliala thanks for giving it a try. Can you verify what version of @fortawesome/fontawesome-svg-core that's bundled in application.js. I see in your yarn.lock that it should be the most recent version, but I'm not seeing what I'd expect in the minified source.

In particular, it looks like the code that handles that observeMutationsRoot config when setting up the mutation observer isn't there.

[robmadole]

Turbolinks support

[robmadole]

@tagliala if you get a moment can you try document.documentElement instead? There are some indications that it might be the fix.

[tagliala]

@mlwilkerson

I've deleted node_modules but I'm still having the same issue on localhost

the downloaded tgz https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.0-11.tgz starts with

/*!
 * Font Awesome Free 5.1.0-8 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

and does not contain instances of observeMutationsRoot

@robmadole

tried with document.documentElement but the issue is still there. Could you please check that @fortawesome/fontawesome-svg-core version 1.2.0-11 is ok?

[robmadole]

@tagliala we are at 1.2.0-14 on the prerelease tag and 1.2.0-11 on the latest. I've updated the latest tag to -14. We have a bit of a mess with some of those tags currently. 😕 If you upgrade that should include the goodies.

[tagliala]

@robmadole @mlwilkerson

Sorry, -11 on every package was quite confusing 🤦‍♂️

Thanks, now it works for me 👍

I'm using svg core version 1.2.0-14 and observeMutationsRoot: document option

https://ruby2-rails5-bootstrap-heroku.herokuapp.com/

[mlwilkerson]

@tagliala Great! Thanks for giving it a try. Now, I think we need an easy step-by-step guide to help others get it working too. Do you have a "hello world"-level minimal demo repo that shows how you've configured this? If so, I might take that as a starting point.

[tagliala]

Do you have a "hello world"-level minimal demo repo that shows how you've configured this?

I can definitely help, I will work on it tomorrow

The previous app is a pretty basic rails 5.2 with webpacker configuration. It supports tree shaking out of the box.

We have different options in rails, including turbolinks-classic (different from the one that I've used, it's the old version of Turbolinks mentioned in the opening post) and sprockets (different from webpacker, does not use webpack and yarn).

Is there a way to configure observeMutationsRoot via FontAwesomeConfig if I can't use webpack?

[robmadole]

Is there a way to configure observeMutationsRoot via FontAwesomeConfig if I can't use webpack?

I think we are trying to find out if we can change the default to document or document.documentElement. That way there would be no special steps for Turbolink'ers 😄

[robmadole]

Is there a way to configure observeMutationsRoot via FontAwesomeConfig if I can't use webpack?

(I could actually answer your question). No, this is not a config option yet.

[tagliala]

@mlwilkerson

please take a look here:

https://github.com/tagliala/fontawesome5demo#readme

Each commit contains what needs to be done in the command line to achieve that result

The main effort is to get into the webpacker ecosystem, then Font Awesome is just another package.

At the moment, I don't know how to make it work without webpacker. Please let me know when (and if) you change the default observer to document

[crivotz]

Works properly, the only annoyance I noticed is a flicker on the reload.

[tagliala]

Works properly, the only annoyance I noticed is a flicker on the reload.

I suppose that we cannot fix the flickering. I would like to implement a rails gem for server side icon rendering

Ref:

• Using FA5 with Turbolinks, fixing flicker? #11924
• https://fontawesome.com/how-to-use/performance-and-security#async-loading-indicators
• https://fontawesome.com/how-to-use/server-side-rendering

[mlwilkerson]

Thanks for the demo, @tagliala.

[robmadole]

@tagliala I think we can fix the flickering actually. The reason that it happens is that the icons are replaced async. We can make this process synchronous for the Turbolinks version.

[paicha]

Any updates?

[tagliala]

@paicha update on what?

[paicha]

Make icons replace process synchronous for the Turbolinks version. Geremia Taglialatela <notifications@github.com>

…

@paicha <https://github.com/paicha> update on what? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12709 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE6OVSlA8LS3tPF2ybFRDF8KdP8OwY9Xks5uLurrgaJpZM4S8JmJ> .

[tagliala]

Heads-up: Font Awesome 5.7.0 supports turbolinks out of the box.

// FA < 5.7.0 (>= 5.1.0)
dom.watch({ observeMutationsRoot: document })

// FA >= 5.7.0
dom.watch()

[sunnyrjuneja]

I believe this issue can be closed.

[tagliala]

...Why is this still opened? 😅

@sunnyrjuneja thanks for the heads-up!