Merge branch 'main' into dependabot/npm_and_yarn/rollup/plugin-typescript-12.1.1

Author: kinyoklion

.gitignore

@@ -3,6 +3,7 @@
 **/junit.xml
 npm-debug.log
 yarn-error.log
+pnpm-debug.log
 node_modules
 dist
 lib
@@ -12,5 +13,6 @@ test-types.js
 docs/build/
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .npmrc
 docs/

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "3.4.0"
+  ".": "3.5.0"
 }

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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/main/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).
 
+## [3.5.0](https://github.com/launchdarkly/react-client-sdk/compare/launchdarkly-react-client-sdk-v3.4.0...launchdarkly-react-client-sdk-v3.5.0) (2024-10-18)
+
+
+### Features
+
+* Add support for client-side prerequisite events. ([3cb6060](https://github.com/launchdarkly/react-client-sdk/commit/3cb606033d418a08144f88e0f632433951216c9c))
+* Add support for synchronous inspectors. ([3cb6060](https://github.com/launchdarkly/react-client-sdk/commit/3cb606033d418a08144f88e0f632433951216c9c))
+
 ## [3.4.0](https://github.com/launchdarkly/react-client-sdk/compare/launchdarkly-react-client-sdk-v3.3.2...launchdarkly-react-client-sdk-v3.4.0) (2024-08-02)
 
 

examples/deferred-initialization/src/App.tsx

@@ -3,7 +3,6 @@ import logo from './logo.svg';
 import Welcome from './welcome';
 import { LDProvider, LDContext } from 'launchdarkly-react-client-sdk';
 
-// tslint:disable-next-line:no-import-side-effect
 import './App.css';
 
 const clientSideID = process.env.REACT_APP_LD_CLIENT_SIDE_ID ?? '';

examples/deferred-initialization/src/index.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-// tslint:disable-next-line:no-submodule-imports
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-// tslint:disable-next-line:no-import-side-effect
 import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

examples/deferred-initialization/src/welcome.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useFlags } from 'launchdarkly-react-client-sdk';
 
-// tslint:disable-next-line:no-import-side-effect
 import './App.css';
 
 function Welcome() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "launchdarkly-react-client-sdk",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "LaunchDarkly SDK for React",
   "author": "LaunchDarkly <[email protected]>",
   "license": "Apache-2.0",
@@ -78,14 +78,14 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "ts-jest": "^29.2.2",
-    "tslint": "^6.1.3",
+    "tslib": "^2.8.1",
     "typedoc": "^0.26.5",
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.0.0"
   },
   "dependencies": {
     "hoist-non-react-statics": "^3.3.2",
-    "launchdarkly-js-client-sdk": "^3.3.0",
+    "launchdarkly-js-client-sdk": "^3.5.0",
     "lodash.camelcase": "^4.3.0"
   },
   "peerDependencies": {

src/asyncWithLDProvider.test.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import '@testing-library/dom';
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import { initialize, LDContext, LDFlagChangeset, LDOptions } from 'launchdarkly-js-client-sdk';
+import { initialize, LDClient, LDContext, LDFlagChangeset, LDOptions } from 'launchdarkly-js-client-sdk';
 import { AsyncProviderConfig, LDReactOptions } from './types';
-import { Consumer } from './context';
+import { Consumer, reactSdkContextFactory } from './context';
 import asyncWithLDProvider from './asyncWithLDProvider';
 import wrapperOptions from './wrapperOptions';
 import { fetchFlags } from './utils';
 
-
 jest.mock('launchdarkly-js-client-sdk', () => {
   const actual = jest.requireActual('launchdarkly-js-client-sdk');
 
@@ -351,4 +350,120 @@ describe('asyncWithLDProvider', () => {
 
     expect(receivedNode).toHaveTextContent('{"testFlag":false}');
   });
+
+  test('custom context is provided to consumer', async () => {
+    const CustomContext = reactSdkContextFactory();
+    const customLDClient = {
+      on: jest.fn((_: string, cb: () => void) => {
+        cb();
+      }),
+      off: jest.fn(),
+      allFlags: jest.fn().mockReturnValue({ 'context-test-flag': true }),
+      variation: jest.fn((_: string, v) => v),
+      waitForInitialization: jest.fn(),
+    };
+    const config: AsyncProviderConfig = {
+      clientSideID,
+      ldClient: customLDClient as unknown as LDClient,
+      reactOptions: {
+        reactContext: CustomContext,
+      },
+    };
+    const originalUtilsModule = jest.requireActual('./utils');
+    mockFetchFlags.mockImplementation(originalUtilsModule.fetchFlags);
+
+    const LDProvider = await asyncWithLDProvider(config);
+    const LaunchDarklyApp = (
+      <LDProvider>
+        <CustomContext.Consumer>
+          {({ flags }) => {
+            return (
+              <span>
+                flag is {flags.contextTestFlag === undefined ? 'undefined' : JSON.stringify(flags.contextTestFlag)}
+              </span>
+            );
+          }}
+        </CustomContext.Consumer>
+      </LDProvider>
+    );
+
+    const { findByText } = render(LaunchDarklyApp);
+    expect(await findByText('flag is true')).not.toBeNull();
+
+    const receivedNode = await renderWithConfig({ clientSideID });
+    expect(receivedNode).not.toHaveTextContent('{"contextTestFlag":true}');
+  });
+
+  test('multiple providers', async () => {
+    const customLDClient1 = {
+      on: jest.fn((_: string, cb: () => void) => {
+        cb();
+      }),
+      off: jest.fn(),
+      allFlags: jest.fn().mockReturnValue({ 'context1-test-flag': true }),
+      variation: jest.fn((_: string, v) => v),
+      waitForInitialization: jest.fn(),
+    };
+    const customLDClient2 = {
+      on: jest.fn((_: string, cb: () => void) => {
+        cb();
+      }),
+      off: jest.fn(),
+      allFlags: jest.fn().mockReturnValue({ 'context2-test-flag': true }),
+      variation: jest.fn((_: string, v) => v),
+      waitForInitialization: jest.fn(),
+    };
+    const originalUtilsModule = jest.requireActual('./utils');
+    mockFetchFlags.mockImplementation(originalUtilsModule.fetchFlags);
+
+    const CustomContext1 = reactSdkContextFactory();
+    const LDProvider1 = await asyncWithLDProvider({
+      clientSideID,
+      ldClient: customLDClient1 as unknown as LDClient,
+      reactOptions: {
+        reactContext: CustomContext1,
+      },
+    });
+    const CustomContext2 = reactSdkContextFactory();
+    const LDProvider2 = await asyncWithLDProvider({
+      clientSideID,
+      ldClient: customLDClient2 as unknown as LDClient,
+      reactOptions: {
+        reactContext: CustomContext2,
+      },
+    });
+    const safeValue = (val?: boolean) => (val === undefined ? 'undefined' : JSON.stringify(val));
+    const LaunchDarklyApp = (
+      <LDProvider1>
+        <LDProvider2>
+          <CustomContext1.Consumer>
+            {({ flags }) => {
+              return (
+                <>
+                  <span>consumer 1, flag 1 is {safeValue(flags.context1TestFlag)}</span>
+                  <span>consumer 1, flag 2 is {safeValue(flags.context2TestFlag)}</span>
+                </>
+              );
+            }}
+          </CustomContext1.Consumer>
+          <CustomContext2.Consumer>
+            {({ flags }) => {
+              return (
+                <>
+                  <span>consumer 2, flag 1 is {safeValue(flags.context1TestFlag)}</span>
+                  <span>consumer 2, flag 2 is {safeValue(flags.context2TestFlag)}</span>
+                </>
+              );
+            }}
+          </CustomContext2.Consumer>
+        </LDProvider2>
+      </LDProvider1>
+    );
+
+    const { findByText } = render(LaunchDarklyApp);
+    expect(await findByText('consumer 1, flag 1 is true')).not.toBeNull();
+    expect(await findByText('consumer 1, flag 2 is undefined')).not.toBeNull();
+    expect(await findByText('consumer 2, flag 1 is undefined')).not.toBeNull();
+    expect(await findByText('consumer 2, flag 2 is true')).not.toBeNull();
+  });
 });

src/asyncWithLDProvider.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, ReactNode } from 'react';
 import { initialize, LDFlagChangeset } from 'launchdarkly-js-client-sdk';
 import { AsyncProviderConfig, defaultReactOptions } from './types';
-import { Provider } from './context';
 import { fetchFlags, getContextOrUser, getFlattenedFlagsFromChangeset } from './utils';
 import getFlagsProxy from './getFlagsProxy';
 import wrapperOptions from './wrapperOptions';
@@ -104,7 +103,9 @@ export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
     // unproxiedFlags is for internal use only. Exclude it from context.
     const { unproxiedFlags: _, ...rest } = ldData;
 
-    return <Provider value={rest}>{children}</Provider>;
+    const { reactContext } = reactOptions;
+
+    return <reactContext.Provider value={rest}>{children}</reactContext.Provider>;
   };
 
   return LDProvider;

src/context.ts

@@ -1,41 +1,17 @@
 import { createContext } from 'react';
-import { LDClient, LDFlagSet } from 'launchdarkly-js-client-sdk';
-import { LDFlagKeyMap } from './types';
+import { ReactSdkContext } from './types';
 
 /**
- * The sdk context stored in the Provider state and passed to consumers.
+ * `reactSdkContextFactory` is a function useful for creating a React context for use with
+ * all the providers and consumers in this library.
+ *
+ * @return a React Context
  */
-interface ReactSdkContext {
-  /**
-   * JavaScript proxy that will trigger a LDClient#variation call on flag read in order
-   * to register a flag evaluation event in LaunchDarkly. Empty {} initially
-   * until flags are fetched from the LaunchDarkly servers.
-   */
-  flags: LDFlagSet;
-
-  /**
-   * Map of camelized flag keys to their original unmodified form. Empty if useCamelCaseFlagKeys option is false.
-   */
-  flagKeyMap: LDFlagKeyMap;
-
-  /**
-   * An instance of `LDClient` from the LaunchDarkly JS SDK (`launchdarkly-js-client-sdk`).
-   * This will be be undefined initially until initialization is complete.
-   *
-   * @see https://docs.launchdarkly.com/sdk/client-side/javascript
-   */
-  ldClient?: LDClient;
-
-  /**
-   * LaunchDarkly client initialization error, if there was one.
-   */
-  error?: Error;
-}
-
+const reactSdkContextFactory = () => createContext<ReactSdkContext>({ flags: {}, flagKeyMap: {}, ldClient: undefined });
 /**
  * @ignore
  */
-const context = createContext<ReactSdkContext>({ flags: {}, flagKeyMap: {}, ldClient: undefined });
+const context = reactSdkContextFactory();
 const {
   /**
    * @ignore
@@ -47,5 +23,5 @@ const {
   Consumer,
 } = context;
 
-export { Provider, Consumer, ReactSdkContext };
+export { Provider, Consumer, ReactSdkContext, reactSdkContextFactory };
 export default context;