[improvement] relations (#647)

packages/badge-group/index.ts

@@ -1,19 +1,16 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../badge/index': {
-      type: 'descendant',
-
-      linked(target) {
-        this.data.badges.push(target);
-        this.setActive();
-      },
-
-      unlinked(target) {
-        this.data.badges = this.data.badges.filter(item => item !== target);
-        this.setActive();
-      }
+  relation: {
+    name: 'badge',
+    type: 'descendant',
+    linked(target) {
+      this.data.badges.push(target);
+      this.setActive();
+    },
+    unlinked(target) {
+      this.data.badges = this.data.badges.filter(item => item !== target);
+      this.setActive();
     }
   },
 

packages/badge/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../badge-group/index': {
-      type: 'ancestor'
-    }
+  relation: {
+    type: 'ancestor',
+    name: 'badge-group'
   },
 
   props: {

packages/col/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../row/index': {
-      type: 'ancestor'
-    }
+  relation: {
+    name: 'row',
+    type: 'ancestor'
   },
 
   props: {

packages/common/component.ts

@@ -31,11 +31,18 @@ function VantComponent<Data, Props, Watch, Methods, Computed>(
     beforeCreate: 'created',
     created: 'attached',
     mounted: 'ready',
-    destroyed: 'detached',
     relations: 'relations',
+    destroyed: 'detached',
     classes: 'externalClasses'
   });
 
+  const { relation } = vantOptions;
+  if (relation) {
+    options.relations = Object.assign(options.relations || {}, {
+      [`../${relation.name}/index`]: relation
+    });
+  }
+
   // add default externalClasses
   options.externalClasses = options.externalClasses || [];
   options.externalClasses.push('custom-class');

packages/radio-group/index.ts

@@ -1,16 +1,15 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../radio/index': {
-      type: 'descendant',
-      linked(target) {
-        const { value, disabled } = this.data;
-        target.setData({
-          value: value,
-          disabled: disabled || target.data.disabled
-        });
-      }
+  relation: {
+    name: 'radio',
+    type: 'descendant',
+    linked(target) {
+      const { value, disabled } = this.data;
+      target.setData({
+        value: value,
+        disabled: disabled || target.data.disabled
+      });
     }
   },
 

packages/radio/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../radio-group/index': {
-      type: 'ancestor'
-    }
+  relation: {
+    name: 'radio-group',
+    type: 'ancestor'
   },
 
   classes: ['icon-class', 'label-class'],

packages/row/index.ts

