fix(useStylesheet): track stylesheets with useSyncExternalStore (#5845)

Author: MarcusNotheis

package.json

@@ -59,6 +59,7 @@
     "@types/node": "^20.0.0",
     "@types/react": "18.3.2",
     "@types/react-dom": "^18.2.22",
+    "@types/use-sync-external-store": "^0.0.6",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@ui5/webcomponents-tools": "1.24.2",

packages/base/package.json

@@ -55,5 +55,8 @@
     "LICENSE",
     "NOTICE.txt",
     "README.md"
-  ]
+  ],
+  "dependencies": {
+    "use-sync-external-store": "1.2.2"
+  }
 }

packages/base/src/context/StyleContext.ts

@@ -2,42 +2,25 @@
 
 import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
 import { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
-import * as React from 'react';
-import { useStyleContext } from '../context/StyleContext.js';
-
-function getUseInsertionEffect(isSSR: boolean) {
-  return isSSR ? React.useEffect : Reflect.get(React, 'useInsertionEffect') || React.useLayoutEffect;
-}
-
-function trackComponentStyleMount(componentMap: Map<string, number>, componentName: string) {
-  if (componentMap.has(componentName)) {
-    componentMap.set(componentName, componentMap.get(componentName)! + 1);
-  } else {
-    componentMap.set(componentName, 1);
-  }
-}
-
-function trackComponentStyleUnmount(componentMap: Map<string, number>, componentName: string) {
-  if (componentMap.has(componentName)) {
-    componentMap.set(componentName, componentMap.get(componentName)! - 1);
-  }
-}
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { StyleStore } from '../stores/StyleStore.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 
 export function useStylesheet(styles: StyleDataCSP, componentName: string) {
-  const styleContext = useStyleContext();
-  const { staticCssInjected, componentsMap } = styleContext;
+  const { staticCssInjected, componentsMap } = useSyncExternalStore(StyleStore.subscribe, StyleStore.getSnapshot);
 
-  getUseInsertionEffect(typeof window === 'undefined')(() => {
-    if (!staticCssInjected) {
+  useIsomorphicLayoutEffect(() => {
+    const shouldInject = !staticCssInjected;
+    if (shouldInject) {
       createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);
-      trackComponentStyleMount(componentsMap, componentName);
+      StyleStore.mountComponent(componentName);
     }
 
     return () => {
-      if (!staticCssInjected) {
-        trackComponentStyleUnmount(componentsMap, componentName);
-        const numberOfMountedComponents = componentsMap.get(componentName);
-        if (typeof numberOfMountedComponents === 'number' && numberOfMountedComponents <= 0) {
+      if (shouldInject) {
+        StyleStore.unmountComponent(componentName);
+        const numberOfMountedComponents = componentsMap.get(componentName)!;
+        if (numberOfMountedComponents <= 0) {
           removeStyle('data-ui5wcr-component', componentName);
         }
       }

packages/base/src/hooks/useStylesheet.ts

@@ -1,12 +1,12 @@
 import { getI18nContext, I18nContext } from './context/I18nContext.js';
-import { getStyleContext, useStyleContext } from './context/StyleContext.js';
 import * as Device from './Device/index.js';
 import * as hooks from './hooks/index.js';
+import { StyleStore } from './stores/StyleStore.js';
 import * as spacing from './styling/spacing.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
 
 export * from './styling/CssSizeVariables.js';
 export * from './utils/index.js';
 export * from './hooks/index.js';
 
-export { getI18nContext, I18nContext, getStyleContext, useStyleContext, ThemingParameters, Device, hooks, spacing };
+export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };

packages/base/src/index.ts

@@ -0,0 +1,65 @@
+const STORE_SYMBOL_LISTENERS = Symbol.for('@ui5/webcomponents-react/StyleStore/Listeners');
+const STORE_SYMBOL = Symbol.for('@ui5/webcomponents-react/StyleStore');
+
+interface IStyleStore {
+  staticCssInjected: boolean;
+  componentsMap: Map<string, number>;
+}
+
+const initialStore: IStyleStore = {
+  staticCssInjected: false,
+  componentsMap: new Map<string, number>()
+};
+
+function getListeners(): Array<() => void> {
+  globalThis[STORE_SYMBOL_LISTENERS] ??= [];
+  return globalThis[STORE_SYMBOL_LISTENERS];
+}
+
+function emitChange() {
+  for (const listener of getListeners()) {
+    listener();
+  }
+}
+
+function getSnapshot(): IStyleStore {
+  globalThis[STORE_SYMBOL] ??= initialStore;
+  return globalThis[STORE_SYMBOL];
+}
+
+function subscribe(listener: () => void) {
+  const listeners = getListeners();
+  globalThis[STORE_SYMBOL_LISTENERS] = [...listeners, listener];
+  return () => {
+    globalThis[STORE_SYMBOL_LISTENERS] = listeners.filter((l) => l !== listener);
+  };
+}
+
+export const StyleStore = {
+  subscribe,
+  getSnapshot,
+  setStaticCssInjected: (staticCssInjected: boolean) => {
+    const curr = getSnapshot();
+    globalThis[STORE_SYMBOL] = {
+      ...curr,
+      staticCssInjected
+    };
+    emitChange();
+  },
+  mountComponent: (componentName: string) => {
+    const { componentsMap } = getSnapshot();
+    if (componentsMap.has(componentName)) {
+      componentsMap.set(componentName, componentsMap.get(componentName)! + 1);
+    } else {
+      componentsMap.set(componentName, 1);
+    }
+    emitChange();
+  },
+  unmountComponent: (componentName: string) => {
+    const { componentsMap } = getSnapshot();
+    if (componentsMap.has(componentName)) {
+      componentsMap.set(componentName, componentsMap.get(componentName)! - 1);
+    }
+    emitChange();
+  }
+};

packages/base/src/stores/StyleStore.ts

@@ -3,14 +3,14 @@
 import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
 import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
 import {
-  getStyleContext,
+  StyleStore,
   ThemingParameters,
   useIsomorphicId,
   useIsomorphicLayoutEffect,
   useStylesheet
 } from '@ui5/webcomponents-react-base';
 import type { FC, ReactNode } from 'react';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { ThemeProvider as ReactJssThemeProvider } from 'react-jss';
 import { I18nProvider } from '../../internal/I18nProvider.js';
 import { ModalsProvider } from '../Modals/ModalsProvider.js';
@@ -45,7 +45,7 @@ export interface ThemeProviderPropTypes {
  * __Note:__ Per default, the `ThemeProvider` injects the CSS for the components during runtime. If you have imported our static CSS bundle/s in your application, you can set the prop `staticCssInjected` to `true` to prevent this.
  */
 const ThemeProvider: FC<ThemeProviderPropTypes> = (props: ThemeProviderPropTypes) => {
-  const { children, withoutModalsProvider, staticCssInjected } = props;
+  const { children, withoutModalsProvider = false, staticCssInjected = false } = props;
 
   useIsomorphicLayoutEffect(() => {
     document.documentElement.setAttribute('data-sap-theme', getTheme());
@@ -59,21 +59,17 @@ const ThemeProvider: FC<ThemeProviderPropTypes> = (props: ThemeProviderPropTypes
     };
   }, []);
 
-  const StyleContext = getStyleContext();
-  const styleContextValue = useMemo(() => {
-    return {
-      staticCssInjected: staticCssInjected ?? false,
-      componentsMap: new Map()
-    };
+  useIsomorphicLayoutEffect(() => {
+    StyleStore.setStaticCssInjected(staticCssInjected);
   }, [staticCssInjected]);
 
   return (
-    <StyleContext.Provider value={styleContextValue}>
+    <>
       <ThemeProviderStyles />
       <ReactJssThemeProvider theme={ThemingParameters}>
         <I18nProvider>{withoutModalsProvider ? children : <ModalsProvider>{children}</ModalsProvider>}</I18nProvider>
       </ReactJssThemeProvider>
-    </StyleContext.Provider>
+    </>
   );
 };
 

packages/main/src/components/ThemeProvider/index.tsx

@@ -6664,6 +6664,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/use-sync-external-store@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "@types/use-sync-external-store@npm:0.0.6"
+  checksum: 10c0/77c045a98f57488201f678b181cccd042279aff3da34540ad242f893acc52b358bd0a8207a321b8ac09adbcef36e3236944390e2df4fcedb556ce7bb2a88f2a8
+  languageName: node
+  linkType: hard
+
 "@types/uuid@npm:^9.0.1":
   version: 9.0.7
   resolution: "@types/uuid@npm:9.0.7"
@@ -7083,6 +7090,8 @@ __metadata:
 "@ui5/webcomponents-react-base@workspace:packages/base, @ui5/webcomponents-react-base@workspace:~":
   version: 0.0.0-use.local
   resolution: "@ui5/webcomponents-react-base@workspace:packages/base"
+  dependencies:
+    use-sync-external-store: "npm:1.2.2"
   peerDependencies:
     "@types/react": "*"
     "@ui5/webcomponents-base": ~1.24.0
@@ -22932,6 +22941,7 @@ __metadata:
     "@types/node": "npm:^20.0.0"
     "@types/react": "npm:18.3.2"
     "@types/react-dom": "npm:^18.2.22"
+    "@types/use-sync-external-store": "npm:^0.0.6"
     "@typescript-eslint/eslint-plugin": "npm:^7.0.0"
     "@typescript-eslint/parser": "npm:^7.0.0"
     "@ui5/webcomponents": "npm:1.24.2"
@@ -23267,6 +23277,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:1.2.2":
+  version: 1.2.2
+  resolution: "use-sync-external-store@npm:1.2.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/23b1597c10adf15b26ade9e8c318d8cc0abc9ec0ab5fc7ca7338da92e89c2536abd150a5891bf076836c352fdfa104fc7231fb48f806fd9960e0cbe03601abaf
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"