Feature flags ( also known as feature toggle) functionality for svelte based apps.
to install this module run:
npm i svelte-feature-flag --save-dev
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.
{
"feature-a" : true,
"feature-b" : false
}
To be able to import json files in .svelte files you'll need @rollup/plugin-json
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} />
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>