Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bassdman/vue-feature-toggle
https://github.com/bassdman/vue-feature-toggle
feature-flags feature-toggle vue vue-feature-toggle
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bassdman/vue-feature-toggle
- Owner: bassdman
- License: mit
- Created: 2017-06-04T13:43:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-16T04:22:23.000Z (over 1 year ago)
- Last Synced: 2024-12-17T10:17:07.946Z (17 days ago)
- Topics: feature-flags, feature-toggle, vue, vue-feature-toggle
- Language: JavaScript
- Size: 110 KB
- Stars: 57
- Watchers: 2
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-feature-toggle
> Enables advanced feature-toggle with vue
[](https://www.npmjs.com/package/vue-feature-toggle)
[](https://www.npmjs.com/package/vue-feature-toggle)
[](https://www.npmjs.com/package/vue-feature-toggle)
## Info
Vue-Feature-Toggle implements the [feature-toggle-api](https://www.npmjs.com/package/feature-toggle-api) v 3.4.1".
Only a subset of features is listed here. For the others, watch the documentation of the api.
This package is COMPATIBLE WITH VUE3!!!!!
## Install
``` shell
npm install vue-feature-toggle --save
```
## The Problem
Imagine you have an onlineshop with an testmode and in multiple languages.
Your shop is written in vue. Anywhere you have a vue-template like this:
``` html
```
It's generally a bad idea to have visibility rules in the template. Of course, by refactoring the template a little bit the code will look better.
But that's not the point. The problem is: The view-logic is spread in .html and .js files and if the viewlogic changes, you have to change at least them. And all visibility rules are spread over the whole system.
That's not good.
## The solution
Feature-toggle. All View-Logic is placed in one place. This can be a config file, a webservice or a tool with a User Interface.a
When you want to change a visibility rule, for example "Show feature XYZ also in the french shop", you just have to update the config or add this info in an UI. And no developer is needed for it.
Read the article from Martin Fowler about feature toggle for a more understanding.
## The Usage
Look in the example folder for working examples.
### Initialisation
Create a vue project. For example with the vue-cli.
``` shell
npm install -g vue-cli
vue create vue-feature-toggle-example
cd vue-feature-toggle-example
npm install
```
Now install the vue-feature-toggle component.
``` shell
npm install vue-feature-toggle --save
```
Replace the App.vue - file with the following:
``` html
We test vue-feature-toggle in vue2
This is "Feature1"
This is "Feature2"
This is "Feature2" with variant "new"
This "Feature2" with variant "old"
This "Feature2" with variant "grumpfel"
This "Feature3" with variant "old" has some Data.
This "Feature3" with variant "old" has some Data. (watch the : before the data-attribute. Otherwise you'll get this as a string...)
import { FeatureToggleComponent as feature } from 'vue-feature-toggle';
//All Feature2-Features will always be shown
feature.visibility('feature2',true);
feature.visibility('feature2','new',false);
//Feature.showLogs();
export default {
name: 'app',
components: {
feature
}
}
```
#### Other initialisations
In a cjs-project
```javascript
const { FeatureToggleComponent : feature} = require('vue-feature-toggle/dist/vue-feature-toggle.umd.js')
// do sth with the FeatureToggleComponent
```
In the browser
```html
var feature = window.FeatureToggleComponent;
//do sth with the FeatureToggleComponent
```
See more the projects in the [example-folder](https://github.com/bassdman/vue-feature-toggle/tree/master/examples).
### Features
[Only a subset of features is listed here. See the documentation of the feature-toggle-api for more features](https://www.npmjs.com/package/feature-toggle-api)
For the next examples we will always use the HTML from above. Just insert the visibility rules under the other rule
#### Basic visibility
```javascript
// shows Feature1
//Feature2 is not configured, so it will be hidden
feature.visibility('feature1',true);
//You can also write it like this
feature.visibility('feature1',function (rule) {
//here would be some more complex logic, in this example we keep it simple
return true;
});
```
```javascript
/*
shows all features with name feature2, in this case:
*/
feature.visibility('feature2', function (rule) {
return true;
});
/*
This overwrites the rule above for "feature2", variant "new"
-> shown
-> hidden
-> shown
-> shown
*/
feature.visibility('feature2','new', function (rule) {
return false;
});
```
```javascript
/*
You can pass data via the data-attribute. Corresp. HTML-Tag:
*/
feature.visibility('feature3','new', function (rule) {
return rule.data == "grumpfel";
});
//Write a : before the data-tag to parse the content in the data-attribute Otherwise the data is returned as a string.
feature.visibility('feature3','new', function (rule) {
return rule.data.text == "grumpfel";
});
```
#### Default Visibility
Bored of writing the same visibility rule again and again? Use defaultVisibility. This is the default-rule and will be overwritten by feature.visibility() - rules.
``` javascript
feature.defaultVisibility(function(rule){
return true;
});
feature.visibility('feature2', 'new', function(rule){
return false;
});
/*
"Feature2", variant "new" is overwritten, all other features have the defaultVisibility
-> shown
-> hidden
-> shown
-> shown
*/
```
#### Required Visibility
This rule is allways executed, before the other rules. When it returns false, the other rules are ignored.
``` javascript
/*
Imagine a config that is loaded via ajax. When the name is in the config, it returns true.
And this config looks like this:
var globalConfig = { "feature2" : true }
*/
feature.requiredVisibility(function(rule){
//In this case it returns true, when name == 'feature2'
return globalConfig[rule.name] === true;
});
/*
feature2, variant "new" returns false, but requiredConfig returns true. Both rules must match, so it will be hidden
*/
feature.visibility('feature2','new',function(rule){
return false;
});
/*
feature3 returns true, but requiredConfig returns false. Both rules must match, so Feature3 is hidden
*/
feature.visibility('feature3',function(rule){
return true;
});
/*
-> shown
-> hidden
-> shown
-> shown
-> hidden
-> hidden
*/
```
#### Container Tag
Normally a feature has a div-element as root-element.
```html
an amazing feature
will be rendered to (if visible):
an amazing feature
```
But unfortunately sometimes div-elements are already styled by legacy-css-classes.
To prevent this, you can define the root-element.
```html
an amazing feature
will be rendered to (if visible):
an amazing feature
```
#### ShowLogs
Imagine this following html-snippet:
```html
This feature should be shown
```
All developers of the world agree with you, debugging sth lik this is horrible. But don't worry, we have a perfect solution for it. And it's just one line of code.
```javascript
feature.showLogs(); //or feature.showLogs(true);
```
This returns a log like the following:
```html
Check Visibility of Feature "anAmazingFeature".
The requiredVisibility rule returns false. This feature will be hidden.
Check Visibility of Feature "anotherAmazingFeature", variant "new" with data {"id":"bla"}.
The requiredVisibility rule returns true. This feature will be shown when no other rule rejects it.
No visibility rule found matching name and variant.
No rules found for name anotherAmazingFeature without variants.
No default rule found.
Only the requiredVisibility rule was found. This returned true. => This feature will be visible.
```
With this you don't have to waste your time with debugging the visibility state.
#### Log
Log a custom message, when showLogs() == true.
```javascript
feature.log("Here's my custom message");
```
#### Noscript
You work in a company and your customers have disabled javascript? Well, that makes life harder but we can still use it. We can provide at least a basic functionality with pure css.
Just look at the modified index.html file.
``` html
vue-feature-example
/*Hides all features by default. When javascript is enabled, this attribute is overwritten*/
feature{
display:none;
}
/*Shows all features with noscript attribute*/
feature[noscript="noscript"], feature[noscript="true"]{
display:block;
}
This is hidden without javascript
This is shown without javascript.
This is shown without javascript.
```
## License
MIT.
Copyright (c) 2018 Manuel Gelsen