[improvement] functional inherit context (#2716)

packages/utils/use/sfc.js

@@ -1,73 +0,0 @@
-/**
- * Create a basic component with common options
- */
-import '../../locale';
-import { camelize } from '..';
-import SlotsMixin from '../../mixins/slots';
-
-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);
-}
-
-const inheritKey = [
-  'style',
-  'class',
-  'attrs',
-  'nativeOn',
-  'directives',
-  'staticClass',
-  'staticStyle'
-];
-const mapInheritKey = { nativeOn: 'on' };
-
-function functional(sfc) {
-  const { render } = sfc;
-  sfc.render = (h, context) => {
-    const inherit = inheritKey.reduce((obj, key) => {
-      if (context.data[key]) {
-        obj[mapInheritKey[key] || key] = context.data[key];
-      }
-      return obj;
-    }, {});
-    return render(h, context, inherit);
-  };
-}
-
-export default name => sfc => {
-  sfc.name = name;
-  sfc.install = install;
-  sfc.mixins = sfc.mixins || [];
-  sfc.mixins.push(SlotsMixin);
-
-  if (sfc.props) {
-    defaultProps(sfc.props);
-  }
-
-  if (sfc.functional) {
-    functional(sfc);
-  }
-
-  return sfc;
-};

packages/utils/use/sfc.ts

@@ -0,0 +1,53 @@
+/**
+ * Create a basic component with common options
+ */
+import '../../locale';
+import { camelize } from '..';
+import SlotsMixin from '../../mixins/slots';
+import Vue, { VueConstructor, ComponentOptions } from 'vue';
+
+type VantComponentOptions = ComponentOptions<Vue> & {
+  functional?: boolean;
+  install?: (Vue: VueConstructor) => void;
+};
+
+const arrayProp = {
+  type: Array,
+  default: () => []
+};
+
+const numberProp = {
+  type: Number,
+  default: 0
+};
+
+function defaultProps(props: any) {
+  Object.keys(props).forEach(key => {
+    if (props[key] === Array) {
+      props[key] = arrayProp;
+    } else if (props[key] === Number) {
+      props[key] = numberProp;
+    }
+  });
+}
+
+function install(this: ComponentOptions<Vue>, Vue: VueConstructor) {
+  const { name } = this;
+  if (name) {
+    Vue.component(name, this);
+    Vue.component(camelize(`-${name}`), this);
+  }
+}
+
+export default (name: string) => (sfc: VantComponentOptions) => {
+  sfc.name = name;
+  sfc.install = install;
+  sfc.mixins = sfc.mixins || [];
+  sfc.mixins.push(SlotsMixin);
+
+  if (sfc.props) {
+    defaultProps(sfc.props);
+  }
+
+  return sfc;
+};