compelem 0.0.0 → 0.1.0-beta

package/decorators/event.d.ts

@@ -0,0 +1,26 @@
+import { CompElem } from "../CompElem";
+/**
+ * 事件选项
+ */
+export type EventOption = {
+    /**
+     * 事件绑定目标，默认document
+     */
+    target?: Object | ((comp?: CompElem) => HTMLElement);
+    /**
+     * 是否深度监控
+     */
+    capture?: boolean;
+    /**
+     * 是否仅执行一次
+     */
+    once?: boolean;
+    passive?: boolean;
+};
+/**
+ * 绑定非视图事件，如window/document等
+ * @param eventName 事件名
+ * @param immediate 立即执行
+ * @param deep 深度监控
+ */
+export declare function event(eventName: string, options?: EventOption): (target: any, name: string, descriptor: PropertyDescriptor) => void;

package/decorators/prop.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 属性定义
+ */
+export type PropOption = {
+    /**
+     * 参数类型
+     */
+    type: any;
+    /**
+     * 是否必填，默认false
+     */
+    required?: boolean;
+    /**
+     * 是否可以修改属性，默认false
+     */
+    sync?: boolean;
+    /**
+     * 是否关联属性，prop会生成dom属性且当属性变动时自动更新值。默认true
+     */
+    attribute?: boolean;
+    /**
+     * 是否发生变更，如果未指定使用严格相等
+     * @param newValue
+     * @param oldValue
+     * @returns
+     */
+    hasChanged?: (newValue: any, oldValue: any) => boolean;
+    /**
+     * 设置属性getter，可以通过 get 函数方式设置
+     * @returns
+     */
+    getter?: () => any;
+    /**
+     * 设置属性setter，可以通过 set 函数方式设置
+     * @returns
+     */
+    setter?: (v: any) => void;
+    /**
+     * 当传递参数值为string类型且参数类型不是string时会调用转换器进行转换
+     * @param stringValue
+     * @returns
+     */
+    converter?: (stringValue: string) => any;
+    _defaultValue?: any;
+    /**
+     * 属性校验器，可动态校验值是否合法
+     * @param value
+     * @returns
+     */
+    isValid?: (value: any, props?: Record<string, any>) => boolean;
+};
+/**
+ * 声明一个由外部传入的单向更新属性
+ * @param options 可选参数 PropOption，如果type未定义则根据默认值自动推断类型
+ */
+export declare function prop(options: PropOption): (target: any, propertyKey: any) => void;
+export declare function prop(target: any, propertyKey: any): void;

package/decorators/query.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 缓存策略
+ */
+export declare enum QueryCache {
+    ONCE = "once",//仅缓存一次（首次查询到结果时）
+    UPDATABLE = "updatable"
+}
+/**
+ * 事件选项
+ */
+export type QueryOption = {
+    /**
+     * 指示是否返回任何可用子<slot>元素的指定节点（true）或不返回（false）
+     */
+    flatten?: boolean;
+    /**
+     * 对节点列表进行过滤
+     */
+    selector?: string;
+    /**
+     * 缓存标识
+     */
+    cache?: string;
+};
+export declare const query: (selector: string, cache?: QueryCache | undefined) => (...metadata: any[]) => void;
+export declare const queryAll: (selector: string, cache?: QueryCache | undefined) => (...metadata: any[]) => void;

package/decorators/state.d.ts

@@ -0,0 +1,19 @@
+export type StateOption = {
+    /**
+     * 指定prop进行初始化，如果时对象类型时
+     */
+    prop?: string;
+    /**
+     * 是否发生变更，如果未指定使用严格相等
+     * @param newValue
+     * @param oldValue
+     * @returns
+     */
+    hasChanged?: (newValue: any, oldValue: any) => boolean;
+};
+/**
+ * 声明一个可双向变动的属性
+ * @param options 可选参数 {prop从prop获取初始值}，如果type未定义则根据默认值自动推断类型
+ */
+export declare function state(target: any, stateKey: any): void;
+export declare function state(options: StateOption): (target: any, stateKey: any) => void;

package/decorators/tag.d.ts

