From 039ac5578a193367df44f62447108acca4efe5f7 Mon Sep 17 00:00:00 2001 From: Thet Aung Date: Sat, 21 Dec 2024 14:46:36 +0300 Subject: [PATCH 1/4] improvements: also used lru-cache form resolveComponentStyles --- src/core/theme/ProvideTheme.tsx | 4 +- src/utils/index.ts | 8 +- src/utils/normalizeStyles.ts | 10 +-- src/utils/resolveComponentStyles.ts | 113 +++++++++++++++++++--------- 4 files changed, 89 insertions(+), 46 deletions(-) diff --git a/src/core/theme/ProvideTheme.tsx b/src/core/theme/ProvideTheme.tsx index a0184ae2..cc0d5263 100644 --- a/src/core/theme/ProvideTheme.tsx +++ b/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 }; }, diff --git a/src/utils/index.ts b/src/utils/index.ts index fd1059a4..fbc638ae 100644 --- a/src/utils/index.ts +++ b/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'; diff --git a/src/utils/normalizeStyles.ts b/src/utils/normalizeStyles.ts index 3f213690..fc5dd215 100644 --- a/src/utils/normalizeStyles.ts +++ b/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; } diff --git a/src/utils/resolveComponentStyles.ts b/src/utils/resolveComponentStyles.ts index 58a27d23..3cba2310 100644 --- a/src/utils/resolveComponentStyles.ts +++ b/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({ + 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, From df6abf3a398eb79aeb6da898d14082e937a0dcd8 Mon Sep 17 00:00:00 2001 From: Thet Aung Date: Sat, 21 Dec 2024 14:46:54 +0300 Subject: [PATCH 2/4] 0.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 42c1b18c..dfe4bee7 100644 --- a/package.json +++ b/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" From cd914d9797c42a9ba82c67ed7d772d0f5c4bb135 Mon Sep 17 00:00:00 2001 From: Thet Aung Date: Sat, 21 Dec 2024 14:48:45 +0300 Subject: [PATCH 3/4] fix: ts issues --- src/hooks/useNormalizeStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useNormalizeStyles.ts b/src/hooks/useNormalizeStyles.ts index 0667d53a..d32b8937 100644 --- a/src/hooks/useNormalizeStyles.ts +++ b/src/hooks/useNormalizeStyles.ts @@ -13,7 +13,7 @@ export const useNormalizeStyles = ( const uniqueId = useId(); - cacheKey = cacheKey || uniqueId; + cacheKey = cacheKey ?? uniqueId; return useMemo( () => normalizeStyles(style, currentTheme, cacheKey), [style, currentTheme, cacheKey], From c09ae3375e558032a7e85ba889e195e96f26580b Mon Sep 17 00:00:00 2001 From: Thet Aung Date: Sat, 21 Dec 2024 14:50:38 +0300 Subject: [PATCH 4/4] fix: ts issues --- src/hooks/useNormalizeStyles.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useNormalizeStyles.ts b/src/hooks/useNormalizeStyles.ts index d32b8937..9262abf5 100644 --- a/src/hooks/useNormalizeStyles.ts +++ b/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], ); };