vue3-oop
Version:
vue3-oop take class component and di into vue
279 lines (264 loc) • 12.6 kB
TypeScript
import * as _vue_reactivity from '@vue/reactivity';
import * as vue from 'vue';
import { InjectionKey, VNodeChild, VNodeProps, StyleValue, ComponentCustomProps, SetupContext, Prop, ComponentOptions as ComponentOptions$1, ComponentPublicInstance, VNodeRef, customRef, WatchOptionsBase, DefineSetupFnComponent, SlotsType, EmitsOptions, ShortEmitsToObject, EmitsToProps, ComponentPropsOptions, Slots, FunctionalComponent as FunctionalComponent$1 } from 'vue';
import { Provider, ReflectiveInjector, Type } from 'injection-js';
declare const InjectorKey: InjectionKey<ReflectiveInjector>;
declare module 'vue' {
interface App {
getStore(): any;
getService(token: any): any;
}
}
interface ComponentOptions {
/**
* 依赖的服务
*/
providers?: Provider[];
/**
* 排除掉的服务
*/
exclude?: Provider[];
/**
* 自动分析依赖
*/
autoResolveDeps?: boolean;
/**
* 此注入器是否作为全局的store
*/
globalStore?: boolean;
/**
* option是否是稳定的,
* 依赖解析只会在第一次的时候解析并且缓存下来,所以options如果是动态变化的,请标记
*/
stable?: boolean;
}
declare function Component(options?: ComponentOptions): ClassDecorator;
declare function resolveComponent(target: {
new (...args: []): any;
}): any;
/**
* 获取当前的注射器,可用于外部使用
*/
declare function getCurrentInjector(): ReflectiveInjector;
/** 手动创建当前注射器, 只能用在 setup 中 */
declare function createCurrentInjector(providers: Provider[], exclude?: Provider[]): ReflectiveInjector;
/**
* 从当前容器中获取服务
* @param token
* @param notFoundValue
*/
declare function injectService<T extends Type<any>>(token: T, notFoundValue?: any): InstanceType<T>;
declare function injectService<T>(token: string | number | symbol | Type<any>, notFoundValue?: any): T;
interface Constructable {
constructor: Function;
}
declare function provideService<T extends Constructable>(...service: T[]): ReflectiveInjector;
/**
* 装饰器处理
*/
interface Hanlder {
key: string;
handler: (targetThis: any) => void;
}
type KeysOfUnion<T> = T extends T ? keyof T : never;
type DefaultSlots = {
default(): VNodeChild;
};
type MixDefaultSlots<T extends {}> = 'default' extends keyof T ? {} : DefaultSlots;
type WithVSlots<T extends Record<string, any>> = {
'v-slots'?: 'slots' extends keyof T ? Partial<T['slots'] & {
$stable: boolean;
} & MixDefaultSlots<T['slots']>> : Partial<{
$stable: boolean;
default(): VNodeChild;
}>;
};
type WithSlotTypes<T extends {}> = Omit<SetupContext, 'slots'> & {
slots: NonNullable<VueComponentProps<T>['v-slots']>;
};
type ModelProps<T extends {}> = Exclude<{
[Prop in keyof T]: T extends {
[k in Prop as `onUpdate:${k & string}`]?: any;
} ? Prop : never;
}[keyof T], undefined>;
type WithVModel<T extends {}, U extends keyof T = ModelProps<T>> = TransformModelValue<{
[k in U as `v-model:${k & string}`]?: T[k] | [T[k], string[]];
}>;
type TransformModelValue<T extends {}> = 'v-model:modelValue' extends keyof T ? Omit<T, 'v-model:modelValue'> & {
['v-model']?: T['v-model:modelValue'];
} : T;
type ComponentProps<T extends {}> = ComponentPropsObject<T> | Array<KeysOfUnion<DistributiveOmit<T, 'slots'>>>;
type ComponentPropsObject<T extends {}> = {
[U in KeysOfUnion<DistributiveOmit<T, 'slots'>>]-?: Prop<any>;
};
type ComponentSlots<T extends {
props: any;
}> = NonNullable<T['props']['v-slots']>;
/** 为了阻止ts把不相关的类也解析到metadata数据中,用这个工具类型包装一下类 */
type ClassType<T> = T;
interface ClassAndStyleProps {
class?: any;
style?: StyleValue;
[name: string]: any;
}
type DistributiveOmit<T, K extends keyof any> = T extends T ? Omit<T, K> : never;
type DistributiveVModel<T extends {}> = T extends T ? WithVModel<T> : never;
type DistributiveVSlots<T extends {}> = T extends T ? WithVSlots<T> : never;
type VueComponentProps<T extends {}> = DistributiveOmit<T, 'slots'> & DistributiveVModel<T> & DistributiveVSlots<T> & VNodeProps & ClassAndStyleProps & ComponentCustomProps;
declare const GlobalStoreKey = "GlobalStoreKey";
declare class VueComponent<T extends {} = {}> {
/** 装饰器处理 */
static handler: Hanlder[];
/** 是否自定义解析组件 */
static resolveComponent: typeof resolveComponent;
/** 热更新使用 */
static __hmrId?: string;
/** 组件显示名字 */
static displayName?: string;
/** 组件的属性定义 */
static defaultProps?: any;
/** vue options emits */
static emits?: string[];
/**
* 是否继承多余的属性
*/
static inheritAttrs?: boolean;
static __vccOpts__value?: ComponentOptions$1;
/** 组件option定义,vue3遇到类组件会从此属性获取组件的option */
static __vccOpts: ComponentOptions$1;
/** 组件属性 */
props: VueComponentProps<T>;
/** 组件上下文 */
context: WithSlotTypes<T>;
/** 组件内部实例,如果使用组件实例请 this.$.proxy */
$: vue.ComponentInternalInstance;
/** 主要给jsx提示用 */
get $props(): VueComponentProps<T>;
get $el(): any;
get $data(): {};
get $attrs(): {
[x: string]: unknown;
};
get $slots(): Omit<NonNullable<VueComponentProps<T>['v-slots']>, '$stable'>;
get $options(): vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, vue.ComponentProvideOptions> & {
beforeCreate?: (() => void) | (() => void)[];
created?: (() => void) | (() => void)[];
beforeMount?: (() => void) | (() => void)[];
mounted?: (() => void) | (() => void)[];
beforeUpdate?: (() => void) | (() => void)[];
updated?: (() => void) | (() => void)[];
activated?: (() => void) | (() => void)[];
deactivated?: (() => void) | (() => void)[];
beforeDestroy?: (() => void) | (() => void)[];
beforeUnmount?: (() => void) | (() => void)[];
destroyed?: (() => void) | (() => void)[];
unmounted?: (() => void) | (() => void)[];
renderTracked?: ((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[];
renderTriggered?: ((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[];
errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
};
get $refs(): {
[x: string]: unknown;
};
get $parent(): ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, vue.ComponentProvideOptions>, {}, {}, "", {}, any> | null;
get $root(): ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, vue.ComponentProvideOptions>, {}, {}, "", {}, any> | null;
get $emit(): (event: string, ...args: any[]) => void;
get $forceUpdate(): () => void;
get $nextTick(): typeof vue.nextTick;
get $watch(): <T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, _vue_reactivity.OnCleanup]) => any : (...args: [any, any, _vue_reactivity.OnCleanup]) => any, options?: vue.WatchOptions) => vue.WatchStopHandle;
constructor();
/** 渲染函数 */
render?(ctx: ComponentPublicInstance, cache: any[]): VNodeChild;
/**
* 组件初始化逻辑
* 如果设置 static async = true,并且返回promise则为异步setup组件
* 需配合 suspense 组件使用
*/
init?(): any;
/**
* 标记为异步初始化组件, 配合init使用
*/
static async?: boolean;
}
declare function useForwardRef(): (ref: any) => void;
declare function mergeRefs(...values: VNodeRef[]): (ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void;
declare class VueService {
static handler: Hanlder[];
constructor();
}
declare const Mut: MutDecorator;
type RefFactory = Parameters<typeof customRef>[0];
interface MutDecorator {
/**
* @param shallowOrRefFactory
*/
(shallowOrRefFactory?: true | RefFactory): PropertyDecorator;
MetadataKey: string | symbol;
}
declare function defMut(targetThis: Record<string | symbol, any>, key: string | symbol, options: any): void;
declare const Computed: ComputedDecorator;
type EagerType = true | WatchOptionsBase['flush'];
interface ComputedDecorator {
/**
* @param eager 是否是急切的获取值
*/
(eager?: EagerType): MethodDecorator;
MetadataKey: string | symbol;
}
declare const Link: LinkDecorator;
interface LinkDecorator {
(refName?: string): PropertyDecorator;
MetadataKey: symbol | string;
}
type Lifecycle = 'BeforeMount' | 'Mounted' | 'BeforeUpdate' | 'Updated' | 'BeforeUnmount' | 'Unmounted' | 'Activated' | 'Deactivated' | 'ErrorCaptured' | 'RenderTracked' | 'RenderTriggered' | 'ServerPrefetch';
declare const Hook: HookDecorator;
interface HookDecorator {
(lifecycle: Lifecycle | Lifecycle[]): MethodDecorator;
MetadataKey: string | symbol;
}
interface DecoratorFn<T, IsMethod = false> {
(options: T): IsMethod extends false ? PropertyDecorator : MethodDecorator;
MetadataKey: string | symbol;
}
interface MetadataStore<T> {
key: string | symbol;
options: T;
desc?: PropertyDescriptor | null;
}
declare function createDecorator<T = void>(name: string, allowRepeat?: boolean): DecoratorFn<T, false>;
declare function getProtoMetadata<T = void>(target: any, key: symbol | string, withDesc?: boolean): MetadataStore<T>[];
/**
* 自动绑定this !!!此装饰器必须放在最上面
*/
declare function Autobind(): ClassDecorator & MethodDecorator;
declare function useProps<T>(): T;
declare function useCtx(): SetupContext;
declare function getCurrentApp(): vue.App<any> | undefined;
declare function getEmitsFromProps(defaultProps: Record<string, any> | string[]): string[];
declare function createSymbol(name: string): string | symbol;
type RemovePrefix<K extends string, P extends string> = K extends `${P}${infer Event}` ? Uncapitalize<Event> : never;
type ExtractProps<T> = Omit<T, `render${string}`> & Partial<Pick<T, keyof T & `render${string}`>>;
type ExtractEvent<T> = {
[P in keyof T as RemovePrefix<string & P, 'on'>]: T[P];
};
type ExtractSlots<T> = {
[P in keyof T as RemovePrefix<string & P, 'render'>]: T[P];
};
type ComponentType<T extends Record<any, any>, S extends Record<any, any>, Expose extends Record<any, any>> = DefineSetupFnComponent<ExtractProps<T>, ExtractEvent<T>, SlotsType<ExtractSlots<T> & S>> & {
new (...args: any[]): Expose;
};
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
interface FunctionalComponent<P = {}, E extends EmitsOptions | Record<string, any[]> = {}, S extends Record<string, any> = any, EE extends EmitsOptions = ShortEmitsToObject<E>> {
(props: P & EmitsToProps<EE>, ctx: SetupContext<EE, IfAny<S, {}, SlotsType<S>>>): any;
props?: ComponentPropsOptions<P>;
emits?: EE | (keyof EE)[];
slots?: IfAny<S, Slots, SlotsType<S>>;
expose?: string[];
inheritAttrs?: boolean;
displayName?: string;
compatConfig?: FunctionalComponent$1['compatConfig'];
}
declare function camelizePropKey(p: string | symbol): string | symbol;
declare function useClassAndStyle(): ClassAndStyleProps;
declare function defineComponent<T extends Record<any, any>, S extends Record<any, any> = {}, M extends Record<any, any> = {}>(comp: FunctionalComponent<T, any, S>, extraOptions?: ComponentOptions$1): ComponentType<T, S, M>;
export { Autobind, type ClassAndStyleProps, type ClassType, Component, type ComponentOptions, type ComponentProps, type ComponentPropsObject, type ComponentSlots, type ComponentType, Computed, type ExtractEvent, type ExtractProps, type ExtractSlots, type FunctionalComponent, GlobalStoreKey, type Hanlder, Hook, InjectorKey, Link, Mut, VueComponent, VueService, type WithVModel, camelizePropKey, createCurrentInjector, createDecorator, createSymbol, defMut, defineComponent, getCurrentApp, getCurrentInjector, getEmitsFromProps, getProtoMetadata, injectService, mergeRefs, provideService, useClassAndStyle, useCtx, useForwardRef, useProps };