[improvement] rename use to createNamespace (#3658)

packages/action-sheet/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
@@ -28,7 +28,7 @@ export type ActionSheetProps = PopupMixinProps & {
   safeAreaInsetBottom?: boolean;
 };
 
-const [sfc, bem] = use('action-sheet');
+const [createComponent, bem] = createNamespace('action-sheet');
 
 function ActionSheet(
   h: CreateElement,
@@ -155,4 +155,4 @@ ActionSheet.props = {
   }
 };
 
-export default sfc<ActionSheetProps>(ActionSheet);
+export default createComponent<ActionSheetProps>(ActionSheet);

packages/address-edit/Detail.js

@@ -1,12 +1,12 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { isAndroid } from '../utils/validate/system';
 import Cell from '../cell';
 import Field from '../field';
 
-const [sfc, bem, t] = use('address-edit-detail');
+const [createComponent, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
 
-export default sfc({
+export default createComponent({
   props: {
     value: String,
     error: Boolean,

packages/address-edit/index.js

@@ -1,4 +1,4 @@
-import { use, isObj } from '../utils';
+import { createNamespace, isObj } from '../utils';
 import { isMobile } from '../utils/validate/mobile';
 import Area from '../area';
 import Field from '../field';
@@ -9,7 +9,7 @@ import Dialog from '../dialog';
 import Detail from './Detail';
 import SwitchCell from '../switch-cell';
 
-const [sfc, bem, t] = use('address-edit');
+const [createComponent, bem, t] = createNamespace('address-edit');
 
 const defaultData = {
   name: '',
@@ -24,7 +24,7 @@ const defaultData = {
   isDefault: false
 };
 
-export default sfc({
+export default createComponent({
   props: {
     areaList: Object,
     isSaving: Boolean,

packages/address-list/Item.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { RED } from '../utils/color';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
@@ -27,7 +27,7 @@ export type AddressItemEvents = {
   onSelect(): void;
 };
 
-const [sfc, bem] = use('address-item');
+const [createComponent, bem] = createNamespace('address-item');
 
 function AddressItem(
   h: CreateElement,
@@ -91,4 +91,4 @@ AddressItem.props = {
   switchable: Boolean
 };
 
-export default sfc<AddressItemProps, AddressItemEvents>(AddressItem);
+export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem);

packages/address-list/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Button from '../button';
 import RadioGroup from '../radio-group';
@@ -21,7 +21,7 @@ export type AddressListSlots = DefaultSlots & {
   top?: ScopedSlot;
 };
 
-const [sfc, bem, t] = use('address-list');
+const [createComponent, bem, t] = createNamespace('address-list');
 
 function AddressList(
   h: CreateElement,
@@ -90,4 +90,4 @@ AddressList.props = {
   }
 };
 
-export default sfc<AddressListProps>(AddressList);
+export default createComponent<AddressListProps>(AddressList);

packages/area/index.js

@@ -1,10 +1,10 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Picker from '../picker';
 import { pickerProps } from '../picker/shared';
 
-const [sfc, bem] = use('area');
+const [createComponent, bem] = createNamespace('area');
 
-export default sfc({
+export default createComponent({
   props: {
     ...pickerProps,
     value: String,

packages/button/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
 import Icon from '../icon';
@@ -35,7 +35,7 @@ export type ButtonEvents = {
   onClick?(event: Event): void;
 };
 
-const [sfc, bem] = use('button');
+const [createComponent, bem] = createNamespace('button');
 
 function Button(
   h: CreateElement,
@@ -148,4 +148,4 @@ Button.props = {
   }
 };
 
-export default sfc<ButtonProps, ButtonEvents>(Button);
+export default createComponent<ButtonProps, ButtonEvents>(Button);

packages/card/index.tsx

@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Tag from '../tag';
 import Image from '../image';
@@ -38,7 +38,7 @@ export type CardEvents = {
   onClick?(event: Event): void;
 };
 
-const [sfc, bem] = use('card');
+const [createComponent, bem] = createNamespace('card');
 
 function Card(
   h: CreateElement,
@@ -187,4 +187,4 @@ Card.props = {
   }
 };
 
-export default sfc<CardProps, CardEvents>(Card);
+export default createComponent<CardProps, CardEvents>(Card);

packages/cell-group/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -10,7 +10,7 @@ export type CellGroupProps = {
   border: boolean
 };
 
-const [sfc, bem] = use('cell-group');
+const [createComponent, bem] = createNamespace('cell-group');
 
 function CellGroup(
   h: CreateElement,
@@ -47,4 +47,4 @@ CellGroup.props = {
   }
 };
 
-export default sfc<CellGroupProps>(CellGroup);
+export default createComponent<CellGroupProps>(CellGroup);

packages/cell/index.tsx

@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { cellProps, SharedCellProps } from './shared';
 import { emit, inherit } from '../utils/functional';
 import { routeProps, RouteProps, functionalRoute } from '../utils/router';
@@ -7,7 +7,7 @@ import Icon from '../icon';
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
 import { ScopedSlot, DefaultSlots } from '../utils/types';
-import { Mods } from '../utils/use/bem';
+import { Mods } from '../utils/create/bem';
 
 export type CellProps = RouteProps &
   SharedCellProps & {
@@ -26,7 +26,7 @@ export type CellEvents = {
   onClick?(event: Event): void;
 };
 
-const [sfc, bem] = use('cell');
+const [createComponent, bem] = createNamespace('cell');
 
 function Cell(
   h: CreateElement,
@@ -106,4 +106,4 @@ Cell.props = {
   arrowDirection: String
 };
 
-export default sfc<CellProps, CellEvents, CellSlots>(Cell);
+export default createComponent<CellProps, CellEvents, CellSlots>(Cell);

packages/checkbox-group/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('checkbox-group');
+const [createComponent, bem] = createNamespace('checkbox-group');
 
-export default sfc({
+export default createComponent({
   mixins: [ParentMixin('vanCheckbox')],
 
   props: {

packages/checkbox/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { CheckboxMixin } from '../mixins/checkbox';
 
-const [sfc, bem] = use('checkbox');
+const [createComponent, bem] = createNamespace('checkbox');
 
-export default sfc({
+export default createComponent({
   mixins: [CheckboxMixin({
     bem,
     role: 'checkbox',

packages/circle/index.js

@@ -1,8 +1,8 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { raf, cancelRaf } from '../utils/dom/raf';
 import { BLUE, WHITE } from '../utils/color';
 
-const [sfc, bem] = use('circle');
+const [createComponent, bem] = createNamespace('circle');
 const PERIMETER = 3140;
 const PATH = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
 
@@ -10,7 +10,7 @@ function format(rate) {
   return Math.min(Math.max(rate, 0), 100);
 }
 
-export default sfc({
+export default createComponent({
   props: {
     text: String,
     value: Number,

packages/col/index.js

@@ -1,8 +1,8 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 
-const [sfc, bem] = use('col');
+const [createComponent, bem] = createNamespace('col');
 
-export default sfc({
+export default createComponent({
   props: {
     span: [Number, String],
     offset: [Number, String],

packages/collapse-item/index.js

@@ -1,13 +1,13 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { raf } from '../utils/dom/raf';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { ChildrenMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('collapse-item');
+const [createComponent, bem] = createNamespace('collapse-item');
 const CELL_SLOTS = ['title', 'icon', 'right-icon'];
 
-export default sfc({
+export default createComponent({
   mixins: [ChildrenMixin('vanCollapse')],
 
   props: {

packages/collapse/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('collapse');
+const [createComponent, bem] = createNamespace('collapse');
 
-export default sfc({
+export default createComponent({
   mixins: [ParentMixin('vanCollapse')],
 
   props: {

packages/contact-card/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Cell from '../cell';
 
@@ -6,7 +6,7 @@ import Cell from '../cell';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
-const [sfc, bem, t] = use('contact-card');
+const [createComponent, bem, t] = createNamespace('contact-card');
 
 export type ContactCardProps = {
   tel?: string;
@@ -65,4 +65,4 @@ ContactCard.props = {
   }
 };
 
-export default sfc<ContactCardProps>(ContactCard);
+export default createComponent<ContactCardProps>(ContactCard);

packages/contact-edit/index.js

@@ -1,18 +1,18 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Button from '../button';
 import Field from '../field';
 import Toast from '../toast';
 import Dialog from '../dialog';
 import { isMobile } from '../utils/validate/mobile';
 
-const [sfc, bem, t] = use('contact-edit');
+const [createComponent, bem, t] = createNamespace('contact-edit');
 
 const defaultContact = {
   tel: '',
   name: ''
 };
 
-export default sfc({
+export default createComponent({
   props: {
     isEdit: Boolean,
     isSaving: Boolean,

packages/contact-list/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { RED } from '../utils/color';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
@@ -23,7 +23,7 @@ export type ContactListProps = {
   addText?: string;
 };
 
-const [sfc, bem, t] = use('contact-list');
+const [createComponent, bem, t] = createNamespace('contact-list');
 
 function ContactList(
   h: CreateElement,
@@ -90,4 +90,4 @@ ContactList.props = {
   addText: String
 };
 
-export default sfc(ContactList);
+export default createComponent(ContactList);

packages/coupon-cell/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
 import Cell from '../cell';
 
@@ -16,7 +16,7 @@ export type CouponCellProps = {
   chosenCoupon: number;
 };
 
-const [sfc, bem, t] = use('coupon-cell');
+const [createComponent, bem, t] = createNamespace('coupon-cell');
 
 function formatValue(props: CouponCellProps) {
   const { coupons, chosenCoupon, currency } = props;
@@ -79,4 +79,4 @@ CouponCell.props = {
   }
 };
 
-export default sfc<CouponCellProps>(CouponCell);
+export default createComponent<CouponCellProps>(CouponCell);

packages/coupon-list/index.js

@@ -1,14 +1,14 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Tab from '../tab';
 import Tabs from '../tabs';
 import Field from '../field';
 import Button from '../button';
 import Coupon from '../coupon';
 
-const [sfc, bem, t] = use('coupon-list');
+const [createComponent, bem, t] = createNamespace('coupon-list');
 const EMPTY_IMAGE = 'https://img.yzcdn.cn/vant/coupon-empty.png';
 
-export default sfc({
+export default createComponent({
   model: {
     prop: 'code'
   },

packages/coupon/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { RED } from '../utils/color';
 import { padZero } from '../utils/format/string';
 import Checkbox from '../checkbox';
 
-const [sfc, bem, t] = use('coupon');
+const [createComponent, bem, t] = createNamespace('coupon');
 
 function getDate(timeStamp) {
   const date = new Date(timeStamp * 1000);
@@ -20,7 +20,7 @@ function formatAmount(amount) {
   return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
 }
 
-export default sfc({
+export default createComponent({
   props: {
     coupon: Object,
     chosen: Boolean,

packages/datetime-picker/index.js

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { range } from '../utils/format/number';
 import { padZero } from '../utils/format/string';
 import Picker from '../picker';
@@ -10,10 +10,10 @@ import {
   getMonthEndDay
 } from './utils';
 
-const [sfc, bem] = use('datetime-picker');
+const [createComponent, bem] = createNamespace('datetime-picker');
 const currentYear = new Date().getFullYear();
 
-export default sfc({
+export default createComponent({
   props: {
     ...pickerProps,
     value: null,

packages/dialog/Dialog.js

@@ -1,10 +1,10 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 import Button from '../button';
 
-const [sfc, bem, t] = use('dialog');
+const [createComponent, bem, t] = createNamespace('dialog');
 
-export default sfc({
+export default createComponent({
   mixins: [PopupMixin],
 
   props: {

packages/dropdown-item/index.js

@@ -1,12 +1,12 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Cell from '../cell';
 import Icon from '../icon';
 import Popup from '../popup';
 import { ChildrenMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('dropdown-item');
+const [createComponent, bem] = createNamespace('dropdown-item');
 
-export default sfc({
+export default createComponent({
   mixins: [ChildrenMixin('vanDropdownMenu')],
 
   props: {

packages/dropdown-menu/index.js

@@ -1,11 +1,11 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { BLUE } from '../utils/color';
 import { ParentMixin } from '../mixins/relation';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
-const [sfc, bem] = use('dropdown-menu');
+const [createComponent, bem] = createNamespace('dropdown-menu');
 
-export default sfc({
+export default createComponent({
   mixins: [
     ParentMixin('vanDropdownMenu'),
     ClickOutsideMixin({

packages/field/index.js

@@ -3,12 +3,12 @@ import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { preventDefault } from '../utils/dom/event';
 import { getRootScrollTop } from '../utils/dom/scroll';
-import { use, isObj, isDef, suffixPx } from '../utils';
+import { createNamespace, isObj, isDef, suffixPx } from '../utils';
 import { isIOS } from '../utils/validate/system';
 
-const [sfc, bem] = use('field');
+const [createComponent, bem] = createNamespace('field');
 
-export default sfc({
+export default createComponent({
   inheritAttrs: false,
 
   props: {

packages/goods-action-button/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Button, { ButtonType, ButtonEvents } from '../button';
 import { emit, inherit } from '../utils/functional';
 import { functionalRoute, routeProps, RouteProps } from '../utils/router';
@@ -15,7 +15,7 @@ export type GoodsActionButtonProps = RouteProps & {
   disabled?: boolean;
 };
 
-const [sfc, bem] = use('goods-action-button');
+const [createComponent, bem] = createNamespace('goods-action-button');
 
 function GoodsActionButton(
   h: CreateElement,
@@ -52,4 +52,4 @@ GoodsActionButton.props = {
   disabled: Boolean
 };
 
-export default sfc<GoodsActionButtonProps, ButtonEvents>(GoodsActionButton);
+export default createComponent<GoodsActionButtonProps, ButtonEvents>(GoodsActionButton);

packages/goods-action-icon/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Icon, { IconEvents } from '../icon';
 import { emit, inherit } from '../utils/functional';
 import { functionalRoute, routeProps, RouteProps } from '../utils/router';
@@ -14,7 +14,7 @@ export type GoodsActionIconProps = RouteProps & {
   iconClass?: any;
 };
 
-const [sfc, bem] = use('goods-action-icon');
+const [createComponent, bem] = createNamespace('goods-action-icon');
 
 function GoodsActionIcon(
   h: CreateElement,
@@ -54,4 +54,4 @@ GoodsActionIcon.props = {
   iconClass: null as any
 };
 
-export default sfc<GoodsActionIconProps, IconEvents>(GoodsActionIcon);
+export default createComponent<GoodsActionIconProps, IconEvents>(GoodsActionIcon);

packages/goods-action/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -9,7 +9,7 @@ export type GoodsActionProps = {
   safeAreaInsetBottom?: boolean;
 };
 
-const [sfc, bem] = use('goods-action');
+const [createComponent, bem] = createNamespace('goods-action');
 
 function GoodsAction(
   h: CreateElement,
@@ -31,4 +31,4 @@ GoodsAction.props = {
   safeAreaInsetBottom: Boolean
 };
 
-export default sfc<GoodsActionProps>(GoodsAction);
+export default createComponent<GoodsActionProps>(GoodsAction);

packages/icon/index.tsx

@@ -1,4 +1,4 @@
-import { use, suffixPx } from '../utils';
+import { createNamespace, suffixPx } from '../utils';
 import { inherit } from '../utils/functional';
 import Info from '../info';
 import Image from '../image';
@@ -20,7 +20,7 @@ export type IconEvents = {
   onClick?(event: Event): void;
 };
 
-const [sfc, bem] = use('icon');
+const [createComponent, bem] = createNamespace('icon');
 
 function isImage(name?: string): boolean {
   return name ? name.indexOf('/') !== -1 : false;
@@ -65,4 +65,4 @@ Icon.props = {
   }
 };
 
-export default sfc<IconProps, IconEvents>(Icon);
+export default createComponent<IconProps, IconEvents>(Icon);

packages/image-preview/ImagePreview.js

@@ -1,4 +1,4 @@
-import { use, isServer } from '../utils';
+import { createNamespace, isServer } from '../utils';
 import { range } from '../utils/format/number';
 import { preventDefault } from '../utils/dom/event';
 import { PopupMixin } from '../mixins/popup';
@@ -6,7 +6,7 @@ import { TouchMixin } from '../mixins/touch';
 import Swipe from '../swipe';
 import SwipeItem from '../swipe-item';
 
-const [sfc, bem] = use('image-preview');
+const [createComponent, bem] = createNamespace('image-preview');
 
 function getDistance(touches) {
   return Math.sqrt(
@@ -17,7 +17,7 @@ function getDistance(touches) {
   );
 }
 
-export default sfc({
+export default createComponent({
   mixins: [PopupMixin, TouchMixin],
 
   props: {

packages/image/index.js

@@ -1,9 +1,9 @@
-import { use, isDef, suffixPx } from '../utils';
+import { createNamespace, isDef, suffixPx } from '../utils';
 import Icon from '../icon';
 
-const [sfc, bem] = use('image');
+const [createComponent, bem] = createNamespace('image');
 
-export default sfc({
+export default createComponent({
   props: {
     src: String,
     fit: String,

packages/index-anchor/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('index-anchor');
+const [createComponent, bem] = createNamespace('index-anchor');
 
-export default sfc({
+export default createComponent({
   mixins: [ChildrenMixin('vanIndexBar', { indexKey: 'childrenIndex' })],
 
   props: {

packages/index-bar/index.js

@@ -1,13 +1,13 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
 import { GREEN } from '../utils/color';
 import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/dom/scroll';
 
-const [sfc, bem] = use('index-bar');
+const [createComponent, bem] = createNamespace('index-bar');
 
-export default sfc({
+export default createComponent({
   mixins: [
     TouchMixin,
     ParentMixin('vanIndexBar'),

packages/info/index.tsx

@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -9,7 +9,7 @@ export type InfoProps = {
   info?: string | number;
 };
 
-const [sfc, bem] = use('info');
+const [createComponent, bem] = createNamespace('info');
 
 function Info(
   h: CreateElement,
@@ -32,4 +32,4 @@ Info.props = {
   info: [String, Number]
 };
 
-export default sfc<InfoProps>(Info);
+export default createComponent<InfoProps>(Info);

packages/list/index.js

@@ -1,11 +1,11 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Loading from '../loading';
 import { BindEventMixin } from '../mixins/bind-event';
 import { getScrollEventTarget } from '../utils/dom/scroll';
 
-const [sfc, bem, t] = use('list');
+const [createComponent, bem, t] = createNamespace('list');
 
-export default sfc({
+export default createComponent({
   mixins: [
     BindEventMixin(function (bind) {
       if (!this.scroller) {

packages/loading/index.tsx

@@ -1,4 +1,4 @@
-import { use, suffixPx } from '../utils';
+import { createNamespace, suffixPx } from '../utils';
 import { GRAY } from '../utils/color';
 import { inherit } from '../utils/functional';
 
@@ -16,7 +16,7 @@ export type LoadingProps = {
   textSize?: string | number;
 };
 
-const [sfc, bem] = use('loading');
+const [createComponent, bem] = createNamespace('loading');
 
 function LoadingIcon(h: CreateElement, props: LoadingProps) {
   if (props.type === 'spinner') {
@@ -87,4 +87,4 @@ Loading.props = {
   }
 };
 
-export default sfc<LoadingProps>(Loading);
+export default createComponent<LoadingProps>(Loading);

packages/nav-bar/index.tsx

@@ -1,4 +1,4 @@
-import { use, noop } from '../utils';
+import { createNamespace, noop } from '../utils';
 import { inherit } from '../utils/functional';
 import Icon from '../icon';
 
@@ -27,7 +27,7 @@ export type NavBarEvents = {
   'click-right'?(event: Event): void;
 };
 
-const [sfc, bem] = use('nav-bar');
+const [createComponent, bem] = createNamespace('nav-bar');
 
 function NavBar(
   h: CreateElement,
@@ -86,4 +86,4 @@ NavBar.props = {
   }
 };
 
-export default sfc<NavBarProps, NavBarEvents>(NavBar);
+export default createComponent<NavBarProps, NavBarEvents>(NavBar);

packages/notice-bar/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Icon from '../icon';
 
-const [sfc, bem] = use('notice-bar');
+const [createComponent, bem] = createNamespace('notice-bar');
 
-export default sfc({
+export default createComponent({
   props: {
     text: String,
     mode: String,

packages/notify/Notify.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { RED, WHITE } from '../utils/color';
 import { inherit } from '../utils/functional';
 import { PopupMixin } from '../mixins/popup';
@@ -17,7 +17,7 @@ export type NotifyProps = PopupMixinProps & {
   background: string;
 };
 
-const [sfc, bem] = use('notify');
+const [createComponent, bem] = createNamespace('notify');
 
 function Notify(
   h: CreateElement,
@@ -64,4 +64,4 @@ Notify.props = {
   }
 };
 
-export default sfc<NotifyProps>(Notify);
+export default createComponent<NotifyProps>(Notify);

packages/number-keyboard/Key.js

@@ -1,8 +1,8 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 
-const [sfc, bem] = use('key');
+const [createComponent, bem] = createNamespace('key');
 
-export default sfc({
+export default createComponent({
   props: {
     type: String,
     theme: Array,

packages/number-keyboard/index.js

@@ -1,13 +1,13 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { stopPropagation } from '../utils/dom/event';
 import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';
 
-const [sfc, bem, t] = use('number-keyboard');
+const [createComponent, bem, t] = createNamespace('number-keyboard');
 const CLOSE_KEY_THEME = ['blue', 'big'];
 const DELETE_KEY_THEME = ['delete', 'big', 'gray'];
 
-export default sfc({
+export default createComponent({
   mixins: [
     BindEventMixin(function (bind) {
       if (this.hideOnClickOutside) {

packages/overlay/index.tsx

@@ -1,4 +1,4 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { inherit } from '../utils/functional';
 import { preventDefault } from '../utils/dom/event';
 
@@ -18,7 +18,7 @@ export type OverlayEvents = {
   click(event: Event): void;
 };
 
-const [sfc, bem] = use('overlay');
+const [createComponent, bem] = createNamespace('overlay');
 
 function preventTouchMove(event: TouchEvent) {
   preventDefault(event, true);
@@ -63,4 +63,4 @@ Overlay.props = {
   }
 };
 
-export default sfc<OverlayProps, OverlayEvents>(Overlay);
+export default createComponent<OverlayProps, OverlayEvents>(Overlay);

packages/pagination/index.js

@@ -1,12 +1,12 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 
-const [sfc, bem, t] = use('pagination');
+const [createComponent, bem, t] = createNamespace('pagination');
 
 function makePage(number, text, active) {
   return { number, text, active };
 }
 
-export default sfc({
+export default createComponent({
   props: {
     value: Number,
     prevText: String,

packages/panel/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Cell from '../cell';
 import CellGroup from '../cell-group';
 import { inherit } from '../utils/functional';
@@ -19,7 +19,7 @@ export type PanelSlots = DefaultSlots & {
   footer?: ScopedSlot;
 };
 
-const [sfc, bem] = use('panel');
+const [createComponent, bem] = createNamespace('panel');
 
 function Panel(
   h: CreateElement,
@@ -62,4 +62,4 @@ Panel.props = {
   status: String
 };
 
-export default sfc<PanelProps>(Panel);
+export default createComponent<PanelProps>(Panel);

packages/password-input/index.tsx

@@ -1,4 +1,4 @@
-import { use, suffixPx } from '../utils';
+import { createNamespace, suffixPx } from '../utils';
 import { emit, inherit } from '../utils/functional';
 
 // Types
@@ -14,7 +14,7 @@ export type PasswordInputProps = {
   errorInfo?: string;
 };
 
-const [sfc, bem] = use('password-input');
+const [createComponent, bem] = createNamespace('password-input');
 
 function PasswordInput(
   h: CreateElement,
@@ -76,4 +76,4 @@ PasswordInput.props = {
   }
 };
 
-export default sfc<PasswordInputProps>(PasswordInput);
+export default createComponent<PasswordInputProps>(PasswordInput);

packages/picker/PickerColumn.js

@@ -1,5 +1,5 @@
 import { deepClone } from '../utils/deep-clone';
-import { use, isObj } from '../utils';
+import { createNamespace, isObj } from '../utils';
 import { range } from '../utils/format/number';
 import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
@@ -13,7 +13,7 @@ const MOMENTUM_DURATION = 1000;
 const MOMENTUM_LIMIT_TIME = 300;
 const MOMENTUM_LIMIT_DISTANCE = 15;
 
-const [sfc, bem] = use('picker-column');
+const [createComponent, bem] = createNamespace('picker-column');
 
 function getElementTranslateY(element) {
   const { transform } = window.getComputedStyle(element);
@@ -26,7 +26,7 @@ function isOptionDisabled(option) {
   return isObj(option) && option.disabled;
 }
 
-export default sfc({
+export default createComponent({
   mixins: [TouchMixin],
 
   props: {

packages/picker/index.js

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
@@ -6,9 +6,9 @@ import { BLUE } from '../utils/color';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
 
-const [sfc, bem, t] = use('picker');
+const [createComponent, bem, t] = createNamespace('picker');
 
-export default sfc({
+export default createComponent({
   props: {
     ...pickerProps,
     columns: Array,

packages/popup/index.js

@@ -1,9 +1,9 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 
-const [sfc, bem] = use('popup');
+const [createComponent, bem] = createNamespace('popup');
 
-export default sfc({
+export default createComponent({
   mixins: [PopupMixin],
 
   props: {

packages/progress/index.js

@@ -1,9 +1,9 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { BLUE, WHITE } from '../utils/color';
 
-const [sfc, bem] = use('progress');
+const [createComponent, bem] = createNamespace('progress');
 
-export default sfc({
+export default createComponent({
   props: {
     inactive: Boolean,
     pivotText: String,

packages/pull-refresh/index.js

@@ -1,13 +1,13 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 import { getScrollTop, getScrollEventTarget } from '../utils/dom/scroll';
 import Loading from '../loading';
 
-const [sfc, bem, t] = use('pull-refresh');
+const [createComponent, bem, t] = createNamespace('pull-refresh');
 const TEXT_STATUS = ['pulling', 'loosing', 'success'];
 
-export default sfc({
+export default createComponent({
   mixins: [TouchMixin],
 
   props: {

packages/radio-group/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('radio-group');
+const [createComponent, bem] = createNamespace('radio-group');
 
-export default sfc({
+export default createComponent({
   mixins: [ParentMixin('vanRadio')],
 
   props: {

packages/radio/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { CheckboxMixin } from '../mixins/checkbox';
 
-const [sfc, bem] = use('radio');
+const [createComponent, bem] = createNamespace('radio');
 
-export default sfc({
+export default createComponent({
   mixins: [CheckboxMixin({
     bem,
     role: 'radio',

packages/rate/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable prefer-spread */
-import { use, suffixPx } from '../utils';
+import { createNamespace, suffixPx } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { preventDefault } from '../utils/dom/event';
 import Icon from '../icon';
@@ -8,7 +8,7 @@ import Icon from '../icon';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
-const [sfc, bem] = use('rate');
+const [createComponent, bem] = createNamespace('rate');
 
 export type RateProps = {
   size: number;
@@ -186,4 +186,4 @@ Rate.props = {
   }
 };
 
-export default sfc<RateProps, RateEvents>(Rate);
+export default createComponent<RateProps, RateEvents>(Rate);

packages/row/index.js

@@ -1,8 +1,8 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 
-const [sfc, bem] = use('row');
+const [createComponent, bem] = createNamespace('row');
 
-export default sfc({
+export default createComponent({
   props: {
     type: String,
     align: String,

packages/search/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { inherit, emit } from '../utils/functional';
 import { preventDefault } from '../utils/dom/event';
 import Field from '../field';
@@ -7,7 +7,7 @@ import Field from '../field';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots, ScopedSlot } from '../utils/types';
 
-const [sfc, bem, t] = use('search');
+const [createComponent, bem, t] = createNamespace('search');
 
 export type SearchProps = {
   shape: string;
@@ -134,4 +134,4 @@ Search.props = {
   }
 };
 
-export default sfc<SearchProps, SearchEvents, SearchSlots>(Search);
+export default createComponent<SearchProps, SearchEvents, SearchSlots>(Search);

packages/sidebar-item/index.js

@@ -1,10 +1,10 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Info from '../info';
 import { ChildrenMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('sidebar-item');
+const [createComponent, bem] = createNamespace('sidebar-item');
 
-export default sfc({
+export default createComponent({
   mixins: [ChildrenMixin('vanSidebar')],
 
   props: {

packages/sidebar/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('sidebar');
+const [createComponent, bem] = createNamespace('sidebar');
 
-export default sfc({
+export default createComponent({
   mixins: [ParentMixin('vanSidebar')],
 
   props: {

packages/skeleton/index.tsx

@@ -1,4 +1,4 @@
-import { use, suffixPx } from '../utils';
+import { createNamespace, suffixPx } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
@@ -17,7 +17,7 @@ export type SkeletonProps = {
   rowWidth: number | string | (number | string)[];
 };
 
-const [sfc, bem] = use('skeleton');
+const [createComponent, bem] = createNamespace('skeleton');
 const DEFAULT_ROW_WIDTH = '100%';
 const DEFAULT_LAST_ROW_WIDTH = '60%';
 
@@ -113,4 +113,4 @@ Skeleton.props = {
   }
 };
 
-export default sfc<SkeletonProps>(Skeleton);
+export default createComponent<SkeletonProps>(Skeleton);

packages/sku/Sku.js

@@ -9,14 +9,14 @@ import SkuRowItem from './components/SkuRowItem';
 import SkuStepper from './components/SkuStepper';
 import SkuMessages from './components/SkuMessages';
 import SkuActions from './components/SkuActions';
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { isAllSelected, isSkuChoosable, getSkuComb, getSelectedSkuValues } from './utils/skuHelper';
 import { LIMIT_TYPE, UNSELECTED_SKU_VALUE_ID } from './constants';
 
-const [sfc] = use('sku');
+const [createComponent] = createNamespace('sku');
 const { QUOTA_LIMIT } = LIMIT_TYPE;
 
-export default sfc({
+export default createComponent({
   props: {
     sku: Object,
     goods: Object,

packages/sku/components/SkuActions.tsx

@@ -1,4 +1,4 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
 import Button from '../../button';
 
@@ -12,7 +12,7 @@ export type SkuActionsProps = {
   showAddCartBtn?: boolean;
 };
 
-const [sfc, bem] = use('sku-actions');
+const [createComponent, bem] = createNamespace('sku-actions');
 
 function SkuActions(
   h: CreateElement,
@@ -52,4 +52,4 @@ SkuActions.props = {
   showAddCartBtn: Boolean
 };
 
-export default sfc<SkuActionsProps>(SkuActions);
+export default createComponent<SkuActionsProps>(SkuActions);

packages/sku/components/SkuHeader.tsx

@@ -1,4 +1,4 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
 import Icon from '../../icon';
 
@@ -14,7 +14,7 @@ export type SkuHeaderProps = {
   selectedSku: SelectedSkuData;
 };
 
-const [sfc, bem] = use('sku-header');
+const [createComponent, bem] = createNamespace('sku-header');
 
 function getSkuImg(sku: SkuData, selectedSku: SelectedSkuData) {
   const id = selectedSku.s1;
@@ -71,4 +71,4 @@ SkuHeader.props = {
   selectedSku: Object
 };
 
-export default sfc<SkuHeaderProps>(SkuHeader);
+export default createComponent<SkuHeaderProps>(SkuHeader);

packages/sku/components/SkuImgUploader.js

@@ -1,11 +1,11 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import Icon from '../../icon';
 import Loading from '../../loading';
 import Uploader from '../../uploader';
 
-const [sfc, bem] = use('sku-img-uploader');
+const [createComponent, bem] = createNamespace('sku-img-uploader');
 
-export default sfc({
+export default createComponent({
   props: {
     value: String,
     uploadImg: Function,

packages/sku/components/SkuMessages.js

@@ -1,4 +1,4 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import Cell from '../../cell';
 import CellGroup from '../../cell-group';
 import Field from '../../field';
@@ -6,7 +6,7 @@ import { isEmail } from '../../utils/validate/email';
 import { isNumber } from '../../utils/validate/number';
 import SkuImgUploader from './SkuImgUploader';
 
-const [sfc, bem] = use('sku-messages');
+const [createComponent, bem] = createNamespace('sku-messages');
 
 const PLACEHOLDER = {
   id_no: '输入身份证号码',
@@ -19,7 +19,7 @@ const PLACEHOLDER = {
   mobile: '输入手机号码'
 };
 
-export default sfc({
+export default createComponent({
   props: {
     messages: Array,
     messageConfig: Object,

packages/sku/components/SkuRow.tsx

@@ -1,4 +1,4 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import { inherit } from '../../utils/functional';
 
 // Types
@@ -10,7 +10,7 @@ export type SkuRowProps = {
   skuRow: SkuTreeItemData;
 };
 
-const [sfc, bem] = use('sku-row');
+const [createComponent, bem] = createNamespace('sku-row');
 
 function SkuRow(
   h: CreateElement,
@@ -30,4 +30,4 @@ SkuRow.props = {
   skuRow: Object
 };
 
-export default sfc<SkuRowProps>(SkuRow);
+export default createComponent<SkuRowProps>(SkuRow);

packages/sku/components/SkuRowItem.js

@@ -1,9 +1,9 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import { isSkuChoosable } from '../utils/skuHelper';
 
-const [sfc] = use('sku-row-item');
+const [createComponent] = createNamespace('sku-row-item');
 
-export default sfc({
+export default createComponent({
   props: {
     skuList: Array,
     skuValue: Object,

packages/sku/components/SkuStepper.js

@@ -1,11 +1,11 @@
-import { use } from '../../utils';
+import { createNamespace } from '../../utils';
 import Stepper from '../../stepper';
 import { LIMIT_TYPE } from '../constants';
 
-const [sfc] = use('sku-stepper');
+const [createComponent] = createNamespace('sku-stepper');
 const { QUOTA_LIMIT, STOCK_LIMIT } = LIMIT_TYPE;
 
-export default sfc({
+export default createComponent({
   props: {
     quota: Number,
     quotaUsed: Number,

packages/slider/index.js

@@ -1,10 +1,10 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { preventDefault } from '../utils/dom/event';
 
-const [sfc, bem] = use('slider');
+const [createComponent, bem] = createNamespace('slider');
 
-export default sfc({
+export default createComponent({
   mixins: [TouchMixin],
 
   props: {

packages/step/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import Icon from '../icon';
 
-const [sfc, bem] = use('step');
+const [createComponent, bem] = createNamespace('step');
 
-export default sfc({
+export default createComponent({
   beforeCreate() {
     const { steps } = this.$parent;
     const index = this.$parent.slots().indexOf(this.$vnode);

packages/stepper/index.js

@@ -1,8 +1,8 @@
-import { use, isDef, suffixPx } from '../utils';
+import { createNamespace, isDef, suffixPx } from '../utils';
 
-const [sfc, bem] = use('stepper');
+const [createComponent, bem] = createNamespace('stepper');
 
-export default sfc({
+export default createComponent({
   props: {
     value: null,
     integer: Boolean,

packages/steps/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { GREEN } from '../utils/color';
 
-const [sfc, bem] = use('steps');
+const [createComponent, bem] = createNamespace('steps');
 
-export default sfc({
+export default createComponent({
   props: {
     active: Number,
     inactiveIcon: String,

packages/submit-bar/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Button, { ButtonType } from '../button';
 import Icon from '../icon';
@@ -27,7 +27,7 @@ export type SubmitBarSlots = DefaultSlots & {
   tip?: ScopedSlot;
 };
 
-const [sfc, bem, t] = use('submit-bar');
+const [createComponent, bem, t] = createNamespace('submit-bar');
 
 function SubmitBar(
   h: CreateElement,
@@ -119,4 +119,4 @@ SubmitBar.props = {
   }
 };
 
-export default sfc<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);
+export default createComponent<SubmitBarProps, {}, SubmitBarSlots>(SubmitBar);

packages/swipe-cell/index.js

@@ -1,13 +1,13 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { range } from '../utils/format/number';
 import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
-const [sfc, bem] = use('swipe-cell');
+const [createComponent, bem] = createNamespace('swipe-cell');
 const THRESHOLD = 0.15;
 
-export default sfc({
+export default createComponent({
   mixins: [
     TouchMixin,
     ClickOutsideMixin({

packages/swipe-item/index.js

@@ -1,8 +1,8 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 
-const [sfc, bem] = use('swipe-item');
+const [createComponent, bem] = createNamespace('swipe-item');
 
-export default sfc({
+export default createComponent({
   data() {
     return {
       offset: 0

packages/swipe/index.js

@@ -1,11 +1,11 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { TouchMixin } from '../mixins/touch';
 import { BindEventMixin } from '../mixins/bind-event';
 
-const [sfc, bem] = use('swipe');
+const [createComponent, bem] = createNamespace('swipe');
 
-export default sfc({
+export default createComponent({
   mixins: [
     TouchMixin,
     BindEventMixin(function (bind, isBind) {

packages/switch-cell/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
 import Cell from '../cell';
 import Switch, { SwitchEvents } from '../switch';
@@ -15,7 +15,7 @@ export type SwitchCellProps = SharedSwitchProps & {
   cellSize?: string;
 };
 
-const [sfc, bem] = use('switch-cell');
+const [createComponent, bem] = createNamespace('switch-cell');
 
 function SwitchCell(
   h: CreateElement,
@@ -51,4 +51,4 @@ SwitchCell.props = {
   }
 };
 
-export default sfc<SwitchCellProps, SwitchEvents>(SwitchCell);
+export default createComponent<SwitchCellProps, SwitchEvents>(SwitchCell);

packages/switch/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { BLUE, GRAY_DARK } from '../utils/color';
 import { switchProps, SharedSwitchProps } from './shared';
 import { emit, inherit } from '../utils/functional';
@@ -12,7 +12,7 @@ export type SwitchEvents = {
   onChange?(checked: boolean): void;
 };
 
-const [sfc, bem] = use('switch');
+const [createComponent, bem] = createNamespace('switch');
 
 function Switch(
   h: CreateElement,
@@ -69,4 +69,4 @@ function Switch(
 
 Switch.props = switchProps;
 
-export default sfc<SharedSwitchProps, SwitchEvents>(Switch);
+export default createComponent<SharedSwitchProps, SwitchEvents>(Switch);

packages/tab/index.js

@@ -1,10 +1,10 @@
 /* eslint-disable object-shorthand */
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('tab');
+const [createComponent, bem] = createNamespace('tab');
 
-export default sfc({
+export default createComponent({
   mixins: [ChildrenMixin('vanTabs')],
 
   props: {

packages/tabbar-item/index.js

@@ -1,12 +1,12 @@
-import { use, isObj } from '../utils';
+import { createNamespace, isObj } from '../utils';
 import Icon from '../icon';
 import Info from '../info';
 import { route, routeProps } from '../utils/router';
 import { ChildrenMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('tabbar-item');
+const [createComponent, bem] = createNamespace('tabbar-item');
 
-export default sfc({
+export default createComponent({
   mixins: [ChildrenMixin('vanTabbar')],
 
   props: {

packages/tabbar/index.js

@@ -1,9 +1,9 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { ParentMixin } from '../mixins/relation';
 
-const [sfc, bem] = use('tabbar');
+const [createComponent, bem] = createNamespace('tabbar');
 
-export default sfc({
+export default createComponent({
   mixins: [ParentMixin('vanTabbar')],
 
   props: {

packages/tabs/Content.js

@@ -1,10 +1,10 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 
-const [sfc, bem] = use('tabs');
+const [createComponent, bem] = createNamespace('tabs');
 const MIN_SWIPE_DISTANCE = 50;
 
-export default sfc({
+export default createComponent({
   mixins: [TouchMixin],
 
   props: {

packages/tabs/Title.js

@@ -1,6 +1,6 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 
-const bem = use('tab')[1];
+const bem = createNamespace('tab')[1];
 
 export default {
   props: {

packages/tabs/index.js

@@ -1,4 +1,4 @@
-import { use, isDef, suffixPx } from '../utils';
+import { createNamespace, isDef, suffixPx } from '../utils';
 import { scrollLeftTo } from './utils';
 import { on, off } from '../utils/dom/event';
 import { ParentMixin } from '../mixins/relation';
@@ -12,9 +12,9 @@ import {
 import Title from './Title';
 import Content from './Content';
 
-const [sfc, bem] = use('tabs');
+const [createComponent, bem] = createNamespace('tabs');
 
-export default sfc({
+export default createComponent({
   mixins: [
     ParentMixin('vanTabs'),
     BindEventMixin(function (bind, isBind) {

packages/tag/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { inherit } from '../utils/functional';
 import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
@@ -20,7 +20,7 @@ export type TagProps = {
   textColor?: string;
 };
 
-const [sfc, bem] = use('tag');
+const [createComponent, bem] = createNamespace('tag');
 
 const COLOR_MAP: { [key: string]: string } = {
   danger: RED,
@@ -75,4 +75,4 @@ Tag.props = {
   textColor: String
 };
 
-export default sfc<TagProps>(Tag);
+export default createComponent<TagProps>(Tag);

packages/toast/Toast.js

@@ -1,11 +1,11 @@
-import { use, isDef } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
 import Loading from '../loading';
 
-const [sfc, bem] = use('toast');
+const [createComponent, bem] = createNamespace('toast');
 
-export default sfc({
+export default createComponent({
   mixins: [PopupMixin],
 
   props: {

packages/tree-select/index.tsx

@@ -1,4 +1,4 @@
-import { use } from '../utils';
+import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
 
@@ -25,7 +25,7 @@ export type TreeSelectProps = {
   mainActiveIndex: number;
 };
 
-const [sfc, bem] = use('tree-select');
+const [createComponent, bem] = createNamespace('tree-select');
 
 function TreeSelect(
   h: CreateElement,
@@ -102,4 +102,4 @@ TreeSelect.props = {
   }
 };
 
-export default sfc<TreeSelectProps>(TreeSelect);
+export default createComponent<TreeSelectProps>(TreeSelect);

packages/uploader/index.js

@@ -1,16 +1,16 @@
-import { use, suffixPx } from '../utils';
+import { createNamespace, suffixPx } from '../utils';
 import { toArray, readFile, isOversize } from './utils';
 import Icon from '../icon';
 import Image from '../image';
 import ImagePreview from '../image-preview';
 
-const [sfc, bem] = use('uploader');
+const [createComponent, bem] = createNamespace('uploader');
 
 function isImageDataUrl(dataUrl) {
   return dataUrl.indexOf('data:image') === 0;
 }
 
-export default sfc({
+export default createComponent({
   inheritAttrs: false,
 
   model: {

packages/utils/create/bem.ts

@@ -36,7 +36,7 @@ function prefix(name: string, mods: Mods): Mods {
   return ret;
 }
 
-export function useBEM(name: string) {
+export function createBEM(name: string) {
   return function (el?: Mods, mods?: Mods): Mods {
     if (el && typeof el !== 'string') {
       mods = el;

packages/utils/create/component.ts

@@ -76,7 +76,7 @@ function transformFunctionComponent(pure: FunctionComponent): VantComponentOptio
   };
 }
 
-export function useSFC(name: string) {
+export function createComponent(name: string) {
   return function<Props = DefaultProps, Events = {}, Slots = {}> (
     sfc: VantComponentOptions | FunctionComponent
   ): TsxComponent<Props, Events, Slots> {

packages/utils/create/i18n.ts

@@ -2,7 +2,7 @@ import { get } from '..';
 import { camelize } from '../format/string';
 import locale from '../../locale';
 
-export function useI18N(name: string) {
+export function createI18N(name: string) {
   const prefix = camelize(name) + '.';
 
   return function (path: string, ...args: any[]): string {

packages/utils/create/index.ts

@@ -0,0 +1,14 @@
+import { createBEM } from './bem';
+import { createComponent } from './component';
+import { createI18N } from './i18n';
+
+type CreateNamespaceReturn = [
+  ReturnType<typeof createComponent>,
+  ReturnType<typeof createBEM>,
+  ReturnType<typeof createI18N>
+];
+
+export function createNamespace(name: string): CreateNamespaceReturn {
+  name = 'van-' + name;
+  return [createComponent(name), createBEM(name), createI18N(name)];
+}

packages/utils/index.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-export { use } from './use';
+export { createNamespace } from './create';
 export { suffixPx } from './format/unit';
 
 export const isServer: boolean = Vue.prototype.$isServer;

packages/utils/use/index.ts

@@ -1,14 +0,0 @@
-import { useBEM } from './bem';
-import { useSFC } from './sfc';
-import { useI18N } from './i18n';
-
-type UseReturn = [
-  ReturnType<typeof useSFC>,
-  ReturnType<typeof useBEM>,
-  ReturnType<typeof useI18N>
-];
-
-export function use(name: string): UseReturn {
-  name = 'van-' + name;
-  return [useSFC(name), useBEM(name), useI18N(name)];
-}