Merge pull request #54 from launchdarkly/yus/sc-148098/update-react-sdk-to-react-18

[sc-148098] Upgrade to react 18

Author: louis-launchdarkly

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 120
+  "printWidth": 120,
+  "arrowParens": "always"
 }

package.json

@@ -37,27 +37,24 @@
   },
   "homepage": "https://github.com/launchdarkly/react-client-sdk",
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/enzyme": "^3.10.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.3",
     "@types/lodash.camelcase": "^4.3.6",
     "@types/prop-types": "^15.7.4",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
-    "@types/react-test-renderer": "^17.0.1",
+    "@types/react": "^18.0.3",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-test-renderer": "^18.0.0",
     "@types/uuid": "^3.4.5",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "jest": "^27.4.4",
     "jest-environment-jsdom-global": "^3.0.0",
     "jest-junit": "^13.0.0",
     "prettier": "^1.18.2",
     "prop-types": "^15.7.2",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-test-renderer": "^18.0.0",
     "rimraf": "^3.0.0",
     "ts-jest": "^27.1.1",
     "tslint": "^6.1.3",
@@ -72,7 +69,7 @@
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
-    "react": "^16.6.3 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^16.6.3 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.4 || ^17.0.0 || ^18.0.0"
   }
 }

setupTests.js

@@ -1,5 +1 @@
-const enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
 require('@testing-library/jest-dom/extend-expect');
-
-enzyme.configure({ adapter: new Adapter() });

src/asyncWithLDProvider.test.tsx

@@ -30,7 +30,7 @@ const renderWithConfig = async (config: AsyncProviderConfig) => {
 
   const { getByText } = render(
     <LDProvider>
-      <Consumer>{value => <span>Received: {JSON.stringify(value.flags)}</span>}</Consumer>
+      <Consumer>{(value) => <span>Received: {JSON.stringify(value.flags)}</span>}</Consumer>
     </LDProvider>,
   );
 

src/asyncWithLDProvider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, FunctionComponent } from 'react';
+import React, { useState, useEffect, ReactNode } from 'react';
 import { LDFlagSet, LDFlagChangeset } from 'launchdarkly-js-client-sdk';
 import { AsyncProviderConfig, defaultReactOptions } from './types';
 import { Provider } from './context';
@@ -34,7 +34,7 @@ export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
   const reactOptions = { ...defaultReactOptions, ...userReactOptions };
   const { ldClient } = await initLDClient(clientSideID, user, reactOptions, options, targetFlags);
 
