@kameleoon/react-sdk 2.1.0 → 3.0.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/CHANGELOG.md +11 -0
- package/README.md +230 -31
- package/dist/Feature.js +2 -2
- package/dist/Feature.js.map +1 -1
- package/dist/KameleoonError.d.ts +5 -0
- package/dist/KameleoonError.js +31 -0
- package/dist/KameleoonError.js.map +1 -0
- package/dist/compose.d.ts +1 -1
- package/dist/compose.js +27 -2
- package/dist/compose.js.map +1 -1
- package/dist/constants.d.ts +10 -0
- package/dist/constants.js +12 -1
- package/dist/constants.js.map +1 -1
- package/dist/getKameleoonException.d.ts +2 -0
- package/dist/getKameleoonException.js +34 -0
- package/dist/getKameleoonException.js.map +1 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +6 -1
- package/dist/index.js.map +1 -1
- package/dist/stories/Form.d.ts +12 -5
- package/dist/stories/Form.js +78 -17
- package/dist/stories/Form.js.map +1 -1
- package/dist/stories/FormHOC.js +1 -1
- package/dist/stories/FormHOC.js.map +1 -1
- package/dist/stories/FormHook.js +12 -6
- package/dist/stories/FormHook.js.map +1 -1
- package/dist/stories/constants.d.ts +1 -0
- package/dist/stories/constants.js +2 -1
- package/dist/stories/constants.js.map +1 -1
- package/dist/types.d.ts +14 -6
- package/dist/types.js.map +1 -1
- package/dist/useActivateFeature.d.ts +2 -0
- package/dist/useActivateFeature.js +11 -2
- package/dist/useActivateFeature.js.map +1 -1
- package/dist/useAddData.js +17 -1
- package/dist/useAddData.js.map +1 -1
- package/dist/useError.d.ts +7 -0
- package/dist/useError.js +34 -0
- package/dist/useError.js.map +1 -0
- package/dist/useErrors.d.ts +7 -0
- package/dist/useErrors.js +42 -0
- package/dist/useErrors.js.map +1 -0
- package/dist/useFeature.js +29 -8
- package/dist/useFeature.js.map +1 -1
- package/dist/useFeatureVariable.d.ts +2 -0
- package/dist/useFeatureVariable.js +11 -2
- package/dist/useFeatureVariable.js.map +1 -1
- package/dist/useRetrieveDataFromRemoteSource.d.ts +2 -2
- package/dist/useRetrieveDataFromRemoteSource.js +8 -5
- package/dist/useRetrieveDataFromRemoteSource.js.map +1 -1
- package/dist/useRunWhenReady.d.ts +14 -0
- package/dist/useRunWhenReady.js +23 -0
- package/dist/useRunWhenReady.js.map +1 -0
- package/dist/useTriggerExperiment.d.ts +2 -0
- package/dist/useTriggerExperiment.js +12 -2
- package/dist/useTriggerExperiment.js.map +1 -1
- package/dist/useVariationAssociatedData.d.ts +4 -2
- package/dist/useVariationAssociatedData.js +11 -2
- package/dist/useVariationAssociatedData.js.map +1 -1
- package/dist/withActivateFeature.d.ts +2 -0
- package/dist/withActivateFeature.js +3 -11
- package/dist/withActivateFeature.js.map +1 -1
- package/dist/withAddData.js +17 -1
- package/dist/withAddData.js.map +1 -1
- package/dist/withFeature.js +2 -2
- package/dist/withFeature.js.map +1 -1
- package/dist/withFeatureVariable.d.ts +2 -0
- package/dist/withFeatureVariable.js +2 -2
- package/dist/withFeatureVariable.js.map +1 -1
- package/dist/withRunWhenReady.d.ts +16 -0
- package/dist/withRunWhenReady.js +28 -0
- package/dist/withRunWhenReady.js.map +1 -0
- package/dist/withTriggerExperiment.d.ts +2 -0
- package/dist/withTriggerExperiment.js +3 -11
- package/dist/withTriggerExperiment.js.map +1 -1
- package/dist/withVariationAssociatedData.d.ts +4 -2
- package/dist/withVariationAssociatedData.js +3 -11
- package/dist/withVariationAssociatedData.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
5
5
|
|
|
6
6
|
[Project Homepage](https://developers.kameleoon.com/react-js-sdk.html)
|
|
7
7
|
|
|
8
|
+
# 3.0.0 (2022-07-01)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* error handling
|
|
14
|
+
|
|
15
|
+
### Breaking change
|
|
16
|
+
|
|
17
|
+
* `useFeature` hook and `withFeature` high-order component can no longer be used the same way
|
|
18
|
+
|
|
8
19
|
# 2.1.0 (2022-04-18)
|
|
9
20
|
|
|
10
21
|
|
package/README.md
CHANGED
|
@@ -137,26 +137,43 @@ Returns the status of a feature flag and its variables.
|
|
|
137
137
|
- `visitorCode: string` (optional) - unique identifier of the user.
|
|
138
138
|
|
|
139
139
|
#### Returns
|
|
140
|
-
- `
|
|
140
|
+
- `errors: KameleoonException[]` - an array of errors thrown as a result of getting variables or feature flag status.
|
|
141
|
+
- `feature` - an object containing feature flag status and variables
|
|
141
142
|
- `isActive: boolean` - feature flag status.
|
|
142
143
|
- `variables: FeatureVariableType[]` - feature flag variables.
|
|
143
144
|
|
|
145
|
+
#### Exceptions
|
|
146
|
+
- `KameleoonException.NotTargeted` - Exception indicating that the current visitor / user did not trigger the required targeting conditions for this feature. The targeting conditions are defined via Kameleoon's segment builder.
|
|
147
|
+
- `KameleoonException.FeatureConfigurationNotFound` - Exception indicating that the requested feature ID has not been found in the internal configuration of the SDK. This is usually normal and means that the feature flag has not yet been activated on Kameleoon's side (but code implementing the feature is already deployed on the web-application's side).
|
|
148
|
+
|
|
144
149
|
|
|
145
150
|
In this examples, if the feature flag with the `red-button` key is enabled, theme of button will set to red.
|
|
146
151
|
### `useFeature`
|
|
147
152
|
#### Example
|
|
148
153
|
```jsx
|
|
149
154
|
import { Button } from '@kameleoon/ui';
|
|
150
|
-
import { useFeature, useVisitorCode } from '@kameleoon/react-sdk';
|
|
155
|
+
import { useFeature, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
|
|
151
156
|
|
|
152
157
|
function MyComponent(): JSX.Element {
|
|
153
158
|
const { getVisitorCode } = useVisitorCode();
|
|
154
|
-
const {
|
|
159
|
+
const { feature, errors } = useFeature({
|
|
155
160
|
featureKey: 'red-button',
|
|
156
161
|
variableKeys: { production: 'red-button' },
|
|
157
162
|
visitorCode: getVisitorCode('example.com'),
|
|
158
163
|
});
|
|
159
164
|
|
|
165
|
+
for (const error of errors) {
|
|
166
|
+
if (error.type === KameleoonException.NotTargeted) {
|
|
167
|
+
// Handle error
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
if (error.type === KameleoonException.FeatureConfigurationNotFound) {
|
|
171
|
+
// Handle error
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
const { isActive, variables } = feature;
|
|
176
|
+
|
|
160
177
|
return <Button theme={isActive ? 'red' : 'green'} />;
|
|
161
178
|
}
|
|
162
179
|
```
|
|
@@ -165,12 +182,34 @@ function MyComponent(): JSX.Element {
|
|
|
165
182
|
#### Example
|
|
166
183
|
```jsx
|
|
167
184
|
import { Button } from '@kameleoon/ui';
|
|
168
|
-
import { withFeature } from '@kameleoon/react-sdk';
|
|
185
|
+
import { withFeature, KameleoonException } from '@kameleoon/react-sdk';
|
|
169
186
|
|
|
170
187
|
class MyComponent extends React.Component {
|
|
188
|
+
state = {
|
|
189
|
+
isActive: false,
|
|
190
|
+
variables: [],
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
componentDidMount() {
|
|
194
|
+
const { feature, errors } = this.props;
|
|
195
|
+
|
|
196
|
+
for (const error of errors) {
|
|
197
|
+
if (error.type === KameleoonException.NotTargeted) {
|
|
198
|
+
// Handle error
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
if (error.type === KameleoonException.FeatureConfigurationNotFound) {
|
|
202
|
+
// Handle error
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
const { isActive, variables } = feature;
|
|
207
|
+
|
|
208
|
+
this.setState({ isActive, variables });
|
|
209
|
+
}
|
|
210
|
+
|
|
171
211
|
render() {
|
|
172
|
-
|
|
173
|
-
return <Button theme={isActive ? 'red' : 'green'} />;
|
|
212
|
+
return <Button theme={this.isActive ? 'red' : 'green'} />;
|
|
174
213
|
}
|
|
175
214
|
}
|
|
176
215
|
|
|
@@ -189,7 +228,9 @@ export default withFeature({
|
|
|
189
228
|
- `visitorCode: string` - unique identifier of the user.
|
|
190
229
|
|
|
191
230
|
#### Returns
|
|
192
|
-
|
|
231
|
+
A wrapped component with the following props:
|
|
232
|
+
- `errors: KameleoonException[]` - an array of errors thrown as a result of getting variables or feature flag status.
|
|
233
|
+
- `feature` - an object containing feature flag status and variables
|
|
193
234
|
- `isActive: boolean` - feature flag status.
|
|
194
235
|
- `variables: FeatureVariableType[]` - feature flag variables.
|
|
195
236
|
|
|
@@ -199,18 +240,44 @@ import { Button } from '@kameleoon/ui';
|
|
|
199
240
|
import { Feature } from '@kameleoon/react-sdk';
|
|
200
241
|
|
|
201
242
|
class MyComponent extends React.Component {
|
|
243
|
+
state = {
|
|
244
|
+
isActive: false,
|
|
245
|
+
variables: [],
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
componentDidMount() {
|
|
249
|
+
const { feature, errors } = this.props;
|
|
250
|
+
|
|
251
|
+
for (const error of errors) {
|
|
252
|
+
if (error.type === KameleoonException.NotTargeted) {
|
|
253
|
+
// Handle error
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
if (error.type === KameleoonException.FeatureConfigurationNotFound) {
|
|
257
|
+
// Handle error
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
const { isActive, variables } = feature;
|
|
262
|
+
|
|
263
|
+
this.setState({ isActive, variables });
|
|
264
|
+
}
|
|
265
|
+
|
|
202
266
|
render() {
|
|
203
|
-
|
|
204
|
-
return <Button theme={isActive ? 'red' : 'green'} />;
|
|
267
|
+
return <Button theme={this.isActive ? 'red' : 'green'} />;
|
|
205
268
|
}
|
|
206
269
|
}
|
|
207
270
|
|
|
208
|
-
class
|
|
271
|
+
class MyComponentWrapper extends React.Component {
|
|
209
272
|
render() {
|
|
210
273
|
return(
|
|
211
|
-
<Feature
|
|
212
|
-
|
|
213
|
-
|
|
274
|
+
<Feature
|
|
275
|
+
featureKey="red-button"
|
|
276
|
+
variableKeys={{production: "red-button"}}
|
|
277
|
+
visitorCode="280295"
|
|
278
|
+
>
|
|
279
|
+
(({ feature, errors }) => (
|
|
280
|
+
<MyComponent feature={feature} errors={errors} />
|
|
214
281
|
))
|
|
215
282
|
</Feature>;
|
|
216
283
|
)
|
|
@@ -304,7 +371,7 @@ You have to make sure that proper error handling is set up in your code as shown
|
|
|
304
371
|
##### Please Note:
|
|
305
372
|
_By convention, the reference (original variation) always has an ID equal to **0**._
|
|
306
373
|
|
|
307
|
-
#### Exceptions
|
|
374
|
+
#### Exceptions
|
|
308
375
|
- `KameleoonException.NotTargeted` - Exception indicating that the current visitor / user did not trigger the required targeting conditions for this experiment. The targeting conditions are defined via Kameleoon's segment builder.
|
|
309
376
|
- `KameleoonException.NotActivated` - Exception indicating that the current visitor / user triggered the experiment (met the targeting conditions), but did not activate it. The most common reason for that is that part of the traffic has been excluded from the experiment and should not be tracked.
|
|
310
377
|
- `KameleoonException.ExperimentConfigurationNotFound` - Exception indicating that the requested experiment ID has not been found in the internal configuration of the SDK. This is usually normal and means that the experiment has not yet been started on Kameleoon's side (but code triggering / implementing variations is already deployed on the web-application's side).
|
|
@@ -320,20 +387,33 @@ _By convention, the reference (original variation) always has an ID equal to **0
|
|
|
320
387
|
### `useTriggerExperiment`
|
|
321
388
|
#### Returns
|
|
322
389
|
- A callback function `getVariationId()`.
|
|
390
|
+
- An `error` object containing `name`, `type` and `message` strings, certain type of exception can be handled using `error.type` and `KameleoonException`. If there is no errors on the client `error` will be `null`.
|
|
323
391
|
|
|
324
392
|
#### Example
|
|
325
393
|
```jsx
|
|
326
394
|
import { useEffect } from 'react';
|
|
327
|
-
import { useTriggerExperiment, useVisitorCode } from '@kameleoon/react-sdk';
|
|
395
|
+
import { useTriggerExperiment, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
|
|
328
396
|
|
|
329
397
|
function MyComponent(): JSX.Element {
|
|
330
|
-
const { getVariationId } = useTriggerExperiment();
|
|
398
|
+
const { getVariationId, error } = useTriggerExperiment();
|
|
331
399
|
const { getVisitorCode } = useVisitorCode();
|
|
332
400
|
|
|
333
401
|
useEffect(() => {
|
|
334
402
|
const visitorCode = getVisitorCode('example.com');
|
|
335
403
|
const experimentId = 12341;
|
|
336
404
|
|
|
405
|
+
if (error?.type === KameleoonException.ExperimentConfigurationNotFound) {
|
|
406
|
+
// Handle exception
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
if (error?.type === KameleoonException.NotTargeted) {
|
|
410
|
+
// Handle exception
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
if (error?.type === KameleoonException.NotActivated) {
|
|
414
|
+
// Handle exception
|
|
415
|
+
}
|
|
416
|
+
|
|
337
417
|
const variationId = getVariationId(visitorCode, experimentId);
|
|
338
418
|
}, []);
|
|
339
419
|
|
|
@@ -350,14 +430,26 @@ function MyComponent(): JSX.Element {
|
|
|
350
430
|
|
|
351
431
|
#### Example
|
|
352
432
|
```jsx
|
|
353
|
-
import { withVisitorCode, withTriggerExperiment, compose } from '@kameleoon/react-sdk';
|
|
433
|
+
import { withVisitorCode, withTriggerExperiment, compose, KameleoonException } from '@kameleoon/react-sdk';
|
|
354
434
|
|
|
355
435
|
class MyComponent extends React.Component {
|
|
356
436
|
componentDidMount() {
|
|
357
|
-
const { getVisitorCode, getVariationId } = this.props;
|
|
437
|
+
const { getVisitorCode, getVariationId, triggerExperimentError } = this.props;
|
|
358
438
|
const visitorCode = getVisitorCode('example.com');
|
|
359
439
|
const experimentId = 230243;
|
|
360
440
|
|
|
441
|
+
if (triggerExperimentError?.type === KameleoonException.ExperimentConfigurationNotFound) {
|
|
442
|
+
// Handle exception
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
if (triggerExperimentError?.type === KameleoonException.NotTargeted) {
|
|
446
|
+
// Handle exception
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
if (triggerExperimentError?.type === KameleoonException.NotActivated) {
|
|
450
|
+
// Handle exception
|
|
451
|
+
}
|
|
452
|
+
|
|
361
453
|
const variationId = getVariationId(visitorCode, experimentId);
|
|
362
454
|
}
|
|
363
455
|
|
|
@@ -370,9 +462,9 @@ export default compose(withVisitorCode, withTriggerExperiment)(MyComponent);
|
|
|
370
462
|
## Activate feature
|
|
371
463
|
A callback function `hasFeature()` which validates if user has been associated with this feature. If it is fails, callback returns value **false**, otherwise **true**.
|
|
372
464
|
|
|
373
|
-
If feature flag is not activated, `KameleoonException.FeatureConfigurationNotFound` exception will be thrown. Please, make sure to handle
|
|
465
|
+
If feature flag is not activated, `KameleoonException.FeatureConfigurationNotFound` exception will be thrown. Please, make sure to handle the error properly.
|
|
374
466
|
|
|
375
|
-
#### Exceptions
|
|
467
|
+
#### Exceptions
|
|
376
468
|
- `KameleoonException.NotTargeted` - Exception indicating that the current visitor / user did not trigger the required targeting conditions for this feature. The targeting conditions are defined via Kameleoon's segment builder.
|
|
377
469
|
- `KameleoonException.FeatureConfigurationNotFound` - Exception indicating that the requested feature ID has not been found in the internal configuration of the SDK. This is usually normal and means that the feature flag has not yet been activated on Kameleoon's side (but code implementing the feature is already deployed on the web-application's side).
|
|
378
470
|
|
|
@@ -387,20 +479,29 @@ If feature flag is not activated, `KameleoonException.FeatureConfigurationNotFou
|
|
|
387
479
|
### `useActivateFeature`
|
|
388
480
|
#### Returns
|
|
389
481
|
- A callback function `hasFeature()`.
|
|
482
|
+
- An `error` object containing `name`, `type` and `message` strings, certain type of exception can be handled using `error.type` and `KameleoonException`. If there is no errors on the client `error` will be `null`.
|
|
390
483
|
|
|
391
484
|
#### Example
|
|
392
485
|
```jsx
|
|
393
486
|
import { useEffect } from 'react';
|
|
394
|
-
import { useActivateFeature, useVisitorCode } from '@kameleoon/react-sdk';
|
|
487
|
+
import { useActivateFeature, useVisitorCode, KameleoonException } from '@kameleoon/react-sdk';
|
|
395
488
|
|
|
396
489
|
function MyComponent(): JSX.Element {
|
|
397
|
-
const { hasFeature } = useActivateFeature();
|
|
490
|
+
const { hasFeature, error } = useActivateFeature();
|
|
398
491
|
const { getVisitorCode } = useVisitorCode();
|
|
399
492
|
|
|
400
493
|
useEffect(() => {
|
|
401
494
|
const visitorCode = getVisitorCode('example.com');
|
|
402
495
|
const featureKey = 'example-feature-key';
|
|
403
496
|
|
|
497
|
+
if (error?.type === KameleoonException.FeatureConfigurationNotFound) {
|
|
498
|
+
// Handle exception
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
if (error?.type === KameleoonException.NotTargeted) {
|
|
502
|
+
// Handle exception
|
|
503
|
+
}
|
|
504
|
+
|
|
404
505
|
const feature = hasFeature(visitorCode, featureKey);
|
|
405
506
|
}, []);
|
|
406
507
|
|
|
@@ -410,21 +511,29 @@ function MyComponent(): JSX.Element {
|
|
|
410
511
|
|
|
411
512
|
### `withActivateFeature`
|
|
412
513
|
#### Arguments
|
|
413
|
-
- `Component: React.Component` - component which will be enhanced with the prop `hasFeature()`.
|
|
514
|
+
- `Component: React.Component` - component which will be enhanced with the prop `hasFeature()` and `activateFeatureError`.
|
|
414
515
|
|
|
415
516
|
#### Returns
|
|
416
517
|
- A wrapped component with additional props as described above.
|
|
417
518
|
|
|
418
519
|
#### Example
|
|
419
520
|
```jsx
|
|
420
|
-
import { withVisitorCode, withActivateFeature, compose } from '@kameleoon/react-sdk';
|
|
521
|
+
import { withVisitorCode, withActivateFeature, KameleoonException, compose } from '@kameleoon/react-sdk';
|
|
421
522
|
|
|
422
523
|
class MyComponent extends React.Component {
|
|
423
524
|
componentDidMount() {
|
|
424
|
-
const { getVisitorCode, hasFeature } = this.props;
|
|
525
|
+
const { getVisitorCode, hasFeature, activateFeatureError } = this.props;
|
|
425
526
|
const visitorCode = getVisitorCode('example.com');
|
|
426
527
|
const featureKey = 'example-feature-key';
|
|
427
528
|
|
|
529
|
+
if (activateFeatureError?.type === KameleoonException.FeatureConfigurationNotFound) {
|
|
530
|
+
// Handle exception
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
if (activateFeatureError?.type === KameleoonException.NotTargeted) {
|
|
534
|
+
// Handle exception
|
|
535
|
+
}
|
|
536
|
+
|
|
428
537
|
const feature = hasFeature(visitorCode, featureKey);
|
|
429
538
|
}
|
|
430
539
|
|
|
@@ -439,7 +548,7 @@ A callback function `getVariationAssociatedData()` which retrieves JSON data ass
|
|
|
439
548
|
|
|
440
549
|
This callback function takes the `variationId` as a parameter and will return the data as a JavaScript object. It will throw an exception `(KameleoonException.VariationConfigurationNotFound)` if the `variationId` is wrong or corresponds to an experiment that is not yet online.
|
|
441
550
|
|
|
442
|
-
#### Exceptions
|
|
551
|
+
#### Exceptions
|
|
443
552
|
- `KameleoonException.VariationConfigurationNotFound` - Exception indicating that the requested variation ID has not been found in the internal configuration of the SDK. This is usually normal and means that the variation's corresponding experiment has not yet been activated on Kameleoon's side.
|
|
444
553
|
|
|
445
554
|
#### `getVariationAssociatedData()`
|
|
@@ -453,17 +562,23 @@ This callback function takes the `variationId` as a parameter and will return th
|
|
|
453
562
|
### `useVariationAssociatedData`
|
|
454
563
|
#### Returns
|
|
455
564
|
- A callback function `getVariationAssociatedData()`.
|
|
565
|
+
- An `error` object containing `name`, `type` and `message` strings, certain type of exception can be handled using `error.type` and `KameleoonException`. If there is no errors on the client `error` will be `null`.
|
|
456
566
|
|
|
457
567
|
#### Example
|
|
458
568
|
```jsx
|
|
459
569
|
import { useEffect } from 'react';
|
|
460
|
-
import { useVariationAssociatedData } from '@kameleoon/react-sdk';
|
|
570
|
+
import { useVariationAssociatedData, KameleoonException } from '@kameleoon/react-sdk';
|
|
461
571
|
|
|
462
572
|
function MyComponent(): JSX.Element {
|
|
463
|
-
const { getVariationAssociatedData } = useVariationAssociatedData();
|
|
573
|
+
const { getVariationAssociatedData, error } = useVariationAssociatedData();
|
|
464
574
|
|
|
465
575
|
useEffect(() => {
|
|
466
576
|
const variationId = 280295;
|
|
577
|
+
|
|
578
|
+
if (error?.type === KameleoonException.VariationConfigurationNotFound) {
|
|
579
|
+
// Handle error
|
|
580
|
+
}
|
|
581
|
+
|
|
467
582
|
const data = getVariationAssociatedData(variationId);
|
|
468
583
|
}, []);
|
|
469
584
|
|
|
@@ -479,12 +594,17 @@ function MyComponent(): JSX.Element {
|
|
|
479
594
|
|
|
480
595
|
#### Example
|
|
481
596
|
```jsx
|
|
482
|
-
import { withVariationAssociatedData } from '@kameleoon/react-sdk';
|
|
597
|
+
import { withVariationAssociatedData, KameleoonException } from '@kameleoon/react-sdk';
|
|
483
598
|
|
|
484
599
|
class MyComponent extends React.Component {
|
|
485
600
|
componentDidMount() {
|
|
486
|
-
const { getVariationAssociatedData } = this.props;
|
|
601
|
+
const { getVariationAssociatedData, variationAssociatedDataError } = this.props;
|
|
487
602
|
const variationId = 280295;
|
|
603
|
+
|
|
604
|
+
if (variationAssociatedDataError?.type === KameleoonException.VariationConfigurationNotFound) {
|
|
605
|
+
// Handle error
|
|
606
|
+
}
|
|
607
|
+
|
|
488
608
|
const data = getVariationAssociatedData(variationId);
|
|
489
609
|
}
|
|
490
610
|
|
|
@@ -798,7 +918,6 @@ The `flush()` callback function is non-blocking as the server call is made async
|
|
|
798
918
|
#### Example
|
|
799
919
|
```jsx
|
|
800
920
|
import { useEffect } from 'react';
|
|
801
|
-
import { Button } from '@kameleoon/ui';
|
|
802
921
|
import {
|
|
803
922
|
useAddData,
|
|
804
923
|
useBrowser,
|
|
@@ -862,6 +981,86 @@ export default compose(
|
|
|
862
981
|
)(MyComponent);
|
|
863
982
|
```
|
|
864
983
|
|
|
984
|
+
## Run when ready
|
|
985
|
+
In certain scenarios when working with Kameleoon API it's important to make sure that the client was initialized properly within the certain timeout. It's especially important while using `triggerExperiment()` or `trackConversion()`. For these cases it's possible to use `runWhenReady()` function, retrieved by `useRunWhenReady` hook or `withRunWhenReady` high-order component.
|
|
986
|
+
|
|
987
|
+
The `runWhenReady()` function makes sure that Kameleoon Client will be initialized properly using HTTP call withing the specified timeout.
|
|
988
|
+
|
|
989
|
+
#### `runWhenReady()`
|
|
990
|
+
##### Arguments
|
|
991
|
+
- `successCallback: () => void` - callback which will be executed on successful client initialization.
|
|
992
|
+
- `errorCallback: () => void` - callback which will be executed if client wasn't able to initialize during the timeout.
|
|
993
|
+
- `timeout?: number` - timeout which is given to perform HTTP call for initialization in ms (by default: 2000 ms).
|
|
994
|
+
|
|
995
|
+
#### Example
|
|
996
|
+
```jsx
|
|
997
|
+
import { useEffect, useCallback, useState } from 'react';
|
|
998
|
+
import { useRunWhenReady, useTriggerExperiment } from '@kameleoon/react-sdk';
|
|
999
|
+
|
|
1000
|
+
function MyComponent(): JSX.Element {
|
|
1001
|
+
const { runWhenReady } = useRunWhenReady();
|
|
1002
|
+
const { getVariationId } = useTriggerExperiment();
|
|
1003
|
+
|
|
1004
|
+
const [variationId, setVariationId] = useState<number>(0);
|
|
1005
|
+
|
|
1006
|
+
const getVariationSuccessCallback = useCallback(() => {
|
|
1007
|
+
const id = getVariationId('user_id', 12345);
|
|
1008
|
+
setVariationId(id);
|
|
1009
|
+
}, [getVariationId, isRenderProps]);
|
|
1010
|
+
|
|
1011
|
+
const getVariationErrorCallback = useCallback(() => {
|
|
1012
|
+
throw new Error(
|
|
1013
|
+
"Couldn't get server configuration from HTTP request in a specified time",
|
|
1014
|
+
);
|
|
1015
|
+
}, []);
|
|
1016
|
+
|
|
1017
|
+
useEffect(() => {
|
|
1018
|
+
runWhenReady(
|
|
1019
|
+
getVariationSuccessCallback,
|
|
1020
|
+
getVariationErrorCallback,
|
|
1021
|
+
1000,
|
|
1022
|
+
);
|
|
1023
|
+
}, [runWhenReady, getVariationSuccessCallback, getVariationErrorCallback]);
|
|
1024
|
+
|
|
1025
|
+
...
|
|
1026
|
+
}
|
|
1027
|
+
```
|
|
1028
|
+
|
|
1029
|
+
### `withRunWhenReady`
|
|
1030
|
+
#### Arguments
|
|
1031
|
+
- `Component: React.Component` - component which will be enhanced with the prop `runWhenReady()`.
|
|
1032
|
+
|
|
1033
|
+
#### Example
|
|
1034
|
+
```jsx
|
|
1035
|
+
import { useEffect, useCallback, useState } from 'react';
|
|
1036
|
+
import { withRunWhenReady, withTriggerExperiment } from '@kameleoon/react-sdk';
|
|
1037
|
+
|
|
1038
|
+
class MyComponent extends React.Component {
|
|
1039
|
+
variationSuccessCallback(): void {
|
|
1040
|
+
const id = this.props.getVariationId('user_id', 12345);
|
|
1041
|
+
setVariationId(id);
|
|
1042
|
+
}
|
|
1043
|
+
|
|
1044
|
+
variationErrorCallback(): void {
|
|
1045
|
+
const id = this.props.getVariationId('user_id', 12345);
|
|
1046
|
+
setVariationId(id);
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
componentDidMount() {
|
|
1050
|
+
this.props.runWhenReady(this.variationSuccessCallback, this.variationErrorCallback, 1000);
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
...
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
export default compose(
|
|
1057
|
+
withRunWhenReady,
|
|
1058
|
+
withTriggerExperiment,
|
|
1059
|
+
)(MyComponent);
|
|
1060
|
+
```
|
|
1061
|
+
|
|
1062
|
+
#### Returns
|
|
1063
|
+
- A wrapped component with additional props as described above.
|
|
865
1064
|
|
|
866
1065
|
## Browser
|
|
867
1066
|
A callback function `addBrowser()` adds browser type.
|
package/dist/Feature.js
CHANGED
|
@@ -19,8 +19,8 @@ var useFeature_1 = require("./useFeature");
|
|
|
19
19
|
* to the status of a feature flag and its variables
|
|
20
20
|
*/
|
|
21
21
|
function Feature(props) {
|
|
22
|
-
var
|
|
23
|
-
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children(
|
|
22
|
+
var result = (0, useFeature_1.useFeature)(__assign({}, props));
|
|
23
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children(result) }, void 0);
|
|
24
24
|
}
|
|
25
25
|
exports.Feature = Feature;
|
|
26
26
|
//# sourceMappingURL=Feature.js.map
|
package/dist/Feature.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Feature.js","sourceRoot":"","sources":["../src/Feature.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,2CAA0C;AAM1C;;;GAGG;AACH,SAAgB,OAAO,CAAC,KAAoB;IAC1C,IAAM,
|
|
1
|
+
{"version":3,"file":"Feature.js","sourceRoot":"","sources":["../src/Feature.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AACA,2CAA0C;AAM1C;;;GAGG;AACH,SAAgB,OAAO,CAAC,KAAoB;IAC1C,IAAM,MAAM,GAAG,IAAA,uBAAU,eAAM,KAAK,EAAG,CAAC;IAExC,OAAO,2DAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAI,CAAC;AACvC,CAAC;AAJD,0BAIC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __extends = (this && this.__extends) || (function () {
|
|
3
|
+
var extendStatics = function (d, b) {
|
|
4
|
+
extendStatics = Object.setPrototypeOf ||
|
|
5
|
+
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
6
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
7
|
+
return extendStatics(d, b);
|
|
8
|
+
};
|
|
9
|
+
return function (d, b) {
|
|
10
|
+
if (typeof b !== "function" && b !== null)
|
|
11
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
12
|
+
extendStatics(d, b);
|
|
13
|
+
function __() { this.constructor = d; }
|
|
14
|
+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
15
|
+
};
|
|
16
|
+
})();
|
|
17
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
|
+
exports.KameleoonError = void 0;
|
|
19
|
+
var KameleoonError = /** @class */ (function (_super) {
|
|
20
|
+
__extends(KameleoonError, _super);
|
|
21
|
+
function KameleoonError(type) {
|
|
22
|
+
var _this = _super.call(this, "Error: ".concat(type)) || this;
|
|
23
|
+
_this.name = 'KameleoonError';
|
|
24
|
+
_this.message = "".concat(_this.name, ".").concat(type);
|
|
25
|
+
_this.type = type;
|
|
26
|
+
return _this;
|
|
27
|
+
}
|
|
28
|
+
return KameleoonError;
|
|
29
|
+
}(Error));
|
|
30
|
+
exports.KameleoonError = KameleoonError;
|
|
31
|
+
//# sourceMappingURL=KameleoonError.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KameleoonError.js","sourceRoot":"","sources":["../src/KameleoonError.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAEA;IAAoC,kCAAK;IAGvC,wBAAY,IAAwB;QAApC,YACE,kBAAM,iBAAU,IAAI,CAAE,CAAC,SAIxB;QAHC,KAAI,CAAC,IAAI,GAAG,gBAAgB,CAAC;QAC7B,KAAI,CAAC,OAAO,GAAG,UAAG,KAAI,CAAC,IAAI,cAAI,IAAI,CAAE,CAAC;QACtC,KAAI,CAAC,IAAI,GAAG,IAAI,CAAC;;IACnB,CAAC;IACH,qBAAC;AAAD,CAAC,AATD,CAAoC,KAAK,GASxC;AATY,wCAAc"}
|
package/dist/compose.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Composes single-argument high order components.
|
|
3
3
|
*
|
|
4
|
-
* @param
|
|
4
|
+
* @param funcs High order components to be composed.
|
|
5
5
|
* @returns A function obtained by composing the argument HOCs,
|
|
6
6
|
* which is used as single high order component wrapper.
|
|
7
7
|
*/
|
package/dist/compose.js
CHANGED
|
@@ -1,10 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
+
if (!m) return o;
|
|
5
|
+
var i = m.call(o), r, ar = [], e;
|
|
6
|
+
try {
|
|
7
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
+
}
|
|
9
|
+
catch (error) { e = { error: error }; }
|
|
10
|
+
finally {
|
|
11
|
+
try {
|
|
12
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
+
}
|
|
14
|
+
finally { if (e) throw e.error; }
|
|
15
|
+
}
|
|
16
|
+
return ar;
|
|
17
|
+
};
|
|
18
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
19
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
20
|
+
if (ar || !(i in from)) {
|
|
21
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
22
|
+
ar[i] = from[i];
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
26
|
+
};
|
|
2
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
28
|
/* eslint-disable @typescript-eslint/ban-types */
|
|
4
29
|
/**
|
|
5
30
|
* Composes single-argument high order components.
|
|
6
31
|
*
|
|
7
|
-
* @param
|
|
32
|
+
* @param funcs High order components to be composed.
|
|
8
33
|
* @returns A function obtained by composing the argument HOCs,
|
|
9
34
|
* which is used as single high order component wrapper.
|
|
10
35
|
*/
|
|
@@ -25,7 +50,7 @@ function compose() {
|
|
|
25
50
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
26
51
|
args[_i] = arguments[_i];
|
|
27
52
|
}
|
|
28
|
-
return a(b.apply(void 0, args));
|
|
53
|
+
return a(b.apply(void 0, __spreadArray([], __read(args), false)));
|
|
29
54
|
};
|
|
30
55
|
});
|
|
31
56
|
}
|
package/dist/compose.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAiD;AACjD;;;;;;GAMG;AACH,SAAwB,OAAO;IAAC,eAAoB;SAApB,UAAoB,EAApB,qBAAoB,EAApB,IAAoB;QAApB,0BAAoB;;IAClD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;KAClE;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC;KACjB;IAED,OAAO,KAAK,CAAC,MAAM,CACjB,UAAC,CAAC,EAAE,CAAC;QACH,OAAA;YAAC,cAAmB;iBAAnB,UAAmB,EAAnB,qBAAmB,EAAnB,IAAmB;gBAAnB,yBAAmB;;YAClB,OAAA,CAAC,CAAC,CAAC,wCAAI,IAAI,WAAE;QAAb,CAAa;IADf,CACe,CAClB,CAAC;AACJ,CAAC;AAdD,0BAcC"}
|
package/dist/constants.d.ts
CHANGED
|
@@ -12,3 +12,13 @@ export declare enum FeatureResultField {
|
|
|
12
12
|
IsActive = "isActive",
|
|
13
13
|
Variables = "variables"
|
|
14
14
|
}
|
|
15
|
+
export declare enum KameleoonException {
|
|
16
|
+
ExperimentConfigurationNotFound = "ExperimentConfigurationNotFound",
|
|
17
|
+
FeatureConfigurationNotFound = "FeatureConfigurationNotFound",
|
|
18
|
+
VariationConfigurationNotFound = "VariationConfigurationNotFound",
|
|
19
|
+
VariationConfigurationTimedOut = "VariationConfigurationTimedOut",
|
|
20
|
+
NotTargeted = "NotTargeted",
|
|
21
|
+
NotActivated = "NotActivated",
|
|
22
|
+
CredentialsNotFound = "CredentialsNotFound",
|
|
23
|
+
NoDataWasRetrievedFromRemoteServer = "NoDataWasRetrievedFromRemoteServer"
|
|
24
|
+
}
|
package/dist/constants.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FeatureResultField = exports.Browser = exports.PRODUCTION = exports.KAMELEOON_SDK_LOCAL_STORAGE_KEY = void 0;
|
|
3
|
+
exports.KameleoonException = exports.FeatureResultField = exports.Browser = exports.PRODUCTION = exports.KAMELEOON_SDK_LOCAL_STORAGE_KEY = void 0;
|
|
4
4
|
exports.KAMELEOON_SDK_LOCAL_STORAGE_KEY = 'kameleoonJavaScriptClientData';
|
|
5
5
|
exports.PRODUCTION = 'production';
|
|
6
6
|
var Browser;
|
|
@@ -17,4 +17,15 @@ var FeatureResultField;
|
|
|
17
17
|
FeatureResultField["IsActive"] = "isActive";
|
|
18
18
|
FeatureResultField["Variables"] = "variables";
|
|
19
19
|
})(FeatureResultField = exports.FeatureResultField || (exports.FeatureResultField = {}));
|
|
20
|
+
var KameleoonException;
|
|
21
|
+
(function (KameleoonException) {
|
|
22
|
+
KameleoonException["ExperimentConfigurationNotFound"] = "ExperimentConfigurationNotFound";
|
|
23
|
+
KameleoonException["FeatureConfigurationNotFound"] = "FeatureConfigurationNotFound";
|
|
24
|
+
KameleoonException["VariationConfigurationNotFound"] = "VariationConfigurationNotFound";
|
|
25
|
+
KameleoonException["VariationConfigurationTimedOut"] = "VariationConfigurationTimedOut";
|
|
26
|
+
KameleoonException["NotTargeted"] = "NotTargeted";
|
|
27
|
+
KameleoonException["NotActivated"] = "NotActivated";
|
|
28
|
+
KameleoonException["CredentialsNotFound"] = "CredentialsNotFound";
|
|
29
|
+
KameleoonException["NoDataWasRetrievedFromRemoteServer"] = "NoDataWasRetrievedFromRemoteServer";
|
|
30
|
+
})(KameleoonException = exports.KameleoonException || (exports.KameleoonException = {}));
|
|
20
31
|
//# sourceMappingURL=constants.js.map
|
package/dist/constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,+BAA+B,GAAG,+BAA+B,CAAC;AAClE,QAAA,UAAU,GAAG,YAAY,CAAC;AAEvC,IAAY,OAOX;AAPD,WAAY,OAAO;IACjB,4BAAiB,CAAA;IACjB,kDAAuC,CAAA;IACvC,8BAAmB,CAAA;IACnB,4BAAiB,CAAA;IACjB,0BAAe,CAAA;IACf,0BAAe,CAAA;AACjB,CAAC,EAPW,OAAO,GAAP,eAAO,KAAP,eAAO,QAOlB;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,2CAAqB,CAAA;IACrB,6CAAuB,CAAA;AACzB,CAAC,EAHW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAG7B"}
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAa,QAAA,+BAA+B,GAAG,+BAA+B,CAAC;AAClE,QAAA,UAAU,GAAG,YAAY,CAAC;AAEvC,IAAY,OAOX;AAPD,WAAY,OAAO;IACjB,4BAAiB,CAAA;IACjB,kDAAuC,CAAA;IACvC,8BAAmB,CAAA;IACnB,4BAAiB,CAAA;IACjB,0BAAe,CAAA;IACf,0BAAe,CAAA;AACjB,CAAC,EAPW,OAAO,GAAP,eAAO,KAAP,eAAO,QAOlB;AAED,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,2CAAqB,CAAA;IACrB,6CAAuB,CAAA;AACzB,CAAC,EAHW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAG7B;AAED,IAAY,kBASX;AATD,WAAY,kBAAkB;IAC5B,yFAAmE,CAAA;IACnE,mFAA6D,CAAA;IAC7D,uFAAiE,CAAA;IACjE,uFAAiE,CAAA;IACjE,iDAA2B,CAAA;IAC3B,mDAA6B,CAAA;IAC7B,iEAA2C,CAAA;IAC3C,+FAAyE,CAAA;AAC3E,CAAC,EATW,kBAAkB,GAAlB,0BAAkB,KAAlB,0BAAkB,QAS7B"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
3
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
4
|
+
if (!m) return o;
|
|
5
|
+
var i = m.call(o), r, ar = [], e;
|
|
6
|
+
try {
|
|
7
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
8
|
+
}
|
|
9
|
+
catch (error) { e = { error: error }; }
|
|
10
|
+
finally {
|
|
11
|
+
try {
|
|
12
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
13
|
+
}
|
|
14
|
+
finally { if (e) throw e.error; }
|
|
15
|
+
}
|
|
16
|
+
return ar;
|
|
17
|
+
};
|
|
18
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
|
+
exports.getKameleoonException = void 0;
|
|
20
|
+
var constants_1 = require("./constants");
|
|
21
|
+
var KameleoonError_1 = require("./KameleoonError");
|
|
22
|
+
function isKameleoonException(type) {
|
|
23
|
+
return Object.values(constants_1.KameleoonException).some(function (item) { return item === type; });
|
|
24
|
+
}
|
|
25
|
+
function getKameleoonException(error) {
|
|
26
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
|
|
27
|
+
var _a = __read(error.message.split('.'), 2), _ = _a[0], type = _a[1];
|
|
28
|
+
if (isKameleoonException(type)) {
|
|
29
|
+
return new KameleoonError_1.KameleoonError(type);
|
|
30
|
+
}
|
|
31
|
+
throw new Error("Error doesn't descend from KameleoonException");
|
|
32
|
+
}
|
|
33
|
+
exports.getKameleoonException = getKameleoonException;
|
|
34
|
+
//# sourceMappingURL=getKameleoonException.js.map
|