This Provider is designed to allow the use of OpenFeature with Split, the platform for controlled rollouts, serving features to your users via the Split feature flag to manage your complete customer experience.
Below is a simple example that describes the instantiation of the Split Provider. Please see the OpenFeature Documentation for details on how to use the OpenFeature SDK.
npm install @splitsoftware/openfeature-web-split-providernpm install @splitsoftware/splitio-browserjs
npm install @openfeature/web-sdkimport { OpenFeature } from '@openfeature/web-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 provider = new OpenFeatureSplitProvider(splitFactory);
// Register provider and wait for the default SDK client for 'TARGETING_KEY' to be ready
await OpenFeature.setProviderAndWait(provider);
const client = OpenFeature.getClient();After the initial setup you can use OpenFeature according to their documentation.
One important note is that the Split Provider requires a targeting key to be set. Often times this should be set when evaluating the value of a flag by setting an EvaluationContext which contains the targeting key. An example flag evaluation is
const context: EvaluationContext = {
targetingKey: 'TARGETING_KEY',
trafficType: 'account'
};
await OpenFeature.setContext(context)Use the get*Details(...) APIs to get the value and rich context (variant, reason, error code, metadata). This provider includes the Split treatment config as a raw JSON string under flagMetadata["config"]
const booleanTreatment = client.getBooleanDetails('boolFlag', false);
const config = booleanTreatment.flagMetadata.config;Evaluation attributes must be set in context before evaluation
const context: EvaluationContext = {
targetingKey: 'TARGETING_KEY',
trafficType: 'account',
// Evaluation attributes:
plan: 'premium',
coupon: 'WELCOME10'
};
await OpenFeature.setContext(context);
const booleanTreatment = client.getBooleanDetails('boolFlag', false);To use track(eventName, context, details) you must provide:
- A non-blank
eventName. - A context with:
targetingKey(non-blank).trafficType(string, e.g. "user" or "account", "user" by default).
Optional:
- details with:
value: numeric event value (defaults to 0).properties: map of attributes (prefer primitives: string/number/boolean/null).
Example:
const context = { targetingKey: 'user-123', trafficType: 'account' }
const details = { value: 19.99, properties: { plan: 'pro', coupon: 'WELCOME10' }}
await OpenFeature.setContext(context)
client.track('checkout.completed', details)npm i @openfeature/angular-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-providerimport { 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 {}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
})
)
]
};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<string>) => {
console.log('Feature flag result:', result.value);
});
}
}🔗 For more information on Angular integration, visit the official OpenFeature Angular SDK documentation.
npm i @openfeature/react-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-providerimport { 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 (
<OpenFeatureProvider>
<Page></Page>
</OpenFeatureProvider>
);
}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 (
<div className="App">
<header className="App-header">
{showNewMessage ? <p>Welcome to this OpenFeature-enabled React app!</p> : <p>Welcome to this React app.</p>}
</header>
</div>
)
}🔗 For more information on React integration, visit the official OpenFeature React SDK documentation.
The Split team monitors all issues submitted to this issue tracker. 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.
Please see Contributors Guide to find all you need to submit a Pull Request (PR).
Licensed under the Apache License, Version 2.0. See: Apache License.
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 [email protected], or get started with feature flags for free at https://www.split.io/signup.
Split has built and maintains SDKs for:
- .NET Github Docs
- Android Github Docs
- Angular Github Docs
- Elixir thin-client Github Docs
- Flutter Github Docs
- GO Github Docs
- iOS Github Docs
- Java Github Docs
- JavaScript Github Docs
- JavaScript for Browser Github Docs
- Node.js Github Docs
- PHP Github Docs
- PHP thin-client Github Docs
- Python Github Docs
- React Github Docs
- React Native Github Docs
- Redux Github Docs
- Ruby Github Docs
For a comprehensive list of open source projects visit our Github page.
Learn more about Split:
Visit split.io/product for an overview of Split, or visit our documentation at help.split.io for more detailed information.