Socket
Socket
Sign inDemoInstall

vue-feature-flipping

Package Overview
Dependencies
0
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-feature-flipping

"Feature flipping" plugin for Vue.js


Version published
Weekly downloads
332
increased by6.07%
Maintainers
1
Install size
54.7 kB
Created
Weekly downloads
 

Readme

Source

vue-feature-flipping

:information_source: Vue 3 supported!

Maintained

Codacy Badge Codacy Badge

GitHub Actions

Demo Badge

Vue.js plugin providing a set of components used to introduce "feature flipping" in your project.

Why use this plugin?

The build of the application packaged into bundle the configuration file (config/*.env.js constants) and environment variables (process.env.* usages). So to modify any value, you have to re-build the application.

When you have to enable or disable a feature, the update must be easy and instantaneous.

This plugin solve this problem.

How it works?

All feature flags (list of keys of type string) are stored into plugin.
This list is dynamically initialized at startup (by setEnabledFeatures() function).
Components use this list to define if action can be done (DOM can be shown, route is accessible, ...).

Configuration

1. NPM module

Install NPM dependency:

npm install --save vue-feature-flipping

2. Plugin registration

Register all Vue.js components (directive, guard, ...) calling .use():

import Vue from 'vue'
import FeatureFlipping from 'vue-feature-flipping'

createApp(...)
  .use(FeatureFlipping)
  .mount(...)

3. Features list registration

The setEnabledFeatures(string[]) function can be used to define the feature list.

import { setEnabledFeatures } from 'vue-feature-flipping'

setEnabledFeatures(['FF1', 'FF2', 'FF3'])

You can dynamically refresh the list, using socket.io or setInterval like this example:

setInterval(
    async () => setEnabledFeatures(await getFeaturesFromBackend('http://localhost:8081')),
    60000
)

Usage

Service

A function is defined to check a feature.
If the feature is not enabled, the function returns false.

import { isEnabled } from 'vue-feature-flipping'

if (isEnabled('XXXXX')) {
    // ...
}

if (isEnabled('XXXXX', true)) {
    // ...
}
Directive

A directive named feature-flipping can be used into <template>.

Rendering

Without argument, the directive works like v-if. If the feature is not enabled, the DOM is removed.

<menu>
    <entry>First</entry>
    <entry v-feature-flipping="'XXXXX'">Second</entry>
    <entry v-feature-flipping.not="'XXXXX'">Third</entry>
    <entry v-feature-flipping.default="'XXXXX'">Fourth</entry>
</menu>
Class

The argument class allow the directive to work like v-bind:class. If the feature is enabled, the classes are apply to element.

<menu>
    <entry>First</entry>
    <entry v-feature-flipping:class="{ key: 'XXXXX', value: 'class1' }">Second</entry>
    <entry v-feature-flipping:class="{ key: 'XXXXX', value: ['class1', ['class2'], { 'class3': true }] }">Third</entry>
    <entry v-feature-flipping:class.not="{ key: 'XXXXX', value: 'class1' }">Fourth</entry>
    <entry v-feature-flipping:class.default="{ key: 'XXXXX', value: 'class1' }">Fifth</entry>
</menu>
Style

The argument style allow the directive to work like v-bind:style. If the feature is enabled, the styles are apply to element.

<menu>
    <entry>First</entry>
    <entry v-feature-flipping:style="{ key: 'XXXXX', value: { style1: 'value1', style2: 'value2' } }">Second</entry>
    <entry v-feature-flipping:style="{ key: 'XXXXX', value: [{ style1: 'value1' }, { style2: 'value2' }] }">Third</entry>
    <entry v-feature-flipping:style.not="{ key: 'XXXXX', value: { style1: 'value1' } }">Fourth</entry>
    <entry v-feature-flipping:style.default="{ key: 'XXXXX', value: { style1: 'value1' } }">Fifth</entry>
</menu>
Route

A guard is defined to intercept all routes defining featureFlipping meta field.
If the feature is not enabled, the router redirect to "/" route.

import VueRouter from 'vue-router'
import { Test1Component, Test2Component, Test3Component } from '...'

createRouter({
    routes: [
        { path: '/test1', component: Test1Component, meta: { featureFlipping: { key: 'XXXXX' } } },
        { path: '/test2', component: Test2Component, meta: { featureFlipping: { key: 'XXXXX' }, redirect: '/error' } },
        { path: '/test3', component: Test3Component, meta: { featureFlipping: { key: 'XXXXX', not: true } } },
        { path: '/test4', component: Test4Component, meta: { featureFlipping: { key: 'XXXXX', default: true } } },
    ]
})

Options

default: default behavior

When the plugin is not initialized, or when any error occurs when user try to initialize this plugin, it's necessary to define a default behavior: should we activate the function or should we disable it?

The default value defines this behavior: the value is used when plugin is not initialized or initialized with null.

Example:

try {
    let features = await getFeaturesFromBackend()
    setEnabledFeatures(features)
} catch (e) {
    setEnabledFeatures(null) // use default
}

not: reversed rendering

In some cases, we have to define a behavior when the feature is disabled.

The not option activate this behavior.

Best practices

  • Independent - Avoid behavior depending multiples features.
    Bad: if (isEnabled('F1') && isEnabled('F2') || isEnabled('F3')) ...

Keywords

FAQs

Last updated on 10 Dec 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc