@launchdarkly/react-sdk 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -3,10 +3,16 @@ export * from '@launchdarkly/js-client-sdk';
3
3
  import React$1 from 'react';
4
4
 
5
5
  /**
6
- * Initialization state of the client. This type should be consistent with
7
- * the `status` field of the `LDWaitForInitializationResult` type.
6
+ * Represents the current initialization state of the LaunchDarkly client.
8
7
  */
9
- type InitializedState = LDWaitForInitializationResult['status'] | 'initializing' | 'unknown';
8
+ type InitializationStatus = LDWaitForInitializationResult | {
9
+ status: 'initializing';
10
+ };
11
+ /**
12
+ * Initialization state of the client as a string union.
13
+ * Derived from {@link InitializationStatus} for consistency.
14
+ */
15
+ type InitializedState = InitializationStatus['status'];
10
16
  /**
11
17
  * The LaunchDarkly client interface for React.
12
18
  */
@@ -40,6 +46,14 @@ interface LDReactClient extends LDClient {
40
46
  * @returns An unsubscribe function. Call it to stop receiving notifications.
41
47
  */
42
48
  onInitializationStatusChange(callback: (result: LDWaitForInitializationResult) => void): () => void;
49
+ /**
50
+ * Returns whether the client is ready to evaluate flags. This is true when the client
51
+ * has completed initialization (successfully or with failure), or when bootstrap data
52
+ * was provided.
53
+ *
54
+ * @returns {boolean} Whether the client can evaluate flags.
55
+ */
56
+ isReady(): boolean;
43
57
  }
44
58
  /**
45
59
  * The React context interface for the LaunchDarkly client.
@@ -123,13 +137,11 @@ interface LDReactProviderOptions {
123
137
  */
124
138
  deferInitialization?: boolean;
125
139
  /**
126
- * This option allow developers to provide their own named react context for
127
- * the launchdarkly client. This is useful for cases where you want to have multiple
140
+ * This option allows developers to provide their own named react context for
141
+ * the LaunchDarkly client. This is useful for cases where you want to have multiple
128
142
  * clients in the same application. If not provided, the default context will be used.
129
143
  *
130
- * @see {@link LDReactClientContext} for the possible values and their meaning
131
- *
132
- * @returns {LDReactClientContext} The react context for the LaunchDarkly client.
144
+ * @see {@link LDReactClientContext}
133
145
  */
134
146
  reactContext?: LDReactClientContext;
135
147
  /**
@@ -146,9 +158,32 @@ interface LDReactProviderOptions {
146
158
  bootstrap?: unknown;
147
159
  }
148
160
 
161
+ /**
162
+ * Creates a new LaunchDarkly React context.
163
+ *
164
+ * @remarks
165
+ * This function can be used to create different LaunchDarkly contexts for the same
166
+ * application.
167
+ *
168
+ * **NOTE:** This function is not necessary if you are only using a single LaunchDarkly environment.
169
+ * If that is the case, you can use the {@link LDReactContext} directly.
170
+ *
171
+ * @returns A new React context for the LaunchDarkly client.
172
+ */
149
173
  declare function initLDReactContext(): LDReactClientContext;
150
174
  /**
151
- * The LaunchDarkly React context.
175
+ * The default LaunchDarkly React context.
176
+ *
177
+ * @example
178
+ * ```tsx
179
+ * import { LDReactContext, useLDClient } from '@launchdarkly/react-sdk';
180
+ *
181
+ * function MyComponent() {
182
+ * const client = useLDClient(LDReactContext);
183
+ * const flagValue = client.boolVariation('my-flag', false);
184
+ * return <div>{flagValue ? 'on' : 'off'}</div>;
185
+ * }
186
+ * ```
152
187
  */
153
188
  declare const LDReactContext: LDReactClientContext;
154
189
 
@@ -156,7 +191,7 @@ declare const LDReactContext: LDReactClientContext;
156
191
  * Creates a new LaunchDarkly React provider wrapping an existing client instance.
157
192
  *
158
193
  * @remarks
159
- * **NOTE:** We recommend using the convenience factory function {@link createLDReactProvider}
194
+ * **NOTE:** We recommend using the factory function {@link createLDReactProvider}
160
195
  * instead of this function if you can.
161
196
  *
162
197
  * This factory function is provided to allow the caller to use an existing client
@@ -216,6 +251,54 @@ declare function createLDReactProvider(clientSideID: string, context: LDContext,
216
251
  children: React$1.ReactNode;
217
252
  }>;
218
253
 
