vue-flags-webpack-plugin

Remove useless code by setting flags(toggles) in .vue SFC file

⚙ Usage

install:

npm install vue-flags-webpack-plugin -D

options:

• flags ({[k: string]: boolean} | string, required)

  A plain object that contains flags value(boolean).

  Or a file path(will be executed many times!) which exports the final flags object.

  flags: {
    FLAG_A: true,
    FLAG_B: false,
  }
  // or
  flags: './config/allFlags.js'

• namespace (string, required)

  used as namespace of flags in JavaScript, must be a valid variable name.

• watch (boolean | string[], default: false)

  Support to modify flags and reload your app when this option is set.

  Set this option ONLY in development mode.

  If watch is true, option flags must be a file path.

  watch could also be an array including extra files paths which will be watched.

  watch: process.env.NODE_ENV === 'development'
  // or (no need to add extra files in most cases, just set it true)
  watch: [ './config/flag1.js', './config/flag2.js' ]

• ignoreFiles ({[k: string]: RegExp | RegExp[]})

  A plain object that uses flag name or expression as key and regexp as value.

  Modules(absolute path) matched by the regexps will be ignored when the value of flags is false.

  ignoreFiles: {
    // if FLAG_A is false, a.js will be ignored,
    'FLAG_A': [/a\.js$/],
    // if FLAG_A is false or FLAG_B is true, a-b.js will be ignored
    'FLAG_A && !FLAG_B': [/a-not-b\.js$/],
  }

🌰 Example

flags file: ./allFlags.js

module.exports = {
  FLAG_A: true,
  FLAG_B: false,
}

webpack config:

const VueFlagsPlugin = require('vue-flags-webpack-plugin');
const postcssFlagsPlugin = VueFlagsPlugin.postcssFlagsPlugin;
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      loader: 'postcss-loader',
      options: { plugins: [postcssFlagsPlugin()] }
    }]
  },
  plugins: [
    new VueFlagsPlugin({
      flags: './allFlags.js',
      namespace: 'FLAGS',
      watch: process.env.NODE_ENV === 'development',
      ignoreFiles: {
        FLAG_B: [/b-related-module\.js$/]
      }
    })
  ]
};

vue component:

<template>
  <div>
    <p v-if-flag="FLAG_A">feature a will be enabled</p>
    <p v-elif-flag="FLAG_B">{{msg}}</p>
    <p v-else-flag>both feature a and b will be disabled</p>
  </div>
  <!-- will be transformed as
  <div>
    <p>feature a will be enabled</p>
  </div>
   -->
</template>
 
<script>
  import moduleB from './b-related-module';
  export default {
    data() {
      return {
        // "FLAGS" as namespace
        msg: FLAGS.FLAG_B ? 'feature b content' : '...';
      }
    },
    mounted() {
      // if FLAG_B is false, moduleB is undefined
      if (moduleB) { moduleB() }
    }
  }
</script> 
 
<!-- could also use sc(a)ss, less, stylus, etc. -->
<style>
  p { color: yellow; }
  @supports (--flag: FLAG_A) {
    p { font-size: 2em; }
  }
  @supports not ((--flag: FLAG_A) or (--flag: FLAG_B)) {
    p { display: none; }
  }
  /**
    You must use "--flag" as custom property name
    see @supports: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
    above will be transformed as:
    p { color: yellow; }
    p { font-size: 2em; }
  */
</style> 

⚠️ Caveats

• requires vue-loader >= 15, webpack >= 4, vue-template-compiler >= 2.5.12

• v-*-flag can not be used with v-if followed by v-else-if or v-else.

  💡use <template v-*-flag> to wrap the condition elements.

• v-else-flag and v-elif-flag can not be used with slot-scope or v-slot.

  💡only use v-if-flag on scoped slot element and put all slots in the end.

License

MIT