compelem 0.10.0-b1 → 0.20.0-b1

package/CompElem.d.ts

@@ -1,29 +1,45 @@
 import { IComponent } from "./IComponent";
+import { CssTemplate } from "./render/CssTemplate";
 import { Template } from "./render/Template";
-import { DefaultProps, TmplFn } from "./types";
-export declare const PROP_OBJECT_KEY_MAP_SYMBOL: unique symbol;
+import { DefaultProps, TmplFn, UpdatePoint } from "./types";
 /**
  * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
  * 每个组件都需要继承自该类
  *
  * @author holyhigh2
  */
-export declare class CompElem extends HTMLElement implements IComponent {
+export declare class CompElem<T = HTMLElement> extends HTMLElement implements IComponent<T> {
     #private;
     static __l_globalRule: HTMLStyleElement;
     static defaults(options: DefaultProps): void;
-    __events: Record<string, Array<Node | ((e: Event) => void) | Record<string, any>>[]>;
+    __updateTree: Array<UpdatePoint>;
+    __cssSheets: Array<CSSStyleSheet>;
+    _eventList: Array<[string, Function, Node, Function?]>;
+    __docoEventMap: Map<string, Function>;
+    __updateCssDeps: Array<string>;
+    __updateSubViewDeps: Map<string, Set<UpdatePoint>>;
+    __updateViewDeps: string[];
+    _watchUpdateMap: Record<string, Set<Function>>;
+    _watchDeepUpdateMap: Record<string, Set<Function>>;
+    _watchKeys: string[];
+    _watchKeysDeep: string[];
+    _watchUpdateSetInNextTick: Set<Function>;
+    _watchUpdateArgsInNextTick: Map<Function, Record<string, any>>;
+    _computedUpdateDeps: Map<string, Set<Function>>;
+    _computedUpdateSetInNextTick: Set<Function>;
+    _hasChangedPropOrStateMap: Map<string, Function>;
+    _hasSyncPropSet: Set<string>;
+    _hasShallowStateSet: Set<string>;
     get [Symbol.toStringTag](): string;
     get cid(): number;
-    get reactiveData(): Record<string, any>;
     get attrs(): Record<string, string>;
     get props(): Record<string, any>;
-    get renderRoot(): HTMLElement;
+    get renderRoot(): T | undefined;
     get renderRoots(): HTMLElement[];
-    get parentComponent(): CompElem | null;
-    get wrapperComponent(): CompElem | null;
+    get parentComponent(): CompElem | undefined;
+    get wrapperComponent(): CompElem | undefined;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
-    get css(): CSSStyleSheet[];
+    get styleSheets(): CSSStyleSheet[];
     get globalStyleSheet(): CSSStyleSheet;
     get isMounted(): boolean;
     get slots(): Record<string, Array<Node>>;
@@ -31,22 +47,29 @@ export declare class CompElem extends HTMLElement implements IComponent {
      * 组件样式，CSSStyleSheet可动态变更
      */
     static get styles(): Array<string | CSSStyleSheet>;
-    static get globalStyles(): Array<string>;
-    static get hostStyles(): Array<string>;
-    get styles(): Array<() => string>;
+    static get globalStyle(): string | undefined;
+    static get hostStyle(): string | CSSStyleSheet | undefined;
+    get styles(): Array<CssTemplate>;
     constructor(...args: any[]);
-    insertStyleSheet(sheet: string | CSSStyleSheet): CSSStyleSheet;
+    insertStyleSheet(sheet: string | CSSStyleSheet): CSSStyleSheet | null;
     /**
      * Returns the root component in the parent chain, or itself if it's the top-level component.
      */
     get rootComponent(): CompElem;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    __bindEvents(): void;
+    __unbindEvents(): void;
+    beforeDestroyed(): void;
+    destroyed(): void;
+    get isDestroyed(): boolean;
+    destroy(): void;
     __init(): void;
     propsReady(props: Record<string, any>): void;
-    render(): Template;
+    render(): Template | null;
     beforeMount(): void;
     mounted(): void;
+    __onSlotChangeHook(e: Event): void;
     slotChange(slot: HTMLSlotElement, name: string): void;
     attributeChangedCallback(attributeName: string, oldValue: string | null, newValue: string | null): void;
     /**
@@ -69,7 +92,9 @@ export declare class CompElem extends HTMLElement implements IComponent {
      * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
      * @returns
      */
-    _notify(ov: any, chain: string[]): any;
+    _notify(ov: any, chain: string[], subNewValue?: any, subOldValue?: any): void;
+    _requestWatchUpdate(newValue: any, oldValue: any, fullPath: string): void;
+    _requestComputedUpdate(fullPath: string): void;
     _updateProps(props: Record<string, any>): void;
     _wrapperProp: Record<string, string>;
     _initProps(props: Record<string, any>, attrs?: Record<string, any>): void;
@@ -81,12 +106,9 @@ export declare class CompElem extends HTMLElement implements IComponent {
     _updateSlot(name: string, propName?: string, value?: any): void;
     _asyncDirectives: WeakMap<TmplFn, any>;
     renderAsync(cbk: TmplFn, ...args: any[]): void;
-    /**
-     * todo
-     * 1. 取消上溯递归路径
-     */
-    _regDeps(varPath: string, renderContext: CompElem | Node): void;
+    __attrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     _regWrapper(wrapperComponent: CompElem): void;
+    _regSubViewDeps(props: string[], up: UpdatePoint): void;
     _getPrivateData(): Record<string, any>;
     /**
      * 抛出自定义事件
@@ -102,13 +124,22 @@ export declare class CompElem extends HTMLElement implements IComponent {
      * 在root上绑定事件
      * @param evName
      * @param hook
+     * @returns 函数钩子，用于卸载
+     */
+    on(evName: string, hook: (e: Event) => void): any;
+    /**
+     * 从root上移除事件
+     * @param evName
+     * @param hook on函数返回的钩子，可选。为空时移除所有evName事件
      */
-    on(evName: string, hook: (e: Event) => void): void;
+    off(evName: string, hook?: (e: Event) => void): void;
+    addEvent(node: Node, evName: string, hook: (e: Event) => void): any;
+    removeEvent(node: Node, evName: string, hook?: (e: Event) => void): void;
     /**
      * 下一帧执行
      * @param cbk
      */
-    nextTick(cbk: () => void, key?: string): void;
+    nextTick(cbk: () => void): void;
     /**
      * 强制更新一次视图
      */

package/IComponent.d.ts

@@ -1,30 +1,33 @@
+import { CssTemplate } from "./render/CssTemplate";
 import { Template } from "./render/Template";
 /**
  * 组件接口
  * 定义组件属性、生命周期及方法
  * @author holyhigh2
  */
-export interface IComponent {
+export interface IComponent<T = HTMLElement> {
     get cid(): number;
     get attrs(): Record<string, string>;
     get props(): Record<string, any>;
-    get renderRoot(): HTMLElement;
+    get renderRoot(): T | undefined;
     get renderRoots(): HTMLElement[];
-    get rootComponent(): HTMLElement;
-    get parentComponent(): HTMLElement | null;
-    get wrapperComponent(): HTMLElement | null;
+    get rootComponent(): HTMLElement | undefined;
+    get parentComponent(): HTMLElement | undefined;
+    get wrapperComponent(): HTMLElement | undefined;
     get slots(): Record<string, Array<Node>>;
     get slotHooks(): Record<string, (...args: any[]) => Template>;
-    get css(): CSSStyleSheet[];
+    get styleSheets(): CSSStyleSheet[];
     get globalStyleSheet(): CSSStyleSheet;
     get isMounted(): boolean;
-    get styles(): Array<() => string>;
+    get styles(): Array<CssTemplate>;
     propsReady(props: Record<string, any>): void;
-    render(): Template;
+    render(): Template | null;
     beforeMount(): void;
     mounted(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    beforeDestroyed(): void;
+    destroyed(): void;
     shouldUpdate(changed: Record<string, any>): boolean;
     updated(changed: Record<string, any>): void;
     slotChange(slot: HTMLSlotElement, slotName: string): void;
@@ -55,8 +58,8 @@ export interface IComponent {
      */
     forceUpdate(): void;
     /**
-     * 向组件插入样式表
+     * 向组件插入样式表，没有shadowDOM的组件调用无效
      * @param sheet
      */
-    insertStyleSheet(sheet: string | CSSStyleSheet): CSSStyleSheet;
+    insertStyleSheet(sheet: string | CSSStyleSheet): CSSStyleSheet | null;
 }

package/README.md

@@ -2,7 +2,7 @@
 一个现代化、响应式、快速、轻量的WebComponent开发库。为开发者提供丰富、灵活、可扩展的声明式接口
 
 ## 概览  
-CompElem 基于 Class 进行构建，该模型允许开发者使用装饰器进行声明式编码，核心特性包括：
+CompElem 基于 Class 进行构建，该模型允许开发者使用装饰器进行声明式编码并可使用继承、扩展等高级特性，其核心特性包括：
 - 类JSX的原生模板系统
 - 丰富的装饰器及指令
 - 可选的生命周期
@@ -45,10 +45,10 @@ export class PageTest extends CompElem {
   //动态样式
   get styles() {
     return [
-      () => `h2,p,i,h3{
+      css`h2,p,i,h3{
         background-image:${this.color};
       }`,
-      () => `h2,p,i,h3{
+      css`h2,p,i,h3{
         filter:hue-rotate(${this.rotation}deg);
       }`,
     ]
@@ -106,6 +106,10 @@ export class PageTest extends CompElem {
   render(): Template{
     return html`<div>Hello CompElem</div>`
   }
+  //对于无需内部样式的组件（如容器类）可返回null，此时不会创建Shadow DOM
+  render(){
+    return null
+  }
   ```
 - ### 视图模板-属性表达式
 
@@ -132,20 +136,38 @@ export class PageTest extends CompElem {
   - kebab 短横线
   - snake 下划线
 
+- ### 无视图
+  对于无体组件无需定义渲染函数，常用于layout、grid等结构控制相关组件。无视图组件仅支持global及host样式，如
+  ```ts
+  static get hostStyle(): string {
+    return `
+      l-main{
+        display: block;
+        flex: 1;
+        overflow: hidden;
+      }
+    `;
+  }
+  ```
+  同样，无视图组件的renderRoot/renderRoots/...等属性都为空
+
 - ### 样式
-  使用静态函数定义组件样式或全局样式（如弹框）
+  使用静态函数定义组件样式或全局样式（如弹框），对于包裹在上级组件内的动态样式（如:hover）时，可通过hostStyles进行指定
   ```ts
   static get styles(): Array<string | CSSStyleSheet> {
     return [];
   }
-  static get globalStyles(): Array<string> {
-    return [];
+  static get globalStyle(): string {
+    return '';
+  }
+  static get hostStyle(): string {
+    return '';
   }
   ```
   对于需要动态控制 host 元素样式可以使用组件实例 getter
   ```ts
   get styles(){
-    return [()=>`:host{
+    return [css`:host{
       ${this.border?'border: 1px solid rgb(var(--l-color-border-secondary)); ':''}
     }`]
   }
@@ -171,7 +193,7 @@ export class PageTest extends CompElem {
   }
   ```
 
-  属性可以在组件内修改但默认不会同步父组件，除非显式指定`sync`或自行 emit update 事件
+  属性可以在组件内修改但默认不会同步父组件，除非显式指定`sync`或自行 emit `update:xxx` 事件
   全部注解参数见 `PropOption`
 
 - ### 状态
@@ -237,19 +259,26 @@ export class PageTest extends CompElem {
   - `readonly` rootComponent 根组件引用
   - `readonly` parentComponent 父组件引用，可能为空
   - `readonly` wrapperComponent 包装(组件所在视图归属)组件引用，可能为空
-  - `readonly` renderRoot/renderRoots 渲染根元素/渲染根元素列表
-  - `readonly` shadowRoot 阴影DOM
+  - `readonly` renderRoot/renderRoots 渲染根元素/渲染根元素列表，可能为空
+  - `readonly` shadowRoot 阴影DOM，可能为空
   - `readonly` slots 插槽元素映射
   - `readonly` slotHooks 动态插槽钩子映射
-  - `readonly` css 组件样式对象列表
+  - `readonly` styleSheets 组件样式对象列表
+  - `readonly` globalStyleSheet 通过静态getter创建的全局样式表对象，所有实例共享
   - `readonly` attrs 组件特性
   - `readonly` props 组件属性
+  - `readonly` isMounted 组件是否已挂载
+  - `readonly` isDestroyed 组件是否已销毁
   - slotComponent 所在插槽组件
   - on(evName: string, hook: (e: Event) => void) 在root元素上绑定事件
+  - off(evName: string, hook?: (e: Event) => void) 在root元素上卸载事件
+  - addEvent(node: Node, evName: string, hook: (e: Event) => void) 在指定元素上绑定事件
+  - removeEvent(node: Node, evName: string, hook?: (e: Event) => void) 在指定元素上卸载事件
   - emit(evName: string, arg: Record<string, any>, options?: {event?: Event;bubbles?: boolean;composed?: boolean;}) 抛出自定义事件
   - nextTick(cbk: () => void) 下一帧执行函数
   - forceUpdate() 强制更新一次视图
-  - insertStyleSheet(sheet: string | CSSStyleSheet): CSSStyleSheet 向组件插入样式表
+  - insertStyleSheet(sheet: string | CSSStyleSheet): CSSStyleSheet 向组件ShadowDOM插入样式表
+  - destroy() 销毁组件
 
 ## 组件渲染流程
 
@@ -331,7 +360,7 @@ return html` <l-tooltip>
     "content"
   )}
 </l-tooltip>`;
-```
+```             
 2. 通过元素注入
 可在非CompElem环境中使用，比如将组件嵌入到React/Vue环境中使用
 ```html
@@ -379,7 +408,8 @@ return html` <l-tooltip>
 | ------- | --------- | ----------------------------------------------------------- | ------------------------------------------------------ |
 | bind    | TAG       | 绑定属性/特性到标签上，根据标签类型及组件 prop 定义自动判断 | `<div a="b" ${bind(obj)}>`                             |
 | show    | TAG       | 隐藏/显示标签（基于 display）                               | `<div a="b" ${show(visible)}>`                         |
-| model   | TAG       | 双向绑定                                                    | `<div a="b" ${model(xx,modelPath?)}>`                             |
+| model   | TAG       | 双向绑定                                                    | `<div a="b" ${model(xx,modelPath?)}>`    
+| sync   | PROP       | 类似Model，实现属性的同步跟踪                                                    | `<l-dialog .visible="${sync(this.visible)}">`                             |
 | classes | CLASS     | 绑定样式类属性，支持对象/数组/字符串。可以和静态字符混用    | `<div class="otherClass ${classes(obj)}>"`             |
 | styles  | STYLE     | 绑定样式规则属性，支持对象/字符串。可以和静态字符混用       | `<div style="a:b;${styles(obj)}>"`                     |
 | forEach | TEXT/SLOT | 输出循环结构                                                | `...>${forEach(ary,(item)=>html`...`)}<...`            |
@@ -388,6 +418,7 @@ return html` <l-tooltip>
 | when    | TEXT/SLOT | 多条件分支，支持 switch/ifelse 两种模式                     | ` ...>${when(condition,{c1:()=>html``,c2:...})}<... `  |
 | slot    | SLOT      | 动态插槽                                                    | ` ...>${slot((args) => html``)}<... `                  |
 | htmlD    | TAG      | 向指定元素插入HTML内容                                                    | `<div a="b" ${htmlD('<b>1</b>')}>`                  |
+| htmlC    | TEXT/SLOT      | 向指定文本位置插入指定HTML内容                                                    | `...>${htmlC('<b>1</b>')}><...`                  |
 
 ## 装饰器 Decorator
 
@@ -396,11 +427,12 @@ return html` <l-tooltip>
   > 设置 getter/setter 后，该属性的`@watch` 将会失效
 - @query/queryAll 定义 CssSelector 查询结果
 - @tag 自定义组件的标签名
-- @event 定义全局事件
 - @watch 监控 state/prop 变更
 - @computed 计算属性，仅在响应变量变更时更新缓存值
 - @debounced 定义函数防抖
-- @bindThis 为组件方法绑定this
+- @event 定义事件，支持修饰符
+- @onced 定义一次性事件
+- @throttled 定义节流函数
 
 #### 继承
   部分指令可由子类继承不会覆盖，包括@state/@prop/@watch/@computed

package/constants.d.ts

@@ -1,20 +1,27 @@
+import { CompElem } from "./CompElem";
+import { DecoratorWrapper } from "./decorator";
+import { Getter, PropOption, StateOption } from "./types";
+export declare const SLOT_NAME_DEFAULT = "default";
 /**
  * 共享内容
  */
 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"
+    RENDER = 1,
+    COMPUTED = 2,
+    DIRECTIVE = 3
 }
 export declare enum Mode {
     Prod = "prod",
     Dev = "dev"
 }
-export declare const DEFINED_TAG_MAP: Record<string, string>;
+export declare const DefinitionCompEventMap: Map<string, Record<string, any>[]>;
+export declare const DefinitionTagMap: Record<string, string>;
+export declare const DefinitionWatchMap: Map<string, Record<string, Record<string, any>[]>>;
+export declare const DefinitionComputedMap: Map<string, Record<string, Getter>>;
+export declare const DefinitionStateMap: Map<string, Record<string, StateOption>>;
+export declare const DefinitionPropMap: Map<string, Record<string, PropOption>>;
+export declare const DefinitionDecoratorMap: Map<string, DecoratorWrapper[]>;
+export declare const ObservedAttrsMap: Map<string, Set<string>>;
+export declare const ComponentDynamicCssUpdaterMap: WeakMap<CompElem<any>, Map<Function, CSSStyleSheet>>;
+export declare const PATH_SEPARATOR = "-";

package/decorator/Decorator.d.ts

@@ -21,18 +21,15 @@ export declare abstract class Decorator {
      * 构造会传递自定义参数
      * @param args 自定义参数
      */
-    /**
-     * 返回用于识别唯一实例的key，比如@watch(a.b.c)中的变量路径就会作为唯一key。key相同的装饰器仅会保存一份，如果无需唯一校验可不实现该函数
-     * @param args
-     */
-    abstract created(component: CompElem, ...args: any[]): any;
+    created(component: CompElem, ...args: any[]): void;
     /**
      * 执行时机与组件一致
      * @param component 组件实例
      * @param setReactive 为实例设置响应属性，注意，仅是设置到了instance.reactiveData中并非this.key。如需实现this访问，可自行定义组件的properties
      * @param args 装饰器函数参数
      */
-    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;
+    beforeMount(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): void;
+    mounted(component: CompElem, setReactive: (key: string, value: any) => any, ...args: any[]): void;
+    updated(component: CompElem, changed: Record<string, any>): void;
+    beforeDestroy(component: CompElem, ...args: any[]): void;
 }

package/decorator/index.d.ts

@@ -5,26 +5,23 @@ import { Constructor } from './../types';
  *************************************************************/
 import { CompElem } from "../CompElem";
 import { Decorator } from "./Decorator";
-export declare const GetKeyFnName = "getKey";
-export declare const _DecoratorsKey = "__decorators";
-export declare const _DecoratorMap: WeakMap<WeakKey, any>;
 /**
  * 装饰器包装类
  * 用于框架内部，表示class上的一个装饰器属性定义
  * 该定义在实例初始化时会产生装饰器实例属性
  */
 export declare class DecoratorWrapper {
-    args: any[];
     metadata: any[];
-    decoratorClass: Constructor<Decorator>;
-    instanceMap: WeakMap<CompElem, Decorator>;
+    decorator: Decorator;
     key?: string;
     priority: number;
     constructor(args: any[], metadata: any[], decoratorClass: Constructor<Decorator>);
-    create(comp: CompElem): 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;
+    dispose(): void;
+    create(comp: CompElem<any>): void;
+    beforeMount(comp: CompElem<any>, setReactive: (key: string, value: any) => any): void;
+    mounted(comp: CompElem<any>, setReactive: (key: string, value: any) => any): void;
+    updated(comp: CompElem<any>, changed: Record<string, any>): void;
+    destroy(comp: CompElem<any>): void;
 }
 /**
  * 该函数用于创建一个装饰器

package/decorators/event.d.ts

@@ -1,26 +1,7 @@
 import { CompElem } from "../CompElem";
-/**
- * 事件选项
- */
-export type EventOption = {
-    /**
-     * 事件绑定目标，默认document
-     */
-    target?: Object | ((comp?: CompElem) => (HTMLElement | Promise<HTMLElement>));
-    /**
-     * 是否在捕获阶段执行
-     */
-    capture?: boolean;
-    /**
-     * 是否仅执行一次
-     */
-    once?: boolean;
-    passive?: boolean;
-};
 /**
  * 绑定非视图事件，如window/document等
- * @param eventName 事件名
- * @param immediate 立即执行
- * @param deep 深度监控
+ * @param eventName 事件名，含修饰参数。同视图模板中的事件名
+ * @param eventTarget 事件绑定目标，默认this
  */
-export declare function event(eventName: string, options?: EventOption): (target: any, name: string, descriptor: PropertyDescriptor) => void;
+export declare function event(eventName: string, eventTarget?: (comp?: CompElem) => (HTMLElement | Promise<HTMLElement> | Window)): (target: any, name: string, descriptor: PropertyDescriptor) => void;

package/decorators/prop.d.ts

@@ -1,55 +1,4 @@
-import { Constructor } from "../types";
-/**
- * 属性定义
- */
-export type PropOption = {
-    /**
-     * 参数类型
-     */
-    type: Constructor<any> | Array<Constructor<any>>;
-    /**
-     * 是否必填，默认false
-     */
-    required?: boolean;
-    /**
-     * 是否可以修改属性，默认false
-     */
-    sync?: boolean;
-    /**
-     * 是否关联属性，prop会生成dom属性且当属性变动时自动更新值。默认true
-     */
-    attribute?: boolean;
-    /**
-     * 是否发生变更，如果未指定使用严格相等
-     * @param newValue
-     * @param oldValue
-     * @returns
-     */
-    hasChanged?: (newValue: any, oldValue: any, changeChain: string[], subNewValue: any, subOldValue: 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;
-};
+import { PropOption } from "../types";
 /**
  * 声明一个由外部传入的单向更新属性
  * @param options 可选参数 PropOption，如果type未定义则根据默认值自动推断类型

package/decorators/query.d.ts

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

package/decorators/state.d.ts

@@ -1,20 +1,4 @@
-export type StateOption = {
-    /**
-     * 是否浅层监控，默认false
-     */
-    shallow?: boolean;
-    /**
-     * 指定prop进行初始化，如果时对象类型时
-     */
-    prop?: string;
-    /**
-     * 是否发生变更，如果未指定使用严格相等
-     * @param newValue
-     * @param oldValue
-     * @returns
-     */
-    hasChanged?: (newValue: any, oldValue: any, changeChain: string[], subNewValue: any, subOldValue: any) => boolean;
-};
+import { StateOption } from "../types";
 /**
  * 声明一个可双向变动的属性
  * @param options 可选参数 {prop从prop获取初始值}，如果type未定义则根据默认值自动推断类型

package/decorators/tag.d.ts

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

package/decorators/watch.d.ts

@@ -1,19 +1,9 @@
+import { WatchOptions } from "../types";
 /**
- * 监控定义
+ * 监控prop/state变量值变化
+ * @param source 变量路径支持多级路径
+ * @param options
+ * @returns
  */
-export type WatchOptions = {
-    /**
-     * 是否立即执行
-     */
-    immediate?: boolean;
-    /**
-     * 是否深度监控
-     */
-    deep?: boolean;
-    /**
-     * 是否仅执行一次
-     */
-    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, subNewValue?: any, subOldValue?: any) => any;

package/directive/index.d.ts

@@ -1,21 +1,8 @@
 import { CompElem } from "../CompElem";
-import { DirectiveExecutor, DirectiveInstance, EnterPointType } from "../types";
-/**
- * 交互点信息
- */
-export declare class EnterPoint {
-    startNode: Node;
-    endNode: Node;
-    type: EnterPointType;
-    attrName: string;
-    varIndex: number;
-    expressionChain: string;
-    nodes: Node[];
-    constructor(node: Node, attrName: string, type: EnterPointType);
-    setVarIndex(varIndex: number): void;
-    getNodes(): Node[];
-}
-export declare function updateDirective(point: EnterPoint, newArgs: any[], oldArgs: any[], updater: DirectiveExecutor, renderComponent: CompElem, slotComponent: CompElem, varChain: any[][], isTextOrSlot?: boolean): void;
+import { DirectiveExecutor, DirectiveInstance, EnterPointType, UpdatePoint } from "../types";
+export declare const DI_COMMENT_START_NODE_MAP: WeakMap<Node, Node>;
+export declare const TextOrSlotDirectiveExecutorMap: Map<string, DirectiveExecutor>;
+export declare function updateDirective(pointNode: Node, newArgs: any[], oldArgs: any[], executor: DirectiveExecutor, renderComponent: CompElem, slotComponent: CompElem, varChain: any[], up: UpdatePoint): void;
 /**
  * 返回指令调用函数
  * @param di

package/directives/Styles.d.ts

@@ -1,5 +1,5 @@
 /**
- * 根据变量内容自动插入class，仅能用于style属性
+ * 根据变量内容设置元素样式，仅能用于style属性
  * @param styles 对象/字符串
  */
-export declare const styles: (styles: string | Record<string, string>) => import("../types").DirectiveInstance;
+export declare const styles: (...args: (string | Record<string, string>)[]) => import("../types").DirectiveInstance;