@opentiny/vue-renderless

import * as vue from 'vue'; /** 该文件以Vue3版本的适配器为依据，编写了本声明，本文涉及以下术语： * instance : 即一个Vue3组件实例， conext, attrs，emit等很多属性 * vm，parentVm : 适配器封装的一个数据结构，具有大量$属性，以及组件上其它属性 * emitter : 适配器中，自己封装的一个EventBus对象，和instance.emit没关系。 vm.$emit 会同时触发 instance.emit和instance.$emitter。 * subTree : instance.subTree 是组件当前的vnode描述 */ /** hooks 变量: renderless的第二个参数 */ type ISharedRenderlessParamHooks = typeof vue; /** utils变量: renderless的第三个参数 */ interface ISharedRenderlessParamUtils<CT = never> { /** 当前使用的框架 */ framework: 'vue3' | 'vue2' | 'vue2.7'; /** 组件前缀，默认为 Tiny */ $prefix: string; /** 所有规范的配置 */ globalDesignConfig: { components?: IComponentDesignConfig; name?: string; version?: string; }; /** 当前组件的规范配置 */ designConfig: IComponentDesignConfig; /** app的root上的i18n对象，renderless基本没有使用它 */ i18n: any; /** 组件内国际化，常用函数 */ t: (path: string, options?: any) => string; /** 组件模式。 * @mark 等同于 vm.$mode, 取值为：pc mobile mobile-first */ mode: 'pc' | 'mobile' | 'mobile-first'; /** 是否为 mobile */ isMobileMode: boolean; /** 是否为 pc */ isPCMode: boolean; /** 是否为mobile-first */ isMobileFirstMode: boolean; /** vue组件实例的context.attrs */ attrs: any; /** 返回组件props._constants */ constants: CT; /** vue的内置nextTick，其实可以从第二参 hooks中获取, 还可以通过当前vm.$nextTick来获取 */ nextTick: typeof vue.nextTick; /** parentVm */ parent: ITinyVm<CT>; /** 当前vm */ vm: ITinyVm<CT>; /** 第一次mount加载后的所有refs，不会更新！ ⭐要避免使用 */ refs: Record<string, any>; /** 组件初化时的页面路由，不会更新！ * @mark ⭐要避免使用, 请使用vm.$refs */ route: any; /** 当前的router实例。从app的根上读取 */ router: any; /** 从app的根上读取: root?.$service, 用户必须引用服务适配器的包，并传入app后，才有该变量 */ service: any; /** 调用从app的根上$getService: root?.$getService(vm) */ getService: any; /** 返回 instance.slots。 vue2,vue3的这2个属性是同一个引用： scopedSlots===slots。 */ slots: Record<string, Function>; /** 返回 instance.slots */ scopedSlots: Record<string, Function>; /** 向实例的 subTree.children 深度遍历发送广播消息。如果component找到了触发component.emit(eventName, params) * @param componentName 组件名 */ broadcast: (componentName: string, eventName: string, params?: any) => void; /** 向实例的 parent开始查找componentName，找到匹配第一个组件，触发component.emit(eventName, params) */ dispatch: (componentName: string, eventName: string, params?: any) => void; /** 向实例的subTree 遍历。 * 1、handler 是函数： handler入参{level,vm,el,options,isLevel1}. 给每个子节点遍历调用函数。 * 2、handler 是非函数：直接通过 instance.subTree 来生成一个同等树状的vm数据。 * @mark ⭐全局有4个组件使用到`handler是函数`的用法，用于遍历子节点，将符合条件的信息收集到一个数组中。 */ childrenHandler: (handler?: (node: { level: number; vm: ITinyVm<CT>; el: any; options: any; isLevel1: any; }) => void) => void | any[]; /** 向实例的 parent 遍历。 * 1、handler 是函数： handler入参{level,vm,el,options}. 遍历父节点。若handler处理某个节点时，返回true，则停止！ * 2、handler 是非函数：直接返回{level,vm,el,options} 的数据体。 * @mark ⭐全局未有使用该函数 */ parentHandler: (handler?: () => boolean) => void | any; /** 给 instance.parent 的ctx 赋值,同时给parentVm 赋值。适配器的内部方法⭐要避免使用 */ setParentAttribute: ({ name, value }: { name: any; value: any; }) => void; /** 给 vm 和 instance.ctx 同时添加属性。 * @param props Object.defineProperties的第2参, 格式：{ property1: {value: 42,writable: true},property2: {...} } */ defineInstanceProperties: (props: PropertyDescriptorMap & ThisType<any>) => void; /** 给parentVm 添加属性。 */ defineParentInstanceProperties: (props: PropertyDescriptorMap & ThisType<any>) => void; /** 返回 context.emit */ emit: (event: any, ...args: any[]) => void; /** Tiny 适配器中，自行封装的一个 EventBus模型的工厂函数。⭐每次调用才返回一个新的模型对象。 * @mark vm中，会给instance添加一个$emitter=emitter() ,就是该函数返回的模型。 vm中的$on, $off,$once 都是该模型的方法。 * @mark ⭐所以不要直接使用该函数。 */ emitter: () => { emit: (eventname: string) => void; on: (eventname: string, callback: Function, once?: boolean) => void; off: (eventname: string, callback: Function) => void; once: (eventname: string, callback: Function) => void; }; /** 合并 tailwind 类 */ mergeClass: (...cssClasses: any[]) => string; } /** vue.ts的一个混合上下文，也是index.ts 文件中二层函数的入参混合体。 */ type ISharedRenderlessFunctionParams<CT = null> = { api: object; props: object; state: object; } & ISharedRenderlessParamHooks & ISharedRenderlessParamUtils<CT>; /** 单个组件的规范的配置 */ interface IComponentDesignConfig { icons?: Record<string, any>; renderless?: (props: any, hooks: ISharedRenderlessParamHooks, utils: ISharedRenderlessParamUtils<any>, sdk: any) => any; [otherKey: string]: any; } /** Tiny-Vue的Adapter 内部为组件创建的Vm */ interface ITinyVm<CT = never> { /** 从instance.attrs上，过滤出所有的非函数的attrs */ $attrs: Record<string, any>; /** 从instance.attrs上，过滤出所有的函数的attrs, 并对大驼峰属性名转化为下划线名 */ $listeners: Record<string, Function>; /** 返回instance.subTree的同等树状的vm数据 */ $children: any[]; /** 返回 instance.props._constants */ $constants: CT; /** 返回 instance.vnode.el */ $el: HTMLElement; /** 返回 instance._tiny_mode */ $mode: 'pc' | 'mobile' | 'mobile-first'; /** 即 hooks.nextTick */ $nextTick: typeof vue.nextTick; /** 自动触发 instance.emit 和 instance.$emitter 两处地方 */ $emit: (...args: any[]) => void; /** instance.$emitter.off, 不传任何参数则是移除所有事件 */ $off: (eventname?: string, callback?: Function) => void; /** instance.$emitter.on */ $on: (eventname: string, callback: Function) => void; /** instance.$emitter.once */ $once: (eventname: string, callback: Function) => void; /** 返回 instance.type.componentName。 * @mark instance.type 可能是字符串，也可能是组件类，所以只有组件类的时候，才能返回组件的真实名字 */ $options: { componentName: string | undefined; }; /** 返回 instance.parent */ $parent: vue.ComponentPublicInstance; /** 返回 instance.refs, * @mark ⭐ 尽量使用这个，每次都会是最新的refs */ $refs: Record<string, any>; /** 返回 instance.slots */ $slots: Record<string, Function>; /** 返回 instance.slots */ $scopedSlots: Record<string, Function>; /** 给target赋值。 vue2是调用instance.$set * @mark vue3是响应数据，直接转为 target[propertyName] = value。 * @mark vue2 可能有数据修改不触发响应，就要调用$set去修改值。 * @whenUse ⭐ Vue2组件中修改数据不触发响应时，要使用该$set. instance.$set */ $set: (target: any, propertyName: any, value: any) => void; /** 返回 props.tiny_renderless */ $renderless: Function; /** 返回 props.tiny_template */ $template: any; /** 适配器或组件内，可能会赋值很多其它属性 */ [otherProps: string]: any; } export { ISharedRenderlessFunctionParams, ISharedRenderlessParamHooks, ISharedRenderlessParamUtils, ITinyVm };