From 4ee3fe2a506685a348b3f978dfc4c3d6a2971483 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Mon, 27 Oct 2025 16:44:42 -0300 Subject: [PATCH 1/7] Update README.md --- README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c1a763a..7982bf4 100644 --- a/README.md +++ b/README.md @@ -27,11 +27,14 @@ import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-p const splitFactory = SplitFactory({ core: { - authorizationKey: 'your auth key' + authorizationKey: 'CLIENT_SIDE_SDK_KEY', + key: 'TARGETING_KEY' } }); const provider = new OpenFeatureSplitProvider(splitFactory); -OpenFeature.setProvider(provider); + +// Wait for the default SDK client for 'TARGETING_KEY' to be ready +await OpenFeature.setProviderAndWait(provider); ``` ## Use of OpenFeature with Split @@ -43,7 +46,7 @@ const context: EvaluationContext = { targetingKey: 'TARGETING_KEY', trafficType: 'account' }; -OpenFeature.setContext(context) +await OpenFeature.setContext(context) ``` ## Evaluate with details @@ -65,7 +68,7 @@ const context: EvaluationContext = { plan: 'premium', couppon: 'WELCOME10' }; -OpenFeature.setContext(context); +await OpenFeature.setContext(context); const booleanTreatment = client.getBooleanDetails('boolFlag', false); ``` @@ -89,7 +92,7 @@ Example: const context = { targetingKey: 'user-123', trafficType: 'account' } const details = { value: 19.99, properties: { plan: 'pro', coupon: 'WELCOME10' }} -client.setEvaluationContext(context) +await client.setContext(context) client.track('checkout.completed', details) ``` ## Submitting issues From 45e965311cf23239b9ce58910c16cd1c9dc4f1e5 Mon Sep 17 00:00:00 2001 From: Emiliano Sanchez Date: Wed, 29 Oct 2025 13:40:13 -0300 Subject: [PATCH 2/7] README: add OpenFeature client initialization and fix typo in context example --- README.md | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 7982bf4..6e09bcf 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,13 @@ const splitFactory = SplitFactory({ key: 'TARGETING_KEY' } }); + const provider = new OpenFeatureSplitProvider(splitFactory); -// Wait for the default SDK client for 'TARGETING_KEY' to be ready +// Register provider and wait for the default SDK client for 'TARGETING_KEY' to be ready await OpenFeature.setProviderAndWait(provider); + +const client = OpenFeature.getClient(); ``` ## Use of OpenFeature with Split @@ -65,8 +68,9 @@ Evaluation attributes must be set in context before evaluation const context: EvaluationContext = { targetingKey: 'TARGETING_KEY', trafficType: 'account', + // Evaluation attributes: plan: 'premium', - couppon: 'WELCOME10' + coupon: 'WELCOME10' }; await OpenFeature.setContext(context); const booleanTreatment = client.getBooleanDetails('boolFlag', false); @@ -96,7 +100,7 @@ await client.setContext(context) client.track('checkout.completed', details) ``` ## Submitting issues - + The Split team monitors all issues submitted to this [issue tracker](https://github.com/splitio/split-openfeature-provider-web-js/issues). We encourage you to use this issue tracker to submit any bug reports, feedback, and feature enhancements. We'll do our best to respond in a timely manner. ## Contributing @@ -106,13 +110,13 @@ Please see [Contributors Guide](CONTRIBUTORS-GUIDE.md) to find all you need to s Licensed under the Apache License, Version 2.0. See: [Apache License](http://www.apache.org/licenses/). ## About Split - + Split is the leading Feature Delivery Platform for engineering teams that want to confidently deploy features as fast as they can develop them. Split’s fine-grained management, real-time monitoring, and data-driven experimentation ensure that new features will improve the customer experience without breaking or degrading performance. Companies like Twilio, Salesforce, GoDaddy and WePay trust Split to power their feature delivery. - + To learn more about Split, contact hello@split.io, or get started with feature flags for free at https://www.split.io/signup. - + Split has built and maintains SDKs for: - + * .NET [Github](https://github.com/splitio/dotnet-client) [Docs](https://help.split.io/hc/en-us/articles/360020240172--NET-SDK) * Android [Github](https://github.com/splitio/android-client) [Docs](https://help.split.io/hc/en-us/articles/360020343291-Android-SDK) * Angular [Github](https://github.com/splitio/angular-sdk-plugin) [Docs](https://help.split.io/hc/en-us/articles/6495326064397-Angular-utilities) @@ -131,10 +135,9 @@ Split has built and maintains SDKs for: * React Native [Github](https://github.com/splitio/react-native-client) [Docs](https://help.split.io/hc/en-us/articles/4406066357901-React-Native-SDK) * Redux [Github](https://github.com/splitio/redux-client) [Docs](https://help.split.io/hc/en-us/articles/360038851551-Redux-SDK) * Ruby [Github](https://github.com/splitio/ruby-client) [Docs](https://help.split.io/hc/en-us/articles/360020673251-Ruby-SDK) - + For a comprehensive list of open source projects visit our [Github page](https://github.com/splitio?utf8=%E2%9C%93&query=%20only%3Apublic%20). - + **Learn more about Split:** - -Visit [split.io/product](https://www.split.io/product) for an overview of Split, or visit our documentation at [help.split.io](http://help.split.io) for more detailed information. +Visit [split.io/product](https://www.split.io/product) for an overview of Split, or visit our documentation at [help.split.io](http://help.split.io) for more detailed information. From f0bae1ab5b62fb5db64cd090d811e0be4a50c036 Mon Sep 17 00:00:00 2001 From: Emmanuel Zamora Date: Wed, 5 Nov 2025 14:06:22 -0300 Subject: [PATCH 3/7] Add angular and react snippets to readme --- README.md | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 127 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6e09bcf..8eb57d6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Split OpenFeature Provider for NodeJS +# Split OpenFeature Provider for web js [![Twitter Follow](https://img.shields.io/twitter/follow/splitsoftware.svg?style=social&label=Follow&maxAge=1529000)](https://twitter.com/intent/follow?screen_name=splitsoftware) ## Overview @@ -99,6 +99,132 @@ const details = { value: 19.99, properties: { plan: 'pro', coupon: 'WELCOME10' } await client.setContext(context) client.track('checkout.completed', details) ``` + +## Angular Usage + +### Traditional (NgModule) setup +```js +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { OpenFeatureModule } from '@openfeature/angular-sdk'; +import { SplitFactory } from '@splitsoftware/splitio-browserjs'; +import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider'; + +const splitFactory = SplitFactory({ + core: { + authorizationKey: 'CLIENT_SIDE_SDK_KEY', + key: 'TARGETING_KEY' + } +}); +const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory); + +@NgModule({ + imports: [ + RouterModule.forRoot(routes), + OpenFeatureModule.forRoot({ + provider: openFeatureProvider + }) + ], + bootstrap: [AppComponent] +}) +export class AppModule {} +``` + +### Standalone (Angular 16+) setup +```js +import { ApplicationConfig, provideBrowserGlobalErrorListeners, importProvidersFrom } from '@angular/core'; +import { OpenFeatureModule } from '@openfeature/angular-sdk'; +import { SplitFactory } from '@splitsoftware/splitio-browserjs'; +import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider'; + +const splitFactory = SplitFactory({ + core: { + authorizationKey: 'CLIENT_SIDE_SDK_KEY', + key: 'TARGETING_KEY' + } +}); +const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory); + +export const appConfig: ApplicationConfig = { + providers: [ + provideBrowserGlobalErrorListeners(), + importProvidersFrom( + OpenFeatureModule.forRoot({ + provider: openFeatureProvider + }) + ) + ] +}; +``` + +### Component injection and usage +```js +import { FeatureFlagService, EvaluationDetails } from '@openfeature/angular-sdk'; + +@Component({ + selector: 'app-root', + imports: [RouterOutlet], + templateUrl: './app.html', + styleUrl: './app.css' +}) +export class App { + constructor(private splitService: FeatureFlagService) {} + + ngOnInit() { + this.splitService.getStringDetails('featureFlagName', 'default').subscribe((result: EvaluationDetails) => { + console.log('Feature flag result:', result.value); + }); + } +} +``` +> 🔗 For more information on Angular integration, visit the [official OpenFeature Angular SDK documentation][angular-docs]. + +[angular-docs]: https://openfeature.dev/docs/reference/sdks/client/web/angular + +## React usage +```js +import { OpenFeature } from '@openfeature/react-sdk'; +import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider'; +import { DebugLogger, SplitFactory } from '@splitsoftware/splitio-browserjs'; + +const splitFactory = SplitFactory({ + core: { + authorizationKey: 'CLIENT_SIDE_SDK_KEY', + key: 'TARGETING_KEY' + } +}) +const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory); + +OpenFeature.setProvider(openFeatureProvider); + +function App() { + return ( + + + + ); +} +``` +### Evaluation hooks +```js +import { useFlag } from '@openfeature/react-sdk'; + +function Page() { + // Use the "query-style" flag evaluation hook, specifying a flag-key and a default value. + const { value: showNewMessage } = useFlag('new-message', true); + return ( +
+
+ {showNewMessage ?

Welcome to this OpenFeature-enabled React app!

:

Welcome to this React app.

} +
+
+ ) +} +``` +> 🔗 For more information on React integration, visit the [official OpenFeature React SDK documentation][react-docs]. + +[react-docs]: https://openfeature.dev/docs/reference/sdks/client/web/react + ## Submitting issues The Split team monitors all issues submitted to this [issue tracker](https://github.com/splitio/split-openfeature-provider-web-js/issues). We encourage you to use this issue tracker to submit any bug reports, feedback, and feature enhancements. We'll do our best to respond in a timely manner. From 2553c232ad5651b44899ef7673e6814291dc96dd Mon Sep 17 00:00:00 2001 From: Emmanuel Zamora Date: Wed, 5 Nov 2025 14:12:49 -0300 Subject: [PATCH 4/7] fix snippet --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8eb57d6..cd46349 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,7 @@ Example: const context = { targetingKey: 'user-123', trafficType: 'account' } const details = { value: 19.99, properties: { plan: 'pro', coupon: 'WELCOME10' }} -await client.setContext(context) +await OpenFeature.setContext(context) client.track('checkout.completed', details) ``` From bf09cbc51899b80909608c7d4f834f0aac389e0e Mon Sep 17 00:00:00 2001 From: ZamoraEmmanuel <87494075+ZamoraEmmanuel@users.noreply.github.com> Date: Wed, 5 Nov 2025 14:23:40 -0300 Subject: [PATCH 5/7] Update README.md Co-authored-by: Emiliano Sanchez --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cd46349..14ef651 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Split OpenFeature Provider for web js +# Split OpenFeature Provider for Web JavaScript [![Twitter Follow](https://img.shields.io/twitter/follow/splitsoftware.svg?style=social&label=Follow&maxAge=1529000)](https://twitter.com/intent/follow?screen_name=splitsoftware) ## Overview From 1a92882995afe5ae19a86867f806cc73ddd0894b Mon Sep 17 00:00:00 2001 From: Emmanuel Zamora Date: Wed, 5 Nov 2025 14:42:12 -0300 Subject: [PATCH 6/7] Add instal dependencies section --- README.md | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 14ef651..0589719 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,14 @@ client.track('checkout.completed', details) ## Angular Usage -### Traditional (NgModule) setup +### Install dependencies +```bash +npm i @openfeature/angular-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-provider +``` + +### Initialize the React SDK + +#### Traditional (NgModule) setup ```js import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; @@ -130,7 +137,7 @@ const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory); export class AppModule {} ``` -### Standalone (Angular 16+) setup +#### Standalone (Angular 16+) setup ```js import { ApplicationConfig, provideBrowserGlobalErrorListeners, importProvidersFrom } from '@angular/core'; import { OpenFeatureModule } from '@openfeature/angular-sdk'; @@ -157,7 +164,7 @@ export const appConfig: ApplicationConfig = { }; ``` -### Component injection and usage +#### Component injection and usage ```js import { FeatureFlagService, EvaluationDetails } from '@openfeature/angular-sdk'; @@ -182,6 +189,13 @@ export class App { [angular-docs]: https://openfeature.dev/docs/reference/sdks/client/web/angular ## React usage + +### Install dependencies +```bash +npm i @openfeature/react-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-provider +``` + +### Initialize the React SDK ```js import { OpenFeature } from '@openfeature/react-sdk'; import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider'; @@ -205,7 +219,8 @@ function App() { ); } ``` -### Evaluation hooks + +#### Evaluation hooks ```js import { useFlag } from '@openfeature/react-sdk'; From ec5bfd97bfa27f2a82880c42e491a7cf9e8e4910 Mon Sep 17 00:00:00 2001 From: Emmanuel Zamora Date: Wed, 5 Nov 2025 15:58:45 -0300 Subject: [PATCH 7/7] Fix Angular title --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0589719..20b23a7 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,7 @@ client.track('checkout.completed', details) npm i @openfeature/angular-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-provider ``` -### Initialize the React SDK +### Initialize the Angular SDK #### Traditional (NgModule) setup ```js