perf(render): use single Fela renderer

CHANGELOG.md

@@ -17,18 +17,19 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-### Features
-- Add 'poll' and 'to-do-list' icons to Teams theme @natashamayurshah ([#1498](https://github.com/stardust-ui/react/pull/1498))
-
 ### Fixes
 - Fix prop types of `Tooltip` component @kuzhelov ([#1499](https://github.com/stardust-ui/react/pull/1499))
 - Fix `Popup` styling with `pointer` when it is wrapped by `FocusZones` @layershifter ([#1492](https://github.com/stardust-ui/react/pull/1492))
 - Apply custom focus style on `TreeItem` and `TreeTitle` @silviuavram ([#1506](https://github.com/stardust-ui/react/pull/1506))
 
 ### Features
+- Add 'poll' and 'to-do-list' icons to Teams theme @natashamayurshah ([#1498](https://github.com/stardust-ui/react/pull/1498))
 - Add `toolbarBehavior` for `Toolbar` component and apply `buttonBehavior` for `ToolbarItem` component @sophieH29 ([#1468](https://github.com/stardust-ui/react/pull/1468))
 - Integrate ARIA HTML design pattern in the `Tree` component @silviuavram ([#1488](https://github.com/stardust-ui/react/pull/1488))
 
+### Performance
+- Use single Fela renderer for LTR & RTL @layershifter ([#1459](https://github.com/stardust-ui/react/pull/1459))
+
 ### Documentation
 - Add dedicated docs for the `color palette` and `color schema` @mnajdova ([#1494](https://github.com/stardust-ui/react/pull/1494))
 
@@ -41,6 +42,16 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Rename types related to accessibility @layershifter ([#1421](https://github.com/stardust-ui/react/pull/1421))
 - Moved the `rtl` and `renderer` props from the `theme` prop object to the `Provider`'s props API @mnajdova ([#1377](https://github.com/stardust-ui/react/pull/1377))
 
+### Fixes
+- Fix click handling on focus for `action` slot in `Attachment` component @Bugaa92 ([#1444](https://github.com/stardust-ui/react/pull/1444))
+- Fix Teams' theme list item end media styles @mnajdova ([#1448](https://github.com/stardust-ui/react/pull/1448))
+- Fix the order of the fela plugin @mnajdova ([#1461](https://github.com/stardust-ui/react/pull/1461))
+- Fix `active` styles for `iconOnly` `MenuItem` in Teams theme @mnajdova ([#1464](https://github.com/stardust-ui/react/pull/1464))
+- Fix keypress/click handling for `Popup` content @kuzhelov ([#1482](https://github.com/stardust-ui/react/pull/1482))
+- Fix `PopupContent` background color in Teams theme @mnajdova ([#1484](https://github.com/stardust-ui/react/pull/1484))
+- Fix merging of item variables in `Menu` and `Toolbar` @miroslavstastny ([#1447](https://github.com/stardust-ui/react/pull/1447))
+- Generate IDs for `header` and `content` slots once in `Dialog` component @layershifter ([#1449](https://github.com/stardust-ui/react/pull/1449))
+
 ### Features
 - Define types for accessibility behaviors props. Do not render `aria-disabled` if the value is `false` @sophieH29 ([#1481](https://github.com/stardust-ui/react/pull/1481))
 - Add `Toolbar` component @miroslavstastny ([#1408](https://github.com/stardust-ui/react/pull/1408))
@@ -55,16 +66,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `Tooltip` component @mnajdova ([#1455](https://github.com/stardust-ui/react/pull/1455))
 - Add 'call-control-release' and 'call-control-request' icon to Teams theme @jay-howe ([#1490](https://github.com/stardust-ui/react/pull/1490))
 
-### Fixes
-- Fix click handling on focus for `action` slot in `Attachment` component @Bugaa92 ([#1444](https://github.com/stardust-ui/react/pull/1444))
-- Fix Teams' theme list item end media styles @mnajdova ([#1448](https://github.com/stardust-ui/react/pull/1448))
-- Fix the order of the fela plugin @mnajdova ([#1461](https://github.com/stardust-ui/react/pull/1461))
-- Fix `active` styles for `iconOnly` `MenuItem` in Teams theme @mnajdova ([#1464](https://github.com/stardust-ui/react/pull/1464))
-- Fix keypress/click handling for `Popup` content @kuzhelov ([#1482](https://github.com/stardust-ui/react/pull/1482))
-- Fix `PopupContent` background color in Teams theme @mnajdova ([#1484](https://github.com/stardust-ui/react/pull/1484))
-- Fix merging of item variables in `Menu` and `Toolbar` @miroslavstastny ([#1447](https://github.com/stardust-ui/react/pull/1447)) 
-- Generate IDs for `header` and `content` slots once in `Dialog` component @layershifter ([#1449](https://github.com/stardust-ui/react/pull/1449))
-
 ### Documentation
 - Remove unfinished themes from the docs themes dropdown on components examples pages @alinais ([#1473](https://github.com/stardust-ui/react/pull/1473))
 - Adding table of contents to FAQ page @hughreeling ([#1291](https://github.com/stardust-ui/react/pull/1291))

packages/react/package.json

@@ -14,16 +14,17 @@
     "css-shorthand-expand": "^1.2.0",
     "downshift": "^3.2.10",
     "fast-memoize": "^2.5.1",
-    "fela": "^10.2.0",
-    "fela-plugin-fallback-value": "^10.2.0",
-    "fela-plugin-placeholder-prefixer": "^10.2.0",
-    "fela-plugin-prefixer": "^10.2.0",
-    "fela-plugin-rtl": "^10.2.0",
+    "fela": "^10.5.0",
+    "fela-plugin-embedded": "^10.5.0",
+    "fela-plugin-fallback-value": "^10.5.0",
+    "fela-plugin-placeholder-prefixer": "^10.5.0",
+    "fela-plugin-prefixer": "^10.5.0",
+    "fela-plugin-rtl": "^10.5.0",
     "keyboard-key": "^1.0.1",
     "lodash": "^4.17.11",
     "popper.js": "^1.15.0",
     "prop-types": "^15.6.1",
-    "react-fela": "^10.2.0",
+    "react-fela": "^10.5.0",
     "react-is": "^16.6.3"
   },
   "devDependencies": {

packages/react/src/components/Provider/Provider.tsx

@@ -1,18 +1,12 @@
 import { IStyle } from 'fela'
-import { render as felaDomRender } from 'fela-dom'
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 // @ts-ignore
 import { RendererProvider, ThemeProvider, ThemeContext } from 'react-fela'
 import * as customPropTypes from '@stardust-ui/react-proptypes'
 
-import {
-  felaRenderer as felaLtrRenderer,
-  felaRtlRenderer,
-  isBrowser,
-  ChildrenComponentProps,
-} from '../../lib'
+import { felaRenderer, ChildrenComponentProps } from '../../lib'
 
 import {
   ThemePrepared,
@@ -87,36 +81,21 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
 
   staticStylesRendered: boolean = false
 
-  static _topLevelFelaRenderer = undefined
-
-  get topLevelFelaRenderer() {
-    if (!Provider._topLevelFelaRenderer) {
-      Provider._topLevelFelaRenderer = this.props.rtl ? felaRtlRenderer : felaLtrRenderer
-    }
-    return Provider._topLevelFelaRenderer
-  }
-
   renderStaticStyles = (mergedTheme: ThemePrepared) => {
-    // RTL WARNING
-    // This function sets static styles which are global and renderer agnostic.
-    // Top level fela renderer (the first one rendered) is used to render static styles.
-    // With current implementation, static styles cannot differ between LTR and RTL
-    // @see http://fela.js.org/docs/advanced/StaticStyle.html for details
-
     const { siteVariables } = mergedTheme
     const { staticStyles } = this.props.theme
 
     if (!staticStyles) return
 
     const renderObject = (object: StaticStyleObject) => {
       _.forEach(object, (style, selector) => {
-        this.topLevelFelaRenderer.renderStatic(style as IStyle, selector)
+        felaRenderer.renderStatic(style as IStyle, selector)
       })
     }
 
     staticStyles.forEach((staticStyle: StaticStyle) => {
       if (typeof staticStyle === 'string') {
-        this.topLevelFelaRenderer.renderStatic(staticStyle)
+        felaRenderer.renderStatic(staticStyle)
       } else if (_.isPlainObject(staticStyle)) {
         renderObject(staticStyle as StaticStyleObject)
       } else if (_.isFunction(staticStyle)) {
@@ -131,12 +110,6 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
   }
 
   renderFontFaces = () => {
-    // RTL WARNING
-    // This function sets static styles which are global and renderer agnostic.
-    // Top level fela renderer (the first one rendered) is used to render static styles.
-    // With current implementation, static styles cannot differ between LTR and RTL
-    // @see http://fela.js.org/docs/advanced/StaticStyle.html for details
-
     const { fontFaces } = this.props.theme
 
     if (!fontFaces) return
@@ -145,7 +118,7 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
       if (!_.isPlainObject(font)) {
         throw new Error(`fontFaces must be objects, got: ${typeof font}`)
       }
-      this.topLevelFelaRenderer.renderFont(font.name, font.paths, font.style)
+      felaRenderer.renderFont(font.name, font.paths, font.style)
     }
 
     fontFaces.forEach((font: FontFace) => {
@@ -178,10 +151,6 @@ class Provider extends React.Component<WithAsProp<ProviderProps>> {
     // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
     const outgoingContext: ProviderContextPrepared = mergeContexts(this.context, inputContext)
 
-    // 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()) felaDomRender(outgoingContext.renderer)
     this.renderStaticStylesOnce(outgoingContext.theme)
 
     const rtlProps: { dir?: 'rtl' | 'ltr' } = {}

packages/react/src/lib/felaInvokeKeyframesPlugin.ts

@@ -0,0 +1,40 @@
+import callable from './callable'
+
+/**
+ * Fela plugin for invoking keyframes with params. The keyframes, defined in the animationName prop,
+ * are called with the params object, if defined in the animationName prop.
+ *
+ * Caution! Infinite recursion is possible in case if style object has links to self in the props
+ * tree.
+ */
+export default () => {
+  const invokeKeyframes = (styles: Object) => {
+    return Object.keys(styles).reduce((acc, cssPropertyName) => {
+      const cssPropertyValue = styles[cssPropertyName]
+
+      if (cssPropertyName === 'animationName' && typeof cssPropertyValue === 'object') {
+        if (cssPropertyValue.keyframe) {
+          styles[cssPropertyName] = callable(cssPropertyValue.keyframe)(
+            cssPropertyValue.params || {},
+          )
+        }
+
+        return {
+          ...acc,
+          [cssPropertyName]: styles[cssPropertyName],
+        }
+      }
+
+      if (typeof cssPropertyValue === 'object') {
+        return {
+          ...acc,
+          [cssPropertyName]: invokeKeyframes(cssPropertyValue),
+        }
+      }
+
+      return { ...acc, [cssPropertyName]: styles[cssPropertyName] }
+    }, {})
+  }
+
+  return invokeKeyframes
+}

packages/react/src/lib/felaRenderer.tsx

@@ -1,14 +1,15 @@
 import { createRenderer } from 'fela'
-import felaSanitizeCss from './felaSanitizeCssPlugin'
-import felaExpandCssShorthandsPlugin from './felaExpandCssShorthandsPlugin'
+import felaPluginEmbedded from 'fela-plugin-embedded'
 import felaPluginFallbackValue from 'fela-plugin-fallback-value'
 import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer'
 import felaPluginPrefixer from 'fela-plugin-prefixer'
-import felaDisableAnimationsPlugin from './felaDisableAnimationsPlugin'
-import rtl from 'fela-plugin-rtl'
+import felaPluginRtl from 'fela-plugin-rtl'
 
 import { Renderer } from '../themes/types'
-import felaRenderKeyframesPlugin from './felaRenderKeyframesPlugin'
+import felaDisableAnimationsPlugin from './felaDisableAnimationsPlugin'
+import felaExpandCssShorthandsPlugin from './felaExpandCssShorthandsPlugin'
+import felaInvokeKeyframesPlugin from './felaInvokeKeyframesPlugin'
+import felaSanitizeCss from './felaSanitizeCssPlugin'
 
 let felaDevMode = false
 
@@ -46,8 +47,10 @@ const blacklistedClassNames = ['fa', 'fas', 'far', 'fal', 'fab']
 const filterClassName = (className: string): boolean =>
   className.indexOf('ad') === -1 && blacklistedClassNames.indexOf(className) === -1
 
-const createRendererConfig = (options: any = {}) => ({
+const rendererConfig = {
   devMode: felaDevMode,
+  filterClassName,
+  enhancers: [],
   plugins: [
     // is necessary to prevent accidental style typos
     // from breaking ALL the styles on the page
@@ -61,22 +64,16 @@ const createRendererConfig = (options: any = {}) => ({
     // Heads up!
     // This is required after fela-plugin-prefixer to resolve the array of fallback values prefixer produces.
     felaPluginFallbackValue(),
+
     felaExpandCssShorthandsPlugin(),
     felaDisableAnimationsPlugin(),
-    felaRenderKeyframesPlugin(),
-    ...(options.isRtl ? [rtl()] : []),
+    felaInvokeKeyframesPlugin(),
+    felaPluginEmbedded(),
+
+    felaPluginRtl(),
   ],
-  filterClassName,
-  enhancers: [],
-  ...(options.isRtl ? { selectorPrefix: 'rtl_' } : {}),
-  ...(options.rendererId ? { rendererId: options.rendererId } : {}),
-})
+}
+
+const felaRenderer: Renderer = createRenderer(rendererConfig)
 
-// TODO: { rendererId: 'default' } is a temporary workaround for https://github.com/stardust-ui/react/issues/948#issuecomment-466404630
-export const felaRenderer: Renderer = createRenderer(
-  createRendererConfig({ rendererId: 'default' }),
-)
-export const felaRtlRenderer: Renderer = createRenderer(
-  createRendererConfig({ isRtl: true, rendererId: 'rtl' }),
-)
 export default felaRenderer

packages/react/src/lib/getClasses.ts

@@ -18,8 +18,16 @@ const getClasses = (
   // root, icon, etc.
   const componentParts: string[] = Object.keys(componentStyles)
 
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  const direction = styleParam.rtl ? 'rtl' : 'ltr'
+  const mergedStyleParam = {
+    ...styleParam,
+    theme: { ...styleParam.theme, direction },
+  }
+
   return componentParts.reduce((classes, partName) => {
-    classes[partName] = renderer.renderRule(callable(componentStyles[partName]), styleParam)
+    classes[partName] = renderer.renderRule(callable(componentStyles[partName]), mergedStyleParam)
 
     return classes
   }, {})

packages/react/src/lib/index.ts

@@ -4,7 +4,7 @@ export { default as applyAccessibilityKeyHandlers } from './applyAccessibilityKe
 export { default as AutoControlledComponent } from './AutoControlledComponent'
 export { default as childrenExist } from './childrenExist'
 export { default as UIComponent } from './UIComponent'
-export { felaRenderer, felaRtlRenderer } from './felaRenderer'
+export { default as felaRenderer } from './felaRenderer'
 export { default as toCompactArray } from './toCompactArray'
 export { default as rtlTextContainer } from './rtlTextContainer'
 export { default as stringLiteralsArray } from './stringLiteralsArray'

packages/react/src/lib/mergeProviderContexts.ts

@@ -1,4 +1,4 @@
-import { felaRenderer, felaRtlRenderer } from './felaRenderer'
+import felaRenderer from './felaRenderer'
 import { ProviderContextPrepared, ProviderContextInput } from '../types'
 import mergeThemes from './mergeThemes'
 
@@ -19,7 +19,7 @@ const mergeProviderContexts = (...contexts: ProviderContextInput[]): ProviderCon
       icons: {},
       animations: {},
     },
-    renderer: {},
+    renderer: felaRenderer,
     rtl: false,
     disableAnimations: false,
   } as ProviderContextPrepared
@@ -36,8 +36,8 @@ const mergeProviderContexts = (...contexts: ProviderContextInput[]): ProviderCon
         acc.rtl = mergedRTL
       }
 
-      // Use the correct renderer for RTL
-      acc.renderer = acc.rtl ? felaRtlRenderer : felaRenderer
+      // Use provided renderer if it is defined
+      acc.renderer = next.renderer || acc.renderer
 
       // Latest disableAnimations value wins
       const mergedDisableAnimations = mergeBooleanValues(