refactor: refactor relation (#2760)

packages/checkbox-group/index.ts

@@ -8,16 +8,10 @@ VantComponent({
   relation: {
     name: 'checkbox',
     type: 'descendant',
+    current: 'checkbox-group',
     linked(target) {
-      this.children = this.children || [];
-      this.children.push(target);
       this.updateChild(target);
     },
-    unlinked(target) {
-      this.children = this.children.filter(
-        (child: TrivialInstance) => child !== target
-      );
-    }
   },
 
   props: {

packages/checkbox/index.ts

@@ -11,12 +11,7 @@ VantComponent({
   relation: {
     name: 'checkbox-group',
     type: 'ancestor',
-    linked(target) {
+    current: 'checkbox',
-      this.parent = target;
-    },
-    unlinked() {
-      this.parent = null;
-    }
   },
 
   classes: ['icon-class', 'label-class'],

packages/col/index.ts

@@ -3,7 +3,8 @@ import { VantComponent } from '../common/component';
 VantComponent({
   relation: {
     name: 'row',
-    type: 'ancestor'
+    type: 'ancestor',
+    current: 'col',
   },
 
   props: {

packages/collapse-item/index.ts

@@ -8,9 +8,7 @@ VantComponent({
   relation: {
     name: 'collapse',
     type: 'ancestor',
-    linked(parent) {
+    current: 'collapse-item',
-      this.parent = parent;
-    }
   },
 
   props: {

packages/collapse/index.ts

@@ -6,14 +6,7 @@ VantComponent({
   relation: {
     name: 'collapse-item',
     type: 'descendant',
-    linked(child) {
+    current: 'collapse',
-      this.children.push(child);
-    },
-    unlinked(child) {
-      this.children = this.children.filter(
-        (item: TrivialInstance) => item !== child
-      );
-    }
   },
 
   props: {
@@ -31,10 +24,6 @@ VantComponent({
     }
   },
 
-  beforeCreate() {
-    this.children = [];
-  },
-
   methods: {
     updateExpanded() {
       this.children.forEach((child: TrivialInstance) => {

packages/common/component.ts

@@ -1,6 +1,26 @@
 import { basic } from '../mixins/basic';
 import { VantComponentOptions, CombinedComponentInstance } from 'definitions/index';
 
+const relationFunctions = {
+  ancestor: {
+    linked(parent) {
+      this.parent = parent;
+    },
+    unlinked() {
+      this.parent = null;
+    },
+  },
+  descendant: {
+    linked(child) {
+      this.children = this.children || [];
+      this.children.push(child);
+    },
+    unlinked(child) {
+      this.children = (this.children || []).filter(it => it !== child);
+    },
+  },
+};
+
 function mapKeys(source: object, target: object, map: object) {
   Object.keys(map).forEach(key => {
     if (source[key]) {
@@ -9,6 +29,37 @@ function mapKeys(source: object, target: object, map: object) {
   });
 }
 
+function makeRelation(options, vantOptions, relation) {
+  const { type, name, linked, unlinked, linkChanged } = relation;
+  const { beforeCreate, destroyed } = vantOptions;
+  if (type === 'descendant') {
+    options.created = function () {
+      beforeCreate && beforeCreate.bind(this)();
+      this.children = this.children || [];
+    };
+    options.detached = function () {
+      this.children = [];
+      destroyed && destroyed.bind(this)();
+    };
+  }
+  options.relations = Object.assign(options.relations || {}, {
+    [`../${name}/index`]: {
+      type,
+      linked(node) {
+        relationFunctions[type].linked.bind(this)(node);
+        linked && linked.bind(this)(node);
+      },
+      linkChanged(node) {
+        linkChanged && linkChanged.bind(this)(node);
+      },
+      unlinked(node) {
+        relationFunctions[type].unlinked.bind(this)(node);
+        unlinked && unlinked.bind(this)(node);
+      },
+    }
+  });
+}
+
 function VantComponent<Data, Props, Methods>(
   vantOptions: VantComponentOptions<
     Data,
@@ -34,9 +85,7 @@ function VantComponent<Data, Props, Methods>(
 
   const { relation } = vantOptions;
   if (relation) {
-    options.relations = Object.assign(options.relations || {}, {
+    makeRelation(options, vantOptions, relation);
-      [`../${relation.name}/index`]: relation
-    });
   }
 
   // add default externalClasses

packages/definitions/index.ts

@@ -19,7 +19,11 @@ export interface VantComponentOptions<Data, Props, Methods, Instance> {
   classes?: string[];
   mixins?: string[];
   props?: Props & Weapp.PropertyOption;
-  relation?: Weapp.RelationOption<Instance> & { name: string };
+  relation?: Weapp.RelationOption<Instance> & {
+    type: 'ancestor' | 'descendant';
+    name: string;
+    current: string;
+  };
   relations?: {
     [componentName: string]: Weapp.RelationOption<Instance>;
   };

packages/dropdown-item/index.ts

@@ -7,13 +7,10 @@ VantComponent({
   relation: {
     name: 'dropdown-menu',
     type: 'ancestor',
-    linked(target) {
+    current: 'dropdown-item',
-      this.parent = target;
+    linked() {
       this.updateDataFromParent();
     },
-    unlinked() {
-      this.parent = null;
-    }
   },
 
   props: {

packages/dropdown-menu/index.ts

@@ -11,14 +11,11 @@ VantComponent({
   relation: {
     name: 'dropdown-item',
     type: 'descendant',
-    linked(target) {
+    current: 'dropdown-menu',
-      this.children.push(target);
+    linked() {
       this.updateItemListData();
     },
-    unlinked(target) {
+    unlinked() {
-      this.children = this.children.filter(
-        (child: TrivialInstance) => child !== target
-      );
       this.updateItemListData();
     }
   },
@@ -65,7 +62,6 @@ VantComponent({
   beforeCreate() {
     const { windowHeight } = wx.getSystemInfoSync();
     this.windowHeight = windowHeight;
-    this.children = [];
     ARRAY.push(this);
   },
 

packages/goods-action-button/index.ts

@@ -9,9 +9,7 @@ VantComponent({
   relation: {
     type: 'ancestor',
     name: 'goods-action',
-    linked(parent) {
+    current: 'goods-action-button',
-      this.parent = parent;
-    }
   },
   props: {
     text: String,

packages/goods-action/index.ts

@@ -4,15 +4,7 @@ VantComponent({
   relation: {
     type: 'descendant',
     name: 'goods-action-button',
-    linked(child) {
+    current: 'goods-action',
-      this.children.push(child);
-    },
-    unlinked(child) {
-      this.children = this.children.filter((item) => item !== child);
-    }
-  },
-  beforeCreate() {
-    this.children = [];
   },
   props: {
     safeAreaInsetBottom: {

packages/grid-item/index.ts

@@ -6,9 +6,7 @@ VantComponent({
   relation: {
     name: 'grid',
     type: 'ancestor',
-    linked(parent) {
+    current: 'grid-item',
-      this.parent = parent;
-    }
   },
 
   mixins: [link],

packages/grid/index.ts

@@ -5,14 +5,7 @@ VantComponent({
   relation: {
     name: 'grid-item',
     type: 'descendant',
-    linked(child) {
+    current: 'grid',
-      this.children.push(child);
-    },
-    unlinked(child) {
-      this.children = this.children.filter(
-        (item: WechatMiniprogram.Component.TrivialInstance) => item !== child
-      );
-    }
   },
 
   props: {

packages/index-anchor/index.ts

@@ -4,12 +4,7 @@ VantComponent({
   relation: {
     name: 'index-bar',
     type: 'ancestor',
-    linked(target) {
+    current: 'index-anchor',
-      this.parent = target;
-    },
-    unlinked() {
-      this.parent = null;
-    }
   },
 
   props: {

packages/index-bar/index.ts

@@ -16,6 +16,7 @@ VantComponent({
   relation: {
     name: 'index-anchor',
     type: 'descendant',
+    current: 'index-bar',
     linked() {
       this.updateData();
     },

packages/radio-group/index.ts

@@ -6,16 +6,10 @@ VantComponent({
   relation: {
     name: 'radio',
     type: 'descendant',
+    current: 'radio-group',
     linked(target) {
-      this.children = this.children || [];
-      this.children.push(target);
       this.updateChild(target);
     },
-    unlinked(target) {
-      this.children = this.children.filter(
-        (child: WechatMiniprogram.Component.TrivialInstance) => child !== target
-      );
-    }
   },
 
   props: {

packages/radio/index.ts

@@ -6,12 +6,7 @@ VantComponent({
   relation: {
     name: 'radio-group',
     type: 'ancestor',
-    linked(target) {
+    current: 'radio',
-      this.parent = target;
-    },
-    unlinked() {
-      this.parent = null;
-    }
   },
 
   classes: ['icon-class', 'label-class'],

packages/row/index.ts

@@ -4,6 +4,7 @@ VantComponent({
   relation: {
     name: 'col',
     type: 'descendant',
+    current: 'row',
     linked(target) {
       if (this.data.gutter) {
         target.setGutter(this.data.gutter);

packages/sidebar-item/index.ts

@@ -9,9 +9,7 @@ VantComponent({
   relation: {
     type: 'ancestor',
     name: 'sidebar',
-    linked(target) {
+    current: 'sidebar-item',
-      this.parent = target;
-    }
   },
 
   props: {

packages/sidebar/index.ts

@@ -4,14 +4,11 @@ VantComponent({
   relation: {
     name: 'sidebar-item',
     type: 'descendant',
-    linked(target) {
+    current: 'sidebar',
-      this.children.push(target);
+    linked() {
       this.setActive(this.data.activeKey);
     },
-    unlinked(target) {
+    unlinked() {
-      this.children = this.children.filter(
-        (item: WechatMiniprogram.Component.TrivialInstance) => item !== target
-      );
       this.setActive(this.data.activeKey);
     }
   },
@@ -25,7 +22,6 @@ VantComponent({
   },
 
   beforeCreate() {
-    this.children = [];
     this.currentActive = -1;
   },
 

packages/tab/index.ts

@@ -4,12 +4,7 @@ VantComponent({
   relation: {
     name: 'tabs',
     type: 'ancestor',
-    linked(target) {
+    current: 'tab',
-      this.parent = target;
-    },
-    unlinked() {
-      this.parent = null;
-    }
   },
 
   props: {

packages/tabbar-item/index.ts

@@ -10,7 +10,8 @@ VantComponent({
 
   relation: {
     name: 'tabbar',
-    type: 'ancestor'
+    type: 'ancestor',
+    current: 'tabbar-item',
   },
 
   data: {

packages/tabbar/index.ts

@@ -6,15 +6,12 @@ VantComponent({
   relation: {
     name: 'tabbar-item',
     type: 'descendant',
+    current: 'tabbar',
     linked(target) {
-      this.children.push(target);
       target.parent = this;
       target.updateFromParent();
     },
-    unlinked(target) {
+    unlinked() {
-      this.children = this.children.filter(
-        (item: TrivialInstance) => item !== target
-      );
       this.updateChildren();
     }
   },
@@ -50,10 +47,6 @@ VantComponent({
     }
   },
 
-  beforeCreate() {
-    this.children = [];
-  },
-
   methods: {
     updateChildren() {
       const { children } = this;

packages/tabs/index.ts

@@ -13,14 +13,13 @@ VantComponent({
   relation: {
     name: 'tab',
     type: 'descendant',
+    current: 'tabs',
     linked(target) {
-      target.index = this.children.length;
+      target.index = this.children.length - 1;
-      this.children.push(target);
       this.updateTabs();
     },
-    unlinked(target) {
+    unlinked() {
       this.children = this.children
-        .filter((child: TrivialInstance) => child !== target)
         .map((child: TrivialInstance, index: number) => {
           child.index = index;
           return child;
@@ -114,10 +113,6 @@ VantComponent({
     container: null
   },
 
-  beforeCreate() {
-    this.children = [];
-  },
-
   mounted() {
     this.setData({
       container: () => this.createSelectorQuery().select('.van-tabs')