perf: optimize logger, disable warn in production

Author: PeachScript

src/components/InfiniteLoading.vue

@@ -25,10 +25,11 @@
   </div>
 </template>
 <script>
-/* eslint-disable no-console */
 import Spinner from './Spinner.vue';
 import config, { evt3rdArg, WARNINGS, STATUS } from '../config';
-import { throttleer, loopTracker, isBlankSlotElm } from '../utils';
+import {
+  warn, throttleer, loopTracker, isBlankSlotElm,
+} from '../utils';
 
 export default {
   name: 'InfiniteLoading',
@@ -125,7 +126,7 @@ export default {
       }
 
       if (!ev || ev.target !== this) {
-        console.warn(WARNINGS.STATE_CHANGER);
+        warn(WARNINGS.STATE_CHANGER);
       }
     });
 
@@ -140,7 +141,7 @@ export default {
       this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
 
       if (!ev || ev.target !== this) {
-        console.warn(WARNINGS.STATE_CHANGER);
+        warn(WARNINGS.STATE_CHANGER);
       }
     });
 
@@ -152,12 +153,12 @@ export default {
       setTimeout(this.scrollHandler, 1);
 
       if (!ev || ev.target !== this) {
-        console.warn(WARNINGS.IDENTIFIER);
+        warn(WARNINGS.IDENTIFIER);
       }
     });
 
     if (this.onInfinite) {
-      console.warn(WARNINGS.INFINITE_EVENT);
+      warn(WARNINGS.INFINITE_EVENT);
     }
 
     /**

src/config.js

@@ -67,7 +67,7 @@ export const evt3rdArg = (() => {
 
 export const WARNINGS = {
   STATE_CHANGER: [
-    '[Vue-infinite-loading warn]: emit `loaded` and `complete` event through component instance of `$refs` may cause error, so it will be deprecated soon, please use the `$state` argument instead (`$state` just the special `$event` variable):',
+    'emit `loaded` and `complete` event through component instance of `$refs` may cause error, so it will be deprecated soon, please use the `$state` argument instead (`$state` just the special `$event` variable):',
     '\ntemplate:',
     '<infinite-loading @infinite="infiniteHandler"></infinite-loading>',
     `
@@ -87,8 +87,8 @@ infiniteHandler($state) {
     '',
     'more details: https://github.com/PeachScript/vue-infinite-loading/issues/57#issuecomment-324370549',
   ].join('\n'),
-  INFINITE_EVENT: '[Vue-infinite-loading warn]: `:on-infinite` property will be deprecated soon, please use `@infinite` event instead.',
-  IDENTIFIER: '[Vue-infinite-loading warn]: the `reset` event will be deprecated soon, please reset this component by change the `identifier` property.',
+  INFINITE_EVENT: '`:on-infinite` property will be deprecated soon, please use `@infinite` event instead.',
+  IDENTIFIER: 'the `reset` event will be deprecated soon, please reset this component by change the `identifier` property.',
 };
 
 /**
@@ -97,7 +97,7 @@ infiniteHandler($state) {
 
 export const ERRORS = {
   INFINITE_LOOP: [
-    `[Vue-infinite-loading error]: executed the callback function more than ${system.loopCheckMaxCalls} times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:`,
+    `executed the callback function more than ${system.loopCheckMaxCalls} times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:`,
     `
 <!-- add a special attribute for the real scroll wrapper -->
 <div infinite-wrapper>

src/utils.js

@@ -2,6 +2,25 @@
 
 import config, { ERRORS } from './config';
 
+/**
+ * console warning in production
+ * @param {String} msg console content
+ */
+export function warn(msg) {
+  /* istanbul ignore else */
+  if (config.mode !== 'production') {
+    console.warn(`[Vue-infinite-loading warn]: ${msg}`);
+  }
+}
+
+/**
+ * console error
+ * @param {String} msg console content
+ */
+export function error(msg) {
+  console.error(`[Vue-infinite-loading error]: ${msg}`);
+}
+
 export const throttleer = {
   caches: [],
   throttle(fn) {
@@ -34,7 +53,7 @@ export const loopTracker = {
 
     // throw warning if the times of continuous calls large than the maximum times
     if (this.times > config.system.loopCheckMaxCalls) {
-      console.error(ERRORS.INFINITE_LOOP);
+      error(ERRORS.INFINITE_LOOP);
       this.isChecked = true;
     }
   },
@@ -55,6 +74,8 @@ export function isBlankSlotElm(slot) {
 }
 
 export default {
+  warn,
+  error,
   throttleer,
   loopTracker,
   isBlankSlotElm,

test/unit/specs/InfiniteLoading.spec.js

@@ -58,11 +58,17 @@ describe('vue-infinite-loading:component', () => {
     `;
 
     document.body.appendChild(styles);
+
+    // use development mode
+    config.mode = 'development';
   });
 
   after(() => {
     // remove global CSS
     document.getElementById('testing-style').remove();
+
+    // restore app mode
+    config.mode = Vue.config.productionTip ? 'development' : 'production';
   });
 
   beforeEach(() => {