[improvement] Tag and Uploader: jsx (#2627)

packages/tag/index.js

@@ -1,32 +1,15 @@
-<template>
-  <span
-    :class="[b({
-      mark,
-      plain,
-      round,
-      [size]: size
-    }), {
-      'van-hairline--surround': plain
-    }]"
-    :style="style"
-  >
-    <slot />
-  </span>
-</template>
-
-<script>
-import create from '../utils/create';
+import { use } from '../utils';
 import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
+const [sfc, bem] = use('tag');
+
 const COLOR_MAP = {
   danger: RED,
   primary: BLUE,
   success: GREEN
 };
 
-export default create({
-  name: 'tag',
-
+export default sfc({
   props: {
     size: String,
     type: String,
@@ -49,6 +32,28 @@ export default create({
 
       return style;
     }
+  },
+
+  render(h) {
+    const {
+      mark,
+      plain,
+      round,
+      size
+    } = this;
+
+    return (
+      <span
+        class={[
+          bem({ mark, plain, round, [size]: size }),
+          {
+            'van-hairline--surround': plain
+          }
+        ]}
+        style={this.style}
+      >
+        {this.$slots.default}
+      </span>
+    );
   }
 });
-</script>

packages/uploader/index.js

@@ -1,24 +1,8 @@
-<template>
-  <div :class="b()">
-    <slot />
-    <input
-      v-bind="$attrs"
-      ref="input"
-      type="file"
-      :class="b('input')"
-      :accept="accept"
-      :disabled="disabled"
-      @change="onChange"
-    >
-  </div>
-</template>
+import { use } from '../utils';
 
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'uploader',
+const [sfc, bem] = use('uploader');
 
+export default sfc({
   inheritAttrs: false,
 
   props: {
@@ -101,6 +85,27 @@ export default create({
         this.$refs.input && (this.$refs.input.value = '');
       }
     }
+  },
+
+  render(h) {
+    const {
+      accept,
+      disabled
+    } = this;
+
+    return (
+      <div class={bem()}>
+        {this.$slots.default}
+        <input
+          { ...{ attrs: this.$attrs } }
+          ref="input"
+          type="file"
+          accept={accept}
+          class={bem('input')}
+          disabled={disabled}
+          onChange={this.onChange}
+        />
+      </div>
+    );
   }
 });
-</script>

packages/uploader/test/__snapshots__/demo.spec.js.snap

@@ -5,13 +5,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="demo-uploader-container">
       <div class="van-uploader"><i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
-          <!----></i> <input type="file" accept="image/*" class="van-uploader__input"></div>
+          <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
     </div>
   </div>
   <div>
     <div class="demo-uploader-container">
       <div class="van-uploader"><i class="van-icon van-icon-photograph" style="color:undefined;font-size:undefined;">
-          <!----></i> <input type="file" accept="image/gif, image/jpeg" multiple="multiple" class="van-uploader__input"></div>
+          <!----></i><input multiple="multiple" type="file" accept="image/gif, image/jpeg" class="van-uploader__input"></div>
     </div>
   </div>
 </div>