compelem 0.2.3-beta → 0.3.0-b1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "compelem",
-  "version": "0.2.3-beta",
+  "version": "0.3.0-b1",
   "description": "A modern, reactive, fast, lightweight and flexible lib for building web components",
   "main": "index.js",
   "module": "index.js",
@@ -24,18 +24,18 @@
     "test": "rollup --config rollup.config.test.js --watch"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.26.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "14.1.0",
     "@rollup/plugin-terser": "0.4.1",
-    "@typescript-eslint/eslint-plugin": "5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@typescript-eslint/eslint-plugin": "8.23.0",
+    "@typescript-eslint/parser": "^8.23.0",
     "autoprefixer": "^10.4.19",
     "bootstrap-icons": "^1.11.3",
-    "eslint": "8.23.1",
-    "eslint-config-prettier": "^8.5.0",
-    "myfx": "^1.4.14",
+    "eslint": "9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "myfx": "^1.7.0",
     "postcss": "^8.4.38",
     "prettier": "^2.8.3",
     "rollup-plugin-banner2": "1.2.2",
@@ -46,7 +46,7 @@
     "rollup-plugin-serve": "^2.0.1",
     "rollup-plugin-typescript2": "0.33.0",
     "sass": "^1.72.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.6.3"
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3"
   }
 }

package/reactive.d.ts

@@ -3,26 +3,24 @@
  * @author holyhigh2
  */
 import { CompElem } from "./CompElem";
