Merge pull request #184 from launchdarkly/release-3.0.3

prepare 3.0.3 release

Author: yusinto

src/getFlagsProxy.test.ts

@@ -26,40 +26,39 @@ test('native Object functions should be ignored', () => {
 
 test('camel cases keys', () => {
   const { flags } = getFlagsProxy(ldClient, rawFlags);
-
   expect(flags).toEqual(camelizedFlags);
 });
 
 test('does not camel cases keys', () => {
-  const { flags } = getFlagsProxy(ldClient, rawFlags, { useCamelCaseFlagKeys: false });
-
+  const { flags } = getFlagsProxy(ldClient, rawFlags, { ...defaultReactOptions, useCamelCaseFlagKeys: false });
   expect(flags).toEqual(rawFlags);
 });
 
-test('proxy calls ldClient.variation on flag read', () => {
+test('proxy calls ldClient.variation on flag read when camelCase true', () => {
   const { flags } = getFlagsProxy(ldClient, rawFlags);
-
   expect(flags.fooBar).toBe('foobar');
+  expect(ldClient.variation).toHaveBeenCalledWith('foo-bar', 'foobar');
+});
 
+test('proxy calls ldClient.variation on flag read when camelCase false', () => {
+  const { flags } = getFlagsProxy(ldClient, rawFlags, { ...defaultReactOptions, useCamelCaseFlagKeys: false });
+  expect(flags.fooBar).toBeUndefined();
+  expect(flags['foo-bar']).toEqual('foobar');
   expect(ldClient.variation).toHaveBeenCalledWith('foo-bar', 'foobar');
 });
 
 test('returns flag key map', () => {
   const { flagKeyMap } = getFlagsProxy(ldClient, rawFlags);
-
   expect(flagKeyMap).toEqual({ fooBar: 'foo-bar', bazQux: 'baz-qux' });
 });
 
 test('filters to target flags', () => {
   const { flags } = getFlagsProxy(ldClient, rawFlags, defaultReactOptions, { 'foo-bar': 'mr-toot' });
-
   expect(flags).toEqual({ fooBar: 'foobar' });
 });
 
-test('does not use proxy if option is false', () => {
-  const { flags } = getFlagsProxy(ldClient, rawFlags, { sendEventsOnFlagRead: false });
-
-  expect(flags['foo-bar']).toBe('foobar');
-
+test('does not use proxy if sendEventsOnFlagRead is false', () => {
+  const { flags } = getFlagsProxy(ldClient, rawFlags, { ...defaultReactOptions, sendEventsOnFlagRead: false });
+  expect(flags.fooBar).toBe('foobar');
   expect(ldClient.variation).not.toHaveBeenCalled();
 });

src/getFlagsProxy.ts

@@ -9,12 +9,11 @@ export default function getFlagsProxy(
   targetFlags?: LDFlagSet,
 ): { flags: LDFlagSet; flagKeyMap: LDFlagKeyMap } {
   const filteredFlags = filterFlags(rawFlags, targetFlags);
-  const [flags, flagKeyMap = {}] = reactOptions.useCamelCaseFlagKeys
-    ? getCamelizedKeysAndFlagMap(filteredFlags)
-    : [filteredFlags];
+  const { useCamelCaseFlagKeys = true } = reactOptions;
+  const [flags, flagKeyMap = {}] = useCamelCaseFlagKeys ? getCamelizedKeysAndFlagMap(filteredFlags) : [filteredFlags];
 
   return {
-    flags: reactOptions.sendEventsOnFlagRead ? toFlagsProxy(ldClient, flags, flagKeyMap) : flags,
+    flags: reactOptions.sendEventsOnFlagRead ? toFlagsProxy(ldClient, flags, flagKeyMap, useCamelCaseFlagKeys) : flags,
     flagKeyMap,
   };
 }
@@ -53,22 +52,33 @@ function hasFlag(flags: LDFlagSet, flagKey: string) {
   return Object.prototype.hasOwnProperty.call(flags, flagKey);
 }
 
-function toFlagsProxy(ldClient: LDClient, flags: LDFlagSet, flagKeyMap: LDFlagKeyMap): LDFlagSet {
+function toFlagsProxy(
+  ldClient: LDClient,
+  flags: LDFlagSet,
+  flagKeyMap: LDFlagKeyMap,
+  useCamelCaseFlagKeys: boolean,
+): LDFlagSet {
   return new Proxy(flags, {
     // trap for reading a flag value using `LDClient#variation` to trigger an evaluation event
     get(target, prop, receiver) {
       const currentValue = Reflect.get(target, prop, receiver);
 
+      // check if flag key exists as camelCase or original case
+      const validFlagKey =
+        (useCamelCaseFlagKeys && hasFlag(flagKeyMap, prop as string)) || hasFlag(target, prop as string);
+
       // only process flag keys and ignore symbols and native Object functions
-      if (typeof prop === 'symbol' || !hasFlag(flagKeyMap, prop)) {
+      if (typeof prop === 'symbol' || !validFlagKey) {
         return currentValue;
       }
 
       if (currentValue === undefined) {
         return;
       }
 
-      return ldClient.variation(flagKeyMap[prop], currentValue);
+      const pristineFlagKey = useCamelCaseFlagKeys ? flagKeyMap[prop] : prop;
+
+      return ldClient.variation(pristineFlagKey, currentValue);
     },
   });
 }

src/useLDClient.ts

@@ -3,7 +3,7 @@ import context from './context';
 
 // tslint:disable:max-line-length
 /**
- * `useLDClient` is a custom hook which returns the underlying [LaunchDarkly JavaScript SDK client object](https://launchdarkly.github.io/js-client-sdk/interfaces/_launchdarkly_js_client_sdk_.ldclient.html).
+ * `useLDClient` is a custom hook which returns the underlying [LaunchDarkly JavaScript SDK client object](https://launchdarkly.github.io/js-client-sdk/interfaces/LDClient.html).
  * Like the `useFlags` custom hook, `useLDClient` also uses the `useContext` primitive to access the LaunchDarkly
  * context set up by `withLDProvider`. You will still need to use the `withLDProvider` HOC
  * to initialise the react sdk to use this custom hook.