@@ -0,0 +1,6 @@
+import { CompElem } from "../CompElem";
+/**
+ * class用注解，用于自动注册自定义组件
+ * @param name 自定义组件名称
+ */
+export declare function tag(name: string): (target: typeof CompElem) => void;

package/decorators/watch.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 监控定义
+ */
+export type WatchOptions = {
+    /**
+     * 是否立即执行
+     */
+    immediate?: boolean;
+    /**
+     * 是否深度监控
+     */
+    deep?: boolean;
+    /**
+     * 是否仅执行一次
+     */
+    once?: boolean;
+};
+export type WatchHandler = (newValue: any, oldValue: any, source: string) => any;
+/**
+ * 装饰器
+ */
+export type DecoratorWatch = {
+    handler: WatchHandler;
+    options: WatchOptions;
+};
+export declare const watch: (source: string | string[], options?: WatchOptions | undefined) => (...metadata: any[]) => void;

package/directive/Directive.d.ts

@@ -0,0 +1,43 @@
+import { Template } from "../render/render";
+import { DirectiveUpdateTag, TmplFn } from "../types";
+import { EnterPointType } from "./index";
+declare const Directive_base: {
+    new (...args: any[]): {
+        [x: string]: any;
+        render(...args: any): void | Template | Template[] | ((...args: any[]) => (Template | Template[]));
+        __expPos: Record<string, import("../types").ExpPos>;
+        __expPosMap: Record<string, Record<string, import("../types").ExpPos> | null>;
+        __directives: Record<string, Directive>;
+        slotComponent: import("..").CompElem;
+        renderComponent: import("..").CompElem;
+        renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, import("../types").ExpPos>, Record<string, Record<string, import("../types").ExpPos> | null>];
+        updateContext(...args: any): void;
+        __updateExpPos(tmpl: Template, _expPos: Record<string, import("../types").ExpPos>): void;
+    };
+} & ObjectConstructor;
+/**
+ * 用于解析HTML模板
+ * @author holyhigh2
+ */
+export declare abstract class Directive extends Directive_base {
+    _renderArgs: any[];
+    /**
+     * 指令使用范围，超出范围会报错
+     */
+    static get scopes(): Array<EnterPointType>;
+    /**
+     * 更新时调用
+     * @param point
+     */
+    abstract update(nodes: Node[], newArgs: any[], oldArgs: any[]): DirectiveUpdateTag;
+    /**
+     * 调用实现
+     * 如果返回tmplFn则表示异步渲染
+     */
+    abstract render(...args: any): Template | Template[] | void | TmplFn;
+    /**
+     * 指令渲染参数变量链
+     */
+    renderParams: Array<string[]>;
+}
+export {};

package/directive/index.d.ts

@@ -0,0 +1,52 @@
+import { CompElem } from "../CompElem";
+import { Directive } from "./Directive";
+/**
+ * 属性定义
+ */
+export declare enum EnterPointType {
+    ATTR = "attr",//属性，文本内容，可以内嵌多插值
+    PROP = "prop",//参数，智能内嵌一个插值
+    TEXT = "text",
+    CLASS = "class",
+    STYLE = "style",
+    SLOT = "slot",
+    TAG = "tag"
+}
+/**
+ * 交互点信息
+ */
+export declare class EnterPoint {
+    startNode: Node;
+    endNode: Node;
+    type: EnterPointType;
+    attrName: string;
+    varIndex: number;
+    expressionChain: string;
+    nodes: Node[];
+    constructor(level: number, node: Node, attrName: string, type: EnterPointType);
+    setVarIndex(varIndex: number): void;
+}
+/**
+ * Delay the actual time of execution of directive
+ */
+export declare class DirectiveWrapper extends Function {
+    #private;
+    diClass: any;
+    args: any[];
+    di: Directive;
+    varPath: string;
+    point: EnterPoint;
+    slotComponent: CompElem;
+    varChain: any[];
+    constructor(diClass: typeof Directive, ...args: any[]);
+    checkScope(scopeType: string): void;
+    render(component: CompElem): NodeListOf<ChildNode>;
+    update(nodes: Node[], newArgs: any[], oldArgs: any[]): void;
+    getDirective(): Directive;
+}
+/**
+ * 返回指令调用函数
+ * @param di
+ * @returns
+ */
+export declare function directive<T extends Array<any>>(diClass: typeof Directive): (...args: T) => DirectiveWrapper;

