From 874d2f79cada00f605e93cae4fe309053ea0b7b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=95=8F?= <cookfront@gmail.com>
Date: Sun, 27 Jan 2019 08:21:18 +0800
Subject: [PATCH] [improvement] Tag and Uploader: jsx (#2627)

---
 packages/tag/{index.vue => index.js}          | 49 ++++++++++---------
 packages/uploader/{index.vue => index.js}     | 45 +++++++++--------
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 3 files changed, 54 insertions(+), 44 deletions(-)
 rename packages/tag/{index.vue => index.js} (61%)
 rename packages/uploader/{index.vue => index.js} (79%)

diff --git a/packages/tag/index.vue b/packages/tag/index.js
similarity index 61%
rename from packages/tag/index.vue
rename to packages/tag/index.js
index c17265414..c44dca03e 100644
--- a/packages/tag/index.vue
+++ b/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>
diff --git a/packages/uploader/index.vue b/packages/uploader/index.js
similarity index 79%
rename from packages/uploader/index.vue
rename to packages/uploader/index.js
index e6a0d28ff..d7986be7d 100644
--- a/packages/uploader/index.vue
+++ b/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>
diff --git a/packages/uploader/test/__snapshots__/demo.spec.js.snap b/packages/uploader/test/__snapshots__/demo.spec.js.snap
index 48c555948..763ce1988 100644
--- a/packages/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/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>