diff --git a/CHANGELOG.md b/CHANGELOG.md index 826d0d0..1272909 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +# 0.1.5 + +* **主要变更** + + - [+] 增加 `my.createIntersectionObserver` 及相关类型的声明。 + +* **Refactor** + + - 将 `ComponentOptions` 重构为 interface 以便业务自行扩展。 + # 0.1.4 * **主要变更** diff --git a/package.json b/package.json index 5474659..9911956 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mini-types", - "version": "0.1.4", + "version": "0.1.5", "description": "TypeScript declarations for Alipay's mini program.", "scripts": { "lint": "dtslint types", diff --git a/types/api/ui/intersectionObserver.d.ts b/types/api/ui/intersectionObserver.d.ts new file mode 100644 index 0000000..0c0993c --- /dev/null +++ b/types/api/ui/intersectionObserver.d.ts @@ -0,0 +1,104 @@ +/** + * @file IntersectionObserver 对象,用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 + */ +declare namespace my { + namespace intersectionObserver { + interface ICreateOptions { + /** + * 一个数值数组,包含所有阈值 + */ + thresholds?: number[]; + + /** + * 初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数 + */ + initialRatio?: number; + + /** + * 是否同时观测多个目标节点(而非一个),如果设为 `true` ,observe 的 targetSelector 将选中多个节点(注意:同时选中过多节点将影响渲染性能) + */ + selectAll?: boolean; + } + + interface IRect { + /** + * 左边界 + */ + left: number; + + /** + * 右边界 + */ + right: number; + + /** + * 上边界 + */ + top: number; + + /** + * 下边界 + */ + bottom: number; + } + + interface IObserveResult { + /** + * 相交比例 + */ + intersectionRatio: number; + + /** + * 相交区域的边界 + */ + intersectionRect: IRect; + + /** + * 目标边界 + */ + boundingClientRect: IRect; + + /** + * 参照区域的边界 + */ + relativeRect: IRect; + + /** + * 相交检测时的时间戳 + */ + time: number; + } + + interface IIntersectionObserverInstance { + /** + * 指定页面显示区域作为参照区域之一 + */ + relativeToViewport(margins?: Partial): IIntersectionObserverInstance; + + /** + * 使用选择器指定一个节点,作为参照区域之一 + */ + relativeTo(selector: string, margins?: Partial): IIntersectionObserverInstance; + + /** + * 指定目标节点,并开始监听相交状态变化情况 + */ + observe( + targetSelector: string, + callback: (res: IObserveResult) => any, + ): IIntersectionObserverInstance; + + /** + * 停止监听回调函数将不再触发 + */ + disconnect(): void; + } + } + + /** + * 获取一个相交监测对象 IntersectionObserver + */ + function createIntersectionObserver( + options?: intersectionObserver.ICreateOptions, + ): intersectionObserver.IIntersectionObserverInstance; +} diff --git a/types/component.d.ts b/types/component.d.ts index 9b551ab..76bc861 100644 --- a/types/component.d.ts +++ b/types/component.d.ts @@ -69,31 +69,43 @@ declare namespace tinyapp { $spliceData: SpliceDataMethod; } + interface IInternalComponentOptions { + /** + * 组件间代码复用机制 + */ + mixins?: Array>; + + /** + * 组件内部状态 + */ + data?: D; + + /** + * 为外部传入的数据设置默认值 + */ + props?: P; + + /** + * 组件的方法,可以是事件响应函数或任意的自定义方法 + */ + methods?: M & ThisType & M>; + } + + interface IComponentOptions< + P extends Record = Record, + D = any, + M extends IComponentMethods = IComponentMethods, + > extends IComponentLifeCycleMethods, IInternalComponentOptions, ThisType & M> { + } + + /** + * 为了兼容旧版用法,下一个大版本可能删掉,请使用 `IComponentOptions` + * + * @deprecated + */ type ComponentOptions< P extends Record = Record, D = any, M extends IComponentMethods = IComponentMethods, - > = IComponentLifeCycleMethods - & { - /** - * 组件间代码复用机制 - */ - mixins?: Array>; - - /** - * 组件内部状态 - */ - data?: D; - - /** - * 为外部传入的数据设置默认值 - */ - props?: P; - - /** - * 组件的方法,可以是事件响应函数或任意的自定义方法 - */ - methods?: M & ThisType & M>; - } - & ThisType & M>; + > = IComponentOptions }