@arcteryx/js-feature-flags
v0.4.0
Published
## Install it:
Downloads
49
Readme
Arc'teryx Feature Flags
Install it:
npm install @arcteryx/js-feature-flags
Overview
This package helps your application implement "Feature Flags" so you can enable/disable specific features or blocks of code. This allows developers to release code to master/production without impacting existing user experience.
By default Feature Flags are managed by Cookie values being "true"
. But you have the ability to customize this with setCustomLookupFunction
.
Note that to indicate that the feature is enabled, this library assumes that the value returned by the feature lookup function will be "true"
.
Usage:
In your application create a new file that will be used to export your application Feature Flags. Optionally export multiple "feature sets", if you want to group features for different pages in your application for example.
// lib/features.js (for example)
import FeatureFlags from "@arcteryx/js-feature-flags";
export const FeatureSet1 = FeatureFlags.define([
"myFeature1",
"myFeature2"
]);
export const FeatureSet2 = FeatureFlags.define([
"myFeature1",
"myFeature2"
]);
Elsewhere in your application, test if the feature is enabled:
import { FeatureSet1 } from "./lib/features";
if (FeatureSet1.myFeature1()) {
// Do the feature!
} else {
// Maybe do something else
}
The features you define directly correspond to a key
or multiple keys
. You can optionally map a different key
to the feature. By default the key
corresponds to a Cookie Key. When using multiple keys
can optionally set to require
to "all" which would require all of the keys
for that feature to be true. By default require
is "any".
// Map a different key in your definition
FeatureFlags.define([
"myFeature1",
{ name: "myFeature2", key: "usesCustomCookieKey" },
{ name: "myFeature3", key: ["enableFeature3", "enableAllFeatures"] },
{ name: "myFeature4", key: ["enableFeature4", "enableAll"], require: "all" }
]);
// enable myFeature1
document.cookie = "myFeature1=true";
// enable myFeature2
document.cookie = "usesCustomCookieKey=true";
// enable myFeature3
document.cookie = "enableFeature3=true";
or
document.cookie = "enableAllFeatures=true";
// enable myFeature4
document.cookie = "myFeature4=true;enableAll=true;";
Server applications
To access Cookies on the server, you must use setCustomLookupFunction
because the default implementation uses document.cookie
as the feature store and that is not available on the server. Most likely you'll continue to use Cookies to manage your store of features, but you may handle this however you wish. In a NextJS application, set this up in getServerSideProps
.
import { Cookies } from "cookies";
import { FeatureSet1 } from "./lib/features";
export async function getServerSideProps(ctx) {
const { req, res } = ctx;
// https://www.npmjs.com/package/cookies but you could use anything
const cookies = new Cookies(req, res);
FeatureSet1.setCustomLookupFunction(key => cookies.get(key));
if (FeatureSet1.myFeature1()) {
// Do the feature!
}
}