package/directives/Bind.d.ts

@@ -0,0 +1 @@
+export declare const bind: (obj: Record<string, any>) => import("../directive/index").DirectiveWrapper;

package/directives/Classes.d.ts

@@ -0,0 +1 @@
+export declare const classes: (clazz: string | Record<string, string | boolean> | string[]) => import("../directive/index").DirectiveWrapper;

package/directives/ForEach.d.ts

@@ -0,0 +1,2 @@
+import { TmplFn } from "../types";
+export declare const forEach: (value: any[] | Record<string, any[]>, cbk: TmplFn) => import("../directive/index").DirectiveWrapper;

package/directives/IfElse.d.ts

@@ -0,0 +1,2 @@
+import { TmplFn } from "../types";
+export declare const ifElse: (condition: boolean, tmplFn1: TmplFn, tmplFn2: TmplFn) => import("../directive/index").DirectiveWrapper;

package/directives/IfTrue.d.ts

@@ -0,0 +1,2 @@
+import { TmplFn } from "../types";
+export declare const ifTrue: (condition: boolean, tmplFn: TmplFn) => import("../directive/index").DirectiveWrapper;

package/directives/Model.d.ts

@@ -0,0 +1,5 @@
+export declare const enum ModelTriggerType {
+    CHANGE = "change",
+    INPUT = "input"
+}
+export declare const model: (modelValue: any) => import("../directive/index").DirectiveWrapper;

package/directives/Show.d.ts

@@ -0,0 +1 @@
+export declare const show: (isVisible: boolean) => import("../directive/index").DirectiveWrapper;

package/directives/Slot.d.ts

@@ -0,0 +1,2 @@
+import { TmplFn } from "../types";
+export declare const slot: (cbk: TmplFn, slotName?: string | undefined) => import("../directive/index").DirectiveWrapper;

package/directives/Styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: (styles: string | Record<string, string>) => import("../directive/index").DirectiveWrapper;

package/directives/Sync.d.ts

@@ -0,0 +1 @@
+export declare const sync: (syncValue: any) => import("../directive/index").DirectiveWrapper;

package/directives/When.d.ts

@@ -0,0 +1,2 @@
+import { TmplFn } from "../types";
+export declare const when: (value: any, cases: TmplFn[][] | Record<string | number, TmplFn>) => import("../directive/index").DirectiveWrapper;

package/events/event.d.ts

@@ -0,0 +1,13 @@
+import { CompElem } from "../CompElem";
+export declare const MODI_PARAM_DIVIDER = ":";
+/*************************************************************
+ * 事件修饰符
+ * @author holyhigh2
+ *
+ * 通用 debounce/stop/prevent/once/throttle/self 可组合
+ * 鼠标 left/right/middle 不可组合
+ * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
+ *
+ * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
+ *************************************************************/
+export declare function addEvent(fullName: string, cbk: (ev: Event) => any, node: Element, component: CompElem): (ev: Event) => any;

package/events/extends.d.ts

@@ -0,0 +1,2 @@
+export declare function isExtEvent(evName: string): boolean;
+export declare function addExtEvent(evName: string, node: Element, cbk: (ev: Event) => any, parts: string[]): void;

package/index.d.ts

@@ -0,0 +1,26 @@
+import { createRef, html, RefObject, Template } from "./render/render";
+export * from "./decorator/Decorator";
+export * from "./decorator/index";
+export * from "./decorators/computed";
+export * from "./decorators/event";
+export * from "./decorators/prop";
+export * from "./decorators/query";
+export * from "./decorators/state";
+export * from "./decorators/tag";
+export * from "./decorators/watch";
+export * from "./directive/Directive";
+export * from "./directive/index";
+export * from "./directives/Bind";
+export * from "./directives/Classes";
+export * from "./directives/ForEach";
+export * from "./directives/IfElse";
+export * from "./directives/IfTrue";
+export * from "./directives/Model";
+export * from "./directives/Show";
+export * from "./directives/Slot";
+export * from "./directives/Styles";
+export * from "./directives/Sync";
+export * from "./directives/When";
+export { createRef, html, RefObject, Template };
+export * from './CompElem';
+export * from './types';