feat: support watch set extra file list

Author: Baitu Huang

README.md

@@ -15,7 +15,7 @@ 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 that exports flags object.
+  a plain object that contains flags value(boolean) or a file path that exports the final flags object.
   ```javascript
   flags: {
     FLAG_A: true,
@@ -27,24 +27,32 @@ options:
 * `namespace` (string, required)
 
   used as namespace of flags in JavaScript, must be a valid variable name.
-* `watch` (boolean, default: false)
+* `watch` (boolean | string[], default: false)
 
-  Support to modify flags and reload your app when this option is `true`.
+  Support to modify flags and reload your app when this option is set.
 
-  Set `true` ONLY in development mode, eg: `watch: process.env.NODE_ENV === 'development'`.
+  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.
+  ```javascript
+  watch: process.env.NODE_ENV === 'development'
+  // or
+  watch: [ './config/flag1.js', './config/flag2.js' ]
+  ```
 
-  Note that `flags` must be a file path when this options is `true`.
 * `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`.
   ```javascript
-  {
+  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-b\.js$/],
+    'FLAG_A && !FLAG_B': [/a-not-b\.js$/],
   }
   ```
 

lib/plugin.js

@@ -76,7 +76,7 @@ module.exports = class VueFlagsWebpackPlugin {
     // prepend ignore module pitch loader
     if (this.pluginOptions.ignoreFiles) {
       const { allFiles } = this.pluginOptions
-      rules.unshift({
+      allFiles.length && rules.unshift({
         use: [{
           loader: require.resolve('./ignore-module-loader'),
           enforce: 'post', // call pitch as soon

lib/resolve-options.js

@@ -5,7 +5,7 @@ const clearModule = require('clear-module')
 const validateOptions = require('schema-utils')
 
 const { RESOLVED_FLAGS_PATH, PLUGIN_NAME } = require('./constants')
-const { genError, toFunc, getDependencies } = require('./utils')
+const { genError, toFunc } = require('./utils')
 
 const flagsSchema = {
   type: 'object',
@@ -39,7 +39,6 @@ const optionSchema = watch => {
               { instanceof: 'RegExp' },
               {
                 type: 'array',
-                minItems: 1,
                 items: { instanceof: 'RegExp' }
               }
             ]
@@ -48,7 +47,15 @@ const optionSchema = watch => {
         additionalProperties: true
       },
       namespace: { type: 'string', minLength: 1 },
-      watch: { type: 'boolean' }
+      watch: {
+        oneOf: [
+          { type: 'boolean' },
+          {
+            type: 'array',
+            items: { type: 'string', minLength: 1 }
+          }
+        ]
+      }
     }
   }
 }
@@ -85,6 +92,8 @@ function updateGetFlags (flagsPaths, errors = 0) {
   if (Array.isArray(flagsPaths)) {
     flagsPaths.forEach(fp => clearModule(fp))
     flagPath = flagsPaths[0]
+  } else {
+    clearModule(flagPath)
   }
   let newFlags
   try {
@@ -129,17 +138,25 @@ function setOptions ({ flags, ignoreFiles, namespace, watch }, context, watchOpt
     if (!dev) {
       throw genError('Make sure only use "watch" in development mode!')
     }
-    const flagFiles = getDependencies(() => {
-      pluginOptions.flags = updateGetFlags(flags)
-    }, [flags])
+    pluginOptions.flags = updateGetFlags(flags)
+    const flagFiles = [flags]
+    if (Array.isArray(watch)) {
+      watch.forEach(file => {
+        if (!path.isAbsolute(file)) {
+          flagFiles.push(path.resolve(context, file))
+        } else {
+          flagFiles.push(file)
+        }
+      })
+    }
     const watcher = new Watchpack(Object.assign({}, watchOptions))
     watcher.watch(flagFiles, [], Date.now() - 100)
     let delay // some file systems will trigger "change" event many times
     watcher.on('change', () => {
       clearTimeout(delay)
       delay = setTimeout(() => {
         pluginOptions.flags = updateGetFlags(flagFiles)
-      }, 300)
+      }, 338) // 🙂
     })
     // in order to be able to close it
     pluginOptions.watcher = watcher

lib/utils.js

@@ -34,23 +34,3 @@ exports.toFunc = function toFunc (exp, useWith = true) {
   }
   return funcsMap[exp]
 }
-
-const Module = require('module')
-const path = require('path')
-exports.getDependencies = function getDependencies (callback, init) {
-  const deps = new Set(init)
-  const resolveFilename = Module._resolveFilename
-  Module._resolveFilename = function _resolveFilename (req, ...args) {
-    const filename = resolveFilename.call(this, req, ...args)
-    if (path.isAbsolute(req) && !/node_modules/.test(req)) {
-      deps.add(filename)
-    }
-    if (/^\.{1,2}\//.test(req)) {
-      deps.add(filename)
-    }
-    return filename
-  }
-  callback()
-  Module._resolveFilename = resolveFilename
-  return [...deps]
-}

test/options.test.js

@@ -1,6 +1,7 @@
 const test = require('tape')
 const chalk = require('chalk')
 process.env.NODE_ENV = 'TEST'
+
 const { setOptions, validateOptions } = require('../lib/resolve-options')
 
 test(chalk.cyan('options test:valid'), t => {
@@ -18,6 +19,16 @@ test(chalk.cyan('options test:valid'), t => {
       flags: { foo: true },
       ignoreFiles: { foo: /a/ }
     },
+    {
+      namespace: 'N',
+      flags: { foo: true },
+      ignoreFiles: { foo: [/a/] }
+    },
+    {
+      namespace: 'N',
+      flags: { foo: true },
+      ignoreFiles: { foo: [] }
+    },
     {
       namespace: 'N',
       flags: {},
@@ -26,15 +37,28 @@ test(chalk.cyan('options test:valid'), t => {
     {
       namespace: 'N',
       flags: './test/flags.js',
-      watch: false
+      watch: true
     },
     {
       namespace: 'N',
       flags: './test/flags.js'
+    },
+    {
+      namespace: 'N',
+      flags: './test/flags.js',
+      watch: []
+    },
+    {
+      namespace: 'N',
+      flags: './test/flags.js',
+      watch: [ './foo.js' ]
     }
   ].forEach(option => {
     t.equal(validateOptions(option), option)
-    t.equal(setOptions(option, './', {}, true).namespace, option.namespace)
+    const po = setOptions(option, './', {}, true)
+    t.equal(po.namespace, option.namespace)
+    t.equal(!!option.watch, !!po.watcher)
+    po.watcher && po.watcher.close()
   })
   t.end()
 })