FlagFrog

A simple library for managing feature flags in your applications.

Installation

# install
npm install flagfrog

CLI

The CLI provides the following commands:

• list
  • Displays where Flag is used
• remove
  • Remove Flag from files

List Command

Displays where Flag is used

# input (Display the list of flags under src)
npx flagfrog list './src/**/*.{ts,tsx}'

# output
FlagName
├──/path/to/file1
├──/path/to/file2
└──/path/to/file3

Remove Command

Remove Flag from files.

# input (Remove Flag from files under src)
npx flagfrog remove './src/**/*.{ts,tsx}'

Remove the flag from the implementation as shown below. Please execute this when branching by flag is no longer necessary.

// before
import { flagHandler } from "flagfrog";

FlagHandler({
  name: "FlagName",
  value: true,
  on: () => {
    console.log("ON");
  },
  off: () => {
    console.log("OFF");
  },
});

// after
console.log("ON");

API

FlagFrog provides a simple API for feature flag;

• flagHandler
• flagSwithcher
• FlagReader

flagHandler

Branch processing depending on whether the flag is ON or OFF.

Argument	Type	Description
name	string	Flag naming, used in the CLI
value	boolean	Whether flag is on or off
on	() => T	Dispatches when the value is ON
off	() => U	Dispatches when the value is OFF

The following is a sample code.

import { flagHandler } from "flagfrog";

flagHandler({
  name: "FlagName",
  value: true,
  on: () => {
    // Dispatches when the flag is ON
    console.log("ON");
  },
  off: () => {
    // Dispatches when the flag is OFF
    console.log("OFF");
  },
});

When you run the remove command, it will be converted to the following:

console.log("ON");

flagSwitcher

Branch the value returned depending on whether the flag is ON or OFF.

Argument	Type	Description
name	string	Flag naming, used in the CLI
value	boolean	Whether flag is on or off
on	T	Return when the value is ON
off	U	Return when the value is OFF

The following is a sample code.

import { flagSwitcher } from "flagfrog";

const result = flagSwitcher({
  name: "FlagName",
  value: true,
  on: "ON Text!!"
  off: "OFF Text!!"
});

When you run the remove command, it will be converted to the following:

const result = "ON Text!!";

FlagRenderer

Branch the component to be displayed depending on the ON/OFF of the flag

Props	Type	Description
name	string	Flag naming, used in the CLI
value	boolean	Whether flag is on or off
on	ReactNode	Render when the value is ON
off	ReactNode	Render when the value is OFF

The following is a sample code.

import { flagHandler } from "flagfrog";

const Component = () => {
  return (
    <FlagRenderer
      name="FlagName"
      value={true}
      on={<p>ON Text!!</p>}
      off={<p>OFF Text!!</p>}
    />
  );
};

When you run the remove command, it will be converted to the following:

const Component = () => {
  return <p>ON Text!!</p>;
};