launchdarkly-react-client-sdk - npm Package Compare versions

Comparing version 2.20.0 to 2.20.1

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change log
 
+## [2.20.1] - 2020-08-19
+### Fixed:
+- Fixed an issue where change listeners would update the component state when any flag was modified, even if the client instance was configured such that it was not subscribed for the modified flag. (Thanks, [clayembry](https://github.com/launchdarkly/react-client-sdk/pull/46)!)
+
 ## [2.20.0] - 2020-07-17
@@ -7,0 +11,0 @@ ### Changed:

lib/asyncWithLDProvider.js

@@ -61,3 +61,2 @@ "use strict";
 var react_1 = __importStar(require("react"));
-var lodash_camelcase_1 = __importDefault(require("lodash.camelcase"));
 var types_1 = require("./types");
@@ -112,9 +111,6 @@ var context_1 = require("./context");
                             ldClient.on('change', function (changes) {
-                                var flattened = {};
-                                for (var key in changes) {
-                                    // tslint:disable-next-line:no-unsafe-any
-                                    var flagKey = reactOptions.useCamelCaseFlagKeys ? lodash_camelcase_1.default(key) : key;
-                                    flattened[flagKey] = changes[key].current;
+                                var flattened = utils_1.getFlattenedFlagsFromChangeset(changes, flags, reactOptions);
+                                if (Object.keys(flattened).length > 0) {
+                                    setLDData(function (prev) { return (__assign(__assign({}, prev), { flags: __assign(__assign({}, prev.flags), flattened) })); });
                                 }
-                                setLDData(function (prev) { return (__assign(__assign({}, prev), { flags: __assign(__assign({}, prev.flags), flattened) })); });
                             });
@@ -121,0 +117,0 @@ }, []);

lib/provider.js

@@ -74,3 +74,2 @@ "use strict";
 var React = __importStar(require("react"));
-var lodash_camelcase_1 = __importDefault(require("lodash.camelcase"));
 var types_1 = require("./types");
@@ -103,14 +102,11 @@ var context_1 = require("./context");
         _this.subscribeToChanges = function (ldClient) {
+            var targetFlags = _this.props.flags;
             ldClient.on('change', function (changes) {
-                var flattened = {};
-                for (var key in changes) {
-                    // tslint:disable-next-line:no-unsafe-any
-                    var useCamelCaseFlagKeys = _this.getReactOptions().useCamelCaseFlagKeys;
-                    var flagKey = useCamelCaseFlagKeys ? lodash_camelcase_1.default(key) : key;
-                    flattened[flagKey] = changes[key].current;
+                var flattened = utils_1.getFlattenedFlagsFromChangeset(changes, targetFlags, _this.getReactOptions());
+                if (Object.keys(flattened).length > 0) {
+                    _this.setState(function (_a) {
+                        var flags = _a.flags;
+                        return ({ flags: __assign(__assign({}, flags), flattened) });
+                    });
                 }
-                _this.setState(function (_a) {
-                    var flags = _a.flags;
-                    return ({ flags: __assign(__assign({}, flags), flattened) });
-                });
             });
@@ -117,0 +113,0 @@ };

lib/utils.d.ts

@@ -1,2 +0,3 @@
-import { LDFlagSet } from 'launchdarkly-js-client-sdk';
+import { LDFlagChangeset, LDFlagSet } from 'launchdarkly-js-client-sdk';
+import { LDReactOptions } from './types';
 /**
@@ -10,5 +11,17 @@ * Transforms a set of flags so that their keys are camelCased. This function ignores
 export declare const camelCaseKeys: (rawFlags: LDFlagSet) => LDFlagSet;
+/**
+ * Gets the flags to pass to the provider from the changeset.
+ *
+ * @param changes the `LDFlagChangeset` from the ldClient onchange handler.
+ * @param targetFlags if targetFlags are specified, changes to other flags are ignored and not returned in the
+ * flattened `LDFlagSet`
+ * @param reactOptions reactOptions.useCamelCaseFlagKeys determines whether to change the flag keys to camelCase
+ * @return an `LDFlagSet` with the current flag values from the LDFlagChangeset filtered by `targetFlags`. The returned
+ * object may be empty `{}` if none of the targetFlags were changed.
+ */
+export declare const getFlattenedFlagsFromChangeset: (changes: LDFlagChangeset, targetFlags: LDFlagSet | undefined, reactOptions: LDReactOptions) => LDFlagSet;
 declare const _default: {
     camelCaseKeys: (rawFlags: LDFlagSet) => LDFlagSet;
+    getFlattenedFlagsFromChangeset: (changes: LDFlagChangeset, targetFlags: LDFlagSet | undefined, reactOptions: LDReactOptions) => LDFlagSet;
 };
 export default _default;

lib/utils.js

@@ -24,3 +24,24 @@ "use strict";
 };
-exports.default = { camelCaseKeys: exports.camelCaseKeys };
+/**
+ * Gets the flags to pass to the provider from the changeset.
+ *
+ * @param changes the `LDFlagChangeset` from the ldClient onchange handler.
+ * @param targetFlags if targetFlags are specified, changes to other flags are ignored and not returned in the
+ * flattened `LDFlagSet`
+ * @param reactOptions reactOptions.useCamelCaseFlagKeys determines whether to change the flag keys to camelCase
+ * @return an `LDFlagSet` with the current flag values from the LDFlagChangeset filtered by `targetFlags`. The returned
+ * object may be empty `{}` if none of the targetFlags were changed.
+ */
+exports.getFlattenedFlagsFromChangeset = function (changes, targetFlags, reactOptions) {
+    var flattened = {};
+    for (var key in changes) {
+        if (!targetFlags || targetFlags[key] !== undefined) {
+            // tslint:disable-next-line:no-unsafe-any
+            var flagKey = reactOptions.useCamelCaseFlagKeys ? lodash_camelcase_1.default(key) : key;
+            flattened[flagKey] = changes[key].current;
+        }
+    }
+    return flattened;
+};
+exports.default = { camelCaseKeys: exports.camelCaseKeys, getFlattenedFlagsFromChangeset: exports.getFlattenedFlagsFromChangeset };
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "launchdarkly-react-client-sdk",
-  "version": "2.20.0",
+  "version": "2.20.1",
   "description": "LaunchDarkly SDK for React",
@@ -5,0 +5,0 @@ "author": "LaunchDarkly <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

79404

increased by2.73%

Lines of code

1026

increased by2.6%

No dependency changes