feat: 添加测试，隐藏私有变量

.babelrc

@@ -5,5 +5,11 @@
         "browsers": ["last 2 versions", "safari >= 7", "ie >= 10"]
       }
     }]
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["env", "babel-preset-power-assert"],
+      "plugins": ["istanbul"]
+    }
+  }
 }

README.md

@@ -2,15 +2,16 @@
 
 Page Visibility API wrapper for vuejs.
 
-## feature
+## Features
 
 - no denpendencies
 - support vue directive && global callback
 - detect page visibility state
+- full tests in chrome, theoretically compatible with IE > 10,	Firefox > 10, Safari > 6.1
 
 ## Usage
 
-### 安装
+### install
 
 #### npm
 
@@ -25,7 +26,7 @@ $ npm i vue-visibility-change -S
 <script src="./lib/vue-visibility.js"></script>
 ```
 
-### 
+### global
 
 ```js
 import Vue from 'vue';
@@ -35,9 +36,34 @@ import visibility from 'vue-visibility-change';
 Vue.use(visibility);
 
 // global mode
-visibility.change((evt, hidden) => {
+const handler = visibility.change((evt, hidden) => {
   // do something
 });
+
+visibility.hidden(); // Return true if page now isn’t visible to user.
+
+visibility.unbind(handler); // Remove `change` listener by it's handler.
+
+visibility.isSupported(); // Return true if browser support Page Visibility API.
+```
+
+### vue-directive
+
+```html
+<template>
+  <div v-visibility-change="visibilityChange">
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    visibilityChange(hidden) {
+      // do something
+      console.log(hidden);
+    }
+  }
+};
+</script>
 ```
 
 ## Demo

build/utils.js

@@ -0,0 +1,52 @@
+var path = require('path')
+
+exports.assetsPath = function (_path) {
+  return path.posix.join('static', _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    return ['vue-style-loader'].concat(loaders)
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    scss: generateLoaders('sass'),
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}

build/vue-loader.conf.js

@@ -0,0 +1,13 @@
+var utils = require('./utils')
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: true,
+  }),
+  transformToRequire: {
+    video: 'src',
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

webpack.config.js → build/webpack.prod.conf.js

@@ -1,9 +1,13 @@
 const path = require('path');
 
+function resolve(dir) {
+  return path.resolve(__dirname, '..', dir);
+}
+
 module.exports = {
   entry: './src/index.js',
   output: {
-    path: path.resolve(__dirname, "lib"),
+    path: resolve("lib"),
     filename: 'vue-visibility.js',
     library: 'visibility',
     libraryTarget: 'umd'
@@ -13,7 +17,7 @@ module.exports = {
       {
         test: /\.js$/,
         include: [
-          path.resolve(__dirname, "src")
+          resolve("src")
         ],
         loader: 'babel-loader'
       }

build/webpack.test.conf.js

@@ -0,0 +1,65 @@
+var path = require('path')
+var vueLoaderConfig = require('./vue-loader.conf')
+var webpack = require('webpack')
+
+function resolve(dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  devtool: '#inline-source-map',
+  output: {
+    path: resolve('dist'),
+    filename: '[name].js',
+    library: 'visibility',
+    libraryTarget: 'umd'
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [{
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter'),
+          fix: true
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig,
+
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': { NODE_ENV: '"testing"' }
+    })
+  ],
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

lib/vue-visibility.js

@@ -88,6 +88,7 @@ var _id = Symbol('visibility-change-id');
 var _hidden = void 0,
     visibilityChange = void 0,
     lastId = -1;
+/* istanbul ignore else */
 if (typeof document.hidden !== "undefined") {
   // Opera 12.10 and Firefox 18 and later support
   _hidden = "hidden";
@@ -103,11 +104,39 @@ if (typeof document.hidden !== "undefined") {
   visibilityChange = "mozvisibilitychange";
 }
 
-var visibility = {
-  // 缓存 visibility change 触发时的回调函数
-  _callbacks: {},
+// 缓存 visibility change 触发时的回调函数
+var _callbacks = {};
+var _doc = document;
+var _init = void 0;
+
+/**
+ * Listener for `visibilitychange` event.
+ * @param {Event} event event object
+ */
+function _change(event) {
+  for (var i in _callbacks) {
+    _callbacks[i].call(_doc, event, _doc[_hidden]);
+  }
+}
+
+/**
+ * Set listener for `visibilitychange` event.
+ */
+function _listen() {
+  /* istanbul ignore if */
+  if (_init) {
+    return;
+  }
+
+  var listener = function listener() {
+    _change.apply(visibility, arguments);
+  };
+  document.addEventListener(visibilityChange, listener);
 
-  _doc: document,
+  _init = true;
+}
+
+var visibility = {
 
   /**
    * 当可见性发生变化时调用回调。
@@ -123,8 +152,8 @@ var visibility = {
     }
     lastId += 1;
     var number = lastId;
-    visibility._callbacks[number] = callback;
-    visibility._listen();
+    _callbacks[number] = callback;
+    _listen();
     return number;
   },
 
@@ -141,7 +170,7 @@ var visibility = {
    * });
    */
   unbind: function unbind(id) {
-    delete visibility._callbacks[id];
+    delete _callbacks[id];
   },
 
 
@@ -157,35 +186,7 @@ var visibility = {
    * Return true if page now isn’t visible to user.
    */
   hidden: function hidden() {
-    return visibility._doc[_hidden];
-  },
-
-
-  /**
-   * Listener for `visibilitychange` event.
-   * @param {Event} event event object
-   */
-  _change: function _change(event) {
-    for (var i in visibility._callbacks) {
-      visibility._callbacks[i].call(visibility._doc, event, visibility._doc[_hidden]);
-    }
-  },
-
-
-  /**
-   * Set listener for `visibilitychange` event.
-   */
-  _listen: function _listen() {
-    if (visibility._init) {
-      return;
-    }
-
-    var listener = function listener() {
-      visibility._change.apply(visibility, arguments);
-    };
-    document.addEventListener(visibilityChange, listener);
-
-    visibility._init = true;
+    return _doc[_hidden];
   }
 };
 
@@ -199,6 +200,8 @@ visibility.install = function (Vue) {
         el[_id] = visibility.change(function (evt, hidden) {
           value(evt, hidden);
         });
+      } else {
+        console.error('You need bind a callback function');
       }
     },
     unbind: function unbind(el) {