Improvements/stylecaching

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bambooapp/bamboo-molecules",
-    "version": "0.3.75",
+    "version": "0.4.0",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/webbeetechnologies/bamboo-molecules.git"

src/core/theme/ProvideTheme.tsx

@@ -14,9 +14,9 @@ export const defaultExtractStyles = memoize(
         const normalizedComponentStyles = normalizeStyles(
             theme[componentName],
             theme[colorMode],
-            componentName,
+            `${componentName}`,
         );
-        const normalizedStyleProp = normalizeStyles(style, theme[colorMode], componentName);
+        const normalizedStyleProp = normalizeStyles(style, theme[colorMode], `${componentName}`);
 
         return { ...normalizedComponentStyles, ...normalizedStyleProp };
     },

src/hooks/useNormalizeStyles.ts

@@ -13,9 +13,8 @@ export const useNormalizeStyles = (
 
     const uniqueId = useId();
 
-    cacheKey = cacheKey || uniqueId;
     return useMemo(
-        () => normalizeStyles(style, currentTheme, cacheKey),
-        [style, currentTheme, cacheKey],
+        () => normalizeStyles(style, currentTheme, cacheKey ?? uniqueId),
+        [style, currentTheme, cacheKey, uniqueId],
     );
 };

src/utils/index.ts

@@ -1,5 +1,5 @@
-import normalizeStyles from './normalizeStyles';
-import { resolveComponentStyles } from './resolveComponentStyles';
+import { normalizeStylesCache } from './normalizeStyles';
+import { resolveComponentStylesCache } from './resolveComponentStyles';
 export { default as normalizeStyles } from './normalizeStyles';
 export { resolveComponentStyles, flattenStateStyles } from './resolveComponentStyles';
 export { default as mergeRefs } from './mergeRefs';
@@ -28,8 +28,8 @@ export { normalizeToNumberString, NormalizeToNumberStringProps } from './normali
 export { addEventListener, addListener } from './addEventListener';
 
 export const clearStylesCache = () => {
-    normalizeStyles.cache.clear();
-    resolveComponentStyles.cache.clear();
+    normalizeStylesCache.clear();
+    resolveComponentStylesCache.clear();
 };
 
 export { getYearRange } from './getyearRange';

src/utils/normalizeStyles.ts

@@ -4,8 +4,8 @@ import { get, allArgumentResolver } from './lodash'; // Assuming you have a `get
 
 import { LRUCache } from 'lru-cache';
 
-const cache = new LRUCache({
-    max: 1000,
+export const normalizeStylesCache = new LRUCache({
+    max: 500,
 });
 
 export const maybeIsToken = (value: any) => typeof value === 'string' && value.includes('.');
@@ -34,8 +34,8 @@ function normalizeStyles(
     const cacheKey = `${_cacheKey}_${currentTheme.themeName}_${allArgumentResolver(styles)}`;
 
     // Check if the result is cached
-    if (cache.has(cacheKey)) {
-        return cache.get(cacheKey);
+    if (normalizeStylesCache.has(cacheKey)) {
+        return normalizeStylesCache.get(cacheKey);
     }
 
     // Proceed to normalize styles
@@ -65,7 +65,7 @@ function normalizeStyles(
     }
 
     // Cache the result
-    cache.set(cacheKey, normalizedStyles);
+    normalizeStylesCache.set(cacheKey, normalizedStyles);
 
     return normalizedStyles;
 }

src/utils/resolveComponentStyles.ts

@@ -1,45 +1,88 @@
 import deepmerge from 'ts-deepmerge';
+import { LRUCache } from 'lru-cache';
 import type { ResolveComponentStylesArgs } from '../core/theme/types';
 import type { ComponentSize } from '../types';
-import { createMemoizedFunction } from './lodash';
 
-const resolveComponentStylesMemo = createMemoizedFunction();
+type CacheKey = string;
+type CacheValue = any;
+
+export const resolveComponentStylesCache = new LRUCache<CacheKey, CacheValue>({
+    max: 500,
+});
 
 const emptyObj = {};
 
-export const resolveComponentStyles = resolveComponentStylesMemo(
-    ({
-        componentTheme,
-        variant,
-        states,
-        size,
-        style = emptyObj, // style prop from the component
-    }: ResolveComponentStylesArgs) => {
-        const {
-            variants,
-            states: componentStates = emptyObj,
-            sizes: componentSizes = emptyObj,
-            ...styles
-        } = componentTheme ?? emptyObj;
-
-        const variantStyles = variant ? variants?.[variant] || emptyObj : emptyObj;
-        const {
-            states: variantStates = emptyObj,
-            sizes: variantSizes = emptyObj,
-            ...nonStateStyles
-        } = variantStyles; // filtering the unused state styles
-
-        return deepmerge(
-            styles,
-            nonStateStyles,
-            flattenStateStyles(states, componentStates),
-            flattenStateStyles(states, variantStates),
-            resolveSizeStyles(size, componentSizes),
-            resolveSizeStyles(size, variantSizes),
-            style,
-        );
-    },
-);
+export const resolveComponentStyles = (args: ResolveComponentStylesArgs): any => {
+    // Generate a unique cache key based on the arguments
+    const cacheKey = generateCacheKey(args);
+
+    // Check if the result is in the cache
+    if (resolveComponentStylesCache.has(cacheKey)) {
+        return resolveComponentStylesCache.get(cacheKey);
+    }
+
+    // Compute the styles
+    const result = computeComponentStyles(args);
+
+    // Store the result in the cache
+    resolveComponentStylesCache.set(cacheKey, result);
+
+    return result;
+};
+
+// Helper function to generate a cache key
+const generateCacheKey = (args: ResolveComponentStylesArgs): string => {
+    const sortObjectKeys = (obj: any): any => {
+        if (Array.isArray(obj)) {
+            return obj.map(sortObjectKeys);
+        } else if (obj !== null && typeof obj === 'object') {
+            return Object.keys(obj)
+                .sort()
+                .reduce((result, key) => {
+                    result[key] = sortObjectKeys(obj[key]);
+                    return result;
+                }, {} as any);
+        } else {
+            return obj;
+        }
+    };
+
+    const sortedArgs = sortObjectKeys(args);
+    return JSON.stringify(sortedArgs);
+};
+
+// Function to compute the component styles
+const computeComponentStyles = ({
+    componentTheme,
+    variant,
+    states,
+    size,
+    style = emptyObj,
+}: ResolveComponentStylesArgs): any => {
+    const {
+        variants,
+        states: componentStates = emptyObj,
+        sizes: componentSizes = emptyObj,
+        ...styles
+    } = componentTheme ?? emptyObj;
+
+    const variantStyles = variant ? variants?.[variant] || emptyObj : emptyObj;
+    const {
+        states: variantStates = emptyObj,
+        sizes: variantSizes = emptyObj,
+        ...nonStateStyles
+    } = variantStyles; // filtering unused state styles
+
+    return deepmerge(
+        styles,
+        nonStateStyles,
+        flattenStateStyles(states, componentStates),
+        flattenStateStyles(states, variantStates),
+        resolveSizeStyles(size, componentSizes),
+        resolveSizeStyles(size, variantSizes),
+        style,
+    );
+};
 
 export const flattenStateStyles = (
     states: { [key: string]: boolean } | undefined,