254
+ /**
255
+ * Props for {@link LDIsomorphicClientProvider}.
256
+ */
257
+ interface LDIsomorphicClientProviderProps {
258
+ /**
259
+ * The LaunchDarkly client-side ID.
260
+ */
261
+ clientSideId: string;
262
+ /**
263
+ * The initial context to identify with.
264
+ */
265
+ context: LDContext;
266
+ /**
267
+ * Bootstrap data from the server. Pass the result of `flagsState.toJSON()` obtained
268
+ * from {@link LDServerSession.allFlagsState} on the server.
269
+ *
270
+ * @remarks
271
+ * **NOTE:** This interface is meant to be used with the server component {@link LDIsomorphicProvider}.
272
+ * If you are looking to providing your own bootstrap data, you should use
273
+ * the {@link createLDReactProvider} function directly.
274
+ *
275
+ */
276
+ bootstrap: unknown;
277
+ /**
278
+ * Additional options forwarded to {@link createLDReactProvider}.
279
+ *
280
+ * @remarks
281
+ * The omitted fields are hoisted to top level options because they are not
282
+ * serializable across the RSC boundary.
283
+ */
284
+ options?: Omit<LDReactProviderOptions, 'bootstrap' | 'reactContext'>;
285
+ /**
286
+ * Optional custom React context for the LaunchDarkly client. Use this when you need
287
+ * multiple LaunchDarkly client instances in the same application.
288
+ */
289
+ reactContext?: React$1.Context<LDReactClientContextValue>;
290
+ children: React$1.ReactNode;
291
+ }
292
+ /**
293
+ * A `'use client'` provider that initializes the LaunchDarkly browser client from
294
+ * server-evaluated flag values bootstrapped by {@link LDIsomorphicProvider}.
295
+ *
296
+ * @remarks
297
+ * **NOTE:** This provider is designed to be used in conjunction with {@link LDIsomorphicProvider}
298
+ * in a server component to compute the bootstrap data and render this provider automatically.
299
+ */
300
+ declare function LDIsomorphicClientProvider({ clientSideId, context, bootstrap, options, reactContext, children, }: LDIsomorphicClientProviderProps): React$1.JSX.Element;
301
+
219
302
  /**
220
303
  * Creates a new instance of the LaunchDarkly client for React.
221
304
  *
@@ -232,7 +315,7 @@ declare function createLDReactProvider(clientSideID: string, context: LDContext,
232
315
  *
233
316
  * @example
234
317
  * ```tsx
235
- * import { createClient } from '@launchdarkly/react';
318
+ * import { createClient } from '@launchdarkly/react-sdk';
236
319
  * const client = createClient(clientSideID, context, options);
237
320
  *
238
321
  * await client.start();
@@ -259,21 +342,6 @@ declare function createClient(clientSideID: string, context: LDContext, options?
259
342
  */
260
343
  declare function useFlags<T extends LDFlagSet = LDFlagSet>(reactContext?: React.Context<LDReactClientContextValue>): T;
261
344
 
262
- /**
263
- * Represents the current initialization state of the LaunchDarkly client.
264
- */
265
- type InitializationStatus = {
266
- status: 'unknown';
267
- } | {
268
- status: 'initializing';
269
- } | {
270
- status: 'complete';
271
- } | {
272
- status: 'timeout';
273
- } | {
274
- status: 'failed';
275
- error: Error;
276
- };
277
345
  /**
278
346
  * Returns the initialization status of the LaunchDarkly client.
279
347
  *
@@ -364,4 +432,4 @@ declare function useNumberVariationDetail(key: string, defaultValue: number, rea
364
432
  */
365
433
  declare function useJsonVariationDetail<T = unknown>(key: string, defaultValue: T, reactContext?: React.Context<LDReactClientContextValue>): LDEvaluationDetailTyped<T>;
366
434
 
367
- export { type InitializationStatus, type InitializedState, type LDReactClient, type LDReactClientContext, type LDReactClientContextValue, type LDReactClientOptions, LDReactContext, type LDReactProviderOptions, createClient, createLDReactProvider, createLDReactProviderWithClient, initLDReactContext, useBoolVariation, useBoolVariationDetail, useFlags, useInitializationStatus, useJsonVariation, useJsonVariationDetail, useLDClient, useNumberVariation, useNumberVariationDetail, useStringVariation, useStringVariationDetail };
435
+ export { type InitializationStatus, type InitializedState, LDIsomorphicClientProvider, type LDIsomorphicClientProviderProps, type LDReactClient, type LDReactClientContext, type LDReactClientContextValue, type LDReactClientOptions, LDReactContext, type LDReactProviderOptions, createClient, createLDReactProvider, createLDReactProviderWithClient, initLDReactContext, useBoolVariation, useBoolVariationDetail, useFlags, useInitializationStatus, useJsonVariation, useJsonVariationDetail, useLDClient, useNumberVariation, useNumberVariationDetail, useStringVariation, useStringVariationDetail };
package/dist/index.d.ts CHANGED
@@ -3,10 +3,16 @@ export * from '@launchdarkly/js-client-sdk';
3
3
  import React$1 from 'react';
