refactor(utils): improve debug warn (#3302)

.eslintrc.js

@@ -25,6 +25,13 @@ module.exports = {
         'no-undef': 'off',
       },
     },
+    {
+      // not tested
+      files: ['**/__tests__/**'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
   ],
   rules: {
     // js/ts
@@ -32,7 +39,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': 'warn',
     'no-redeclare': 'off',
     '@typescript-eslint/no-redeclare': 'error',
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'no-console': ['warn', { allow: ['error'] }],
     'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
     camelcase: ['error', { properties: 'never' }],
 

packages/components/calendar/src/index.vue

@@ -48,7 +48,7 @@ import dayjs from 'dayjs'
 
 import ElButton from '@element-plus/components/button'
 import { useLocaleInject } from '@element-plus/hooks'
-import { warn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils/error'
 import DateTable from './date-table.vue'
 
 import type { Dayjs } from 'dayjs'
@@ -194,7 +194,7 @@ export default defineComponent({
       }
       // Other cases
       else {
-        warn(
+        debugWarn(
           'ElCalendar',
           'start time and end time interval must not exceed two months'
         )
@@ -208,7 +208,7 @@ export default defineComponent({
       const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value))
       const [startDayjs, endDayjs] = rangeArrDayjs
       if (startDayjs.isAfter(endDayjs)) {
-        warn('ElCalendar', 'end time should be greater than start time')
+        debugWarn('ElCalendar', 'end time should be greater than start time')
         return []
       }
       if (startDayjs.isSame(endDayjs, 'month')) {
@@ -217,7 +217,7 @@ export default defineComponent({
       } else {
         // two months
         if (startDayjs.add(1, 'month').month() !== endDayjs.month()) {
-          warn(
+          debugWarn(
             'ElCalendar',
             'start time and end time interval must not exceed two months'
           )

packages/components/carousel/src/item.vue

@@ -34,6 +34,7 @@ import {
 import { autoprefixer } from '@element-plus/utils/util'
 import type { CSSProperties } from 'vue'
 import type { InjectCarouselScope, ICarouselItemProps } from './carousel'
+import { debugWarn } from '@element-plus/utils/error'
 
 const CARD_SCALE = 0.83
 export default defineComponent({
@@ -132,8 +133,9 @@ export default defineComponent({
       }
       if (parentType === 'card') {
         if (parentDirection.value === 'vertical') {
-          console.warn(
-            '[Element Warn][Carousel]vertical direction is not supported in card mode'
+          debugWarn(
+            'Carousel',
+            'vertical direction is not supported in card mode'
           )
         }
         data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1

packages/components/carousel/src/main.vue

@@ -81,6 +81,7 @@ import type {
   CarouselItem,
   InjectCarouselScope,
 } from './carousel'
+import { debugWarn } from '@element-plus/utils/error'
 
 export default defineComponent({
   name: 'ElCarousel',
@@ -220,7 +221,7 @@ export default defineComponent({
       }
       index = Number(index)
       if (isNaN(index) || index !== Math.floor(index)) {
-        console.warn('[Element Warn][Carousel]index must be an integer.')
+        debugWarn('Carousel', 'index must be an integer.')
         return
       }
       const length = items.value.length

packages/components/form/src/form.vue

@@ -23,6 +23,7 @@ import {
 import { FieldErrorList } from 'async-validator'
 import mitt from 'mitt'
 import { elFormEvents, elFormKey } from '@element-plus/tokens'
+import { debugWarn } from '@element-plus/utils/error'
 
 import type { PropType } from 'vue'
 import type { ComponentSize } from '@element-plus/utils/types'
@@ -43,7 +44,7 @@ function useFormLabelWidth() {
   function getLabelWidthIndex(width: number) {
     const index = potentialLabelWidthArr.value.indexOf(width)
     if (index === -1) {
-      console.warn('[Element Warn][ElementForm]unexpected width ' + width)
+      debugWarn('Form', 'unexpected width ' + width)
     }
     return index
   }
@@ -140,9 +141,7 @@ export default defineComponent({
 
     const resetFields = () => {
       if (!props.model) {
-        console.warn(
-          '[Element Warn][Form]model is required for resetFields to work.'
-        )
+        debugWarn('Form', 'model is required for resetFields to work.')
         return
       }
       fields.forEach((field) => {
@@ -163,9 +162,7 @@ export default defineComponent({
 
     const validate = (callback?: Callback) => {
       if (!props.model) {
-        console.warn(
-          '[Element Warn][Form]model is required for validate to work!'
-        )
+        debugWarn('Form', 'model is required for validate to work!')
         return
       }
 
@@ -215,7 +212,7 @@ export default defineComponent({
       props = [].concat(props)
       const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)
       if (!fields.length) {
-        console.warn('[Element Warn]please pass correct props!')
+        debugWarn('Form', 'please pass correct props!')
         return
       }
 

packages/components/input-number/src/index.vue

@@ -65,6 +65,7 @@ import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 import ElInput from '@element-plus/components/input'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import { debugWarn } from '@element-plus/utils/error'
 
 import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
@@ -149,8 +150,9 @@ export default defineComponent({
       const stepPrecision = getPrecision(props.step)
       if (props.precision !== undefined) {
         if (stepPrecision > props.precision) {
-          console.warn(
-            '[ElementPlus Warn][InputNumber] precision should not be less than the decimal places of step'
+          debugWarn(
+            'InputNumber',
+            'precision should not be less than the decimal places of step'
           )
         }
         return props.precision

packages/components/pagination/src/index.ts

@@ -7,7 +7,7 @@ import {
   getCurrentInstance,
   watch,
 } from 'vue'
-import { warn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils/error'
 import { useLocaleInject } from '@element-plus/hooks'
 
 import Prev from './prev.vue'
@@ -260,7 +260,7 @@ export default defineComponent({
 
     return () => {
       if (!assertValidUsage.value) {
-        warn(componentName, t('el.pagination.deprecationWarning'))
+        debugWarn(componentName, t('el.pagination.deprecationWarning'))
         return null
       }
       if (!props.layout) return null

packages/components/popover/src/index.vue

@@ -19,7 +19,7 @@ import {
   renderPopper,
   renderTrigger,
 } from '@element-plus/components/popper'
-import { warn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils/error'
 import { renderIf, PatchFlags } from '@element-plus/utils/vnode'
 import usePopover, { SHOW_EVENT, HIDE_EVENT } from './usePopover'
 
@@ -70,12 +70,8 @@ export default defineComponent({
   },
   emits,
   setup(props, ctx) {
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      props.visible &&
-      !ctx.slots.reference
-    ) {
-      warn(
+    if (props.visible && !ctx.slots.reference) {
+      debugWarn(
         NAME,
         `
         You cannot init popover without given reference

packages/components/scrollbar/src/index.vue

@@ -52,7 +52,7 @@ import {
   isString,
   toObject,
 } from '@element-plus/utils/util'
-import { warn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils/error'
 import Bar from './bar.vue'
 
 import type { CSSProperties, PropType } from 'vue'
@@ -140,9 +140,7 @@ export default defineComponent({
 
     const setScrollTop = (value: number) => {
       if (!isNumber(value)) {
-        if (process.env.NODE_ENV !== 'production') {
-          warn(SCOPE, 'value must be a number')
-        }
+        debugWarn(SCOPE, 'value must be a number')
         return
       }
       wrap.value.scrollTop = value
@@ -150,9 +148,7 @@ export default defineComponent({
 
     const setScrollLeft = (value: number) => {
       if (!isNumber(value)) {
-        if (process.env.NODE_ENV !== 'production') {
-          warn(SCOPE, 'value must be a number')
-        }
+        debugWarn(SCOPE, 'value must be a number')
         return
       }
       wrap.value.scrollLeft = value

packages/components/slider/src/useStops.ts

@@ -1,6 +1,5 @@
-import { computed, CSSProperties } from 'vue'
-
-import { ComputedRef } from 'vue'
+import { debugWarn } from '@element-plus/utils/error'
+import { computed, ComputedRef, CSSProperties } from 'vue'
 import type { ISliderInitData, ISliderProps, Stops } from './slider.type'
 
 export const useStops = (
@@ -12,8 +11,7 @@ export const useStops = (
   const stops = computed(() => {
     if (!props.showStops || props.min > props.max) return []
     if (props.step === 0) {
-      process.env.NODE_ENV !== 'production' &&
-        console.warn('[Element Warn][Slider]step should not be 0.')
+      debugWarn('Slider', 'step should not be 0.')
       return []
     }
 

packages/components/switch/src/index.vue

@@ -69,7 +69,7 @@ import {
 import { isPromise } from '@vue/shared'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 import { isBool } from '@element-plus/utils/util'
-import throwError, { warn } from '@element-plus/utils/error'
+import throwError, { debugWarn } from '@element-plus/utils/error'
 
 import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
@@ -261,9 +261,7 @@ export default defineComponent({
             }
           })
           .catch((e) => {
-            if (process.env.NODE_ENV !== 'production') {
-              warn(scope, `some error occurred: ${e}`)
-            }
+            debugWarn(scope, `some error occurred: ${e}`)
           })
       } else if (shouldChange) {
         handleChange()

packages/components/table/src/table-column/render-helper.ts

@@ -1,6 +1,7 @@
 import { getCurrentInstance, h, ref, computed, watchEffect } from 'vue'
 import { cellForced, defaultRenderCell, treeCellPrefix } from '../config'
 import { parseWidth, parseMinWidth } from '../util'
+import { debugWarn } from '@element-plus/utils/error'
 
 import type { ComputedRef } from 'vue'
 import type { TableColumnCtx, TableColumn } from './defaults'
@@ -78,8 +79,9 @@ function useRender<T>(
   const setColumnRenders = (column: TableColumnCtx<T>) => {
     // renderHeader 属性不推荐使用。
     if (props.renderHeader) {
-      console.warn(
-        '[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.'
+      debugWarn(
+        'TableColumn',
+        'Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.'
       )
     } else if (column.type !== 'selection') {
       column.renderHeader = (scope) => {

packages/components/tree/src/tree-node.vue

@@ -97,6 +97,7 @@ import Node from './model/node'
 import type { ComponentInternalInstance, PropType } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
 import type { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'
+import { debugWarn } from '@element-plus/utils/error'
 
 export default defineComponent({
   name: 'ElTreeNode',
@@ -136,7 +137,7 @@ export default defineComponent({
 
     provide('NodeInstance', instance)
     if (!tree) {
-      console.warn("Can not find node's tree.")
+      debugWarn('Tree', "Can not find node's tree.")
     }
 
     if (props.node.expanded) {

packages/hooks/use-migrating/index.ts

@@ -1,5 +1,6 @@
-import { onMounted, getCurrentInstance } from 'vue'
+import { debugWarn } from '@element-plus/utils/error'
 import { kebabCase } from '@element-plus/utils/util'
+import { getCurrentInstance, onMounted } from 'vue'
 
 const useMigrating = function () {
   onMounted(() => {
@@ -13,8 +14,9 @@ const useMigrating = function () {
     for (let propName in definedProps as any) {
       propName = kebabCase(propName) // compatible with camel case
       if (props[propName]) {
-        console.warn(
-          `[Element Migrating][${instance.proxy.$options.name}][Attribute]: ${props[propName]}`
+        debugWarn(
+          'Element Migrating',
+          `[${instance.proxy.$options.name}][Attribute]: ${props[propName]}`
         )
       }
     }

packages/locale/index.ts

@@ -1,3 +1,4 @@
+import { debugWarn } from '@element-plus/utils/error'
 import dayjs from 'dayjs'
 import defaultLang from './lang/en'
 
@@ -51,13 +52,14 @@ export const t = (...args: any[]): string => {
 }
 
 export const use = (l: Language): void => {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(`[deprecation]:
+  debugWarn(
+    'deprecation',
+    `:
       The previous i18n usage is deprecated please update to
       the new one to get reactive i18n translations, refer to:
       https://element-plus.org/#/en-US/component/i18n
-    `)
-  }
+    `
+  )
 
   lang = l || lang
   if (lang.name) {

packages/utils/error.ts

@@ -9,6 +9,9 @@ export default (scope: string, m: string) => {
   throw new ElementPlusError(`[${scope}] ${m}`)
 }
 
-export function warn(scope: string, m: string) {
-  console.warn(new ElementPlusError(`[${scope}] ${m}`))
+export function debugWarn(scope: string, message: string): void {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn(new ElementPlusError(`[${scope}] ${message}`))
+  }
 }

packages/utils/util.ts

@@ -14,7 +14,7 @@ import {
 } from '@vue/shared'
 import isEqualWith from 'lodash/isEqualWith'
 import isServer from './isServer'
-import { warn } from './error'
+import { debugWarn } from './error'
 
 import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue'
 import type { AnyFunction, TimeoutHandle, Hash, Nullable } from './types'
@@ -132,6 +132,7 @@ export const autoprefixer = function (style: CSSProperties): CSSProperties {
 export const kebabCase = hyphenate
 
 // reexport from lodash & vue shared
+export { isVNode } from 'vue'
 export {
   hasOwn,
   // isEmpty,
@@ -184,8 +185,6 @@ export function isUndefined(val: any): val is undefined {
   return val === undefined
 }
 
-export { isVNode } from 'vue'
-
 export function useGlobalConfig() {
   const vm: any = getCurrentInstance()
   if ('$ELEMENT' in vm.proxy) {
@@ -244,9 +243,7 @@ export function addUnit(value: string | number) {
   } else if (isNumber(value)) {
     return value + 'px'
   }
-  if (process.env.NODE_ENV === 'development') {
-    warn(SCOPE, 'binding value must be a string or number')
-  }
+  debugWarn(SCOPE, 'binding value must be a string or number')
   return ''
 }
 

packages/utils/vnode.ts

@@ -11,7 +11,7 @@ import {
 
 import type { VNode, VNodeTypes, VNodeChild } from 'vue'
 import { hasOwn } from '@vue/shared'
-import { warn } from './error'
+import { debugWarn } from './error'
 
 type Children = VNodeTypes[] | VNodeTypes
 
@@ -108,7 +108,7 @@ export function renderBlock(
  */
 export const getNormalizedProps = (node: VNode) => {
   if (!isVNode(node)) {
-    warn(SCOPE, 'value must be a VNode')
+    debugWarn(SCOPE, 'value must be a VNode')
     return
   }
   const raw = node.props || {}