SVELTE FEATURE FLAGS

Feature flags ( also known as feature toggle) functionality for svelte based apps.

Install

to install this module run:

1 npm i svelte-feature-flag --save-dev

Usage

Create a json file at the root level of your project. In this file you will declare the features you want to switch on and off.

flags.json

1{
2 "feature-a" : true,
3 "feature-b" : false
4}

To be able to import json files in .svelte files you'll need @rollup/plugin-json

Flags Panel

Add the flags panel to a custom route in order to switch the features on and off

You'll need to pass the flags.json as a prop to FlagsPanel component.

Example:

1<script>
2  import { FlagsPanel } from 'svelte-feature-flag'
3  import flags from '../../flags.json'
4</script>
5<style></style>
6
7<FlagsPanel {flags} />

Feature Flag

There are two ways one can use the feature flags.

1: In the html using the FeatureFlag component.

1<script>
2import { FeatureFlag } from 'svelte-feature-flag';
3import flags from '../../flags.json';
4
5</script>
6
7<style></style>
8
9<FeatureFlag on="feature-a" {flags} >
10  <FeatureA />
11</FeatureFlag>

2: In the Javascript part using the FeatureFlagsHelper:

1<script>
2import {FeatureFlagsHelper } from 'svelte-feature-flag';
3import flags from '../../flags.json';
4
5function handleClick() {
6  if(FeatureFlagsHelper(flags).isFlagEnabled("feature-b")) {
7    alert("feature b enabled")
8  } else {
9    alert("feature b not enabled")
10  }
11}
12</script>
13
14<style></style>
15
16<button on:click={handleClick}>
17Click me
18</button>