feat(utils): improve add unit performance with wxs (#2550)

packages/checkbox/index.ts

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 
 function emit(target: WechatMiniprogram.Component.TrivialInstance, value: boolean | any[]) {
   target.$emit('input', value);
@@ -35,14 +34,10 @@ VantComponent({
     },
     iconSize: {
       type: null,
-      observer: 'setSizeWithUnit'
+      value: 20
     }
   },
 
-  data: {
-    sizeWithUnit: '20px'
-  },
-
   methods: {
     emitChange(value: boolean) {
       if (this.parent) {
@@ -87,12 +82,6 @@ VantComponent({
           emit(parent, parentValue);
         }
       }
-    },
-
-    setSizeWithUnit(size: string | number): void {
-      this.set({
-        sizeWithUnit: addUnit(size)
-      });
-    },
+    }
   }
 });

packages/checkbox/index.wxml

@@ -8,7 +8,7 @@
       name="success"
       size="0.8em"
       class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
-      style="font-size: {{ sizeWithUnit }};{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
+      style="font-size: {{ utils.addUnit(iconSize) }};{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
       custom-style="line-height: 1.25em;"
     />

packages/dialog/index.ts

@@ -1,7 +1,6 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
-import { addUnit } from '../common/utils';
 import { GRAY, BLUE } from '../common/color';
 
 type Action = 'confirm' | 'cancel' | 'overlay';
@@ -23,10 +22,7 @@ VantComponent({
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,
-    width: {
-      type: null,
-      observer: 'setWidthWithUnit'
-    },
+    width: null,
     zIndex: {
       type: Number,
       value: 2000
@@ -125,12 +121,6 @@ VantComponent({
       if (callback) {
         callback(this);
       }
-    },
-
-    setWidthWithUnit(val) {
-      this.setData({
-        widthWithUnit: addUnit(val)
-      });
     }
   }
 });

packages/dialog/index.wxml

@@ -1,10 +1,12 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-popup
   show="{{ show }}"
   z-index="{{ zIndex }}"
   overlay="{{ overlay }}"
   transition="{{ transition }}"
   custom-class="van-dialog {{ className }}"
-  custom-style="{{ widthWithUnit ? 'width: ' + widthWithUnit + ';' : '' }}{{ customStyle }}"
+  custom-style="width: {{ utils.addUnit(width) }};{{ customStyle }}"
   overlay-style="{{ overlayStyle }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClickOverlay"

packages/icon/index.ts

@@ -1,14 +1,10 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
     dot: Boolean,
     info: null,
-    size: {
-      type: null,
-      observer: 'setSizeWithUnit'
-    },
+    size: null,
     color: String,
     customStyle: String,
     classPrefix: {
@@ -25,19 +21,9 @@ VantComponent({
     }
   },
 
-  data: {
-    sizeWithUnit: null,
-  },
-
   methods: {
     onClick() {
       this.$emit('click');
-    },
-
-    setSizeWithUnit(size: string | number): void {
-      this.setData({
-        sizeWithUnit: addUnit(size)
-      });
     }
   }
 });

packages/icon/index.wxml

@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="custom-class {{ classPrefix }} {{ isImageName ? 'van-icon--image' : classPrefix + '-' + name }}"
-  style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + sizeWithUnit + ';' : '' }}{{ customStyle }}"
+  style="color: {{ color }};font-size: {{ utils.addUnit(size) }};{{ customStyle }}"
   bind:tap="onClick"
 >
   <van-info

packages/loading/index.ts

@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
@@ -9,27 +8,7 @@ VantComponent({
       type: String,
       value: 'circular'
     },
-    size: {
-      type: String,
-      observer: 'setSizeWithUnit'
-    },
-    textSize: {
-      type: String,
-      observer: 'setTextSizeWithUnit'
-    }
-  },
-
-  methods: {
-    setSizeWithUnit(size: string | number): void {
-      this.setData({
-        sizeWithUnit: addUnit(size)
-      });
-    },
-
-    setTextSizeWithUnit(size: string | number): void {
-      this.set({
-        textSizeWithUnit: addUnit(size)
-      });
-    }
+    size: String,
+    textSize: String
   }
 });

packages/loading/index.wxml

@@ -1,7 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="custom-class van-loading {{ vertical ? 'van-loading--vertical' : '' }}">
   <view
     class="van-loading__spinner van-loading__spinner--{{ type }}"
-    style="color: {{ color }}; width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
+    style="color: {{ color }}; width: {{ utils.addUnit(size) }}; height: {{ utils.addUnit(size) }}"
   >
     <view
       wx:if="{{ type === 'spinner' }}"
@@ -10,7 +12,7 @@
       class="van-loading__dot"
     />
   </view>
-  <view class="van-loading__text" style="font-size: {{ textSizeWithUnit }};">
+  <view class="van-loading__text" style="font-size: {{ utils.addUnit(textSize) }};">
     <slot />
   </view>
 </view>

packages/progress/index.ts

