Merge branch 'main' into christie/analytics

Author: XieX

package.json

@@ -46,7 +46,6 @@
     "@types/react": "^18.0.3",
     "@types/react-dom": "^18.0.0",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/uuid": "^3.4.5",
     "jest": "^27.4.4",
     "jest-environment-jsdom": "^27.4.4",
     "jest-environment-jsdom-global": "^3.0.0",
@@ -66,8 +65,7 @@
   "dependencies": {
     "hoist-non-react-statics": "^3.3.2",
     "launchdarkly-js-client-sdk": "2.22.1",
-    "lodash.camelcase": "^4.3.0",
-    "uuid": "^3.3.2"
+    "lodash.camelcase": "^4.3.0"
   },
   "peerDependencies": {
     "react": "^16.6.3 || ^17.0.0 || ^18.0.0",

src/initLDClient.ts

@@ -17,6 +17,7 @@ const wrapperOptions: LDOptions = {
  * @param reactOptions Initialization options for the LaunchDarkly React SDK
  * @param options LaunchDarkly initialization options
  * @param targetFlags If specified, `launchdarkly-react-client-sdk` will only request and listen to these flags.
+ * Flag keys must be in their original form as known to LaunchDarkly rather than in their camel-cased form.
  *
  * @see `ProviderConfig` for more details about the parameters
  * @return An initialized client and flags

src/types.ts

@@ -69,6 +69,7 @@ export interface ProviderConfig {
   /**
    * If specified, `launchdarkly-react-client-sdk` will only request and listen to these flags.
    * Otherwise, all flags will be requested and listened to.
+   * Flag keys must be in their original form as known to LaunchDarkly rather than in their camel-cased form.
    */
   flags?: LDFlagSet;
 

src/utils.test.ts

@@ -2,20 +2,44 @@ import { camelCaseKeys, fetchFlags, getFlattenedFlagsFromChangeset } from './uti
 import { LDClient, LDFlagChangeset, LDFlagSet } from 'launchdarkly-js-client-sdk';
 import { defaultReactOptions, LDReactOptions } from './types';
 
+const caseTestCases = [
+  ['camelCase', 'camelCase'],
+  ['PascalCase', 'pascalCase'],
+  ['kebab-case', 'kebabCase'],
+  ['SCREAMING-KEBAB-CASE', 'screamingKebabCase'],
+  ['snake_case', 'snakeCase'],
+  ['SCREAMING_SNAKE_CASE', 'screamingSnakeCase'],
+  ['camel_Snake_Case', 'camelSnakeCase'],
+  ['Pascal_Snake_Case', 'pascalSnakeCase'],
+  ['Train-Case', 'trainCase'],
+  // we can possibly drop support for these as they are unlikely used in practice
+  ['snake_kebab-case', 'snakeKebabCase'],
+  ['dragon.case', 'dragonCase'],
+  ['SCREAMING.DRAGON.CASE', 'screamingDragonCase'],
+  ['PascalDragon.Snake_Kebab-Case', 'pascalDragonSnakeKebabCase'],
+  ['SCREAMING.DRAGON_SNAKE_KEBAB-CASE', 'screamingDragonSnakeKebabCase'],
+];
+
 describe('Utils', () => {
-  test('camelCaseKeys should ignore system keys', () => {
-    const bootstrap = {
-      'test-flag': true,
-      'another-test-flag': false,
-      $flagsState: {
-        'test-flag': { version: 125, variation: 0, trackEvents: true },
-        'another-test-flag': { version: 18, variation: 1 },
-      },
-      $valid: true,
-    };
+  describe('camelCaseKeys', () => {
+    test('should ignore system keys', () => {
+      const bootstrap = {
+        'test-flag': true,
+        'another-test-flag': false,
+        $flagsState: {
+          'test-flag': { version: 125, variation: 0, trackEvents: true },
+          'another-test-flag': { version: 18, variation: 1 },
+        },
+        $valid: true,
+      };
 
-    const result = camelCaseKeys(bootstrap);
-    expect(result).toEqual({ testFlag: true, anotherTestFlag: false });
+      const result = camelCaseKeys(bootstrap);
+      expect(result).toEqual({ testFlag: true, anotherTestFlag: false });
+    });
+
+    test.each(caseTestCases)('should handle %s', (key, camelKey) => {
+      expect(camelCaseKeys({ [key]: false })).toEqual({ [camelKey]: false });
+    });
   });
 
   test('getFlattenedFlagsFromChangeset should return current values of all flags when no targetFlags specified', () => {

src/utils.ts

@@ -54,6 +54,7 @@ export const getFlattenedFlagsFromChangeset = (
  * @param ldClient LaunchDarkly client
  * @param reactOptions Initialization options for the LaunchDarkly React SDK
  * @param targetFlags If specified, `launchdarkly-react-client-sdk` will only request and listen to these flags.
+ * Flag keys must be in their original form as known to LaunchDarkly rather than in their camel-cased form.
  *
  * @returns an `LDFlagSet` with the current flag values from LaunchDarkly filtered by `targetFlags`.
  */