refactor(relations): refactor relations & definitions (#3924)

packages/calendar/components/month/index.ts

@@ -33,13 +33,13 @@ VantComponent({
       observer: 'setDays',
     },
     showMark: Boolean,
-    rowHeight: [Number, String],
+    rowHeight: null,
     formatter: {
       type: null,
       observer: 'setDays',
     },
     currentDate: {
-      type: [null, Array],
+      type: null,
       observer: 'setDays',
     },
     allowSameDay: Boolean,
@@ -49,7 +49,7 @@ VantComponent({
 
   data: {
     visible: true,
-    days: [],
+    days: [] as Day[],
   },
 
   methods: {

packages/calendar/index.ts

@@ -37,7 +37,7 @@ VantComponent({
     },
     rangePrompt: String,
     defaultDate: {
-      type: [Number, Array],
+      type: null,
       observer(val) {
         this.setData({ currentDate: val });
         this.scrollIntoView();
@@ -67,7 +67,7 @@ VantComponent({
       value: 'bottom',
     },
     rowHeight: {
-      type: [Number, String],
+      type: null,
       value: ROW_HEIGHT,
     },
     round: {
@@ -103,14 +103,14 @@ VantComponent({
       value: true,
     },
     maxRange: {
-      type: [Number, String],
+      type: null,
       value: null,
     },
   },
 
   data: {
     subtitle: '',
-    currentDate: null,
+    currentDate: null as any,
     scrollIntoView: '',
   },
 

packages/checkbox-group/index.ts

@@ -1,3 +1,4 @@
+import { useChildren } from '../common/relation';
 import { VantComponent } from '../common/component';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
@@ -5,14 +6,9 @@ type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
 VantComponent({
   field: true,
 
-  relation: {
+  relation: useChildren('checkbox', function (target) {
-    name: 'checkbox',
-    type: 'descendant',
-    current: 'checkbox-group',
-    linked(target) {
     this.updateChild(target);
-    },
+  }),
-  },
 
   props: {
     max: Number,
@@ -28,9 +24,7 @@ VantComponent({
 
   methods: {
     updateChildren() {
-      (this.children || []).forEach((child: TrivialInstance) =>
+      this.children.forEach((child) => this.updateChild(child));
-        this.updateChild(child)
-      );
     },
 
     updateChild(child: TrivialInstance) {

packages/checkbox/index.ts

@@ -1,3 +1,4 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 
 function emit(
@@ -11,11 +12,7 @@ function emit(
 VantComponent({
   field: true,
 
-  relation: {
+  relation: useParent('checkbox-group'),
-    name: 'checkbox-group',
-    type: 'ancestor',
-    current: 'checkbox',
-  },
 
   classes: ['icon-class', 'label-class'],
 

packages/circle/index.ts

@@ -40,7 +40,7 @@ VantComponent({
       value: WHITE,
     },
     color: {
-      type: [String, Object],
+      type: null,
       value: BLUE,
       observer() {
         this.setHoverColor().then(() => {

packages/col/index.ts

@@ -1,11 +1,8 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relation: {
+  relation: useParent('row'),
-    name: 'row',
-    type: 'ancestor',
-    current: 'col',
-  },
 
   props: {
     span: Number,

packages/collapse-item/index.ts

@@ -1,14 +1,11 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 import { setContentAnimate } from './animate';
 
 VantComponent({
   classes: ['title-class', 'content-class'],
 
-  relation: {
+  relation: useParent('collapse'),
-    name: 'collapse',
-    type: 'ancestor',
-    current: 'collapse-item',
-  },
 
   props: {
     name: null,

packages/collapse/index.ts

@@ -1,11 +1,8 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 
 VantComponent({
-  relation: {
+  relation: useChildren('collapse-item'),
-    name: 'collapse-item',
-    type: 'descendant',
-    current: 'collapse',
-  },
 
   props: {
     value: {
@@ -24,11 +21,9 @@ VantComponent({
 
   methods: {
     updateExpanded() {
-      this.children.forEach(
+      this.children.forEach((child) => {
-        (child: WechatMiniprogram.Component.TrivialInstance) => {
         child.updateExpanded();
-        }
+      });
-      );
     },
 
     switch(name: string | number, expanded: boolean) {

packages/common/component.ts

@@ -1,33 +1,5 @@
 import { basic } from '../mixins/basic';
-import {
+import { VantComponentOptions } from 'definitions/index';
-  VantComponentOptions,
-  CombinedComponentInstance,
-} from 'definitions/index';
-
-const relationFunctions = {
-  ancestor: {
-    linked(parent) {
-      // @ts-ignore
-      this.parent = parent;
-    },
-    unlinked() {
-      // @ts-ignore
-      this.parent = null;
-    },
-  },
-  descendant: {
-    linked(child) {
-      // @ts-ignore
-      this.children = this.children || [];
-      // @ts-ignore
-      this.children.push(child);
-    },
-    unlinked(child) {
-      // @ts-ignore
-      this.children = (this.children || []).filter((it) => it !== child);
-    },
-  },
-};
 
 function mapKeys(source: object, target: object, map: object) {
   Object.keys(map).forEach((key) => {
@@ -37,46 +9,12 @@ function mapKeys(source: object, target: object, map: object) {
   });
 }
 
-function makeRelation(options, vantOptions, relation) {
+function VantComponent<
-  const { type, name, linked, unlinked, linkChanged } = relation;
+  Data extends WechatMiniprogram.Component.DataOption,
-  const { beforeCreate, destroyed } = vantOptions;
+  Props extends WechatMiniprogram.Component.PropertyOption,
-  if (type === 'descendant') {
+  Methods extends WechatMiniprogram.Component.MethodOption
-    options.created = function () {
+>(vantOptions: VantComponentOptions<Data, Props, Methods>): void {
-      beforeCreate && beforeCreate.bind(this)();
+  const options: WechatMiniprogram.Component.Options<Data, Props, Methods> = {};
-      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,
-    Props,
-    Methods,
-    CombinedComponentInstance<Data, Props, Methods>
-  > = {}
-): void {
-  const options: any = {};
 
   mapKeys(vantOptions, options, {
     data: 'data',
@@ -86,16 +24,10 @@ function VantComponent<Data, Props, Methods>(
     beforeCreate: 'created',
     created: 'attached',
     mounted: 'ready',
-    relations: 'relations',
     destroyed: 'detached',
     classes: 'externalClasses',
   });
 
-  const { relation } = vantOptions;
-  if (relation) {
-    makeRelation(options, vantOptions, relation);
-  }
-
   // add default externalClasses
   options.externalClasses = options.externalClasses || [];
   options.externalClasses.push('custom-class');
@@ -104,20 +36,18 @@ function VantComponent<Data, Props, Methods>(
   options.behaviors = options.behaviors || [];
   options.behaviors.push(basic);
 
+  // add relations
+  const { relation } = vantOptions;
+  if (relation) {
+    options.relations = relation.relations;
+    options.behaviors.push(relation.mixin);
+  }
+
   // map field to form-field behavior
   if (vantOptions.field) {
     options.behaviors.push('wx://form-field');
   }
 
-  if (options.properties) {
-    Object.keys(options.properties).forEach((name) => {
-      if (Array.isArray(options.properties[name])) {
-        // miniprogram do not allow multi type
-        options.properties[name] = null;
-      }
-    });
-  }
-
   // add default options
   options.options = {
     multipleSlots: true,

packages/common/relation.ts

@@ -0,0 +1,71 @@
+type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
+type RelationOption = WechatMiniprogram.Component.RelationOption;
+
+export function useParent(
+  name: string,
+  onEffect?: (this: TrivialInstance) => void
+) {
+  const path = `../${name}/index`;
+
+  return {
+    relations: {
+      [path]: {
+        type: 'ancestor',
+        linked(this: TrivialInstance) {
+          onEffect && onEffect.call(this);
+        },
+        linkChanged(this: TrivialInstance) {
+          onEffect && onEffect.call(this);
+        },
+        unlinked(this: TrivialInstance) {
+          onEffect && onEffect.call(this);
+        },
+      } as RelationOption,
+    },
+
+    mixin: Behavior({
+      created() {
+        Object.defineProperty(this, 'parent', {
+          get: () => this.getRelationNodes(path)[0],
+        });
+
+        Object.defineProperty(this, 'index', {
+          // @ts-ignore
+          get: () => this.parent?.children?.indexOf(this),
+        });
+      },
+    }),
+  };
+}
+
+export function useChildren(
+  name: string,
+  onEffect?: (this: TrivialInstance, target: TrivialInstance) => void
+) {
+  const path = `../${name}/index`;
+
+  return {
+    relations: {
+      [path]: {
+        type: 'descendant',
+        linked(this: TrivialInstance, target) {
+          onEffect && onEffect.call(this, target);
+        },
+        linkChanged(this: TrivialInstance, target) {
+          onEffect && onEffect.call(this, target);
+        },
+        unlinked(this: TrivialInstance, target) {
+          onEffect && onEffect.call(this, target);
+        },
+      } as RelationOption,
+    },
+
+    mixin: Behavior({
+      created() {
+        Object.defineProperty(this, 'children', {
+          get: () => this.getRelationNodes(path) || [],
+        });
+      },
+    }),
+  };
+}

packages/common/utils.ts

@@ -113,3 +113,8 @@ export function toPromise(promiseLike: Promise<unknown> | unknown) {
 
   return Promise.resolve(promiseLike);
 }
+
+export function getCurrentPage<T>() {
+  const pages = getCurrentPages();
+  return pages[pages.length - 1] as T & WechatMiniprogram.Page.TrivialInstance;
+}

packages/definitions/index.ts

@@ -1,32 +1,45 @@
-import { Weapp } from './weapp';
+interface VantComponentInstance {
+  parent: WechatMiniprogram.Component.TrivialInstance;
+  children: WechatMiniprogram.Component.TrivialInstance[];
+  index: number;
+  $emit: (
+    name: string,
+    detail?: unknown,
+    options?: WechatMiniprogram.Component.TriggerEventOption
+  ) => void;
+}
 
-type RecordToAny<T> = { [K in keyof T]: any };
+export type VantComponentOptions<
-
+  Data extends WechatMiniprogram.Component.DataOption,
-export type CombinedComponentInstance<Data, Props, Methods> = Methods &
+  Props extends WechatMiniprogram.Component.PropertyOption,
-  WechatMiniprogram.Component.TrivialInstance &
+  Methods extends WechatMiniprogram.Component.MethodOption
-  Weapp.FormField & {
+> = {
-    data: Data & RecordToAny<Props>;
-  };
-
-export interface VantComponentOptions<Data, Props, Methods, Instance> {
   data?: Data;
   field?: boolean;
   classes?: string[];
   mixins?: string[];
-  props?: Props & Weapp.PropertyOption;
+  props?: Props;
-  relation?: Weapp.RelationOption<Instance> & {
+  relation?: {
-    type: 'ancestor' | 'descendant';
+    relations: Record<string, WechatMiniprogram.Component.RelationOption>;
-    name: string;
+    mixin: string;
-    current: string;
   };
-  relations?: {
+
-    [componentName: string]: Weapp.RelationOption<Instance>;
+  methods?: Methods;
-  };
-  methods?: Methods & Weapp.MethodOption<Instance>;
 
   // lifetimes
-  beforeCreate?: (this: Instance) => void;
+  beforeCreate?: () => void;
-  created?: (this: Instance) => void;
+  created?: () => void;
-  mounted?: (this: Instance) => void;
+  mounted?: () => void;
-  destroyed?: (this: Instance) => void;
+  destroyed?: () => void;
-}
+} & ThisType<
+  VantComponentInstance &
+    WechatMiniprogram.Component.Instance<
+      Data & {
+        name: string;
+        value: any;
+      },
+      Props,
+      Methods
+    > &
+    Record<string, any>
+>;

packages/definitions/weapp.ts

@@ -1,82 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-namespace
-export namespace Weapp {
-  export interface FormField {
-    data: {
-      name: string;
-      value: any;
-    };
-  }
-
-  /**
-   * relation定义，miniprogram-api-typings缺少this定义
-   */
-  export interface RelationOption<Instance> {
-    /** 目标组件的相对关系 */
-    type: 'parent' | 'child' | 'ancestor' | 'descendant';
-    /** 关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后 */
-    linked?(
-      this: Instance,
-      target: WechatMiniprogram.Component.TrivialInstance
-    ): void;
-    /** 关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后 */
-    linkChanged?(
-      this: Instance,
-      target: WechatMiniprogram.Component.TrivialInstance
-    ): void;
-    /** 关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后 */
-    unlinked?(
-      this: Instance,
-      target: WechatMiniprogram.Component.TrivialInstance
-    ): void;
-    /** 如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联 */
-    target?: string;
-  }
-
-  /**
-   * obverser定义，miniprogram-api-typings缺少this定义
-   */
-  type Observer<Instance, T> = (
-    this: Instance,
-    newVal: T,
-    oldVal: T,
-    changedPath: Array<string | number>
-  ) => void;
-
-  /**
-   * methods定义，miniprogram-api-typings缺少this定义
-   */
-  export interface MethodOption<Instance> {
-    [name: string]: (this: Instance, ...args: any[]) => any;
-  }
-
-  export interface ComputedOption<Instance> {
-    [name: string]: (this: Instance) => any;
-  }
-
-  type PropertyType =
-    | StringConstructor
-    | NumberConstructor
-    | BooleanConstructor
-    | ArrayConstructor
-    | ObjectConstructor
-    | FunctionConstructor
-    | null;
-
-  export interface PropertyOption {
-    [name: string]:
-      | PropertyType
-      | PropertyType[]
-      | {
-          /** 属性类型 */
-          type: PropertyType | PropertyType[];
-          /** 属性初始值 */
-          value?: any;
-          /** 属性值被更改时的响应函数 */
-          observer?:
-            | string
-            | Observer<WechatMiniprogram.Component.TrivialInstance, any>;
-          /** 属性的类型（可以指定多个） */
-          optionalTypes?: PropertyType[];
-        };
-  }
-}

packages/dialog/index.ts

@@ -72,6 +72,10 @@ VantComponent({
       confirm: false,
       cancel: false,
     },
+    callback: ((() => {}) as unknown) as (
+      action: string,
+      context: WechatMiniprogram.Component.TrivialInstance
+    ) => {},
   },
 
   methods: {

packages/dropdown-item/index.ts

@@ -1,17 +1,13 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 import { Option } from './shared';
 
 VantComponent({
   field: true,
 
-  relation: {
+  relation: useParent('dropdown-menu', function () {
-    name: 'dropdown-menu',
-    type: 'ancestor',
-    current: 'dropdown-item',
-    linked() {
     this.updateDataFromParent();
-    },
+  }),
-  },
 
   props: {
     value: {
@@ -45,7 +41,7 @@ VantComponent({
   methods: {
     rerender() {
       wx.nextTick(() => {
-        this.parent && this.parent.updateItemListData();
+        this.parent?.updateItemListData();
       });
     },
 
@@ -118,7 +114,7 @@ VantComponent({
       });
 
       if (show) {
-        this.parent.getChildWrapperStyle().then((wrapperStyle: string) => {
+        this.parent?.getChildWrapperStyle().then((wrapperStyle: string) => {
           this.setData({ wrapperStyle, showWrapper: true });
           this.rerender();
         });

packages/dropdown-menu/index.ts

@@ -1,23 +1,15 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 import { addUnit, getRect, getSystemInfoSync } from '../common/utils';
 
-type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
+let ARRAY: WechatMiniprogram.Component.TrivialInstance[] = [];
-let ARRAY: TrivialInstance[] = [];
 
 VantComponent({
   field: true,
 
-  relation: {
+  relation: useChildren('dropdown-item', function () {
-    name: 'dropdown-item',
-    type: 'descendant',
-    current: 'dropdown-menu',
-    linked() {
     this.updateItemListData();
-    },
+  }),
-    unlinked() {
-      this.updateItemListData();
-    },
-  },
 
   props: {
     activeColor: {
@@ -55,7 +47,7 @@ VantComponent({
   },
 
   data: {
-    itemListData: [],
+    itemListData: [] as Record<string, unknown>[],
   },
 
   beforeCreate() {
@@ -71,18 +63,18 @@ VantComponent({
   methods: {
     updateItemListData() {
       this.setData({
-        itemListData: this.children.map((child: TrivialInstance) => child.data),
+        itemListData: this.children.map((child) => child.data),
       });
     },
 
     updateChildrenData() {
-      this.children.forEach((child: TrivialInstance) => {
+      this.children.forEach((child) => {
         child.updateDataFromParent();
       });
     },
 
     toggleItem(active: number) {
-      this.children.forEach((item: TrivialInstance, index: number) => {
+      this.children.forEach((item, index) => {
         const { showPopup } = item.data;
         if (index === active) {
           item.toggle();
@@ -93,7 +85,7 @@ VantComponent({
     },
 
     close() {
-      this.children.forEach((child: TrivialInstance) => {
+      this.children.forEach((child) => {
         child.toggle(false, { immediate: true });
       });
     },

packages/field/index.ts

@@ -18,7 +18,7 @@ VantComponent({
     isLink: Boolean,
     leftIcon: String,
     rightIcon: String,
-    autosize: [Boolean, Object],
+    autosize: null,
     required: Boolean,
     iconClass: String,
     clickable: Boolean,

packages/goods-action-button/index.ts

@@ -1,15 +1,14 @@
 import { VantComponent } from '../common/component';
-import { link } from '../mixins/link';
+import { useParent } from '../common/relation';
 import { button } from '../mixins/button';
+import { link } from '../mixins/link';
 import { openType } from '../mixins/open-type';
 
 VantComponent({
   mixins: [link, button, openType],
-  relation: {
+
-    type: 'ancestor',
+  relation: useParent('goods-action'),
-    name: 'goods-action',
+
-    current: 'goods-action-button',
-  },
   props: {
     text: String,
     color: String,
@@ -33,12 +32,12 @@ VantComponent({
         return;
       }
 
+      const { index } = this;
       const { children = [] } = this.parent;
-      const { length } = children;
+
-      const index = children.indexOf(this);
       this.setData({
         isFirst: index === 0,
-        isLast: index === length - 1,
+        isLast: index === children.length - 1,
       });
     },
   },

packages/goods-action/index.ts

@@ -1,36 +1,17 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 
 VantComponent({
-  relation: {
+  relation: useChildren('goods-action-button', function () {
-    type: 'descendant',
+    this.children.forEach((item) => {
-    name: 'goods-action-button',
+      item.updateStyle();
-    current: 'goods-action',
+    });
-    linked() {
+  }),
-      this.updateStyle();
+
-    },
-    unlinked() {
-      this.updateStyle();
-    },
-    linkChanged() {
-      this.updateStyle();
-    },
-  },
   props: {
     safeAreaInsetBottom: {
       type: Boolean,
       value: true,
     },
   },
-
-  methods: {
-    updateStyle() {
-      wx.nextTick(() => {
-        this.children.forEach(
-          (child: WechatMiniprogram.Component.TrivialInstance) => {
-            child.updateStyle();
-          }
-        );
-      });
-    },
-  },
 });

packages/grid-item/index.ts

@@ -1,12 +1,9 @@
-import { link } from '../mixins/link';
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { link } from '../mixins/link';
 
 VantComponent({
-  relation: {
+  relation: useParent('grid'),
-    name: 'grid',
-    type: 'ancestor',
-    current: 'grid-item',
-  },
 
   classes: ['content-class', 'icon-class', 'text-class'],
 

packages/grid/index.ts

@@ -1,11 +1,8 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 
 VantComponent({
-  relation: {
+  relation: useChildren('grid-item'),
-    name: 'grid-item',
-    type: 'descendant',
-    current: 'grid',
-  },
 
   props: {
     square: {
@@ -13,7 +10,7 @@ VantComponent({
       observer: 'updateChildren',
     },
     gutter: {
-      type: [Number, String],
+      type: null,
       value: 0,
       observer: 'updateChildren',
     },
@@ -48,11 +45,9 @@ VantComponent({
 
   methods: {
     updateChildren() {
-      this.children.forEach(
+      this.children.forEach((child) => {
-        (child: WechatMiniprogram.Component.TrivialInstance) => {
         child.updateStyle();
-        }
+      });
-      );
     },
   },
 });

packages/index-anchor/index.ts

@@ -1,12 +1,9 @@
 import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 
 VantComponent({
-  relation: {
+  relation: useParent('index-bar'),
-    name: 'index-bar',
-    type: 'ancestor',
-    current: 'index-anchor',
-  },
 
   props: {
     useSlot: Boolean,

packages/index-bar/index.ts

@@ -1,5 +1,6 @@
 import { GREEN } from '../common/color';
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 import { getRect } from '../common/utils';
 import { pageScrollMixin } from '../mixins/page-scroll';
 
@@ -15,17 +16,9 @@ const indexList = () => {
 };
 
 VantComponent({
-  relation: {
+  relation: useChildren('index-anchor', function () {
-    name: 'index-anchor',
-    type: 'descendant',
-    current: 'index-bar',
-    linked() {
     this.updateData();
-    },
+  }),
-    unlinked() {
-      this.updateData();
-    },
-  },
 
   props: {
     sticky: {
@@ -95,8 +88,7 @@ VantComponent({
 
     setAnchorsRect() {
       return Promise.all(
-        this.children.map(
+        this.children.map((anchor) =>
-          (anchor: WechatMiniprogram.Component.TrivialInstance) =>
           getRect(anchor, '.van-index-anchor-wrapper').then((rect) => {
             Object.assign(anchor, {
               height: rect.height,
@@ -287,8 +279,7 @@ VantComponent({
       this.scrollToAnchorIndex = index;
 
       const anchor = this.children.find(
-        (item: WechatMiniprogram.Component.TrivialInstance) =>
+        (item) => item.data.index === this.data.indexList[index]
-          item.data.index === this.data.indexList[index]
       );
 
       if (anchor) {

packages/mixins/basic.ts

@@ -3,13 +3,13 @@ export const basic = Behavior({
     $emit(
       name: string,
       detail?: Record<string, unknown>,
-      options?: Record<string, unknown>
+      options?: WechatMiniprogram.Component.TriggerEventOption
     ) {
       this.triggerEvent(name, detail, options);
     },
 
-    set(data: object, callback: () => void) {
+    set(data: Record<string, unknown>) {
-      this.setData(data, callback);
+      this.setData(data);
 
       return new Promise((resolve) => wx.nextTick(resolve));
     },

packages/mixins/page-scroll.ts

@@ -1,19 +1,15 @@
+import { getCurrentPage } from '../common/utils';
+
 type IPageScrollOption = WechatMiniprogram.Page.IPageScrollOption;
 type Scroller = (
   this: WechatMiniprogram.Component.TrivialInstance,
   event?: IPageScrollOption
 ) => void;
-type TrivialInstance = WechatMiniprogram.Page.TrivialInstance & {
-  vanPageScroller?: Scroller[];
-};
-
-function getCurrentPage(): TrivialInstance {
-  const pages = getCurrentPages();
-  return pages[pages.length - 1] || ({} as TrivialInstance);
-}
 
 function onPageScroll(event?: IPageScrollOption) {
-  const { vanPageScroller = [] } = getCurrentPage();
+  const { vanPageScroller = [] } = getCurrentPage<{
+    vanPageScroller: Scroller[];
+  }>();
 
   vanPageScroller.forEach((scroller: Scroller) => {
     if (typeof scroller === 'function') {
@@ -26,7 +22,7 @@ function onPageScroll(event?: IPageScrollOption) {
 export const pageScrollMixin = (scroller: Scroller) =>
   Behavior({
     attached() {
-      const page = getCurrentPage();
+      const page = getCurrentPage<{ vanPageScroller: Scroller[] }>();
 
       if (Array.isArray(page.vanPageScroller)) {
         page.vanPageScroller.push(scroller.bind(this));
@@ -41,9 +37,8 @@ export const pageScrollMixin = (scroller: Scroller) =>
     },
 
     detached() {
-      const page = getCurrentPage();
+      const page = getCurrentPage<{ vanPageScroller: Scroller[] }>();
-      page.vanPageScroller = (page.vanPageScroller || []).filter(
+      page.vanPageScroller =
-        (item) => item !== scroller
+        page.vanPageScroller?.filter((item) => item !== scroller) || [];
-      );
     },
   });

packages/notify/index.ts

@@ -31,6 +31,9 @@ VantComponent({
 
   data: {
     show: false,
+    onOpened: (null as unknown) as () => void,
+    onClose: (null as unknown) as () => void,
+    onClick: (null as unknown) as (detail: Record<string, null>) => void,
   },
 
   created() {

packages/notify/index.wxs

@@ -1,5 +1,6 @@
 /* eslint-disable */
 var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function rootStyle(data) {
   return style({

packages/picker/index.ts

@@ -151,13 +151,11 @@ VantComponent({
 
     // get values of all columns
     getValues() {
-      return this.children.map(
+      return this.children.map((child) => child.getValue());
-        (child: WechatMiniprogram.Component.TrivialInstance) => child.getValue()
-      );
     },
 
     // set values of all columns
-    setValues(values: []) {
+    setValues(values: any[]) {
       const stack = values.map((value, index) =>
         this.setColumnValue(index, value)
       );
@@ -166,10 +164,7 @@ VantComponent({
 
     // get indexes of all columns
     getIndexes() {
-      return this.children.map(
+      return this.children.map((child) => child.data.currentIndex);
-        (child: WechatMiniprogram.Component.TrivialInstance) =>
-          child.data.currentIndex
-      );
     },
 
     // set indexes of all columns

packages/radio-group/index.ts

@@ -1,16 +1,12 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 
 VantComponent({
   field: true,
 
-  relation: {
+  relation: useChildren('radio', function (target) {
-    name: 'radio',
-    type: 'descendant',
-    current: 'radio-group',
-    linked(target) {
     this.updateChild(target);
-    },
+  }),
-  },
 
   props: {
     value: {

packages/radio/index.ts

@@ -1,13 +1,10 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 
 VantComponent({
   field: true,
 
-  relation: {
+  relation: useParent('radio-group'),
-    name: 'radio-group',
-    type: 'ancestor',
-    current: 'radio',
-  },
 
   classes: ['icon-class', 'label-class'],
 

packages/rate/index.ts

@@ -90,7 +90,7 @@ VantComponent({
         if (target != null) {
           this.onSelect({
             ...event,
-            currentTarget: target,
+            currentTarget: (target as unknown) as WechatMiniprogram.Target,
           });
         }
       });

packages/row/index.ts

@@ -1,18 +1,14 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 
 VantComponent({
-  relation: {
+  relation: useChildren('col', function (target) {
-    name: 'col',
-    type: 'descendant',
-    current: 'row',
-    linked(target) {
     const { gutter } = this.data;
 
     if (gutter) {
       target.setData({ gutter });
     }
-    },
+  }),
-  },
 
   props: {
     gutter: {
@@ -23,8 +19,8 @@ VantComponent({
 
   methods: {
     setGutter() {
-      this.getRelationNodes('../col/index').forEach((col) => {
+      this.children.forEach((col) => {
-        col.setData(this.data.gutter);
+        col.setData(this.data);
       });
     },
   },

packages/sidebar-item/index.ts

@@ -1,13 +1,10 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 
 VantComponent({
   classes: ['active-class', 'disabled-class'],
 
-  relation: {
+  relation: useParent('sidebar'),
-    type: 'ancestor',
-    name: 'sidebar',
-    current: 'sidebar-item',
-  },
 
   props: {
     dot: Boolean,

packages/sidebar/index.ts

@@ -1,17 +1,10 @@
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
 
 VantComponent({
-  relation: {
+  relation: useChildren('sidebar-item', function () {
-    name: 'sidebar-item',
-    type: 'descendant',
-    current: 'sidebar',
-    linked() {
     this.setActive(this.data.activeKey);
-    },
+  }),
-    unlinked() {
-      this.setActive(this.data.activeKey);
-    },
-  },
 
   props: {
     activeKey: {

packages/stepper/index.ts

@@ -39,7 +39,7 @@ VantComponent({
     disableInput: Boolean,
     decimalLength: {
       type: Number,
-      value: null,
+      value: (null as unknown) as number,
       observer: 'check',
     },
     min: {

packages/sticky/index.ts

@@ -122,8 +122,8 @@ VantComponent({
     getContainerRect() {
       const nodesRef: WechatMiniprogram.NodesRef = this.data.container();
 
-      return new Promise((resolve) =>
+      return new Promise<WechatMiniprogram.BoundingClientRectCallbackResult>(
-        nodesRef.boundingClientRect(resolve).exec()
+        (resolve) => nodesRef.boundingClientRect(resolve).exec()
       );
     },
   },

packages/swipe-cell/index.ts

@@ -28,7 +28,7 @@ VantComponent({
     },
     asyncClose: Boolean,
     name: {
-      type: [Number, String],
+      type: null,
       value: '',
     },
   },

packages/tab/index.ts

@@ -1,11 +1,8 @@
+import { useParent } from '../common/relation';
 import { VantComponent } from '../common/component';
 
 VantComponent({
-  relation: {
+  relation: useParent('tabs'),
-    name: 'tabs',
-    type: 'ancestor',
-    current: 'tab',
-  },
 
   props: {
     dot: {
@@ -29,7 +26,7 @@ VantComponent({
       observer: 'update',
     },
     name: {
-      type: [Number, String],
+      type: null,
       value: '',
     },
   },

packages/tabbar-item/index.ts

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
 
 VantComponent({
   props: {
@@ -12,14 +13,12 @@ VantComponent({
     },
   },
 
-  relation: {
+  relation: useParent('tabbar'),
-    name: 'tabbar',
-    type: 'ancestor',
-    current: 'tabbar-item',
-  },
 
   data: {
     active: false,
+    activeColor: '',
+    inactiveColor: '',
   },
 
   methods: {

packages/tabbar/index.ts

@@ -1,21 +1,13 @@
-import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+import { getRect } from '../common/utils';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
 
 VantComponent({
-  relation: {
+  relation: useChildren('tabbar-item', function () {
-    name: 'tabbar-item',
-    type: 'descendant',
-    current: 'tabbar',
-    linked(target) {
-      target.parent = this;
-      target.updateFromParent();
-    },
-    unlinked() {
     this.updateChildren();
-    },
+  }),
-  },
 
   props: {
     active: {

packages/tabs/index.ts

@@ -8,6 +8,7 @@ import {
   requestAnimationFrame,
 } from '../common/utils';
 import { isDef } from '../common/validator';
+import { useChildren } from '../common/relation';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
 
@@ -16,24 +17,9 @@ VantComponent({
 
   classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
 
-  relation: {
+  relation: useChildren('tab', function () {
-    name: 'tab',
-    type: 'descendant',
-    current: 'tabs',
-    linked(target) {
-      target.index = this.children.length - 1;
     this.updateTabs();
-    },
+  }),
-    unlinked() {
-      this.children = this.children.map(
-        (child: TrivialInstance, index: number) => {
-          child.index = index;
-          return child;
-        }
-      );
-      this.updateTabs();
-    },
-  },
 
   props: {
     sticky: Boolean,
@@ -45,22 +31,22 @@ VantComponent({
     animated: {
       type: Boolean,
       observer() {
-        this.children.forEach((child: TrivialInstance, index: number) =>
+        this.children.forEach((child, index) =>
           child.updateRender(index === this.data.currentIndex, this)
         );
       },
     },
     lineWidth: {
-      type: [String, Number],
+      type: null,
       value: 40,
       observer: 'resize',
     },
     lineHeight: {
-      type: [String, Number],
+      type: null,
       value: -1,
     },
     active: {
-      type: [String, Number],
+      type: null,
       value: 0,
       observer(name) {
         if (name !== this.getCurrentName()) {
@@ -108,7 +94,7 @@ VantComponent({
     scrollLeft: 0,
     scrollable: false,
     currentIndex: 0,
-    container: null,
+    container: (null as unknown) as () => WechatMiniprogram.NodesRef,
     skipTransition: true,
     lineOffsetLeft: 0,
   },

packages/tree-select/index.ts

@@ -22,7 +22,7 @@ VantComponent({
       observer: 'updateSubItems',
     },
     height: {
-      type: [Number, String],
+      type: null,
       value: 300,
     },
     max: {

packages/uploader/index.ts

@@ -16,7 +16,7 @@ VantComponent({
       value: 80,
     },
     name: {
-      type: [Number, String],
+      type: null,
       value: '',
     },
     accept: {
@@ -65,7 +65,7 @@ VantComponent({
   },
 
   data: {
-    lists: [],
+    lists: [] as File[],
     isInCount: true,
   },
 
@@ -168,7 +168,7 @@ VantComponent({
       if (!this.data.previewFullImage) return;
 
       const { index } = event.currentTarget.dataset;
-      const { lists } = this.data as { lists: File[] };
+      const { lists } = this.data;
       const item = lists[index];
 
       wx.previewImage({

tsconfig.json

@@ -11,8 +11,7 @@
     "lib": ["ESNext"],
     "types": ["miniprogram-api-typings"],
     "paths": {
-      "definitions/*": ["./packages/definitions/*"],
+      "definitions/*": ["./packages/definitions/*"]
-      "packages/*": ["./packages/*"]
     },
     "skipLibCheck": true
   },