@joker.front/core
Version:
Joker is a framework platform designed to provide support for all development scenarios. Among them, Joker.front is a front-end development framework under the Joker platform. It provides standardized front-end development standards, adopts an object-orie
227 lines (226 loc) • 7.91 kB
TypeScript
import { AST, IComponent, RENDER_HANDLER } from "@joker.front/ast";
import { NodeChangeType, ParserTemplate } from "./parser";
import { VNode } from "./parser/vnode";
import { PropType } from "./props";
declare const PROPS_DATA_KEY: unique symbol;
declare const PROPS_DATA_PROXY: unique symbol;
declare const PRIVATE_WATCHERS: unique symbol;
declare const EVENT_DATA_KEY: unique symbol;
export declare const IS_DESTROY: unique symbol;
export declare const PARSER_TEMPLATE_TARGET: unique symbol;
export type TemplateType = Array<AST.Node> | ((h: typeof RENDER_HANDLER) => Array<AST.Node>);
export declare const SCOPE_ID: unique symbol;
export declare const JOKER_COMPONENT_TAG: unique symbol;
declare const TRANSFORM_FUNCTION_FLAG: unique symbol;
export type ComponentConstructor = typeof Component<any>;
export type ImportComponentConstructor = () => Promise<{
default: ComponentConstructor;
}>;
export type SectionType = {
asts: AST.Node[];
ob?: Component & Record<string, any>;
parser?: ParserTemplate;
params?: string[];
};
type DefaultKeyVal = Record<string | symbol, any>;
/**
* Joker component
*/
export declare class Component<T extends DefaultKeyVal = {}> implements IComponent {
$sections: Record<string, SectionType>;
readonly isKeepAlive?: boolean | undefined;
static [JOKER_COMPONENT_TAG]: boolean;
/**
* scopeId for css scoping
*/
[SCOPE_ID]?: string;
/**
* Observable data (with hijacking observation capability)
*/
model: DefaultKeyVal;
/**
* Render template
*/
template?: TemplateType;
/**
* Mount root
*/
$root: any;
/**
* Whether it is slept
*/
isSleeped: boolean;
/**
* Available declared components
*/
components: Record<string, ComponentConstructor | ImportComponentConstructor>;
/**
* Props auxiliary constraints
* @example { name:"default value", age:Number }
* Can configure default values or constraints, type reference PropType
*/
propsOption?: Partial<Record<keyof T, PropType | any>>;
private [PROPS_DATA_KEY];
private [PARSER_TEMPLATE_TARGET]?;
private [PROPS_DATA_PROXY]?;
private [PRIVATE_WATCHERS];
private [EVENT_DATA_KEY];
private [IS_DESTROY];
private [TRANSFORM_FUNCTION_FLAG];
/**
* @param propData prop parameters
* @param sections Render partial area
* @param isKeepAlive Whether to keep alive, when enabled, only the UI part will be destroyed during destroy, and the data will not be destroyed until destroy(true) is used
*/
constructor(propData?: T, $sections?: Record<string, SectionType>, isKeepAlive?: boolean | undefined);
/**
* Actively declare accepted parameters
* @returns
*/
get props(): Readonly<T>;
/**
* Mount
* @param root
*/
$mount(root: any | VNode.Component): this;
$nextUpdatedRender(callBack?: Function): Promise<any[]> | undefined;
/**
* Node animation, only supports element and component nodes
*/
$nodeTransition(nodeOrRef: string | VNode.Node, mode: "enter" | "leave", name?: string, callBack?: Function, type?: "transition" | "animation"): void;
/**
* Destroy
*/
$destroy(force?: boolean): void;
/**
* VNode ref index set
*/
get $refs(): Readonly<Record<string, Array<VNode.Node>>>;
/**
* Get a single VNode by ref
*/
$getRef<T extends VNode.Node = VNode.Element & VNode.Component>(ref: string): T | undefined;
/**
* Get the VNode collection with the same ref
*/
$getRefs<T extends VNode.Node = VNode.Element & VNode.Component>(ref: string): Array<T> | undefined;
/**
* Unidirectionally synchronize prop values and listen for changes to resynchronize
* @param propKey The props key to observe and synchronize
* @param modelKey The model key to assign, if not passed, assign by prop key
* @param convertVal Value conversion method
*/
$syncProp(propKey: keyof T): void;
$syncProp(propKey: keyof T, modelKey: string): void;
$syncProp(propKey: keyof T, convertVal: (val: any) => any): void;
$syncProp(propKey: keyof T, modelKey: string, convertVal: (val: any) => any): void;
/**
* Root node (virtual DOM)
*/
get $rootVNode(): Readonly<VNode.Root> | undefined;
/**
* Add node change listening
* @param ref ref mark
* @param callBack
* @returns Destroy method
*/
$watchNode(ref: string, callBack: (node: VNode.Node, type: NodeChangeType, property?: string) => void): (() => void) | undefined;
/**
* Observe value changes
* @param express
* @param callBack
* @param forceCallBack Force trigger callback even if the value is the same
* @returns [wathcer value, destroy watcher]
*/
$watch(express: () => any, callBack: (nv?: any, ov?: any) => void, forceCallBack?: boolean): [any, () => void];
/**
* Event registration
* @param eventName
* @param callBack
*/
$on(eventName: string, callBack: VNode.EventCallBack): void;
/**
* Event unload
* @param eventName
* @param callBack
*/
$off(eventName: string, callBack?: VNode.EventCallBack): void;
/**
* Trigger event
* @param eventName Event name
* @param param Parameters
* @param targetEvent event
*/
$trigger(eventName: string, param?: any, targetEvent?: VNode.Event<any>): void;
/**
* Active rendering (only rendering, generally suitable for complex scenarios such as hot updates of template areas/dynamic loading, etc.)
* @param newTemplate Can specify a new template, otherwise use the original template
* @param keepalive When rendering a new template, whether to retain the previous live components (advanced usage)
* @returns
*/
$render(newTemplate?: TemplateType, keepalive?: boolean): void;
/**
* Lifecycle function (initialization completed)
*/
protected created(): void | Promise<void>;
/**
* Lifecycle function (mounting completed)
*/
protected mounted(): void | Promise<void>;
/**
* Lifecycle function (before destruction)
*/
protected beforeDestroy(): void;
/**
* When sleeping, this cycle is only triggered when the keepalive attribute is enabled
*/
protected sleeped(): void;
/**
* When waking up, this cycle is only triggered when the keepalive attribute is enabled
*/
protected wakeup(): void;
/**
* Lifecycle function (after destruction)
*/
protected destroyed(): void;
}
/**
* Register global components
* @param componentsOrName Component name/list
* @param component Component
*/
export declare function registerGlobalComponent(componentsOrName: Record<string, ComponentConstructor | ImportComponentConstructor> | string, component?: ComponentConstructor | ImportComponentConstructor): void;
/**
* Get component by registration key
* @param name Component name
* @returns Component
*/
export declare function getGlobalComponent(key: string): ComponentConstructor | ImportComponentConstructor | undefined;
/**
* Dynamic component container
*/
export declare class ComponentContainer extends Component<{
[key: string]: any;
name: string;
props: object;
"transition-name": string;
}> {
template: never[];
private cache;
mounted(): Promise<void>;
private propsVaule;
created(): void;
initProps(): void;
filterProps(p: string): false | undefined;
loadComponent(componentName?: string): Promise<void>;
beforeDestroy(): void;
removeCache(componentName?: string): void;
}
/**
* Virtual template container, used for grouping, as a component configuration attribute
*/
export declare class Template extends Component {
template: () => AST.Command[];
mounted(): Promise<void>;
}
export {};