Awesome

SVELTE FEATURE FLAGS

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

Install

to install this module run:

 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

{
 "feature-a" : true,
 "feature-b" : false
}

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:

<script>
  import { FlagsPanel } from 'svelte-feature-flag'
  import flags from '../../flags.json'
</script>
<style></style>

<FlagsPanel {flags} />

Feature Flag

There are two ways one can use the feature flags.

1: In the html using the FeatureFlag component.

<script>
import { FeatureFlag } from 'svelte-feature-flag';
import flags from '../../flags.json';

</script>

<style></style>

<FeatureFlag on="feature-a" {flags} >
  <FeatureA />
</FeatureFlag>

2: In the Javascript part using the FeatureFlagsHelper:

<script>
import {FeatureFlagsHelper } from 'svelte-feature-flag';
import flags from '../../flags.json';

function handleClick() {
  if(FeatureFlagsHelper(flags).isFlagEnabled("feature-b")) {
    alert("feature b enabled")
  } else {
    alert("feature b not enabled")
  }
}
</script>

<style></style>

<button on:click={handleClick}>
Click me
</button>