@ui5/webcomponents-react-base - npm Package Compare versions

Comparing version 1.28.1 to 1.28.2

dist/hooks/useStylesheet.js

 'use client';
 import { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
-import * as React from 'react';
-import { useStyleContext } from '../context/StyleContext.js';
-function getUseInsertionEffect(isSSR) {
-    return isSSR ? React.useEffect : Reflect.get(React, 'useInsertionEffect') || React.useLayoutEffect;
-}
-function trackComponentStyleMount(componentMap, componentName) {
-    if (componentMap.has(componentName)) {
-        componentMap.set(componentName, componentMap.get(componentName) + 1);
-    }
-    else {
-        componentMap.set(componentName, 1);
-    }
-}
-function trackComponentStyleUnmount(componentMap, componentName) {
-    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, componentName) {
-    const styleContext = useStyleContext();
-    const { staticCssInjected, componentsMap } = styleContext;
-    getUseInsertionEffect(typeof window === 'undefined')(() => {
-        if (!staticCssInjected) {
+    const { staticCssInjected, componentsMap } = useSyncExternalStore(StyleStore.subscribe, StyleStore.getSnapshot);
+    useIsomorphicLayoutEffect(() => {
+        const shouldInject = !staticCssInjected;
+        if (shouldInject) {
             createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);
-            trackComponentStyleMount(componentsMap, componentName);
+            StyleStore.mountComponent(componentName);
         }
         return () => {
-            if (!staticCssInjected) {
-                trackComponentStyleUnmount(componentsMap, componentName);
+            if (shouldInject) {
+                StyleStore.unmountComponent(componentName);
                 const numberOfMountedComponents = componentsMap.get(componentName);
-                if (typeof numberOfMountedComponents === 'number' && numberOfMountedComponents <= 0) {
+                if (numberOfMountedComponents <= 0) {
                     removeStyle('data-ui5wcr-component', componentName);
@@ -35,0 +20,0 @@ }

dist/index.d.ts

 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';
@@ -10,2 +10,2 @@ import { ThemingParameters } from './styling/ThemingParameters.js';
 export * from './hooks/index.js';
-export { getI18nContext, I18nContext, getStyleContext, useStyleContext, ThemingParameters, Device, hooks, spacing };
+export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };

dist/index.js

 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';
@@ -10,2 +10,2 @@ import { ThemingParameters } from './styling/ThemingParameters.js';
 export * from './hooks/index.js';
-export { getI18nContext, I18nContext, getStyleContext, useStyleContext, ThemingParameters, Device, hooks, spacing };
+export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };

package.json

 {
   "name": "@ui5/webcomponents-react-base",
-  "version": "1.28.1",
+  "version": "1.28.2",
   "description": "Base for ui5-webcomponents-react",
@@ -59,3 +59,6 @@ "type": "module",
   ],
-  "gitHead": "2c9d1ff456a945d5dcae46f395dc9b1bc042c65d"
+  "dependencies": {
+    "use-sync-external-store": "1.2.2"
+  },
+  "gitHead": "aec9ddb88312b1602a680e57693781743aa19183"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

284080

increased by0.43%

Lines of code

3628

increased by0.86%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addeduse-sync-external-store@1.2.2

• + Addeduse-sync-external-store@1.2.2(transitive)