compelem 0.2.3-beta → 0.3.0-b1

package/CompElem.d.ts

@@ -1,20 +1,15 @@
 import { Directive } from "./directive/Directive";
 import { IComponent } from "./IComponent";
-import { Template } from "./render/render";
-import { IRenderContext } from "./render/RenderContext";
-import { TmplFn } from "./types";
+import { IView } from "./render/RenderContext";
+import { Template } from "./render/Template";
+import { DefaultProps, TmplFn } from "./types";
 declare const CompElem_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: CompElem;
+        __updatePoints: Array<import("./types").UpdatePoint>;
         renderComponent: 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;
+        buildView(tmpl: Template): NodeListOf<ChildNode>;
+        updateView(tmpl: Template): void;
     };
 } & {
     new (): HTMLElement;
@@ -29,15 +24,17 @@ declare const CompElem_base: {
 export declare class CompElem extends CompElem_base implements IComponent {
     #private;
     static __l_globalRule: HTMLStyleElement;
+    static defaults(options: DefaultProps): void;
     __events: Record<string, Array<Node | ((e: Event) => void)>[]>;
+    get [Symbol.toStringTag](): string;
     get reactiveData(): Record<string, any>;
     get attrs(): Record<string, string>;
     get props(): Record<string, any>;
     get renderRoot(): HTMLElement;
     get renderRoots(): HTMLElement[];
-    get parentComponent(): HTMLElement | null;
+    get parentComponent(): CompElem | null;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
-    get styles(): CSSStyleSheet[];
+    get css(): CSSStyleSheet[];
     get isMounted(): boolean;
     get slots(): Record<string, Array<Node>>;
     /**
@@ -49,29 +46,17 @@ export declare class CompElem extends CompElem_base implements IComponent {
      */
     static get styles(): Array<string | CSSStyleSheet>;
     static get globalStyles(): Array<string>;
-    get css(): string;
+    get styles(): Array<() => string>;
     constructor(...args: any[]);
     connectedCallback(): void;
     disconnectedCallback(): void;
     __init(): void;
-    /**
-     * 初始化属性及状态，该回调内可以访问props和state
-     * 此时组件dom并未构建，但已有parent 属性，没有root属性
-     */
-    connected(): void;
-    /**
-     * props初始化完成回调
-     */
-    propsReady(): void;
-    /**
-     * 每次更新时调用
-     */
+    propsReady(props: Record<string, any>): void;
     render(): Template;
-    /**
-     * dom渲染完毕后调用，该回调内可以query注解初始化完成
-     */
+    beforeMount(): void;
     mounted(): void;
     slotChange(slot: HTMLSlotElement, name: string): void;
+    attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
     /**
      * 是否需要更新，可获取变更属性
      * 返回true时更新
@@ -117,7 +102,7 @@ export declare class CompElem extends CompElem_base implements IComponent {
      * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
      * @returns
      */
-    _notify(ov: any, chain: string[]): void;
+    _notify(ov: any, chain: string[]): any;
     /**
      * @deprecated
      */
@@ -130,8 +115,12 @@ export declare class CompElem extends CompElem_base implements IComponent {
     _bindSlot(slot: HTMLSlotElement, name: string, props: Record<string, any>): void;
     _bindSlotHook(name: string, hook: (...args: any[]) => Template): void;
     _updateSlot(name: string, propName?: string, value?: any): void;
-    _asyncDirectives: WeakMap<TmplFn, IRenderContext>;
+    _asyncDirectives: WeakMap<TmplFn, IView>;
     renderAsync(cbk: TmplFn, ...args: any[]): void;
+    /**
+     * todo
+     * 1. 取消上溯递归路径
+     */
     _regDeps(varPath: string, renderContext: CompElem | Directive): void;
 }
 export {};

package/IComponent.d.ts

@@ -1,4 +1,4 @@
-import { Template } from "./render/render";
+import { Template } from "./render/Template";
 /**
  * 组件接口
  * 定义组件属性、生命周期及方法
@@ -12,15 +12,19 @@ export interface IComponent {
     get parentComponent(): HTMLElement | null;
     get slots(): Record<string, Array<Node>>;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
-    get styles(): CSSStyleSheet[];
+    get css(): CSSStyleSheet[];
     get isMounted(): boolean;
-    connected(): void;
-    propsReady(): void;
+    get styles(): Array<() => string>;
+    propsReady(props: Record<string, any>): void;
     render(): Template;
+    beforeMount(): void;
     mounted(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     shouldUpdate(changed: Record<string, any>): boolean;
     updated(changed: Record<string, any>): void;
-    slotChange(slot: HTMLSlotElement, name: string): void;
+    slotChange(slot: HTMLSlotElement, slotName: string): void;
+    attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
     /**
      * 抛出自定义事件
      * @param evName 事件名称

package/README.md

@@ -43,11 +43,15 @@ export class PageTest extends CompElem {
       }...`];
   }
   //动态样式
-  get css() {
-    return `h2,p,i,h3{
-      background-image:${this.color}
-      filter:hue-rotate(${this.rotation}deg)
-    }`
+  get styles() {
+    return [
+      () => `h2,p,i,h3{
+        background-image:${this.color};
+      }`,
+      () => `h2,p,i,h3{
+        filter:hue-rotate(${this.rotation}deg);
+      }`,
+    ]
   }
 
   @query('i[name="text"]')
@@ -140,10 +144,10 @@ export class PageTest extends CompElem {
   ```
   对于需要动态控制 host 元素样式可以使用组件实例 getter
   ```ts
-  get css():string{
-    return `:host{
+  get styles(){
+    return [()=>`:host{
       ${this.border?'border: 1px solid rgb(var(--l-color-border-secondary)); ':''}
-    }`
+    }`]
   }
   ```
 - ### 属性
@@ -250,7 +254,7 @@ export class PageTest extends CompElem {
   - `readonly` shadowRoot 阴影DOM
   - `readonly` slots 插槽元素映射
   - `readonly` slotHooks 动态插槽钩子映射
-  - `readonly` styles 组件样式对象列表
+  - `readonly` css 组件样式对象列表
   - `readonly` attrs 组件特性
   - `readonly` props 组件属性
   - slotComponent 所在插槽组件
@@ -269,17 +273,18 @@ CompElem 组件既可以在 CompElem 环境内调用，也可以直接在原生
 | ------------------------------------------------------------ | --- | ----------- |
 | 1. 创建组件实例，完成类属性默认值设置（prop/state/...)       |     |             |
 | 2. 初始化类全局样式（仅一次）及 实例样式(产生 styles 数组)   |     |             |
-| 3. 创建 shadowRoot 并挂载组件样式                            |     | constructor |
-| 4. 绑定 parentComponent                                               |     | connected   |
-| 5. 获取 attrs 及 parentProps 进行验证及初始化 props |     | propsReady  |
-| 6. 注入 link 外部样式表                                      |     |             |
-| 7. 渲染 render 及依赖绑定                                    |     | render      |
-| 8. 绑定 renderRoot 及 renderRoots                                            |     |             |
-| 9. 执行 ref                                                  |     |             |
-| 10. 执行 @query 注解                                         |     |             |
-| 11. 执行 @watch(immediate) 注解                              |     |             |
-| 12. 执行 @event 注解                                         |     | mounted     |
-| 13. 执行 slot filter / 动态 slot                             |     | slotChange  |
+| 3. 注入 link 外部样式表                                      |     |             |
+| 4. 创建 shadowRoot 并挂载组件样式                            |     |  |
+| 5. 执行装饰器create回调                                      |     |    constructor         |
+| 6. 绑定 parentComponent                                               |     |    |
+| 7. 验证及初始化 props |     |  propsReady |
+| 8. 初始化 states |     |   |
+| 9. 渲染 render 及依赖绑定                                    |     | render      |
+| 10. 绑定 renderRoot 及 renderRoots                                            |     |             |
+| 11. 初始化插槽 slots                                            |     |   beforeMount  |
+| 12. 执行装饰器 beforeMount 回调 ，包括 @watch(immediate)、@computed、@event、@query                                     |     |             |
+| 13. 初始化 css getter                                                   |     |     mounted        |
+| 14. 执行装饰器 mounted 回调 ，包括 @watch                                     |     |             |
 
 > 更新流程【普通】
 
@@ -410,8 +415,30 @@ static get autoSlot() {
 
 ## 事件
 
-事件分为三类
+在CompElem中事件分为三类
 
 1. 原生事件 —— `<div @click="..."`，监听器回调参数返回原生事件对象
-2. 组件自定义事件 —— `<l-select @change="..."`，监听器回调参数返回`CustomEvent`事件对象
-3. 扩展原生事件 —— `<div @resize="..."`，监听器回调参数返回`CustomEvent`事件对象
+2. 扩展原生事件 —— `<div @resize="..."`，监听器回调参数返回`CustomEvent`事件对象
+3. 组件自定义事件 —— `<l-select @change="..."`，监听器回调参数返回`CustomEvent`事件对象
+
+### 事件修饰符
+通过`.`号可使用修饰符修饰事件如 `@scroll.throttle:100="${...}"`
+- 全部通用 —— `debounce/throttle/once` 可组合
+- 原生通用 —— `stop/prevent/self` 可组合
+- 鼠标 —— `left/right/middle` 不可组合
+- 键盘 —— `ctrl/alt/shift/meta` 可组合 `esc/a/b/c/d...` 不可组合,多个key并列表示可选
+- mutate —— `attr/child/char/tree` 可组合
+> 部分修饰符支持参数，可使用冒号传参 —— `throttle:100 / debounce:100`。支持列表如下
+  - throttle:wait
+  - debounce:wait
+  ```html
+  <!-- 示例 -->
+  <div @mutate.child.throttle:100="...">
+  <div @click.left.once="...">
+  <div @mousedown.stop.prevent="...">
+  ```
+### 扩展原生事件
+可直接用于DOM元素的扩展事件（非组件事件），支持列表如下
+- resize 元素尺寸变化时触发
+- outside 鼠标点击元素外部时触发，可通过修饰符限制鼠标点击类型`outside.[mousedown/up/click/dblclick]`，默认click
+- mutate 内容变化时触发。基于  Mutation Observer API

package/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 共享内容
+ */
+export declare const ChangedMap: WeakMap<WeakKey, any>;
+export declare const EXP_KEY: RegExp;
+export declare enum CollectorType {
+    CSS = 1,
+    COMPUTED = 2
+}
+export declare enum DecoratorKey {
+    PROPS = "__deco_props",
+    STATES = "__deco_states",
+    COMPUTED = "__deco_computed",
+    WATCH = "__deco_watch",
+    EVENTS = "__deco_events"
+}

package/decorator/Decorator.d.ts

@@ -10,13 +10,9 @@ export declare enum DecoratorType {
  */
 export declare abstract class Decorator {
     /**
-     * 通过函数方式进行装饰器调用
-     * @param target 所在类
-     * @param deco 装饰器函数
-     * @param fieldName 装饰器应用的字段名/函数名/函数
-     * @param args 不定参数
+     * 优先级，越大越先执行
      */
-    static call(target: any, deco: Function, fieldName: string | Function, ...args: any[]): void;
+    static get priority(): number;
     /**
      * 装饰器使用范围，超出范围会报错
      */
@@ -36,7 +32,7 @@ export declare abstract class Decorator {
      * @param setReactive 为实例设置响应属性，注意，仅是设置到了instance.reactiveData中并非this.key。如需实现this访问，可自行定义组件的properties
      * @param args 装饰器函数参数
      */
-    abstract propsReady(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): any;
+    abstract beforeMount(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): any;
     abstract mounted(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): any;
     abstract updated(component: CompElem, changed: Record<string, any>): any;
 }

package/decorator/index.d.ts

@@ -19,9 +19,10 @@ export declare class DecoratorWrapper {
     decoratorClass: Constructor<Decorator>;
     instanceMap: WeakMap<CompElem, Decorator>;
     key?: string;
+    priority: number;
     constructor(args: any[], metadata: any[], decoratorClass: Constructor<Decorator>);
     create(comp: CompElem): void;
-    propsReady(comp: CompElem, setReactive: (key: string, value: any) => any): void;
+    beforeMount(comp: CompElem, setReactive: (key: string, value: any) => any): void;
     mounted(comp: CompElem, setReactive: (key: string, value: any) => any): void;
     updated(comp: CompElem, changed: Record<string, any>): void;
 }

package/decorators/computed.d.ts

@@ -6,5 +6,4 @@
  * @param immediate 立即执行
  * @param deep 深度监控
  */
-export declare function computed(arg?: any): void;
-export declare function computed(target: any, propertyKey: string): void;
+export declare function computed(...args: any[]): void;

package/decorators/watch.d.ts

@@ -15,12 +15,5 @@ export type WatchOptions = {
      */
     once?: boolean;
 };
+export declare function watch(source: string | string[], options?: WatchOptions): (target: any, name: any) => void;
 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, handler?: WatchHandler | undefined) => (...metadata: any[]) => any;

package/directive/Directive.d.ts

@@ -1,18 +1,13 @@
-import { Template } from "../render/render";
-import { DirectiveUpdateTag, TmplFn } from "../types";
-import { EnterPointType } from "./index";
+import { Template } from "../render/Template";
+import { DirectiveUpdateTag } from "../types";
+import { EnterPoint, 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;
+        __updatePoints: Array<import("../types").UpdatePoint>;
         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;
+        buildView(tmpl: Template): NodeListOf<ChildNode>;
+        updateView(tmpl: Template): void;
     };
 } & ObjectConstructor;
 /**
@@ -29,12 +24,16 @@ export declare abstract class Directive extends Directive_base {
      * 更新时调用
      * @param point
      */
-    abstract update(nodes: Node[], newArgs: any[], oldArgs: any[]): DirectiveUpdateTag;
+    abstract update(point: EnterPoint, newArgs: any[], oldArgs: any[]): DirectiveUpdateTag;
     /**
-     * 调用实现
-     * 如果返回tmplFn则表示异步渲染
+     * 渲染HTML内容，该回调内无法访问DOM
      */
-    abstract render(...args: any): Template | Template[] | void | TmplFn;
+    abstract render(...args: any): Template | void;
+    /**
+     * 指令所在DOM创建后渲染前调用，可以访问插入点信息
+     * 此时可对DOM进行操作
+     */
+    abstract created(point: EnterPoint, ...args: any): void;
     /**
      * 指令渲染参数变量链
      */

package/directive/index.d.ts

@@ -1,4 +1,5 @@
 import { CompElem } from "../CompElem";
+import { Template } from "../render/Template";
 import { Directive } from "./Directive";
 /**
  * 属性定义
@@ -23,8 +24,9 @@ export declare class EnterPoint {
     varIndex: number;
     expressionChain: string;
     nodes: Node[];
-    constructor(level: number, node: Node, attrName: string, type: EnterPointType);
+    constructor(node: Node, attrName: string, type: EnterPointType);
     setVarIndex(varIndex: number): void;
+    getNodes(): Node[];
 }
 /**
  * Delay the actual time of execution of directive
@@ -40,9 +42,10 @@ export declare class DirectiveWrapper extends Function {
     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;
+    render(component: CompElem): void | Template;
+    update(point: EnterPoint, newArgs: any[], oldArgs: any[]): void;
     getDirective(): Directive;
+    newNodeMap: Record<string, HTMLElement>;
 }
 /**
  * 返回指令调用函数

package/events/event.d.ts

@@ -1,13 +1,14 @@
 import { CompElem } from "../CompElem";
-export declare const MODI_PARAM_DIVIDER = ":";
 /*************************************************************
  * 事件修饰符
  * @author holyhigh2
  *
- * 通用 debounce/stop/prevent/once/throttle/self 可组合
+ * 全部通用 debounce/once/throttle 可组合
+ * 原生通用 stop/prevent/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;
+export type EvHadler = (ev: Event, node: Element) => any;
+export declare function addEvent(fullName: string, cbk: EvHadler, node: Element, component: CompElem): EvHadler;

package/events/extends.d.ts

@@ -1,2 +1,3 @@
+import { EvHadler } from "./event";
 export declare function isExtEvent(evName: string): boolean;
-export declare function addExtEvent(evName: string, node: Element, cbk: (ev: Event) => any, parts: string[]): void;
+export declare function addExtEvent(evName: string, node: Element, cbk: EvHadler, parts: string[]): void;

package/helpers.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Css 辅助类
+ */
+export declare class CssHelper {
+    /**
+     * 用于转换style对象为标准style字符串，会自动转换对象key为短横线格式
+     * @param styles 样式对象
+     * @returns
+     */
+    static getCssText(styles: Record<string, string> | string): string;
+    /**
+     * 设置样式
+     * @param styles 样式字符串或样式对象
+     * @param node HTML元素
+     * @returns 每个样式的旧值map
+     */
+    static setStyle(styles: Record<string, string> | string, node: HTMLElement): Record<string, string>;
+}

package/index.d.ts

@@ -1,4 +1,5 @@
-import { buildHTML, createRef, html, RefObject, Template } from "./render/render";
+import { Template } from './render/Template';
+import { buildHTML, createRef, html, RefObject } from "./render/render";
 export * from "./decorator/Decorator";
 export * from "./decorator/index";
 export * from "./decorators/computed";
@@ -24,3 +25,4 @@ export * from "./directives/When";
 export { buildHTML, createRef, html, RefObject, Template };
 export * from './CompElem';
 export * from './types';
+export * from './helpers';