WIP: try caching component variables in theme

packages/react/src/lib/mergeProviderContexts.ts

@@ -43,6 +43,7 @@ const mergeProviderContexts = (
     theme: {
       siteVariables: {},
       componentVariables: {},
+      resolvedComponentVariables: {},
       componentStyles: {},
       fontFaces: [],
       staticStyles: [],

packages/react/src/lib/mergeThemes.ts

@@ -27,6 +27,7 @@ export const emptyTheme: ThemePrepared = {
     fontSizes: {},
   },
   componentVariables: {},
+  resolvedComponentVariables: {},
   componentStyles: {},
   fontFaces: [],
   staticStyles: [],
@@ -53,8 +54,17 @@ export const mergeComponentStyles = (
       const originalTarget = partStylesPrepared[partName]
       const originalSource = partStyle
 
-      partStylesPrepared[partName] = styleParam => {
-        return _.merge(callable(originalTarget)(styleParam), callable(originalSource)(styleParam))
+      // partStylesPrepared[partName] = styleParam => {
+      //   return _.merge(callable(originalTarget)(styleParam), callable(originalSource)(styleParam))
+      // }
+
+      if (originalTarget) {
+        // partStylesPrepared[partName] = styleParam =>_.merge(callable(originalTarget)(styleParam), callable(originalSource)(styleParam))
+        partStylesPrepared[partName] = styleParam =>
+          _.merge(callable(originalTarget)(styleParam), callable(originalSource)(styleParam))
+        // partStylesPrepared[partName] = styleParam => objectMergeDeep(callable(originalTarget)(styleParam), callable(originalSource)(styleParam))
+      } else {
+        partStylesPrepared[partName] = styleParam => callable(originalSource)(styleParam)
       }
     })
 
@@ -65,16 +75,15 @@ export const mergeComponentStyles = (
 /**
  * Merges a single component's variables with another component's variables.
  */
+const initial = () => null
+
 export const mergeComponentVariables = (
   ...sources: ComponentVariablesInput[]
 ): ComponentVariablesPrepared => {
-  const initial = () => ({})
-
   return sources.reduce<ComponentVariablesPrepared>((acc, next) => {
     return (...args) => {
       const accumulatedVariables = acc(...args)
       const computedComponentVariables = callable(next)(...args)
-
       return deepmerge(accumulatedVariables, computedComponentVariables)
     }
   }, initial)
@@ -183,6 +192,8 @@ const mergeThemes = (...themes: ThemeInput[]): ThemePrepared => {
 
       acc.animations = mergeAnimations(acc.animations, next.animations)
 
+      acc.resolvedComponentVariables = {} // do not merge resoved component variables
+
       return acc
     },
     // .reduce() will modify "emptyTheme" object, so we should clone it before actual usage

packages/react/src/lib/renderComponent.tsx

@@ -25,11 +25,12 @@ import {
 } from './accessibility/types'
 import { ReactAccessibilityBehavior, AccessibilityActionHandlers } from './accessibility/reactTypes'
 import getKeyDownHandlers from './getKeyDownHandlers'
-import { emptyTheme, mergeComponentStyles, mergeComponentVariables } from './mergeThemes'
+import { emptyTheme, mergeComponentStyles } from './mergeThemes'
 import { FocusZoneProps, FocusZone } from './accessibility/FocusZone'
 import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities'
 import createAnimationStyles from './createAnimationStyles'
 import Debug, { isEnabled as isDebugEnabled } from './debug'
+import deepmerge from './deepmerge'
 
 export interface RenderResultConfig<P> {
   ElementType: React.ElementType<P>
@@ -181,10 +182,21 @@ const renderComponent = <P extends {}>(
   const stateAndProps = { ...state, ...props }
 
   // Resolve variables for this component, allow props.variables to override
-  const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
-    theme.componentVariables[displayName],
-    props.variables,
-  )(theme.siteVariables)
+  if (!theme.resolvedComponentVariables[displayName]) {
+    theme.resolvedComponentVariables[displayName] = callable(theme.componentVariables[displayName])(
+      theme.siteVariables,
+    )
+  }
+
+  const resolvedVariables = deepmerge(
+    theme.resolvedComponentVariables[displayName],
+    callable(props.variables)(theme.siteVariables),
+  )
+
+  // const resolvedVariables: ComponentVariablesObject = mergeComponentVariables(
+  //   theme.componentVariables[displayName],
+  //   props.variables,
+  // )(theme.siteVariables)
 
   const animationCSSProp = props.animation
     ? createAnimationStyles(props.animation, context.theme)

packages/react/src/themes/teams/index.tsx

@@ -49,6 +49,7 @@ const icons: ThemeIcons = {
 const teamsTheme: ThemePrepared = {
   siteVariables,
   componentVariables,
+  resolvedComponentVariables: {},
   componentStyles,
   fontFaces,
   staticStyles,

packages/react/src/themes/types.ts

@@ -438,6 +438,9 @@ export interface ThemeInput {
 export interface ThemePrepared {
   siteVariables: SiteVariablesPrepared
   componentVariables: { [key in keyof ThemeComponentVariablesPrepared]: ComponentVariablesPrepared }
+  resolvedComponentVariables: {
+    [key in keyof ThemeComponentVariablesPrepared]: ComponentVariablesPrepared
+  }
   componentStyles: { [key in keyof ThemeComponentStylesPrepared]: ComponentSlotStylesPrepared }
   icons: ThemeIcons
   fontFaces: FontFaces