@@ -1,14 +1,12 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../col/index': {
-      type: 'descendant',
-
-      linked(target) {
-        if (this.data.gutter) {
-          target.setGutter(this.data.gutter);
-        }
+  relation: {
+    name: 'col',
+    type: 'descendant',
+    linked(target) {
+      if (this.data.gutter) {
+        target.setGutter(this.data.gutter);
       }
     }
   },
@@ -31,10 +29,12 @@ VantComponent({
     setGutter() {
       const { gutter } = this.data;
       const margin = `-${Number(gutter) / 2}px`;
-      const style = gutter ? `margin-right: ${margin}; margin-left: ${margin};` : '';
+      const style = gutter
+        ? `margin-right: ${margin}; margin-left: ${margin};`
+        : '';
 
       this.setData({ style });
-      this.getRelationNodes('../col/index').forEach((col) => {
+      this.getRelationNodes('../col/index').forEach(col => {
         col.setGutter(this.data.gutter);
       });
     }

packages/tab/index.ts

@@ -1,10 +1,9 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relations: {
-    '../tabs/index': {
-      type: 'ancestor'
-    }
+  relation: {
+    name: 'tabs',
+    type: 'ancestor'
   },
 
   props: {

packages/tabbar-item/index.ts

@@ -7,10 +7,9 @@ VantComponent({
     dot: Boolean
   },
 
-  relations: {
-    '../tabbar/index': {
-      type: 'ancestor'
-    }
+  relation: {
+    name: 'tabbar',
+    type: 'ancestor'
   },
 
   data: {

packages/tabbar/index.ts

@@ -1,6 +1,23 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
+  relation: {
+    name: 'tabbar-item',
+    type: 'descendant',
+    linked(target) {
+      this.data.items.push(target);
+      setTimeout(() => {
+        this.setActiveItem();
+      });
+    },
+    unlinked(target) {
+      this.data.items = this.data.items.filter(item => item !== target);
+      setTimeout(() => {
+        this.setActiveItem();
+      });
+    }
+  },
+
   props: {
     active: Number,
     fixed: {
@@ -29,26 +46,6 @@ VantComponent({
     this.setData({ currentActive: this.data.active });
   },
 
-  relations: {
-    '../tabbar-item/index': {
-      type: 'descendant',
-
-      linked(target) {
-        this.data.items.push(target);
-        setTimeout(() => {
-          this.setActiveItem();
-        });
-      },
-
-      unlinked(target) {
-        this.data.items = this.data.items.filter(item => item !== target);
-        setTimeout(() => {
-          this.setActiveItem();
-        });
-      }
-    }
-  },
-
   methods: {
     setActiveItem() {
       this.data.items.forEach((item, index) => {

packages/tabs/index.ts

@@ -6,26 +6,23 @@ type TabItemData = {
 };
 
 VantComponent({
-  relations: {
-    '../tab/index': {
-      type: 'descendant',
-
-      linked(child) {
-        this.data.tabs.push({
-          instance: child,
-          data: child.data
-        });
-        this.updateTabs();
-      },
-
-      unlinked(child) {
-        const tabs = this.data.tabs.filter(item => item.instance !== child);
-        this.setData({
-          tabs,
-          scrollable: tabs.length > this.data.swipeThreshold
-        });
-        this.setActiveTab();
-      }
+  relation: {
+    name: 'tab',
+    type: 'descendant',
+    linked(child) {
+      this.data.tabs.push({
+        instance: child,
+        data: child.data
+      });
+      this.updateTabs();
+    },
+    unlinked(child) {
+      const tabs = this.data.tabs.filter(item => item.instance !== child);
+      this.setData({
+        tabs,
+        scrollable: tabs.length > this.data.swipeThreshold
+      });
+      this.setActiveTab();
     }
   },
 

types/index.d.ts

@@ -6,17 +6,19 @@ type ExternalClasses = string[];
 type LooseObject = {
   [key: string]: any;
 };
+type Relation<Instance> = {
+  name?: string;
+  type: string;
+  linked?: (this: Instance, target?: Weapp.Component) => void;
+  unlinked?: (this: Instance, target?: Weapp.Component) => void;
+};
 type Relations<Instance> = {
-  [key: string]: {
-    type: string;
-    linked?: (this: Instance, target?: any) => void;
-    unlinked?: (this: Instance, target?: any) => void;
-  };
+  [key: string]: Relation<Instance>;
 };
 type RecordToAny<T> = { [K in keyof T]: any };
 type RecordToReturn<T> = {
   [P in keyof T]: T[P] extends (...args: any[]) => any ? ReturnType<T[P]> : T[P]
-}
+};
 
 export type CombinedComponentInstance<
   Data,
@@ -31,13 +33,21 @@ export type CombinedComponentInstance<
     data: Data & RecordToAny<Props> & RecordToReturn<Computed>;
   };
 
-export type VantComponentOptions<Data, Props, Watch, Methods, Computed, Instance> = {
+export type VantComponentOptions<
+  Data,
+  Props,
+  Watch,
+  Methods,
+  Computed,
+  Instance
+> = {
   data?: Data;
   field?: boolean;
   mixins?: Mixins;
   props?: Props & ThisType<Instance>;
   watch?: Watch & ThisType<Instance>;
   computed?: Computed & ThisType<Instance>;
+  relation?: Relation<Instance>;
   relations?: Relations<Instance>;
   classes?: ExternalClasses;
   methods?: Methods & ThisType<Instance>;