Reinstate 2.12.5 and 2.13.0 (#4)

* reinstate 2.12.5 and 2.13.0

* lint errors

* adding a missing file

Author: bwoskow-ld

CHANGELOG.md

@@ -1,6 +1,17 @@
 # Change log
 
-All notable changes to the LaunchDarkly Client-side SDK for React will be documented in this file. For the source code for versions 2.12.4 and earlier, see the corresponding tags in the [js-client-sdk](https://github.com/launchdarkly/js-client-sdk) repository; this code was previously in a monorepo package there. See also the [JavaScript SDK changelog](https://github.com/launchdarkly/js-client-sdk/blob/master/CHANGELOG.md), since the React SDK inherits all of the underlying functionality of the JavaScript SDK; this file covers only changes that are specific to the React interface. This project adheres to [Semantic Versioning](http://semver.org).
+All notable changes to the LaunchDarkly Client-side SDK for React will be documented in this file. For the source code for versions 2.13.0 and earlier, see the corresponding tags in the [js-client-sdk](https://github.com/launchdarkly/js-client-sdk) repository; this code was previously in a monorepo package there. See also the [JavaScript SDK changelog](https://github.com/launchdarkly/js-client-sdk/blob/master/CHANGELOG.md), since the React SDK inherits all of the underlying functionality of the JavaScript SDK; this file covers only changes that are specific to the React interface. This project adheres to [Semantic Versioning](http://semver.org).
+
+## [2.13.0] - 2019-08-15
+### Added:
+- In the React SDK, the new `reactOptions` parameter to `withLDProvider` provides React-specific options that do not affect the underlying JavaScript SDK. Currently, the only such option is `useCamelCaseFlagKeys`, which is true by default but can be set to false to disable the automatic camel-casing of flag keys.
+ 
+### Changed:
+- In the React SDK, when omitting the `user` parameter to `withLDProvider`, an anonymous user will be created. This user will remain constant across browser sessions. Previously a new user was generated on each page load.
+
+## [2.12.5] - 2019-07-29 
+### Fixed:
+- The React SDK was incompatible with Internet Explorer 11 due to using `String.startsWith()`. (Thanks, [cvetanov](https://github.com/launchdarkly/js-client-sdk/pull/169)!)
 
 ## [2.12.4] - 2019-07-10
 ### Fixed:

package-lock.json

@@ -40,7 +40,7 @@
     "enzyme-adapter-react-16": "1.10.0",
     "jest": "^24.1.0",
     "jest-junit": "^6.3.0",
-    "prettier": "^1.16.4",
+    "prettier": "^1.18.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",

package.json

@@ -8,16 +8,14 @@ jest.mock('launchdarkly-js-client-sdk', () => {
 });
 jest.mock('uuid', () => ({ v4: jest.fn() }));
 
-import { v4 } from 'uuid';
 import { initialize, LDClient, LDOptions, LDUser } from 'launchdarkly-js-client-sdk';
+import { defaultReactOptions, LDReactOptions } from './types';
 import initLDClient from './initLDClient';
 
 const ldClientInitialize = initialize as jest.Mock;
-const uuid = v4 as jest.Mock;
 
 const clientSideID = 'deadbeef';
-const mockUserKey = 'abcdef';
-const defaulUser: LDUser = { key: mockUserKey };
+const defaultUser: LDUser = { key: 'abcdef' };
 const options: LDOptions = { bootstrap: 'localStorage' };
 const flags = { 'test-flag': false, 'another-test-flag': true };
 
@@ -34,40 +32,55 @@ describe('initLDClient', () => {
     };
 
     ldClientInitialize.mockImplementation(() => mockLDClient);
-    uuid.mockImplementation(() => mockUserKey);
   });
 
   afterEach(() => {
     jest.resetAllMocks();
   });
 
   test('initialise with clientSideID only', async () => {
+    const anonUser: LDUser = { anonymous: true };
     await initLDClient(clientSideID);
 
-    expect(ldClientInitialize.mock.calls[0]).toEqual([clientSideID, defaulUser, undefined]);
+    expect(ldClientInitialize.mock.calls[0]).toEqual([clientSideID, anonUser, undefined]);
     expect(mockLDClient.variation).toHaveBeenCalledTimes(0);
   });
 
   test('initialise with custom user and options', async () => {
     const customUser = { key: '[email protected]' };
-    await initLDClient(clientSideID, customUser, options);
+    await initLDClient(clientSideID, customUser, defaultReactOptions, options);
 
     expect(ldClientInitialize.mock.calls[0]).toEqual([clientSideID, customUser, options]);
     expect(mockLDClient.variation).toHaveBeenCalledTimes(0);
   });
 
-  test('initialise should return camelCased flags', async () => {
+  test('initialise should return camelCased flags by default', async () => {
     const flagsClient = await initLDClient(clientSideID);
 
     expect(mockLDClient.variation).toHaveBeenCalledTimes(0);
     expect(flagsClient).toEqual({ flags: { anotherTestFlag: true, testFlag: false }, ldClient: mockLDClient });
   });
 
+  test('initialise should not transform keys to camel case if option is disabled', async () => {
+    const reactOptions: LDReactOptions = { useCamelCaseFlagKeys: false };
+    const flagsClient = await initLDClient(clientSideID, defaultUser, reactOptions, options);
+
+    expect(mockLDClient.variation).toHaveBeenCalledTimes(0);
+    expect(flagsClient).toEqual({ flags: { 'another-test-flag': true, 'test-flag': false }, ldClient: mockLDClient });
+  });
+
+  test('initialise should transform keys to camel case if option is absent', async () => {
+    const flagsClient = await initLDClient(clientSideID, defaultUser, defaultReactOptions, options);
+
+    expect(mockLDClient.variation).toHaveBeenCalledTimes(0);
+    expect(flagsClient).toEqual({ flags: { anotherTestFlag: true, testFlag: false }, ldClient: mockLDClient });
+  });
+
   test('initialise should call variation if flags are specified', async () => {
     const customUser = { key: '[email protected]' };
     const targetFlags = { 'lonely-flag': false, 'lonelier-flag': false };
 
-    const flagsClient = await initLDClient(clientSideID, customUser, options, targetFlags);
+    const flagsClient = await initLDClient(clientSideID, customUser, defaultReactOptions, options, targetFlags);
 
     expect(mockLDClient.variation).toHaveBeenCalledTimes(2);
     expect(mockLDClient.variation).toHaveBeenNthCalledWith(1, 'lonely-flag', false);

src/initLDClient.test.ts

@@ -1,5 +1,5 @@
 import { initialize as ldClientInitialize, LDClient, LDFlagSet, LDOptions, LDUser } from 'launchdarkly-js-client-sdk';
-import { v4 as uuid } from 'uuid';
+import { defaultReactOptions, LDReactOptions } from './types';
 import { camelCaseKeys } from './utils';
 
 interface AllFlagsLDClient {
@@ -9,7 +9,8 @@ interface AllFlagsLDClient {
 
 const initLDClient = async (
   clientSideID: string,
-  user: LDUser = { key: uuid() },
+  user: LDUser = { anonymous: true },
+  reactOptions: LDReactOptions = defaultReactOptions,
   options?: LDOptions,
   targetFlags?: LDFlagSet,
 ): Promise<AllFlagsLDClient> => {
@@ -27,7 +28,8 @@ const initLDClient = async (
         rawFlags = ldClient.allFlags();
       }
 
-      resolve({ flags: camelCaseKeys(rawFlags), ldClient });
+      const flags = reactOptions.useCamelCaseFlagKeys ? camelCaseKeys(rawFlags) : rawFlags;
+      resolve({ flags, ldClient });
     });
   });
 };

src/initLDClient.ts

@@ -0,0 +1,72 @@
+import { LDClient, LDFlagSet, LDOptions, LDUser } from 'launchdarkly-js-client-sdk';
+import * as React from 'react';
+
+/**
+ * Initialization options for the LaunchDarkly React SDK. These are in addition to the options exposed
+ * by [[LDOptions]] which are common to both the JavaScript and React SDKs.
+ */
+export interface LDReactOptions {
+  /**
+   * Whether the React SDK should transform flag keys into camel-cased format.
+   * Using camel-cased flag keys allow for easier use as prop values, however,
+   * these keys won't directly match the flag keys as known to LaunchDarkly.
+   * Consequently, flag key collisions may be possible and the Code References feature
+   * will not function properly.
+   *
+   * This is true by default, meaning that keys will automatically be converted to camel-case.
+   *
+   * For more information, see the React SDK Reference Guide on
+   * [flag keys](https://docs.launchdarkly.com/docs/react-sdk-reference#section-flag-keys).
+   */
+  useCamelCaseFlagKeys?: boolean;
+}
+
+export const defaultReactOptions = { useCamelCaseFlagKeys: true };
+
+/**
+ * Configuration object used to initialise LaunchDarkly's js client.
+ */
+export interface ProviderConfig {
+  /**
+   * Your project and environment specific client side ID. You can find
+   * this in your LaunchDarkly portal under Account settings. This is
+   * the only mandatory property required to use the React SDK.
+   */
+  clientSideID: string;
+
+  /**
+   * A LaunchDarkly user object. If unspecified, a new user with a
+   * random key will be created and used. This user's key will remain constant across browser sessions.
+   *
+   * @see http://docs.launchdarkly.com/docs/js-sdk-reference#section-users
+   */
+  user?: LDUser;
+
+  /**
+   * LaunchDarkly initialization options. These options are common between LaunchDarkly's JavaScript and React SDKs.
+   *
+   * @see https://docs.launchdarkly.com/docs/js-sdk-reference#section-customizing-your-client
+   */
+  options?: LDOptions;
+
+  /**
+   * Additional initialization options specific to the React SDK.
+   *
+   * @see options
+   */
+  reactOptions?: LDReactOptions;
+
+  /**
+   * If specified, launchdarkly-react-client-sdk will only request and listen to these flags.
+   * Otherwise, all flags will be requested and listened to.
+   */
+  flags?: LDFlagSet;
+}
+
+/**
+ * The return type of withLDProvider HOC. Exported for testing purposes only.
+ */
+export interface EnhancedComponent extends React.Component {
+  subscribeToChanges(ldClient: LDClient): void;
+  componentDidMount(): Promise<void>;
+}

src/types.ts

@@ -1,5 +1,4 @@
 import { camelCaseKeys } from './utils';
-import { LDOptions } from 'launchdarkly-js-client-sdk';
 
 describe('Utils', () => {
   test('camelCaseKeys should ignore system keys', () => {

src/utils.test.ts

@@ -6,8 +6,7 @@ export const camelCaseKeys = (rawFlags: LDFlagSet) => {
   for (const rawFlag in rawFlags) {
     // Exclude system keys
     if (rawFlag.indexOf('$') !== 0) {
-      const camelCasedKey = camelCase(rawFlag);
-      flags[camelCasedKey] = rawFlags[rawFlag];
+      flags[camelCase(rawFlag)] = rawFlags[rawFlag]; // tslint:disable-line:no-unsafe-any
     }
   }
 

src/utils.ts

@@ -11,6 +11,7 @@ jest.mock('./context', () => {
   }
 
   return {
+    // tslint:disable-next-line:no-null-undefined-union
     Consumer(props: ConsumerChildren) {
       return props.children({ flags: { testFlag: true }, ldClient: { track: jest.fn() } });
     },
@@ -40,7 +41,7 @@ describe('withLDConsumer', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('only ldClient is passed down through context api', async () => {
+  test('only ldClient is passed down through context api', () => {
     const Home = (props: HocProps) => (
       <div>
         {props.flags ? 'flags detected' : 'Negative, no flag'}

src/withLDConsumer.test.tsx

@@ -6,7 +6,8 @@ import { create } from 'react-test-renderer';
 import { shallow } from 'enzyme';
 import { LDFlagChangeset, LDFlagSet, LDOptions, LDUser } from 'launchdarkly-js-client-sdk';
 import initLDClient from './initLDClient';
-import withLDProvider, { EnhancedComponent } from './withLDProvider';
+import withLDProvider from './withLDProvider';
+import { LDReactOptions, EnhancedComponent, defaultReactOptions } from './types';
 import { LDContext as HocState } from './context';
 
 const clientSideID = 'deadbeef';
@@ -31,7 +32,7 @@ describe('withLDProvider', () => {
     jest.resetAllMocks();
   });
 
-  test('render app', async () => {
+  test('render app', () => {
     const LaunchDarklyApp = withLDProvider({ clientSideID })(App);
     const component = create(<LaunchDarklyApp />);
     expect(component).toMatchSnapshot();
@@ -44,10 +45,10 @@ describe('withLDProvider', () => {
     const instance = create(<LaunchDarklyApp />).root.instance as EnhancedComponent;
 
     await instance.componentDidMount();
-    expect(mockInitLDClient).toHaveBeenCalledWith(clientSideID, user, options, undefined);
+    expect(mockInitLDClient).toHaveBeenCalledWith(clientSideID, user, defaultReactOptions, options, undefined);
   });
 
-  test('ld client is bootstrapped correctly', async () => {
+  test('ld client is bootstrapped correctly and transforms keys to camel case', () => {
     const user: LDUser = { key: 'yus', name: 'yus ng' };
     const options: LDOptions = {
       bootstrap: {
@@ -68,7 +69,59 @@ describe('withLDProvider', () => {
     expect(initialState.flags).toEqual({ testFlag: true, anotherTestFlag: false });
   });
 
-  test('state.flags should be initialised to empty when bootstrapping from localStorage', async () => {
+  test('ld client should not transform keys to camel case if option is disabled', () => {
+    const user: LDUser = { key: 'yus', name: 'yus ng' };
+    const options: LDOptions = {
+      bootstrap: {
+        'test-flag': true,
+        'another-test-flag': false,
+      },
+    };
+    const reactOptions: LDReactOptions = {
+      useCamelCaseFlagKeys: false,
+    };
+    const LaunchDarklyApp = withLDProvider({ clientSideID, user, options, reactOptions })(App);
+    const component = shallow(<LaunchDarklyApp />, { disableLifecycleMethods: true });
+    const initialState = component.state() as HocState;
+
+    expect(mockInitLDClient).not.toHaveBeenCalled();
+    expect(initialState.flags).toEqual({ 'test-flag': true, 'another-test-flag': false });
+  });
+
+  test('ld client should transform keys to camel case if transform option is absent', () => {
+    const user: LDUser = { key: 'yus', name: 'yus ng' };
+    const options: LDOptions = {
+      bootstrap: {
+        'test-flag': true,
+        'another-test-flag': false,
+      },
+    };
+    const reactOptions: LDReactOptions = {};
+    const LaunchDarklyApp = withLDProvider({ clientSideID, user, options, reactOptions })(App);
+    const component = shallow(<LaunchDarklyApp />, { disableLifecycleMethods: true });
+    const initialState = component.state() as HocState;
+
+    expect(mockInitLDClient).not.toHaveBeenCalled();
+    expect(initialState.flags).toEqual({ testFlag: true, anotherTestFlag: false });
+  });
+
+  test('ld client should transform keys to camel case if react options object is absent', () => {
+    const user: LDUser = { key: 'yus', name: 'yus ng' };
+    const options: LDOptions = {
+      bootstrap: {
+        'test-flag': true,
+        'another-test-flag': false,
+      },
+    };
+    const LaunchDarklyApp = withLDProvider({ clientSideID, user, options })(App);
+    const component = shallow(<LaunchDarklyApp />, { disableLifecycleMethods: true });
+    const initialState = component.state() as HocState;
+
+    expect(mockInitLDClient).not.toHaveBeenCalled();
+    expect(initialState.flags).toEqual({ testFlag: true, anotherTestFlag: false });
+  });
+
+  test('state.flags should be initialised to empty when bootstrapping from localStorage', () => {
     const user: LDUser = { key: 'yus', name: 'yus ng' };
     const options: LDOptions = {
       bootstrap: 'localStorage',
@@ -95,7 +148,7 @@ describe('withLDProvider', () => {
 
     await instance.componentDidMount();
 
-    expect(mockInitLDClient).toHaveBeenCalledWith(clientSideID, user, options, flags);
+    expect(mockInitLDClient).toHaveBeenCalledWith(clientSideID, user, defaultReactOptions, options, flags);
     expect(instance.setState).toHaveBeenCalledWith({
       flags: { devTestFlag: true, launchDoggly: true },
       ldClient: mockLDClient,
@@ -120,7 +173,7 @@ describe('withLDProvider', () => {
     expect(instance.subscribeToChanges).toHaveBeenCalled();
   });
 
-  test('subscribe to changes', async () => {
+  test('subscribe to changes with camelCase', async () => {
     mockLDClient.on.mockImplementation((e: string, cb: (c: LDFlagChangeset) => void) => {
       cb({ 'test-flag': { current: false, previous: true } });
     });
@@ -135,4 +188,20 @@ describe('withLDProvider', () => {
     expect(mockLDClient.on).toHaveBeenCalledWith('change', expect.any(Function));
     expect(newState).toEqual({ flags: { anotherTestFlag: true, testFlag: false } });
   });
+
+  test('subscribe to changes with kebab-case', async () => {
+    mockLDClient.on.mockImplementation((e: string, cb: (c: LDFlagChangeset) => void) => {
+      cb({ 'another-test-flag': { current: false, previous: true }, 'test-flag': { current: false, previous: true } });
+    });
+    const LaunchDarklyApp = withLDProvider({ clientSideID, reactOptions: { useCamelCaseFlagKeys: false } })(App);
+    const instance = create(<LaunchDarklyApp />).root.instance as EnhancedComponent;
+    const mockSetState = jest.spyOn(instance, 'setState');
+
+    await instance.componentDidMount();
+    const callback = mockSetState.mock.calls[1][0] as (flags: LDFlagSet) => LDFlagSet;
+    const newState = callback({});
+
+    expect(mockLDClient.on).toHaveBeenCalledWith('change', expect.any(Function));
+    expect(newState).toEqual({ flags: { 'another-test-flag': false, 'test-flag': false } });
+  });
 });