compelem 0.20.0-b2 → 0.20.1

package/index.js

@@ -1,4181 +1,7 @@
 /**
-   * compelem v0.20.0-b2.1772633551
+   * compelem v0.20.1.1773752323
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * git+https://github.com/holyhigh2/compelem.git
    */
-  import myfx, { concat, toPath, some, isString, isUndefined, isBlank, closest, defaults, isLowerCaseChar, merge, each, kebabCase, has, toArray, set, get, includes, find, debounce, throttle, once, remove, map, size, isSymbol, isFunction, isArray, isObject, eachRight, slice, flatMap, test, assign, first, walkTree, isEmpty, filter, camelCase, isNull, startsWith, isNil, bind as bind$1, isDefined, trim, isBoolean, parseJSON, cloneDeep, keys, groupBy, last, reject, toString, reduce, compact, initial, except, join, split, isEqual, replace, replaceAll, snakeCase, isMatch, clone, findIndex, call } from 'myfx';
-
-/**
- * 样式模板
- * @author holyhigh2
- */
-class CssTemplate {
-    strings;
-    vars;
-    constructor(strings, vars) {
-        this.strings = 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 toPath(varPath).join("-");
-}
-//获取父类构造
-function _getSuper(cls) {
-    return Object.getPrototypeOf(cls);
-}
-function isBooleanProp(type) {
-    return type === Boolean || some(type, t => t === Boolean);
-}
-//返回boolean值或非boolean值
-function getBooleanValue(v) {
-    let val = v;
-    if (isString(v) && /(?:^true$)|(?:^false$)/.test(val)) {
-        val = val === 'true' ? true : false;
-    }
-    else if (isUndefined(val) || 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 = 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 = defaults(descriptor, options);
-        descriptor = undefined;
-    }
-    defineProp(target, propertyKey, options, descriptor);
-}
-function defineProp(target, propertyKey, options, descriptor) {
-    if (!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) {
-            merge(mixinProps, DefinitionPropMap.get(parentCtor.name) ?? {});
-        }
-        attrSet = new Set();
-        each(mixinProps, (v, k) => {
-            if (v.attribute) {
-                let kbb = 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 = kebabCase(propertyKey);
-        attrSet?.add(kbb);
-    }
-    //observeAttrs
-    if (!has(target.constructor, 'observedAttributes')) {
-        target.constructor.observedAttributes = [];
-    }
-    if (attrSet)
-        target.constructor.observedAttributes = toArray(attrSet);
-    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 = includes(parts, 'child');
-    let attr = includes(parts, 'attr');
-    let char = includes(parts, 'char');
-    let tree = 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 = get(e.composedPath(), 0, e.target);
-    AllOutsideDownEls.forEach(([node, cbk]) => {
-        if (!node.contains(t) && !node.contains(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 = get(e.composedPath(), 0, e.target);
-    AllOutsideClickEls.forEach(([node, cbk]) => {
-        if (!node.contains(t) && !node.contains(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 = get(e.composedPath(), 0, e.target);
-    AllOutsideDblClickEls.forEach(([node, cbk]) => {
-        if (!node.contains(t) && !node.contains(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.remove(AllOutsideDownEls, el => el[0] === node && el[1] === cbk);
-    };
-}
-function addOutsideClick(node, cbk, component) {
-    AllOutsideClickEls.push([node, cbk]);
-    //record
-    return (remove = false) => {
-        myfx.remove(AllOutsideClickEls, el => el[0] === node && el[1] === cbk);
-    };
-}
-function addOutsideDblClick(node, cbk, component) {
-    AllOutsideDblClickEls.push([node, cbk]);
-    //record
-    return (remove = false) => {
-        myfx.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 = find(parts, x => MODI_EV_DEBOUNCE.test(x))) {
-        let params = modi.split(MODI_PARAM_DIVIDER);
-        c = debounce(c, parseInt(params[1]) || 100);
-    }
-    if (modi = find(parts, x => MODI_EV_THROTTLE.test(x))) {
-        let params = modi.split(MODI_PARAM_DIVIDER);
-        c = throttle(c, parseInt(params[1]) || 100);
-    }
-    if (isOnce) {
-        c = 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 (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_CTRL)[0] && !e.ctrlKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_ALT)[0] && !e.altKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_SHIFT)[0] && !e.shiftKey)
-                return;
-            if (remove(parts, p => p == MODI_EV_KEYBOARD_COMBO_META)[0] && !e.metaKey)
-                return;
-            let checkKeys = map(parts, k => MODI_EV_KEYBOARD_KEY_MAP[k] || k);
-            if (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 (isSymbol(prop))
-                return value;
-            if (isFunction(value))
-                return value;
-            if (prop === 'length' && isArray(target))
-                return value;
-            if (Collector.__collecting) {
-                let supPath = OBJECT_VAR_PATH.has(receiver) ? 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 (isObject(value) && !isFunction(value) && !(value instanceof Node) && !Object.isFrozen(value)) {
-                reactiveVal = reactive(value, context);
-                let supPath = OBJECT_VAR_PATH.has(receiver) ? 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 = 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);
-            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 = size(path);
-    eachRight(path, (p) => {
-        let varPath = 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 = flatMap(options.css, c => {
-            if (isString(c)) {
-                let sheet = new CSSStyleSheet();
-                sheet.replaceSync(c);
-                return sheet;
-            }
-            else if (c instanceof CSSStyleSheet) {
-                return c;
-            }
-            return [];
-        });
-        //todo...
-        options.global;
-        each(options, (v, k) => {
-            if (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 (size(args) === 1) {
-            this.#props = {};
-            assign(this.#props, 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 (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 = 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 = get(this.constructor, "hostStyle");
-        let styleSheet = get(this.constructor, 'hostStyleSheet');
-        if (hostStyle) {
-            if (!styleSheet) {
-                if (isString(hostStyle)) {
-                    styleSheet = new CSSStyleSheet();
-                    styleSheet.replaceSync(hostStyle);
-                }
-                else {
-                    styleSheet = hostStyle;
-                }
-                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 = 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;
-        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 (size(events) > 0) {
-            if (!this.__docoEventMap)
-                this.__docoEventMap = new Map();
-            each(events, ({ name, targetFn, fnName }) => {
-                if (this.__docoEventMap.has(name + "@" + fnName))
-                    return;
-                let eventTarget = targetFn ? targetFn(this) : this;
-                let cbk = get(this, fnName);
-                let handler = cbk ? cbk.bind(this) : cbk;
-                let unbinder = addEvent(name, handler, eventTarget);
-                this.__docoEventMap.set(name + "@" + fnName, unbinder);
-            });
-        }
-    }
-    __unbindEvents() {
-        each(this._eventList, (v) => {
-            let [, , , unbinder] = v;
-            if (unbinder)
-                unbinder();
-            v[3] = null;
-        });
-        let delDecoKeys = [];
-        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();
-        each(this.#rootEvs, (hooks, evName) => {
-            each(hooks, hook => {
-                this.removeEventListener(evName, hook);
-            });
-            this.#rootEvs[evName] = null;
-        });
-        each(this.#nodeEvs, (hooks, evName) => {
-            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 && walkTree(pComp.__updateTree, (up) => {
-                if (up.__destroyed)
-                    return;
-                if (up.node?.deref() === this) {
-                    up.destroy(pComp);
-                    remove(up.parent ? up.parent.children : pComp.__updateTree, c => c === up);
-                }
-            });
-        }
-        //sub scopes
-        each(this.__updateTree, up => up?.destroy(this));
-        //slots
-        each(this.#slotsEl, (slotEl) => {
-            SlotCompMap.delete(slotEl);
-            slotEl.remove();
-        });
-        each(this.#slotNodes, (nodes) => {
-            each(nodes, (node) => node.remove());
-        });
-        each(this.#data.slots, (nodes, k) => {
-            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 = get(this.constructor, "globalStyle");
-        if (!isEmpty(globalTextContent) && isString(globalTextContent) && !get(this.constructor, '_globalRuleInserted')) {
-            CompElem.__l_globalRule.textContent += globalTextContent; //.sheet?.insertRule(globalTextContent, 0)
-            set(this.constructor, '_globalRuleInserted', true);
-        }
-        //component styles
-        let beAttached2 = ComponentStaticStyleMap.get(this);
-        let styleSheets = beAttached2 ?? [];
-        if (!beAttached2) {
-            each(get(this.constructor, "styles"), (st) => {
-                if (isString(st)) {
-                    let sheet = new CSSStyleSheet();
-                    sheet.replaceSync(st);
-                    styleSheets.push(sheet);
-                }
-                else if (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 = {};
-        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 (isObject(v) && !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();
-            each(watchMap, (watchList, k) => {
-                watchList.forEach(v => {
-                    let { source, options, handler } = v;
-                    let fn = handler;
-                    let onceWatch = get(options, "once", false);
-                    if (onceWatch) {
-                        this._watchKeysOnceMap.set(k, false);
-                    }
-                    let deep = 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 = get(options, "immediate", false);
-                    if (!immediate)
-                        return;
-                    let nv = 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();
-            each(computedMap, (getter, propKey) => {
-                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 = 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
-        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 (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 = '';
-        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 = get(this.#slotPropsMap[name], 'props');
-        if (props) {
-            each(this.slots, (nodeAry, k) => {
-                nodeAry.filter(node => node.nodeType === Node.ELEMENT_NODE).forEach((node) => {
-                    if (node instanceof CompElem) {
-                        node._updateProps(props);
-                        return;
-                    }
-                    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 = camelCase(attributeName);
-        let propDef = DefinitionPropMap.get(this.constructor.name)[propName];
-        if (isBooleanProp(propDef.type)) {
-            let v = isNull(newValue) ? false : getBooleanValue(newValue);
-            if (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 = 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 ||
-                (startsWith(wk, fullPath + '.') && !Object.is(get(this._getPrivateData(), wk), get(newValue, wk))) ||
-                (startsWith(fullPath, wk + '.') && this._watchKeysDeep.includes(wk) && !Object.is(get(this._getPrivateData(), wk), get(newValue, wk)))) {
-                concat(toArray(this._watchUpdateMap[wk]), 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 (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();
-        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 = get(fn, 'key');
-            let oldValue = this.#data[k];
-            let newValue = fn.call(this);
-            if (!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 (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 = {};
-        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 = camelCase(name);
-            if (propDefs && !propDefs[camelName]) {
-                filterAttrs[name] = value;
-            }
-        });
-        this.#attrs = this.#attrs ? 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 = kebabCase(key);
-            const hasAttr = this.hasAttribute(kbKey);
-            let propDef = propDefs[key];
-            let isInited = has(parentProps, key);
-            let defaultVal = get(this, key);
-            if (!('_defaultValue' in propDef)) {
-                //在构造结束后
-                propDef._defaultValue = defaultVal;
-                if (!propDef.type) {
-                    if (isUndefined(defaultVal)) {
-                        showTagError(tagName, "Prop '" + key + "' has neither propType nor defaultValue be used for type inference");
-                    }
-                    let type = typeof defaultVal;
-                    if (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 = 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 = get(propDefs, [key, 'getter']);
-            if (getter)
-                getter = bind$1(getter, this);
-            let setter = get(propDefs, [key, 'setter']);
-            if (setter)
-                setter = bind$1(setter, this);
-            if (getter || setter) {
-                Reflect.defineProperty(this.#data, key, {
-                    set: setter || function (v) { },
-                    get: getter
-                });
-            }
-            if (propDef.attribute && isDefined(val) && !isObject(val)) {
-                this.#updateAttribute(propDef, key, val);
-            }
-            this.#data[key] = val;
-            rs[key] = val;
-        }
-        return Object.seal(rs);
-    }
-    #updateAttribute(propDef, key, val) {
-        let k = kebabCase(key);
-        let v = trim(val);
-        if (isBooleanProp(propDef.type)) {
-            v = getBooleanValue(val);
-            if (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 = 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 = isArray(expectType) ? expectType : [expectType];
-        let typeConverter = propDef.converter;
-        let val = newValue;
-        if (!some(expectTypeAry, (et) => et === String) && isString(val) && !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 (isNil(val)) {
-            return val;
-        }
-        let realType = typeof val;
-        let matched = isDefined(val) ? false : true;
-        for (let i = 0; i < expectTypeAry.length; i++) {
-            const et = expectTypeAry[i];
-            if (
-            //base form
-            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)
-            each(stateDefs, (def, key) => {
-                let stateDef = stateDefs[key];
-                let val = get(this, key);
-                if (stateDef) {
-                    let propName = stateDef.prop;
-                    val = propName ? cloneDeep(this.#data[propName]) : 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 = debounce(this.propsReady, 100);
-    //todo 这里需要直接修改prop
-    _updateProps(props) {
-        let propDefs = DefinitionPropMap.get(this.constructor.name);
-        if (!propDefs)
-            return;
-        let need2UpdateAttrs = [];
-        //存在attrs表示已初始化完成
-        each(props, (v, k) => {
-            let ck = camelCase(k);
-            let propDef = propDefs[ck];
-            if (!propDef)
-                return;
-            v = this.#propTypeCheck(propDefs, ck, v);
-            if (propDef.attribute && isDefined(v) && !isObject(v)) {
-                need2UpdateAttrs.push([propDef, ck, v]);
-            }
-            set(this, ck, v);
-        });
-        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 = merge(this.#props || {}, props);
-        this.#attrs = merge(this.#attrs || {}, attrs);
-        each(props, (v, k) => {
-            if (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);
-                        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 (!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 = keys(this.#slotsEl);
-        if (isEmpty(slotKeys))
-            return;
-        const cs = flatMap(this.childNodes, node => {
-            if (node.nodeType === Node.COMMENT_NODE)
-                return [];
-            if (node instanceof HTMLSlotElement)
-                return node.assignedNodes({ flatten: true });
-            return node;
-        });
-        let groups = 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 (isEmpty(groups)) {
-            this.slots = {};
-            return;
-        }
-        each(groups, (nodeAry, k) => {
-            if (!k)
-                return;
-            while (nodeAry.length > 0) {
-                let node = nodeAry[0];
-                if ((node.nodeType === Node.TEXT_NODE && isBlank(node.textContent)) ||
-                    (node instanceof HTMLSlotElement && isEmpty(node.assignedNodes({ flatten: true })))) {
-                    nodeAry.shift();
-                    continue;
-                }
-                break;
-            }
-            while (nodeAry.length > 0) {
-                let node = last(nodeAry);
-                if ((node.nodeType === Node.TEXT_NODE && isBlank(node.textContent)) ||
-                    (node instanceof HTMLSlotElement && isEmpty(node.assignedNodes({ flatten: true })))) {
-                    nodeAry.pop();
-                    continue;
-                }
-                break;
-            }
-        });
-        let rs = {};
-        each(groups, (v, k) => {
-            if (!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, get(slotMap, 'props'));
-        const rc = this._asyncDirectives.get(hook);
-        //todo 如果要做成通用异步指令，元素必须插入到指令挂载的位置，并且slot的插入节点还要去掉注释
-        let nodes = rc?.buildView(hook(get(slotMap, 'props')));
-        let nnodes = reject(toArray(nodes), n => n.nodeType === Node.COMMENT_NODE);
-        if (nnodes) {
-            let slottedNodes = this.#slotNodes[name];
-            if (!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 = camelCase(name);
-            if (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: get(options, "bubbles", false),
-            composed: 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);
-            remove(this.#rootEvs[evName], cbk => cbk === hook);
-        }
-        else {
-            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);
-            remove(this.#nodeEvs[evName], ([cbk]) => cbk === hook);
-        }
-        else {
-            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() {
-        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 = concat(strings);
-        this.vars = vars;
-    }
-    //解析模板中的key
-    getKey() {
-        let vars = this.vars;
-        let k = '';
-        each(this.strings, (str, i) => {
-            if (EXP_KEY.test(str)) {
-                k = 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 = toString(vars[i]);
-                ks.push(k);
-            }
-        }
-        if (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 = 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 = 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 reduce(nodes, (a, v) => a + (v.outerHTML ?? ''), '');
-    }
-    /**
-     * 对var中的Template类型进行合并
-     */
-    flatVars(comp) {
-        let vars = concat(this.vars);
-        let l = this.strings.length - 1;
-        let varIndex = 0;
-        for (let i = 0; i <= l; i++) {
-            let val = 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
- */
-/**
- * 属性定义
- */
-var EnterPointType;
-(function (EnterPointType) {
-    EnterPointType["ATTR"] = "attr";
-    EnterPointType["PROP"] = "prop";
-    EnterPointType["TEXT"] = "text";
-    EnterPointType["CLASS"] = "class";
-    EnterPointType["STYLE"] = "style";
-    EnterPointType["SLOT"] = "slot";
-    EnterPointType["TAG"] = "tag"; //在标签内但不是属性内
-})(EnterPointType || (EnterPointType = {}));
-var DirectiveUpdateTag;
-(function (DirectiveUpdateTag) {
-    DirectiveUpdateTag["NONE"] = "NONE";
-    DirectiveUpdateTag["REMOVE"] = "REMOVE";
-    DirectiveUpdateTag["REPLACE"] = "REPLACE";
-    DirectiveUpdateTag["UPDATE"] = "UPDATE";
-    DirectiveUpdateTag["APPEND"] = "APPEND";
-})(DirectiveUpdateTag || (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 = 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 = [EnterPointType.TEXT, EnterPointType.SLOT].includes(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 === DirectiveUpdateTag.NONE)
-        return;
-    let startNode = DI_COMMENT_START_NODE_MAP.get(pointNode);
-    let nodes = DomUtil.getNodes(startNode, pointNode);
-    let updatePoints = up.children;
-    if (tag === 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 === 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 = toArray(nnodes);
-        let fragment = document.createDocumentFragment();
-        fragment.append(...newNodes);
-        pointNode.parentNode.insertBefore(fragment, pointNode);
-    }
-    else if (tag === DirectiveUpdateTag.UPDATE) {
-        let newKeys = {};
-        let nodesToUpdate;
-        //原节点顺序
-        let oldSeq = [];
-        let newSeq = [];
-        if (!tmpl) {
-            tmpl = new Template([], []);
-        }
-        if (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 = filter(compact(nodes), n => n.nodeType === Node.ELEMENT_NODE);
-        nodesToUpdate = filter(compact(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 (isNil(k))
-                continue;
-            if (oldNodeMap[k]) {
-                dupKey = k;
-                break;
-            }
-            oldNodeMap[k] = treeNode;
-            oldSeq.push(k);
-            keyQ[k] = true;
-        }
-        if (dupKey) {
-            showError(`${camelCase(pointNode.nodeValue)} - duplicate key '${dupKey}'`);
-            return;
-        }
-        let updateQ = newKeys;
-        //compare
-        let adds = [];
-        let dels = [];
-        //计算del
-        each(keyQ, (v, k) => {
-            if (!updateQ[k]) {
-                dels.push(k);
-                delete keyQ[k];
-                remove(oldSeq, x => x === k);
-            }
-        });
-        //move
-        let moved = false;
-        if (!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 = 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 = last(moveGroup).targetId;
-                        if (moveGroup[moveGroup.length - 2].nodeId === lastTId) {
-                            moveGroup = 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 = last(vals).moveIndex;
-                    if (Math.abs(vals[vals.length - 2].moveIndex - lastGroupIndex) === 1) {
-                        vals = 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 = 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(...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 = [];
-            each(tmpl.vars, v => {
-                tVarAry.push(...v.vars);
-                tStrAry.push(...map(v.vars, v => '1'));
-            });
-            tStrAry.push('1');
-            tmpl = new Template(tStrAry, tVarAry);
-        }
-        //移动顺序
-        if (moved || dels.length > 0 || addGroup) {
-            const upGroup = 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 = 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 (includes(scopes, EnterPointType.TEXT) || includes(scopes, EnterPointType.SLOT))
-            TextOrSlotDirectiveExecutorMap.set(name, executor);
-        set(executor, '__scope', scopes[0]);
-        return [sym, args, executor, (scopeType) => {
-                if (!isEmpty(scopes) && !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 = 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 = 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 = 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 = 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 (!isString(html))
-        return html + '';
-    //attr convert
-    html = html.replace(EXP_ATTR_CONVERT, (a, b, c) => {
-        return ` ${b ?? ''}${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 = concat(tmpl.vars);
-    let l = tmpl.strings.length - 1;
-    for (let i = 0; i <= l; i++) {
-        let val = 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 = 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 (startsWith(name, PLACEHOLDER_PREFFIX)) {
-                    let val = vars[varIndex];
-                    //support directive only for now
-                    if (isArray(val) && isSymbol(val[0])) {
-                        let [, args, executor, checker, varChain] = val;
-                        checker(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 (!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 (isArray(val) && isSymbol(val[0])) {
-                            let [, args, executor, checker, varChain] = val;
-                            checker(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 = camelCase(refName);
-                                    break;
-                                case 'kebab':
-                                    refName = kebabCase(refName);
-                                    break;
-                                case 'snake':
-                                    refName = 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 = 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 (isArray(val) && isSymbol(val[0])) {
-                            let type = EnterPointType.ATTR;
-                            if (name === "class") {
-                                type = EnterPointType.CLASS;
-                            }
-                            else if (name === "style") {
-                                type = EnterPointType.STYLE;
-                            }
-                            let [, ags, exec, checker] = val;
-                            {
-                                checker(type);
-                            }
-                            po.isDirective = true;
-                            po.attrName = name;
-                            args = ags;
-                            executor = exec;
-                            val = '';
-                        }
-                        value = replace(value, PLACEHOLDER_EXP, val);
-                        //回填
-                        attr.value = value;
-                        if (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 (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 (isArray(val) && 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 ? EnterPointType.SLOT : 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 = 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 (isBlank(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 = split(varIndex, PATH_SEPARATOR);
-        for (let l = 0; l < indexSegs.length; l++) {
-            const seg = indexSegs[l];
-            newValue = get(newValue, seg);
-            if (newValue && newValue.vars && i < indexSegs.length - 1) {
-                newValue = newValue.vars;
-            }
-        }
-        //check
-        if (!isObject(oldValue) && oldValue === newValue)
-            continue;
-        let elNode = node;
-        if (up.isDirective) {
-            //指令
-            let [, oldArgs, executor, , varChain] = up.value;
-            if (!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);
-            set(elNode, up.attrName, !!newValue);
-        }
-        else if (up.isProp) {
-            //子组件属性
-            if (!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 (!isEqual(oldValue, newValue)) {
-                switch (up.attrName) {
-                    case 'value':
-                        if (node instanceof HTMLInputElement) {
-                            node.value = newValue;
-                            break;
-                        }
-                    default:
-                        node.setAttribute(up.attrName, replace(up.attrTmpl, PLACEHOLDER_EXP, newValue + ''));
-                }
-            }
-        }
-        else if (up.isText) {
-            let textNode = up.node;
-            textNode.deref().textContent = 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 = [];
-        each(tmpl.vars, v => {
-            tVarAry.push(...v.vars);
-            tStrAry.push(...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(isString(strings) ? [strings] : strings, vars);
-}
-/**
- * 标签函数，用于构建样式
- * @param strings
- * @param vars
- */
-function css(strings, ...vars) {
-    return new CssTemplate(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();
-}
-
-//装饰器类型
-var DecoratorType;
-(function (DecoratorType) {
-    DecoratorType["CLASS"] = "class";
-    DecoratorType["FIELD"] = "field";
-    DecoratorType["METHOD"] = "method";
-})(DecoratorType || (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 = 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 (isObject(descriptor) && isDefined(get(descriptor, 'configurable'))) {
-            decoType = DecoratorType.METHOD;
-        }
-        else if (isUndefined(this.metadata[1])) {
-            decoType = DecoratorType.FIELD;
-        }
-        if (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 ? 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 ? 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 = get(component, fieldName);
-        set(component, fieldName, debounce(fn, this.wait, this.immediate));
-        set(component, fieldName + '_$__', fn);
-    }
-    beforeDestroy(component, fieldName) {
-        set(component, fieldName, null);
-        set(component, fieldName + '_$__', null);
-    }
-    get targets() {
-        return [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 = 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 = bind$1(get(component, fieldName), component);
-        set(component, fieldName, once(fn));
-        set(component, fieldName + '_$__', fn);
-    }
-    beforeDestroy(component, fieldName) {
-        set(component, fieldName, null);
-        set(component, fieldName + '_$__', null);
-    }
-    get targets() {
-        return [DecoratorType.METHOD];
-    }
-}
-const onced = decorator(OncedDecorator);
-
-/**
- * 缓存策略
- */
-var QueryCache;
-(function (QueryCache) {
-    QueryCache["ONCE"] = "once";
-})(QueryCache || (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 [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 === 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 === 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) {
-            merge(mixinStates, DefinitionStateMap.get(parentCtor.name) ?? {});
-        }
-        DefinitionStateMap.set(target.constructor.name, mixinStates);
-    }
-    options.shallow = options.shallow || false;
-    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 = get(component, fieldName);
-        set(component, fieldName, throttle(fn, this.wait));
-        set(component, fieldName + '_$__', fn);
-    }
-    beforeDestroy(component, fieldName) {
-        set(component, fieldName, null);
-        set(component, fieldName + '_$__', null);
-    }
-    get targets() {
-        return [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);
-                    each(parentMap, (list, k) => {
-                        watchMap[k] = list;
-                    });
-                }
-            }
-            DefinitionWatchMap.set(target.constructor.name, watchMap);
-        }
-        const sources = isArray(source) ? source : [source];
-        sources.forEach(src => {
-            let srcList = DefinitionWatchMap.get(target.constructor.name)[src];
-            if (!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) {
-            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);
-            each(obj, (v, k) => {
-                if (Ignores.includes(k))
-                    return;
-                let ck = camelCase(k);
-                let propDef = propDefs ? propDefs[ck] : undefined;
-                if (propDef) {
-                    props[k] = v;
-                }
-                else {
-                    attrs[k] = v + '';
-                }
-            });
-            el._initProps(props, attrs);
-        }
-        else {
-            each(obj, (v, k) => {
-                el.setAttribute(k, v);
-            });
-        }
-    };
-}, [EnterPointType.TAG]);
-
-const ClassLastMap = new WeakMap();
-/**
- * 根据变量内容自动插入class，仅能用于class属性
- * @param styles 对象/数组/字符串
- */
-const classes = directive(function Classes(clazz) {
-    return (pointNode, [clazz], oldArgs, { renderComponent }) => {
-        let rs = [];
-        if (isArray(clazz)) {
-            rs = compact(clazz);
-        }
-        else if (isObject(clazz)) {
-            rs = flatMap(clazz, (v, k) => v ? k : []);
-        }
-        else if (isString(clazz)) {
-            rs = clazz.split(' ');
-        }
-        if (rs.length < 1 && !oldArgs)
-            return;
-        let el = pointNode;
-        if (ClassLastMap.get(el) && ClassLastMap.get(el).length === rs.length && isMatch(ClassLastMap.get(el), rs))
-            return;
-        let lastCls = ClassLastMap.get(el);
-        each(lastCls, (cls) => {
-            el.classList.remove(cls);
-        });
-        each(rs, cls => {
-            el.classList.add(cls);
-        });
-        lastCls = concat(rs);
-        ClassLastMap.set(el, lastCls);
-    };
-}, [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 (isEmpty(nodes) && (!newArgs || isEmpty(newArgs[0])))
-                return [DirectiveUpdateTag.NONE, lastRenderTmpl];
-            if (lastAry && isMatch(lastAry, newArgs[0]) && lastAry.length === newArgs[0].length)
-                return [DirectiveUpdateTag.NONE, lastRenderTmpl];
-        }
-        LastValueMap.set(el, clone(newArgs[0]));
-        if (oldArgs) {
-            return [DirectiveUpdateTag.UPDATE, lastRenderTmpl];
-        }
-        return [DirectiveUpdateTag.APPEND, lastRenderTmpl];
-    };
-}, [EnterPointType.TEXT, EnterPointType.SLOT]);
-function comboTmpl(value, cbk, el) {
-    //1. 产生模板
-    let tmpls = 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 = 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 = last(combStrings);
-        if (lastVar && tmplStrs.length > 0) {
-            combStrings[combStrings.length - 1] = 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 (isNil(newArgs[0]))
-            return;
-        compiler.innerHTML = convertHTML(newArgs[0]);
-        pointNode.after(...compiler.childNodes);
-    };
-}, [EnterPointType.TEXT, 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 (isNil(newArgs[0]))
-            return;
-        pointNode.innerHTML = convertHTML(newArgs[0]);
-    };
-}, [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 [DirectiveUpdateTag.NONE, tmpl.call(renderComponent, condi)];
-            }
-            let tmpl = condi ? ifTmpl : elseTmpl;
-            LastTmplMap.set(el, tmpl);
-            return [DirectiveUpdateTag.REPLACE, tmpl.call(renderComponent, condi)];
-        }
-        else {
-            let tmpl = condi ? ifTmpl : elseTmpl;
-            LastTmplMap.set(el, tmpl);
-            return [DirectiveUpdateTag.APPEND, tmpl.call(renderComponent, condi)];
-        }
-    };
-}, [EnterPointType.TEXT, 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 [DirectiveUpdateTag.NONE, condi ? render() : html ``];
-            if (condi) {
-                return [DirectiveUpdateTag.REPLACE, condi ? render() : html ``];
-            }
-            return [DirectiveUpdateTag.REMOVE];
-        }
-        else {
-            return [DirectiveUpdateTag.APPEND, condi ? render() : html ``];
-        }
-    };
-}, [EnterPointType.TEXT, EnterPointType.SLOT]);
-
-var ModelTriggerType;
-(function (ModelTriggerType) {
-    ModelTriggerType["CHANGE"] = "change";
-    ModelTriggerType["INPUT"] = "input";
-})(ModelTriggerType || (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 = get(node, updateProp);
-            if (!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 = 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 + '');
-                        set(node, updateProp, newValue);
-                        break;
-                    default:
-                        node.setAttribute(updateProp, newValue + '');
-                        break;
-                }
-            }
-            return;
-        }
-        let path;
-        if (isString(modelProp)) {
-            path = toPath(modelProp)[0];
-        }
-        else {
-            path = last(varChain);
-        }
-        const rootPath = 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 (!isObject(modelValue) && !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 && get(ctx.wrapperComponent, rootPath) === get(ctx, pathFromWrapperComponent)) {
-                        ctx = ctx.wrapperComponent || ctx;
-                    }
-                    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;
-                    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;
-                    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 && get(ctx.wrapperComponent, rootPath) === get(ctx, pathFromWrapperComponent)) {
-                        ctx = ctx.wrapperComponent || ctx;
-                    }
-                    set(ctx, path, t.value);
-                }, node]);
-        }
-    };
-}, [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);
-        }
-    };
-}, [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);
-    };
-}, [EnterPointType.SLOT]);
-
-/**
- * Css 辅助类
- */
-class CssHelper {
-    /**
-     * 用于转换style对象为标准style字符串，会自动转换对象key为短横线格式
-     * @param styles 样式对象
-     * @returns
-     */
-    static getCssText(styles, important = false) {
-        if (isString(styles))
-            return styles;
-        return join(map(styles, (v, k) => {
-            if (k.startsWith('--'))
-                return k + ":" + v + (important ? ' !important' : '');
-            return kebabCase(k) + ":" + v + (important ? ' !important' : '');
-        }), ';') + ';';
-    }
-    /**
-     * 设置样式
-     * @param styles 样式字符串或样式对象
-     * @param node HTML元素
-     * @returns 每个样式的旧值map
-     */
-    static setStyle(styles, node) {
-        if (isString(styles) && !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 = reduce(newArgs, (acc, v) => acc + CssHelper.getCssText(v), '');
-        let sKeys = compact(cssText.split(';').map(str => str.split(':')[0]));
-        let eKeys = compact(el.style.cssText.split(';'));
-        let ePairs = reject(eKeys, (str => sKeys.some(key => str.trim().startsWith(key))));
-        el.style.cssText = cssText + ePairs.join(';');
-    };
-}, [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 (!isEqual(newArgs, oldArgs)) {
-                targetComponent._updateProps({ [attrName]: newArgs[0] });
-            }
-            return;
-        }
-        let modelPath = last(varChain);
-        targetComponent._initProps({ [attrName]: newArgs[0] });
-        targetComponent.addEventListener('update:' + attrName, (e) => {
-            set(renderComponent, modelPath, e.detail.value);
-        });
-    };
-}, [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 = [];
-        each(cases, (v, k) => {
-            if (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 = findIndex(conditionList, c => {
-            if (isFunction(c)) {
-                return c(value);
-            }
-            else {
-                return c == value;
-            }
-        });
-        if (oldArgs)
-            return [DirectiveUpdateTag.REPLACE, call(tmplList[i] ?? defaultFn)];
-        return [DirectiveUpdateTag.APPEND, call(tmplList[i] ?? defaultFn)];
-    };
-}, [EnterPointType.TEXT, EnterPointType.SLOT]);
-
-export { CompElem, CssHelper, CssTemplate, DI_COMMENT_START_NODE_MAP, Decorator, DecoratorType, DecoratorWrapper, DirectiveUpdateTag, DomUtil, EnterPointType, ModelTriggerType, QueryCache, Template, TextOrSlotDirectiveExecutorMap, UpdatePoint, _getObservedAttrs, _getSuper, _toUpdatePath, bind, buildHTML, classes, computed, createRef, css, debounced, decorator, decoratorWithNoArgs, directive, event, forEach, getBooleanValue, getSlotComponent, html, htmlC, htmlD, ifElse, ifTrue, isBooleanProp, makeState, model, onced, prop, query, queryAll, show, showError, showTagError, showTagWarn, showWarn, slot, state, styles, sync, tag, throttled, updateDirective, watch, when };
+  import t,{toPath as e,some as s,isString as r,isUndefined as n,isBlank as o,closest as i,isObject as a,isFunction as l,startsWith as c,get as u,concat as h,toArray as d,isSymbol as p,isArray as f,size as g,eachRight as _,slice as m,defaults as v,isLowerCaseChar as y,merge as E,each as w,kebabCase as b,has as S,set as N,includes as T,find as C,debounce as k,throttle as M,once as P,remove as A,map as x,flatMap as R,test as D,assign as O,first as L,walkTree as I,isEmpty as V,filter as W,isNil as H,camelCase as U,isNull as B,isDefined as $,trim as j,isBoolean as F,parseJSON as z,cloneDeep as G,keys as X,groupBy as K,last as q,reject as Q,toString as Z,reduce as Y,compact as J,initial as tt,except as et,join as st,split as rt,isEqual as nt,replace as ot,replaceAll as it,snakeCase as at,bind as lt,isMatch as ct,clone as ut,findIndex as ht,call as dt}from"myfx";const pt="default",ft=/\s+\.?key\s*=/;var gt,_t;!function(t){t[t.RENDER=1]="RENDER",t[t.COMPUTED=2]="COMPUTED",t[t.DIRECTIVE=3]="DIRECTIVE"}(gt||(gt={})),function(t){t.Prod="prod",t.Dev="dev"}(_t||(_t={}));const mt=new Map,vt={},yt=new WeakMap,Et=new WeakMap,wt=new WeakMap,bt=new Map,St=new Map,Nt=new WeakMap,Tt=new WeakMap,Ct=new WeakMap,kt=new WeakMap,Mt=new WeakMap,Pt=new WeakMap,At=new WeakMap,xt=new WeakMap,Rt=new WeakMap,Dt=new WeakMap,Ot=new WeakMap,Lt=new WeakMap,It="__data_";function Vt(t){console.error("[CompElem]",t)}function Wt(t,e){console.error(`[CompElem <${t}>]`,e)}function Ht(...t){console.warn("[CompElem]",...t)}function Ut(t,e){console.warn(`[CompElem <${t}>]`,e)}function Bt(t){return e(t).join("-")}function $t(t){return Object.getPrototypeOf(t)}function jt(t){return t===Boolean||s(t,(t=>t===Boolean))}function Ft(t){let e=t;return r(t)&&/(?:^true$)|(?:^false$)/.test(e)?e="true"===e:(n(e)||o(e))&&(e=!0),e}const zt={getNodes(t,e){let s=t.nextSibling;if(!e)return[s];let r=[];for(;s&&s!==e;)r.push(s),s=s?.nextSibling;return r},insertBefore:function(t,e){if(!t.parentNode)return;let s=document.createDocumentFragment();s.append(...e),t.parentNode.insertBefore(s,t)},remove:function(t,e){if(t===e)return void t?.parentNode?.removeChild(t);let s=t.nextSibling;for(;s&&s!==e;)s?.parentNode?.removeChild(s),s=t.nextSibling},clear(t,e){if(!t)return;let s,r=document.createNodeIterator(t,NodeFilter.SHOW_COMMENT);for(r=document.createNodeIterator(t,NodeFilter.SHOW_COMMENT|NodeFilter.SHOW_ELEMENT);s=r.nextNode();)t!==s&&(s instanceof Comment||s instanceof Le&&s.destroy())}};function Gt(t,e){let s=i(t,(t=>t.host&&t.host instanceof Le),"parentNode");if(!s||s.host!==e)return s?s.host:void 0}function Xt(t,e,s){let r=s,n=t?t.call(r):Reflect.get(r[It],e);if(Yt.__collecting&&Yt.__varPathList.push(e),ee.has(n)){let t=re.get(n);return t||(t=new Set,re.set(n,t)),t.add(r.__thisRef),ee.get(n)}if(a(n)&&!l(n)&&!(n instanceof Node)&&!Object.isFrozen(n)){let t=xt.get(r.constructor),s=t?.has(e);n=s||"slots"===e?n:ne(n,r,e)}return n}function Kt(t,e,s){let r=s;if(!r.__inited)return void Reflect.set(r[It],t,e);let n=r[It][t],o=Rt.get(r.constructor),i=o?.get(t);if(i){if(!i.call(r,e,n,[t],e,n))return!0}else if(Object.is(n,e))return!0;qt(r,e,n,t),Qt(r,t),Zt(r,t),Reflect.set(r[It],t,e),r._notify(n,[t]);let a=At.get(r.constructor);a?.has(t)&&r.emit("update:"+t,{value:e})}function qt(t,e,s,r,n,o){let i=$t(t.constructor),a=Ct.get(t.constructor)??Ct.get(i),l=Tt.get(t.constructor)??Tt.get(i),p=Mt.get(t.constructor)??Mt.get(i),f=kt.get(t.constructor)??kt.get(i),g=Nt.get(t.constructor)??Nt.get(i);a?.forEach((i=>{(r===i||c(i,r+".")&&!Object.is(u(t._getPrivateData(),i),u(e,i))||c(r,i+".")&&l?.includes(i)&&!Object.is(u(t._getPrivateData(),i),u(e,i)))&&h(d(f[i]),d(p[i])).forEach((a=>{a&&!0!==g.get(i)&&(t._watchUpdateArgsInNextTick.set(a,{newValue:e,oldValue:s,chain:r.split("."),rootObjNew:n,rootObjOld:o,fullMatch:i===r}),t._watchUpdateSetInNextTick.add(a),g.has(i)&&g.set(i,!0))}))}))}function Qt(t,e){let s=Dt.get(t.constructor);s?.has(e)&&s.get(e)?.forEach((e=>{t._computedUpdateSetInNextTick.add(e)}))}function Zt(t,e){let s=Ot.get(t.constructor);if(!s)return;let r=e.split("."),n="";r.forEach((e=>{n=n?n+"."+e:e,s.has(n)&&(t._cssUpdateInNextTick=!0)}))}const Yt={popDirectiveQ(){return this.__varPathList.reduceRight(((t,e)=>(t.includes(e)||t.unshift(e),t)),[])},start(){this.__collecting=!0,this.__varPathList=[]},end(t,e){t&&e&&t._regSubViewDeps(Yt.popVarPathList(),e),this.__collecting=!1},popVarPathList(){let t=Array.from(new Set(this.__varPathList));return this.__varPathList=[],t},__varPathList:[],__collecting:!1},Jt=new WeakMap,te=new WeakMap,ee=new WeakMap,se=new WeakMap,re=new WeakMap;function ne(t,e,s){if(ee.has(t))return ee.get(t);if(se.has(t)){if(s){let r=Jt.get(e);r||(r=new WeakMap,Jt.set(e,r)),r.set(t,s);let n=re.get(t);n||(n=new Set,re.set(t,n)),n.values().some((t=>t.deref()===e))||n.add(new WeakRef(e))}return t}const r=new Proxy(t,{get(t,s,r){if(!s)return;const n=Reflect.get(t,s,r);if(p(s))return n;if(l(n))return n;if("length"===s&&f(t))return n;if(Yt.__collecting){let t=te.has(r)?h(te.get(r)):[];t.push(s);let e=t.join(".");Yt.__varPathList.push(e)}if(ee.has(n))return ee.get(n);let o=n;if(a(n)&&!l(n)&&!(n instanceof Node)&&!Object.isFrozen(n)){o=ne(n,e);let t=te.has(r)?h(te.get(r)):[];t.push(s),te.set(o,t),ee.set(n,o)}return o},set(t,s,r,n){if(!s)return!1;let o=t[s],i=te.get(n)??[],a=h(i,[s]),l=Rt.get(e.constructor),c=l?.get(a[0]),u=a.length>1,d=r,p=o;if(u&&(p=d=e._getPrivateData()[a[0]]),c){if(!c.call(e,d,p,a,r,o))return!0}else if(Object.is(o,r))return!0;let f=r,g=Reflect.set(t,s,f),_=re.get(n),m=a.join(".");return qt(e,f,o,m,d,p),Qt(e,m),Zt(e,m),oe(e,p,a),_?.forEach((t=>{let e=t.deref();if(!e)return;let s=e._wrapperProp[a[0]],r=a.join(".");r=r.replace(a[0],s),qt(e,f,o,r),Qt(e,r),Zt(e,r),oe(e,p,r.split("."))})),g}});if(te.has(r)||te.set(r,s?[s]:[]),ee.set(t,r),s&&(se.set(r,e),!Jt.has(e))){let t=new WeakMap;t.set(r,s),Jt.set(e,t)}return r}function oe(t,e,s,r,n){let o=g(s);_(s,(r=>{let n=m(s,0,o--);t._notify(e,n)}))}const ie=new Map;class ae{static nextSet=new Set;static nextPending=!1;static next;static flush(){ae.nextPending=!1;let t=Array.from(ae.nextSet);ae.nextSet.clear(),ie.clear(),t.forEach((t=>t())),t=null}static pushNext(t){ae.nextSet.add(t),ae.nextPending||(ae.nextPending=!0,ae.next())}}function le(t){if(1===arguments.length)return(e,s,r)=>{t.required=t.required||!1,t.attribute=!1!==t.attribute,ce(e,s,t,r)};let e=arguments[0],s=arguments[1],r=arguments[2];t={type:void 0,required:!1,attribute:!0},r&&"function"==typeof r.type&&(t=v(r,t),r=void 0),ce(e,s,t,r)}function ce(t,e,s,r){let n;if(y(e[0])||Vt(`Prop '${e}' must be in CamelCase`),!wt.has(t.constructor)){const e={};let s=t.constructor;for(;(s=$t(s))!==Le;)E(e,wt.get(s)??{});n=new Set,w(e,((t,e)=>{if(t.attribute){let t=b(e);n?.add(t)}})),St.set(t.constructor,n),wt.set(t.constructor,e)}if(r&&(r.get&&(s.getter=r.get),r.set&&(s.setter=r.set)),s.attribute){n||(n=St.get(t.constructor));let s=b(e);n?.add(s)}if(S(t.constructor,"observedAttributes")||(t.constructor.observedAttributes=[]),n&&(t.constructor.observedAttributes=d(n)),N(wt.get(t.constructor),e,s),s.hasChanged){let r=Rt.get(t.constructor);r||(r=new Map,Rt.set(t.constructor,r)),r.set(e,s.hasChanged)}if(s.sync){let s=At.get(t.constructor);s||(s=new Set,At.set(t.constructor,s)),s.add(e)}Reflect.defineProperty(t,e,{get(){return Xt(r?.get,e,this)},set(t){r?.set?r.set(t):Kt(e,t,this)}})}(()=>{const t=Promise.resolve(),e=ae.flush;ae.next=()=>{t.then(e)}})();const ue=new Set;function he(t){return St.get(t)??ue}const de=["resize","outside","mutate"],pe=new WeakMap,fe=[],ge=[],_e=[],me=new WeakSet,ve=new ResizeObserver((t=>{for(const e of t){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize,s=Array.isArray(e.borderBoxSize)?e.borderBoxSize[0]:e.borderBoxSize;if(!me.has(e.target)){me.add(e.target);continue}let r=pe.get(e.target);r&&r({target:e.target,contentBoxSize:t,borderBoxSize:s,type:"resize"})}}));var ye;!function(t){t.Child="child",t.Tree="tree",t.Attr="attr",t.Char="char"}(ye||(ye={}));const Ee=new WeakMap,we=new MutationObserver((t=>{for(let e=0;e<t.length;e++){const s=t[e];let r=Ee.get(s.target);if(!r)return;let n={target:s.target},o=null;switch(s.type){case"subtree":n.type=ye.Tree,o=r[ye.Tree];break;case"childList":n.type=ye.Child,n.addedNodes=s.addedNodes,n.removedNodes=s.removedNodes,o=r[ye.Child];break;case"attributes":n.type=ye.Attr,n.attributeName=s.attributeName,n.oldValue=s.oldValue,o=r[ye.Attr];break;case"characterData":n.type=ye.Char,n.oldValue=s.oldValue,o=r[ye.Char]}o&&(n.type="mutate",o(n))}}));function be(e,s,r,n,o){if("resize"===e)return function(t,e){if(pe.has(t))return;pe.set(t,e),ve.observe(t);let s=ve;return(e=!1)=>{s.unobserve(t),pe.delete(t),e&&(s=t=null)}}(s,r);if("outside"===e)switch(n[0]){case"mousedown":return function(e,s){return fe.push([e,s]),(r=!1)=>{t.remove(fe,(t=>t[0]===e&&t[1]===s))}}(s,r);case"dblclick":return function(e,s){return _e.push([e,s]),(r=!1)=>{t.remove(_e,(t=>t[0]===e&&t[1]===s))}}(s,r);default:return function(e,s){return ge.push([e,s]),(r=!1)=>{t.remove(ge,(t=>t[0]===e&&t[1]===s))}}(s,r)}else if("mutate"===e)return function(t,e,s){let r=T(s,"child"),n=T(s,"attr"),o=T(s,"char"),i=T(s,"tree"),a=Ee.get(t);if(!a)return a={},Ee.set(t,a),r&&(a[ye.Child]=e),n&&(a[ye.Attr]=e),o&&(a[ye.Char]=e),i&&(a[ye.Tree]=e),we.observe(t,{childList:r,attributes:n,characterData:o,subtree:i}),(e=!1)=>{Ee.delete(t),e&&(t=null)}}(s,r,n)}document.addEventListener("mousedown",(t=>{let e=u(t.composedPath(),0,t.target);fe.forEach((([s,r])=>{s.contains(e)||s.contains(i(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)||r({type:"outside",target:s,modifier:"mousedown",event:t})}))}),!1),document.addEventListener("click",(t=>{let e=u(t.composedPath(),0,t.target);ge.forEach((([s,r])=>{s.contains(e)||s.contains(i(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)||r({type:"outside",target:s,modifier:"click",event:t})}))}),!1),document.addEventListener("dblclick",(t=>{let e=u(t.composedPath(),0,t.target);_e.forEach((([s,r])=>{s.contains(e)||s.contains(i(e,(t=>t instanceof ShadowRoot),"parentNode")?.host)||r({type:"outside",target:s,modifier:"dblclick",event:t})}))}),!1);const Se=/,|^(debounce:.+)|(debounce$)/,Ne=/,|^(throttle:.+)|(throttle$)/,Te={esc:"escape"},Ce=()=>{};function ke(t,e,s,r){let n,o=t.split("."),i=o.shift(),a=o.includes("once"),l=e??Ce;if(n=C(o,(t=>Se.test(t)))){let t=n.split(":");l=k(l,parseInt(t[1])||100)}if(n=C(o,(t=>Ne.test(t)))){let t=n.split(":");l=M(l,parseInt(t[1])||100)}if(a&&(l=P(l)),s instanceof Le&&!o.includes("native"))return s._addEvent(i,e);if(function(t){return de.includes(t)}(i))return be(i,s,l,o);let c=t=>{if(o.includes("prevent")&&t.preventDefault(),o.includes("stop")&&t.stopPropagation(),!o.includes("self")||t.target===t.currentTarget){if(t instanceof MouseEvent){if(o.includes("left")&&0!=t.button)return;if(o.includes("right")&&2!=t.button)return;if(o.includes("middle")&&1!=t.button)return}else if(t instanceof KeyboardEvent){if(A(o,(t=>"ctrl"==t))[0]&&!t.ctrlKey)return;if(A(o,(t=>"alt"==t))[0]&&!t.altKey)return;if(A(o,(t=>"shift"==t))[0]&&!t.shiftKey)return;if(A(o,(t=>"meta"==t))[0]&&!t.metaKey)return;let e=x(o,(t=>Te[t]||t));if(g(e)>0&&!e.includes(t.key.toLowerCase()))return}l(t)}},u={capture:o.includes("capture")||!1,passive:o.includes("passive")||!1};return s.addEventListener(i,c,u),(t=!1)=>{s.removeEventListener(i,c,u),t&&(s=null)}}const Me={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,undefined:Object},Pe=new WeakMap;let Ae=[],xe=0;const Re=new WeakMap,De={},Oe="slots";class Le extends HTMLElement{static __l_globalRule=document.createElement("style");static defaults(t){Ae=R(t.css,(t=>{if(r(t)){let e=new CSSStyleSheet;return e.replaceSync(t),e}return t instanceof CSSStyleSheet?t:[]})),t.global,w(t,((t,e)=>{D(e[0],/[A-Z]/)}))}#t;#e={};__data_={};#s={};#r;__updateTree;_eventBindList;_listerners={};__docoEventMap;__updateSubViewDeps;_cssUpdateInNextTick=!1;_cssVarOldValueMap;__cssSheets;_watchUpdateSetInNextTick;_watchUpdateArgsInNextTick;_computedUpdateSetInNextTick;get[Symbol.toStringTag](){return this.constructor.name}get cid(){return this.#t}get attrs(){return this.#n}get props(){return this.#o}get renderRoot(){return this.#i?.deref()}get renderRoots(){return this.#a.flatMap((t=>t.deref()??[]))}get parentComponent(){return this.#l?.deref()}get wrapperComponent(){return this.__wrapperComponent?.deref()}get slots(){return De}get slotHooks(){return this.#c}get cssSheets(){return Pe.get(this.constructor)}get globalCssSheet(){return Le.__l_globalRule.sheet}get isMounted(){return this.#u}#n;#o;#i;#a;#l;__wrapperComponent;#h={};#c={};#d={};#u=!1;#p=!1;#f;static get css(){return[]}static get globalCss(){}static get hostCss(){}get cssVars(){return{}}__inited=!1;#g=!1;#_;__thisRef;constructor(...t){super(),this.#t=xe++,this.__updateTree=[],this.__thisRef=new WeakRef(this),this.#_=this.#m.bind(this),1===g(t)&&(this.#o={},O(this.#o,L(t))),Reflect.getOwnPropertyDescriptor(this.constructor.prototype,"slots")||Reflect.defineProperty(this.constructor.prototype,"slots",{get(){return Xt(void 0,"slots",this)},set(t){Kt("slots",t,this)}});let e=bt.get(this.constructor)??bt.get($t(this.constructor));e&&e.sort(((t,e)=>e.priority-t.priority)).forEach((t=>t.create(this))),this.#v=this.#y.bind(this)}insertStyleSheet(t){if(!this.#r)return null;let e;if(r(t)){e=new CSSStyleSheet;try{e.replaceSync(t)}catch(t){}}else{if(this.#r.adoptedStyleSheets.includes(t))return t;e=t}this.#r.adoptedStyleSheets=[...this.#r.adoptedStyleSheets,e];return(Pe.get(this.constructor)??[]).push(e),e}get rootComponent(){let t=this;for(;t.parentComponent;)t=t.parentComponent;return t}#v;connectedCallback(){let t=i(this.parentNode,(t=>t instanceof Le||t.host instanceof Le),"parentNode");this.#l=t?t instanceof Le?new WeakRef(t):new WeakRef(t.host):void 0,Le.__l_globalRule.parentNode||document.head.appendChild(Le.__l_globalRule);let e=u(this.constructor,"hostCss"),s=u(this.constructor,"hostCssSheet");if(e){s||(r(e)?(s=new CSSStyleSheet,s.replaceSync(e)):s=e,N(this.constructor,"hostCssSheet",s));let t=this.__wrapperComponent?.deref()?.shadowRoot??this.#l?.deref()?.shadowRoot??this.ownerDocument;this.__wrapperComponent&&!this.__wrapperComponent.deref()?.shadowRoot?.contains(this)&&(t=i(this,(t=>t instanceof HTMLDocument||t instanceof ShadowRoot),"parentNode")),t&&s&&!t.adoptedStyleSheets.includes(s)&&(t.adoptedStyleSheets=[...t.adoptedStyleSheets,s])}this.__init(),this.__bindEvents()}disconnectedCallback(){this.__unbindEvents()}__bindEvents(){let t=this._eventBindList;w(t,(t=>{let[e,s,r,n]=t;if(n)return;if(!r)return;let o=ke(e,s?s.bind(this):s,r);t[3]=o}));let e=mt.get(this.constructor);g(e)>0&&(this.__docoEventMap||(this.__docoEventMap=new Map),w(e,(({name:t,targetFn:e,fnName:s})=>{if(this.__docoEventMap.has(t+"@"+s))return;let r=e?e(this):this,n=u(this,s),o=ke(t,n?n.bind(this):n,r);this.__docoEventMap.set(t+"@"+s,o)})))}__unbindEvents(){w(this._eventBindList,(t=>{let[,,,e]=t;e&&e(),t[3]=null}));let t=[];w(this.__docoEventMap,((e,s)=>{e&&e(),t.push(s)})),t.forEach((t=>this.__docoEventMap.delete(t)))}beforeDestroyed(){}destroyed(){}get isDestroyed(){return this.#E}#E=!1;destroy(){if(this.#E)return;this.#E=!0;let t=bt.get(this.constructor)??bt.get($t(this.constructor));if(t&&t.sort(((t,e)=>e.priority-t.priority)).forEach((t=>{t.destroy(this)})),this.beforeDestroyed(),this.__unbindEvents(),this._listerners=null,this.__docoEventMap?.clear(),this.__docoEventMap=this._eventBindList=null,Lt.get(this)?.clear(),Lt.delete(this),this._watchUpdateArgsInNextTick?.clear(),this._watchUpdateSetInNextTick?.clear(),this._computedUpdateSetInNextTick?.clear(),this._computedUpdateSetInNextTick=null,this.__cssSheets=null,this.__updateSubViewDeps?.clear(),this.#l){let t=this.#l.deref();t&&I(t.__updateTree,(e=>{e.__destroyed||e.node?.deref()===this&&(e.destroy(t),A(e.parent?e.parent.children:t.__updateTree,(t=>t===e)))}))}w(this.__updateTree,(t=>t?.destroy(this))),w(this.#h,(t=>{Re.delete(t),t.remove()})),w(this.#d,(t=>{w(t,(t=>t.remove()))})),w(this.__data_.slots,((t,e)=>{w(t,(t=>t.remove()))})),this.#w.clear(),this.#d=this.#h=this.#w=this.#e=this.__data_.slots=null,this.remove(),this._wrapperProp=this.#b=this.#i=this.#a=this.#r=this.#s=this.#n=this.#o=this.#i=this.#a=this.#c=this.#v=this.__data_=this.__updateTree=this.#l=this._asyncDirectives=this.__wrapperComponent=null,this.destroyed()}__init(){if(this.__inited)return;if(this.#g)return;this.#g=!0;let t=u(this.constructor,"globalCss");V(t)||!r(t)||u(this.constructor,"_globalRuleInserted")||(Le.__l_globalRule.textContent+=t,N(this.constructor,"_globalRuleInserted",!0));let e=Pe.get(this.constructor),s=e??[];e||(w(u(this.constructor,"css"),(t=>{if(r(t)){let e=new CSSStyleSheet;e.replaceSync(t),s.push(e)}else l(t)||s.push(t)})),Pe.set(this.constructor,s));const n=this.#S();this.propsReady(n);for(const t in n){const e=n[t];this.__data_[t]=e}this.#N(),this.__data_.slots={},Reflect.defineProperty(this.__data_,"__isData",{enumerable:!1,value:!0});let i=$t(this.constructor);if(Ct.get(this.constructor)??Ct.get(i)){this._watchUpdateSetInNextTick=new Set,this._watchUpdateArgsInNextTick=new Map;let t=Nt.get(this.constructor)??Nt.get(i),e=Pt.get(this.constructor)??Pt.get(i);w(e,((e,s)=>{let r=u(this,s);e.forEach((t=>{t.call(this,r,void 0,s)})),t.has(s)&&t.set(s,!0)}))}let a=O({},yt.get(this.constructor),yt.get(i));if(a){this._computedUpdateSetInNextTick=new Set;let t=Dt.get(this.constructor);t?w(a,((t,e)=>{this[It][e]=t.call(this)})):(t=new Map,Dt.set(this.constructor,t),w(a,((e,s)=>{N(e,"key",s),Yt.start(),this[It][s]=e.call(this),Yt.end(),Yt.popVarPathList().forEach((s=>{let r=t.get(s);r||(r=new Set,t.set(s,r)),r.add(e)}))})))}Yt.start();let c=this.render();Yt.end();let h,d=Yt.popVarPathList();this.constructor.prototype._viewDeps||(this.constructor.prototype._viewDeps=d),null===c?(this.#a=[],this.#i=void 0):(this.#r=this.attachShadow({mode:"open"}),this.#r.adoptedStyleSheets=[...Ae,...Pe.get(this.constructor)??[]],h=function(t,e){let s,r=[];if(ns.has(e.constructor)){s=hs(r,ns.get(e.constructor),as(e,t),e)}else{let[n,o]=os(e,t);ns.set(e.constructor,n),s=hs(r,n,o,e)}return e.__updateTree=r,s}(c,this),h&&(this.#a=W(h,(t=>t.nodeType===Node.ELEMENT_NODE)).map((t=>new WeakRef(t))),this.#i=this.#a[0])),this.__inited=!0,this.#T(),w(this.#c,((t,e)=>{this.#C(e)}));const p=this;let f=bt.get(this.constructor)??bt.get($t(this.constructor));f&&f.sort(((t,e)=>e.priority-t.priority)).forEach((t=>{t.beforeMount(this,((t,e)=>(p.__data_[t]=e,p.__data_[t])))})),this.beforeMount(),setTimeout((()=>{if(!this.isDestroyed){if(this.#u=!0,this.#r){Yt.start();let t=this.cssVars;if(Yt.end(),!V(t)){this._cssVarOldValueMap={};let e=Ot.get(this.constructor);e||(e=new Set(Yt.popVarPathList()),Ot.set(this.constructor,e));let s="";w(t,((t,e)=>{let r="--"+b(e).replace(/^-+/,"");(o(t)||H(t))&&(t="initial"),this._cssVarOldValueMap[r]=t,s+=";"+r+":"+t})),this.style.cssText+=s}}h&&this.#r.append(...h),f&&f.forEach((t=>{t.mounted(this,((t,e)=>(p.__data_[t]=e,p.__data_[t])))})),this.#f&&this.#f.forEach((t=>ae.pushNext(t))),this.#p&&ae.pushNext(this.#v),this.__bindEvents(),this.mounted()}}),0)}propsReady(t){}render(){return null}beforeMount(){}mounted(){}#m(t){let e=t.currentTarget,s="";w(this.#h,((t,r)=>{if(t===e)return s=r,!1})),this.__inited&&this.#k(e,s===pt?"":s)}#k(t,e){this.#T();let s=u(this.#e[e],"props");s&&w(this.slots,((t,e)=>{t.filter((t=>t.nodeType===Node.ELEMENT_NODE)).forEach((t=>{t instanceof Le?t._updateProps(s):w(s,((e,s)=>{if(t instanceof HTMLSlotElement){let r=Re.get(t);if(r){let n=t.name||pt,o=r.#e[n];o||(o=r.#e[n]={props:{}}),o.props||(o.props={}),o.props[s]=e,r.#k(t,n)}}else t.setAttribute(s,e)}))}))})),this.slotChange(t,e)}slotChange(t,e){}attributeChangedCallback(t,e,s){if(!this.__inited)return;if(Object.is(s,e))return;"undefined"===s&&(s=null);let r=U(t);if(jt(wt.get(this.constructor)[r].type)){let t=!B(s)&&Ft(s);if(u(this,r)===t)return}this.#M(t,e,s)}shouldUpdate(t){return!0}updated(t){}_notify(t,e,s,r){let n=[];for(let o=0;o<e.length;o++){const i=e[o];n.push(i);let a=u(this,n),l=Bt(n);this.#s[l]={value:a,chain:l===Oe?[Oe]:n,oldValue:t,end:n.length===e.length,subNewValue:s,subOldValue:r}}this.isMounted?ae.pushNext(this.#v):this.#p=!0}#y(){if(g(this.#s)<1)return;if(!this.isMounted)return;const t=this.#s;if(this.#s={},!this.shouldUpdate(t))return;let e=bt.get(this.constructor)??bt.get($t(this.constructor));e&&e.sort(((t,e)=>e.priority-t.priority)).forEach((e=>{e.updated(this,t)}));let s=!1,r=new Set,n=this.constructor.prototype._viewDeps;if(w(t,((t,e)=>{if(!s&&n?.includes(e)&&(s=!0),this.__updateSubViewDeps?.has(e)){let t=this.__updateSubViewDeps.get(e);t&&(r=r.union(t))}})),this._watchUpdateSetInNextTick?.forEach((t=>{let{newValue:e,oldValue:s,chain:r,rootObjNew:n,rootObjOld:o,fullMatch:i}=this._watchUpdateArgsInNextTick.get(t),a=i?e:n,l=i?s:o;t.call(this,a,l,r,e,s)})),this._watchUpdateSetInNextTick?.clear(),this._watchUpdateArgsInNextTick?.clear(),this._computedUpdateSetInNextTick?.forEach((t=>{let e=u(t,"key"),s=this.__data_[e],r=t.call(this);(a(r)||r!==s)&&(this.__data_[e]=r,this._notify(s,[e]))})),this._computedUpdateSetInNextTick?.clear(),this._cssUpdateInNextTick){let t=this.cssVars;w(t,((t,e)=>{let s="--"+b(e).replace(/^-+/,"");this._cssVarOldValueMap[s]!=t&&((o(t)||H(t))&&(t="initial"),this._cssVarOldValueMap[s]=t,this.style.setProperty(s,t+""))}))}this.#i?.deref()&&(s&&ps(this.render(),this,this.__updateTree),g(r)>0&&r.forEach((t=>{fs(t,this,void 0)}))),this.#w.forEach((t=>{this.#C(t)})),this.updated(t)}#S(){let t=wt.get(this.constructor)??wt.get($t(this.constructor)),e=this.attributes,s=this.tagName,r=this.#o,o={};w(e,(({name:e,value:s})=>{if(e[0]===Xe||e[0]===Ke||e[0]===qe||e===Ye||"slot"===e)return;let r=U(e);t&&!t[r]&&(o[e]=s)})),this.#n=this.#n?O(this.#n,o):o;let i={};if(!t)return i;let l=Object.keys(t),c=l.length;for(let o=0;o<c;o++){const c=l[o],h=b(c),d=this.hasAttribute(h);let p,g=t[c],_=S(r,c),m=u(this,c);if(!("_defaultValue"in g)&&(g._defaultValue=m,!g.type)){n(m)&&Wt(s,"Prop '"+c+"' has neither propType nor defaultValue be used for type inference");let t=typeof m;f(m)&&(t="array");let e=Me[t];g.type=e}if(_)p=H(r[c])?m:r[c];else{p=m;let t=e.getNamedItem(h)||e.getNamedItem(Ke+h);t&&(_=!0,p=t.value)}if(g.required&&!_){Wt(s,"Prop '"+c+"' is required");break}p=this.#P(t,c,p,d),g.attribute&&$(p)&&!a(p)&&this.#A(g,c,p),this.__data_[c]=p,i[c]=p,delete this[c]}return i}#A(t,e,s){let r=b(e),n=j(s);jt(t.type)?(n=Ft(s),F(n)?n&&!this.hasAttribute(r)?this.toggleAttribute(r,!0):!n&&this.hasAttribute(r)&&this.toggleAttribute(r,!1):this.getAttribute(r)!==n&&this.setAttribute(r,n)):this.getAttribute(r)!==n&&this.setAttribute(r,n)}#x(t,e){let s=t;try{for(let r=0;r<e.length;r++){const n=e[r];s=n===Boolean?Ft(t):n===Number?Number(t):n===String?String(t):n===Object||n===Array?z(t):n===Date?new Date(t):new n(t)}}catch(e){Wt(this.tagName,"Convert attribute error with "+t)}return s}#P(t,e,n,o){let i=t[e];if(!i)return n;let a=i.isValid,l=i.type,c=f(l)?l:[l],u=i.converter,h=n;if(!s(c,(t=>t===String))&&r(h)&&!B(h))try{h=u?u(h):this.#x(h,c)}catch(t){Wt(this.tagName,`Convert attribute '${e}' error with `+h)}for(let t=0;t<c.length;t++){"Boolean"===c[t].name&&o&&(h=Ft(h))}if(H(h))return h;let d=typeof h,p=!$(h);for(let t=0;t<c.length;t++){const e=c[t];if(D(d,e.name,"i")||h instanceof e||Object.prototype.toString.call(h)===Object.prototype.toString.call(e.prototype)){p=!0;break}}return p||Wt(this.tagName,`Invalid prop '${e}'. expected '${c.map((t=>t.name||t))}' but got '${d}'`),a&&(a.call(this,h,this.__data_)||Wt(this.tagName,`Invalid prop '${e}'. IsValid() check failed`)),h}#N(){let t=Et.get(this.constructor)??Et.get($t(this.constructor));t&&w(t,((e,s)=>{let r=t[s],n=u(this,s);if(r){let t=r.prop;n=t?G(this.__data_[t]):u(this,s)}this.__data_[s]=n,delete this[s]}))}#b=k(this.propsReady,100);_updateProps(t){let e=wt.get(this.constructor);if(!e)return;let s=[];w(t,((t,r)=>{let n=U(r),o=e[n];o&&(t=this.#P(e,n,t),o.attribute&&$(t)&&!a(t)&&s.push([o,n,t]),N(this,n,t))})),O(this.#o,t),s.forEach((([t,e,s])=>{this.#A(t,e,s)})),this.#o&&this.#b(this.#o)}_wrapperProp={};_initProps(t,e){this.#o=E(this.#o||{},t),this.#n=E(this.#n||{},e),w(t,((t,e)=>{if(a(t)){let s=te.get(t);if(s){let t=s.join("-");this._wrapperProp[t]=e;let r=this.wrapperComponent?Et.get(this.wrapperComponent?.constructor):null,n=s[0];if(r&&r[n]){let t=wt.get(this.constructor);N(t,[e,"shallow"],r[n].shallow)}}}}))}_bindSlot(t,e,s){this.#h[e]||(this.#h[e]=t,Re.set(t,this));let r="slotchange",n=ke(r,this.#_,t);if(this._eventBindList.push([r,this.#_,t,n]),!V(s)){let t=this.#e[e];t||(t=this.#e[e]={}),t.props=s}}_bindSlotHook(t,e){this.#c[t]=e}#w=new Set;_updateSlot(t,e,s){let r=this.#h[t],n=this.#c[t];if(!n&&!r)return;let o=this.#e[t];if(e&&(o.props||(o.props={}),o.props[e]=s),n)this.#w.add(t);else{let t=r.assignedElements({flatten:!0});for(let r=0;r<t.length;r++){t[r].setAttribute(e,s+"")}}}#T(){if(!this.#i)return;let t=X(this.#h);if(V(t))return;const e=R(this.childNodes,(t=>t.nodeType===Node.COMMENT_NODE?[]:t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):t));let s=K(e,(e=>{if(e.nodeType===Node.TEXT_NODE&&t.includes(pt))return pt;if(e instanceof Element){let s=e.getAttribute("slot")||pt;if(t.includes(s))return s}}));if(V(s))return void(this.slots={});w(s,((t,e)=>{if(e){for(;t.length>0;){let e=t[0];if(!(e.nodeType===Node.TEXT_NODE&&o(e.textContent)||e instanceof HTMLSlotElement&&V(e.assignedNodes({flatten:!0}))))break;t.shift()}for(;t.length>0;){let e=q(t);if(!(e.nodeType===Node.TEXT_NODE&&o(e.textContent)||e instanceof HTMLSlotElement&&V(e.assignedNodes({flatten:!0}))))break;t.pop()}}}));let r={};w(s,((t,e)=>{V(t)||(r[e]=t)})),this.slots=r}#C(t){let e=this.#c[t];if(!e)return;let s=this.#e[t];if(!this.__data_.slots)return;if(!this.__data_.slots[t])return;this.renderAsync(e,u(s,"props"));const r=this._asyncDirectives.get(e);let n=r?.buildView(e(u(s,"props"))),o=Q(d(n),(t=>t.nodeType===Node.COMMENT_NODE));if(o){let e=this.#d[t];if(!V(e))for(let t=0;t<e.length;t++){const s=e[t];s.parentNode?.removeChild(s)}this.#d[t]=o,this.append(...o),this.#w.clear()}}_asyncDirectives=new WeakMap;renderAsync(t,...e){}#M(t,e,s){if(!this.__inited)return;if(he(this.constructor).has(t)){let e=U(t);if(B(s)){let t=wt.get(this.constructor);t&&(s=t[e]._defaultValue)}this._updateProps({[e]:s})}}_regSubViewDeps(t,e){this.__updateSubViewDeps||(this.__updateSubViewDeps=new Map),t.forEach((t=>{let s=this.__updateSubViewDeps.get(t);s||(s=new Set,this.__updateSubViewDeps.set(t,s)),s.add(e)}))}_getPrivateData(){return this.__data_}emit(t,e={},s){s&&(e.event=s),e.target=this,S(this.#n,"emit-native")?this.dispatchEvent(new CustomEvent(t,{bubbles:!1,composed:!1,cancelable:!0,detail:e})):this._listerners[t]&&this._listerners[t](e)}_addEvent(t,e){this._listerners||(this._listerners={}),this._listerners[t]=e}nextTick(t){if(!this.isMounted)return this.#f||(this.#f=[]),void this.#f.push(t);ae.pushNext(t)}forceUpdate(){w(this.__data_,((t,e)=>{this.#s[e]={value:void 0,chain:void 0}})),this.#y()}}class Ie{strings;vars;constructor(t,e){this.strings=h(t),this.vars=e}getKey(){let t=this.vars,e="";return w(this.strings,((s,r)=>{if(ft.test(s))return e=Z(t[r]),!1})),e}getKeys(){let t=this.vars,e=[];for(let s=0;s<this.strings.length;s++){const r=this.strings[s];if(ft.test(r)){let r=Z(t[s]);e.push(r)}}return V(e)&&t.forEach((t=>{if(t instanceof Ie){let s=t.getKey();e.push(s)}})),e}append(t){let e=q(this.strings);return t.strings.forEach(((t,s)=>{0!=s?this.strings.push(t):this.strings[this.strings.length-1]=e+t})),this.vars=h(this.vars,t.vars),this}insert(t,e){let s=e.strings.shift();return this.strings[t]+=s,this.strings.splice(t+1,0,...e.strings),this.vars.splice(t,0,...e.vars),this}getHTML(t){let[e,s]=os(t,this),r=hs([],e,s,t);return Y(r,((t,e)=>t+(e.outerHTML??"")),"")}flatVars(t){let e=h(this.vars),s=this.strings.length-1,r=0;for(let n=0;n<=s;n++){let s=u(e,r,"");if(s instanceof Ie&&s.vars.length>0){let[n,o]=os(t,s);s=n,e.splice(r,1,...o),r+=o.length-1}r++}return e}destroy(){this.strings=this.vars=null}}var Ve,We;!function(t){t.ATTR="attr",t.PROP="prop",t.TEXT="text",t.CLASS="class",t.STYLE="style",t.SLOT="slot",t.TAG="tag"}(Ve||(Ve={})),function(t){t.NONE="NONE",t.REMOVE="REMOVE",t.REPLACE="REPLACE",t.UPDATE="UPDATE",t.APPEND="APPEND"}(We||(We={}));class He{key;varIndex;value;node;attrName;attrTmpl;isText=!1;isDirective=!1;isComponent=!1;isProp=!1;isToggleProp=!1;isPlaceholder;__destroyed=!1;directiveOldValue;children;parent;constructor(t,e,s,r){this.varIndex=t,e&&(this.node=e),s&&(this.attrName=s),r&&(this.attrTmpl=r)}static createFrom(t){let e=new He(t.varIndex,t.node,t.attrName,t.attrTmpl);return e.key=t.key,e.value=t.value,e.isText=t.isText,e.isDirective=t.isDirective,e.isComponent=t.isComponent,e.isProp=t.isProp,e.isToggleProp=t.isToggleProp,e.isPlaceholder=t.isPlaceholder,e}destroy(t){if(this.__destroyed)return;this.__destroyed=!0;let e=this.node,s=this.children;this.parent;if(this.node=this.value=this.directiveOldValue=this.children=this.parent=null,!e)return;let r=s;r?.forEach(((e,s)=>{e.destroy(t)})),e instanceof Le&&e.destroy(),t&&zt.clear(e.deref(),t),e.deref()?.remove()}insert(t){t.parent=this,this.children||(this.children=[]),this.children.push(t)}}const Ue=new WeakMap,Be=new Map;var $e;!function(t){t.AFTER_BEGIN="afterbegin"}($e||($e={}));let je={};function Fe(t,e,s,r,n,o,i,a){let l;if([Ve.TEXT,Ve.SLOT].includes(u(r,"__scope",""))?(Yt.start(),l=r(t,e,s,{renderComponent:n,slotComponent:o,varChain:i}),Yt.end(n,a)):l=r(t,e,s,{renderComponent:n,slotComponent:o,varChain:i}),!l)return;let[c,h]=l;if(c===We.NONE)return;let p=Ue.get(t),f=zt.getNodes(p,t),g=a.children;if(c===We.REMOVE){for(let t=0;t<f.length;t++){const e=f[t];e.remove(),e instanceof Le&&e.destroy()}g?.forEach(((t,e)=>{t.destroy(n)}))}else if(c===We.REPLACE){let e=[];for(let t=0;t<f.length;t++){const e=f[t];e.parentNode?.removeChild(e),e instanceof Le&&e.destroy()}g?.forEach(((t,e)=>{t.destroy(n)}));let s=ds(t,h,n,a,!0);e=d(s);let r=document.createDocumentFragment();r.append(...e),t.parentNode.insertBefore(r,t)}else if(c===We.UPDATE){let e,s={},r=[],o=[];if(h||(h=new Ie([],[])),V(f)){let e=ds(t,h,n,a,!0);return void p.after(...e)}let i={};h instanceof Ie&&h.vars.forEach((t=>{if(t instanceof Ie){const e=t.getKey();i[e]=t,s[e]=!0,o.push(e)}})),f=W(J(f),(t=>t.nodeType===Node.ELEMENT_NODE)),e=W(J(d(e)),(t=>t.nodeType===Node.ELEMENT_NODE));let l={},c="",u={};for(let t=0;t<f.length;t++){let e=f[t],s=e.getAttribute("key");if(!H(s)){if(l[s]){c=s;break}l[s]=e,r.push(s),u[s]=!0}}if(c)return void Vt(`${U(t.nodeValue)} - duplicate key '${c}'`);let _=s,m=[],v=[];w(u,((t,e)=>{_[e]||(v.push(e),delete u[e],A(r,(t=>t===e)))}));let y,E=!1;if(!V(o)){let t=-1,e=[],s=[],n=0,i=0;for(;i<o.length;i++){const a=o[i];let c=r.findIndex((t=>t===a));if(c<0){let t=o[i-1],e=t?l[t]||t:p;m.push({prevNode:e,newkey:a}),n++}else if(c>-1&&c!==i-n){if(t<0||1===Math.abs(t-c)){let t=q(e);e.push({nodeId:a,targetId:0===i?$e.AFTER_BEGIN:t?t.nodeId:o[i-1]})}else s.push({moveGroup:e,moveIndex:i+e.length}),e=[],e.push({nodeId:a,targetId:o[i-1]});t=c}}if(e.length>0&&s.push({moveGroup:e,moveIndex:i+e.length}),s.length>0){E=!0;let t=s.sort(((t,e)=>t.moveGroup.length-e.moveGroup.length));if(t.length<2){let{moveGroup:e}=t[0];if(e.length>1){let t=q(e).targetId;e[e.length-2].nodeId===t&&(e=tt(e))}e.forEach((({targetId:t,nodeId:e})=>{let s,r=l[e];t===$e.AFTER_BEGIN?(s=p,s.after(r)):l[t]&&(s=l[t],s.after(r))}))}else{let e=q(t).moveIndex;1===Math.abs(t[t.length-2].moveIndex-e)&&(t=tt(t)),t.forEach((({moveGroup:t})=>{t.forEach((({targetId:t,nodeId:e})=>{let s,r=l[e];t===$e.AFTER_BEGIN?(s=p,s.after(r)):(s=l[t],s.after(r))}))}))}}}if(v.forEach((t=>{let e=l[t];if(e&&e.parentNode){l[t]=null,e.remove();let s=A(g,(e=>e.key==t));s.forEach((t=>t.destroy(n)))}})),m.length>0&&(y=function(t,e,s,r,n,o){const i=[],a=[],l=[];let c,u=[];t.forEach((t=>{let s=q(u);s&&c===t.prevNode?(s.group||(s.group=[c]),s.group.push(t.newkey)):u.push(t),c=t.newkey;let r=t.newkey;l.push(r),i.push(""),a.push(e[r])})),i.push("");let h=ds(r,new Ie(i,a),s,o,!0),d=new Map;return h.forEach((t=>{const e=t.getAttribute("key");l.includes(e)&&(d.set(e,!0),n[e]=t)})),u}(m,i,n,t,je,a),y.forEach(((e,s)=>{let r=e.newkey,n=je[r],o=e.prevNode;if(e.group){let t=document.createDocumentFragment();t.append(...x(e.group,(t=>je[t]))),n=t}o===t?o.before(n):o===p?o.after(n):"string"==typeof o?je[o].after(n):o.after(n)})),je=null,je={}),h.vars[0]instanceof Ie){let t=[],e=[];w(h.vars,(s=>{e.push(...s.vars),t.push(...x(s.vars,(t=>"1")))})),t.push("1"),h=new Ie(t,e)}if(E||v.length>0||y){const t=K(g,(t=>t.key));let e=[],s=0;o.forEach((r=>{t[r]&&t[r].forEach((t=>{t.varIndex=s++,e.push(t)}))})),et(g,e).forEach((t=>t.destroy(n))),a.children=e}fs(a,n,h)}}let ze=0;function Ge(t,e){let s=t.name||"Di-"+ze++,r=Symbol.for(s);return(...n)=>{let o=t(...n);return(T(e,Ve.TEXT)||T(e,Ve.SLOT))&&Be.set(s,o),N(o,"__scope",e[0]),[r,n,o,t=>{},Yt.popDirectiveQ()]}}const Xe="@",Ke=".",qe="?",Qe="*",Ze=":",Ye="ref",Je="key",ts=/(<\/?)\s*([A-Z][A-Za-z0-9]*)([\s>])/gm,es=/\s+([\.?@*])?((?:[a-zA-Z]*[A-Z][^\s<>="']+))(?=[\s=>])/gm,ss=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,rs="slot-props",ns=new Map;function os(t,e){let s="",r=h(e.vars),n=e.strings.length-1,o=e.vars.length-1,i=0;for(let a=0;a<=n;a++){const n=e.strings[a];let l=u(r,i,"");if(l instanceof Ie){let[e,s]=os(t,l);l=e,r.splice(i,1,...s),i+=s.length-1}else l=a>o?"":ls;i++,s=s+n+l}let a=0;return s=s.replace(ss,((t,e)=>it(t,ls,(()=>ls.replace("--\x3e","")+a++)))),s=s.replace(_s,"$1><").trim(),s=is(s),[s,r]}function is(t){return r(t)?t=(t=t.replace(es,((t,e,s)=>` ${e??""}${b(s)}`))).replace(ts,((t,e,s,r)=>e+vt[s]+r)):t+""}function as(t,e){let s=h(e.vars),r=e.strings.length-1;for(let n=0;n<=r;n++){let r=u(e.vars,n,"");if(r instanceof Ie){let e=as(t,r);s.splice(n,1,...e)}}return s}const ls="\x3c!--c_ui-pl_df--\x3e",cs="\x3c!--c_ui-pl_df",us=/<!--c_ui-pl_df\d*(-->)?/;function hs(t,e,s,r){const n=document.createElement("div");n.innerHTML=e;let o=r._eventBindList;o||(o=r._eventBindList=[]);const i=document.createNodeIterator(n,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let a,l,u=0,h=null,_="";for(;a=i.nextNode();){if(l&&!l.contains(a)&&(l=void 0),a instanceof HTMLElement||a instanceof SVGElement){a instanceof Le&&(l=a);let e={},n=d(a.attributes);for(let i=0;i<n.length;i++){const d=n[i];let{name:g,value:m}=d;if(g!==rs)if(c(g,cs)){let e=s[u];if(f(e)&&p(e[0])){let[,s,n,o,i]=e;o(Ve.TAG);let c=new He(u,new WeakRef(a));c.isDirective=!0,c.value=e,c.isComponent=!!l,t.push(c),h&&h?.contains(a)&&(c.key=_),u++,n(a,s,void 0,{renderComponent:r,slotComponent:l,varChain:i})}a.removeAttribute(g)}else if(g[0]!==Xe)if(g!==Ye)if(g!==Je){if(us.test(m)){let n=s[u],o=new He(u,new WeakRef(a),g.replace(/\.|\?|@/,""),m);if(o.isComponent=!!l,h&&h?.contains(a)&&(o.key=_),g[0]===Ke||g[0]===qe||g[0]===Qe){if(f(n)&&p(n[0])){let[,t,e,s,i]=n;s(Ve.PROP),e(a,t,void 0,{renderComponent:r,slotComponent:l,varChain:i,attrName:g.substring(1)}),o.value=n,o.isDirective=!0}else if(g[0]===qe){o.isToggleProp=!0,o.value=!!n;let t=g.substring(1);o.value&&a.setAttribute(t,n)}else if(g[0]===Qe){o.value=n;let t=g.substring(1);const[e,s]=t.split(Ze);let r=e;switch(s){case"camel":r=U(r);break;case"kebab":r=b(r);break;case"snake":r=at(r)}o.attrName=r,a.setAttribute(r,n)}else{let t=U(g.substring(1));o.value=n,o.isProp=!0,e[t]=n}a.removeAttribute(g),n=""}else{let t,e;if(o.value=n,f(n)&&p(n[0])){Ve.ATTR,"class"===g?Ve.CLASS:"style"===g&&Ve.STYLE;let[,s,r,i]=n;o.isDirective=!0,o.attrName=g,e=s,t=r,n=""}m=ot(m,us,n),d.value=m,$(m)&&a.setAttribute(g,m),t&&t(a,e,void 0,{renderComponent:r,slotComponent:l})}t.push(o),u++}}else{let e=s[u];a.setAttribute(g,e);let r=new He(u);r.isPlaceholder=!0,h&&h?.contains(a)&&(r.key=_),t.push(r),u++,h=a,_=e,t.length>0&&t.forEach((t=>{t.key=t.key??e}))}else{if(us.test(m)){let e=s[u],r=new He(u);r.isPlaceholder=!0,h&&h?.contains(a)&&(r.key=_),t.push(r),u++,e.__setRef(new WeakRef(a))}a.removeAttribute(g)}else{let e;if(us.test(m)){let r=new He(u);r.isPlaceholder=!0,h&&h?.contains(a)&&(r.key=_),t.push(r),e=s[u],u++}let r=g.substring(1);o.push([r,e,a]),a.removeAttribute(g)}}a instanceof Le?(m=r,a.__wrapperComponent=new WeakRef(m),g(e)>0&&a._initProps(e)):a instanceof HTMLSlotElement&&r._bindSlot(a,a.name||"default",e)}else{let e=a;if(`\x3c!--${e.nodeValue}--\x3e`!==ls)continue;let n=new He(u,new WeakRef(a));h&&h?.contains(a)&&(n.key=_),t.push(n),n.isComponent=!!l,n.isText=!0;let o=s[u];if(f(o)&&p(o[0])){const t=Symbol.keyFor(o[0]);let s;s=document.createComment(`compelem-${r.tagName}-${t}-start`),e.parentNode.insertBefore(s,e),e.nodeValue=`compelem-${r.tagName}-${t}-end`,e._diName=t,Ue.set(e,s),n.isDirective=!0,n.value=o;let i=l?Ve.SLOT:Ve.TEXT,[,a,c,u,h]=o;u(i),n.directiveOldValue=[a,h],Yt.start();let d=c(e,a,void 0,{renderComponent:r,slotComponent:l,varChain:h});if(Yt.end(r,n),d){let t=ds(e,d[1],r,n),s=t.length;t&&s>0&&zt.insertBefore(e,Array.from(t))}o=void 0}else n.value=o,n.node=null;if(u++,!n.isDirective){let t=Z(o??""),s=document.createTextNode(t);e.parentNode.insertBefore(s,e),e.remove(),a=s,n.node=new WeakRef(s)}}h&&!h.contains(a)&&h!==a&&(h=null,_="")}var m;return n.childNodes}function ds(t,e,s,r,n=!1){let[o,i]=os(s,e),a=[],l=hs(a,o,i,s);return n&&s.__bindEvents(),a.forEach((t=>{r.insert(t)})),l}function ps(t,e,s,r){if(o(st(t.strings)))return;let n=t.flatVars(e);for(let t=0;t<s.length;t++){const r=s[t];let o=r.varIndex;if(o<0)continue;if(r.isPlaceholder)continue;if(r.__destroyed)continue;let i=r.value,l=n,c=r.node.deref();if(!c)continue;let h=rt(o,"-");for(let e=0;e<h.length;e++){const s=h[e];l=u(l,s),l&&l.vars&&t<h.length-1&&(l=l.vars)}if(!a(i)&&i===l)continue;let d=c;if(r.isDirective){let[,t,s,,n]=r.value;if(!f(l))continue;let o=Gt(c,e),[,i]=l;Fe(c,i,t,s,e,o,n,r)}else if(r.isToggleProp){if(!!l===i)continue;d.toggleAttribute(r.attrName,!!l),N(d,r.attrName,!!l)}else if(r.isProp){if(!a(l)&&l===i)continue;c instanceof Le?c._updateProps({[r.attrName]:l}):c instanceof HTMLSlotElement&&e._updateSlot(c.getAttribute("name")||"default",r.attrName,l)}else if(r.attrName){if(!nt(i,l))switch(r.attrName){case"value":if(c instanceof HTMLInputElement){c.value=l;break}default:c.setAttribute(r.attrName,ot(r.attrTmpl,us,l+""))}}else if(r.isText){r.node.deref().textContent=Z(l??"")}r.value=l}}function fs(t,e,s,r){if(!t)return;let n=t.node.deref();const o=Be.get(n._diName);let i=Gt(n,e);const[a,l]=t.directiveOldValue;if(!s){let r=o(n,t.value[1],a,{renderComponent:e,slotComponent:i,varChain:l});if(!r)return;s=r[1]}if(s){if(s.vars[0]instanceof Ie){let t=[],e=[];w(s.vars,(s=>{e.push(...s.vars),t.push(...x(s.vars,(t=>"1")))})),t.push("1"),s=new Ie(t,e)}ps(s,e,t.children)}}function gs(t,...e){return new Ie(r(t)?[t]:t,e)}const _s=/([a-z0-9"'])\s*>\s*</gim;class ms{#R;get current(){return this.#R?.deref()}__setRef(t){this.#R=t}}function vs(){return new ms}var ys;!function(t){t.CLASS="class",t.FIELD="field",t.METHOD="method"}(ys||(ys={}));class Es{static get priority(){return 0}created(t,...e){}beforeMount(t,e,...s){}mounted(t,e,...s){}updated(t,e){}beforeDestroy(t,...e){}}class ws{metadata;decorator;key;priority=0;constructor(t,e,s){this.metadata=e,this.decorator=new s(...t),this.priority=u(s,"priority",0)}dispose(){this.metadata=null,this.decorator=null}create(t){let e,s=this.decorator.targets,r=this.metadata[1];a(r)&&$(u(r,"configurable"))?e=ys.METHOD:n(this.metadata[1])&&(e=ys.FIELD),!V(s)&&e&&s.includes(e)?this.decorator.created(t,...this.metadata):Vt(`Decorator '${this.decorator.constructor.name}' is out of targets, expect '${s.join(",")}' bug got '${e}'`)}beforeMount(t,e){this.decorator.beforeMount(t,e,...this.metadata)}mounted(t,e){this.decorator.mounted(t,e,...this.metadata)}updated(t,e){this.decorator.updated(t,e)}destroy(t){this.decorator.beforeDestroy(t,...this.metadata)}}function bs(t){return(...e)=>(...s)=>{let r=s[0].constructor,n=bt.get(r);if(!bt.has(r)){let t=Object.getPrototypeOf(r);n=t?h(bt.get(t)??[]):[],bt.set(r,n)}let o=new ws(e,s.splice(1),t);return n?.push(o),o}}function Ss(t){return(...e)=>{if(!e||e.length<1)return;let s=e[0].constructor,r=bt.get(s);if(!bt.has(s)){let t=Object.getPrototypeOf(s);r=t?h(bt.get(t)??[]):[],bt.set(s,r)}let n=new ws([],e.splice(1),t);return r?.push(n),n}}function Ns(t,e,s){return s.get||Vt(`Computed '${e}' must be a getter`),yt.has(t.constructor)||yt.set(t.constructor,{}),yt.get(t.constructor)[e]=s.get,delete t[e],Reflect.defineProperty(t,e,{get(){return Yt.__collecting&&Yt.__varPathList.push(e),Reflect.get(this[It],e)}}),Reflect.getOwnPropertyDescriptor(t,e)}const Ts=bs(class extends Es{static get priority(){return Number.MAX_VALUE}created(t,e,...s){let r=u(t,e);N(t,e,k(r,this.wait,this.immediate)),N(t,e+"_$__",r)}beforeDestroy(t,e){N(t,e,null),N(t,e+"_$__",null)}get targets(){return[ys.METHOD]}wait;immediate;constructor(t,e=!1){super(),this.wait=t,this.immediate=e}});function Cs(t,e){return(s,r,n)=>{if(!mt.has(s.constructor)){let t=[],e=s.constructor;for(;(e=$t(e))!==Le;)t=h(t,mt.get(e)??[]);mt.set(s.constructor,t)}mt.get(s.constructor)?.push({name:t,targetFn:e,fnName:r})}}const ks=bs(class extends Es{static get priority(){return Number.MAX_VALUE}created(t,e,s,...r){let n=lt(u(t,s),t);N(t,s,P(n)),N(t,s+"_$__",n)}beforeDestroy(t,e){N(t,e,null),N(t,e+"_$__",null)}get targets(){return[ys.METHOD]}});var Ms;!function(t){t.ONCE="once"}(Ms||(Ms={}));const Ps=new WeakMap;class As extends Es{static get priority(){return Number.MAX_VALUE}get targets(){return[ys.FIELD]}selector;cache;constructor(t,e){super(),this.selector=t,this.cache=e}static getKey(t){return t}getter(t){let e=t?.shadowRoot?.querySelector(this.selector),s=Ps.get(t);s||(s=new Map,Ps.set(t,s)),s.set(this.selector,e)}mounted(t,e,s,...r){const n=this;let o=new WeakRef(t);Reflect.defineProperty(t,s,{configurable:!0,get(){let t=o.deref();return Ps.has(t)&&Ps.get(t)?.has(n.selector)&&n.cache===Ms.ONCE||n.getter(t),Ps.get(t)?.get(n.selector)}})}beforeDestroy(t,e){Ps.get(t)?.clear(),Ps.delete(t)}updated(t,e){this.cache!==Ms.ONCE&&this.getter(t)}}const xs=bs(As),Rs=bs(class extends As{getter(t){let e=t.shadowRoot?.querySelectorAll(this.selector),s=Ps.get(t);s||(s=new Map,Ps.set(t,s)),s.set(this.selector,e)}});function Ds(t){if(1===arguments.length)return(e,s)=>{Os(e,s,t)};Os(arguments[0],arguments[1],{prop:""})}function Os(t,e,s){if(!Et.has(t.constructor)){const e={};let s=t.constructor;for(;(s=$t(s))!==Le;)E(e,Et.get(s)??{});Et.set(t.constructor,e)}if(s.shallow=s.shallow||!1,N(Et.get(t.constructor),e,s),s.hasChanged){let r=Rt.get(t.constructor);r||(r=new Map,Rt.set(t.constructor,r)),r.set(e,s.hasChanged)}if(s.shallow){let s=xt.get(t.constructor);s||(s=new Set,xt.set(t.constructor,s)),s.add(e)}Reflect.defineProperty(t.constructor.prototype,e,{get(){return Xt(void 0,e,this)},set(t){Kt(e,t,this)}})}function Ls(t,e,s){Os(t.prototype,e,s||{prop:""})}function Is(t){return e=>{e&&(vt[e.name]=t,customElements.define(t,e))}}const Vs=bs(class extends Es{static get priority(){return Number.MAX_VALUE}created(t,e,...s){let r=u(t,e);N(t,e,M(r,this.wait)),N(t,e+"_$__",r)}beforeDestroy(t,e){N(t,e,null),N(t,e+"_$__",null)}get targets(){return[ys.METHOD]}wait;constructor(t){super(),this.wait=t}});function Ws(t,e){return(s,r)=>{let n=Mt.get(s.constructor),o=kt.get(s.constructor),i=Nt.get(s.constructor),a=Tt.get(s.constructor),l=Ct.get(s.constructor),c=Pt.get(s.constructor);if(!l){l=[],Ct.set(s.constructor,l),a=[],Tt.set(s.constructor,a),i=new Map,Nt.set(s.constructor,i),n={},Mt.set(s.constructor,n),o={},kt.set(s.constructor,o),c={},Pt.set(s.constructor,c);let t=$t(s.constructor);for(;t;)Ct.has(t)&&(l.push(...Ct.get(t)),a.push(...Tt.get(t)),Nt.get(t)?.forEach(((t,e)=>{i.set(e,t)})),O(n,Mt.get(t)),O(o,kt.get(t)),O(c,Pt.get(t))),t=$t(t)}(f(t)?t:[t]).forEach((t=>{let h=s[r];u(e,"once",!1)&&i.set(t,!1);let d=u(e,"deep",!1);if(l.push(t),d?(n[t]=n[t]??new Set,n[t].add(h),a.push(t)):(o[t]=o[t]??new Set,o[t].add(h)),u(e,"immediate",!1)){let e=c[t];e||(e=c[t]=new Set),e.add(h)}}))}}const Hs=["key"],Us=Ge((function(t){return(t,[e],s)=>{let r=t;if(s)w(e,((t,e)=>{r.setAttribute(e,t)}));else if(r instanceof Le){let t={},s={},n=wt.get(r.constructor);w(e,((e,r)=>{if(Hs.includes(r))return;let o=U(r);(n?n[o]:void 0)?t[r]=e:s[r]=e+""})),r._initProps(t,s)}else w(e,((t,e)=>{r.setAttribute(e,t)}))}}),[Ve.TAG]),Bs=new WeakMap,$s=Ge((function(t){return(t,[e],s,{renderComponent:n})=>{let o=[];if(f(e)?o=J(e):a(e)?o=R(e,((t,e)=>t?e:[])):r(e)&&(o=e.split(" ")),o.length<1&&!s)return;let i=t;if(Bs.get(i)&&Bs.get(i).length===o.length&&ct(Bs.get(i),o))return;let l=Bs.get(i);w(l,(t=>{i.classList.remove(t)})),w(o,(t=>{i.classList.add(t)})),l=h(o),Bs.set(i,l)}}),[Ve.CLASS]),js=new WeakMap,Fs=new WeakMap,zs=Ge((function(t,e){return(t,e,s,{varChain:r})=>{let n=t,o=function(t,e,s){let r=x(t,((t,s)=>e(t,s)));if(r.length<1){let t=new Ie([],[]);return Fs.set(s,t),t}let n=[],o=[];const i=[],a=[];for(let t=0;t<r.length;t++){const e=r[t];let s=q(o),l=e.vars,c=!0,u=e.strings;for(let t=0;t<u.length;t++){const e=u[t];if(ft.test(e)){let e=l[t]+"";if(n.includes(e))return void Vt(`forEach - duplicate key '${e}'`);n.push(e),c=!1}0==t&&s?o[o.length-1]=s+e:o.push(e)}if(c)return void Vt("forEach - missing 'key' prop");let h=q(i);h&&u.length>0&&(i[i.length-1]=j(h)+u.shift()),i.push(""),a.push(e)}i.push("");let l=new Ie(i,a);return Fs.set(s,l),l}(e[0],e[1],n);if(s&&s[0]){const s=js.get(n);let r=Ue.get(t),i=zt.getNodes(r,t);if(V(i)&&(!e||V(e[0])))return[We.NONE,o];if(s&&ct(s,e[0])&&s.length===e[0].length)return[We.NONE,o]}return js.set(n,ut(e[0])),s?[We.UPDATE,o]:[We.APPEND,o]}}),[Ve.TEXT,Ve.SLOT]);let Gs=document.createElement("div");const Xs=Ge((function(t){return(t,e,s,{renderComponent:r,slotComponent:n})=>{s&&e[0]==s[0]||H(e[0])||(Gs.innerHTML=is(e[0]),t.after(...Gs.childNodes))}}),[Ve.TEXT,Ve.SLOT]),Ks=Ge((function(t){return(t,e,s,{renderComponent:r,slotComponent:n})=>{s&&e[0]==s[0]||H(e[0])||(t.innerHTML=is(e[0]))}}),[Ve.TAG]),qs=new WeakMap,Qs=Ge((function(t,e,s){return(t,[e,s,r],n,{renderComponent:o})=>{let i=t;if(n){if(!!e==!!n[0]){let t=qs.get(i);return[We.NONE,t.call(o,e)]}let t=e?s:r;return qs.set(i,t),[We.REPLACE,t.call(o,e)]}{let t=e?s:r;return qs.set(i,t),[We.APPEND,t.call(o,e)]}}}),[Ve.TEXT,Ve.SLOT]),Zs=Ge((function(t,e){return(t,[e,s],r)=>r?e===r[0]?[We.NONE,e?s():gs``]:e?[We.REPLACE,e?s():gs``]:[We.REMOVE]:[We.APPEND,e?s():gs``]}),[Ve.TEXT,Ve.SLOT]);var Ys;!function(t){t.CHANGE="change",t.INPUT="input"}(Ys||(Ys={}));const Js=Ge((function(t,s="value",n){return(t,[s,n,o],i,{varChain:l,renderComponent:c})=>{n=n??"value";const h=t;if(i){const t=i[0],e=s;let r=u(h,n);if(!a(e)&&Object.is(e,t)&&Object.is(r,e))return;if(h instanceof Le)h._updateProps({[n]:e});else if(h instanceof HTMLTextAreaElement||h instanceof HTMLSelectElement){if(h.setAttribute(n,e+""),h instanceof HTMLSelectElement){let t=C(h.querySelectorAll("option"),(t=>t.value==e));t&&(t.selected=!0)}}else if(h instanceof HTMLInputElement){if(h.value==e)return;switch(h.type){case"checkbox":case"radio":e?h.setAttribute("checked",""):h.removeAttribute("checked");break;case"text":case"email":case"number":case"password":case"search":case"tel":case"url":h.setAttribute(n,e+""),N(h,n,e);break;default:h.setAttribute(n,e+"")}}return}let d;d=r(o)?e(o)[0]:q(l);const p=rt(d,".")[0];p in c||c._wrapperProp[p]||Vt(`model - property '${p}' is not defined on the instance of `+c.tagName);let f=c._eventBindList;if(a(s)||j(s)||(s=""),h instanceof Le){h._initProps({[n]:s});let t="update:"+n;f.push([t,function(t){let e=this,s=e._wrapperProp[p];!(p in e)&&s&&u(e.wrapperComponent,p)===u(e,s)&&(e=e.wrapperComponent||e),N(e,d,t.value)},h])}else if(h instanceof HTMLTextAreaElement){h.setAttribute(n,s+"");let t="input";f.push([t,function(t){let e=t.target;N(this,d,e.value)},h])}else if(h instanceof HTMLInputElement){let t="",e="";switch(h.type){case"checkbox":case"radio":t="checked",e="change";break;default:t="value",e="input"}h.setAttribute(n??t,s+""),f.push([e,function(t){let e=t.target;N(this,d,e.value)},h])}else h instanceof HTMLSelectElement&&(h.setAttribute(n,s+""),f.push(["change",function(t){let e=t.target,s=this,r=s._wrapperProp[p];!(p in s)&&r&&u(s.wrapperComponent,p)===u(s,r)&&(s=s.wrapperComponent||s),N(s,d,e.value)},h]))}}),[Ve.TAG]),tr=new WeakMap,er=Ge((function(t,e){return(t,[e,s],r)=>{if(r&&e===r[0])return;let n=t;if(!tr.has(n)){let t=n.style.display;tr.set(n,"none"==t?"unset":t)}n.style.display=e?tr.get(n):"none",s&&s(n,e)}}),[Ve.TAG]),sr=Ge((function(t,e){return(t,[e,s],r,{renderComponent:n,slotComponent:o})=>{r||(e=e.bind(n),o._bindSlotHook(s||"default",e))}}),[Ve.SLOT]);class rr{static getCssText(t,e=!1){return r(t)?t:st(x(t,((t,s)=>s.startsWith("--")?s+":"+t+(e?" !important":""):b(s)+":"+t+(e?" !important":""))),";")+";"}static setStyle(t,e){if(r(t)&&!j(t))return;let s=rr.getCssText(t);e.style.cssText=s}}const nr=Ge((function(...t){return(t,e,s,{renderComponent:r})=>{let n=t,o=Y(e,((t,e)=>t+rr.getCssText(e)),""),i=J(o.split(";").map((t=>t.split(":")[0]))),a=J(n.style.cssText.split(";")),l=Q(a,(t=>i.some((e=>t.trim().startsWith(e)))));n.style.cssText=o+l.join(";")}}),[Ve.STYLE]),or=Ge((function(t){return(t,e,s,{renderComponent:r,varChain:n,attrName:o})=>{const i=t;if(s)return void(nt(e,s)||i._updateProps({[o]:e[0]}));let a=q(n);i._initProps({[o]:e[0]}),i.addEventListener("update:"+o,(t=>{N(r,a,t.detail.value)}))}}),[Ve.PROP]),ir=Ge((function(t,e){return(t,[e,s],r)=>{let n=()=>gs``,o=[],i=[];w(s,((t,e)=>{if(l(t))o.push(e),i.push(t);else{let e=t[0],s=t[1];o.push(e),i.push(s)}"default"===e&&(n=t)}));let a=ht(o,(t=>l(t)?t(e):t==e));return r?[We.REPLACE,dt(i[a]??n)]:[We.APPEND,dt(i[a]??n)]}}),[Ve.TEXT,Ve.SLOT]);export{Le as CompElem,rr as CssHelper,Ue as DI_COMMENT_START_NODE_MAP,Es as Decorator,ys as DecoratorType,ws as DecoratorWrapper,We as DirectiveUpdateTag,zt as DomUtil,Ve as EnterPointType,Ys as ModelTriggerType,Ms as QueryCache,Ie as Template,Be as TextOrSlotDirectiveExecutorMap,He as UpdatePoint,he as _getObservedAttrs,$t as _getSuper,Bt as _toUpdatePath,Us as bind,os as buildHTML,$s as classes,Ns as computed,vs as createRef,Ts as debounced,bs as decorator,Ss as decoratorWithNoArgs,Ge as directive,Cs as event,zs as forEach,Ft as getBooleanValue,Gt as getSlotComponent,gs as html,Xs as htmlC,Ks as htmlD,Qs as ifElse,Zs as ifTrue,jt as isBooleanProp,Ls as makeState,Js as model,ks as onced,le as prop,xs as query,Rs as queryAll,er as show,Vt as showError,Wt as showTagError,Ut as showTagWarn,Ht as showWarn,sr as slot,Ds as state,nr as styles,or as sync,Is as tag,Vs as throttled,Fe as updateDirective,Ws as watch,ir as when};