4
4
 
5
5
  /**
6
- * Initialization state of the client. This type should be consistent with
7
- * the `status` field of the `LDWaitForInitializationResult` type.
6
+ * Represents the current initialization state of the LaunchDarkly client.
8
7
  */
9
- type InitializedState = LDWaitForInitializationResult['status'] | 'initializing' | 'unknown';
8
+ type InitializationStatus = LDWaitForInitializationResult | {
9
+ status: 'initializing';
10
+ };
11
+ /**
12
+ * Initialization state of the client as a string union.
13
+ * Derived from {@link InitializationStatus} for consistency.
14
+ */
15
+ type InitializedState = InitializationStatus['status'];
10
16
  /**
11
17
  * The LaunchDarkly client interface for React.
12
18
  */
@@ -40,6 +46,14 @@ interface LDReactClient extends LDClient {
40
46
  * @returns An unsubscribe function. Call it to stop receiving notifications.
41
47
  */
42
48
  onInitializationStatusChange(callback: (result: LDWaitForInitializationResult) => void): () => void;
49
+ /**
50
+ * Returns whether the client is ready to evaluate flags. This is true when the client
51
+ * has completed initialization (successfully or with failure), or when bootstrap data
52
+ * was provided.
53
+ *
54
+ * @returns {boolean} Whether the client can evaluate flags.
55
+ */
56
+ isReady(): boolean;
43
57
  }
44
58
  /**
45
59
  * The React context interface for the LaunchDarkly client.
@@ -123,13 +137,11 @@ interface LDReactProviderOptions {
123
137
  */
124
138
  deferInitialization?: boolean;
125
139
  /**
126
- * This option allow developers to provide their own named react context for
127
- * the launchdarkly client. This is useful for cases where you want to have multiple
140
+ * This option allows developers to provide their own named react context for
141
+ * the LaunchDarkly client. This is useful for cases where you want to have multiple
128
142
  * clients in the same application. If not provided, the default context will be used.
129
143
  *
130
- * @see {@link LDReactClientContext} for the possible values and their meaning
131
- *
132
- * @returns {LDReactClientContext} The react context for the LaunchDarkly client.
144
+ * @see {@link LDReactClientContext}
133
145
  */
134
146
  reactContext?: LDReactClientContext;
135
147
  /**
@@ -146,9 +158,32 @@ interface LDReactProviderOptions {
146
158
  bootstrap?: unknown;
147
159
  }
148
160
 
161
+ /**
162
+ * Creates a new LaunchDarkly React context.
163
+ *
164
+ * @remarks
165
+ * This function can be used to create different LaunchDarkly contexts for the same
166
+ * application.
167
+ *
168
+ * **NOTE:** This function is not necessary if you are only using a single LaunchDarkly environment.
169
+ * If that is the case, you can use the {@link LDReactContext} directly.
170
+ *
171
+ * @returns A new React context for the LaunchDarkly client.
172
+ */
149
173
  declare function initLDReactContext(): LDReactClientContext;
150
174
  /**
151
- * The LaunchDarkly React context.
175
+ * The default LaunchDarkly React context.
176
+ *
177
+ * @example
178
+ * ```tsx
179
+ * import { LDReactContext, useLDClient } from '@launchdarkly/react-sdk';
180
+ *
181
+ * function MyComponent() {
182
+ * const client = useLDClient(LDReactContext);
183
+ * const flagValue = client.boolVariation('my-flag', false);
184
+ * return <div>{flagValue ? 'on' : 'off'}</div>;
185
+ * }
186
+ * ```
152
187
  */
153
188
  declare const LDReactContext: LDReactClientContext;
154
189
 
@@ -156,7 +191,7 @@ declare const LDReactContext: LDReactClientContext;
156
191
  * Creates a new LaunchDarkly React provider wrapping an existing client instance.
157
192
  *
158
193
  * @remarks
159
- * **NOTE:** We recommend using the convenience factory function {@link createLDReactProvider}
194
+ * **NOTE:** We recommend using the factory function {@link createLDReactProvider}
160
195
  * instead of this function if you can.
161
196
  *
162
197
  * This factory function is provided to allow the caller to use an existing client
@@ -216,6 +251,54 @@ declare function createLDReactProvider(clientSideID: string, context: LDContext,
216
251
  children: React$1.ReactNode;
217
252
  }>;
218
253
 
