@fluentui/react-tabster - npm Package Compare versions

Comparing version 0.0.0-nightly-20240820-2210.1 to 0.0.0-nightly-20240822-0407.1

lib-commonjs/hooks/useMergeTabsterAttributes.js

@@ -16,37 +16,64 @@ "use strict";
     'use no memo';
-    const stringAttributes = attributes.map((attribute)=>attribute[_tabster.TABSTER_ATTRIBUTE_NAME]).filter(Boolean);
-    return _react.useMemo(()=>{
-        let attribute = stringAttributes[0];
-        attributes.shift();
-        for (const attr of stringAttributes){
-            attribute = mergeAttributes(attribute, attr);
+    const stringAttributes = attributes.reduce((acc, curr)=>{
+        if (curr[_tabster.TABSTER_ATTRIBUTE_NAME]) {
+            acc.push(curr[_tabster.TABSTER_ATTRIBUTE_NAME]);
         }
-        return {
-            [_tabster.TABSTER_ATTRIBUTE_NAME]: attribute
-        };
+        return acc;
+    }, []);
+    if (process.env.NODE_ENV !== 'production') {
+        // ignoring rules of hooks because this is a condition based on the environment
+        // it's safe to ignore the rule
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useWarnIfUnstableAttributes(stringAttributes);
+    }
+    return _react.useMemo(()=>({
+            [_tabster.TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined
+        }), // this is safe because the collection of attributes is not expected to change at runtime
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, stringAttributes);
+    stringAttributes);
 };
-function mergeAttributes(a, b) {
-    if (!b) {
-        return a;
+/**
+ * Merges two JSON strings into one.
+ */ const mergeJSONStrings = (a, b)=>JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));
+/**
+ * Tries to parse a JSON string and returns an object.
+ * If the JSON string is invalid, an empty object is returned.
+ */ const safelyParseJSON = (json)=>{
+    try {
+        return JSON.parse(json);
+    } catch  {
+        return {};
     }
-    let aParsed = {};
-    let bParsed = {};
-    if (a) {
-        try {
-            aParsed = JSON.parse(a);
-        // eslint-disable-next-line no-empty
-        } catch  {}
+};
+/**
+ * Helper hook that ensures that the attributes passed to the hook are stable.
+ * This is necessary because the attributes are expected to not change at runtime.
+ *
+ * This hook will console.warn if the attributes change at runtime.
+ */ const useWarnIfUnstableAttributes = (attributes)=>{
+    'use no memo';
+    const initialAttributesRef = _react.useRef(attributes);
+    let isStable = initialAttributesRef.current.length === attributes.length;
+    if (initialAttributesRef.current !== attributes && isStable) {
+        for(let i = 0; i < attributes.length; i++){
+            if (initialAttributesRef.current[i] !== attributes[i]) {
+                isStable = false;
+                break;
+            }
+        }
     }
-    if (b) {
-        try {
-            bParsed = JSON.parse(b);
-        // eslint-disable-next-line no-empty
-        } catch  {}
-    }
-    return JSON.stringify({
-        ...aParsed,
-        ...bParsed
-    });
-}
+    _react.useEffect(()=>{
+        if (!isStable) {
+            const error = new Error();
+            // eslint-disable-next-line no-console
+            console.warn(/** #__DE-INDENT__ */ `
+        @fluentui/react-tabster [useMergedTabsterAttributes]:
+        The attributes passed to the hook changed at runtime.
+        This might lead to unexpected behavior, please ensure that the attributes are stable.
+        ${error.stack}
+      `);
+        }
+    }, [
+        isStable
+    ]);
+};

lib/hooks/useMergeTabsterAttributes.js

@@ -12,37 +12,65 @@ import * as React from 'react';
     'use no memo';
-    const stringAttributes = attributes.map((attribute)=>attribute[TABSTER_ATTRIBUTE_NAME]).filter(Boolean);
-    return React.useMemo(()=>{
-        let attribute = stringAttributes[0];
-        attributes.shift();
-        for (const attr of stringAttributes){
-            attribute = mergeAttributes(attribute, attr);
+    const stringAttributes = attributes.reduce((acc, curr)=>{
+        if (curr[TABSTER_ATTRIBUTE_NAME]) {
+            acc.push(curr[TABSTER_ATTRIBUTE_NAME]);
         }
-        return {
-            [TABSTER_ATTRIBUTE_NAME]: attribute
-        };
+        return acc;
+    }, []);
+    if (process.env.NODE_ENV !== 'production') {
+        // ignoring rules of hooks because this is a condition based on the environment
+        // it's safe to ignore the rule
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useWarnIfUnstableAttributes(stringAttributes);
+    }
+    return React.useMemo(()=>({
+            [TABSTER_ATTRIBUTE_NAME]: stringAttributes.length > 0 ? stringAttributes.reduce(mergeJSONStrings) : undefined
+        }), // disable exhaustive-deps because we want to memoize the result of the reduction
+    // this is safe because the collection of attributes is not expected to change at runtime
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, stringAttributes);
+    stringAttributes);
 };
-function mergeAttributes(a, b) {
-    if (!b) {
-        return a;
+/**
+ * Merges two JSON strings into one.
+ */ const mergeJSONStrings = (a, b)=>JSON.stringify(Object.assign(safelyParseJSON(a), safelyParseJSON(b)));
+/**
+ * Tries to parse a JSON string and returns an object.
+ * If the JSON string is invalid, an empty object is returned.
+ */ const safelyParseJSON = (json)=>{
+    try {
+        return JSON.parse(json);
+    } catch  {
+        return {};
     }
-    let aParsed = {};
-    let bParsed = {};
-    if (a) {
-        try {
-            aParsed = JSON.parse(a);
-        // eslint-disable-next-line no-empty
-        } catch  {}
+};
+/**
+ * Helper hook that ensures that the attributes passed to the hook are stable.
+ * This is necessary because the attributes are expected to not change at runtime.
+ *
+ * This hook will console.warn if the attributes change at runtime.
+ */ const useWarnIfUnstableAttributes = (attributes)=>{
+    'use no memo';
+    const initialAttributesRef = React.useRef(attributes);
+    let isStable = initialAttributesRef.current.length === attributes.length;
+    if (initialAttributesRef.current !== attributes && isStable) {
+        for(let i = 0; i < attributes.length; i++){
+            if (initialAttributesRef.current[i] !== attributes[i]) {
+                isStable = false;
+                break;
+            }
+        }
     }
-    if (b) {
-        try {
-            bParsed = JSON.parse(b);
-        // eslint-disable-next-line no-empty
-        } catch  {}
-    }
-    return JSON.stringify({
-        ...aParsed,
-        ...bParsed
-    });
-}
+    React.useEffect(()=>{
+        if (!isStable) {
+            const error = new Error();
+            // eslint-disable-next-line no-console
+            console.warn(/** #__DE-INDENT__ */ `
+        @fluentui/react-tabster [useMergedTabsterAttributes]:
+        The attributes passed to the hook changed at runtime.
+        This might lead to unexpected behavior, please ensure that the attributes are stable.
+        ${error.stack}
+      `);
+        }
+    }, [
+        isStable
+    ]);
+};

package.json

 {
   "name": "@fluentui/react-tabster",
-  "version": "0.0.0-nightly-20240820-2210.1",
+  "version": "0.0.0-nightly-20240822-0407.1",
   "description": "Utilities for focus management and facade for tabster",
@@ -34,5 +34,5 @@ "main": "lib-commonjs/index.js",
   "dependencies": {
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240820-2210.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240820-2210.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240822-0407.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240822-0407.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240822-0407.1",
     "@griffel/react": "^1.5.22",
@@ -39,0 +39,0 @@ "@swc/helpers": "^0.5.1",

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

462207

increased by1.92%

Lines of code

3546

increased by1.58%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20240822-0407.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20240822-0407.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20240822-0407.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20240822-0407.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20240822-0407.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240820-2210.1(transitive)

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20240822-0407.1

• Updated@fluentui/react-theme@0.0.0-nightly-20240822-0407.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20240822-0407.1