@planetpro/utilities v1.0.9

Planet Depos Utilities

Introduction

This repo contains a collection of commonly used utilities/functions/hooks.

Getting Started

Installation

npm install @planetpro/utilities

useFeature

Feature Flags allow developers to control the targeted roll-out of new features/changes. The useFeature hook offers a simple way of implementing these feature flags.

Harness Feature Flags

To start, we need to understand where feature flags are stored and how they're created.

We use Harness to manage feature flags. To familiarize yourself with Harness' feature flags, check out their Developer Hub.

Creating Feature Flags

To get started, navigate to the "Feature Flags" section in th Harness sidebar.

You'll be brought to a Feature Flag dashboard that shows all the available flags. Note, there is an Enviornment dropdown at the top right. This allows you to control flags for each environment.

To enable/disable a flag, simply toggle it.

To create a new flag, select the "New Feature Flag" button at the top left of the page.

Give your Feature Flag a name (an ID will be autogenerated based on the name, but you can provide a specific one).

You can then specify a "name" for each of the feature flag's states.

If you need the feature flag to ONLY be presented to a specific audience, you can create a "target". This allows you to then pass an arg of identifier in thew hook instantiation to ensure the targeted audience is presented with the desired experience.

Implementation

This utility exports both a data object and getFeature() method that return bool values for a given feature flag.

To get started, import the hook

import { useFeature } from '@planetpro/utilities'
...
const { data, getFeature } = useFeature({licenseKey:'abc123',identifier:'this-is-a-test'})

Identifier

This required argument allows you to more specifically control the presentation by "targeting" a specific Audience.

Example: If, in the prod enviroment, "targetA" is set to true but "targetB" i set to false, "targetA" will be returned a "truthy" value in the given feature flag while "targetB" will receive a "falsey" value, allowing for greater seperation/control over "who sees what".

Data

The data object returns all the available feature flags.

{
    test_feature: true,
    test_feature2: false,
    ...
}

getFeature() Method

getFeature allows the developer to pass in a "known" feature flag to return its specific state instead of performing additional filtering on the above data object.

Here's an example of how you could conditionally render a Vue element with the getFeature() method:

<template>
  <div>This section will always be shown</div>
  <div v-if="getFeature('test-feature')">
    This element will show ONLY when the "test-feature" feature flag is enabled.
  </div>
</template>

Reactivity

Because Feature Flags are intended to be quick/responsive, a feature flag's state can change during a user's session. As such, the enabling/disabling a feature flag will force a rerender if a user is currently on a page where the feature flag exists