[improvement] use component name (#2450)

packages/actionsheet/index.js

@@ -1,13 +1,12 @@
-import createSfc from '../utils/create';
-import createBem from '../utils/bem';
-import Popup from '../mixins/popup';
+import { use } from '../utils';
+import Icon from '../icon';
+import Loading from '../loading';
+import PopupMixin from '../mixins/popup';
 
-const bem = createBem('van-actionsheet');
+const [sfc, bem] = use('actionsheet');
 
-export default createSfc({
-  name: 'actionsheet',
-
-  mixins: [Popup],
+export default sfc({
+  mixins: [PopupMixin],
 
   props: {
     title: String,
@@ -53,7 +52,7 @@ export default createSfc({
     const Header = () => (
       <div class={[bem('header'), 'van-hairline--top-bottom']}>
         {title}
-        <icon name="close" onClick={onCancel} />
+        <Icon name="close" onClick={onCancel} />
       </div>
     );
 
@@ -69,7 +68,7 @@ export default createSfc({
         }}
       >
         {item.loading ? (
-          <loading class={bem('loading')} size="20px" />
+          <Loading class={bem('loading')} size="20px" />
         ) : (
           [
             <span class={bem('name')}>{item.name}</span>,

packages/area/index.js

@@ -1,10 +1,10 @@
-import createSfc from '../utils/create';
+import { use } from '../utils';
 import Picker from '../picker';
 import PickerMixin from '../mixins/picker';
 
-export default createSfc({
-  name: 'area',
+const [sfc, bem] = use('area');
 
+export default sfc({
   mixins: [PickerMixin],
 
   props: {
@@ -189,7 +189,7 @@ export default createSfc({
     return (
       <Picker
         ref="picker"
-        class="van-area"
+        class={bem()}
         show-toolbar
         value-key="name"
         title={this.title}

packages/badge-group/index.js

@@ -1,8 +1,8 @@
-import createSfc from '../utils/create';
+import { use } from '../utils';
 
-export default createSfc({
-  name: 'badge-group',
+const [sfc, bem] = use('badge-group');
 
+export default sfc({
   props: {
     activeKey: {
       type: [Number, String],
@@ -23,6 +23,6 @@ export default createSfc({
   },
 
   render(h) {
-    return <div class="van-hairline--top-bottom van-badge-group">{this.$slots.default}</div>;
+    return <div class={[bem(), 'van-hairline--top-bottom']}>{this.$slots.default}</div>;
   }
 });

packages/badge/index.js

@@ -1,12 +1,9 @@
+import { use } from '../utils';
 import Info from '../info';
-import createSfc from '../utils/create';
-import createBem from '../utils/bem';
 
-const bem = createBem('van-badge');
-
-export default createSfc({
-  name: 'badge',
+const [sfc, bem] = use('badge');
 
+export default sfc({
   props: {
     url: String,
     info: [String, Number],

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

@@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-hairline--top-bottom van-badge-group"><a class="van-badge van-badge--select van-hairline">
+    <div class="van-badge-group van-hairline--top-bottom"><a class="van-badge van-badge--select van-hairline">
         <div class="van-badge__text">标签名称
           <!---->
         </div>

packages/button/index.js

@@ -1,11 +1,9 @@
-import createSfc from '../utils/create';
-import createBem from '../utils/bem';
+import { use } from '../utils';
+import Loading from '../loading';
 
-const bem = createBem('van-button');
-
-export default createSfc({
-  name: 'button',
+const [sfc, bem] = use('button');
 
+export default sfc({
   props: {
     text: String,
     block: Boolean,
@@ -59,7 +57,7 @@ export default createSfc({
         onClick={this.onClick}
       >
         {this.loading ? (
-          <loading size="20px" color={this.type === 'default' ? undefined : ''} />
+          <Loading size="20px" color={this.type === 'default' ? undefined : ''} />
         ) : (
           <span class={bem('text')}>{this.$slots.default || this.text}</span>
         )}

packages/card/index.js

@@ -1,12 +1,9 @@
-import createSfc from '../utils/create';
-import createBem from '../utils/bem';
+import { use, isDef } from '../utils';
 import Tag from '../tag';
 
-const bem = createBem('van-card');
-
-export default createSfc({
-  name: 'card',
+const [sfc, bem] = use('card');
 
+export default sfc({
   props: {
     tag: String,
     desc: String,
@@ -25,7 +22,7 @@ export default createSfc({
   },
 
   render(h) {
-    const { thumb, isDef, $slots: slots } = this;
+    const { thumb, $slots: slots } = this;
 
     const Thumb = (slots.thumb || thumb) && (
       <a href={this.thumbLink} class={bem('thumb')}>

packages/cell-group/index.js

@@ -1,8 +1,8 @@
-import createSfc from '../utils/create-basic';
+import { use } from '../utils';
 
-export default createSfc({
-  name: 'cell-group',
+const [sfc, bem] = use('cell-group');
 
+export default sfc({
   props: {
     border: {
       type: Boolean,
@@ -12,7 +12,7 @@ export default createSfc({
 
   render(h) {
     return (
-      <div class={['van-cell-group', { 'van-hairline--top-bottom': this.border }]}>
+      <div class={[bem(), { 'van-hairline--top-bottom': this.border }]}>
         {this.$slots.default}
       </div>
     );

packages/utils/create-basic.js

@@ -1,46 +1,18 @@
 /**
  * Create a basic component with common options
  */
-import '../locale';
-import createBem from './bem';
+import useSfc from './use/sfc';
+import useBem from './use/bem';
 import i18n from '../mixins/i18n';
-import { isDef, camelize } from '.';
-
-function install(Vue) {
-  const { name } = this;
-  Vue.component(name, this);
-  Vue.component((camelize(`-${name}`)), this);
-}
-
-function returnArray() {
-  return [];
-}
-
-function defaultProps(props) {
-  Object.keys(props).forEach(key => {
-    if (props[key] === Array) {
-      props[key] = {
-        type: Array,
-        default: returnArray
-      };
-    } else if (props[key] === Number) {
-      props[key] = {
-        type: Number,
-        default: 0
-      };
-    }
-  });
-}
+import { isDef } from '.';
 
 export default function (sfc) {
-  sfc.name = 'van-' + sfc.name;
-  sfc.install = sfc.install || install;
+  sfc = useSfc('van-' + sfc.name)(sfc);
   sfc.mixins = sfc.mixins || [];
   sfc.mixins.push(i18n);
   sfc.methods = sfc.methods || {};
   sfc.methods.isDef = isDef;
-  sfc.methods.b = createBem(sfc.name);
-  sfc.props && defaultProps(sfc.props);
+  sfc.methods.b = useBem(sfc.name);
 
   return sfc;
 }

packages/utils/index.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import use from './use';
 
 const isServer = Vue.prototype.$isServer;
 
@@ -37,6 +38,7 @@ function range(num, min, max) {
 }
 
 export {
+  use,
   get,
   range,
   isObj,

packages/utils/use/index.js

@@ -0,0 +1,7 @@
+import useBem from './bem';
+import useSfc from './sfc';
+
+export default function (name) {
+  name = 'van-' + name;
+  return [useSfc(name), useBem(name)];
+}

packages/utils/use/sfc.js

@@ -0,0 +1,39 @@
+/**
+ * Create a basic component with common options
+ */
+import '../../locale';
+import { camelize } from '..';
+
+const arrayProp = {
+  type: Array,
+  default: () => []
+};
+
+const numberProp = {
+  type: Number,
+  default: 0
+};
+
+function defaultProps(props) {
+  Object.keys(props).forEach(key => {
+    if (props[key] === Array) {
+      props[key] = arrayProp;
+    } else if (props[key] === Number) {
+      props[key] = numberProp;
+    }
+  });
+}
+
+function install(Vue) {
+  const { name } = this;
+  Vue.component(name, this);
+  Vue.component((camelize(`-${name}`)), this);
+}
+
+export default name => sfc => {
+  sfc.name = name;
+  sfc.install = install;
+  sfc.props && defaultProps(sfc.props);
+
+  return sfc;
+};