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,7 +8,7 @@
   >
     <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
@@ -16,7 +16,7 @@
       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,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   field: true,
@@ -8,14 +7,18 @@ VantComponent({
   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,10 +43,7 @@ VantComponent({
       type: Number,
       value: 5
     },
-    gutter: {
-      type: null,
-      observer: 'setGutterWithUnit'
-    },
+    gutter: null,
     touchable: {
       type: Boolean,
       value: true
@@ -51,31 +51,10 @@ VantComponent({
   },
 
   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 }}"

packages/tree-select/index.ts

@@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { Weapp } from 'definitions/weapp';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   classes: [
@@ -25,8 +24,7 @@ VantComponent({
     },
     height: {
       type: [Number, String],
-      value: 300,
-      observer: 'updateHeight'
+      value: 300
     },
     max: {
       type: Number,
@@ -38,10 +36,6 @@ VantComponent({
     subItems: []
   },
 
-  created() {
-    this.updateHeight();
-  },
-
   methods: {
     // 当一个子项被选择时
     onSelectItem(event: Weapp.Event) {
@@ -74,12 +68,6 @@ VantComponent({
       const { children = [] } = items[mainActiveIndex] || {};
 
       return this.set({ subItems: children });
-    },
-
-    updateHeight() {
-      this.setData({
-        innerHeight: addUnit(this.data.height)
-      });
     }
   }
 });

packages/tree-select/index.wxml

@@ -3,7 +3,7 @@
 
 <view
   class="van-tree-select"
-  style="height: {{ innerHeight }}"
+  style="height: {{ utils.addUnit(height) }}"
 >
   <scroll-view scroll-y class="van-tree-select__nav">
     <van-sidebar active-key="{{ mainActiveIndex }}" bind:change="onClickNav" custom-class="van-tree-select__nav__inner">

packages/uploader/index.ts

@@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { isImageFile } from './utils';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
@@ -11,8 +10,7 @@ VantComponent({
     useBeforeRead: Boolean,
     previewSize: {
       type: null,
-      value: 90,
-      observer: 'setComputedPreviewSize'
+      value: 90
     },
     name: {
       type: [Number, String],
@@ -70,12 +68,6 @@ VantComponent({
       this.setData({ lists, isInCount: lists.length < maxCount });
     },
 
-    setComputedPreviewSize(val) {
-      this.setData({
-        computedPreviewSize: addUnit(val)
-      });
-    },
-
     startUpload() {
       if (this.data.disabled) return;
       const {

packages/uploader/index.wxml

@@ -15,14 +15,14 @@
         src="{{ item.url || item.path }}"
         alt="{{ item.name || ('图片' + index) }}"
         class="van-uploader__preview-image"
-        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
         data-url="{{ item.url || item.path }}"
         bind:tap="doPreviewImage"
       />
       <view
         wx:else
         class="van-uploader__file"
-        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
       >
         <van-icon name="description" class="van-uploader__file-icon" />
         <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
@@ -46,7 +46,7 @@
       <view
         wx:else
         class="van-uploader__upload"
-        style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
+        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
         bind:tap="startUpload"
       >
         <van-icon name="plus" class="van-uploader__upload-icon" />

packages/wxs/add-unit.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var REGEXP = getRegExp('^\d+(\.\d+)?$');
+
+function addUnit(value) {
+  if (value == null) {
+    return undefined;
+  }
+
+  return REGEXP.test('' + value) ? value + 'px' : value;
+}
+
+module.exports = {
+  addUnit: addUnit
+};

packages/wxs/utils.wxs

@@ -1,7 +1,10 @@
+/* eslint-disable */
 var bem = require('./bem.wxs').bem;
 var memoize = require('./memoize.wxs').memoize;
+var addUnit = require('./add-unit.wxs').addUnit;
 
 module.exports = {
   bem: memoize(bem),
-  memoize: memoize
+  memoize: memoize,
+  addUnit: addUnit
 };