@@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { BLUE } from '../common/color';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
@@ -23,19 +22,7 @@ VantComponent({
     },
     strokeWidth: {
       type: null,
-      observer: 'setStrokeWidthUnit'
-    }
-  },
-
-  data: {
-    strokeWidthUnit: '4px'
-  },
-
-  methods: {
-    setStrokeWidthUnit(val) {
-      this.setData({
-        strokeWidthUnit: addUnit(val)
-      });
+      value: 4
     }
   }
 });

packages/progress/index.wxml

@@ -1,8 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
 <wxs src="./index.wxs" module="getters" />
 
 <view
   class="van-progress custom-class"
-  style="height: {{ strokeWidthUnit }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
+  style="height: {{ utils.addUnit(strokeWidth) }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
 >
   <view
     class="van-progress__portion"

packages/radio/index.ts

@@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   field: true,
@@ -34,21 +33,11 @@ VantComponent({
     },
     iconSize: {
       type: null,
-      observer: 'setIconSizeUnit'
+      value: 20
     }
   },
 
-  data: {
-    iconSizeWithUnit: '20px'
-  },
-
   methods: {
-    setIconSizeUnit(val) {
-      this.setData({
-        iconSizeWithUnit: addUnit(val)
-      });
-    },
-
     emitChange(value: boolean) {
       const instance = this.parent || this;
       instance.$emit('input', value);

packages/radio/index.wxml

@@ -8,15 +8,15 @@
   >
     <slot />
   </view>
-  <view class="van-radio__icon-wrap" style="font-size: {{ iconSizeWithUnit }};" bindtap="onChange">
+  <view class="van-radio__icon-wrap" style="font-size: {{ utils.addUnit(iconSize) }};" bindtap="onChange">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <van-icon
       wx:else
       name="success"
       class="{{ utils.bem('radio__icon', [shape, { disabled, checked: value === name }]) }}"
       style="{{ checkedColor && !disabled && value === name ? 'border-color:' + checkedColor + '; background-color:' + checkedColor + ';' : '' }}"
       custom-class="icon-class"
-      custom-style="line-height: {{ iconSizeWithUnit }};font-size: .8em;display: block;"
+      custom-style="line-height: {{ utils.addUnit(iconSize) }};font-size: .8em;display: block;"
     />
   </view>
   <view

packages/rate/index.ts

@@ -1,21 +1,24 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   field: true,
 
   classes: ['icon-class'],
 
   props: {
-    value: Number,
+    value: {
+      type: Number,
+      observer(value: number) {
+        if (value !== this.data.innerValue) {
+          this.setData({ innerValue: value });
+        }
+      }
+    },
     readonly: Boolean,
     disabled: Boolean,
     allowHalf: Boolean,
-    size: {
-      type: null,
-      observer: 'setSizeWithUnit'
-    },
+    size: null,
     icon: {
       type: String,
       value: 'star'
@@ -40,42 +43,18 @@ VantComponent({
       type: Number,
       value: 5
     },
-    gutter: {
-      type: null,
-      observer: 'setGutterWithUnit'
-    },
+    gutter: null,
     touchable: {
       type: Boolean,
       value: true
     }
   },
 
   data: {
-    innerValue: 0,
-    gutterWithUnit: undefined,
-    sizeWithUnit: null
-  },
-
-  watch: {
-    value(value: number) {
-      if (value !== this.data.innerValue) {
-        this.setData({ innerValue: value });
-      }
-    }
+    innerValue: 0
   },
 
   methods: {
-    setGutterWithUnit(val) {
-      this.setData({
-        gutterWithUnit: addUnit(val)
-      });
-    },
-    setSizeWithUnit(size: string | number): void {
-      this.setData({
-        sizeWithUnit: addUnit(size)
-      });
-    },
-
     onSelect(event: Weapp.Event) {
       const { data } = this;
       const { score } = event.currentTarget.dataset;

packages/rate/index.wxml

@@ -8,12 +8,12 @@
     class="van-rate__item"
     wx:for="{{ count }}"
     wx:key="index"
-    style="padding-right: {{ index !== count - 1 ? gutterWithUnit : '' }}"
+    style="padding-right: {{ index !== count - 1 ? utils.addUnit(gutter) : '' }}"
   >
     <van-icon
       name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
       class="van-rate__icon"
-      style="font-size :{{ size? sizeWithUnit : ''}}"
+      style="font-size: {{ utils.addUnit(size) }}"
       custom-class="icon-class"
       data-score="{{ index }}"
       color="{{ disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor }}"
@@ -24,7 +24,7 @@
       wx:if="{{ allowHalf }}"
       name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
       class="{{ utils.bem('rate__icon', ['half']) }}"
-      style="font-size :{{ size? sizeWithUnit : ''}}"
+      style="font-size: {{ utils.addUnit(size) }}"
       custom-class="icon-class"
       data-score="{{ index - 0.5 }}"
       color="{{ disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor }}"