@arcteryx/js-feature-flags v0.4.0

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!
  }
}