compelem 0.0.0 → 0.1.1-beta

package/package.json

@@ -1,12 +1,51 @@
-{
-  "name": "compelem",
-  "version": "0.0.0",
-  "description": "CUstom element/ Shadow dom/ html Template",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}
+{
+  "name": "compelem",
+  "version": "0.1.1-beta",
+  "description": "A modern, reactive, fast, lightweight and flexible lib for building web components",
+  "main": "index.js",
+  "module": "index.js",
+  "types": "index.d.ts",
+  "author": "holyhigh2",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/holyhigh2/compelem"
+  },
+  "bugs": "https://github.com/holyhigh2/compelem/issues",
+  "keywords": [
+    "typescript",
+    "webcomponent",
+    "reactive"
+  ],
+  "scripts": {
+    "lint": "eslint src/**",
+    "build": "rollup --config",
+    "test": "rollup --config rollup.config.test.js --watch"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.18.6",
+    "@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",
+    "autoprefixer": "^10.4.19",
+    "bootstrap-icons": "^1.11.3",
+    "eslint": "8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "myfx": "^1.4.14",
+    "postcss": "^8.4.38",
+    "prettier": "^2.8.3",
+    "rollup-plugin-banner2": "1.2.2",
+    "rollup-plugin-clear": "2.0.7",
+    "rollup-plugin-copy": "3.4.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-serve": "^2.0.1",
+    "rollup-plugin-typescript2": "0.33.0",
+    "sass": "^1.72.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.6.3"
+  }
+}

package/reactive.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 用于提供全局state状态管理
+ * @author holyhigh2
+ */
+import { CompElem } from "./CompElem";
+import { IRenderContext } from "./render/RenderContext";
+import { Getter } 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;
+    __directiveQ: any[][];
+    setDirectiveQ(val: any[]): void;
+    popDirectiveQ(): any[];
+    startRender(context: IRenderContext): void;
+    endRender(component: CompElem): void;
+    collect(prop: string): void;
+    clear(): void;
+    __renderCollection: Set<string>;
+    __renderContext: null;
+    __renderCollecting: boolean;
+    __skipCheck: boolean;
+};
+/**
+ * 1. 初始化时obj都是普通对象
+ * 2. OBJECT_VAR_PATH 首次是普通对象
+ * 3. OBJECT_META_DATA 直接绑定代理对象
+ * @param obj
+ * @param context
+ * @returns
+ */
+export declare function reactive(obj: Record<string, any>, context: any): any;

package/render/RenderContext.d.ts

@@ -0,0 +1,37 @@
+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;
+}
+/**
+ * 为组件/指令提供渲染接口
+ * @author holyhigh2
+ */
+export declare function RenderContext<T extends new (...args: any[]) => any>(spuerClass: T): {
+    new (...args: any[]): {
+        [x: string]: any;
+        /**
+       * 渲染实现
+       */
+        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;
+    };
+} & T;

package/render/render.d.ts

@@ -0,0 +1,69 @@
+import { CompElem } from "../CompElem";
+import { DirectiveWrapper } from "../directive/index";
+import { ExpPos } from "../types";
+export declare const ATTR_PREFIX_EVENT = "@";
+export declare const ATTR_PREFIX_PROP = ".";
+export declare const ATTR_PREFIX_BOOLEAN = "?";
+export declare const ATTR_PREFIX_REF = "*";
+export declare const ATTR_PROP_DELIMITER = ":";
+export declare const ATTR_REF = "ref";
+/**
+ * 提供渲染函数相关操作
+ * @author holyhigh2
+ */
+/**
+ * 高性能dom生成及变量绑定算法
+ * 1. 使用占位符拼接HTML字符串，占位符与变量需要按照顺序对应
+ * 2. 插入dom片段，并遍历元素+注释节点, 搜索占位符
+ *  1. 按顺序遍历所有attr，发现一个属性值含有占位符时，标记节点及属性名，以便变量可以进行绑定（ 如果key是事件/ref则内容仅允许一个占位符）
+ *  2. 如果是注释节点
+ *    1. 在后面追加同内容注释节点，标记两个节点，以便变量可以进行绑定
+ *    2. 在中间插入变量内容
+ * 3. 只有表达式是一个指令时才能绑定依赖
+ * @param tmpl
+ * @param slotArgs
+ * @returns
+ */
+export declare function buildHTML(tmpl: Template | Template[]): string;
+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 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
+ * @param vars
+ */
+export declare function html(strings: TemplateStringsArray, ...vars: any): Template;
+export interface RefObject<T> {
+    current: T;
+}
+/**
+ * 使用初始值创建一个引用对象
+ * @param initValue
+ * @returns
+ */
+export declare function createRef<T>(initValue?: any): RefObject<T>;

package/types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @author holyhigh2
+ */
+import { Template } from "./render/render";
+export type Constructor<T> = new (...args: any[]) => T;
+export type Getter = () => any;
+/**
+ * 插槽配置对象
+ */
+export type SlotOptions = {
+    filter: Record<string, any> | Function;
+    props: Record<string, any>;
+    hook: Function;
+};
+export type TmplFn = (...args: any[]) => Template;
+export declare enum DirectiveUpdateTag {
+    NONE = "NONE",//框架不处理
+    REMOVE = "REMOVE",//删除指令创建的节点
+    REPLACE = "REPLACE",//删除已有节点后插入
+    UPDATE = "UPDATE",//对比更新
+    APPEND = "APPEND"
+}
+/**
+ * 模板中的表达式位置
+ */
+export declare class ExpPos {
+    index: string;
+    value: any;
+    isText: boolean;
+    isTmpl: boolean;
+    isDirective: boolean;
+    node: Node;
+    textNode: Node;
+    isComponent: boolean;
+    attrName: string;
+    attrTmpl: string;
+    isProp: boolean;
+    isToggleProp: boolean;
+    eventName: string;
+    constructor(varIndex: string | number, node: Node, attrName?: string, attrTmpl?: string);
+}

package/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function showError(msg: string): void;
+export declare function showTagError(tagName: string, msg: string): void;
+export declare function showWarn(...args: unknown[]): void;
+export declare function showTagWarn(tagName: string, msg: string): void;
+export declare function toUpdatePath(varPath: string[]): string;