-import { IRenderContext } from "./render/RenderContext";
-import { Getter } from "./types";
+import { CollectorType } from "./constants";
+import { IView } from "./render/RenderContext";
+import { Getter, Updater } from "./types";
 export declare const Collector: {
-    startCss(comp: CompElem): void;
-    endCss(): void;
-    setCssUpdater(updater: Getter): void;
-    startCompute(comp: CompElem): void;
-    endCompute(): void;
-    setComputedProp(updater: Getter): void;
-    __computeCollecting: null;
-    __computeUpdater: null;
-    __cssCollecting: null;
-    __cssUpdater: null;
+    collectWatch(comp: CompElem, updater: Getter, subPath: string): void;
+    startCollect(comp: CompElem, type: CollectorType): void;
+    setUpdater(updater: Getter): void;
+    endCollect(): void;
     __directiveQ: any[][];
     setDirectiveQ(val: any[]): void;
     popDirectiveQ(): any[];
-    startRender(context: IRenderContext): void;
+    startRender(context: IView): void;
     endRender(component: CompElem): void;
     collect(prop: string): void;
     clear(): void;
+    __updater: null;
+    __collecting: null;
+    __collectType: number;
     __renderCollection: Set<string>;
     __renderContext: null;
     __renderCollecting: boolean;
@@ -37,3 +35,16 @@ export declare const Collector: {
  * @returns
  */
 export declare function reactive(obj: Record<string, any>, context: any): any;
+export declare class Queue {
+    static watchSet: Set<Updater>;
+    static computedSet: Set<Updater>;
+    static cssSet: Set<Updater>;
+    static nextSet: Set<Updater>;
+    static nextPending: boolean;
+    static next: () => void;
+    static flush(): void;
+    static pushWatch(updater: Getter): void;
+    static pushComputed(updater: Getter): void;
+    static pushCss(updater: Getter): void;
+    static pushNext(updater: () => void): void;
+}

package/render/RenderContext.d.ts

@@ -1,37 +1,52 @@
-import { Directive } from "../directive/Directive";
 import { CompElem } from "../CompElem";
-import { ExpPos } from "../types";
-import { Template } from "./render";
-export interface IRenderContext {
-    render(...args: any): Template | Template[] | void | ((...args: any[]) => (Template | Template[]));
-    slotComponent: CompElem;
-    renderComponent: CompElem;
-    renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, ExpPos>, Record<string, typeof this.__expPos | null>];
-    updateContext(...args: any): void;
+import { UpdatePoint } from "../types";
+import { Template } from "./Template";
+export interface IView {
+    /**
+     * 对比新的模板数据，更新变化点
+     * @param tmpl
+     */
+    updateView(tmpl: Template): void;
+    /**
+     * 构建模板返回nodes并更新 __updatePoints 属性
+     * @param tmpl
+     */
+    buildView(tmpl: Template): NodeListOf<ChildNode>;
 }
 /**
- * 为组件/指令提供渲染接口
- * @author holyhigh2
+ * 视图基类 为组件视图及指令子视图提供统一服务
+ * @param spuerClass
+ * @returns
  */
-export declare function RenderContext<T extends new (...args: any[]) => any>(spuerClass: T): {
+export declare function View<T extends new (...args: any[]) => any>(spuerClass: T): {
     new (...args: any[]): {
         [x: string]: any;
+        __updatePoints: Array<UpdatePoint>;
         /**
-       * 渲染实现
-       */
-        render(...args: any): Template | Template[] | void | ((...args: any[]) => (Template | Template[]));
-        __expPos: Record<string, ExpPos>;
-        __expPosMap: Record<string, Record<string, ExpPos> | null>;
-        __directives: Record<string, Directive>; /**
-        * 指令/组件所在的插槽所属组件
-        */
-        slotComponent: CompElem;
-        /**
-         * 渲染上下文所属组件
+         * 渲染上下文所属组件，仅用于指令
          */
         renderComponent: CompElem;
-        renderContext(...args: any): [NodeListOf<ChildNode>, Record<string, ExpPos>, Record<string, Record<string, ExpPos> | null>];
-        updateContext(...args: any): void;
-        __updateExpPos(tmpl: Template, _expPos: Record<string, ExpPos>): void;
+        buildView(tmpl: Template): NodeListOf<ChildNode>;
+        updateView(tmpl: Template): void;
     };
 } & T;
+declare const SubView_base: {
+    new (...args: any[]): {
+        [x: string]: any;
+        __updatePoints: Array<UpdatePoint>;
+        /**
+         * 渲染上下文所属组件，仅用于指令
+         */
+        renderComponent: CompElem;
+        buildView(tmpl: Template): NodeListOf<ChildNode>;
+        updateView(tmpl: Template): void;
+    };
+} & ObjectConstructor;
+/**
+ * 子视图，用于组件视图模板中的非指令子模版
+ */
+export declare class SubView extends SubView_base {
+    tmpl: Template;
+    constructor(tmpl: Template);
+}
+export {};

package/render/Template.d.ts

@@ -0,0 +1,26 @@
+import { CompElem } from "../CompElem";
+/**
+ * 视图模板
+ * @author holyhigh2
+ */
+export declare class Template {
+    strings: Array<string>;
+    vars: Array<any>;
+    constructor(strings: Array<string>, vars: Array<any>);
+    getKey(): string;
+    getKeys(): string[];
+    /**
+   * 追加tmpl
+   * 交接处模板进行合并
+   * @param tmpl
+   */
+    append(tmpl: Template): this;
+    /**
+     * 指定位置插入模板
+     * @param position 字符模板位置
+     * @param tmpl
+     * @returns
+     */
+    insert(position: number, tmpl: Template): this;
+    getHTML(comp: CompElem): string;
+}

package/render/render.d.ts

@@ -1,6 +1,7 @@
 import { CompElem } from "../CompElem";
-import { DirectiveWrapper } from "../directive/index";
-import { ExpPos } from "../types";
+import { UpdatePoint } from "../types";
+import { IView } from "./RenderContext";
+import { Template } from "./Template";
 export declare const ATTR_PREFIX_EVENT = "@";
 export declare const ATTR_PREFIX_PROP = ".";
 export declare const ATTR_PREFIX_BOOLEAN = "?";
@@ -20,38 +21,21 @@ export declare const ATTR_REF = "ref";
  *    1. 在后面追加同内容注释节点，标记两个节点，以便变量可以进行绑定
  *    2. 在中间插入变量内容
  * 3. 只有表达式是一个指令时才能绑定依赖
+ * @param component
  * @param tmpl
- * @param slotArgs
- * @returns
+ * @returns [html,vars]
  */
-export declare function buildHTML(tmpl: Template | Template[]): string;
+export declare function buildHTML(component: CompElem, tmpl: Template): [string, any[]];
 export declare const PLACEHOLDER_EXP: RegExp;
 /**
  * 构建模板为DOM结构
  * @param html
  */
-export declare function buildTmplate(expPos: Record<string, ExpPos>, directives: Array<DirectiveWrapper>, html: string, vars: any[], component: CompElem, slotArgs?: Record<string, any>, level?: number, expressionChain?: string): NodeListOf<ChildNode>;
+export declare function buildTmplate(updatePoints: Array<UpdatePoint>, html: string, vars: any[], component: CompElem, viewContext: IView): NodeListOf<ChildNode>;
 export declare const DomUtil: {
     insertBefore: (node: Node, newNodes: any[]) => void;
     remove: (startNode: Node, endNode: Node) => void;
 };
-export declare class Template {
-    strings: Array<string>;
-    vars: Array<any>;
-    key: string;
-    constructor(strings: Array<string>, vars: Array<any>);
-    getKey(): string;
-    /**
-     * 追加tmpl
-     * 交接处模板进行合并
-     * @param tmpl
-     */
-    append(tmpl: Template): this;
-    /**
-     * 获取html字符串
-     */
-    getHTML(): string;
-}
 /**
  * 标签函数，用于构建模板
  * @param strings

package/types.d.ts

@@ -1,9 +1,10 @@
 /**
  * @author holyhigh2
  */
-import { Template } from "./render/render";
+import { Template } from "./render/Template";
 export type Constructor<T> = new (...args: any[]) => T;
 export type Getter = () => any;
+export type Updater = (...args: any[]) => any;
 /**
  * 插槽配置对象
  */
@@ -20,11 +21,17 @@ export declare enum DirectiveUpdateTag {
     UPDATE = "UPDATE",//对比更新
     APPEND = "APPEND"
 }
+export type DefaultProps = Partial<{
+    css: Array<string | CSSStyleSheet>;
+    global: Record<string, any>;
+    [key: string]: Record<string, any>;
+}>;
 /**
- * 模板中的表达式位置
+ * 视图更新点
  */
-export declare class ExpPos {
-    index: string;
+export declare class UpdatePoint {
+    key: string;
+    varIndex: number;
     value: any;
     isText: boolean;
     isTmpl: boolean;
@@ -36,6 +43,6 @@ export declare class ExpPos {
     attrTmpl: string;
     isProp: boolean;
     isToggleProp: boolean;
-    eventName: string;
-    constructor(varIndex: string | number, node: Node, attrName?: string, attrTmpl?: string);
+    isEvent: boolean;
+    constructor(varIndex: number, node: Node, attrName?: string, attrTmpl?: string);
 }