From e292b3969e9485c64717f7ded694ebd89e00450b Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 27 Mar 2024 10:41:34 -0700 Subject: [PATCH 1/5] Update our style memoizer to have configurable warning levels - via our existing `emitEuiProviderWarning` utility --- src/services/theme/style_memoization.test.tsx | 7 ++++++- src/services/theme/style_memoization.tsx | 3 ++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/services/theme/style_memoization.test.tsx b/src/services/theme/style_memoization.test.tsx index 21228958ca8..f74a88951d0 100644 --- a/src/services/theme/style_memoization.test.tsx +++ b/src/services/theme/style_memoization.test.tsx @@ -14,6 +14,7 @@ import { testOnReactVersion } from '../../test/internal'; import type { UseEuiTheme } from './hooks'; import { EuiThemeProvider } from './provider'; +import { setEuiDevProviderWarning } from './warning'; import { useEuiMemoizedStyles, @@ -79,11 +80,15 @@ describe('useEuiMemoizedStyles', () => { testOnReactVersion(['18'])( 'throws an error if passed anonymous functions', () => { + setEuiDevProviderWarning('error'); expect(() => - renderHook(() => useEuiMemoizedStyles(() => ({}))) + renderHook(() => useEuiMemoizedStyles(() => ({})), { + wrapper: EuiThemeProvider, + }) ).toThrowError( 'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.' ); + setEuiDevProviderWarning(undefined); } ); }); diff --git a/src/services/theme/style_memoization.tsx b/src/services/theme/style_memoization.tsx index de8d8cd59dd..caf4bab3a91 100644 --- a/src/services/theme/style_memoization.tsx +++ b/src/services/theme/style_memoization.tsx @@ -19,6 +19,7 @@ import React, { import { useUpdateEffect } from '../hooks'; import { useEuiTheme, UseEuiTheme } from './hooks'; +import { emitEuiProviderWarning } from './warning'; type StylesMap = Record; // Typically an object of serialized css`` styles, but can have any amount of nesting, so it's not worth it to try and strictly type this type MemoizedStylesMap = WeakMap; @@ -60,7 +61,7 @@ const getMemoizedStyles = ( euiThemeContext: UseEuiTheme ) => { if (!stylesGenerator.name) { - throw new Error( + emitEuiProviderWarning( 'Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.' ); } From 7ed082763f56324c5265c5f6a1c823342016a2ce Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 27 Mar 2024 10:44:08 -0700 Subject: [PATCH 2/5] Update our EUI docs to throw errors on local dev environments - but not on prod/staging, in case of false negatives --- src-docs/src/views/app_context.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/app_context.js b/src-docs/src/views/app_context.js index 7b24ecc6cd1..a9a4ea3f441 100644 --- a/src-docs/src/views/app_context.js +++ b/src-docs/src/views/app_context.js @@ -7,7 +7,10 @@ import { translateUsingPseudoLocale } from '../services'; import { getLocale } from '../store'; import { EuiContext, EuiProvider } from '../../../src/components'; -import { euiStylisPrefixer } from '../../../src/services'; +import { + setEuiDevProviderWarning, + euiStylisPrefixer, +} from '../../../src/services'; import { EUI_THEMES } from '../../../src/themes'; import favicon16Prod from '../images/favicon/prod/favicon-16x16.png'; @@ -44,6 +47,7 @@ export const AppContext = ({ children }) => { }; const isLocalDev = window.location.host.includes('803'); + setEuiDevProviderWarning(isLocalDev ? 'error' : 'warning'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload return ( Date: Wed, 27 Mar 2024 10:49:00 -0700 Subject: [PATCH 3/5] Set error level for Storybook as well + fix EuiProvider demo not working since the organization changes - ID follows title --- .storybook/preview.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index cb6e99dec60..5c469f94a12 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -39,6 +39,12 @@ import { writingModeStyles } from './writing_mode.styles'; // once all EUI components are converted to Emotion import '../dist/eui_theme_light.css'; +/** + * Ensure that any provider errors throw & warn us early + */ +import { setEuiDevProviderWarning } from '../src/services'; +setEuiDevProviderWarning('error'); + /** * Prop controls */ @@ -51,7 +57,7 @@ const preview: Preview = { (Story, context) => (
Date: Wed, 27 Mar 2024 10:58:29 -0700 Subject: [PATCH 4/5] changelog --- changelogs/upcoming/7626.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 changelogs/upcoming/7626.md diff --git a/changelogs/upcoming/7626.md b/changelogs/upcoming/7626.md new file mode 100644 index 00000000000..dc8cfc42c37 --- /dev/null +++ b/changelogs/upcoming/7626.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Updated EUI's internal style memoization/performance utility to have configurable error/warning levels via `setEuiDevProviderWarning` From 1a75efca47688f27465cfd7e8c77c2b9376f333f Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 27 Mar 2024 12:25:22 -0700 Subject: [PATCH 5/5] Lene saving my butt Co-authored-by: Lene Gadewoll --- src-docs/src/views/app_context.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/app_context.js b/src-docs/src/views/app_context.js index a9a4ea3f441..606ce277bb1 100644 --- a/src-docs/src/views/app_context.js +++ b/src-docs/src/views/app_context.js @@ -47,7 +47,7 @@ export const AppContext = ({ children }) => { }; const isLocalDev = window.location.host.includes('803'); - setEuiDevProviderWarning(isLocalDev ? 'error' : 'warning'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload + setEuiDevProviderWarning(isLocalDev ? 'error' : 'warn'); // Note: this can't be in a useEffect, otherwise it fires too late for style memoization warnings to error on page reload return (