compelem 0.0.0 → 0.1.0-beta

package/CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

package/CompElem.d.ts

@@ -0,0 +1,137 @@
+import { Directive } from "./directive/Directive";
+import { IComponent } from "./IComponent";
+import { Template } from "./render/render";
+import { IRenderContext } from "./render/RenderContext";
+import { 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;
+        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;
+    };
+} & {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+/**
+ * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
+ * 每个组件都需要继承自该类
+ *
+ * @author holyhigh2
+ */
+export declare abstract class CompElem extends CompElem_base implements IComponent {
+    #private;
+    static __l_globalRule: HTMLStyleElement;
+    __events: Record<string, Array<Node | ((e: Event) => void)>[]>;
+    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 slotHooks(): Record<string, (...args: any[]) => Template>;
+    get styles(): CSSStyleSheet[];
+    get isMounted(): boolean;
+    get slots(): Record<string, Array<Node>>;
+    /**
+     * 是否自动插入插槽，如果需要控制插槽类型时，可以设置为false
+     */
+    static get autoSlot(): boolean;
+    /**
+     * 组件样式，CSSStyleSheet可动态变更
+     */
+    static get styles(): Array<string | CSSStyleSheet>;
+    static get globalStyles(): Array<string>;
+    get css(): string;
+    constructor(...args: any[]);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    __init(): void;
+    /**
+     * 初始化属性及状态，该回调内可以访问props和state
+     * 此时组件dom并未构建，但已有parent 属性，没有root属性
+     */
+    connected(): void;
+    /**
+     * props初始化完成回调
+     */
+    propsReady(): void;
+    /**
+     * 每次更新时调用
+     */
+    abstract render(): Template;
+    /**
+     * dom渲染完毕后调用，该回调内可以query注解初始化完成
+     */
+    mounted(): void;
+    slotchange(slot: HTMLSlotElement, name: string): void;
+    /**
+     * 是否需要更新，可获取变更属性
+     * 返回true时更新
+     */
+    shouldUpdate(changed: Record<string, any>): boolean;
+    /**
+     * 1. 调用render
+     * 2. 更新@query/all
+     * 3. 更新ref
+     * 4. 更新prop到attr的映射
+     * @param changed
+     */
+    updated(changed: Record<string, any>): void;
+    /**
+     * 抛出自定义事件
+     * @param evName 事件名称
+     * @param args 自定义参数
+     */
+    emit(evName: string, arg?: Record<string, any>, options?: {
+        event?: Event;
+        bubbles?: boolean;
+        composed?: boolean;
+    }): void;
+    /**
+     * 在root上绑定事件
+     * @param evName
+     * @param hook
+     */
+    on(evName: string, hook: (e: Event) => void): void;
+    /**
+     * 下一帧执行
+     * @param cbk
+     */
+    nextTick(cbk: () => void): void;
+    /**
+     * 强制更新一次视图
+     */
+    forceUpdate(): void;
+    /**
+     * 由监控变量调用
+     * @param stateKey
+     * @param ov
+     * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
+     * @returns
+     */
+    _notify(ov: any, chain: string[]): void;
+    /**
+     * @deprecated
+     */
+    _setParentProps(props: Record<string, any>, attrs?: Record<string, any>): void;
+    _updateProps(props: Record<string, any>): void;
+    _initProps(props: Record<string, any>, attrs?: Record<string, any>): void;
+    /**
+     * 绑定slot标签，render时调用
+     */
+    _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>;
+    renderAsync(cbk: TmplFn, ...args: any[]): void;
+    _regDeps(varPath: string, renderContext: CompElem | Directive): void;
+}
+export {};

package/IComponent.d.ts

@@ -0,0 +1,49 @@
+import { Template } from "./render/render";
+/**
+ * 组件接口
+ * 定义组件属性、生命周期及方法
+ * @author holyhigh2
+ */
+export interface IComponent {
+    get attrs(): Record<string, string>;
+    get props(): Record<string, any>;
+    get renderRoot(): HTMLElement;
+    get renderRoots(): HTMLElement[];
+    get parentComponent(): HTMLElement | null;
+    get slots(): Record<string, Array<Node>>;
+    get slotHooks(): Record<string, (...args: any[]) => Template>;
+    get styles(): CSSStyleSheet[];
+    get isMounted(): boolean;
+    connected(): void;
+    propsReady(): void;
+    render(): Template;
+    mounted(): void;
+    shouldUpdate(changed: Record<string, any>): boolean;
+    updated(changed: Record<string, any>): void;
+    slotchange(slot: HTMLSlotElement, name: string): void;
+    /**
+     * 抛出自定义事件
+     * @param evName 事件名称
+     * @param args 自定义参数
+     */
+    emit(evName: string, arg: Record<string, any>, options?: {
+        event?: Event;
+        bubbles?: boolean;
+        composed?: boolean;
+    }): void;
+    /**
+     * 在root上绑定事件
+     * @param evName
+     * @param hook
+     */
+    on(evName: string, hook: (e: Event) => void): void;
+    /**
+     * 下一帧执行
+     * @param cbk
+     */
+    nextTick(cbk: () => void): void;
+    /**
+     * 强制更新一次视图
+     */
+    forceUpdate(): void;
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 holyhigh2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,402 @@
+# CompElem
+
+一个现代化、响应式、快速、轻量的 WebComponent 开发库。为开发者提供丰富、灵活、可扩展的声明式接口
+
+## 概览
+
+CompElem 基于 Class 进行构建，该模型允许开发者使用装饰器进行声明式编码，核心特性包括：
+
+- 类 JSX 的原生模板系统
+- 丰富的装饰器及指令
+- 可选的生命周期
+- 原生插槽系统
+- 响应式域样式
+- ...
+
+创建一个 WebComponent 总会从声明一个组件元素(CompElem 子类)开始
+
+```ts
+const Slogan = ["complete", "componentize", "compact", "companion"];
+@tag("page-test")
+export class PageTest extends CompElem {
+  //////////////////////////////////// props
+  @prop arg: any;
+
+  @state colorR = (Math.random() * 255) % 255 >> 0;
+  @state colorG = (Math.random() * 255) % 255 >> 0;
+  @state colorB = (Math.random() * 255) % 255 >> 0;
+  @state rotation = 0;
+
+  //////////////////////////////////// computed
+  @computed
+  get color() {
+    return `linear-gradient(90deg,rgb(${this.colorR},${this.colorG},${
+      this.colorB
+    }), rgb(${255 - this.colorR},${255 - this.colorG},${255 - this.colorB}));`;
+  }
+
+  //////////////////////////////////// watch
+  @watch("rotation")
+  function(nv: number) {
+    console.log(nv);
+  }
+
+  //////////////////////////////////// styles
+  //静态样式
+  static get styles(): Array<string | CSSStyleSheet> {
+    return [
+      `:host{
+        font-size:16px;
+      }...`,
+    ];
+  }
+  //动态样式
+  get css() {
+    return `h2,p,i,h3{
+      background-image:${this.color}
+      filter:hue-rotate(${this.rotation}deg)
+    }`;
+  }
+
+  @query('i[name="text"]')
+  text: HTMLElement;
+  sloganIndex = 0;
+
+  //////////////////////////////////// lifecycles
+  mounted(): void {
+    setInterval(() => {
+      this.rotation += 1;
+    }, 24);
+
+    setInterval(() => {
+      this.text.classList.add("hide");
+      setTimeout(() => {
+        this.text.innerHTML = Slogan[this.sloganIndex % 4];
+        this.sloganIndex++;
+        this.text.classList.remove("hide");
+      }, 500);
+    }, 5000);
+  }
+  render(): Template {
+    return html`<div>
+      <i>Welcome to</i>
+      <br />
+      <h2>CompElem</h2>
+      <br />
+      <i>A modern, reactive, fast and lightweight library</i>
+      <br />
+      <i>for building</i>
+      <h3>Web Components</h3>
+      <p>&lt;c-element&gt; <i name="text">...</i> &lt;/c-element&gt;</p>
+      ${this.arg}
+    </div>`;
+  }
+}
+```
+
+而后即可在 HTML 中直接使用，与使用一个原生元素如 DIV 没有任何区别
+
+```html
+<body>
+  <page-test arg="args..."></page-test>
+</body>
+```
+
+当然,也可以直接嵌入其他 UI 库中只要引入编译后的 js 即可
+
+## APIs
+
+- ### 视图模板
+  使用`render()`函数定义组件视图模板
+  ```ts
+  render(): Template{
+    return html`<div>Hello CompElem</div>`
+  }
+  ```
+- ### 视图模板-属性表达式
+
+  通过再视图模板中插入表达式可以实现动态视图，表达式通过在不同位置使用分为不同类型见（#### 指令类型）。其中属性表达式根据前缀分为
+
+  | 前缀 | 描述                                                          | 示例                                   |
+  | ---- | ------------------------------------------------------------- | -------------------------------------- |
+  | @    | 事件属性，可用于任何标签                                      | `<div @click="${this.onClick}">`       |
+  | .    | 参数属性，仅用于给组件标签传递参数                            | `<l-input .value="${this.text}">`      |
+  | ?    | 可选属性，用于 disabled/readonly 等 toggle 类属性             | `<input ?disabled="${this.disabled}">` |
+  | \*   | 引用属性，表达式求值后才会设置该属性。常用于 SVG 相关属性设置 | `<circle *r="${this.r}">`              |
+
+  > 引用属性可通过属性参数进行格式转换，如
+
+  ```ts
+  render(): Template{
+    return html`<svg *view-box:camel="">...</svg>`// <svg viewBox="">
+  }
+  ```
+
+  支持格式包括:
+
+  - camel 驼峰式
+  - kebab 短横线
+  - snake 下划线
+
+- ### 样式
+  使用静态函数定义组件样式或全局样式（如弹框）
+  ```ts
+  static get styles(): Array<string | CSSStyleSheet> {
+    return [];
+  }
+  static get globalStyles(): Array<string> {
+    return [];
+  }
+  ```
+  对于需要动态控制 host 元素样式可以使用组件实例 getter
+  ```ts
+  get css():string{
+    return `:host{
+      ${this.border?'border: 1px solid rgb(var(--l-color-border-secondary)); ':''}
+    }`
+  }
+  ```
+- ### 属性
+
+  属性是由组件外部提供参数的响应变量，可通过`@prop`注解定义
+
+  ```ts
+  @prop({ type: Boolean }) loading = false;//显式定义属性类型
+  @prop round = true;//通过默认值自动推断属性类型
+  @prop({ type: [Boolean,String] }) round = true;//多种类型使用数组定义
+  @prop({ type: Array }) datalist: Array<string>;//没有默认值必须显式指定属性类型
+  @prop({ type: [String, Number], sync: true }) //通过get/set设置属性
+  get value() {
+    return this.__innerValue ?? ''
+  }
+  set value(v: any) {
+    this.__innerValue = v
+    if (isNil(v)) {
+      this.__innerValue = '';
+    }
+  }
+  ```
+
+  属性可以在组件内修改但默认不会同步父组件，除非显式指定`sync`或自行 emit update 事件
+  全部注解参数见 `PropOption`
+
+- ### 状态
+  状态是仅由组件内部初始化的响应变量，可通过`@state`注解定义
+  ```ts
+  @state hasLeft = false;//定义状态
+  @state({//自定义变化判断
+    hasChanged(nv: any[], ov: any[]) {
+      return isEqual(nv , ov)
+    }
+  }) private nodes: Array<Record<string, any>>;
+  ```
+  状态仅能在组件内修改
+  全部注解参数见 `StateOption`
+- ### 状态监视
+
+  使用`@watch`注解可以对属性/状态进行变化监视
+
+  ```ts
+  @prop width = "auto";
+
+  @watch("width", { immediate: true })
+  watchWidth(nv: string, ov: string, sourceName: string) {
+    this.style.width = nv;
+  }
+  ```
+
+  对于同类属性共享处理逻辑的监视，可以批量处理
+
+  ```ts
+  @watch(['height', 'minHeight', 'maxHeight'], { immediate: true })
+  watchHeight(nv: string, ov: string, sourceName: string) {
+    this.style[srcName] = nv;
+  }
+  ```
+
+- ### 计算状态
+  计算状态会缓存 return 结果，只有当内部使用的任意属性/状态发生变化时才会重新计算
+  使用`@computed`注解的 Getter，如
+  ```ts
+  @computed
+  get hasHeader() {
+    return !isEmpty(this.slots.header) || !!this.header
+  }
+  ```
+- ### 节点引用
+  使用`@query/all`注解及`ref`属性
+  ```ts
+  //query
+  @query('l-icon')
+  iconEl: HTMLElement
+  //ref
+  refNode: HTMLElement
+  ```
+  ```ts
+  divRef = createRef<HTMLDivElement>();
+  //视图片段
+  return html` <l-icon></l-icon>
+    <div ref="${divRef}"></div>`;
+  ```
+- ### 内置属性及函数
+  - `readonly` parent 父组件引用，可能为空
+  - `readonly` el/els 根元素/根元素列表
+  - `readonly` slots 插槽元素
+  - `readonly` slotHooks 动态插槽钩子
+  - `readonly` styles 组件样式对象列表
+  - `readonly` attrs 组件特性
+  - `readonly` props 组件属性
+  - slotComponent 所在插槽组件
+  - on()
+  - emit()
+  - nextTick()
+  - forceUpdate()
+
+## 组件渲染流程
+
+CompElem 组件既可以在 CompElem 环境内调用，也可以直接在原生环境调用，区别只是原生环境无法像组件传`递类型参数`。流程如下：
+
+> 创建流程
+
+| 功能                                                         |     | 生命周期    |
+| ------------------------------------------------------------ | --- | ----------- |
+| 1. 创建组件实例，完成类属性默认值设置（prop/state/...)       |     |             |
+| 2. 初始化类全局样式（仅一次）及 实例样式(产生 styles 数组)   |     |             |
+| 3. 创建 shadowRoot 并挂载组件样式                            |     | constructor |
+| 4. 绑定 parent                                               |     | connected   |
+| 5. 获取 this.attribute 及 parentProps 进行验证及初始化 props |     | propsReady  |
+| 6. 注入 link 外部样式表                                      |     |             |
+| 7. 渲染 render 及依赖绑定                                    |     | render      |
+| 8. 绑定 el 及 els                                            |     |             |
+| 9. 执行 ref                                                  |     |             |
+| 10. 执行 @query 注解                                         |     |             |
+| 11. 执行 @watch(immediate) 注解                              |     |             |
+| 12. 执行 @event 注解                                         |     | mounted     |
+| 13. 执行 slot filter / 动态 slot                             |     | slotchange  |
+
+> 更新流程【普通】
+
+| 功能                           | 生命周期     |
+| ------------------------------ | ------------ |
+| 1. 父组件 props 变更【或】     | propsReady   |
+| 1. 子组件 state 变更【或】     |              |
+| 2. 执行@watch 注解             |              |
+| 3. 合并变更内容并判断是否更新  | shouldUpdate |
+| 4. 更新依赖域指令（非 render） |              |
+| 5. 更新动态 slot               |              |
+| 6. 执行 ref                    |              |
+| 7. 执行@query 注解             | update       |
+
+> 更新流程【强制】
+
+| 功能               | 生命周期 |
+| ------------------ | -------- |
+| 1. forceUpdate     |          |
+| 2. 渲染 render     | render   |
+| 3. 执行@query 注解 | update   |
+
+## 插槽 Slot
+
+#### 定义插槽
+
+使用原生 `<slot></slot>` 标签来嵌入插槽，可以通过`node-filter`属性过滤插槽内容
+
+```html
+<slot
+  .node-filter="${{
+  type: [HTMLElement, CompElem],
+  maxCount:1
+}}"
+></slot>
+<!-- 或使用函数精细控制 -->
+<slot .node-filter="${(nodes:Node[])=>Node[]}"></slot>
+```
+
+#### 插入节点(静态)
+
+```html
+<l-tooltip>
+  <l-button>默认插槽内容</l-button>
+  <div slot="content">命名插槽内容</div>
+</l-tooltip>
+```
+
+#### 插入节点(动态)
+
+动态内容插入仅可在 CompElem 组件中编码，可以通过组件注入参数动态生成插槽内容
+
+```ts
+//仅可用于CompElem组件中
+return html` <l-tooltip>
+  //动态内容通过slot指令定义 ${slot(
+    (args: Record<string, any>) => html`
+      <div>我是动态内容-${args.data.id}</div>
+    `,
+    "content"
+  )}
+</l-tooltip>`;
+```
+
+在`slot`标签上注入参数
+
+```html
+<slot .data="${this.row}"></slot>
+```
+
+**_注意_**，动态插槽必须关闭自动插槽，否则无效
+
+```ts
+static get autoSlot() {
+  return false;
+}
+```
+
+## 指令 Directive
+
+指令用于分支/循环/动态插槽等结构及隐藏显示等
+
+#### 指令类型
+
+不同的指令类型限制了指令仅能用于对应的插入点
+|指令|插入位置|描述|示例|  
+|-------|-------|-------|-------|
+|ATTR|特性|可用于任何特性值之中，仅能插入一个|`attr="${xxx}"`|
+|PROP|属性|可用于任何属性值之中，必须是组件标签，仅能插入一个|`.value="${xxx}"`|
+|TEXT|文本|标签体内，可插入多个|`<div>${xx1}${xx2}${...}</div>`|
+|CLASS|样式类|用于 class 属性值中，仅能插入一个|`class="a ${b}"`|
+|STYLE|样式规则|用于 style 属性值中，仅能插入一个|`style="a:1;${b}"`|
+|SLOT|插槽|与 TEXT 类似，但标签必须是组件||
+|TAG|标签|直接插入在节点标签上|`<div a="b" ${show(..)}>`|
+
+#### 内置指令
+
+| 指令    | 类型      | 描述                                                        | 示例                                                   |
+| ------- | --------- | ----------------------------------------------------------- | ------------------------------------------------------ |
+| bind    | TAG       | 绑定属性/特性到标签上，根据标签类型及组件 prop 定义自动判断 | `<div a="b" ${bind(obj)}>`                             |
+| show    | TAG       | 隐藏/显示标签（基于 display）                               | `<div a="b" ${show(visible)}>`                         |
+| model   | TAG       | 双向绑定                                                    | `<div a="b" ${model(xx)}>`                             |
+| classes | CLASS     | 绑定样式类属性，支持对象/数组/字符串。可以和静态字符混用    | `<div class="otherClass ${classes(obj)}>"`             |
+| styles  | STYLE     | 绑定样式规则属性，支持对象/字符串。可以和静态字符混用       | `<div style="a:b;${styles(obj)}>"`                     |
+| forEach | TEXT/SLOT | 输出循环结构                                                | `...>${forEach(ary,(item)=>html`...`)}<...`            |
+| ifTrue  | TEXT/SLOT | 当条件为 true 时输出模板内容                                | `...>${ifTrue(condition,()=>html`...`)}<...`           |
+| ifElse  | TEXT/SLOT | 当条件为 true/false 时输出对应模板内容                      | ` ...>${ifElse(condition,()=>html``,()=>html``)}<... ` |
+| when    | TEXT/SLOT | 多条件分支，支持 switch/ifelse 两种模式                     | ` ...>${when(condition,{c1:()=>html``,c2:...})}<... `  |
+| slot    | SLOT      | 动态插槽                                                    | ` ...>${slot((args) => html``)}<... `                  |
+
+## 装饰器 Decorator
+
+- @state 定义组件内状态属性。可选参数{prop}，可指定 propName 初始化值
+- @prop 定义父组件参数，默认不可修改。可选参数{type,required,sync,getter,setter}
+  > 设置 getter/setter 后，该属性的`@watch` 将会失效
+- @query/queryAll 定义 CssSelector 查询结果
+- @tag 自定义组件的标签名
+- @event 定义全局事件
+- @watch 监控 state/prop 变更
+
+## 事件
+
+事件分为三类
+
+1. 原生事件 —— `<div @click="..."`，监听器回调参数返回原生事件对象
+2. 组件自定义事件 —— `<l-select @change="..."`，监听器回调参数返回`CustomEvent`事件对象
+3. 扩展原生事件 —— `<div @resize="..."`，监听器回调参数返回`CustomEvent`事件对象

