[IMPORTANT] fix(rtl): disable RendererProvider rehydration

[miroslavstastny]

Provider

Disable rehydration in Fela Provider to fix switching of Fela Renderers from LTR to RTL and back and using the two simultaneously.

Details

In general it seems that Fela does not support using multiple Renderers simultaneously on one page.

By default when Provider is created, it rehydrates = reads styles from DOM and places them in it's cache (ProviderFactory.js:24) as rehydrate is true by default (Provider.js:16).

The DOM path it rehydrates from is hardcoded and not configurable (rehydrate.js:13) so there is no way how the two renderers could use different DOM element for the styles.

What happens is that when in docsite you switch one example to RTL, RTL styles are added to Fela - RTL instance of the renderer is used, rtl_ prefix is added to class names to avoid collisions and styles are rendered to DOM.

But after that whenever a new Provider is created, it rehydrates and adds RTL styles to it's cache.

This is not a problem of the styles being different as the CSS rule is used as a key in the cache. But what happens is that classes are now added in different order to the elements resulting in different results.

Conclusion

• For now rehydration is disabled which 'fixes' this problem
• This breaks/degrades performance when Server Side Rendering is used
• Further discussion is required - using multiple renderers simultaneously is fragile and unsupported. Although it can work for docsite, we should avoid using that in any production code or discuss official support for that directly in Fela.js

TODO

• Update the CHANGELOG.md

[codecov]

Codecov Report

Merging #58 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master    #58   +/-   ##
=====================================
  Coverage      87%    87%           
=====================================
  Files          75     75           
  Lines        1177   1177           
  Branches      223    214    -9     
=====================================
  Hits         1024   1024           
  Misses        147    147           
  Partials        6      6

Impacted Files	Coverage Δ
src/components/Provider/Provider.tsx	58.33% <ø> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1e66017...aaa9c37. Read the comment docs.

[kuzhelov]

We've discussed this issue with @miroslavstastny and agree on the following things

• the problem arises from the fact that our assumption that single fela Renderer is used for styling entire component tree breaks for the situation Miro has described

---

As a solution to this problem we could consider the following (mutually exclusive) options

• for real apps
  • set rehydrate to false for Fela Renderer
  • ensure that singleton assumption about Fela Renderer always stays true. As a simplest solution, we could prevent renderer overriding in cases of nested Provider, with writing error message to the console log:

<Provider renderer={ltrRenderer}>   { /* fine as renderer wasn't defined so far */ }
   <Provider renderer={rtlRenderer} ... >   { /* no override happens, LTR renderer is still used for child tree */ }
   ...
   </Provider>
</Provider>

---

• for Docs (wider set of options)
  • use rehydrate=false - could be a reasonable option
  • ensure that RTL or LTR Fela Renderer is used to render all the examples on the page
  • consider to use iFrames?

[levithomason]

rehydrate={false}