compelem 0.20.0-b2 → 0.20.1

package/compelem.umd.js

@@ -1,4245 +0,0 @@
-/**
-   * compelem v0.20.0-b2.1772633551
-   * A modern, reactive, fast, lightweight and flexible lib for building web components
-   * @holyhigh2
-   * git+https://github.com/holyhigh2/compelem.git
-   */
-  (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('myfx')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'myfx'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.compelem = {}, global.myfx));
-})(this, (function (exports, myfx) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var myfx__default = /*#__PURE__*/_interopDefaultLegacy(myfx);
-
-    /**
-     * 样式模板
-     * @author holyhigh2
-     */
-    class CssTemplate {
-        strings;
-        vars;
-        constructor(strings, vars) {
-            this.strings = myfx.concat(strings);
-            this.vars = vars;
-        }
-        getCss(comp) {
-            let str = '';
-            this.strings.forEach((s, i) => {
-                str = str + s + (this.vars[i] ?? '');
-            });
-            return str;
-        }
-        destroy() {
-            this.strings = this.vars = null;
-        }
-    }
-
-    const SLOT_NAME_DEFAULT = 'default';
-    /**
-     * 共享内容
-     */
-    const EXP_KEY = /\s+\.?key\s*=/;
-    var CollectorType;
-    (function (CollectorType) {
-        CollectorType[CollectorType["RENDER"] = 1] = "RENDER";
-        CollectorType[CollectorType["COMPUTED"] = 2] = "COMPUTED";
-        CollectorType[CollectorType["DIRECTIVE"] = 3] = "DIRECTIVE";
-    })(CollectorType || (CollectorType = {}));
-    var Mode;
-    (function (Mode) {
-        Mode["Prod"] = "prod";
-        Mode["Dev"] = "dev";
-    })(Mode || (Mode = {}));
-    const DefinitionCompEventMap = new Map();
-    const DefinitionTagMap = {};
-    const DefinitionWatchMap = new Map();
-    const DefinitionComputedMap = new Map();
-    const DefinitionStateMap = new Map();
-    const DefinitionPropMap = new Map();
-    const DefinitionDecoratorMap = new Map();
-    const ObservedAttrsMap = new Map();
-    const ComponentDynamicCssUpdaterMap = new WeakMap();
-    const PATH_SEPARATOR = '-';
-
-    function showError(msg) {
-        console.error(`[CompElem]`, msg);
-    }
-    function showTagError(tagName, msg) {
-        console.error(`[CompElem <${tagName}>]`, msg);
-    }
-    function showWarn(...args) {
-        console.warn(`[CompElem]`, ...args);
-    }
-    function showTagWarn(tagName, msg) {
-        console.warn(`[CompElem <${tagName}>]`, msg);
-    }
-    //为依赖收集提供标准地址
-    function _toUpdatePath(varPath) {
-        return myfx.toPath(varPath).join("-");
-    }
-    //获取父类构造
-    function _getSuper(cls) {
-        return Object.getPrototypeOf(cls);
-    }
-    function isBooleanProp(type) {
-        return type === Boolean || myfx.some(type, t => t === Boolean);
-    }
-    //返回boolean值或非boolean值
-    function getBooleanValue(v) {
-        let val = v;
-        if (myfx.isString(v) && /(?:^true$)|(?:^false$)/.test(val)) {
-            val = val === 'true' ? true : false;
-        }
-        else if (myfx.isUndefined(val) || myfx.isBlank(val)) {
-            val = true;
-        }
-        return val;
-    }
-    const DomUtil = {
-        getNodes(startNode, endNode) {
-            let nextNode = startNode.nextSibling;
-            if (!endNode)
-                return [nextNode];
-            let rs = [];
-            while (nextNode && nextNode !== endNode) {
-                rs.push(nextNode);
-                nextNode = nextNode?.nextSibling;
-            }
-            return rs;
-        },
-        insertBefore: function (node, newNodes) {
-            if (!node.parentNode)
-                return;
-            let fragment = document.createDocumentFragment();
-            fragment.append(...newNodes);
-            node.parentNode.insertBefore(fragment, node);
-        },
-        remove: function (startNode, endNode) {
-            if (startNode === endNode) {
-                startNode?.parentNode?.removeChild(startNode);
-                return;
-            }
-            let nextNode = startNode.nextSibling;
-            while (nextNode && nextNode !== endNode) {
-                nextNode?.parentNode?.removeChild(nextNode);
-                nextNode = startNode.nextSibling;
-            }
-        },
-        //清除dom内容并释放内存
-        clear(container, comp) {
-            if (!container)
-                return;
-            let nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_COMMENT);
-            //subscopes
-            let currentNode;
-            nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_ELEMENT);
-            while ((currentNode = nodeIterator.nextNode())) {
-                if (container === currentNode)
-                    continue;
-                if (currentNode instanceof Comment) ;
-                else if (currentNode instanceof CompElem) {
-                    currentNode.destroy();
-                }
-                else ;
-            }
-        }
-    };
-    function getSlotComponent(node, renderComponent) {
-        let documentFragment = myfx.closest(node, (n) => n.host && n.host instanceof CompElem, 'parentNode');
-        if (documentFragment && documentFragment.host === renderComponent)
-            return undefined;
-        return documentFragment ? documentFragment.host : undefined;
-    }
-
-    function prop(options) {
-        if (arguments.length === 1) {
-            return (target, propertyKey, descriptor) => {
-                options.required = options.required || false;
-                options.attribute = options.attribute === false ? false : true;
-                defineProp(target, propertyKey, options, descriptor);
-            };
-        }
-        let target = arguments[0], propertyKey = arguments[1], descriptor = arguments[2];
-        options = { type: undefined, required: false, attribute: true };
-        if (descriptor && typeof descriptor.type === 'function') {
-            options = myfx.defaults(descriptor, options);
-            descriptor = undefined;
-        }
-        defineProp(target, propertyKey, options, descriptor);
-    }
-    function defineProp(target, propertyKey, options, descriptor) {
-        if (!myfx.isLowerCaseChar(propertyKey[0])) {
-            showError(`Prop '${propertyKey}' must be in CamelCase`);
-        }
-        let attrSet;
-        if (!DefinitionPropMap.has(target.constructor.name)) {
-            const mixinProps = {};
-            let parentCtor = target.constructor;
-            while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                myfx.merge(mixinProps, DefinitionPropMap.get(parentCtor.name) ?? {});
-            }
-            attrSet = new Set();
-            myfx.each(mixinProps, (v, k) => {
-                if (v.attribute) {
-                    let kbb = myfx.kebabCase(k);
-                    attrSet?.add(kbb);
-                }
-            });
-            ObservedAttrsMap.set(target.constructor.name, attrSet);
-            DefinitionPropMap.set(target.constructor.name, mixinProps);
-        }
-        if (descriptor) {
-            if (descriptor.get)
-                options.getter = descriptor.get;
-            if (descriptor.set)
-                options.setter = descriptor.set;
-        }
-        if (options.attribute) {
-            if (!attrSet) {
-                attrSet = ObservedAttrsMap.get(target.constructor.name);
-            }
-            let kbb = myfx.kebabCase(propertyKey);
-            attrSet?.add(kbb);
-        }
-        //observeAttrs
-        if (!myfx.has(target.constructor, 'observedAttributes')) {
-            target.constructor.observedAttributes = [];
-        }
-        if (attrSet)
-            target.constructor.observedAttributes = myfx.toArray(attrSet);
-        myfx.set(DefinitionPropMap.get(target.constructor.name), propertyKey, options);
-    }
-    //内部接口
-    const emptySet = new Set;
-    function _getObservedAttrs(ctor) {
-        return ObservedAttrsMap.get(ctor.name) ?? emptySet;
-    }
-
-    /*************************************************************
-     * 扩展事件
-     * @author holyhigh2
-     *
-     * resize
-     * outside[.mousedown/mouseup/click/dblclick] 默认click
-     * mutate[.attr/child/char/tree]
-     *
-     *************************************************************/
-    const ExtEvNames = ['resize', 'outside', 'mutate'];
-    ///////////////////////////////////////////////// resize
-    const AllResizeEls = new WeakMap;
-    const AllOutsideDownEls = [];
-    const AllOutsideClickEls = [];
-    const AllOutsideDblClickEls = [];
-    const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-            const contentBoxSize = Array.isArray(entry.contentBoxSize)
-                ? entry.contentBoxSize[0]
-                : entry.contentBoxSize;
-            const borderBoxSize = Array.isArray(entry.borderBoxSize)
-                ? entry.borderBoxSize[0]
-                : entry.borderBoxSize;
-            let cbk = AllResizeEls.get(entry.target);
-            if (cbk) {
-                let ev = new CustomEvent('resize', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        borderBox: { w: borderBoxSize.inlineSize, h: borderBoxSize.blockSize },
-                        contentBox: { w: contentBoxSize.inlineSize, h: contentBoxSize.blockSize },
-                    },
-                });
-                cbk(ev, entry.target);
-            }
-        }
-    });
-    function addResize(node, cbk, component) {
-        if (AllResizeEls.has(node))
-            return;
-        AllResizeEls.set(node, cbk);
-        resizeObserver.observe(node);
-        //record
-        let observer = resizeObserver;
-        return (remove = false) => {
-            observer.unobserve(node);
-            AllResizeEls.delete(node);
-            if (remove) {
-                observer = node = null;
-            }
-        };
-    }
-    ///////////////////////////////////////////////// mutate
-    var MutationType;
-    (function (MutationType) {
-        MutationType["Child"] = "child";
-        MutationType["Tree"] = "tree";
-        MutationType["Attr"] = "attr";
-        MutationType["Char"] = "char";
-    })(MutationType || (MutationType = {}));
-    const AllMutationEls = new WeakMap;
-    const mutationObserver = new MutationObserver(mutations => {
-        for (let i = 0; i < mutations.length; i++) {
-            const mutation = mutations[i];
-            let map = AllMutationEls.get(mutation.target);
-            if (!map)
-                return;
-            let detail = {
-                target: mutation.target
-            };
-            let cbk = null;
-            switch (mutation.type) {
-                case 'subtree':
-                    detail.type = MutationType.Tree;
-                    cbk = map[MutationType.Tree];
-                    break;
-                case "childList":
-                    detail.type = MutationType.Child;
-                    detail.addedNodes = mutation.addedNodes;
-                    detail.removedNodes = mutation.removedNodes;
-                    cbk = map[MutationType.Child];
-                    break;
-                case "attributes":
-                    detail.type = MutationType.Attr;
-                    detail.attributeName = mutation.attributeName;
-                    detail.oldValue = mutation.oldValue;
-                    cbk = map[MutationType.Attr];
-                    break;
-                case "characterData":
-                    detail.type = MutationType.Char;
-                    detail.oldValue = mutation.oldValue;
-                    cbk = map[MutationType.Char];
-                    break;
-            }
-            if (cbk) {
-                let ev = new CustomEvent('mutate', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail
-                });
-                cbk(ev);
-            }
-        }
-    });
-    function addMutation(node, cbk, parts, component) {
-        let child = myfx.includes(parts, 'child');
-        let attr = myfx.includes(parts, 'attr');
-        let char = myfx.includes(parts, 'char');
-        let tree = myfx.includes(parts, 'tree');
-        let map = AllMutationEls.get(node);
-        if (map)
-            return;
-        map = {};
-        AllMutationEls.set(node, map);
-        if (child) {
-            map[MutationType.Child] = cbk;
-        }
-        if (attr) {
-            map[MutationType.Attr] = cbk;
-        }
-        if (char) {
-            map[MutationType.Char] = cbk;
-        }
-        if (tree) {
-            map[MutationType.Tree] = cbk;
-        }
-        mutationObserver.observe(node, {
-            childList: child,
-            attributes: attr,
-            characterData: char,
-            subtree: tree
-        });
-        //record
-        return (remove = false) => {
-            AllMutationEls.delete(node);
-            if (remove) {
-                node = null;
-            }
-        };
-    }
-    ///////////////////////////////////////////////// outside
-    document.addEventListener('mousedown', e => {
-        let t = myfx.get(e.composedPath(), 0, e.target);
-        AllOutsideDownEls.forEach(([node, cbk]) => {
-            if (!node.contains(t) && !node.contains(myfx.closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-                let ev = new CustomEvent('outside', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        currentTarget: node,
-                        event: e
-                    },
-                });
-                cbk(ev, node);
-            }
-        });
-    }, false);
-    document.addEventListener('click', e => {
-        let t = myfx.get(e.composedPath(), 0, e.target);
-        AllOutsideClickEls.forEach(([node, cbk]) => {
-            if (!node.contains(t) && !node.contains(myfx.closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-                let ev = new CustomEvent('outside', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        currentTarget: node,
-                        event: e
-                    },
-                });
-                cbk(ev, node);
-            }
-        });
-    }, false);
-    document.addEventListener('dblclick', e => {
-        let t = myfx.get(e.composedPath(), 0, e.target);
-        AllOutsideDblClickEls.forEach(([node, cbk]) => {
-            if (!node.contains(t) && !node.contains(myfx.closest(t, (node) => node instanceof ShadowRoot, 'parentNode')?.host)) {
-                let ev = new CustomEvent('outside', {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: {
-                        currentTarget: node,
-                        event: e
-                    },
-                });
-                cbk(ev, node);
-            }
-        });
-    }, false);
-    function addOutsideMouseDown(node, cbk, component) {
-        AllOutsideDownEls.push([node, cbk]);
-        //record
-        return (remove = false) => {
-            myfx__default["default"].remove(AllOutsideDownEls, el => el[0] === node && el[1] === cbk);
-        };
-    }
-    function addOutsideClick(node, cbk, component) {
-        AllOutsideClickEls.push([node, cbk]);
-        //record
-        return (remove = false) => {
-            myfx__default["default"].remove(AllOutsideClickEls, el => el[0] === node && el[1] === cbk);
-        };
-    }
-    function addOutsideDblClick(node, cbk, component) {
-        AllOutsideDblClickEls.push([node, cbk]);
-        //record
-        return (remove = false) => {
-            myfx__default["default"].remove(AllOutsideDblClickEls, el => el[0] === node && el[1] === cbk);
-        };
-    }
-    function isExtEvent(evName) {
-        return ExtEvNames.includes(evName);
-    }
-    function addExtEvent(evName, node, cbk, parts, component) {
-        if (evName === 'resize') {
-            return addResize(node, cbk);
-        }
-        else if (evName === 'outside') {
-            switch (parts[0]) {
-                case 'mousedown':
-                    return addOutsideMouseDown(node, cbk);
-                case 'dblclick':
-                    return addOutsideDblClick(node, cbk);
-                case 'click':
-                default:
-                    return addOutsideClick(node, cbk);
-            }
-        }
-        else if (evName === 'mutate') {
-            return addMutation(node, cbk, parts);
-        }
-    }
-
-    const MODI_EV_DEBOUNCE = /,|^(debounce:.+)|(debounce$)/;
-    const MODI_EV_THROTTLE = /,|^(throttle:.+)|(throttle$)/;
-    const MODI_EV_SELF = 'self';
-    const MODI_EV_STOP = 'stop';
-    const MODI_EV_PREVENT = 'prevent';
-    const MODI_EV_ONCE = 'once';
-    const MODI_EV_CAPTURE = 'capture';
-    const MODI_EV_PASSIVE = 'passive';
-    const MODI_EV_MOUSE_LEFT = 'left';
-    const MODI_EV_MOUSE_RIGHT = 'right';
-    const MODI_EV_MOUSE_MIDDLE = 'middle';
-    const MODI_EV_KEYBOARD_COMBO_CTRL = 'ctrl';
-    const MODI_EV_KEYBOARD_COMBO_ALT = 'alt';
-    const MODI_EV_KEYBOARD_COMBO_SHIFT = 'shift';
-    const MODI_EV_KEYBOARD_COMBO_META = 'meta';
-    const MODI_EV_KEYBOARD_KEY_MAP = {
-        'esc': 'escape'
-    };
-    const MODI_PARAM_DIVIDER = ":";
-    /*************************************************************
-     * 事件修饰符
-     * @author holyhigh2
-     *
-     * 全部通用 debounce/once/throttle/capture/passive 可组合
-     * 原生通用 stop/prevent/self 可组合
-     * 鼠标 left/right/middle 不可组合
-     * 键盘 ctrl/alt/shift/meta 可组合 esc/letters... 不可组合,多个key并列式表示可选
-     *
-     * 部分修饰符支持参数，使用冒号传参如：throttle:100 / debounce:100
-     *************************************************************/
-    const VFN = () => { };
-    function addEvent(fullName, cbk, node, component) {
-        let parts = fullName.split('.');
-        let evName = parts.shift();
-        let isOnce = parts.includes(MODI_EV_ONCE);
-        let c = cbk ?? VFN;
-        let modi;
-        if (modi = myfx.find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
-            let params = modi.split(MODI_PARAM_DIVIDER);
-            c = myfx.debounce(c, parseInt(params[1]) || 100);
-        }
-        if (modi = myfx.find(parts, x => MODI_EV_THROTTLE.test(x))) {
-            let params = modi.split(MODI_PARAM_DIVIDER);
-            c = myfx.throttle(c, parseInt(params[1]) || 100);
-        }
-        if (isOnce) {
-            c = myfx.once(c);
-        }
-        if (isExtEvent(evName)) {
-            return addExtEvent(evName, node, c, parts);
-        }
-        let listener = (e) => {
-            if (parts.includes(MODI_EV_PREVENT))
-                e.preventDefault();
-            if (parts.includes(MODI_EV_STOP))
-                e.stopPropagation();
-            if (parts.includes(MODI_EV_SELF) && e.target !== e.currentTarget)
-                return;
-            if (e instanceof MouseEvent) {
-                if (parts.includes(MODI_EV_MOUSE_LEFT) && e.button != 0)
-                    return;
-                if (parts.includes(MODI_EV_MOUSE_RIGHT) && e.button != 2)
-                    return;
-                if (parts.includes(MODI_EV_MOUSE_MIDDLE) && e.button != 1)
-                    return;
-            }
-            else if (e instanceof KeyboardEvent) {
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
-                    return;
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
-                    return;
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
-                    return;
-                if (myfx.remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
-                    return;
-                let checkKeys = myfx.map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
-                if (myfx.size(checkKeys) > 0 && !checkKeys.includes(e.key.toLowerCase()))
-                    return;
-            }
-            console.debug(evName, c.name, node.tagName);
-            c(e);
-        };
-        let capture = parts.includes(MODI_EV_CAPTURE) || false;
-        let passive = parts.includes(MODI_EV_PASSIVE) || false;
-        let options = { capture, passive };
-        node.addEventListener(evName, listener, options);
-        //record
-        return (remove = false) => {
-            node.removeEventListener(evName, listener, options);
-            if (remove)
-                node = null;
-        };
-    }
-
-    /**
-     * 用于提供全局state状态管理
-     * @author holyhigh2
-     */
-    const Collector = {
-        popDirectiveQ() {
-            let rs = this.__varPathList.reduceRight((acc, p) => {
-                if (!acc.includes(p)) {
-                    acc.unshift(p);
-                }
-                return acc;
-            }, []);
-            return rs;
-        },
-        start() {
-            this.__collecting = true;
-            this.__varPathList = [];
-        },
-        end(renderComponent, up) {
-            if (renderComponent && up) {
-                renderComponent._regSubViewDeps(Collector.popVarPathList(), up);
-            }
-            this.__collecting = false;
-        },
-        popVarPathList() {
-            let rs = Array.from(new Set(this.__varPathList));
-            this.__varPathList = [];
-            return rs;
-        },
-        __varPathList: [],
-        __collecting: false,
-    };
-    //对象值在不同上下文的根路径
-    const OBJECT_VAR_ROOT_PATH_IN_CONTEXT = new WeakMap();
-    const OBJECT_VAR_PATH = new WeakMap();
-    //缓存已经创建的proxy对象
-    const PROXY_MAP = new WeakMap();
-    //对象值的创建上下文
-    const OBJECT_VAR_ROOT_CONTEXT = new WeakMap();
-    //上级对象所在的扩展context
-    const EXTRA_CONTEXT_OF_VAR = new WeakMap();
-    function reactive(obj, context, rootProp) {
-        if (PROXY_MAP.has(obj))
-            return PROXY_MAP.get(obj);
-        if (OBJECT_VAR_ROOT_CONTEXT.has(obj)) {
-            if (rootProp) {
-                let pathMap = OBJECT_VAR_ROOT_PATH_IN_CONTEXT.get(context);
-                if (!pathMap) {
-                    pathMap = new WeakMap();
-                    OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
-                }
-                pathMap.set(obj, rootProp);
-                let contextList = EXTRA_CONTEXT_OF_VAR.get(obj);
-                if (!contextList) {
-                    contextList = new Set();
-                    EXTRA_CONTEXT_OF_VAR.set(obj, contextList);
-                }
-                contextList.add(context);
-            }
-            return obj;
-        }
-        const proxyObject = new Proxy(obj, {
-            get(target, prop, receiver) {
-                if (!prop)
-                    return undefined;
-                const value = Reflect.get(target, prop, receiver);
-                if (myfx.isSymbol(prop))
-                    return value;
-                if (myfx.isFunction(value))
-                    return value;
-                if (prop === 'length' && myfx.isArray(target))
-                    return value;
-                if (Collector.__collecting) {
-                    let supPath = OBJECT_VAR_PATH.has(receiver) ? myfx.concat(OBJECT_VAR_PATH.get(receiver)) : [];
-                    supPath.push(prop);
-                    let propPath = supPath.join('.');
-                    Collector.__varPathList.push(propPath);
-                }
-                if (PROXY_MAP.has(value))
-                    return PROXY_MAP.get(value);
-                let reactiveVal = value;
-                if (myfx.isObject(value) && !myfx.isFunction(value) && !(value instanceof Node) && !Object.isFrozen(value)) {
-                    reactiveVal = reactive(value, context);
-                    let supPath = OBJECT_VAR_PATH.has(receiver) ? myfx.concat(OBJECT_VAR_PATH.get(receiver)) : [];
-                    supPath.push(prop);
-                    OBJECT_VAR_PATH.set(reactiveVal, supPath);
-                    PROXY_MAP.set(value, reactiveVal);
-                }
-                return reactiveVal;
-            },
-            set(target, prop, newValue, receiver) {
-                if (!prop)
-                    return false;
-                let ov = target[prop];
-                let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-                let subChain = myfx.concat(chain, [prop]);
-                let hasChanged = context._hasChangedPropOrStateMap?.get(subChain[0]);
-                let moreThan1 = subChain.length > 1;
-                let rootObjNew = newValue;
-                let rootObjOld = ov;
-                if (moreThan1) {
-                    rootObjOld = rootObjNew = context._getPrivateData()[subChain[0]];
-                }
-                if (hasChanged) {
-                    if (!hasChanged.call(context, rootObjNew, rootObjOld, subChain, newValue, ov))
-                        return true;
-                }
-                else {
-                    //默认对比算法
-                    if (Object.is(ov, newValue)) {
-                        return true;
-                    }
-                }
-                let nv = newValue;
-                let rs = Reflect.set(target, prop, nv);
-                let extraContext = EXTRA_CONTEXT_OF_VAR.get(receiver);
-                let k = subChain.join('.');
-                //check watch
-                context._requestWatchUpdate(nv, ov, k, rootObjNew, rootObjOld);
-                //check computed
-                context._requestComputedUpdate(k);
-                notifyUpdate(context, rootObjOld, subChain);
-                myfx.each(extraContext, ctx => {
-                    let ctxRootPath = ctx._wrapperProp[subChain[0]];
-                    let ck = subChain.join('.');
-                    ck = ck.replace(subChain[0], ctxRootPath);
-                    //check watch
-                    ctx._requestWatchUpdate(nv, ov, ck);
-                    //check computed
-                    ctx._requestComputedUpdate(ck);
-                    notifyUpdate(ctx, rootObjOld, ck.split('.'));
-                });
-                return rs;
-            }
-        });
-        if (!OBJECT_VAR_PATH.has(proxyObject)) {
-            OBJECT_VAR_PATH.set(proxyObject, rootProp ? [rootProp] : []);
-        }
-        PROXY_MAP.set(obj, proxyObject);
-        if (rootProp) {
-            OBJECT_VAR_ROOT_CONTEXT.set(proxyObject, context);
-            if (!OBJECT_VAR_ROOT_PATH_IN_CONTEXT.has(context)) {
-                let pathMap = new WeakMap();
-                pathMap.set(proxyObject, rootProp);
-                OBJECT_VAR_ROOT_PATH_IN_CONTEXT.set(context, pathMap);
-            }
-        }
-        return proxyObject;
-    }
-    function notifyUpdate(context, oldValue, path, subNewValue, subOldValue) {
-        let i = myfx.size(path);
-        myfx.eachRight(path, (p) => {
-            let varPath = myfx.slice(path, 0, i--);
-            context._notify(oldValue, varPath);
-        });
-    }
-    const QMap = new Map();
-    class Queue {
-        static nextSet = new Set();
-        static nextPending = false;
-        static next;
-        static flush() {
-            Queue.nextPending = false;
-            let nq = Array.from(Queue.nextSet);
-            Queue.nextSet.clear();
-            QMap.clear();
-            nq.forEach(u => u());
-            nq = null;
-        }
-        static pushNext(updater) {
-            Queue.nextSet.add(updater);
-            if (!Queue.nextPending) {
-                Queue.nextPending = true;
-                Queue.next();
-            }
-        }
-    }
-    (() => {
-        const p = Promise.resolve();
-        const nextFn = Queue.flush;
-        Queue.next = () => {
-            p.then(nextFn);
-        };
-    })();
-
-    const PropTypeMap = {
-        boolean: Boolean,
-        string: String,
-        number: Number,
-        object: Object,
-        array: Array,
-        function: Function,
-        undefined: Object
-    };
-    //组件静态样式
-    const ComponentStaticStyleMap = new WeakMap();
-    let DefaultCss = [];
-    let CompElemSn = 0;
-    const SlotCompMap = new WeakMap();
-    const EMPTY_SLOTS = {};
-    const PROP_NAME_SLOTS = 'slots';
-    /**
-     * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
-     * 每个组件都需要继承自该类
-     *
-     * @author holyhigh2
-     */
-    class CompElem extends HTMLElement {
-        static __l_globalRule = document.createElement("style");
-        //设置全局/组件默认属性
-        static defaults(options) {
-            DefaultCss = myfx.flatMap(options.css, c => {
-                if (myfx.isString(c)) {
-                    let sheet = new CSSStyleSheet();
-                    sheet.replaceSync(c);
-                    return sheet;
-                }
-                else if (c instanceof CSSStyleSheet) {
-                    return c;
-                }
-                return [];
-            });
-            //todo...
-            options.global;
-            myfx.each(options, (v, k) => {
-                if (myfx.test(k[0], /[A-Z]/)) ;
-            });
-        }
-        #cid;
-        #slotPropsMap = {};
-        #data = {};
-        #updateSources = {};
-        #shadow;
-        //保存所有渲染上下文 {CompElem/Directive}
-        __updateTree;
-        __cssSheets;
-        _eventList;
-        __docoEventMap;
-        __updateCssDeps;
-        __updateSubViewDeps;
-        __updateViewDeps;
-        _watchUpdateMap;
-        _watchDeepUpdateMap;
-        _watchKeys;
-        _watchKeysOnceMap;
-        _watchKeysDeep;
-        _watchUpdateSetInNextTick;
-        _watchUpdateArgsInNextTick;
-        _computedUpdateDeps;
-        _computedUpdateSetInNextTick;
-        _hasChangedPropOrStateMap;
-        _hasSyncPropSet;
-        _hasShallowStateSet;
-        get [Symbol.toStringTag]() {
-            return this.constructor.name;
-        }
-        get cid() {
-            return this.#cid;
-        }
-        get attrs() {
-            return this.#attrs;
-        }
-        get props() {
-            return this.#props;
-        }
-        get renderRoot() {
-            return this.#renderRoot?.deref();
-        }
-        get renderRoots() {
-            return this.#renderRoots.flatMap(wr => wr.deref() ?? []);
-        }
-        get parentComponent() {
-            return this.#parentComponent?.deref();
-        }
-        get wrapperComponent() {
-            return this.#wrapperComponent?.deref();
-        }
-        get slotHooks() {
-            return this.#slotHooks;
-        }
-        get styleSheets() {
-            return ComponentStaticStyleMap.get(this);
-        }
-        get globalStyleSheet() {
-            return CompElem.__l_globalRule.sheet;
-        }
-        get isMounted() {
-            return this.#mounted;
-        }
-        get slots() {
-            return EMPTY_SLOTS;
-        }
-        #attrs;
-        #props;
-        #renderRoot;
-        #renderRoots;
-        #parentComponent;
-        #wrapperComponent;
-        #slotsEl = {};
-        #slotHooks = {};
-        #slotNodes = {};
-        #mounted = false;
-        #updateViewImmediately = false;
-        #updateNextImmediatelyQ;
-        //////////////////////////////////// styles
-        /**
-         * 组件样式，CSSStyleSheet可动态变更
-         */
-        static get styles() {
-            return [];
-        }
-        static get globalStyle() {
-            return undefined;
-        }
-        static get hostStyle() {
-            return undefined;
-        }
-        get styles() {
-            return [];
-        }
-        #inited = false;
-        #initiating = false;
-        constructor(...args) {
-            super();
-            this.#cid = CompElemSn++;
-            this.__updateTree = [];
-            //init props via constructor
-            if (myfx.size(args) === 1) {
-                this.#props = {};
-                myfx.assign(this.#props, myfx.first(args));
-            }
-            /////////////////////////////////////////////////// slots
-            // this.#updateSlotsAry()
-            /////////////////////////////////////////////////// decorators create
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
-            ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => dw.create(this));
-            this.#updatedD = this.#update.bind(this);
-        }
-        insertStyleSheet(sheet) {
-            if (!this.#shadow)
-                return null;
-            let cssSheet;
-            if (myfx.isString(sheet)) {
-                cssSheet = new CSSStyleSheet();
-                try {
-                    cssSheet.replaceSync(sheet);
-                }
-                catch (e) {
-                }
-            }
-            else {
-                if (this.#shadow.adoptedStyleSheets.includes(sheet))
-                    return sheet;
-                cssSheet = sheet;
-            }
-            this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, cssSheet];
-            // Keep ComponentStyleMap in sync for this constructor
-            const cur = ComponentStaticStyleMap.get(this) ?? [];
-            cur.push(cssSheet);
-            return cssSheet;
-        }
-        /**
-         * Returns the root component in the parent chain, or itself if it's the top-level component.
-         */
-        get rootComponent() {
-            let comp = this;
-            while (comp.parentComponent) {
-                comp = comp.parentComponent;
-            }
-            return comp;
-        }
-        #updatedD;
-        connectedCallback() {
-            //parent
-            let node = myfx.closest(this.parentNode, (node) => node instanceof CompElem || node.host instanceof CompElem, "parentNode");
-            this.#parentComponent = node
-                ? node instanceof CompElem
-                    ? new WeakRef(node)
-                    : new WeakRef(node.host)
-                : undefined;
-            if (!CompElem.__l_globalRule.parentNode) {
-                document.head.appendChild(CompElem.__l_globalRule);
-            }
-            //host styles
-            let hostStyle = myfx.get(this.constructor, "hostStyle");
-            let styleSheet = myfx.get(this.constructor, 'hostStyleSheet');
-            if (hostStyle) {
-                if (!styleSheet) {
-                    if (myfx.isString(hostStyle)) {
-                        styleSheet = new CSSStyleSheet();
-                        styleSheet.replaceSync(hostStyle);
-                    }
-                    else {
-                        styleSheet = hostStyle;
-                    }
-                    myfx.set(this.constructor, 'hostStyleSheet', styleSheet);
-                }
-                let styleRoot = this.#wrapperComponent?.deref()?.shadowRoot ?? this.#parentComponent?.deref()?.shadowRoot ?? this.ownerDocument;
-                //detached el
-                if (this.#wrapperComponent && !this.#wrapperComponent.deref()?.shadowRoot?.contains(this)) {
-                    styleRoot = myfx.closest(this, n => n instanceof HTMLDocument || n instanceof ShadowRoot, 'parentNode');
-                }
-                if (styleRoot && styleSheet && !styleRoot.adoptedStyleSheets.includes(styleSheet)) {
-                    styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, styleSheet];
-                }
-            }
-            this.__init();
-            this.__bindEvents();
-        }
-        disconnectedCallback() {
-            this.__unbindEvents();
-        }
-        __bindEvents() {
-            let evs = this._eventList;
-            myfx.each(evs, (v) => {
-                let [evName, cbk, node, binded] = v;
-                if (binded)
-                    return;
-                if (!node)
-                    return;
-                let handler = cbk ? cbk.bind(this) : cbk;
-                let unbinder = addEvent(evName, handler, node);
-                v[3] = unbinder;
-            });
-            //event decoration
-            let events = DefinitionCompEventMap.get(this.constructor.name);
-            if (myfx.size(events) > 0) {
-                if (!this.__docoEventMap)
-                    this.__docoEventMap = new Map();
-                myfx.each(events, ({ name, targetFn, fnName }) => {
-                    if (this.__docoEventMap.has(name + "@" + fnName))
-                        return;
-                    let eventTarget = targetFn ? targetFn(this) : this;
-                    let cbk = myfx.get(this, fnName);
-                    let handler = cbk ? cbk.bind(this) : cbk;
-                    let unbinder = addEvent(name, handler, eventTarget);
-                    this.__docoEventMap.set(name + "@" + fnName, unbinder);
-                });
-            }
-        }
-        __unbindEvents() {
-            myfx.each(this._eventList, (v) => {
-                let [, , , unbinder] = v;
-                if (unbinder)
-                    unbinder();
-                v[3] = null;
-            });
-            let delDecoKeys = [];
-            myfx.each(this.__docoEventMap, (unbinder, k) => {
-                if (unbinder)
-                    unbinder();
-                delDecoKeys.push(k);
-            });
-            delDecoKeys.forEach(k => this.__docoEventMap.delete(k));
-        }
-        beforeDestroyed() {
-        }
-        destroyed() {
-        }
-        get isDestroyed() {
-            return this.#destroyed;
-        }
-        #destroyed = false;
-        destroy() {
-            if (this.#destroyed)
-                return;
-            this.#destroyed = true;
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
-            ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
-                dw.destroy(this);
-            });
-            this.beforeDestroyed();
-            //events
-            this.__unbindEvents();
-            myfx.each(this.#rootEvs, (hooks, evName) => {
-                myfx.each(hooks, hook => {
-                    this.removeEventListener(evName, hook);
-                });
-                this.#rootEvs[evName] = null;
-            });
-            myfx.each(this.#nodeEvs, (hooks, evName) => {
-                myfx.each(hooks, ([hook, ref]) => {
-                    ref.deref()?.removeEventListener(evName, hook);
-                });
-                this.#nodeEvs[evName] = null;
-            });
-            this.__docoEventMap?.clear();
-            this.__docoEventMap = this._eventList = null;
-            //styles
-            ComponentStaticStyleMap.delete(this);
-            ComponentDynamicCssUpdaterMap.get(this)?.clear();
-            ComponentDynamicCssUpdaterMap.delete(this);
-            //reactive
-            this._watchUpdateArgsInNextTick?.clear();
-            this._watchUpdateSetInNextTick?.clear();
-            this._watchKeysOnceMap?.clear();
-            this._watchUpdateMap = this._watchDeepUpdateMap = this._watchKeys = this._watchKeysDeep = this._watchKeysOnceMap = null;
-            this._computedUpdateDeps?.clear();
-            this._computedUpdateSetInNextTick?.clear();
-            this._computedUpdateDeps = this._computedUpdateSetInNextTick = null;
-            this.__updateCssDeps = this.__updateViewDeps = null;
-            this.__updateSubViewDeps?.clear();
-            this._hasChangedPropOrStateMap?.clear();
-            this._hasShallowStateSet?.clear();
-            this._hasSyncPropSet?.clear();
-            this._hasChangedPropOrStateMap = this._hasShallowStateSet = this._hasSyncPropSet = null;
-            //sup scope
-            if (this.#parentComponent) {
-                let pComp = this.#parentComponent.deref();
-                pComp && myfx.walkTree(pComp.__updateTree, (up) => {
-                    if (up.__destroyed)
-                        return;
-                    if (up.node?.deref() === this) {
-                        up.destroy(pComp);
-                        myfx.remove(up.parent ? up.parent.children : pComp.__updateTree, c => c === up);
-                    }
-                });
-            }
-            //sub scopes
-            myfx.each(this.__updateTree, up => up?.destroy(this));
-            //slots
-            myfx.each(this.#slotsEl, (slotEl) => {
-                SlotCompMap.delete(slotEl);
-                slotEl.remove();
-            });
-            myfx.each(this.#slotNodes, (nodes) => {
-                myfx.each(nodes, (node) => node.remove());
-            });
-            myfx.each(this.#data.slots, (nodes, k) => {
-                myfx.each(nodes, (node) => node.remove());
-            });
-            this.#updateSlots.clear();
-            this.#updateSlots = this.#slotPropsMap = this.#data.slots = null;
-            this.remove();
-            //data
-            this._wrapperProp =
-                this.#slotNodes =
-                    this.#propsReady =
-                        this.#renderRoot = this.#renderRoots = this.#shadow =
-                            this.#rootEvs =
-                                this.#nodeEvs =
-                                    this.#updateSources =
-                                        this.#attrs =
-                                            this.#props =
-                                                this.#renderRoot =
-                                                    this.#renderRoots =
-                                                        this.#slotHooks =
-                                                            this.#updatedD =
-                                                                this.#data =
-                                                                    this.#slotsEl =
-                                                                        this.__updateTree =
-                                                                            this.#parentComponent =
-                                                                                this._asyncDirectives =
-                                                                                    this.#wrapperComponent = null;
-            //unmount
-            this.destroyed();
-        }
-        //////////////////////////////////// lifecycles
-        //********************************** 首次渲染
-        //构造时上级传递的参数
-        __init() {
-            if (this.#inited)
-                return;
-            //防止在钩子中出现重新挂载的情况
-            if (this.#initiating)
-                return;
-            this.#initiating = true;
-            let thisRef = new WeakRef(this);
-            //global styles
-            let globalTextContent = myfx.get(this.constructor, "globalStyle");
-            if (!myfx.isEmpty(globalTextContent) && myfx.isString(globalTextContent) && !myfx.get(this.constructor, '_globalRuleInserted')) {
-                CompElem.__l_globalRule.textContent += globalTextContent; //.sheet?.insertRule(globalTextContent, 0)
-                myfx.set(this.constructor, '_globalRuleInserted', true);
-            }
-            //component styles
-            let beAttached2 = ComponentStaticStyleMap.get(this);
-            let styleSheets = beAttached2 ?? [];
-            if (!beAttached2) {
-                myfx.each(myfx.get(this.constructor, "styles"), (st) => {
-                    if (myfx.isString(st)) {
-                        let sheet = new CSSStyleSheet();
-                        sheet.replaceSync(st);
-                        styleSheets.push(sheet);
-                    }
-                    else if (myfx.isFunction(st)) ;
-                    else {
-                        styleSheets.push(st);
-                    }
-                });
-                ComponentStaticStyleMap.set(this, styleSheets);
-            }
-            ////////////////////////////////////////////////// Props & States
-            const props = this.#initProps();
-            this.propsReady(props);
-            for (const key in props) {
-                const v = props[key];
-                this.#data[key] = v;
-            }
-            this.#initStates();
-            //2. Data
-            this.#data.slots = {};
-            myfx.each(this.#data, (v, k) => {
-                let descr = Reflect.getOwnPropertyDescriptor(this.#data, k);
-                Reflect.defineProperty(this, k, {
-                    get() {
-                        let thisHost = thisRef.deref();
-                        let v = descr?.get ? descr?.get() : Reflect.get(thisHost.#data, k);
-                        if (Collector.__collecting) {
-                            Collector.__varPathList.push(k);
-                        }
-                        if (PROXY_MAP.has(v)) {
-                            let contextList = EXTRA_CONTEXT_OF_VAR.get(v);
-                            if (!contextList) {
-                                contextList = new Set();
-                                EXTRA_CONTEXT_OF_VAR.set(v, contextList);
-                            }
-                            contextList.add(thisHost);
-                            return PROXY_MAP.get(v);
-                        }
-                        if (myfx.isObject(v) && !myfx.isFunction(v) && !(v instanceof Node) && !Object.isFrozen(v)) {
-                            let shallow = thisHost._hasShallowStateSet?.has(k);
-                            v = shallow || k === PROP_NAME_SLOTS ? v : reactive(v, this, k);
-                        }
-                        return v;
-                    },
-                    set(v) {
-                        if (descr?.set) {
-                            descr?.set(v);
-                        }
-                        else {
-                            let thisHost = thisRef.deref();
-                            if (!thisHost.#inited) {
-                                Reflect.set(thisHost.#data, k, v);
-                                return;
-                            }
-                            let oldValue = thisHost.#data[k];
-                            let hasChanged = thisHost._hasChangedPropOrStateMap?.get(k);
-                            if (hasChanged) {
-                                if (!hasChanged.call(thisHost, v, oldValue, [k], v, oldValue))
-                                    return true;
-                            }
-                            else {
-                                //默认对比算法
-                                if (Object.is(oldValue, v)) {
-                                    return true;
-                                }
-                            }
-                            //check watch
-                            thisHost._requestWatchUpdate(v, oldValue, k);
-                            //check computed
-                            thisHost._requestComputedUpdate(k);
-                            Reflect.set(thisHost.#data, k, v);
-                            thisHost._notify(oldValue, [k]);
-                            //update sync
-                            if (thisHost._hasSyncPropSet?.has(k)) {
-                                thisHost.emit('update' + ":" + k, { value: v });
-                            }
-                        }
-                    },
-                });
-            });
-            Reflect.defineProperty(this.#data, '__isData', {
-                enumerable: false,
-                value: true
-            });
-            //3. Watch
-            let watchMap = DefinitionWatchMap.get(this.constructor.name) ?? DefinitionWatchMap.get(_getSuper(this.constructor).name);
-            if (watchMap) {
-                this._watchUpdateMap = {};
-                this._watchDeepUpdateMap = {};
-                this._watchKeys = [];
-                this._watchKeysDeep = [];
-                this._watchUpdateSetInNextTick = new Set();
-                this._watchUpdateArgsInNextTick = new Map();
-                this._watchKeysOnceMap = new Map();
-                myfx.each(watchMap, (watchList, k) => {
-                    watchList.forEach(v => {
-                        let { source, options, handler } = v;
-                        let fn = handler;
-                        let onceWatch = myfx.get(options, "once", false);
-                        if (onceWatch) {
-                            this._watchKeysOnceMap.set(k, false);
-                        }
-                        let deep = myfx.get(options, "deep", false);
-                        this._watchKeys.push(k);
-                        if (deep) {
-                            this._watchDeepUpdateMap[k] = this._watchDeepUpdateMap[k] ?? new Set();
-                            this._watchDeepUpdateMap[k].add(fn);
-                            this._watchKeysDeep.push(k);
-                        }
-                        else {
-                            this._watchUpdateMap[k] = this._watchUpdateMap[k] ?? new Set();
-                            this._watchUpdateMap[k].add(fn);
-                        }
-                        let immediate = myfx.get(options, "immediate", false);
-                        if (!immediate)
-                            return;
-                        let nv = myfx.get(this, source);
-                        fn.call(this, nv, undefined, source);
-                        if (onceWatch) {
-                            this._watchKeysOnceMap.set(k, true);
-                        }
-                    });
-                });
-            }
-            //4. Computed
-            let computedMap = DefinitionComputedMap.get(this.constructor.name) ?? DefinitionComputedMap.get(_getSuper(this.constructor).name);
-            if (computedMap) {
-                this._computedUpdateDeps = new Map();
-                this._computedUpdateSetInNextTick = new Set();
-                myfx.each(computedMap, (getter, propKey) => {
-                    myfx.set(getter, 'key', propKey);
-                    Collector.start();
-                    this.#data[propKey] = getter.call(this);
-                    Collector.end();
-                    let computedDeps = Collector.popVarPathList();
-                    computedDeps.forEach(dep => {
-                        let list = this._computedUpdateDeps.get(dep);
-                        if (!list) {
-                            list = new Set();
-                            this._computedUpdateDeps.set(dep, list);
-                        }
-                        list.add(getter);
-                    });
-                    Reflect.defineProperty(this, propKey, {
-                        get() {
-                            let v = Reflect.get(thisRef.deref().#data, propKey);
-                            if (Collector.__collecting) {
-                                Collector.__varPathList.push(propKey);
-                            }
-                            return v;
-                        }
-                    });
-                });
-            }
-            //5. Render
-            Collector.start();
-            let tmpl = this.render();
-            Collector.end();
-            let nodes;
-            if (tmpl === null) {
-                this.#renderRoots = [];
-                this.#renderRoot = undefined;
-            }
-            else {
-                /////////////////////////////////////////////////// shadow dom
-                this.#shadow = this.attachShadow({
-                    mode: "open"
-                });
-                let viewDeps = Collector.popVarPathList();
-                this.__updateViewDeps = viewDeps;
-                this.#shadow.adoptedStyleSheets = [...DefaultCss, ...(ComponentStaticStyleMap.get(this) ?? [])];
-                nodes = buildView(tmpl, this);
-                if (nodes) {
-                    this.#renderRoots = myfx.filter(nodes, (n) => n.nodeType === Node.ELEMENT_NODE).map(n => new WeakRef(n));
-                    this.#renderRoot = new WeakRef(nodes[0]);
-                }
-            }
-            this.#inited = true;
-            /////////////////////////////////////////////////// slots
-            this.#updateSlotsAry();
-            //slot hook
-            myfx.each(this.#slotHooks, (v, k) => {
-                this.#updateSlot(k);
-            });
-            const that = this;
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
-            ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
-                dw.beforeMount(this, (key, value) => {
-                    that.#data[key] = value;
-                    return that.#data[key];
-                });
-            });
-            this.beforeMount();
-            setTimeout(() => {
-                if (this.isDestroyed) {
-                    console.debug('Component is destroyed before mount', this.tagName);
-                    return;
-                }
-                this.#mounted = true;
-                if (this.#shadow) {
-                    //instance dynamic style
-                    let cssAry = [];
-                    Collector.start();
-                    let cssTmpls = this.styles;
-                    Collector.end();
-                    this.__updateCssDeps = Collector.popVarPathList();
-                    cssTmpls.forEach(cssTmpl => {
-                        let cssss = new CSSStyleSheet();
-                        cssAry.push(cssss);
-                        let css = cssTmpl.getCss(this);
-                        if (myfx.isBlank(css))
-                            return;
-                        cssss.replaceSync(css);
-                    });
-                    if (cssAry.length > 0) {
-                        this.__cssSheets = cssAry;
-                        this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, ...cssAry];
-                    }
-                }
-                if (nodes)
-                    this.#shadow.append(...nodes);
-                ary && ary.forEach(dw => {
-                    dw.mounted(this, (key, value) => {
-                        that.#data[key] = value;
-                        return that.#data[key];
-                    });
-                });
-                if (this.#updateNextImmediatelyQ) {
-                    this.#updateNextImmediatelyQ.forEach((cbk) => Queue.pushNext(cbk));
-                }
-                if (this.#updateViewImmediately) {
-                    Queue.pushNext(this.#updatedD);
-                }
-                this.__bindEvents();
-                this.mounted();
-            }, 0);
-        }
-        propsReady(props) { }
-        render() {
-            return null;
-        }
-        beforeMount() { }
-        mounted() { }
-        __onSlotChangeHook(e) {
-            let t = e.currentTarget;
-            let name = '';
-            myfx.each(this.#slotsEl, (el, n) => {
-                if (el === t) {
-                    name = n;
-                    return false;
-                }
-            });
-            if (this.#inited)
-                this.#onSlotChange(t, name === SLOT_NAME_DEFAULT ? '' : name);
-        }
-        #onSlotChange(slot, name) {
-            //1. 更新 _slotsPropMap & slots
-            this.#updateSlotsAry();
-            //2. 设置attrs
-            let props = myfx.get(this.#slotPropsMap[name], 'props');
-            if (props) {
-                myfx.each(this.slots, (nodeAry, k) => {
-                    nodeAry.filter(node => node.nodeType === Node.ELEMENT_NODE).forEach((node) => {
-                        if (node instanceof CompElem) {
-                            node._updateProps(props);
-                            return;
-                        }
-                        myfx.each(props, (v, k) => {
-                            if (node instanceof HTMLSlotElement) {
-                                let compOfSlot = SlotCompMap.get(node);
-                                if (compOfSlot) {
-                                    let sname = node.name || SLOT_NAME_DEFAULT;
-                                    let slotMap = compOfSlot.#slotPropsMap[sname];
-                                    if (!slotMap) {
-                                        slotMap = compOfSlot.#slotPropsMap[sname] = { props: {} };
-                                    }
-                                    if (!slotMap.props) {
-                                        slotMap.props = {};
-                                    }
-                                    slotMap.props[k] = v;
-                                    compOfSlot.#onSlotChange(node, sname);
-                                }
-                            }
-                            else {
-                                node.setAttribute(k, v);
-                            }
-                        });
-                    });
-                });
-            }
-            //3. callback
-            this.slotChange(slot, name);
-        }
-        slotChange(slot, name) { }
-        attributeChangedCallback(attributeName, oldValue, newValue) {
-            if (!this.#inited)
-                return;
-            if (Object.is(newValue, oldValue))
-                return;
-            let propName = myfx.camelCase(attributeName);
-            let propDef = DefinitionPropMap.get(this.constructor.name)[propName];
-            if (isBooleanProp(propDef.type)) {
-                let v = myfx.isNull(newValue) ? false : getBooleanValue(newValue);
-                if (myfx.get(this, propName) === v)
-                    return;
-            }
-            this.__attrChanged(attributeName, oldValue, newValue);
-        }
-        //********************************** 更新
-        /**
-         * 是否需要更新，可获取变更属性
-         * 返回true时更新
-         */
-        shouldUpdate(changed) {
-            return true;
-        }
-        /**
-         * 1. 调用render
-         * 2. 更新@query/all
-         * 3. 更新ref
-         * 4. 更新prop到attr的映射
-         * @param changed
-         */
-        updated(changed) { }
-        #rootEvs = {};
-        #nodeEvs = {};
-        /**
-         * 由监控变量调用
-         * @param stateKey
-         * @param ov
-         * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
-         * @returns
-         */
-        _notify(ov, chain, subNewValue, subOldValue) {
-            let varPath = [];
-            for (let i = 0; i < chain.length; i++) {
-                const seg = chain[i];
-                varPath.push(seg);
-                let v = myfx.get(this, varPath);
-                let pathStr = _toUpdatePath(varPath);
-                this.#updateSources[pathStr] = { value: v, chain: pathStr === PROP_NAME_SLOTS ? [PROP_NAME_SLOTS] : varPath, oldValue: ov, end: varPath.length === chain.length, subNewValue, subOldValue };
-            }
-            if (!this.isMounted) {
-                console.debug('target update...', this.tagName);
-                this.#updateViewImmediately = true;
-                return;
-            }
-            Queue.pushNext(this.#updatedD);
-        }
-        _requestWatchUpdate(newValue, oldValue, fullPath, rootObjNew, rootObjOld) {
-            this._watchKeys?.forEach(wk => {
-                if (fullPath === wk ||
-                    (myfx.startsWith(wk, fullPath + '.') && !Object.is(myfx.get(this._getPrivateData(), wk), myfx.get(newValue, wk))) ||
-                    (myfx.startsWith(fullPath, wk + '.') && this._watchKeysDeep.includes(wk) && !Object.is(myfx.get(this._getPrivateData(), wk), myfx.get(newValue, wk)))) {
-                    myfx.concat(myfx.toArray(this._watchUpdateMap[wk]), myfx.toArray(this._watchDeepUpdateMap[wk])).forEach(fn => {
-                        if (!fn)
-                            return;
-                        if (this._watchKeysOnceMap.get(wk) === true)
-                            return;
-                        this._watchUpdateArgsInNextTick.set(fn, {
-                            newValue, oldValue, chain: fullPath.split('.'), rootObjNew, rootObjOld, fullMatch: wk === fullPath
-                        });
-                        this._watchUpdateSetInNextTick.add(fn);
-                        if (this._watchKeysOnceMap.has(wk))
-                            this._watchKeysOnceMap.set(wk, true);
-                    });
-                }
-            });
-        }
-        _requestComputedUpdate(fullPath) {
-            if (this._computedUpdateDeps?.has(fullPath)) {
-                this._computedUpdateDeps.get(fullPath)?.forEach(fn => {
-                    this._computedUpdateSetInNextTick.add(fn);
-                });
-            }
-        }
-        #update() {
-            if (myfx.size(this.#updateSources) < 1)
-                return;
-            if (!this.isMounted)
-                return;
-            const changed = this.#updateSources;
-            this.#updateSources = {};
-            let toBreak = !this.shouldUpdate(changed);
-            if (toBreak)
-                return;
-            //update decorators
-            let ary = DefinitionDecoratorMap.get(this.constructor.name) ?? DefinitionDecoratorMap.get(_getSuper(this.constructor).name);
-            ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
-                dw.updated(this, changed);
-            });
-            //1. filter update point
-            let toUpdateCss = false;
-            let toUpdateView = false;
-            let toUpdateUps = new Set();
-            myfx.each(changed, (x, k) => {
-                if (this.__updateCssDeps?.includes(k)) {
-                    toUpdateCss = true;
-                }
-                if (!toUpdateView && this.__updateViewDeps?.includes(k)) {
-                    toUpdateView = true;
-                }
-                if (this.__updateSubViewDeps?.has(k)) {
-                    let ups = this.__updateSubViewDeps.get(k);
-                    if (ups)
-                        toUpdateUps = toUpdateUps.union(ups);
-                }
-            });
-            //update watch
-            this._watchUpdateSetInNextTick?.forEach((fn) => {
-                let { newValue, oldValue, chain, rootObjNew, rootObjOld, fullMatch } = this._watchUpdateArgsInNextTick.get(fn);
-                let nv = fullMatch ? newValue : rootObjNew;
-                let ov = fullMatch ? oldValue : rootObjOld;
-                fn.call(this, nv, ov, chain, newValue, oldValue);
-            });
-            this._watchUpdateSetInNextTick?.clear();
-            this._watchUpdateArgsInNextTick?.clear();
-            // update computed
-            this._computedUpdateSetInNextTick?.forEach(fn => {
-                let k = myfx.get(fn, 'key');
-                let oldValue = this.#data[k];
-                let newValue = fn.call(this);
-                if (!myfx.isObject(newValue) && newValue === oldValue)
-                    return;
-                this.#data[k] = newValue;
-                this._notify(oldValue, [k]);
-            });
-            this._computedUpdateSetInNextTick?.clear();
-            //2. update view
-            if (this.#renderRoot?.deref()) {
-                if (toUpdateView) {
-                    console.debug('update view....', this.constructor.name);
-                    updateView(this.render(), this, this.__updateTree);
-                }
-                if (myfx.size(toUpdateUps) > 0) {
-                    toUpdateUps.forEach(up => {
-                        updateSubScopeView(up, this, undefined);
-                    });
-                }
-            }
-            //update slot view
-            this.#updateSlots.forEach((v) => {
-                this.#updateSlot(v);
-            });
-            //update dcss
-            if (toUpdateCss) {
-                this.#updateCss();
-            }
-            this.updated(changed);
-        }
-        /**
-         * 1. 初始props中并未包含的属性，可从attributes取，且定义类型不是string时自动转换
-         * 2. 如果attributes中也未出现且必填报错
-         * 3. 否则设置默认值
-         * @returns 非props的attr集合
-         */
-        #initProps() {
-            let propDefs = DefinitionPropMap.get(this.constructor.name) ?? DefinitionPropMap.get(_getSuper(this.constructor).name);
-            let attrs = this.attributes;
-            let tagName = this.tagName;
-            let parentProps = this.#props;
-            let filterAttrs = {};
-            myfx.each(attrs, ({ name, value }) => {
-                if (name[0] === ATTR_PREFIX_EVENT ||
-                    name[0] === ATTR_PREFIX_PROP ||
-                    name[0] === ATTR_PREFIX_BOOLEAN ||
-                    name === ATTR_REF || name === 'slot')
-                    return;
-                let camelName = myfx.camelCase(name);
-                if (propDefs && !propDefs[camelName]) {
-                    filterAttrs[name] = value;
-                }
-            });
-            this.#attrs = this.#attrs ? myfx.assign(this.#attrs, filterAttrs) : filterAttrs;
-            let rs = {};
-            if (!propDefs)
-                return Object.seal(rs);
-            let keys = Object.keys(propDefs);
-            let size = keys.length;
-            for (let i = 0; i < size; i++) {
-                const key = keys[i];
-                const kbKey = myfx.kebabCase(key);
-                const hasAttr = this.hasAttribute(kbKey);
-                let propDef = propDefs[key];
-                let isInited = myfx.has(parentProps, key);
-                let defaultVal = myfx.get(this, key);
-                if (!('_defaultValue' in propDef)) {
-                    //在构造结束后
-                    propDef._defaultValue = defaultVal;
-                    if (!propDef.type) {
-                        if (myfx.isUndefined(defaultVal)) {
-                            showTagError(tagName, "Prop '" + key + "' has neither propType nor defaultValue be used for type inference");
-                        }
-                        let type = typeof defaultVal;
-                        if (myfx.isArray(defaultVal))
-                            type = 'array';
-                        let inferredType = PropTypeMap[type];
-                        propDef.type = inferredType;
-                    }
-                }
-                if (propDef.hasChanged) {
-                    if (!this._hasChangedPropOrStateMap) {
-                        this._hasChangedPropOrStateMap = new Map();
-                    }
-                    this._hasChangedPropOrStateMap.set(key, propDef.hasChanged);
-                }
-                if (propDef.sync) {
-                    if (!this._hasSyncPropSet) {
-                        this._hasSyncPropSet = new Set();
-                    }
-                    this._hasSyncPropSet.add(key);
-                }
-                let val = undefined;
-                if (isInited) {
-                    val = myfx.isNil(parentProps[key]) ? defaultVal : parentProps[key];
-                }
-                else {
-                    val = defaultVal;
-                    let attr = attrs.getNamedItem(kbKey) ||
-                        attrs.getNamedItem(ATTR_PREFIX_PROP + kbKey);
-                    if (attr) {
-                        isInited = true;
-                        val = attr.value;
-                    }
-                }
-                //required check
-                let isRequired = propDef.required;
-                if (isRequired && !isInited) {
-                    showTagError(tagName, "Prop '" + key + "' is required");
-                    break;
-                }
-                val = this.#propTypeCheck(propDefs, key, val, hasAttr);
-                let getter = myfx.get(propDefs, [key, 'getter']);
-                if (getter)
-                    getter = myfx.bind(getter, this);
-                let setter = myfx.get(propDefs, [key, 'setter']);
-                if (setter)
-                    setter = myfx.bind(setter, this);
-                if (getter || setter) {
-                    Reflect.defineProperty(this.#data, key, {
-                        set: setter || function (v) { },
-                        get: getter
-                    });
-                }
-                if (propDef.attribute && myfx.isDefined(val) && !myfx.isObject(val)) {
-                    this.#updateAttribute(propDef, key, val);
-                }
-                this.#data[key] = val;
-                rs[key] = val;
-            }
-            return Object.seal(rs);
-        }
-        #updateAttribute(propDef, key, val) {
-            let k = myfx.kebabCase(key);
-            let v = myfx.trim(val);
-            if (isBooleanProp(propDef.type)) {
-                v = getBooleanValue(val);
-                if (myfx.isBoolean(v)) {
-                    if (v && !this.hasAttribute(k)) {
-                        this.toggleAttribute(k, true);
-                    }
-                    else if (!v && this.hasAttribute(k)) {
-                        this.toggleAttribute(k, false);
-                    }
-                }
-                else if (this.getAttribute(k) !== v) {
-                    this.setAttribute(k, v);
-                }
-            }
-            else if (this.getAttribute(k) !== v) {
-                this.setAttribute(k, v);
-            }
-        }
-        #convertValue(v, types) {
-            let val = v;
-            try {
-                for (let i = 0; i < types.length; i++) {
-                    const t = types[i];
-                    if (t === Boolean) {
-                        val = getBooleanValue(v);
-                    }
-                    else if (t === Number) {
-                        val = Number(v);
-                    }
-                    else if (t === String) {
-                        val = String(v);
-                    }
-                    else if (t === Object || t === Array) {
-                        val = myfx.parseJSON(v);
-                    }
-                    else if (t === Date) {
-                        val = new Date(v);
-                    }
-                    else {
-                        val = new t(v);
-                    }
-                }
-            }
-            catch (error) {
-                showTagError(this.tagName, `Convert attribute error with ` + v);
-            }
-            return val;
-        }
-        //属性值检测
-        #propTypeCheck(propDefs, propKey, newValue, hasAttr) {
-            let propDef = propDefs[propKey];
-            if (!propDef)
-                return newValue;
-            let validator = propDef.isValid;
-            let expectType = propDef.type;
-            let expectTypeAry = myfx.isArray(expectType) ? expectType : [expectType];
-            let typeConverter = propDef.converter;
-            let val = newValue;
-            if (!myfx.some(expectTypeAry, (et) => et === String) && myfx.isString(val) && !myfx.isNull(val)) {
-                try {
-                    val = typeConverter ? typeConverter(val) : this.#convertValue(val, expectTypeAry);
-                }
-                catch (error) {
-                    showTagError(this.tagName, `Convert attribute '${propKey}' error with ` + val);
-                }
-            } //endif
-            //extra work
-            for (let i = 0; i < expectTypeAry.length; i++) {
-                const et = expectTypeAry[i];
-                if (et.name === 'Boolean' && hasAttr) {
-                    val = getBooleanValue(val);
-                }
-            }
-            if (myfx.isNil(val)) {
-                return val;
-            }
-            let realType = typeof val;
-            let matched = myfx.isDefined(val) ? false : true;
-            for (let i = 0; i < expectTypeAry.length; i++) {
-                const et = expectTypeAry[i];
-                if (
-                //base form
-                myfx.test(realType, et.name, "i") ||
-                    //object form
-                    val instanceof et || (Object.prototype.toString.call(val) === Object.prototype.toString.call(et.prototype))) {
-                    matched = true;
-                    break;
-                }
-            }
-            if (!matched) {
-                showTagError(this.tagName, `Invalid prop '${propKey}'. expected '${expectTypeAry.map((t) => t.name || t)}' but got '${realType}'`);
-            }
-            if (validator) {
-                if (!validator.call(this, val, this.#data)) {
-                    showTagError(this.tagName, `Invalid prop '${propKey}'. IsValid() check failed`);
-                }
-            }
-            return val;
-        }
-        #initStates() {
-            let stateDefs = DefinitionStateMap.get(this.constructor.name) ?? DefinitionStateMap.get(_getSuper(this.constructor).name);
-            if (stateDefs)
-                myfx.each(stateDefs, (def, key) => {
-                    let stateDef = stateDefs[key];
-                    let val = myfx.get(this, key);
-                    if (stateDef) {
-                        let propName = stateDef.prop;
-                        val = propName ? myfx.cloneDeep(this.#data[propName]) : myfx.get(this, key);
-                    }
-                    if (stateDef.hasChanged) {
-                        if (!this._hasChangedPropOrStateMap) {
-                            this._hasChangedPropOrStateMap = new Map();
-                        }
-                        this._hasChangedPropOrStateMap.set(key, stateDef.hasChanged);
-                    }
-                    if (stateDef.shallow) {
-                        if (!this._hasShallowStateSet) {
-                            this._hasShallowStateSet = new Set();
-                        }
-                        this._hasShallowStateSet.add(key);
-                    }
-                    this.#data[key] = val;
-                });
-        }
-        /**
-         * 由外部调用，在初始化及更新时。
-         * @param props
-         * @param attrs
-         */
-        #propsReady = myfx.debounce(this.propsReady, 100);
-        //todo 这里需要直接修改prop
-        _updateProps(props) {
-            let propDefs = DefinitionPropMap.get(this.constructor.name);
-            if (!propDefs)
-                return;
-            let need2UpdateAttrs = [];
-            //存在attrs表示已初始化完成
-            myfx.each(props, (v, k) => {
-                let ck = myfx.camelCase(k);
-                let propDef = propDefs[ck];
-                if (!propDef)
-                    return;
-                v = this.#propTypeCheck(propDefs, ck, v);
-                if (propDef.attribute && myfx.isDefined(v) && !myfx.isObject(v)) {
-                    need2UpdateAttrs.push([propDef, ck, v]);
-                }
-                myfx.set(this, ck, v);
-            });
-            myfx.assign(this.#props, props);
-            need2UpdateAttrs.forEach(([propDef, key, v]) => {
-                this.#updateAttribute(propDef, key, v);
-            });
-            if (this.#props)
-                this.#propsReady(this.#props);
-        }
-        _wrapperProp = {};
-        _initProps(props, attrs) {
-            this.#props = myfx.merge(this.#props || {}, props);
-            this.#attrs = myfx.merge(this.#attrs || {}, attrs);
-            myfx.each(props, (v, k) => {
-                if (myfx.isObject(v)) {
-                    let fromPath = OBJECT_VAR_PATH.get(v);
-                    if (fromPath) {
-                        let propPath = fromPath.join(PATH_SEPARATOR);
-                        this._wrapperProp[propPath] = k;
-                        let parentStateDefs = this.wrapperComponent ? DefinitionStateMap.get(this.wrapperComponent?.constructor.name) : null;
-                        let parentStateKey = fromPath[0];
-                        if (parentStateDefs && parentStateDefs[parentStateKey]) {
-                            let propDefs = DefinitionPropMap.get(this.constructor.name);
-                            myfx.set(propDefs, [k, 'shallow'], parentStateDefs[parentStateKey].shallow);
-                        }
-                    }
-                }
-            });
-        }
-        /**
-         * 绑定slot标签，render时调用
-         */
-        _bindSlot(slot, name, props) {
-            //1. 设置map
-            if (!this.#slotsEl[name]) {
-                this.#slotsEl[name] = slot;
-                SlotCompMap.set(slot, this);
-            }
-            this.addEvent(slot, 'slotchange', this.__onSlotChangeHook);
-            //3. 保存参数
-            if (!myfx.isEmpty(props)) {
-                let slotMap = this.#slotPropsMap[name];
-                if (!slotMap) {
-                    slotMap = this.#slotPropsMap[name] = {};
-                }
-                slotMap.props = props;
-            }
-        }
-        _bindSlotHook(name, hook) {
-            this.#slotHooks[name] = hook;
-        }
-        //slot变量变动时触发
-        #updateSlots = new Set();
-        _updateSlot(name, propName, value) {
-            let slotEl = this.#slotsEl[name];
-            let hook = this.#slotHooks[name];
-            if (!hook && !slotEl)
-                return;
-            let slotMap = this.#slotPropsMap[name];
-            if (propName) {
-                if (!slotMap.props) {
-                    slotMap.props = {};
-                }
-                slotMap.props[propName] = value;
-            }
-            if (!!hook) {
-                this.#updateSlots.add(name);
-            }
-            else {
-                //update nodes
-                let els = slotEl.assignedElements({ flatten: true });
-                for (let i = 0; i < els.length; i++) {
-                    const el = els[i];
-                    el.setAttribute(propName, value + '');
-                }
-            }
-        }
-        #updateSlotsAry() {
-            if (!this.#renderRoot)
-                return;
-            let slotKeys = myfx.keys(this.#slotsEl);
-            if (myfx.isEmpty(slotKeys))
-                return;
-            const cs = myfx.flatMap(this.childNodes, node => {
-                if (node.nodeType === Node.COMMENT_NODE)
-                    return [];
-                if (node instanceof HTMLSlotElement)
-                    return node.assignedNodes({ flatten: true });
-                return node;
-            });
-            let groups = myfx.groupBy(cs, node => {
-                if (node.nodeType === Node.TEXT_NODE && slotKeys.includes(SLOT_NAME_DEFAULT))
-                    return SLOT_NAME_DEFAULT;
-                if (node instanceof Element) {
-                    let sName = node.getAttribute('slot') || SLOT_NAME_DEFAULT;
-                    if (slotKeys.includes(sName))
-                        return sName;
-                }
-            });
-            if (myfx.isEmpty(groups)) {
-                this.slots = {};
-                return;
-            }
-            myfx.each(groups, (nodeAry, k) => {
-                if (!k)
-                    return;
-                while (nodeAry.length > 0) {
-                    let node = nodeAry[0];
-                    if ((node.nodeType === Node.TEXT_NODE && myfx.isBlank(node.textContent)) ||
-                        (node instanceof HTMLSlotElement && myfx.isEmpty(node.assignedNodes({ flatten: true })))) {
-                        nodeAry.shift();
-                        continue;
-                    }
-                    break;
-                }
-                while (nodeAry.length > 0) {
-                    let node = myfx.last(nodeAry);
-                    if ((node.nodeType === Node.TEXT_NODE && myfx.isBlank(node.textContent)) ||
-                        (node instanceof HTMLSlotElement && myfx.isEmpty(node.assignedNodes({ flatten: true })))) {
-                        nodeAry.pop();
-                        continue;
-                    }
-                    break;
-                }
-            });
-            let rs = {};
-            myfx.each(groups, (v, k) => {
-                if (!myfx.isEmpty(v)) {
-                    rs[k] = v;
-                }
-            });
-            this.slots = rs;
-        }
-        #updateSlot(name) {
-            let hook = this.#slotHooks[name];
-            if (!hook)
-                return;
-            let slotMap = this.#slotPropsMap[name];
-            if (!this.#data.slots)
-                return;
-            let slot = this.#data.slots[name];
-            //slot not ready yet
-            //1. 可能是if/each等指令还未插入
-            if (!slot)
-                return;
-            //组件通知渲染异步指令
-            this.renderAsync(hook, myfx.get(slotMap, 'props'));
-            const rc = this._asyncDirectives.get(hook);
-            //todo 如果要做成通用异步指令，元素必须插入到指令挂载的位置，并且slot的插入节点还要去掉注释
-            let nodes = rc?.buildView(hook(myfx.get(slotMap, 'props')));
-            let nnodes = myfx.reject(myfx.toArray(nodes), n => n.nodeType === Node.COMMENT_NODE);
-            if (nnodes) {
-                let slottedNodes = this.#slotNodes[name];
-                if (!myfx.isEmpty(slottedNodes)) {
-                    for (let i = 0; i < slottedNodes.length; i++) {
-                        const n = slottedNodes[i];
-                        n.parentNode?.removeChild(n);
-                    }
-                }
-                this.#slotNodes[name] = nnodes;
-                this.append(...nnodes);
-                this.#updateSlots.clear();
-            }
-        }
-        _asyncDirectives = new WeakMap();
-        renderAsync(cbk, ...args) {
-        }
-        #updateCss() {
-            let cssTmpls = this.styles;
-            cssTmpls.forEach((cssTmpl, i) => {
-                let cssss = this.__cssSheets[i];
-                let css = cssTmpl.getCss(this);
-                cssss.replaceSync(css);
-            });
-        }
-        __attrChanged(name, oldValue, newValue) {
-            if (!this.#inited)
-                return;
-            let observedAttrs = _getObservedAttrs(this.constructor);
-            if (observedAttrs.has(name)) {
-                let camelName = myfx.camelCase(name);
-                if (myfx.isNull(newValue)) {
-                    let propDefs = DefinitionPropMap.get(this.constructor.name);
-                    //使用默认值
-                    if (propDefs)
-                        newValue = propDefs[camelName]._defaultValue;
-                }
-                this._updateProps({ [camelName]: newValue });
-            }
-        }
-        _regWrapper(wrapperComponent) {
-            this.#wrapperComponent = new WeakRef(wrapperComponent);
-        }
-        _regSubViewDeps(props, up) {
-            if (!this.__updateSubViewDeps) {
-                this.__updateSubViewDeps = new Map();
-            }
-            props.forEach(prop => {
-                let depSet = this.__updateSubViewDeps.get(prop);
-                if (!depSet) {
-                    depSet = new Set();
-                    this.__updateSubViewDeps.set(prop, depSet);
-                }
-                depSet.add(up);
-            });
-        }
-        _getPrivateData() {
-            return this.#data;
-        }
-        ////////////////////----------------------------/////////////// APIs
-        /**
-         * 抛出自定义事件
-         * @param evName 事件名称
-         * @param args 自定义参数
-         */
-        emit(evName, arg = {}, options) {
-            if (options && options.event) {
-                arg.event = options.event;
-            }
-            arg.target = this;
-            this.dispatchEvent(new CustomEvent(evName, {
-                bubbles: myfx.get(options, "bubbles", false),
-                composed: myfx.get(options, "composed", false),
-                cancelable: true,
-                detail: arg,
-            }));
-        }
-        /**
-         * 在root上绑定事件
-         * @param evName
-         * @param hook
-         * @returns 函数钩子，用于卸载
-         */
-        on(evName, hook) {
-            if (!this.#rootEvs[evName]) {
-                this.#rootEvs[evName] = [];
-            }
-            let cbk = hook.bind(this);
-            this.#rootEvs[evName].push(cbk);
-            this.addEventListener(evName, cbk);
-            return cbk;
-        }
-        /**
-         * 从root上移除事件
-         * @param evName
-         * @param hook on函数返回的钩子，可选。为空时移除所有evName事件
-         */
-        off(evName, hook) {
-            if (hook) {
-                this.removeEventListener(evName, hook);
-                myfx.remove(this.#rootEvs[evName], cbk => cbk === hook);
-            }
-            else {
-                myfx.each(this.#rootEvs[evName], cbk => {
-                    this.removeEventListener(evName, cbk);
-                });
-                this.#rootEvs[evName] = [];
-            }
-        }
-        addEvent(node, evName, hook) {
-            if (!this.#nodeEvs[evName]) {
-                this.#nodeEvs[evName] = [];
-            }
-            let cbk = hook.bind(this);
-            this.#nodeEvs[evName].push([cbk, new WeakRef(node)]);
-            node.addEventListener(evName, cbk);
-            return cbk;
-        }
-        removeEvent(node, evName, hook) {
-            if (hook) {
-                node.removeEventListener(evName, hook);
-                myfx.remove(this.#nodeEvs[evName], ([cbk]) => cbk === hook);
-            }
-            else {
-                myfx.each(this.#nodeEvs[evName], ([cbk]) => {
-                    node.removeEventListener(evName, cbk);
-                });
-                this.#nodeEvs[evName] = [];
-            }
-        }
-        /**
-         * 下一帧执行
-         * @param cbk
-         */
-        nextTick(cbk) {
-            if (!this.isMounted) {
-                if (!this.#updateNextImmediatelyQ) {
-                    this.#updateNextImmediatelyQ = [];
-                }
-                console.debug('target update...', this.tagName);
-                this.#updateNextImmediatelyQ.push(cbk);
-                return;
-            }
-            Queue.pushNext(cbk);
-        }
-        /**
-         * 强制更新一次视图
-         */
-        forceUpdate() {
-            myfx.each(this.#data, (v, k) => {
-                this.#updateSources[k] = {
-                    value: undefined,
-                    chain: undefined,
-                };
-            });
-            this.#update();
-        }
-    }
-
-    /**
-     * 视图模板
-     * @author holyhigh2
-     */
-    class Template {
-        strings;
-        vars;
-        constructor(strings, vars) {
-            this.strings = myfx.concat(strings);
-            this.vars = vars;
-        }
-        //解析模板中的key
-        getKey() {
-            let vars = this.vars;
-            let k = '';
-            myfx.each(this.strings, (str, i) => {
-                if (EXP_KEY.test(str)) {
-                    k = myfx.toString(vars[i]);
-                    return false;
-                }
-            });
-            return k;
-        }
-        getKeys() {
-            let vars = this.vars;
-            let ks = [];
-            for (let i = 0; i < this.strings.length; i++) {
-                const str = this.strings[i];
-                if (EXP_KEY.test(str)) {
-                    let k = myfx.toString(vars[i]);
-                    ks.push(k);
-                }
-            }
-            if (myfx.isEmpty(ks)) {
-                vars.forEach(v => {
-                    if (v instanceof Template) {
-                        let k = v.getKey();
-                        ks.push(k);
-                    }
-                });
-            }
-            return ks;
-        }
-        /**
-       * 追加tmpl
-       * 交接处模板进行合并
-       * @param tmpl
-       */
-        append(tmpl) {
-            let lastStr = myfx.last(this.strings);
-            tmpl.strings.forEach((str, i) => {
-                if (i == 0) {
-                    this.strings[this.strings.length - 1] = lastStr + str;
-                    return;
-                }
-                this.strings.push(str);
-            });
-            this.vars = myfx.concat(this.vars, tmpl.vars);
-            return this;
-        }
-        /**
-         * 指定位置插入模板
-         * @param position 字符模板位置
-         * @param tmpl
-         * @returns
-         */
-        insert(position, tmpl) {
-            let firstStr = tmpl.strings.shift();
-            this.strings[position] += firstStr;
-            this.strings.splice(position + 1, 0, ...tmpl.strings);
-            this.vars.splice(position, 0, ...tmpl.vars);
-            return this;
-        }
-        getHTML(comp) {
-            let [html, vars] = buildHTML(comp, this);
-            let nodes = buildTmplate([], html, vars, comp);
-            return myfx.reduce(nodes, (a, v) => a + (v.outerHTML ?? ''), '');
-        }
-        /**
-         * 对var中的Template类型进行合并
-         */
-        flatVars(comp) {
-            let vars = myfx.concat(this.vars);
-            let l = this.strings.length - 1;
-            let varIndex = 0;
-            for (let i = 0; i <= l; i++) {
-                let val = myfx.get(vars, varIndex, '');
-                if (val instanceof Template && val.vars.length > 0) {
-                    let [h, v] = buildHTML(comp, val);
-                    val = h;
-                    vars.splice(varIndex, 1, ...v);
-                    varIndex += v.length - 1;
-                }
-                varIndex++;
-            }
-            return vars;
-        }
-        destroy() {
-            this.strings = this.vars = null;
-        }
-    }
-
-    /**
-     * @author holyhigh2
-     */
-    /**
-     * 属性定义
-     */
-    exports.EnterPointType = void 0;
-    (function (EnterPointType) {
-        EnterPointType["ATTR"] = "attr";
-        EnterPointType["PROP"] = "prop";
-        EnterPointType["TEXT"] = "text";
-        EnterPointType["CLASS"] = "class";
-        EnterPointType["STYLE"] = "style";
-        EnterPointType["SLOT"] = "slot";
-        EnterPointType["TAG"] = "tag"; //在标签内但不是属性内
-    })(exports.EnterPointType || (exports.EnterPointType = {}));
-    exports.DirectiveUpdateTag = void 0;
-    (function (DirectiveUpdateTag) {
-        DirectiveUpdateTag["NONE"] = "NONE";
-        DirectiveUpdateTag["REMOVE"] = "REMOVE";
-        DirectiveUpdateTag["REPLACE"] = "REPLACE";
-        DirectiveUpdateTag["UPDATE"] = "UPDATE";
-        DirectiveUpdateTag["APPEND"] = "APPEND";
-    })(exports.DirectiveUpdateTag || (exports.DirectiveUpdateTag = {}));
-    /**
-     * 视图更新点
-     */
-    class UpdatePoint {
-        //在子视图中的平级key
-        key;
-        //表达式对应的vars位置
-        varIndex;
-        value;
-        //表达式所在节点，可能是元素/文本
-        node;
-        //如果在属性中，属性名
-        attrName;
-        //属性值模板
-        attrTmpl;
-        isText = false;
-        //是否模板
-        // isTmpl: boolean = false;
-        isDirective = false;
-        //是否组件
-        isComponent = false;
-        //是否组件属性
-        isProp = false;
-        //是否布尔属性
-        isToggleProp = false;
-        //是否被更新，对于 key，event，ref等属性不需要更新，仅用于占位
-        isPlaceholder;
-        __destroyed = false;
-        directiveOldValue;
-        children;
-        parent;
-        constructor(varIndex, node, attrName, attrTmpl) {
-            this.varIndex = varIndex;
-            if (node)
-                this.node = node;
-            if (attrName)
-                this.attrName = attrName;
-            if (attrTmpl) {
-                this.attrTmpl = attrTmpl;
-            }
-        }
-        static createFrom(up) {
-            let newUp = new UpdatePoint(up.varIndex, up.node, up.attrName, up.attrTmpl);
-            newUp.key = up.key;
-            newUp.value = up.value;
-            newUp.isText = up.isText;
-            newUp.isDirective = up.isDirective;
-            newUp.isComponent = up.isComponent;
-            newUp.isProp = up.isProp;
-            newUp.isToggleProp = up.isToggleProp;
-            newUp.isPlaceholder = up.isPlaceholder;
-            return newUp;
-        }
-        destroy(contextComponent) {
-            if (this.__destroyed)
-                return;
-            this.__destroyed = true;
-            let node = this.node;
-            let children = this.children;
-            let parent = this.parent;
-            //clean up
-            this.node = this.value = this.directiveOldValue = this.children = this.parent = null;
-            if (!node)
-                return;
-            //sup scope
-            parent?.children || contextComponent?.__updateTree;
-            // contextComponent?._unregDeps(node.deref()!)
-            //sub scopes
-            let updatePoints = children;
-            updatePoints?.forEach((up, i) => {
-                up.destroy(contextComponent);
-            });
-            if (node instanceof CompElem) {
-                node.destroy();
-            }
-            if (contextComponent) {
-                DomUtil.clear(node.deref(), contextComponent);
-            }
-            node.deref()?.remove();
-        }
-        insert(up) {
-            up.parent = this;
-            if (!this.children) {
-                this.children = [];
-            }
-            this.children.push(up);
-        }
-    }
-
-    const DI_COMMENT_START_NODE_MAP = new WeakMap();
-    const TextOrSlotDirectiveExecutorMap = new Map();
-    var MovePosition;
-    (function (MovePosition) {
-        MovePosition["AFTER_BEGIN"] = "afterbegin";
-    })(MovePosition || (MovePosition = {}));
-    let newNodeMap = {};
-    function addNodes(adds, newTmpls, component, pointNode, newNodeMap, up) {
-        const combStrings = [];
-        const combVars = [];
-        const ks = [];
-        let addGroup = [];
-        let lastKey;
-        adds.forEach(add => {
-            let lastAdd = myfx.last(addGroup);
-            if (lastAdd) {
-                if (lastKey === add.prevNode) {
-                    if (!lastAdd.group) {
-                        lastAdd.group = [lastKey];
-                    }
-                    lastAdd.group.push(add.newkey);
-                }
-                else {
-                    addGroup.push(add);
-                }
-            }
-            else {
-                addGroup.push(add);
-            }
-            lastKey = add.newkey;
-            let k = add.newkey;
-            ks.push(k);
-            combStrings.push('');
-            combVars.push(newTmpls[k]);
-        });
-        combStrings.push('');
-        let tmpl = new Template(combStrings, combVars);
-        let nodes = buildSubView(pointNode, tmpl, component, up, true);
-        let kMap = new Map();
-        nodes.forEach((n) => {
-            const k = n.getAttribute('key');
-            if (ks.includes(k)) {
-                kMap.set(k, true);
-                newNodeMap[k] = n;
-            }
-        });
-        return addGroup;
-    }
-    function updateDirective(pointNode, newArgs, oldArgs, executor, renderComponent, slotComponent, varChain, up) {
-        let rs;
-        let isTextOrSlot = [exports.EnterPointType.TEXT, exports.EnterPointType.SLOT].includes(myfx.get(executor, '__scope', ''));
-        if (isTextOrSlot) {
-            Collector.start();
-            rs = executor(pointNode, newArgs, oldArgs, { renderComponent, slotComponent, varChain });
-            Collector.end(renderComponent, up);
-        }
-        else {
-            rs = executor(pointNode, newArgs, oldArgs, { renderComponent, slotComponent, varChain });
-        }
-        if (!rs)
-            return;
-        let [tag, tmpl] = rs;
-        if (tag === exports.DirectiveUpdateTag.NONE)
-            return;
-        let startNode = DI_COMMENT_START_NODE_MAP.get(pointNode);
-        let nodes = DomUtil.getNodes(startNode, pointNode);
-        let updatePoints = up.children;
-        if (tag === exports.DirectiveUpdateTag.REMOVE) {
-            for (let i = 0; i < nodes.length; i++) {
-                const n = nodes[i];
-                n.remove();
-                if (n instanceof CompElem) {
-                    n.destroy();
-                }
-            }
-            updatePoints?.forEach((up, i) => {
-                up.destroy(renderComponent);
-            });
-        }
-        else if (tag === exports.DirectiveUpdateTag.REPLACE) {
-            let newNodes = [];
-            for (let i = 0; i < nodes.length; i++) {
-                const n = nodes[i];
-                n.parentNode?.removeChild(n);
-                if (n instanceof CompElem) {
-                    n.destroy();
-                }
-            }
-            updatePoints?.forEach((up, i) => {
-                up.destroy(renderComponent);
-            });
-            let nnodes = buildSubView(pointNode, tmpl, renderComponent, up, true);
-            newNodes = myfx.toArray(nnodes);
-            let fragment = document.createDocumentFragment();
-            fragment.append(...newNodes);
-            pointNode.parentNode.insertBefore(fragment, pointNode);
-        }
-        else if (tag === exports.DirectiveUpdateTag.UPDATE) {
-            let newKeys = {};
-            let nodesToUpdate;
-            //原节点顺序
-            let oldSeq = [];
-            let newSeq = [];
-            if (!tmpl) {
-                tmpl = new Template([], []);
-            }
-            if (myfx.isEmpty(nodes)) {
-                let nodes = buildSubView(pointNode, tmpl, renderComponent, up, true);
-                startNode.after(...nodes);
-                return;
-            }
-            let newTmpls = {};
-            if (tmpl instanceof Template) {
-                tmpl.vars.forEach(v => {
-                    if (v instanceof Template) {
-                        const k = v.getKey();
-                        newTmpls[k] = v;
-                        newKeys[k] = true;
-                        newSeq.push(k);
-                    }
-                });
-            }
-            //UPDATE仅处理元素节点
-            nodes = myfx.filter(myfx.compact(nodes), n => n.nodeType === Node.ELEMENT_NODE);
-            nodesToUpdate = myfx.filter(myfx.compact(myfx.toArray(nodesToUpdate)), n => n.nodeType === Node.ELEMENT_NODE);
-            let oldNodeMap = {};
-            let dupKey = '';
-            let keyQ = {};
-            for (let i = 0; i < nodes.length; i++) {
-                const node = nodes[i];
-                let treeNode = node;
-                let k = treeNode.getAttribute("key");
-                if (myfx.isNil(k))
-                    continue;
-                if (oldNodeMap[k]) {
-                    dupKey = k;
-                    break;
-                }
-                oldNodeMap[k] = treeNode;
-                oldSeq.push(k);
-                keyQ[k] = true;
-            }
-            if (dupKey) {
-                showError(`${myfx.camelCase(pointNode.nodeValue)} - duplicate key '${dupKey}'`);
-                return;
-            }
-            let updateQ = newKeys;
-            //compare
-            let adds = [];
-            let dels = [];
-            //计算del
-            myfx.each(keyQ, (v, k) => {
-                if (!updateQ[k]) {
-                    dels.push(k);
-                    delete keyQ[k];
-                    myfx.remove(oldSeq, x => x === k);
-                }
-            });
-            //move
-            let moved = false;
-            if (!myfx.isEmpty(newSeq)) {
-                let lastMoveIndex = -1;
-                let lastGroup = [];
-                let moveQueue = [];
-                let edgeOffset = 0;
-                let i = 0;
-                for (; i < newSeq.length; i++) {
-                    const nodeId = newSeq[i];
-                    let oldI = oldSeq.findIndex(c => c === nodeId);
-                    if (oldI < 0) {
-                        let prevKey = newSeq[i - 1];
-                        let prev = prevKey ? oldNodeMap[prevKey] || prevKey : startNode;
-                        //add
-                        adds.push({ prevNode: prev, newkey: nodeId });
-                        edgeOffset++;
-                        continue;
-                    }
-                    if (oldI > -1 && oldI !== (i - edgeOffset)) {
-                        if (lastMoveIndex < 0 || Math.abs(lastMoveIndex - oldI) === 1) {
-                            let lastEl = myfx.last(lastGroup);
-                            lastGroup.push({ nodeId, targetId: i === 0 ? MovePosition.AFTER_BEGIN : (lastEl ? lastEl.nodeId : newSeq[i - 1]) });
-                        }
-                        else {
-                            moveQueue.push({ moveGroup: lastGroup, moveIndex: i + lastGroup.length });
-                            lastGroup = [];
-                            lastGroup.push({ nodeId, targetId: newSeq[i - 1] });
-                        }
-                        lastMoveIndex = oldI;
-                    }
-                }
-                if (lastGroup.length > 0) {
-                    moveQueue.push({ moveGroup: lastGroup, moveIndex: i + lastGroup.length });
-                }
-                if (moveQueue.length > 0) {
-                    moved = true;
-                    let vals = moveQueue.sort((a, b) => a.moveGroup.length - b.moveGroup.length);
-                    if (vals.length < 2) {
-                        let { moveGroup } = vals[0];
-                        if (moveGroup.length > 1) {
-                            let lastTId = myfx.last(moveGroup).targetId;
-                            if (moveGroup[moveGroup.length - 2].nodeId === lastTId) {
-                                moveGroup = myfx.initial(moveGroup);
-                            }
-                        }
-                        moveGroup.forEach(({ targetId, nodeId }) => {
-                            let srcEl = oldNodeMap[nodeId];
-                            let target;
-                            if (targetId === MovePosition.AFTER_BEGIN) {
-                                target = startNode;
-                                target.after(srcEl);
-                            }
-                            else if (oldNodeMap[targetId]) {
-                                target = oldNodeMap[targetId];
-                                target.after(srcEl);
-                            }
-                        });
-                    }
-                    else {
-                        let lastGroupIndex = myfx.last(vals).moveIndex;
-                        if (Math.abs(vals[vals.length - 2].moveIndex - lastGroupIndex) === 1) {
-                            vals = myfx.initial(vals);
-                        }
-                        vals.forEach(({ moveGroup }) => {
-                            moveGroup.forEach(({ targetId, nodeId }) => {
-                                let srcEl = oldNodeMap[nodeId];
-                                let target;
-                                if (targetId === MovePosition.AFTER_BEGIN) {
-                                    target = startNode;
-                                    target.after(srcEl);
-                                }
-                                else {
-                                    target = oldNodeMap[targetId];
-                                    target.after(srcEl);
-                                }
-                            });
-                        });
-                    }
-                } //endif
-            }
-            //del
-            dels.forEach(k => {
-                let treeNode = oldNodeMap[k];
-                if (treeNode && treeNode.parentNode) {
-                    oldNodeMap[k] = null;
-                    treeNode.remove();
-                    let ups = myfx.remove(updatePoints, up => up.key == k);
-                    ups.forEach(up => up.destroy(renderComponent));
-                }
-            });
-            //add
-            let addGroup;
-            if (adds.length > 0) {
-                addGroup = addNodes(adds, newTmpls, renderComponent, pointNode, newNodeMap, up);
-                addGroup.forEach((v, i) => {
-                    let k = v.newkey;
-                    let treeNode = newNodeMap[k];
-                    let prevNode = v.prevNode;
-                    if (v.group) {
-                        let fragment = document.createDocumentFragment();
-                        fragment.append(...myfx.map(v.group, (nk) => newNodeMap[nk]));
-                        treeNode = fragment;
-                    }
-                    if (prevNode === pointNode) {
-                        prevNode.before(treeNode);
-                    }
-                    else if (prevNode === startNode) {
-                        prevNode.after(treeNode);
-                    }
-                    else if (typeof prevNode === 'string') {
-                        newNodeMap[prevNode].after(treeNode);
-                    }
-                    else {
-                        prevNode.after(treeNode);
-                    }
-                });
-                //release
-                newNodeMap = null;
-                newNodeMap = {};
-            }
-            //合并
-            if (tmpl.vars[0] instanceof Template) {
-                let tStrAry = [];
-                let tVarAry = [];
-                myfx.each(tmpl.vars, v => {
-                    tVarAry.push(...v.vars);
-                    tStrAry.push(...myfx.map(v.vars, v => '1'));
-                });
-                tStrAry.push('1');
-                tmpl = new Template(tStrAry, tVarAry);
-            }
-            //移动顺序
-            if (moved || dels.length > 0 || addGroup) {
-                const upGroup = myfx.groupBy(updatePoints, up => up.key);
-                let movedUpAry = [];
-                let i = 0;
-                newSeq.forEach(nk => {
-                    upGroup[nk] && upGroup[nk].forEach((up) => {
-                        up.varIndex = i++;
-                        movedUpAry.push(up);
-                    });
-                });
-                let redundant = myfx.except(updatePoints, movedUpAry);
-                redundant.forEach(up => up.destroy(renderComponent));
-                up.children = movedUpAry;
-            }
-            updateSubScopeView(up, renderComponent, tmpl);
-        }
-    }
-    let DiSn = 0;
-    /**
-     * 返回指令调用函数
-     * @param di
-     * @returns
-     */
-    function directive(fn, scopes) {
-        let name = fn.name || ('Di-' + DiSn++);
-        let sym = Symbol.for(name);
-        return (...args) => {
-            let executor = fn(...args);
-            if (myfx.includes(scopes, exports.EnterPointType.TEXT) || myfx.includes(scopes, exports.EnterPointType.SLOT))
-                TextOrSlotDirectiveExecutorMap.set(name, executor);
-            myfx.set(executor, '__scope', scopes[0]);
-            return [sym, args, executor, (scopeType) => {
-                    if (!myfx.isEmpty(scopes) && !myfx.test(scopes.join(','), scopeType)) {
-                        showError(`Directive '${Symbol.keyFor(sym)}' is out of scopes, expect '${scopes.join(',')}' bug got '${scopeType}'`);
-                        return;
-                    }
-                }, Collector.popDirectiveQ()];
-        };
-    }
-
-    const ATTR_PREFIX_EVENT = "@";
-    const ATTR_PREFIX_PROP = ".";
-    const ATTR_PREFIX_BOOLEAN = "?";
-    const ATTR_PREFIX_REF = "*";
-    const ATTR_PROP_DELIMITER = ":";
-    const ATTR_REF = "ref";
-    const ATTR_KEY = "key";
-    const EXP_TAG_CONVERT = /(<\/?)\s*([A-Z][A-Za-z0-9]*)([\s>])/gm;
-    const EXP_ATTR_CONVERT = /\s+([\.?@*])?((?:[a-zA-Z]*[A-Z][^\s<>="']+))(?=[\s=>])/gm;
-    const EXP_ATTR_CHECK = /[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims;
-    const EXP_PLACEHOLDER = /<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/imgs;
-    const SLOT_KEY_PROPS = 'slot-props';
-    const HTML_TMPL_CACHE = {};
-    /**
-     * 提供渲染函数相关操作
-     * @author holyhigh2
-     */
-    function buildHTML(component, tmpl) {
-        let html = "";
-        let vars = myfx.concat(tmpl.vars);
-        let l = tmpl.strings.length - 1;
-        let vl = tmpl.vars.length - 1;
-        let varIndex = 0;
-        for (let i = 0; i <= l; i++) {
-            const str = tmpl.strings[i];
-            let val = myfx.get(vars, varIndex, '');
-            if (val instanceof Template) {
-                let [h, v] = buildHTML(component, val);
-                val = h;
-                vars.splice(varIndex, 1, ...v);
-                varIndex += v.length - 1;
-            }
-            else {
-                val = i > vl ? "" : PLACEHOLDER;
-            }
-            varIndex++;
-            html = html + str + val;
-        }
-        {
-            //attr check
-            let rs = html.match(EXP_ATTR_CHECK);
-            if (rs) {
-                let errorMsg = myfx.replaceAll(rs[0], PLACEHOLDER, '${...}');
-                showError(`Parse error: attribute value can be set only one interpolation —— \n ${errorMsg}`);
-                return ['', vars];
-            }
-        }
-        let i = 0;
-        html = html.replace(EXP_PLACEHOLDER, (a, b) => {
-            let rs = myfx.replaceAll(a, PLACEHOLDER, () => PLACEHOLDER.replace('-->', '') + (i++));
-            return rs;
-        });
-        html = html.replace(EXP_STR, '$1><').trim();
-        html = convertHTML(html);
-        return [html, vars];
-    }
-    function convertHTML(html) {
-        if (!myfx.isString(html))
-            return html + '';
-        //attr convert
-        html = html.replace(EXP_ATTR_CONVERT, (a, b, c) => {
-            return ` ${b ?? ''}${myfx.kebabCase(c)}`;
-        });
-        //tag convert
-        html = html.replace(EXP_TAG_CONVERT, (a, b, c, d) => {
-            let tag = DefinitionTagMap[c];
-            return b + tag + d;
-        });
-        return html;
-    }
-    function buildVars(component, tmpl) {
-        let vars = myfx.concat(tmpl.vars);
-        let l = tmpl.strings.length - 1;
-        for (let i = 0; i <= l; i++) {
-            let val = myfx.get(tmpl.vars, i, '');
-            if (val instanceof Template) {
-                // let [h, v] = buildHTML(component, val)
-                let vs = buildVars(component, val);
-                vars.splice(i, 1, ...vs);
-            }
-        }
-        return vars;
-    }
-    const PLACEHOLDER = "<!--c_ui-pl_df-->";
-    const PLACEHOLDER_PREFFIX = "<!--c_ui-pl_df";
-    const PLACEHOLDER_EXP = /<!--c_ui-pl_df\d*(-->)?/;
-    /**
-     * 构建模板为DOM结构
-     * @param html
-     */
-    function buildTmplate(updatePoints, html, vars, renderComponent, isDirective = false) {
-        const container = document.createElement("div");
-        container.innerHTML = html;
-        let evList = renderComponent._eventList;
-        if (!evList) {
-            evList = renderComponent._eventList = [];
-        }
-        //遍历dom
-        const nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
-        let currentNode;
-        let varIndex = 0;
-        let slotComponent;
-        let keyNode = null;
-        let keyVal = '';
-        while ((currentNode = nodeIterator.nextNode())) {
-            if (slotComponent && !slotComponent.contains(currentNode)) {
-                slotComponent = undefined;
-            }
-            if (currentNode instanceof HTMLElement || currentNode instanceof SVGElement) {
-                if (currentNode instanceof CompElem) {
-                    slotComponent = currentNode;
-                }
-                let props = {};
-                let attrs = myfx.toArray(currentNode.attributes);
-                for (let i = 0; i < attrs.length; i++) {
-                    const attr = attrs[i];
-                    let { name, value } = attr;
-                    //todo 这里需要修改为 data-slot-xx
-                    if (name === SLOT_KEY_PROPS) {
-                        // varCacheQueue && varCacheQueue.push({ type: VarType.AttrSlot, name: slotName, attrName: name })
-                        continue;
-                    } //endif
-                    if (myfx.startsWith(name, PLACEHOLDER_PREFFIX)) {
-                        let val = vars[varIndex];
-                        //support directive only for now
-                        if (myfx.isArray(val) && myfx.isSymbol(val[0])) {
-                            let [, args, executor, checker, varChain] = val;
-                            checker(exports.EnterPointType.TAG);
-                            let po = new UpdatePoint(varIndex, new WeakRef(currentNode));
-                            po.isDirective = true;
-                            po.value = val;
-                            po.isComponent = !!slotComponent;
-                            updatePoints.push(po);
-                            if (keyNode && keyNode?.contains(currentNode)) {
-                                po.key = keyVal;
-                            }
-                            varIndex++;
-                            executor(currentNode, args, undefined, { renderComponent, slotComponent, varChain });
-                        }
-                        currentNode.removeAttribute(name);
-                        continue;
-                    } //endif
-                    //@event.stop.prevent.debounce
-                    if (name[0] === ATTR_PREFIX_EVENT) {
-                        let val;
-                        if (PLACEHOLDER_EXP.test(value)) {
-                            let po = new UpdatePoint(varIndex);
-                            po.isPlaceholder = true;
-                            if (keyNode && keyNode?.contains(currentNode)) {
-                                po.key = keyVal;
-                            }
-                            updatePoints.push(po);
-                            val = vars[varIndex];
-                            if (!myfx.isFunction(val)) {
-                                showTagError(currentNode.tagName, `Event '${name}' must be a function`);
-                                continue;
-                            }
-                            varIndex++;
-                        }
-                        let evName = name.substring(1);
-                        evList.push([evName, val, currentNode]);
-                        currentNode.removeAttribute(name);
-                        continue;
-                    } //endif
-                    if (name === ATTR_REF) {
-                        if (PLACEHOLDER_EXP.test(value)) {
-                            let val = vars[varIndex];
-                            if (!(val instanceof RefObject)) {
-                                showTagError(currentNode.tagName, `Ref must be a RefObject`);
-                                continue;
-                            }
-                            let po = new UpdatePoint(varIndex);
-                            po.isPlaceholder = true;
-                            if (keyNode && keyNode?.contains(currentNode)) {
-                                po.key = keyVal;
-                            }
-                            updatePoints.push(po);
-                            varIndex++;
-                            val.__setRef(new WeakRef(currentNode));
-                        }
-                        currentNode.removeAttribute(name);
-                        continue;
-                    } //endif
-                    if (name === ATTR_KEY) {
-                        let val = vars[varIndex];
-                        currentNode.setAttribute(name, val);
-                        let po = new UpdatePoint(varIndex);
-                        po.isPlaceholder = true;
-                        if (keyNode && keyNode?.contains(currentNode)) {
-                            po.key = keyVal;
-                        }
-                        updatePoints.push(po);
-                        varIndex++;
-                        keyNode = currentNode;
-                        keyVal = val;
-                        if (updatePoints.length > 0) {
-                            updatePoints.forEach(up => {
-                                up.key = up.key ?? val;
-                            });
-                        }
-                        continue;
-                    } //endif
-                    //校验变量必须是表达式
-                    if (name[0] === ATTR_PREFIX_PROP && !PLACEHOLDER_EXP.test(value)) {
-                        showTagError(currentNode.tagName, `Prop '${name}' must be an interpolation`);
-                        continue;
-                    }
-                    if (PLACEHOLDER_EXP.test(value)) {
-                        let val = vars[varIndex];
-                        let po = new UpdatePoint(varIndex, new WeakRef(currentNode), name.replace(/\.|\?|@/, ''), value);
-                        po.isComponent = !!slotComponent;
-                        if (keyNode && keyNode?.contains(currentNode)) {
-                            po.key = keyVal;
-                        }
-                        if (name[0] === ATTR_PREFIX_PROP ||
-                            name[0] === ATTR_PREFIX_BOOLEAN ||
-                            name[0] === ATTR_PREFIX_REF) {
-                            if (myfx.isArray(val) && myfx.isSymbol(val[0])) {
-                                let [, args, executor, checker, varChain] = val;
-                                checker(exports.EnterPointType.PROP);
-                                let attrName = name.substring(1);
-                                executor(currentNode, args, undefined, { renderComponent, slotComponent, varChain, attrName });
-                                po.value = val;
-                                po.isDirective = true;
-                            }
-                            else if (name[0] === ATTR_PREFIX_BOOLEAN) {
-                                po.isToggleProp = true;
-                                po.value = !!val;
-                                let attrName = name.substring(1);
-                                if (po.value)
-                                    currentNode.setAttribute(attrName, val);
-                            }
-                            else if (name[0] === ATTR_PREFIX_REF) {
-                                po.value = val;
-                                let refNames = name.substring(1);
-                                const [refNamec, prop] = refNames.split(ATTR_PROP_DELIMITER);
-                                let refName = refNamec;
-                                switch (prop) {
-                                    case 'camel':
-                                        refName = myfx.camelCase(refName);
-                                        break;
-                                    case 'kebab':
-                                        refName = myfx.kebabCase(refName);
-                                        break;
-                                    case 'snake':
-                                        refName = myfx.snakeCase(refName);
-                                        break;
-                                }
-                                po.attrName = refName;
-                                currentNode.setAttribute(refName, val);
-                            }
-                            else {
-                                if (!(currentNode instanceof CompElem) && currentNode.tagName !== 'SLOT') {
-                                    showTagError(currentNode.tagName, `Prop '${name}' can only be set on a CompElem or a slot`);
-                                }
-                                else {
-                                    let propName = myfx.camelCase(name.substring(1));
-                                    if (!(propName in currentNode) && currentNode.tagName !== 'SLOT') {
-                                        showTagError(currentNode.tagName, `Prop '${name}' is not defined in ${currentNode.tagName}`);
-                                    }
-                                    po.value = val;
-                                    po.isProp = true;
-                                    props[propName] = val;
-                                }
-                            }
-                            currentNode.removeAttribute(name);
-                            val = '';
-                        }
-                        else {
-                            po.value = val;
-                            let executor;
-                            let args;
-                            if (myfx.isArray(val) && myfx.isSymbol(val[0])) {
-                                let type = exports.EnterPointType.ATTR;
-                                if (name === "class") {
-                                    type = exports.EnterPointType.CLASS;
-                                }
-                                else if (name === "style") {
-                                    type = exports.EnterPointType.STYLE;
-                                }
-                                let [, ags, exec, checker] = val;
-                                {
-                                    checker(type);
-                                }
-                                po.isDirective = true;
-                                po.attrName = name;
-                                args = ags;
-                                executor = exec;
-                                val = '';
-                            }
-                            value = myfx.replace(value, PLACEHOLDER_EXP, val);
-                            //回填
-                            attr.value = value;
-                            if (myfx.isDefined(value)) {
-                                currentNode.setAttribute(name, value);
-                            }
-                            executor && executor(currentNode, args, undefined, { renderComponent, slotComponent });
-                        }
-                        updatePoints.push(po);
-                        varIndex++;
-                    } //endif
-                } //endfor
-                if (currentNode instanceof CompElem) {
-                    currentNode._regWrapper(renderComponent);
-                    if (myfx.size(props) > 0)
-                        currentNode._initProps(props);
-                }
-                else if (currentNode instanceof HTMLSlotElement) {
-                    renderComponent._bindSlot(currentNode, currentNode.name || 'default', props);
-                }
-            }
-            else {
-                let comment = currentNode;
-                let ph = `<!--${comment.nodeValue}-->`;
-                if (ph !== PLACEHOLDER) {
-                    continue;
-                }
-                let po = new UpdatePoint(varIndex, new WeakRef(currentNode));
-                if (keyNode && keyNode?.contains(currentNode)) {
-                    po.key = keyVal;
-                }
-                updatePoints.push(po);
-                po.isComponent = !!slotComponent;
-                po.isText = true;
-                let val = vars[varIndex];
-                if (myfx.isArray(val) && myfx.isSymbol(val[0])) {
-                    const diName = Symbol.keyFor(val[0]);
-                    //插入start占位符
-                    let startComment;
-                    startComment = document.createComment(`compelem-${renderComponent.tagName}-${diName}-start`);
-                    comment.parentNode.insertBefore(startComment, comment);
-                    comment.nodeValue = `compelem-${renderComponent.tagName}-${diName}-end`;
-                    comment._diName = diName;
-                    DI_COMMENT_START_NODE_MAP.set(comment, startComment);
-                    po.isDirective = true;
-                    po.value = val;
-                    let pType = slotComponent ? exports.EnterPointType.SLOT : exports.EnterPointType.TEXT;
-                    let [, args, executor, checker, varChain] = val;
-                    checker(pType);
-                    po.directiveOldValue = [args, varChain];
-                    Collector.start();
-                    let tmpl = executor(comment, args, undefined, { renderComponent, slotComponent, varChain });
-                    Collector.end(renderComponent, po);
-                    //render
-                    if (tmpl) {
-                        let nodes = buildSubView(comment, tmpl[1], renderComponent, po);
-                        let len = nodes.length;
-                        if (nodes && len > 0) {
-                            DomUtil.insertBefore(comment, Array.from(nodes));
-                        }
-                    }
-                    val = undefined;
-                }
-                else {
-                    po.value = val;
-                    po.node = null;
-                }
-                varIndex++;
-                if (!po.isDirective) {
-                    let text = myfx.toString(val ?? '');
-                    let textDom = document.createTextNode(text);
-                    comment.parentNode.insertBefore(textDom, comment);
-                    comment.remove();
-                    currentNode = textDom;
-                    po.node = new WeakRef(textDom);
-                }
-            }
-            if (keyNode && !keyNode.contains(currentNode) && keyNode !== currentNode) {
-                keyNode = null;
-                keyVal = '';
-            }
-        }
-        return container.childNodes;
-    }
-    function buildView(tmpl, component) {
-        let updatePoints = [];
-        let nodes;
-        if (HTML_TMPL_CACHE[component.tagName]) {
-            let htmlTmpl = HTML_TMPL_CACHE[component.tagName];
-            let vars = buildVars(component, tmpl);
-            nodes = buildTmplate(updatePoints, htmlTmpl, vars, component);
-        }
-        else {
-            let [html, vars] = buildHTML(component, tmpl);
-            HTML_TMPL_CACHE[component.tagName] = html;
-            nodes = buildTmplate(updatePoints, html, vars, component);
-        }
-        component.__updateTree = updatePoints;
-        return nodes;
-    }
-    function buildSubView(pointNode, tmpl, component, po, bindEvent = false) {
-        let [html, vars] = buildHTML(component, tmpl);
-        let updatePoints = [];
-        let nodes = buildTmplate(updatePoints, html, vars, component, true);
-        if (bindEvent)
-            component.__bindEvents();
-        updatePoints.forEach(up => {
-            po.insert(up);
-        });
-        return nodes;
-    }
-    function updateView(tmpl, renderComponent, updatePoints, changedKeys) {
-        if (myfx.isBlank(myfx.join(tmpl.strings)))
-            return;
-        let vars = tmpl.flatVars(renderComponent);
-        for (let i = 0; i < updatePoints.length; i++) {
-            const up = updatePoints[i];
-            let varIndex = up.varIndex;
-            if (varIndex < 0)
-                continue;
-            if (up.isPlaceholder)
-                continue;
-            if (up.__destroyed)
-                continue;
-            let oldValue = up.value;
-            let newValue = vars;
-            let node = up.node.deref();
-            if (!node)
-                continue;
-            let indexSegs = myfx.split(varIndex, PATH_SEPARATOR);
-            for (let l = 0; l < indexSegs.length; l++) {
-                const seg = indexSegs[l];
-                newValue = myfx.get(newValue, seg);
-                if (newValue && newValue.vars && i < indexSegs.length - 1) {
-                    newValue = newValue.vars;
-                }
-            }
-            //check
-            if (!myfx.isObject(oldValue) && oldValue === newValue)
-                continue;
-            let elNode = node;
-            if (up.isDirective) {
-                //指令
-                let [, oldArgs, executor, , varChain] = up.value;
-                if (!myfx.isArray(newValue))
-                    continue;
-                let slotComponent = getSlotComponent(node, renderComponent);
-                let [, newArgs] = newValue;
-                updateDirective(node, newArgs, oldArgs, executor, renderComponent, slotComponent, varChain, up);
-            }
-            else if (up.isToggleProp) {
-                //布尔特性
-                if ((!!newValue) === oldValue)
-                    continue;
-                elNode.toggleAttribute(up.attrName, !!newValue);
-                myfx.set(elNode, up.attrName, !!newValue);
-            }
-            else if (up.isProp) {
-                //子组件属性
-                if (!myfx.isObject(newValue) && newValue === oldValue)
-                    continue;
-                //如果node是slot则触发组件的slot更新
-                if (node instanceof CompElem) {
-                    node._updateProps({ [up.attrName]: newValue });
-                }
-                else if (node instanceof HTMLSlotElement) {
-                    renderComponent._updateSlot(node.getAttribute('name') || 'default', up.attrName, newValue);
-                }
-            }
-            else if (up.attrName) {
-                //特性
-                if (!myfx.isEqual(oldValue, newValue)) {
-                    switch (up.attrName) {
-                        case 'value':
-                            if (node instanceof HTMLInputElement) {
-                                node.value = newValue;
-                                break;
-                            }
-                        default:
-                            node.setAttribute(up.attrName, myfx.replace(up.attrTmpl, PLACEHOLDER_EXP, newValue + ''));
-                    }
-                }
-            }
-            else if (up.isText) {
-                let textNode = up.node;
-                textNode.deref().textContent = myfx.toString(newValue ?? '');
-            }
-            up.value = newValue;
-        } //endfor
-        // tmpl.destroy()
-    }
-    function updateSubScopeView(subScopeUpdatePoint, renderComponent, tmpl, changedKeys) {
-        if (!subScopeUpdatePoint)
-            return;
-        let node = subScopeUpdatePoint.node.deref();
-        const executor = TextOrSlotDirectiveExecutorMap.get(node._diName);
-        let slotComponent = getSlotComponent(node, renderComponent);
-        const [oldArgs, varChain] = subScopeUpdatePoint.directiveOldValue;
-        if (!tmpl) {
-            let rs = executor(node, subScopeUpdatePoint.value[1], oldArgs, { renderComponent, slotComponent, varChain });
-            if (!rs)
-                return;
-            tmpl = rs[1];
-        }
-        if (!tmpl)
-            return;
-        //合并
-        if (tmpl.vars[0] instanceof Template) {
-            let tStrAry = [];
-            let tVarAry = [];
-            myfx.each(tmpl.vars, v => {
-                tVarAry.push(...v.vars);
-                tStrAry.push(...myfx.map(v.vars, v => '1'));
-            });
-            tStrAry.push('1');
-            tmpl = new Template(tStrAry, tVarAry);
-        }
-        updateView(tmpl, renderComponent, subScopeUpdatePoint.children);
-    }
-    //////////////////////////////////////////////////// interfaces
-    /**
-     * 标签函数，用于构建模板
-     * @param strings
-     * @param vars
-     */
-    function html(strings, ...vars) {
-        return new Template(myfx.isString(strings) ? [strings] : strings, vars);
-    }
-    /**
-     * 标签函数，用于构建样式
-     * @param strings
-     * @param vars
-     */
-    function css(strings, ...vars) {
-        return new CssTemplate(myfx.isString(strings) ? [strings] : strings, vars);
-    }
-    const EXP_STR = /([a-z0-9"'])\s*>\s*</img;
-    class RefObject {
-        #ref;
-        get current() {
-            return this.#ref?.deref();
-        }
-        __setRef(ref) {
-            this.#ref = ref;
-        }
-    }
-    /**
-     * 使用初始值创建一个引用对象
-     * @param initValue
-     * @returns
-     */
-    function createRef() {
-        return new RefObject();
-    }
-
-    //装饰器类型
-    exports.DecoratorType = void 0;
-    (function (DecoratorType) {
-        DecoratorType["CLASS"] = "class";
-        DecoratorType["FIELD"] = "field";
-        DecoratorType["METHOD"] = "method";
-    })(exports.DecoratorType || (exports.DecoratorType = {}));
-    /**
-     * 用于构造装饰器
-     * @author holyhigh2
-     */
-    class Decorator {
-        /**
-         * 优先级，越大越先执行
-         */
-        static get priority() {
-            return 0;
-        }
-        /**
-         * 构造会传递自定义参数
-         * @param args 自定义参数
-         */
-        // constructor(...args: any[]) { }
-        created(component, ...args) { }
-        /**
-         * 执行时机与组件一致
-         * @param component 组件实例
-         * @param setReactive 为实例设置响应属性，注意，仅是设置到了instance.reactiveData中并非this.key。如需实现this访问，可自行定义组件的properties
-         * @param args 装饰器函数参数
-         */
-        beforeMount(component, setReactive, ...args) { }
-        mounted(component, setReactive, ...args) { }
-        updated(component, changed) { }
-        beforeDestroy(component, ...args) { }
-    }
-
-    /**
-     * 装饰器包装类
-     * 用于框架内部，表示class上的一个装饰器属性定义
-     * 该定义在实例初始化时会产生装饰器实例属性
-     */
-    class DecoratorWrapper {
-        //装饰器参数
-        metadata;
-        decorator;
-        key; //装饰器唯一key
-        priority = 0;
-        constructor(args, metadata, decoratorClass) {
-            this.metadata = metadata;
-            this.decorator = new decoratorClass(...args);
-            this.priority = myfx.get(decoratorClass, 'priority', 0);
-        }
-        dispose() {
-            //clean up
-            this.metadata = null;
-            this.decorator = null;
-        }
-        //在组件构造时调用
-        create(comp) {
-            //1. 校验targets
-            let targets = this.decorator.targets;
-            let decoType = undefined;
-            let descriptor = this.metadata[1];
-            if (myfx.isObject(descriptor) && myfx.isDefined(myfx.get(descriptor, 'configurable'))) {
-                decoType = exports.DecoratorType.METHOD;
-            }
-            else if (myfx.isUndefined(this.metadata[1])) {
-                decoType = exports.DecoratorType.FIELD;
-            }
-            if (myfx.isEmpty(targets) || !decoType || !targets.includes(decoType)) {
-                showError(`Decorator '${this.decorator.constructor.name}' is out of targets, expect '${targets.join(',')}' bug got '${decoType}'`);
-                return;
-            }
-            this.decorator.created(comp, ...this.metadata);
-        }
-        beforeMount(comp, setReactive) {
-            this.decorator.beforeMount(comp, setReactive, ...this.metadata);
-        }
-        mounted(comp, setReactive) {
-            this.decorator.mounted(comp, setReactive, ...this.metadata);
-        }
-        updated(comp, changed) {
-            this.decorator.updated(comp, changed);
-        }
-        destroy(comp) {
-            this.decorator.beforeDestroy(comp, ...this.metadata);
-        }
-    }
-    /**
-     * 该函数用于创建一个装饰器
-     * @param decoClass 装饰器构造
-     * @returns 装饰器函数
-     */
-    function decorator(decoClass) {
-        let fn = (...args) => {
-            return (...metadata) => {
-                let ctor = metadata[0].constructor;
-                let ary = DefinitionDecoratorMap.get(ctor.name); //  ctor[_DecoratorsKey]
-                if (!DefinitionDecoratorMap.has(ctor.name)) {
-                    //继承父类
-                    let proto = Object.getPrototypeOf(ctor);
-                    ary = proto ? myfx.concat(DefinitionDecoratorMap.get(proto.name) ?? []) : [];
-                    DefinitionDecoratorMap.set(ctor.name, ary);
-                }
-                let dw = new DecoratorWrapper(args, metadata.splice(1), decoClass);
-                ary?.push(dw);
-                return dw;
-            };
-        };
-        return fn;
-    }
-    function decoratorWithNoArgs(decoClass) {
-        let fn = (...metadata) => {
-            if (!metadata || metadata.length < 1)
-                return;
-            let ctor = metadata[0].constructor;
-            let ary = DefinitionDecoratorMap.get(ctor.name); //  ctor[_DecoratorsKey]
-            if (!DefinitionDecoratorMap.has(ctor.name)) {
-                //继承父类
-                let proto = Object.getPrototypeOf(ctor);
-                ary = proto ? myfx.concat(DefinitionDecoratorMap.get(proto.name) ?? []) : [];
-                DefinitionDecoratorMap.set(ctor.name, ary);
-            }
-            let dw = new DecoratorWrapper([], metadata.splice(1), decoClass);
-            ary?.push(dw);
-            return dw;
-        };
-        return fn;
-    }
-
-    function computed(target, propertyKey, descriptor) {
-        if (!descriptor.get) {
-            showError(`Computed '${propertyKey}' must be a getter`);
-        }
-        if (!DefinitionComputedMap.has(target.constructor.name)) {
-            DefinitionComputedMap.set(target.constructor.name, {});
-        }
-        DefinitionComputedMap.get(target.constructor.name)[propertyKey] = descriptor.get;
-    }
-
-    /**
-     * 定义防抖函数
-     * 同时会创建一个以 _$__ 结尾的非防抖版本
-     * @example
-     *  @debounced(50, true)
-     *
-     * @param wait 抖动间隔，单位ms
-     * @param immediate 立即执行
-     */
-    class DebouncedDecorator extends Decorator {
-        static get priority() {
-            return Number.MAX_VALUE;
-        }
-        created(component, fieldName, ...args) {
-            let fn = myfx.get(component, fieldName);
-            myfx.set(component, fieldName, myfx.debounce(fn, this.wait, this.immediate));
-            myfx.set(component, fieldName + '_$__', fn);
-        }
-        beforeDestroy(component, fieldName) {
-            myfx.set(component, fieldName, null);
-            myfx.set(component, fieldName + '_$__', null);
-        }
-        get targets() {
-            return [exports.DecoratorType.METHOD];
-        }
-        wait;
-        immediate;
-        constructor(wait, immediate = false) {
-            super();
-            this.wait = wait;
-            this.immediate = immediate;
-        }
-    }
-    const debounced = decorator(DebouncedDecorator);
-
-    /**
-     * 绑定非视图事件，如window/document等
-     * @param eventName 事件名，含修饰参数。同视图模板中的事件名
-     * @param eventTarget 事件绑定目标，默认this
-     */
-    function event(eventName, eventTarget) {
-        return (target, name, descriptor) => {
-            if (!DefinitionCompEventMap.has(target.constructor.name)) {
-                let mixinEvents = [];
-                let parentCtor = target.constructor;
-                while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                    mixinEvents = myfx.concat(mixinEvents, DefinitionCompEventMap.get(parentCtor.name) ?? []);
-                }
-                DefinitionCompEventMap.set(target.constructor.name, mixinEvents);
-            }
-            DefinitionCompEventMap.get(target.constructor.name)?.push({ name: eventName, targetFn: eventTarget, fnName: name });
-        };
-    }
-
-    /**
-     * 定义一次性函数
-     * 同时会创建一个以 _$__ 结尾的非一次性版本
-     * @example
-     *  @onced
-     *
-     */
-    class OncedDecorator extends Decorator {
-        static get priority() {
-            return Number.MAX_VALUE;
-        }
-        created(component, classProto, fieldName, ...args) {
-            let fn = myfx.bind(myfx.get(component, fieldName), component);
-            myfx.set(component, fieldName, myfx.once(fn));
-            myfx.set(component, fieldName + '_$__', fn);
-        }
-        beforeDestroy(component, fieldName) {
-            myfx.set(component, fieldName, null);
-            myfx.set(component, fieldName + '_$__', null);
-        }
-        get targets() {
-            return [exports.DecoratorType.METHOD];
-        }
-    }
-    const onced = decorator(OncedDecorator);
-
-    /**
-     * 缓存策略
-     */
-    exports.QueryCache = void 0;
-    (function (QueryCache) {
-        QueryCache["ONCE"] = "once";
-    })(exports.QueryCache || (exports.QueryCache = {}));
-    const CacheMap = new WeakMap();
-    /**
-     * css查询装饰器
-     * @example
-     *  @query('l-popup', QueryCache.ONCE)
-     */
-    class QueryDecorator extends Decorator {
-        static get priority() {
-            return Number.MAX_VALUE;
-        }
-        get targets() {
-            return [exports.DecoratorType.FIELD];
-        }
-        selector;
-        cache;
-        constructor(selector, cache) {
-            super();
-            this.selector = selector;
-            this.cache = cache;
-        }
-        static getKey(selector) {
-            return selector;
-        }
-        getter(component) {
-            let el = component?.shadowRoot?.querySelector(this.selector);
-            let cMap = CacheMap.get(component);
-            if (!cMap) {
-                cMap = new Map();
-                CacheMap.set(component, cMap);
-            }
-            cMap.set(this.selector, el);
-        }
-        mounted(component, setReactive, fieldName, ...args) {
-            const that = this;
-            let wk = new WeakRef(component);
-            Reflect.defineProperty(component, fieldName, {
-                configurable: true,
-                get() {
-                    let ctx = wk.deref();
-                    if (CacheMap.has(ctx) && CacheMap.get(ctx)?.has(that.selector) && that.cache === exports.QueryCache.ONCE) {
-                        return CacheMap.get(ctx)?.get(that.selector);
-                    }
-                    that.getter(ctx);
-                    return CacheMap.get(ctx)?.get(that.selector);
-                }
-            });
-        }
-        beforeDestroy(component, fieldName) {
-            CacheMap.get(component)?.clear();
-            CacheMap.delete(component);
-        }
-        updated(component, changed) {
-            if (this.cache === exports.QueryCache.ONCE)
-                return;
-            this.getter(component);
-        }
-    }
-    class QueryAllDecorator extends QueryDecorator {
-        getter(component) {
-            let el = component.shadowRoot?.querySelectorAll(this.selector);
-            let cMap = CacheMap.get(component);
-            if (!cMap) {
-                cMap = new Map();
-                CacheMap.set(component, cMap);
-            }
-            cMap.set(this.selector, el);
-        }
-    }
-    const query = decorator(QueryDecorator);
-    const queryAll = decorator(QueryAllDecorator);
-
-    function state(options) {
-        if (arguments.length === 1) {
-            return (target, stateKey) => {
-                defineState(target, stateKey, options);
-            };
-        }
-        let target = arguments[0], stateKey = arguments[1];
-        defineState(target, stateKey, { prop: "" });
-    }
-    function defineState(target, stateKey, options) {
-        if (!DefinitionStateMap.has(target.constructor.name)) {
-            const mixinStates = {};
-            let parentCtor = target.constructor;
-            while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                myfx.merge(mixinStates, DefinitionStateMap.get(parentCtor.name) ?? {});
-            }
-            DefinitionStateMap.set(target.constructor.name, mixinStates);
-        }
-        options.shallow = options.shallow || false;
-        myfx.set(DefinitionStateMap.get(target.constructor.name), stateKey, options);
-    }
-    /**
-     * 同@state装饰器，但可用于构造器中调用
-     * @param ctor 类构造函数
-     * @param stateKey state 名称
-     * @param options
-     */
-    function makeState(ctor, stateKey, options) {
-        defineState(ctor.prototype, stateKey, options || { prop: "" });
-    }
-
-    /**
-     * class用注解，用于自动注册自定义组件
-     * @param name 自定义组件名称
-     */
-    function tag(name) {
-        return (target) => {
-            if (target) {
-                DefinitionTagMap[target.name] = name;
-                customElements.define(name, target);
-            }
-        };
-    }
-
-    /**
-     * 定义节流函数
-     * 同时会创建一个以 _$__ 结尾的非节流版本
-     * @example
-     *  @throttled(50, true)
-     *
-     * @param wait 抖动间隔，单位ms
-     */
-    class ThrottledDecorator extends Decorator {
-        static get priority() {
-            return Number.MAX_VALUE;
-        }
-        created(component, fieldName, ...args) {
-            let fn = myfx.get(component, fieldName);
-            myfx.set(component, fieldName, myfx.throttle(fn, this.wait));
-            myfx.set(component, fieldName + '_$__', fn);
-        }
-        beforeDestroy(component, fieldName) {
-            myfx.set(component, fieldName, null);
-            myfx.set(component, fieldName + '_$__', null);
-        }
-        get targets() {
-            return [exports.DecoratorType.METHOD];
-        }
-        wait;
-        constructor(wait) {
-            super();
-            this.wait = wait;
-        }
-    }
-    const throttled = decorator(ThrottledDecorator);
-
-    /**
-     * 监控prop/state变量值变化
-     * @param source 变量路径支持多级路径
-     * @param options
-     * @returns
-     */
-    function watch(source, options) {
-        return (target, name) => {
-            if (!DefinitionWatchMap.has(target.constructor.name)) {
-                const watchMap = {};
-                let parentCtor = target.constructor;
-                while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-                    if (DefinitionWatchMap.has(parentCtor.name)) {
-                        let parentMap = DefinitionWatchMap.get(parentCtor.name);
-                        myfx.each(parentMap, (list, k) => {
-                            watchMap[k] = list;
-                        });
-                    }
-                }
-                DefinitionWatchMap.set(target.constructor.name, watchMap);
-            }
-            const sources = myfx.isArray(source) ? source : [source];
-            sources.forEach(src => {
-                let srcList = DefinitionWatchMap.get(target.constructor.name)[src];
-                if (!myfx.isArray(srcList)) {
-                    srcList = [];
-                    DefinitionWatchMap.get(target.constructor.name)[src] = srcList;
-                }
-                srcList.push({ source: src, options, handler: target[name] });
-            });
-        };
-    }
-
-    const Ignores = ['key'];
-    /**
-     * 绑定属性到节点上，如果节点是组件会使用in操作符判断是否props
-     * @param styles 对象/数组/字符串
-     */
-    const bind = directive(function Bind(obj) {
-        return (pointNode, [obj], oldArgs) => {
-            let el = pointNode;
-            if (oldArgs) {
-                myfx.each(obj, (v, k) => {
-                    el.setAttribute(k, v);
-                });
-                return;
-            }
-            if (el instanceof CompElem) {
-                //判断是否prop
-                let props = {};
-                let attrs = {};
-                let propDefs = DefinitionPropMap.get(el.constructor.name);
-                myfx.each(obj, (v, k) => {
-                    if (Ignores.includes(k))
-                        return;
-                    let ck = myfx.camelCase(k);
-                    let propDef = propDefs ? propDefs[ck] : undefined;
-                    if (propDef) {
-                        props[k] = v;
-                    }
-                    else {
-                        attrs[k] = v + '';
-                    }
-                });
-                el._initProps(props, attrs);
-            }
-            else {
-                myfx.each(obj, (v, k) => {
-                    el.setAttribute(k, v);
-                });
-            }
-        };
-    }, [exports.EnterPointType.TAG]);
-
-    const ClassLastMap = new WeakMap();
-    /**
-     * 根据变量内容自动插入class，仅能用于class属性
-     * @param styles 对象/数组/字符串
-     */
-    const classes = directive(function Classes(clazz) {
-        return (pointNode, [clazz], oldArgs, { renderComponent }) => {
-            let rs = [];
-            if (myfx.isArray(clazz)) {
-                rs = myfx.compact(clazz);
-            }
-            else if (myfx.isObject(clazz)) {
-                rs = myfx.flatMap(clazz, (v, k) => v ? k : []);
-            }
-            else if (myfx.isString(clazz)) {
-                rs = clazz.split(' ');
-            }
-            if (rs.length < 1 && !oldArgs)
-                return;
-            let el = pointNode;
-            if (ClassLastMap.get(el) && ClassLastMap.get(el).length === rs.length && myfx.isMatch(ClassLastMap.get(el), rs))
-                return;
-            let lastCls = ClassLastMap.get(el);
-            myfx.each(lastCls, (cls) => {
-                el.classList.remove(cls);
-            });
-            myfx.each(rs, cls => {
-                el.classList.add(cls);
-            });
-            lastCls = myfx.concat(rs);
-            ClassLastMap.set(el, lastCls);
-        };
-    }, [exports.EnterPointType.CLASS]);
-
-    const LastValueMap = new WeakMap();
-    const LastTmplMap$1 = new WeakMap();
-    /**
-     * 循环列表并自动优化列表更新
-     * foreach循环的只能是节点，且必须有key属性。非节点元素会被过滤掉
-     * 使用序号作为key时可能会导致异常问题
-     */
-    const forEach = directive(function ForEach(value, cbk) {
-        return (pointNode, newArgs, oldArgs, { varChain }) => {
-            let el = pointNode;
-            let lastRenderTmpl = comboTmpl(newArgs[0], newArgs[1], el);
-            if (oldArgs && oldArgs[0]) {
-                //更新
-                const lastAry = LastValueMap.get(el);
-                // const lastRenderTmpl = LastTmplMap.get(el)
-                let startNode = DI_COMMENT_START_NODE_MAP.get(pointNode);
-                let nodes = DomUtil.getNodes(startNode, pointNode);
-                if (myfx.isEmpty(nodes) && (!newArgs || myfx.isEmpty(newArgs[0])))
-                    return [exports.DirectiveUpdateTag.NONE, lastRenderTmpl];
-                if (lastAry && myfx.isMatch(lastAry, newArgs[0]) && lastAry.length === newArgs[0].length)
-                    return [exports.DirectiveUpdateTag.NONE, lastRenderTmpl];
-            }
-            LastValueMap.set(el, myfx.clone(newArgs[0]));
-            if (oldArgs) {
-                return [exports.DirectiveUpdateTag.UPDATE, lastRenderTmpl];
-            }
-            return [exports.DirectiveUpdateTag.APPEND, lastRenderTmpl];
-        };
-    }, [exports.EnterPointType.TEXT, exports.EnterPointType.SLOT]);
-    function comboTmpl(value, cbk, el) {
-        //1. 产生模板
-        let tmpls = myfx.map(value, (v, k) => {
-            return cbk(v, k);
-        });
-        if (tmpls.length < 1) {
-            let lastRenderTmpl = new Template([], []);
-            LastTmplMap$1.set(el, lastRenderTmpl);
-            return lastRenderTmpl;
-        }
-        //2. 检查 & 合并模板
-        let keyAry = [];
-        let strs = [];
-        const combStrings = [];
-        const combVars = [];
-        for (let l = 0; l < tmpls.length; l++) {
-            const tmpl = tmpls[l];
-            let lastStr = myfx.last(strs);
-            let vars = tmpl.vars;
-            let hasNoKey = true;
-            let tmplStrs = tmpl.strings;
-            for (let i = 0; i < tmplStrs.length; i++) {
-                const str = tmplStrs[i];
-                if (EXP_KEY.test(str)) {
-                    let key = vars[i] + '';
-                    if (keyAry.includes(key)) {
-                        showError(`forEach - duplicate key '${key}'`);
-                        return;
-                    }
-                    keyAry.push(key);
-                    hasNoKey = false;
-                }
-                if (i == 0 && lastStr) {
-                    strs[strs.length - 1] = lastStr + str;
-                    continue;
-                }
-                strs.push(str);
-            }
-            if (hasNoKey) {
-                showError("forEach - missing 'key' prop");
-                return;
-            }
-            let lastVar = myfx.last(combStrings);
-            if (lastVar && tmplStrs.length > 0) {
-                combStrings[combStrings.length - 1] = myfx.trim(lastVar) + tmplStrs.shift();
-            }
-            combStrings.push('');
-            combVars.push(tmpl);
-        }
-        combStrings.push('');
-        let lastRenderTmpl = new Template(combStrings, combVars);
-        LastTmplMap$1.set(el, lastRenderTmpl);
-        return lastRenderTmpl;
-    }
-
-    let compiler = document.createElement('div');
-    /**
-     * 向指定文本位置插入指定HTML内容
-     * @param htmlStr html内容
-     */
-    const htmlC = directive(function HtmlC(htmlStr) {
-        return (pointNode, newArgs, oldArgs, { renderComponent, slotComponent }) => {
-            if (oldArgs && newArgs[0] == oldArgs[0])
-                return;
-            if (myfx.isNil(newArgs[0]))
-                return;
-            compiler.innerHTML = convertHTML(newArgs[0]);
-            pointNode.after(...compiler.childNodes);
-        };
-    }, [exports.EnterPointType.TEXT, exports.EnterPointType.SLOT]);
-
-    /**
-     * 向元素中插入指定HTML内容
-     * 注意，应用该指令的元素内部不应再出现表达式，否则会导致异常显示
-     * @param htmlStr html内容
-     */
-    const htmlD = directive(function HtmlD(htmlStr) {
-        return (pointNode, newArgs, oldArgs, { renderComponent, slotComponent }) => {
-            if (oldArgs && newArgs[0] == oldArgs[0])
-                return;
-            if (myfx.isNil(newArgs[0]))
-                return;
-            pointNode.innerHTML = convertHTML(newArgs[0]);
-        };
-    }, [exports.EnterPointType.TAG]);
-
-    const LastTmplMap = new WeakMap();
-    /**
-     * 条件为真时返回参数1，否则返回参数2，仅能用于文本节点
-     * @param condition 条件
-     * @param tmpl 模板
-     */
-    const ifElse = directive(function IfElse(condition, ifTmpl, elseTmpl) {
-        return (pointNode, [condi, ifTmpl, elseTmpl], oldArgs, { renderComponent }) => {
-            let el = pointNode;
-            if (oldArgs) {
-                //更新
-                if (!!condi === !!oldArgs[0]) {
-                    let tmpl = LastTmplMap.get(el);
-                    return [exports.DirectiveUpdateTag.NONE, tmpl.call(renderComponent, condi)];
-                }
-                let tmpl = condi ? ifTmpl : elseTmpl;
-                LastTmplMap.set(el, tmpl);
-                return [exports.DirectiveUpdateTag.REPLACE, tmpl.call(renderComponent, condi)];
-            }
-            else {
-                let tmpl = condi ? ifTmpl : elseTmpl;
-                LastTmplMap.set(el, tmpl);
-                return [exports.DirectiveUpdateTag.APPEND, tmpl.call(renderComponent, condi)];
-            }
-        };
-    }, [exports.EnterPointType.TEXT, exports.EnterPointType.SLOT]);
-
-    /**
-     * 条件为真时返回内容，仅能用于文本节点
-     * @param condition 条件
-     * @param tmpl 模板
-     */
-    const ifTrue = directive(function IfTrue(condition, tmplFn) {
-        return (pointNode, [condi, render], oldArgs) => {
-            if (oldArgs) {
-                //更新
-                if (condi === oldArgs[0])
-                    return [exports.DirectiveUpdateTag.NONE, condi ? render() : html ``];
-                if (condi) {
-                    return [exports.DirectiveUpdateTag.REPLACE, condi ? render() : html ``];
-                }
-                return [exports.DirectiveUpdateTag.REMOVE];
-            }
-            else {
-                return [exports.DirectiveUpdateTag.APPEND, condi ? render() : html ``];
-            }
-        };
-    }, [exports.EnterPointType.TEXT, exports.EnterPointType.SLOT]);
-
-    exports.ModelTriggerType = void 0;
-    (function (ModelTriggerType) {
-        ModelTriggerType["CHANGE"] = "change";
-        ModelTriggerType["INPUT"] = "input";
-    })(exports.ModelTriggerType || (exports.ModelTriggerType = {}));
-    /**
-     * 实现双向绑定（仅支持静态路径，动态增加的属性路径无法识别）
-     * 当用于组件时，监控 @update:value 事件
-     * 当用于元素时，
-     * - 对于 input/textarea 监控 @input，并设置 value 属性
-     * - 对于 checkbox/radio 监控 @change，并设置 checked 属性
-     * - 对于 select  监控 @change，并设置 value 属性
-     * @param modelValue 双向绑定的组件变量
-     * @param updateProp 绑定模型变更时的监控属性，默认 value
-     * @param modelProp 当初始模型路径不存在时可指定路径
-     */
-    const model = directive(function Model(modelValue, updateProp = 'value', modelProp) {
-        return (pointNode, [modelValue, updateProp, modelProp], oldArgs, { varChain, renderComponent }) => {
-            updateProp = updateProp ?? 'value';
-            const node = pointNode;
-            if (oldArgs) {
-                const oldValue = oldArgs[0];
-                const newValue = modelValue;
-                let nodeValue = myfx.get(node, updateProp);
-                if (!myfx.isObject(newValue) && Object.is(newValue, oldValue) && Object.is(nodeValue, newValue))
-                    return;
-                if (node instanceof CompElem) {
-                    node._updateProps({ [updateProp]: newValue });
-                }
-                else if (node instanceof HTMLTextAreaElement || node instanceof HTMLSelectElement) {
-                    node.setAttribute(updateProp, newValue + '');
-                    if (node instanceof HTMLSelectElement) {
-                        let opt = myfx.find(node.querySelectorAll('option'), n => n.value == newValue);
-                        if (opt) {
-                            opt.selected = true;
-                        }
-                    }
-                }
-                else if (node instanceof HTMLInputElement) {
-                    if (node.value == newValue)
-                        return;
-                    switch (node.type) {
-                        case 'checkbox':
-                        case 'radio':
-                            if (!!newValue) {
-                                node.setAttribute('checked', '');
-                            }
-                            else {
-                                node.removeAttribute('checked');
-                            }
-                            break;
-                        case 'text':
-                        case 'email':
-                        case 'number':
-                        case 'password':
-                        case 'search':
-                        case 'tel':
-                        case 'url':
-                            node.setAttribute(updateProp, newValue + '');
-                            myfx.set(node, updateProp, newValue);
-                            break;
-                        default:
-                            node.setAttribute(updateProp, newValue + '');
-                            break;
-                    }
-                }
-                return;
-            }
-            let path;
-            if (myfx.isString(modelProp)) {
-                path = myfx.toPath(modelProp)[0];
-            }
-            else {
-                path = myfx.last(varChain);
-            }
-            const rootPath = myfx.split(path, '.')[0];
-            if (!(rootPath in renderComponent) && !renderComponent._wrapperProp[rootPath]) {
-                showError(`model - property '${rootPath}' is not defined on the instance of ` + renderComponent.tagName);
-            }
-            let evList = renderComponent._eventList;
-            if (!myfx.isObject(modelValue) && !myfx.trim(modelValue))
-                modelValue = '';
-            if (node instanceof CompElem) {
-                node._initProps({ [updateProp]: modelValue });
-                let evName = 'update:' + updateProp;
-                evList.push([evName, function (e) {
-                        console.debug('Model =>', path);
-                        let ctx = this;
-                        let pathFromWrapperComponent = ctx._wrapperProp[rootPath];
-                        let hasPath = rootPath in ctx;
-                        if (!hasPath && pathFromWrapperComponent && myfx.get(ctx.wrapperComponent, rootPath) === myfx.get(ctx, pathFromWrapperComponent)) {
-                            ctx = ctx.wrapperComponent || ctx;
-                        }
-                        myfx.set(ctx, path, e.detail.value);
-                    }, node]);
-            }
-            else if (node instanceof HTMLTextAreaElement) {
-                node.setAttribute(updateProp, modelValue + '');
-                let evName = 'input';
-                evList.push([evName, function (e) {
-                        console.debug('Model =>', path);
-                        let t = e.target;
-                        myfx.set(this, path, t.value);
-                    }, node]);
-            }
-            else if (node instanceof HTMLInputElement) {
-                let propName = '';
-                let evName = '';
-                switch (node.type) {
-                    case 'checkbox':
-                    case 'radio':
-                        propName = 'checked';
-                        evName = 'change';
-                        break;
-                    case 'text':
-                    case 'email':
-                    case 'number':
-                    case 'password':
-                    case 'search':
-                    case 'tel':
-                    case 'url':
-                        propName = 'value';
-                        evName = 'input';
-                        break;
-                    default:
-                        propName = 'value';
-                        evName = 'input';
-                        break;
-                }
-                node.setAttribute(updateProp ?? propName, modelValue + '');
-                evList.push([evName, function (e) {
-                        console.debug('Model =>', path);
-                        let t = e.target;
-                        myfx.set(this, path, t.value);
-                    }, node]);
-            }
-            else if (node instanceof HTMLSelectElement) {
-                node.setAttribute(updateProp, modelValue + '');
-                evList.push(['change', function (e) {
-                        console.debug('Model =>', path);
-                        let t = e.target;
-                        let ctx = this;
-                        let pathFromWrapperComponent = ctx._wrapperProp[rootPath];
-                        let hasPath = rootPath in ctx;
-                        if (!hasPath && pathFromWrapperComponent && myfx.get(ctx.wrapperComponent, rootPath) === myfx.get(ctx, pathFromWrapperComponent)) {
-                            ctx = ctx.wrapperComponent || ctx;
-                        }
-                        myfx.set(ctx, path, t.value);
-                    }, node]);
-            }
-        };
-    }, [exports.EnterPointType.TAG]);
-
-    const DisplayMap = new WeakMap();
-    /**
-     * display的快捷指令
-     * 如果
-     * @param isvisible 是否显示
-     * @param cbk 显示状态变更后调用的回调函数
-     */
-    const show = directive(function Show(isVisible, cbk) {
-        return (pointNode, [condi, cbk], oldArgs) => {
-            if (oldArgs && condi === oldArgs[0])
-                return;
-            let el = pointNode;
-            if (!DisplayMap.has(el)) {
-                let dis = el.style.display;
-                DisplayMap.set(el, dis == 'none' ? 'unset' : dis);
-            }
-            el.style.display = condi ? DisplayMap.get(el) : 'none';
-            if (cbk) {
-                cbk(el, condi);
-            }
-        };
-    }, [exports.EnterPointType.TAG]);
-
-    /**
-     * 创建一个动态插槽内容
-     * @param cbk 回调函数，函数接收插槽上定义得变量
-     * @param slotName 插槽名词，默认default
-     */
-    const slot = directive(function Slot(cbk, slotName) {
-        return (pointNode, [cbk, slotName], oldArgs, { renderComponent, slotComponent }) => {
-            if (oldArgs)
-                return;
-            cbk = cbk.bind(renderComponent);
-            slotComponent._bindSlotHook(slotName || 'default', cbk);
-        };
-    }, [exports.EnterPointType.SLOT]);
-
-    /**
-     * Css 辅助类
-     */
-    class CssHelper {
-        /**
-         * 用于转换style对象为标准style字符串，会自动转换对象key为短横线格式
-         * @param styles 样式对象
-         * @returns
-         */
-        static getCssText(styles, important = false) {
-            if (myfx.isString(styles))
-                return styles;
-            return myfx.join(myfx.map(styles, (v, k) => {
-                if (k.startsWith('--'))
-                    return k + ":" + v + (important ? ' !important' : '');
-                return myfx.kebabCase(k) + ":" + v + (important ? ' !important' : '');
-            }), ';') + ';';
-        }
-        /**
-         * 设置样式
-         * @param styles 样式字符串或样式对象
-         * @param node HTML元素
-         * @returns 每个样式的旧值map
-         */
-        static setStyle(styles, node) {
-            if (myfx.isString(styles) && !myfx.trim(styles))
-                return;
-            let css = CssHelper.getCssText(styles);
-            node.style.cssText = css;
-        }
-    }
-
-    /**
-     * 根据变量内容设置元素样式，仅能用于style属性
-     * @param styles 对象/字符串
-     */
-    const styles = directive(function Styles(...styles) {
-        return (pointNode, newArgs, oldArgs, { renderComponent }) => {
-            let el = pointNode;
-            let cssText = myfx.reduce(newArgs, (acc, v) => acc + CssHelper.getCssText(v), '');
-            let sKeys = myfx.compact(cssText.split(';').map(str => str.split(':')[0]));
-            let eKeys = myfx.compact(el.style.cssText.split(';'));
-            let ePairs = myfx.reject(eKeys, (str => sKeys.some(key => str.trim().startsWith(key))));
-            el.style.cssText = cssText + ePairs.join(';');
-        };
-    }, [exports.EnterPointType.STYLE]);
-
-    /**
-     * 类似Model，实现属性的同步跟踪
-     * 设置组件prop，并监控 @update:prop 事件
-     * @param syncValue 双向绑定的组件变量
-     */
-    const sync = directive(function Sync(syncValue) {
-        return (pointNode, newArgs, oldArgs, { renderComponent, varChain, attrName }) => {
-            const targetComponent = pointNode;
-            if (oldArgs) {
-                if (!myfx.isEqual(newArgs, oldArgs)) {
-                    targetComponent._updateProps({ [attrName]: newArgs[0] });
-                }
-                return;
-            }
-            let modelPath = myfx.last(varChain);
-            targetComponent._initProps({ [attrName]: newArgs[0] });
-            targetComponent.addEventListener('update:' + attrName, (e) => {
-                myfx.set(renderComponent, modelPath, e.detail.value);
-            });
-        };
-    }, [exports.EnterPointType.PROP]);
-
-    /**
-     * 分支指令，具有switch / else if 两种模式
-     * @example
-     *  switch 模式
-     * ${when(var, {
-        closed: () => html``, //case 1
-        connecting: () => html``, //case 2
-        default: () => html``// default是switch模式下的关键字key
-       })}
-
-       else if 模式
-     * ${when(this.editingTitle, [
-        [(v: any) => v.substring(2) > 0, () => html`<div style="${PageHome.tunnelLight}"></div>`],
-        [(v: any) => v == 'closed', () => html`<div style="${PageHome.tunnelLight}"></div>`],
-        [() => true, () => html`默认`]
-        ])}
-     *
-     * @param condition 条件
-     * @param tmpl 模板
-     */
-    const when = directive(function When(value, cases) {
-        return (pointNode, [value, cases], oldArgs) => {
-            let defaultFn = () => html ``;
-            let conditionList = [];
-            let tmplList = [];
-            myfx.each(cases, (v, k) => {
-                if (myfx.isFunction(v)) {
-                    conditionList.push(k);
-                    tmplList.push(v);
-                }
-                else {
-                    let condiFn = v[0];
-                    let tmplFn = v[1];
-                    conditionList.push(condiFn);
-                    tmplList.push(tmplFn);
-                }
-                if (k === 'default') {
-                    defaultFn = v;
-                }
-            });
-            let i = myfx.findIndex(conditionList, c => {
-                if (myfx.isFunction(c)) {
-                    return c(value);
-                }
-                else {
-                    return c == value;
-                }
-            });
-            if (oldArgs)
-                return [exports.DirectiveUpdateTag.REPLACE, myfx.call(tmplList[i] ?? defaultFn)];
-            return [exports.DirectiveUpdateTag.APPEND, myfx.call(tmplList[i] ?? defaultFn)];
-        };
-    }, [exports.EnterPointType.TEXT, exports.EnterPointType.SLOT]);
-
-    exports.CompElem = CompElem;
-    exports.CssHelper = CssHelper;
-    exports.CssTemplate = CssTemplate;
-    exports.DI_COMMENT_START_NODE_MAP = DI_COMMENT_START_NODE_MAP;
-    exports.Decorator = Decorator;
-    exports.DecoratorWrapper = DecoratorWrapper;
-    exports.DomUtil = DomUtil;
-    exports.Template = Template;
-    exports.TextOrSlotDirectiveExecutorMap = TextOrSlotDirectiveExecutorMap;
-    exports.UpdatePoint = UpdatePoint;
-    exports._getObservedAttrs = _getObservedAttrs;
-    exports._getSuper = _getSuper;
-    exports._toUpdatePath = _toUpdatePath;
-    exports.bind = bind;
-    exports.buildHTML = buildHTML;
-    exports.classes = classes;
-    exports.computed = computed;
-    exports.createRef = createRef;
-    exports.css = css;
-    exports.debounced = debounced;
-    exports.decorator = decorator;
-    exports.decoratorWithNoArgs = decoratorWithNoArgs;
-    exports.directive = directive;
-    exports.event = event;
-    exports.forEach = forEach;
-    exports.getBooleanValue = getBooleanValue;
-    exports.getSlotComponent = getSlotComponent;
-    exports.html = html;
-    exports.htmlC = htmlC;
-    exports.htmlD = htmlD;
-    exports.ifElse = ifElse;
-    exports.ifTrue = ifTrue;
-    exports.isBooleanProp = isBooleanProp;
-    exports.makeState = makeState;
-    exports.model = model;
-    exports.onced = onced;
-    exports.prop = prop;
-    exports.query = query;
-    exports.queryAll = queryAll;
-    exports.show = show;
-    exports.showError = showError;
-    exports.showTagError = showTagError;
-    exports.showTagWarn = showTagWarn;
-    exports.showWarn = showWarn;
-    exports.slot = slot;
-    exports.state = state;
-    exports.styles = styles;
-    exports.sync = sync;
-    exports.tag = tag;
-    exports.throttled = throttled;
-    exports.updateDirective = updateDirective;
-    exports.watch = watch;
-    exports.when = when;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));