refactor: improve assert and logger

packages/varlet-shared/package.json

@@ -37,7 +37,7 @@
     "build": "tsup src/index.ts --format esm,cjs --out-dir=lib --dts --clean"
   },
   "dependencies": {
-    "rattail": "1.0.14"
+    "rattail": "1.0.17"
   },
   "devDependencies": {
     "@types/node": "^18.7.18",

packages/varlet-shared/src/index.ts

@@ -1,2 +1,23 @@
-export * from './is'
+import { assert as _assert } from 'rattail'
+
 export * from 'rattail'
+
+export function assert(condition: boolean, source: string, message: string): asserts condition {
+  return _assert(condition, `Varlet [${source}]: ${message}`)
+}
+
+export function warn(source: string, message: string): void {
+  console.warn(`Varlet [${source}]: ${message}`)
+}
+
+export function error(source: string, message: string): void {
+  console.error(`Varlet [${source}]: ${message}`)
+}
+
+export const isURL = (val: string | undefined | null) => {
+  if (!val) {
+    return false
+  }
+
+  return /^(http)|(\.*\/)/.test(val)
+}

packages/varlet-ui/src/bottom-navigation-item/provide.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef } from 'vue'
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import {
   BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY,
   type BottomNavigationProvider,
@@ -16,9 +16,7 @@ export function useBottomNavigation() {
     BOTTOM_NAVIGATION_BIND_BOTTOM_NAVIGATION_ITEM_KEY
   )
 
-  if (!bindParent) {
-    error('BottomNavigationItem', '<var-bottom-navigation-item/> must in <var-bottom-navigation/>')
-  }
+  assert(!!bindParent, 'BottomNavigationItem', '<var-bottom-navigation-item/> must in <var-bottom-navigation/>')
 
   return {
     index,

packages/varlet-ui/src/breadcrumb/provide.ts

@@ -1,15 +1,13 @@
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY, type BreadcrumbsProvider } from '../breadcrumbs/provide'
 
 export function useBreadcrumb() {
   const { parentProvider, bindParent, index } = useParent<BreadcrumbsProvider, null>(
     BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY
   )
 
-  if (!bindParent) {
-    error('Breadcrumb', '<var-breadcrumb/> must in <var-breadcrumbs/>')
-  }
+  assert(!!bindParent, 'Breadcrumb', '<var-breadcrumb/> must in <var-breadcrumbs/>')
 
   return {
     index,

packages/varlet-ui/src/collapse-item/provide.ts

@@ -1,5 +1,5 @@
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { COLLAPSE_BIND_COLLAPSE_ITEM_KEY, CollapseProvider } from '../collapse/provide'
 import { type ComputedRef } from 'vue'
 
@@ -15,9 +15,7 @@ export function useCollapse() {
     COLLAPSE_BIND_COLLAPSE_ITEM_KEY
   )
 
-  if (!bindParent) {
-    error('Collapse', '<var-collapse-item/> must in <var-collapse>')
-  }
+  assert(!!bindParent, 'Collapse', '<var-collapse-item/> must in <var-collapse>')
 
   return {
     index,

packages/varlet-ui/src/date-picker/DatePicker.vue

@@ -119,7 +119,7 @@ import {
   type TouchDirection,
   type Week,
 } from './props'
-import { isArray, toNumber, doubleRaf, call } from '@varlet/shared'
+import { isArray, toNumber, doubleRaf, call, error } from '@varlet/shared'
 import { createNamespace, formatElevation } from '../utils/components'
 import { padStart } from '../utils/shared'
 import { t } from '../locale'
@@ -466,21 +466,25 @@ export default defineComponent({
 
     function checkValue() {
       if ((props.multiple || props.range) && !isArray(props.modelValue)) {
-        console.error('[Varlet] DatePicker: type of prop "modelValue" should be an Array')
+        error('DatePicker', 'type of prop "modelValue" should be an Array')
         return false
       }
+
       if (!props.multiple && !props.range && isArray(props.modelValue)) {
-        console.error('[Varlet] DatePicker: type of prop "modelValue" should be a String')
+        error('DatePicker', 'type of prop "modelValue" should be a String')
         return false
       }
+
       return true
     }
 
     function invalidFormatDate(date: string | Array<string> | undefined): boolean {
-      if (isArray(date)) return false
+      if (isArray(date)) {
+        return false
+      }
 
       if (date === 'Invalid Date') {
-        console.error('[Varlet] DatePicker: "modelValue" is an Invalid Date')
+        error('DatePicker', '"modelValue" is an Invalid Date')
         return true
       }
 

packages/varlet-ui/src/index-anchor/provide.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue'
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { INDEX_BAR_BIND_INDEX_ANCHOR_KEY, type IndexBarProvider } from '../index-bar/provide'
 
 export interface IndexAnchorProvider {
@@ -15,9 +15,7 @@ export function useIndexBar() {
     INDEX_BAR_BIND_INDEX_ANCHOR_KEY
   )
 
-  if (!bindParent) {
-    error('IndexAnchor', 'You should use this component in "IndexBar"')
-  }
+  assert(!!bindParent, 'IndexAnchor', 'You should use this component in "IndexBar"')
 
   return {
     index,

packages/varlet-ui/src/menu-option/provide.ts

@@ -1,5 +1,5 @@
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { MENU_SELECT_BIND_MENU_OPTION_KEY, type MenuSelectProvider } from '../menu-select/provide'
 import { type OptionProvider } from '../option/provide'
 
@@ -10,9 +10,7 @@ export function useMenuSelect() {
     MENU_SELECT_BIND_MENU_OPTION_KEY
   )
 
-  if (!bindParent) {
-    error('MenuOption', '<var-menu-option/> must in <var-menu-select/>')
-  }
+  assert(!!bindParent, 'MenuOption', '<var-menu-option/> must in <var-menu-select/>')
 
   return {
     index,

packages/varlet-ui/src/option/provide.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef } from 'vue'
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { SELECT_BIND_OPTION_KEY, type SelectProvider } from '../select/provide'
 
 export interface OptionProvider {
@@ -13,9 +13,7 @@ export interface OptionProvider {
 export function useSelect() {
   const { index, parentProvider, bindParent } = useParent<SelectProvider, OptionProvider>(SELECT_BIND_OPTION_KEY)
 
-  if (!bindParent) {
-    error('Option', '<var-option/> must in <var-select/>')
-  }
+  assert(!!bindParent, 'Option', '<var-option/> must in <var-select/>')
 
   return {
     index,

packages/varlet-ui/src/select/Select.vue

@@ -139,13 +139,12 @@ import VarOption from '../option'
 import VarFieldDecorator from '../field-decorator'
 import VarFormDetails from '../form-details'
 import { computed, defineComponent, ref, watch, nextTick } from 'vue'
-import { isArray, isEmpty, call, preventDefault, doubleRaf, isFunction } from '@varlet/shared'
+import { isArray, isEmpty, call, preventDefault, doubleRaf, isFunction, assert } from '@varlet/shared'
 import { props, type SelectValidateTrigger } from './props'
 import { useValidation, createNamespace, MaybeVNode } from '../utils/components'
 import { useOptions, type SelectProvider } from './provide'
 import { useForm } from '../form/provide'
 import { focusChildElementByKey, toPxNum } from '../utils/elements'
-import { error } from '../utils/logger'
 import { useSelectController } from './useSelectController'
 import { type OptionProvider } from '../option/provide'
 import { useEventListener } from '@varlet/use'
@@ -222,10 +221,11 @@ export default defineComponent({
     watch(
       () => props.multiple,
       () => {
-        const { multiple, modelValue } = props
-        if (multiple && !isArray(modelValue)) {
-          error('Select', 'The modelValue must be an array when multiple is true')
-        }
+        assert(
+          props.multiple && isArray(props.modelValue),
+          'Select',
+          'The modelValue must be an array when multiple is true'
+        )
       }
     )
 

packages/varlet-ui/src/slider/Slider.vue

@@ -81,8 +81,7 @@ import { defineComponent, ref, onBeforeUnmount, computed, reactive, nextTick, wa
 import { useValidation, createNamespace } from '../utils/components'
 import { useForm } from '../form/provide'
 import { getLeft, toSizeUnit } from '../utils/elements'
-import { warn } from '../utils/logger'
-import { isArray, isNumber, toNumber, getRect, preventDefault, call, hasOwn, clamp } from '@varlet/shared'
+import { isArray, isNumber, toNumber, getRect, preventDefault, call, hasOwn, clamp, error, warn } from '@varlet/shared'
 import { props, Thumbs, type ThumbProps, type ThumbsProps, type ThumbsListProps } from './props'
 import { onSmartMounted, onWindowResize, useEventListener } from '@varlet/use'
 import { type SliderProvider } from './provide'
@@ -449,7 +448,7 @@ export default defineComponent({
 
     function stepValidator() {
       if (toNumber(props.step) <= 0) {
-        warn('[Varlet] Slider', '"step" should be > 0')
+        warn('Slider', '"step" should be > 0')
         return false
       }
 
@@ -460,17 +459,17 @@ export default defineComponent({
       const { range, modelValue } = props
 
       if (range && !isArray(modelValue)) {
-        console.error('[Varlet] Slider: "modelValue" should be an Array')
+        error('Slider', '"modelValue" should be an Array')
         return false
       }
 
       if (!range && isArray(modelValue)) {
-        console.error('[Varlet] Slider: "modelValue" should be a Number')
+        error('Slider', '"modelValue" should be a Number')
         return false
       }
 
       if (range && isArray(modelValue) && modelValue.length < 2) {
-        console.error('[Varlet] Slider: "modelValue" should have two value')
+        error('Slider', '"modelValue" should have two value')
         return false
       }
 

packages/varlet-ui/src/step/provide.ts

@@ -1,6 +1,6 @@
 import { type ComputedRef } from 'vue'
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { type StepsProvider, STEPS_BIND_STEP_KEY } from '../steps/provide'
 
 export interface StepProvider {
@@ -10,9 +10,7 @@ export interface StepProvider {
 export function useSteps() {
   const { parentProvider, index, bindParent } = useParent<StepsProvider, StepProvider>(STEPS_BIND_STEP_KEY)
 
-  if (!bindParent) {
-    error('Steps', '<step/> must in <steps>')
-  }
+  assert(!!bindParent, 'Steps', '<step/> must in <steps>')
 
   return {
     index,

packages/varlet-ui/src/swipe-item/provide.ts

@@ -1,6 +1,6 @@
-import { type ComputedRef } from 'vue'
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
+import { type ComputedRef } from 'vue'
 import { type SwipeProvider, SWIPE_BIND_SWIPE_ITEM_KEY } from '../swipe/provide'
 
 export interface SwipeItemProvider {
@@ -12,9 +12,7 @@ export interface SwipeItemProvider {
 export function useSwipe() {
   const { bindParent, index, parentProvider } = useParent<SwipeProvider, SwipeItemProvider>(SWIPE_BIND_SWIPE_ITEM_KEY)
 
-  if (!bindParent) {
-    error('SwipeItem', '<var-swipe-item/> must in <var-swipe/>')
-  }
+  assert(!!bindParent, 'SwipeItem', '<var-swipe-item/> must in <var-swipe/>')
 
   return {
     index,

packages/varlet-ui/src/tab-item/provide.ts

@@ -1,5 +1,5 @@
 import { useChildren, useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { TABS_ITEMS_BIND_TAB_ITEM_KEY, type TabsItemsProvider } from '../tabs-items/provide'
 import { type ComputedRef } from 'vue'
 import { type ListProvider } from '../list/provide'
@@ -18,9 +18,7 @@ export function useTabsItems() {
     TABS_ITEMS_BIND_TAB_ITEM_KEY
   )
 
-  if (!bindParent) {
-    error('TabItem', '<var-tab-item/> must in <var-tabs-items/>')
-  }
+  assert(!!bindParent, 'TabItem', '<var-tab-item/> must in <var-tabs-items/>')
 
   return {
     index,

packages/varlet-ui/src/tab/provide.ts

@@ -1,5 +1,5 @@
 import { useParent } from '@varlet/use'
-import { error } from '../utils/logger'
+import { assert } from '@varlet/shared'
 import { TABS_BIND_TAB_KEY, type TabsProvider } from '../tabs/provide'
 import type { ComputedRef } from 'vue'
 
@@ -13,9 +13,7 @@ export interface TabProvider {
 export function useTabs() {
   const { parentProvider, bindParent, index } = useParent<TabsProvider, TabProvider>(TABS_BIND_TAB_KEY)
 
-  if (!bindParent) {
-    error('Tab', '<var-tab/> must in <var-tabs/>')
-  }
+  assert(!!bindParent, 'Tab', '<var-tab/> must in <var-tabs/>')
 
   return {
     index,

packages/varlet-ui/src/utils/elements.ts

@@ -12,7 +12,7 @@ import {
   getScrollLeft,
   isNumeric,
 } from '@varlet/shared'
-import { error } from './logger'
+import { assert } from '@varlet/shared'
 import { type StyleVars } from '../style-provider'
 
 export function getLeft(element: HTMLElement): number {
@@ -73,16 +73,14 @@ export function getTarget(target: string | HTMLElement, componentName: string) {
   if (isString(target)) {
     const el = document.querySelector(target)
 
-    if (!el) {
-      error(componentName, 'target element cannot found')
-    }
+    assert(!!el, componentName, 'target element cannot found')
 
     return el as HTMLElement
   }
 
-  if (isObject(target)) return target
+  assert(isObject(target), componentName, 'type of prop "target" should be an element object')
 
-  error(componentName, 'type of prop "target" should be a selector or an element object')
+  return target
 }
 
 export function getViewportSize() {