-  const LDProvider: FunctionComponent = ({ children }) => {
+  const LDProvider = ({ children }: { children: ReactNode }) => {
     const [ldData, setLDData] = useState({
       flags: fetchFlags(ldClient, reactOptions, targetFlags),
       ldClient,
@@ -45,14 +45,14 @@ export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
         const { bootstrap } = options;
         if (bootstrap && bootstrap !== 'localStorage') {
           const bootstrappedFlags = reactOptions.useCamelCaseFlagKeys ? camelCaseKeys(bootstrap) : bootstrap;
-          setLDData(prev => ({ ...prev, flags: bootstrappedFlags }));
+          setLDData((prev) => ({ ...prev, flags: bootstrappedFlags }));
         }
       }
 
       ldClient.on('change', (changes: LDFlagChangeset) => {
         const flattened: LDFlagSet = getFlattenedFlagsFromChangeset(changes, targetFlags, reactOptions);
         if (Object.keys(flattened).length > 0) {
-          setLDData(prev => ({ ...prev, flags: { ...prev.flags, ...flattened } }));
+          setLDData((prev) => ({ ...prev, flags: { ...prev.flags, ...flattened } }));
         }
       });
     }, []);

src/initLDClient.ts

@@ -25,7 +25,7 @@ const initLDClient = async (
   const allOptions = { wrapperName: 'react-client-sdk', wrapperVersion: version, ...options };
   const ldClient = ldClientInitialize(clientSideID, user, allOptions);
 
-  return new Promise<AllFlagsLDClient>(resolve => {
+  return new Promise<AllFlagsLDClient>((resolve) => {
     ldClient.on('ready', () => {
       const flags = fetchFlags(ldClient, reactOptions, targetFlags);
       resolve({ flags, ldClient });

src/provider.test.tsx

@@ -1,9 +1,8 @@
 jest.mock('./initLDClient', () => jest.fn());
 jest.mock('./context', () => ({ Provider: 'Provider' }));
 
-import * as React from 'react';
+import React, { Component } from 'react';
 import { create } from 'react-test-renderer';
-import { shallow } from 'enzyme';
 import { LDClient, LDFlagChangeset, LDFlagSet, LDOptions, LDUser } from 'launchdarkly-js-client-sdk';
 import initLDClient from './initLDClient';
 import { LDReactOptions, EnhancedComponent, defaultReactOptions, ProviderConfig } from './types';
@@ -80,7 +79,7 @@ describe('LDProvider', () => {
     const user1: LDUser = { key: 'yus', name: 'yus ng' };
     const user2: LDUser = { key: 'launch', name: 'darkly' };
     const options: LDOptions = { bootstrap: {} };
-    const ldClient: Promise<LDClient> = new Promise(async resolve => {
+    const ldClient: Promise<LDClient> = new Promise(async (resolve) => {
       resolve((await initLDClient(clientSideID, user1, defaultReactOptions, options, undefined)).ldClient);
 
       return;
@@ -101,7 +100,7 @@ describe('LDProvider', () => {
   test('ld client is created if passed in promise resolves as undefined', async () => {
     const user: LDUser = { key: 'yus', name: 'yus ng' };
     const options: LDOptions = { bootstrap: {} };
-    const ldClient: Promise<undefined> = new Promise(async resolve => {
+    const ldClient: Promise<undefined> = new Promise(async (resolve) => {
       resolve(undefined);
 
       return;
@@ -129,8 +128,8 @@ describe('LDProvider', () => {
         <App />
       </LDProvider>
     );
-    const component = shallow(LaunchDarklyApp, { disableLifecycleMethods: true });
-    const initialState = component.state() as HocState;
+    const component = create(LaunchDarklyApp).toTree()?.instance as Component;
+    const initialState = component.state as HocState;
 
     expect(initialState.flags).toEqual({});
   });
@@ -154,8 +153,8 @@ describe('LDProvider', () => {
         <App />
       </LDProvider>
     );
-    const component = shallow(LaunchDarklyApp, { disableLifecycleMethods: true });
-    const initialState = component.state() as HocState;
+    const component = create(LaunchDarklyApp).toTree()?.instance as Component;
+    const initialState = component.state as HocState;
 
     expect(mockInitLDClient).not.toHaveBeenCalled();
     expect(initialState.flags).toEqual({ testFlag: true, anotherTestFlag: false });
@@ -178,8 +177,8 @@ describe('LDProvider', () => {
         <App />
       </LDProvider>
     );
-    const component = shallow(LaunchDarklyApp, { disableLifecycleMethods: true });
-    const initialState = component.state() as HocState;
+    const component = create(LaunchDarklyApp).toTree()?.instance as Component;
+    const initialState = component.state as HocState;
 
     expect(mockInitLDClient).not.toHaveBeenCalled();
     expect(initialState.flags).toEqual({ 'test-flag': true, 'another-test-flag': false });
@@ -200,8 +199,8 @@ describe('LDProvider', () => {
         <App />
       </LDProvider>
     );
-    const component = shallow(LaunchDarklyApp, { disableLifecycleMethods: true });
-    const initialState = component.state() as HocState;
+    const component = create(LaunchDarklyApp).toTree()?.instance as Component;
+    const initialState = component.state as HocState;
 
     expect(mockInitLDClient).not.toHaveBeenCalled();
     expect(initialState.flags).toEqual({ testFlag: true, anotherTestFlag: false });
@@ -221,8 +220,8 @@ describe('LDProvider', () => {
         <App />
       </LDProvider>
     );
-    const component = shallow(LaunchDarklyApp, { disableLifecycleMethods: true });
-    const initialState = component.state() as HocState;
+    const component = create(LaunchDarklyApp).toTree()?.instance as Component;
+    const initialState = component.state as HocState;
 
     expect(mockInitLDClient).not.toHaveBeenCalled();
     expect(initialState.flags).toEqual({ testFlag: true, anotherTestFlag: false });
@@ -239,8 +238,8 @@ describe('LDProvider', () => {
         <App />
       </LDProvider>
     );
-    const component = shallow(LaunchDarklyApp, { disableLifecycleMethods: true });
-    const initialState = component.state() as HocState;
+    const component = create(LaunchDarklyApp).toTree()?.instance as Component;
+    const initialState = component.state as HocState;
 
     expect(mockInitLDClient).not.toHaveBeenCalled();
     expect(initialState.flags).toEqual({});

src/provider.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import { LDClient, LDFlagSet, LDFlagChangeset } from 'launchdarkly-js-client-sdk';
 import { EnhancedComponent, ProviderConfig, defaultReactOptions } from './types';
 import { Provider, LDContext as HocState } from './context';
@@ -22,7 +22,7 @@ import { camelCaseKeys, fetchFlags, getFlattenedFlagsFromChangeset } from './uti
  * within your application. This provider is used inside the `withLDProviderHOC` and can be used instead to initialize
  * the `launchdarkly-js-client-sdk`. For async initialization, check out the `asyncWithLDProvider` function
  */
-class LDProvider extends React.Component<ProviderConfig, HocState> implements EnhancedComponent {
+class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState> implements EnhancedComponent {
   readonly state: Readonly<HocState>;
 
   constructor(props: ProviderConfig) {