package/decorator/Decorator.d.ts

@@ -0,0 +1,34 @@
+import { CompElem } from "../CompElem";
+export declare enum DecoratorType {
+    CLASS = "class",
+    FIELD = "field",
+    METHOD = "method"
+}
+/**
+ * 用于构造装饰器
+ * @author holyhigh2
+ */
+export declare abstract class Decorator {
+    /**
+     * 装饰器使用范围，超出范围会报错
+     */
+    abstract get targets(): Array<DecoratorType>;
+    /**
+     * 构造会传递自定义参数
+     * @param args 自定义参数
+     */
+    /**
+     * 返回用于识别唯一实例的key，比如@watch(a.b.c)中的变量路径就会作为唯一key
+     * @param args
+     */
+    abstract created(component: CompElem, ...args: any[]): any;
+    /**
+     * 执行时机与组件一致
+     * @param component 组件实例
+     * @param setReactive 为实例设置响应属性，注意，仅是设置到了instance.reactiveData中并非this.key。如需实现this访问，可自行定义组件的properties
+     * @param args 装饰器函数参数
+     */
+    abstract propsReady(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

@@ -0,0 +1,32 @@
+import { Constructor } from './../types';
+/*************************************************************
+ * 装饰器
+ * @author holyhigh2
+ *************************************************************/
+import { CompElem } from "../CompElem";
+import { Decorator } from "./Decorator";
+export declare const GetKeyFnName = "getKey";
+export declare const DecoratorsKey = "__decorators";
+/**
+ * 装饰器包装类
+ * 用于框架内部，表示class上的一个装饰器属性定义
+ * 该定义在实例初始化时会产生装饰器实例属性
+ */
+export declare class DecoratorWrapper {
+    args: any[];
+    metadata: any[];
+    decoratorClass: Constructor<Decorator>;
+    instanceMap: WeakMap<CompElem, Decorator>;
+    key?: string;
+    constructor(args: any[], metadata: any[], decoratorClass: Constructor<Decorator>);
+    create(comp: CompElem): void;
+    propsReady(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;
+}
+/**
+ * 该函数用于创建一个装饰器
+ * @param decoClass 装饰器构造
+ * @returns 装饰器函数
+ */
+export declare function decorator<T extends Array<any>>(decoClass: Constructor<Decorator>): (...args: T) => (...metadata: any[]) => void;

package/decorators/computed.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 定义计算属性
+ * 计算属性会自动跟踪get函数内的state/prop，并在变动时自动变更
+ * 只能应用在一个非静态get属性上
+ * @param source 变量名(数组)，支持访问链
+ * @param immediate 立即执行
+ * @param deep 深度监控
+ */
+export declare function computed(arg?: any): void;
+export declare function computed(target: any, propertyKey: string): void;