feat(useStyles): add caching when no inline overrides are applied

docs/src/app.tsx

@@ -28,6 +28,7 @@ class App extends React.Component<any, ThemeContextData> {
     return (
       <ThemeContext.Provider value={this.state}>
         <Provider
+          enableCaching={true}
           as={React.Fragment}
           theme={mergeThemes(themes.fontAwesome, themes[themeName], {
             staticStyles: [

packages/react-bindings/src/hooks/useStyles.ts

@@ -17,7 +17,7 @@ import {
 } from '../styles/types'
 import getStyles from '../styles/getStyles'
 
-type PrimitiveProps = Record<string, boolean | number | string | undefined>
+export type PrimitiveProps = Record<string, boolean | number | string | undefined>
 type UseStylesOptions<StyleProps extends PrimitiveProps> = {
   className?: string
   mapPropsToStyles?: () => StyleProps
@@ -45,9 +45,9 @@ type InlineStyleProps<StyleProps> = {
 
 const defaultContext: StylesContextValue<{ renderRule: RendererRenderRule }> = {
   disableAnimations: false,
+  enableCaching: false, // TODO: check id this is correct defualt
   renderer: { renderRule: () => '' },
   theme: emptyTheme,
-  _internal_resolvedComponentVariables: {},
 }
 
 const useStyles = <StyleProps extends PrimitiveProps>(
@@ -81,7 +81,7 @@ const useStyles = <StyleProps extends PrimitiveProps>(
     rtl,
     saveDebug: fluentUIDebug => (debug.current = { fluentUIDebug }),
     theme: context.theme,
-    _internal_resolvedComponentVariables: context._internal_resolvedComponentVariables,
+    enableCaching: context.enableCaching,
   })
 
   return { classes, styles: resolvedStyles }

packages/react-bindings/src/styles/getStyles.ts

@@ -4,26 +4,29 @@ import {
   ComponentSlotStylesPrepared,
   ComponentSlotStylesResolved,
   ComponentStyleFunctionParam,
+  ComponentVariablesInput,
   ComponentVariablesObject,
   DebugData,
   ICSSInJSStyle,
   isDebugEnabled,
   mergeComponentStyles,
   mergeComponentVariables,
   PropsWithVarsAndStyles,
+  ThemePrepared,
   withDebugId,
 } from '@fluentui/styles'
 import cx from 'classnames'
 import * as _ from 'lodash'
 
-import resolveStylesAndClasses from './resolveStylesAndClasses'
+import resolveStylesAndClasses, { ResolveStylesResult } from './resolveStylesAndClasses'
 import {
   ComponentDesignProp,
   ComponentSlotClasses,
   RendererParam,
   RendererRenderRule,
   StylesContextValue,
 } from '../styles/types'
+import { PrimitiveProps } from '../hooks/useStyles'
 
 type GetStylesOptions = StylesContextValue<{
   renderRule: RendererRenderRule
@@ -42,75 +45,80 @@ export type GetStylesResult = {
   theme: StylesContextValue['theme']
 }
 
+const variablesCache = new WeakMap<ThemePrepared, Record<string, ComponentVariablesObject>>()
+
+const resolveVariables = (
+  displayName: string,
+  theme: ThemePrepared,
+  variables: ComponentVariablesInput | undefined,
+): ComponentVariablesObject => {
+  //
+  // Simple caching model, works only if there is no `props.variables`
+  // Resolves variables for this component, cache the result in provider
+  //
+
+  if (!variablesCache.has(theme)) {
+    variablesCache.set(theme, {})
+  }
+
+  const variablesThemeCache = variablesCache.get(theme) || {}
+
+  if (!variablesThemeCache[displayName]) {
+    variablesThemeCache[displayName] =
+      callable(theme.componentVariables[displayName])(theme.siteVariables) || {}
+    variablesCache.set(theme, variablesThemeCache)
+  }
+
+  if (variables === undefined) {
+    return variablesThemeCache[displayName]
+  }
+
+  return mergeComponentVariables(
+    variablesThemeCache[displayName],
+    withDebugId(variables, 'props.variables'),
+  )(theme.siteVariables)
+}
+
 const getStyles = (options: GetStylesOptions): GetStylesResult => {
   const {
-    className,
+    className: componentClassName,
     disableAnimations,
     displayName,
     props,
     renderer,
     rtl,
     saveDebug,
     theme,
-    _internal_resolvedComponentVariables: resolvedComponentVariables,
+    enableCaching,
   } = options
+  const { className, design, styles, variables, ...restProps } = props
 
-  // Resolve variables for this component, cache the result in provider
-  if (!resolvedComponentVariables[displayName]) {
-    resolvedComponentVariables[displayName] =
-      callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
-  }
-
-  // Merge inline variables on top of cached variables
-  const resolvedVariables = props.variables
-    ? mergeComponentVariables(
-        resolvedComponentVariables[displayName],
-        withDebugId(props.variables, 'props.variables'),
-      )(theme.siteVariables)
-    : resolvedComponentVariables[displayName]
+  //
+  // To compute styles are going through three stages:
+  // - resolve variables (siteVariables => componentVariables + props.variables)
+  // - resolve styles (with resolvedVariables & props.styles & props.design)
+  // - compute classes (with resolvedStyles)
+  //
 
-  // Resolve styles using resolved variables, merge results, allow props.styles to override
-  let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
-    root: () => ({}),
-  }
+  const resolvedVariables = resolveVariables(displayName, theme, props.variables)
 
-  const hasInlineOverrides = !_.isNil(props.design) || !_.isNil(props.styles)
+  //
+  // STYLES
+  //
 
-  if (hasInlineOverrides) {
-    mergedStyles = mergeComponentStyles(
-      mergedStyles,
-      props.design && withDebugId({ root: props.design }, 'props.design'),
-      props.styles &&
-        withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
-    )
-  }
+  const noInlineOverrides = !(design || styles || variables)
 
-  const styleParam: ComponentStyleFunctionParam = {
-    displayName,
-    props,
-    variables: resolvedVariables,
+  const { classes, resolvedStyles, resolvedStylesDebug } = resolveStyles({
     theme,
-    rtl,
-    disableAnimations,
-  }
-
-  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
-  // Our API should be aligned with it
-  // Heads Up! Keep in sync with Design.tsx render logic
-  const direction = rtl ? 'rtl' : 'ltr'
-  const felaParam: RendererParam = {
-    theme: { direction },
+    displayName,
     disableAnimations,
-    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
-  }
-
-  const { resolvedStyles, resolvedStylesDebug, classes } = resolveStylesAndClasses(
-    mergedStyles,
-    styleParam,
-    (style: ICSSInJSStyle) => renderer.renderRule(() => style, felaParam),
-  )
-
-  classes.root = cx(className, classes.root, props.className)
+    rtl,
+    renderer,
+    props,
+    resolvedVariables,
+    cacheEnabled: enableCaching && noInlineOverrides,
+    styleProps: restProps,
+  })
 
   // conditionally add sources for evaluating debug information to component
   if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
@@ -140,6 +148,8 @@ const getStyles = (options: GetStylesOptions): GetStylesResult => {
     })
   }
 
+  classes.root = cx(componentClassName, classes.__root, className)
+
   return {
     classes,
     variables: resolvedVariables,
@@ -148,4 +158,74 @@ const getStyles = (options: GetStylesOptions): GetStylesResult => {
   }
 }
 
+const resolveStyles = ({
+  theme,
+  displayName,
+  props,
+  resolvedVariables,
+  rtl,
+  disableAnimations,
+  renderer,
+  cacheEnabled,
+  styleProps,
+}: {
+  theme: ThemePrepared
+  displayName: string
+  props: PropsWithVarsAndStyles & { design?: ComponentDesignProp }
+  resolvedVariables: object
+  rtl: boolean
+  disableAnimations: boolean
+  renderer: {
+    renderRule: RendererRenderRule
+  }
+  cacheEnabled: boolean | undefined
+  styleProps: PrimitiveProps
+}): ResolveStylesResult => {
+  // Resolve styles using resolved variables, merge results, allow props.styles to override
+  let mergedStyles: ComponentSlotStylesPrepared = theme.componentStyles[displayName] || {
+    root: () => ({}),
+  }
+  const hasInlineStylesOverrides = !_.isNil(props.design) || !_.isNil(props.styles)
+
+  if (hasInlineStylesOverrides) {
+    mergedStyles = mergeComponentStyles(
+      mergedStyles,
+      props.design && withDebugId({ root: props.design }, 'props.design'),
+      props.styles &&
+        withDebugId({ root: props.styles } as ComponentSlotStylesInput, 'props.styles'),
+    )
+  }
+
+  const styleParam: ComponentStyleFunctionParam = {
+    displayName,
+    props,
+    variables: resolvedVariables,
+    theme,
+    rtl,
+    disableAnimations,
+  }
+
+  // Fela plugins rely on `direction` param in `theme` prop instead of RTL
+  // Our API should be aligned with it
+  // Heads Up! Keep in sync with Design.tsx render logic
+  const direction = rtl ? 'rtl' : 'ltr'
+  const felaParam: RendererParam = {
+    theme: { direction },
+    disableAnimations,
+    displayName, // does not affect styles, only used by useEnhancedRenderer in docs
+  }
+
+  const result = resolveStylesAndClasses(
+    mergedStyles,
+    styleParam,
+    (style: ICSSInJSStyle) => renderer.renderRule(() => style, felaParam),
+    cacheEnabled,
+    displayName,
+    theme,
+    styleProps,
+  )
+
+  return result
+}
+
 export default getStyles