vue-feature-flipping - Demo

Sample author(s): Pinguet62

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/gh/pinguet62/vue-feature-flipping@main/dist/vue-feature-flipping.umd.js"></script>
<div id="app" v-if="refresh">
    <h1>Vue Feature Flipping</h1>

    <div>
        <button @click="setValue(null)">OFF</button>
        <button @click="setValue([])">DISABLED</button>
        <button @click="setValue(['FEAT'])">ENABLED</button>
    </div>

    <div>
        <h2>Service <code>isEnabled()</code></h2>

        <div v-if="isEnabled('FEAT')">
            <code>&lt;div v-if=&quot;isEnabled('FEAT')&quot;&gt;</code>
        </div>
        <div v-if="isEnabled('FEAT', false)">
            <code>&lt;div v-if=&quot;isEnabled('FEAT', false)&quot;&gt;</code>
        </div>
        <div v-if="isEnabled('FEAT', true)">
            <code>&lt;div v-if=&quot;isEnabled('FEAT', true)&quot;&gt;</code>
        </div>
    </div>

    <div>
        <h2>Render DOM (like <code>v-if</code>)</h2>

        <div v-feature-flipping="'FEAT'">
            <code>&lt;div v-feature-flipping=&quot;'FEAT'&quot;&gt;</code>
        </div>
        <div v-feature-flipping.not="'FEAT'">
            <code>&lt;div v-feature-flipping.not=&quot;'FEAT'&quot;&gt;</code>
        </div>
        <div v-feature-flipping.default="'FEAT'">
            <code>&lt;div v-feature-flipping.default=&quot;'FEAT'&quot;&gt;</code>
        </div>
    </div>

    <div>
        <h2>Apply <code>class</code> (like <code>v-bind:class</code>)</h2>

        <div v-feature-flipping:class="{ key: 'FEAT', value: 'enabled' }">
            <code>&lt;div v-feature-flipping:class=&quot;{ key: 'FEAT', value: 'enabled' }&quot;&gt;</code>
        </div>
        <div v-feature-flipping:class.not="{ key: 'FEAT', value: 'enabled' }">
            <code>&lt;div v-feature-flipping:class.not=&quot;{ key: 'FEAT', value: 'enabled' }&quot;&gt;</code>
        </div>
        <div...

CSS

.enabled {
    color: green;
}

JavaScript

const isEnabled = VueFeatureFlipping.isEnabled // import { isEnabled } from 'vue-feature-flipping'
const setEnabledFeatures = VueFeatureFlipping.setEnabledFeatures // import { setEnabledFeatures } from 'vue-feature-flipping'
VueFeatureFlipping = VueFeatureFlipping.default // import VueFeatureFlipping from 'vue-feature-flipping'

// ===== Plugin configuration =====

Vue.use(VueFeatureFlipping)
setEnabledFeatures(['FEAT']) // initial state

// ===== Guard =====

const router = new VueRouter({
  routes: [
    {path: '/', component: {template: '<div>You are in "/"</div>'}},
    {path: '/simple', component: {template: '<div>You are in "/simple"</div>'}, meta: {featureFlipping: {key: 'FEAT'}}},
    {path: '/not', component: {template: '<div>You are in "/not"</div>'}, meta: {featureFlipping: {key: 'FEAT', not: true}}},
    {path: '/default', component: {template: '<div>You are in "/default"</div>'}, meta: {featureFlipping: {key: 'FEAT', default: true}}},
  ]
})

// ===== Demo =====

var vm = new Vue({
  el: '#app',
  router,
  data () {
    return {
      featureEnabled: true,
      refresh: true,
    }
  },
  methods: {
    isEnabled,
    setValue (value) {
      setEnabledFeatures(value)

      // hack for refresh
      this.refresh = false
      Vue.nextTick(() => this.refresh = true)
    },
  },
})