[improvement] optimize sfc type definitions (youzan#2778)

guoyanlongwork · Feb 18, 2019 · 78174e4 · 78174e4
1 parent 0013185
commit 78174e4
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 97 deletions.
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
@@ -4,15 +4,32 @@ import { routeProps, RouteProps, functionalRoute } from '../mixins/router';
 import Loading from '../loading';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type ButtonProps = RouteProps & {
+  tag?: string;
+  type?: string;
+  size?: string;
+  text?: string;
+  block?: boolean;
+  plain?: boolean;
+  round?: boolean;
+  square?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  nativeType?: string;
+  loadingText?: string;
+  bottomAction?: boolean;
+};
 
 const [sfc, bem] = use('button');
 
-const Button: FunctionalComponent<ButtonProps> = function (
-  h,
-  props,
-  slots,
-  ctx
+function Button(
+  h: CreateElement,
+  props: ButtonProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<ButtonProps>
 ) {
   const { tag, type, disabled, loading, loadingText } = props;
 
@@ -55,23 +72,7 @@ const Button: FunctionalComponent<ButtonProps> = function (
       )}
     </tag>
   );
-};
-
-export type ButtonProps = RouteProps & {
-  tag?: string;
-  type?: string;
-  size?: string;
-  text?: string;
-  block?: boolean;
-  plain?: boolean;
-  round?: boolean;
-  square?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  nativeType?: string;
-  loadingText?: string;
-  bottomAction?: boolean;
-};
+}
 
 Button.props = {
   ...routeProps,

diff --git a/packages/cell-group/index.tsx b/packages/cell-group/index.tsx
@@ -2,15 +2,20 @@ import { use } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type CellGroupProps = {
+  border?: boolean
+};
 
 const [sfc, bem] = use('cell-group');
 
-const CellGroup: FunctionalComponent<CellGroupProps> = function (
-  h,
-  props,
-  slots,
-  ctx
+function CellGroup(
+  h: CreateElement,
+  props: CellGroupProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<CellGroupProps>
 ) {
   return (
     <div
@@ -20,11 +25,7 @@ const CellGroup: FunctionalComponent<CellGroupProps> = function (
       {slots.default && slots.default()}
     </div>
   );
-};
-
-export type CellGroupProps = {
-  border?: boolean
-};
+}
 
 CellGroup.props = {
   border: {

diff --git a/packages/cell/index.tsx b/packages/cell/index.tsx
@@ -5,12 +5,31 @@ import { routeProps, functionalRoute } from '../mixins/router';
 import Icon from '../icon';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { ScopedSlot, DefaultSlots } from '../utils/use/sfc';
 import { Mods } from '../utils/use/bem';
 
+export type CellProps = SharedCellProps & {
+  size?: string;
+  clickable?: boolean;
+  arrowDirection?: string;
+};
+
+export type CellSlots = DefaultSlots & {
+  icon?: ScopedSlot;
+  title?: ScopedSlot;
+  extra?: ScopedSlot;
+  'right-icon'?: ScopedSlot;
+};
+
 const [sfc, bem] = use('cell');
 
-const Cell: FunctionalComponent<CellProps> = function (h, props, slots, ctx) {
+function Cell(
+  h: CreateElement,
+  props: CellProps,
+  slots: CellSlots,
+  ctx: RenderContext<CellProps>
+) {
   const { icon, size, title, label, value, isLink, arrowDirection } = props;
 
   const showTitle = slots.title || isDef(title);
@@ -65,24 +84,14 @@ const Cell: FunctionalComponent<CellProps> = function (h, props, slots, ctx) {
   }
 
   return (
-    <div
-      class={bem(classes)}
-      onClick={onClick}
-      {...inherit(ctx)}
-    >
+    <div class={bem(classes)} onClick={onClick} {...inherit(ctx)}>
       {LeftIcon}
       {Title}
       {Value}
       {RightIcon}
       {slots.extra && slots.extra()}
     </div>
   );
-};
-
-export type CellProps = SharedCellProps & {
-  size?: string;
-  clickable?: boolean;
-  arrowDirection?: string;
 }
 
 Cell.props = {

diff --git a/packages/icon/index.tsx b/packages/icon/index.tsx
@@ -4,11 +4,25 @@ import Info from '../info';
 import isSrc from '../utils/validate/src';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type IconProps = {
+  name: string;
+  size?: string;
+  color?: string;
+  info?: string | number;
+  classPrefix?: string;
+};
 
 const [sfc] = use('icon');
 
-const Icon: FunctionalComponent<IconProps> = function (h, props, slots, ctx) {
+function Icon(
+  h: CreateElement,
+  props: IconProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<IconProps>
+) {
   const urlIcon = isSrc(props.name);
 
   return (
@@ -28,15 +42,7 @@ const Icon: FunctionalComponent<IconProps> = function (h, props, slots, ctx) {
       <Info info={props.info} />
     </i>
   );
-};
-
-export type IconProps = {
-  name: string;
-  size?: string;
-  color?: string;
-  info?: string | number;
-  classPrefix?: string;
-};
+}
 
 Icon.props = {
   name: String,

diff --git a/packages/info/index.tsx b/packages/info/index.tsx
@@ -2,11 +2,21 @@ import { use, isDef } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type InfoProps = {
+  info?: string | number;
+};
 
 const [sfc, bem] = use('info');
 
-const Info: FunctionalComponent<InfoProps> = function (h, props, slots, ctx) {
+function Info(
+  h: CreateElement,
+  props: InfoProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<InfoProps>
+) {
   if (!isDef(props.info)) {
     return;
   }
@@ -16,11 +26,7 @@ const Info: FunctionalComponent<InfoProps> = function (h, props, slots, ctx) {
       {props.info}
     </div>
   );
-};
-
-export type InfoProps = {
-  info?: string | number;
-};
+}
 
 Info.props = {
   info: [String, Number]

diff --git a/packages/loading/index.tsx b/packages/loading/index.tsx
@@ -2,16 +2,23 @@ import { use } from '../utils';
 import { inherit } from '../utils/functional';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type LoadingProps = {
+  size?: string;
+  type?: string;
+  color?: string;
+};
 
 const [sfc, bem] = use('loading');
 const DEFAULT_COLOR = '#c9c9c9';
 
-const Loading: FunctionalComponent<LoadingProps> = function (
-  h,
-  props,
-  slots,
-  ctx
+function Loading(
+  h: CreateElement,
+  props: LoadingProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<LoadingProps>
 ) {
   const { color, size, type } = props;
 
@@ -44,13 +51,7 @@ const Loading: FunctionalComponent<LoadingProps> = function (
       </span>
     </div>
   );
-};
-
-export type LoadingProps = {
-  size?: string;
-  type?: string;
-  color?: string;
-};
+}
 
 Loading.props = {
   size: String,

diff --git a/packages/tag/index.tsx b/packages/tag/index.tsx
@@ -3,7 +3,18 @@ import { inherit } from '../utils/functional';
 import { RED, BLUE, GREEN, GRAY_DARK } from '../utils/color';
 
 // Types
-import { FunctionalComponent } from '../utils/use/sfc';
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type TagProps = {
+  size?: string;
+  type?: string;
+  mark?: boolean;
+  color?: string;
+  plain?: boolean;
+  round?: boolean;
+  textColor?: string;
+};
 
 const [sfc, bem] = use('tag');
 
@@ -13,8 +24,13 @@ const COLOR_MAP: { [key: string]: string } = {
   success: GREEN
 };
 
-const Tag: FunctionalComponent<TagProps> = function (h, props, slots, ctx) {
-  const { type, mark, plain, round, size } = ctx.props;
+function Tag(
+  h: CreateElement,
+  props: TagProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<TagProps>
+) {
+  const { type, mark, plain, round, size } = props;
 
   const color = props.color || (type && COLOR_MAP[type]) || GRAY_DARK;
   const key = plain ? 'color' : 'backgroundColor';
@@ -43,17 +59,7 @@ const Tag: FunctionalComponent<TagProps> = function (h, props, slots, ctx) {
       {slots.default && slots.default()}
     </span>
   );
-};
-
-export type TagProps = {
-  size?: string;
-  type?: string;
-  mark?: boolean;
-  color?: string;
-  plain?: boolean;
-  round?: boolean;
-  textColor?: string;
-};
+}
 
 Tag.props = {
   size: String,

diff --git a/packages/utils/use/sfc.ts b/packages/utils/use/sfc.ts
@@ -13,13 +13,16 @@ import Vue, {
 import { VNode } from 'vue/types/vnode';
 import { InjectOptions, PropsDefinition } from 'vue/types/options';
 
-export type ScopedSlot = (props?: any) => VNode[] | undefined;
+export type ScopedSlot<Props = any> = (props?: Props) => VNode[] | undefined;
 
-export type ScopedSlots = {
-  [key: string]: ScopedSlot | undefined;
+export type DefaultSlots = {
   default?: ScopedSlot;
 };
 
+export type ScopedSlots = DefaultSlots & {
+  [key: string]: ScopedSlot | undefined;
+};
+
 export type ModelOptions = {
   prop?: string;
   event?: string;
@@ -50,7 +53,7 @@ export type FunctionalComponent<
 export type TsxBaseProps = {
   class?: any;
   style?: any;
-}
+};
 export type TsxComponent<T> = (props: T & TsxBaseProps) => VNode;
 
 const arrayProp = {
@@ -102,7 +105,8 @@ function transformFunctionalComponent(
     functional: true,
     props: pure.props,
     model: pure.model,
-    render: (h, context): any => pure(h, context.props, unifySlots(context), context)
+    render: (h, context): any =>
+      pure(h, context.props, unifySlots(context), context)
   };
 }