First commit. TODO: migrate enzyme to rtl.

Author: yusinto

package.json

@@ -44,8 +44,8 @@
     "@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": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-test-renderer": "^17.0.1",
     "@types/uuid": "^3.4.5",
     "enzyme": "^3.10.0",
@@ -55,9 +55,9 @@
     "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 +72,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"
   }
 }

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, FunctionComponent, PropsWithChildren, 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

@@ -80,7 +80,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 +101,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;

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) {