254
+ /**
255
+ * Props for {@link LDIsomorphicClientProvider}.
256
+ */
257
+ interface LDIsomorphicClientProviderProps {
258
+ /**
259
+ * The LaunchDarkly client-side ID.
260
+ */
261
+ clientSideId: string;
262
+ /**
263
+ * The initial context to identify with.
264
+ */
265
+ context: LDContext;
266
+ /**
267
+ * Bootstrap data from the server. Pass the result of `flagsState.toJSON()` obtained
268
+ * from {@link LDServerSession.allFlagsState} on the server.
269
+ *
270
+ * @remarks
271
+ * **NOTE:** This interface is meant to be used with the server component {@link LDIsomorphicProvider}.
272
+ * If you are looking to providing your own bootstrap data, you should use
273
+ * the {@link createLDReactProvider} function directly.
274
+ *
275
+ */
276
+ bootstrap: unknown;
277
+ /**
278
+ * Additional options forwarded to {@link createLDReactProvider}.
279
+ *
280
+ * @remarks
281
+ * The omitted fields are hoisted to top level options because they are not
282
+ * serializable across the RSC boundary.
283
+ */
284
+ options?: Omit<LDReactProviderOptions, 'bootstrap' | 'reactContext'>;
285
+ /**
286
+ * Optional custom React context for the LaunchDarkly client. Use this when you need
287
+ * multiple LaunchDarkly client instances in the same application.
288
+ */
289
+ reactContext?: React$1.Context<LDReactClientContextValue>;
290
+ children: React$1.ReactNode;
291
+ }
292
+ /**
293
+ * A `'use client'` provider that initializes the LaunchDarkly browser client from
294
+ * server-evaluated flag values bootstrapped by {@link LDIsomorphicProvider}.
295
+ *
296
+ * @remarks
297
+ * **NOTE:** This provider is designed to be used in conjunction with {@link LDIsomorphicProvider}
298
+ * in a server component to compute the bootstrap data and render this provider automatically.
299
+ */
300
+ declare function LDIsomorphicClientProvider({ clientSideId, context, bootstrap, options, reactContext, children, }: LDIsomorphicClientProviderProps): React$1.JSX.Element;
301
+
219
302
  /**
220
303
  * Creates a new instance of the LaunchDarkly client for React.
221
304
  *
@@ -232,7 +315,7 @@ declare function createLDReactProvider(clientSideID: string, context: LDContext,
232
315
  *
233
316
  * @example
234
317
  * ```tsx
235
- * import { createClient } from '@launchdarkly/react';
318
+ * import { createClient } from '@launchdarkly/react-sdk';
236
319
  * const client = createClient(clientSideID, context, options);
237
320
  *
238
321
  * await client.start();
@@ -259,21 +342,6 @@ declare function createClient(clientSideID: string, context: LDContext, options?
259
342
  */
260
343
  declare function useFlags<T extends LDFlagSet = LDFlagSet>(reactContext?: React.Context<LDReactClientContextValue>): T;
261
344
 
262
- /**
263
- * Represents the current initialization state of the LaunchDarkly client.
264
- */
265
- type InitializationStatus = {
266
- status: 'unknown';
267
- } | {
268
- status: 'initializing';
269
- } | {
270
- status: 'complete';
271
- } | {
272
- status: 'timeout';
273
- } | {
274
- status: 'failed';
275
- error: Error;
276
- };
277
345
  /**
278
346
  * Returns the initialization status of the LaunchDarkly client.
279
347
  *
@@ -364,4 +432,4 @@ declare function useNumberVariationDetail(key: string, defaultValue: number, rea
364
432
  */
365
433
  declare function useJsonVariationDetail<T = unknown>(key: string, defaultValue: T, reactContext?: React.Context<LDReactClientContextValue>): LDEvaluationDetailTyped<T>;
366
434
 
367
- export { type InitializationStatus, type InitializedState, type LDReactClient, type LDReactClientContext, type LDReactClientContextValue, type LDReactClientOptions, LDReactContext, type LDReactProviderOptions, createClient, createLDReactProvider, createLDReactProviderWithClient, initLDReactContext, useBoolVariation, useBoolVariationDetail, useFlags, useInitializationStatus, useJsonVariation, useJsonVariationDetail, useLDClient, useNumberVariation, useNumberVariationDetail, useStringVariation, useStringVariationDetail };
435
+ export { type InitializationStatus, type InitializedState, LDIsomorphicClientProvider, type LDIsomorphicClientProviderProps, type LDReactClient, type LDReactClientContext, type LDReactClientContextValue, type LDReactClientOptions, LDReactContext, type LDReactProviderOptions, createClient, createLDReactProvider, createLDReactProviderWithClient, initLDReactContext, useBoolVariation, useBoolVariationDetail, useFlags, useInitializationStatus, useJsonVariation, useJsonVariationDetail, useLDClient, useNumberVariation, useNumberVariationDetail, useStringVariation, useStringVariationDetail };