fix(Provider): correctly handle change of renderer

CHANGELOG.md

@@ -20,6 +20,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `Loader` component @layershifter ([#685](https://github.com/stardust-ui/react/pull/685))
 
+### Fixes
+- Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689)
+- Fix handling changes of `renderer` prop in `Provider` @layershifter ([#702](https://github.com/stardust-ui/react/pull/702))
+
 <!--------------------------------[ v0.16.1 ]------------------------------- -->
 ## [v0.16.1](https://github.com/stardust-ui/react/tree/v0.16.1) (2019-01-10)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.16.0...v0.16.1)
@@ -37,7 +41,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix shorthand prop type @kuzhelov ([#697](https://github.com/stardust-ui/react/pull/697))
 - Export `ShorthandRenderer` type @miroslavstastny ([#698](https://github.com/stardust-ui/react/pull/698))
 - Temporary revert `pxToRem` changes introduced by [#371](https://github.com/stardust-ui/react/pull/371) @kuzhelov ([#700](https://github.com/stardust-ui/react/pull/700))
-- Fix focus outline visible only during keyboard navigation @kolaps33 ([#689] https://github.com/stardust-ui/react/pull/689)
 
 ### Documentation
 - Add ability to edit examples' code in JavaScript and TypeScript @layershifter ([#650](https://github.com/stardust-ui/react/pull/650))

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -232,11 +232,9 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
   hasKnobs = () => _.includes(knobsContext.keys(), this.getKnobsFilename())
 
   renderElement = (element: React.ReactElement<any>) => {
-    const { examplePath } = this.props
     const { showRtl, componentVariables, themeName } = this.state
 
     const theme = themes[themeName]
-
     const newTheme: ThemeInput = {
       siteVariables: theme.siteVariables,
       componentVariables: mergeThemeVariables(theme.componentVariables, {
@@ -245,11 +243,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       rtl: showRtl,
     }
 
-    return (
-      <Provider key={`${examplePath}${showRtl ? '-rtl' : ''}`} theme={newTheme}>
-        {element}
-      </Provider>
-    )
+    return <Provider theme={newTheme}>{element}</Provider>
   }
 
   handleKnobChange = knobs => {

src/components/Provider/Provider.tsx

@@ -1,9 +1,10 @@
+import { render } from 'fela-dom'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { Provider as RendererProvider, ThemeProvider } from 'react-fela'
 
-import { felaRenderer as felaLtrRenderer, mergeThemes } from '../../lib'
+import { felaRenderer as felaLtrRenderer, isBrowser, mergeThemes } from '../../lib'
 import {
   ThemePrepared,
   ThemeInput,
@@ -124,7 +125,13 @@ class Provider extends React.Component<ProviderProps> {
       <ProviderConsumer
         render={(incomingTheme: ThemePrepared) => {
           const outgoingTheme: ThemePrepared = mergeThemes(incomingTheme, theme)
+
+          // Heads up!
+          // We should call render() to ensure that a subscription for DOM updates was created
+          // https://github.com/stardust-ui/react/issues/581
+          if (isBrowser()) render(outgoingTheme.renderer)
           this.renderStaticStylesOnce(outgoingTheme)
+
           return (
             <RendererProvider renderer={outgoingTheme.renderer} {...{ rehydrate: false }}>
               <ThemeProvider theme={outgoingTheme}>{children}</ThemeProvider>