|
1 |
| -# Flagsmith Provider |
| 1 | +# Flagsmith OpenFeature provider for client-side JavaScript |
2 | 2 |
|
3 |
| -This provider is an implementation for the [JavaScript SDK](https://docs.flagsmith.com/clients/javascript/) of [Flagsmith](https://flagsmith.com). |
| 3 | +[Flagsmith](https://flagsmith.com) is an open-source feature flagging and remote configuration service. This provider implements the [Flagsmith JavaScript SDK](https://flagsmith.com/docs/clients/javascript/) for client-side applications. |
4 | 4 |
|
5 | 5 | ## Installation
|
6 | 6 |
|
7 | 7 | ```
|
8 | 8 | npm install @openfeature/flagsmith-client-provider
|
9 | 9 | ```
|
10 | 10 |
|
11 |
| -## Initialising the provider |
| 11 | +## Initializing the provider |
12 | 12 |
|
13 |
| -The Flagsmith Provider can be created with the standard [initialization options](https://docs.flagsmith.com/clients/javascript/#example-initialising-the-sdk) and an optional Flagsmith instance to use. |
| 13 | +The Flagsmith OpenFeature provider can be created with the same [initialization options as the Flagsmith SDK](https://docs.flagsmith.com/clients/javascript/#initialisation-options). |
14 | 14 |
|
15 | 15 | ```javascript
|
16 | 16 | import { FlagsmithClientProvider } from '@openfeature/flagsmith-client-provider';
|
17 | 17 | import { OpenFeature } from '@openfeature/web-sdk';
|
18 | 18 |
|
19 | 19 | const flagsmithClientProvider = new FlagsmithClientProvider({
|
20 |
| - environmentID: '<ENVIRONMENT_ID>' |
| 20 | + environmentID: 'your_client_side_environment_key', |
| 21 | + cacheFlags: true, |
| 22 | + cacheOptions: { |
| 23 | + skipAPI: true |
| 24 | + } |
21 | 25 | });
|
22 |
| -OpenFeature.setProvider(flagsmithClientProvider); // Attach the provider to OpenFeature |
| 26 | +OpenFeature.setProvider(flagsmithClientProvider); |
23 | 27 | ```
|
24 | 28 |
|
25 |
| -## Usage with React Native, SSR or custom instances |
| 29 | +## Examples |
| 30 | + |
| 31 | +See our [examples repository](https://github.com/Flagsmith/flagsmith-js-examples/tree/main/open-feature) for usage with various frameworks. |
| 32 | + |
| 33 | +## Usage with React Native |
26 | 34 |
|
27 |
| -The Flagsmith Provider can be constructed with a custom Flagsmith instance and optional server-side generated state, [initialization options](https://docs.flagsmith.com/clients/javascript/#example-initialising-the-sdk). |
| 35 | +To use the React Native implementation of OpenFeature, install `react-native-flagsmith`: |
28 | 36 |
|
29 |
| -Note: In order to use the React Native implementation of OpenFeature you will need to install both Flagsmith and react-native-flagsmith. |
| 37 | +``` |
| 38 | +npm install flagsmith react-native-flagsmith |
| 39 | +``` |
| 40 | + |
| 41 | +Then, pass the `flagsmith` instance from `react-native-flagsmith` when initializing the provider: |
30 | 42 |
|
31 | 43 | ```javascript
|
32 |
| -import flagsmith from 'react-native-flagsmith' // Could also be flagsmith/isomorphic, flagsmith-es or createFlagsmithInstance() |
| 44 | +import flagsmith from 'react-native-flagsmith'; |
33 | 45 | import { FlagsmithClientProvider } from '@openfeature/flagsmith-client-provider';
|
34 | 46 | import { OpenFeature } from '@openfeature/web-sdk';
|
35 | 47 |
|
36 | 48 | const flagsmithClientProvider = new FlagsmithClientProvider({
|
37 |
| - environmentID: '<ENVIRONMENT_ID>', |
| 49 | + environmentID: 'your_client_side_environment_key', |
38 | 50 | flagsmithInstance: flagsmith,
|
39 |
| - state: serverState, |
40 | 51 | });
|
41 |
| -OpenFeature.setProvider(flagsmithClientProvider); // Attach the provider to OpenFeature |
| 52 | +OpenFeature.setProvider(flagsmithClientProvider); |
42 | 53 | ```
|
43 | 54 |
|
44 |
| -## Identifying and setting Traits |
| 55 | +See the [React Native example application](https://github.com/Flagsmith/flagsmith-js-examples/tree/main/open-feature/reactnative) for more details. |
| 56 | + |
| 57 | +## Flag targeting and dynamic evaluation |
45 | 58 |
|
46 |
| -In Flagsmith, users are [identified](https://docs.flagsmith.com/clients/javascript/#identifying-users) in order to allow for segmentation and percentage rollouts. |
| 59 | +In Flagsmith, users can be [identified](https://docs.flagsmith.com/clients/javascript/#identifying-users) to perform targeted flag rollouts. |
| 60 | +Traits are key-value pairs that can be used for [segment-based](https://docs.flagsmith.com/basic-features/segments) targeting. |
47 | 61 |
|
48 |
| -To identify and set traits you can specify a targetingKey(identity) and optionally a set of traits. This will do the equivalent of ``flagsmith.identify(id, traits)`` or pass these to ``flagsmith.init`` if you are calling this before ``OpenFeature.setProvider``. |
| 62 | +Flagsmith identifiers and traits make up the [OpenFeature evaluation context](https://openfeature.dev/specification/glossary/#evaluation-context). |
| 63 | +They correspond to OpenFeature [targeting keys](https://openfeature.dev/docs/reference/concepts/evaluation-context/#targeting-key) and context attributes respectively: |
49 | 64 |
|
50 | 65 | ```javascript
|
51 |
| -const flagsmithClientProvider = new FlagsmithClientProvider({ |
52 |
| - environmentID: '<ENVIRONMENT_ID>', |
53 |
| -}); |
54 | 66 | await OpenFeature.setContext({
|
55 | 67 | targetingKey: 'my-identity-id',
|
56 | 68 | traits: {
|
57 | 69 | myTraitKey: 'my-trait-value',
|
58 | 70 | },
|
59 | 71 | });
|
60 |
| -OpenFeature.setProvider(flagsmithClientProvider); // Attach the provider to OpenFeature |
61 | 72 | ```
|
62 | 73 |
|
63 |
| -To reset the identity you can simply reset the context. This will do the equivalent of ``flagsmith.logout()`` |
| 74 | +To reset the identity, set the context to an empty object: |
64 | 75 |
|
65 | 76 | ```javascript
|
66 |
| -await OpenFeature.setContext({ }); |
| 77 | +await OpenFeature.setContext({}); |
67 | 78 | ```
|
68 | 79 |
|
69 |
| -## Resolution reasoning |
| 80 | +## Resolution reasons |
70 | 81 |
|
71 |
| -In Flagsmith, features are evaluated based on the following [Resolution reasons](https://openfeature.dev/specification/types/#resolution-details): |
| 82 | +This provider supports the following [resolution reasons](https://openfeature.dev/specification/types/#resolution-reason): |
72 | 83 |
|
73 | 84 | ```typescript
|
74 |
| -StandardResolutionReasons.CACHED | StandardResolutionReasons.STATIC | StandardResolutionReasons.DEFAULT | StandardResolutionReasons.ERROR |
75 |
| -``` |
76 |
| - |
77 |
| -Note that resolutions of type SPLIT may be the result of targetted matching or percentage split however Flagsmith does not expose this information to client-side SDKs. |
| 85 | +import { StandardResolutionReasons } from '@openfeature/web-sdk'; |
78 | 86 |
|
| 87 | +type FlagsmithResolutionReasons = |
| 88 | + | typeof StandardResolutionReasons.STATIC |
| 89 | + | typeof StandardResolutionReasons.CACHED |
| 90 | + | typeof StandardResolutionReasons.DEFAULT |
| 91 | + | typeof StandardResolutionReasons.ERROR; |
| 92 | +``` |
79 | 93 |
|
80 | 94 | ## Events
|
81 | 95 |
|
82 |
| -The Flagsmith provider emits the |
83 |
| -following [OpenFeature events](https://openfeature.dev/specification/types#provider-events): |
| 96 | +This provider emits the following [events](https://openfeature.dev/specification/types#provider-events): |
84 | 97 |
|
85 |
| -- PROVIDER_READY |
86 |
| -- PROVIDER_ERROR |
87 |
| -- PROVIDER_CONFIGURATION_CHANGED |
| 98 | +```typescript |
| 99 | +import { ProviderEvents } from '@openfeature/web-sdk'; |
| 100 | + |
| 101 | +type FlagsmithProviderEvents = |
| 102 | + | typeof ProviderEvents.Ready |
| 103 | + | typeof ProviderEvents.Stale |
| 104 | + | typeof ProviderEvents.ConfigurationChanged |
| 105 | + | typeof ProviderEvents.Error; |
| 106 | +``` |
88 | 107 |
|
89 | 108 | ## Building
|
90 | 109 |
|
91 |
| -Run `nx package providers-flagsmith` to build the library. |
| 110 | +Run `nx package providers-flagsmith-client` to build the library. |
92 | 111 |
|
93 | 112 | ## Running unit tests
|
94 | 113 |
|
95 |
| -Run `nx test providers-flagsmith` to execute the unit tests via [Jest](https://jestjs.io). |
96 |
| - |
97 |
| -## Examples |
98 |
| - |
99 |
| -You can find examples using this provider in several frameworks [Here](https://github.com/Flagsmith/flagsmith-js-examples/tree/main/open-feature). |
| 114 | +Run `nx test providers-flagsmith-client` to execute the unit tests via [Jest](https://jestjs.io). |
0 commit comments