compelem 0.3.0-b1 → 0.3.1-b1

package/index.js

@@ -1,3649 +1,7 @@
 /**
-   * compelem v0.3.0-b1.1738940769
+   * compelem v0.3.1-b1.1739106920
    * A modern, reactive, fast, lightweight and flexible lib for building web components
    * @holyhigh2
    * https://github.com/holyhigh2/compelem
    */
-  import { toPath, get, isObject, isDefined, isUndefined, isEmpty, has, concat, defaults, merge, cloneDeep, each, kebabCase, toArray, last, startsWith, isFunction, isArray, initial, isBlank, join, split, set, camelCase, isEqual, replace, isPlainObject, flatMap, isString, test, size, assign, first, debounce, closest, once, bind as bind$1, isNil, trim, some, isNull, fval, omit, groupBy, reject, filter, slice, compact, remove, includes, find, throttle, map, replaceAll, snakeCase, toString, reduce, isMatch, clone, findIndex, call } from 'myfx';
-
-/**
- * 共享内容
- */
-const ChangedMap = new WeakMap;
-const EXP_KEY = /\s+\.?key\s*=/;
-var CollectorType;
-(function (CollectorType) {
-    CollectorType[CollectorType["CSS"] = 1] = "CSS";
-    CollectorType[CollectorType["COMPUTED"] = 2] = "COMPUTED";
-})(CollectorType || (CollectorType = {}));
-var DecoratorKey;
-(function (DecoratorKey) {
-    DecoratorKey["PROPS"] = "__deco_props";
-    DecoratorKey["STATES"] = "__deco_states";
-    DecoratorKey["COMPUTED"] = "__deco_computed";
-    DecoratorKey["WATCH"] = "__deco_watch";
-    DecoratorKey["EVENTS"] = "__deco_events";
-})(DecoratorKey || (DecoratorKey = {}));
-
-function showError(msg) {
-    console.error(`[CompElem]`, msg);
-}
-function showTagError(tagName, msg) {
-    console.error(`[CompElem <${tagName}>]`, msg);
-}
-function showWarn(...args) {
-    console.warn(`[CompElem]`, ...args);
-}
-//为依赖收集提供标准地址
-function _toUpdatePath(varPath) {
-    return toPath(varPath).join("-");
-}
-//获取父类构造
-function _getSuper(cls) {
-    return Object.getPrototypeOf(cls);
-}
-
-//装饰器类型
-var DecoratorType;
-(function (DecoratorType) {
-    DecoratorType["CLASS"] = "class";
-    DecoratorType["FIELD"] = "field";
-    DecoratorType["METHOD"] = "method";
-})(DecoratorType || (DecoratorType = {}));
-/**
- * 用于构造装饰器
- * @author holyhigh2
- */
-class Decorator {
-    /**
-     * 优先级，越大越先执行
-     */
-    static get priority() {
-        return 0;
-    }
-}
-
-const GetKeyFnName = 'getKey';
-const _DecoratorsKey = '__decorators';
-const _DecoratorMap = new WeakMap;
-/**
- * 装饰器包装类
- * 用于框架内部，表示class上的一个装饰器属性定义
- * 该定义在实例初始化时会产生装饰器实例属性
- */
-class DecoratorWrapper {
-    //execute 参数
-    args;
-    //装饰器参数
-    metadata;
-    decoratorClass;
-    instanceMap;
-    key; //装饰器唯一key
-    priority = 0;
-    constructor(args, metadata, decoratorClass) {
-        this.args = args;
-        this.metadata = metadata;
-        this.decoratorClass = decoratorClass;
-        this.priority = get(decoratorClass, 'priority', 0);
-        this.instanceMap = new WeakMap;
-    }
-    //在组件构造时调用
-    create(comp) {
-        let ins = new this.decoratorClass(...this.args);
-        //1. 校验targets
-        let targets = ins.targets;
-        let decoType = undefined;
-        let descriptor = this.metadata[2];
-        if (isObject(descriptor) && isDefined(get(descriptor, 'configurable'))) {
-            decoType = DecoratorType.METHOD;
-        }
-        else if (isUndefined(this.metadata[2])) {
-            decoType = DecoratorType.FIELD;
-        }
-        if (isEmpty(targets) || !decoType || !targets.includes(decoType)) {
-            showError(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${targets.join(',')}' bug got '${decoType}'`);
-            return;
-        }
-        ins.created(comp, ...this.metadata);
-        this.instanceMap.set(comp, ins);
-    }
-    beforeMount(comp, setReactive) {
-        let ins = this.instanceMap.get(comp);
-        ins.beforeMount(comp, setReactive, ...this.metadata);
-    }
-    mounted(comp, setReactive) {
-        let ins = this.instanceMap.get(comp);
-        ins.mounted(comp, setReactive, ...this.metadata);
-    }
-    updated(comp, changed) {
-        this.instanceMap.get(comp).updated(comp, changed);
-    }
-}
-//每个装饰器类中不同组件类中的重复key
-const DecoKeyMap = new WeakMap();
-/**
- * 该函数用于创建一个装饰器
- * @param decoClass 装饰器构造
- * @returns 装饰器函数
- */
-function decorator(decoClass) {
-    let fn = (...args) => {
-        return (...metadata) => {
-            let ctor = metadata[0].constructor;
-            let ary = get(ctor, _DecoratorsKey);
-            if (!has(ctor, _DecoratorsKey)) {
-                //继承父类
-                let parentAry = get(Object.getPrototypeOf(ctor), _DecoratorsKey);
-                ary = parentAry ? concat(parentAry) : [];
-                Reflect.defineProperty(ctor, _DecoratorsKey, {
-                    configurable: false,
-                    enumerable: false,
-                    value: ary
-                });
-            }
-            let kMap = {};
-            let k;
-            let getKey = get(decoClass, GetKeyFnName);
-            if (getKey) {
-                let compMap = DecoKeyMap.get(decoClass);
-                if (!compMap) {
-                    compMap = new WeakMap;
-                    DecoKeyMap.set(decoClass, compMap);
-                }
-                kMap = compMap.get(ctor);
-                if (!kMap) {
-                    kMap = {};
-                    compMap.set(ctor, kMap);
-                }
-                k = getKey(...args);
-                if (kMap[k])
-                    return kMap[k];
-            }
-            let dw = new DecoratorWrapper(args, metadata, decoClass);
-            kMap[k] = dw;
-            ary?.push(dw);
-            return dw;
-        };
-    };
-    _DecoratorMap.set(fn, true);
-    return fn;
-}
-
-//每个类需要监控的属性
-const ObservedAttrsMap = new WeakMap;
-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 (!/[a-z]/.test(propertyKey[0])) {
-        showError(`Prop '${propertyKey}' must be in CamelCase`);
-    }
-    let attrSet;
-    if (!has(target.constructor, DecoratorKey.PROPS)) {
-        const mixinProps = {};
-        let parentCtor = target.constructor;
-        while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-            merge(mixinProps, parentCtor[DecoratorKey.PROPS] ? cloneDeep(parentCtor[DecoratorKey.PROPS]) : {});
-        }
-        Reflect.defineProperty(target.constructor, DecoratorKey.PROPS, {
-            configurable: false,
-            enumerable: false,
-            value: mixinProps
-        });
-        attrSet = new Set();
-        each(mixinProps, (v, k) => {
-            if (v.attribute) {
-                let kbb = kebabCase(k);
-                attrSet?.add(kbb);
-            }
-        });
-        ObservedAttrsMap.set(target.constructor, attrSet);
-    }
-    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);
-        }
-        let kbb = kebabCase(propertyKey);
-        attrSet?.add(kbb);
-    }
-    //observeAttrs
-    if (!has(target.constructor, 'observedAttributes')) {
-        target.constructor.observedAttributes = [];
-    }
-    target.constructor.observedAttributes = toArray(attrSet);
-    target.constructor[DecoratorKey.PROPS][propertyKey] = options;
-}
-//内部接口
-const emptySet = new Set;
-function _getObservedAttrs(ctor) {
-    return ObservedAttrsMap.get(ctor) ?? emptySet;
-}
-
-/**
- * 用于提供全局state状态管理
- * @author holyhigh2
- */
-const EVENT_UPDATE = 'update';
-const Collector = {
-    collectWatch(comp, updater, subPath) {
-        let collectVarMap = WATCH_MAP.get(comp);
-        if (!collectVarMap) {
-            collectVarMap = {};
-            WATCH_MAP.set(comp, collectVarMap);
-        }
-        let list = collectVarMap[subPath];
-        if (!list)
-            list = collectVarMap[subPath] = [];
-        list.push(updater);
-    },
-    startCollect(comp, type) {
-        this.__collectType = type;
-        this.__collecting = comp;
-    },
-    setUpdater(updater) {
-        this.__updater = updater;
-    },
-    endCollect() {
-        this.__collecting = null;
-    },
-    //仅用于指令在构造时获取
-    __directiveQ: [],
-    setDirectiveQ(val) {
-        let lastVar = last(this.__directiveQ);
-        const vj = val ? val.join(',') : '';
-        const lj = lastVar ? lastVar.join(',') : '';
-        if (lastVar && vj === lj)
-            return;
-        if (lastVar && lastVar.length < val.length && startsWith(vj, lj)) {
-            this.__directiveQ[this.__directiveQ.length - 1] = val;
-            return;
-        }
-        this.__directiveQ.push(val);
-    },
-    popDirectiveQ() {
-        let rs = concat(this.__directiveQ);
-        this.__directiveQ = [];
-        return rs;
-    },
-    startRender(context) {
-        this.__renderCollecting = true;
-        this.__renderContext = context;
-    },
-    endRender(component) {
-        //注册依赖
-        this.__renderCollection.forEach((varPath) => {
-            component._regDeps(varPath, this.__renderContext);
-        });
-        this.__renderCollection.clear();
-        this.__renderCollecting = false;
-        this.__renderContext = null;
-    },
-    collect(prop) {
-        this.__renderCollection.add(prop);
-    },
-    clear() {
-        this.__directiveQ = [];
-    },
-    __updater: null,
-    __collecting: null,
-    __collectType: -1,
-    __renderCollection: new Set(),
-    __renderContext: null,
-    __renderCollecting: false,
-    __skipCheck: false
-};
-const OBJECT_META_DATA = new WeakMap();
-const OBJECT_VAR_PATH = new WeakMap();
-const COMPUTED_MAP = new WeakMap();
-const CSS_MAP = new WeakMap();
-const WATCH_MAP = new WeakMap();
-/**
- * 1. 初始化时obj都是普通对象
- * 2. OBJECT_VAR_PATH 首次是普通对象
- * 3. OBJECT_META_DATA 直接绑定代理对象
- * @param obj
- * @param context
- * @returns
- */
-function reactive(obj, context) {
-    if (!isObject(obj))
-        return obj;
-    const proxyObject = obj.__proxy ? obj : new Proxy(obj, {
-        get(target, prop, receiver) {
-            if (!prop)
-                return undefined;
-            const value = Reflect.get(target, prop, receiver);
-            if ((Collector.__renderCollecting || Collector.__collecting) && target.hasOwnProperty(prop)) {
-                let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-                let subChain = concat(chain, [prop]);
-                let subChainStr = subChain.join('-');
-                if (Collector.__renderCollecting) {
-                    Collector.collect(_toUpdatePath(subChain));
-                    Collector.setDirectiveQ(subChain);
-                }
-                else if (Collector.__collecting) {
-                    let collectVarMap;
-                    switch (Collector.__collectType) {
-                        case CollectorType.COMPUTED:
-                            collectVarMap = COMPUTED_MAP.get(Collector.__collecting);
-                            if (!collectVarMap) {
-                                collectVarMap = {};
-                                COMPUTED_MAP.set(Collector.__collecting, collectVarMap);
-                            }
-                            break;
-                        case CollectorType.CSS:
-                            collectVarMap = CSS_MAP.get(Collector.__collecting);
-                            if (!collectVarMap) {
-                                collectVarMap = {};
-                                CSS_MAP.set(Collector.__collecting, collectVarMap);
-                            }
-                            break;
-                    }
-                    let list = collectVarMap[subChainStr];
-                    if (!list)
-                        list = collectVarMap[subChainStr] = [];
-                    list.push(Collector.__updater);
-                }
-            }
-            return value;
-        },
-        set(target, prop, newValue, receiver) {
-            if (!prop)
-                return false;
-            let ov = target[prop];
-            if (!isObject(ov) && ov === newValue)
-                return true;
-            if (Number.isNaN(newValue) && Number.isNaN(ov))
-                return true;
-            let chain = OBJECT_VAR_PATH.get(receiver) ?? [];
-            let subChain = concat(chain, [prop]);
-            let sourceContext = OBJECT_META_DATA.get(receiver).from;
-            let propDefs = get(sourceContext.constructor, DecoratorKey.PROPS);
-            let stateDefs = get(sourceContext.constructor, DecoratorKey.STATES);
-            let hasChanged = get(propDefs, [subChain[0], 'hasChanged']) || get(stateDefs, [subChain[0], 'hasChanged']);
-            if (hasChanged) {
-                if (!hasChanged.call(sourceContext, newValue, ov))
-                    return true;
-            }
-            else {
-                //默认对比算法
-                if (ov === newValue && !ChangedMap.has(ov)) {
-                    return true;
-                }
-            }
-            if (propDefs && propDefs[prop] && target.__isData) {
-                if (propDefs[prop].sync) {
-                    sourceContext.emit(EVENT_UPDATE + ":" + prop, { value: newValue });
-                }
-            }
-            let deps = OBJECT_META_DATA.get(receiver)?.contextSet;
-            //get oldValue from sourceContext
-            let nv = newValue;
-            if (isObject(newValue) && !isFunction(newValue) && !(newValue instanceof Node) && !Object.isFrozen(newValue)) {
-                deps.forEach(dep => {
-                    let pathMap = OBJECT_META_DATA.get(receiver)?.pathMap;
-                    let pathAry = pathMap?.get(dep);
-                    if (!pathAry)
-                        return;
-                    subChain = concat(pathAry, [prop]);
-                    OBJECT_VAR_PATH.set(nv, subChain);
-                    nv = reactive(nv, dep);
-                    OBJECT_VAR_PATH.set(nv, subChain);
-                });
-            }
-            let rs = Reflect.set(target, prop, nv);
-            let pathMap = OBJECT_META_DATA.get(receiver).pathMap;
-            deps.forEach(dep => {
-                //view update
-                let pathAry = pathMap.get(dep);
-                if (!pathAry)
-                    return;
-                if (dep === sourceContext) {
-                    //fix the index change of array item
-                    if (chain.length > 1 && pathAry.length > 1 && chain[0] === pathAry[0]) {
-                        pathAry = chain;
-                    }
-                }
-                //数组length属性变动直接通知为数组自身变动
-                subChain = concat(pathAry, prop == 'length' && isArray(receiver) ? [] : [prop]);
-                //computed
-                let computedMap = COMPUTED_MAP.get(dep);
-                //css
-                let cssMap = CSS_MAP.get(dep);
-                //watch
-                let watchMap = WATCH_MAP.get(dep);
-                //recur path
-                if (computedMap || cssMap || watchMap) {
-                    let i = subChain.length;
-                    while (i) {
-                        let subPath = subChain.slice(0, i).join('-');
-                        if (watchMap) {
-                            const watchList = watchMap[subPath];
-                            if (i === subChain.length) {
-                                watchList?.forEach((wk) => {
-                                    let updater = wk();
-                                    updater.ov = ov;
-                                    // wk()(ov)
-                                    Queue.pushWatch(updater);
-                                });
-                            }
-                            else {
-                                watchList?.forEach((wk) => {
-                                    let updater = wk();
-                                    if (get(updater, 'deep')) {
-                                        // updater(ov)
-                                        updater.ov = ov;
-                                        Queue.pushWatch(updater);
-                                    }
-                                });
-                            }
-                        }
-                        if (computedMap) {
-                            let computedList = computedMap[subPath];
-                            if (!isEmpty(computedList)) {
-                                for (let l = 0; l < computedList.length; l++) {
-                                    const updater = computedList[l];
-                                    // updater()
-                                    Queue.pushComputed(updater);
-                                }
-                            }
-                        }
-                        if (cssMap) {
-                            let computedCssList = cssMap[subPath];
-                            if (!isEmpty(computedCssList)) {
-                                for (let l = 0; l < computedCssList.length; l++) {
-                                    const updater = computedCssList[l];
-                                    // updater()
-                                    Queue.pushCss(updater);
-                                }
-                            }
-                        }
-                        i--;
-                    }
-                }
-                let updater = dep._notify(ov, subChain);
-                Queue.pushNext(updater);
-            });
-            return rs;
-        }
-    });
-    if (!obj.__proxy) {
-        Reflect.defineProperty(obj, "__proxy", {
-            enumerable: false,
-            writable: false,
-            configurable: false,
-            value: true,
-        });
-    }
-    let chain = OBJECT_VAR_PATH.get(obj) ?? [];
-    if (Object.isExtensible(obj) && !OBJECT_META_DATA.get(proxyObject)) {
-        let contextSet = new Set();
-        contextSet.add(context);
-        //对象所属context
-        let pathMap = new WeakMap();
-        pathMap.set(context, chain);
-        OBJECT_META_DATA.set(proxyObject, {
-            from: context,
-            contextSet,
-            pathMap
-        });
-    }
-    else {
-        let deps = OBJECT_META_DATA.get(proxyObject).contextSet;
-        deps.add(context);
-        let pathMap = OBJECT_META_DATA.get(proxyObject).pathMap;
-        let chains = pathMap.get(context);
-        let subChain = concat(chain);
-        if (chains && chains.join('') !== subChain.join('')) {
-            let parentVar = get(context, initial(chains));
-            //处理数组元素更新，如 ary.1 -> ary.0
-            if (!isArray(parentVar)) {
-                showWarn(`The object is referenced by more than one @state '${subChain.join('.')},${chains.join('.')}'`);
-            }
-            chains = subChain;
-        }
-        else {
-            pathMap.set(context, subChain);
-        }
-    }
-    for (let k in obj) {
-        const v = obj[k];
-        if (isObject(v) && !v.__proxy && !isFunction(v) && !(v instanceof Node) && !Object.isFrozen(v)) {
-            OBJECT_VAR_PATH.set(v, concat(chain, [k]));
-            obj[k] = reactive(v, context);
-            OBJECT_VAR_PATH.set(obj[k], concat(chain, [k]));
-        }
-    }
-    return proxyObject;
-}
-class Queue {
-    static watchSet = new Set();
-    static computedSet = new Set();
-    static cssSet = new Set();
-    static nextSet = new Set();
-    static nextPending = false;
-    static next;
-    static {
-        const p = Promise.resolve();
-        const nextFn = Queue.flush;
-        Queue.next = () => {
-            p.then(nextFn);
-        };
-    }
-    static flush() {
-        Queue.nextPending = false;
-        let wq = Array.from(Queue.watchSet);
-        Queue.watchSet.clear();
-        let cq = Array.from(Queue.computedSet);
-        Queue.computedSet.clear();
-        let sq = Array.from(Queue.cssSet);
-        Queue.cssSet.clear();
-        let nq = Array.from(Queue.nextSet);
-        Queue.nextSet.clear();
-        wq.forEach(u => u(get(u, 'ov')));
-        cq.forEach(u => u());
-        sq.forEach(u => u());
-        nq.forEach(u => u());
-    }
-    static pushWatch(updater) {
-        Queue.watchSet.add(updater);
-    }
-    static pushComputed(updater) {
-        Queue.computedSet.add(updater);
-    }
-    static pushCss(updater) {
-        Queue.cssSet.add(updater);
-    }
-    static pushNext(updater) {
-        Queue.nextSet.add(updater);
-        if (!Queue.nextPending) {
-            Queue.nextPending = true;
-            Queue.next();
-        }
-    }
-}
-
-/**
- * 视图基类 为组件视图及指令子视图提供统一服务
- * @param spuerClass
- * @returns
- */
-function View(spuerClass) {
-    //mixin class
-    return class extends spuerClass {
-        __updatePoints;
-        /**
-         * 渲染上下文所属组件，仅用于指令
-         */
-        renderComponent;
-        buildView(tmpl) {
-            let comp = this instanceof CompElem ? this : this.renderComponent;
-            let [html, vars] = buildHTML(comp, tmpl);
-            let updatePoints = [];
-            let nodes = buildTmplate(updatePoints, html, vars, comp, this);
-            this.__updatePoints = updatePoints;
-            return nodes;
-        }
-        updateView(tmpl) {
-            if (isBlank(join(tmpl.strings)))
-                return;
-            if (!this.__updatePoints)
-                return;
-            let { vars } = tmpl;
-            let comp = this instanceof CompElem ? this : this.renderComponent;
-            for (let i = 0; i < this.__updatePoints.length; i++) {
-                const up = this.__updatePoints[i];
-                let varIndex = up.varIndex;
-                let oldValue = up.value;
-                let newValue = vars;
-                let node = up.node;
-                let indexSegs = split(varIndex, '-');
-                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) {
-                    if (!oldValue.di)
-                        continue; //指令还在异步执行中，不更新
-                    //指令
-                    newValue.di = oldValue.di;
-                    newValue.di.renderParams = newValue.varChain;
-                    newValue.di._renderArgs = newValue.args;
-                    newValue.point = oldValue.point;
-                    newValue.varPath = oldValue.varPath;
-                    oldValue.update(oldValue.point, newValue.args, oldValue.args);
-                }
-                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;
-                    let ck = camelCase(up.attrName);
-                    let propDefs = get(up.node.constructor, DecoratorKey.PROPS);
-                    if (propDefs) {
-                        let propDef = propDefs[ck];
-                        if (propDef && propDef.hasChanged && !propDef.hasChanged.call(this, newValue, oldValue))
-                            continue;
-                    }
-                    // if (isPlainObject(newValue) && isEqual(newValue, oldValue)) continue;
-                    // if (isArray(newValue) && isArray(oldValue) && isEqual(newValue, oldValue)) continue;
-                    //如果node是slot则触发组件的slot更新
-                    if (node instanceof CompElem) {
-                        node._updateProps({ [up.attrName]: newValue });
-                    }
-                    else if (node instanceof HTMLSlotElement) {
-                        comp._updateSlot(node.getAttribute('name') || 'default', up.attrName, newValue);
-                    }
-                }
-                else if (up.attrName && !up.isEvent) {
-                    //特性
-                    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.isTmpl) {
-                    //这里一定是子视图更新，子视图仅更新内部__expose
-                    if (newValue.strings.join() !== oldValue.tmpl.strings.join()) {
-                        up.value.updateView(newValue);
-                    }
-                    else if (newValue.vars.some((v) => isObject(v) && !isPlainObject(v)) || oldValue.tmpl.vars.some((v) => isObject(v) && !isPlainObject(v)) || !isEqual(newValue.vars, oldValue.tmpl.vars)) {
-                        up.value.updateView(newValue);
-                    }
-                    oldValue.tmpl = newValue;
-                    newValue = oldValue; //new SubView(newValue)
-                }
-                else if (up.isText) {
-                    let textNode = up.textNode.nextSibling;
-                    if (textNode && textNode === up.node.previousSibling) {
-                        textNode.textContent = newValue;
-                    }
-                    else {
-                        DomUtil.remove(up.textNode, up.node);
-                        DomUtil.insertBefore(up.node, [newValue]);
-                    }
-                }
-                up.value = newValue;
-            } //endfor
-        }
-    };
-}
-/**
- * 子视图，用于组件视图模板中的非指令子模版
- */
-class SubView extends View(Object) {
-    tmpl;
-    constructor(tmpl) {
-        super();
-        this._renderVars = get(tmpl, '_renderVars');
-        this.tmpl = tmpl;
-    }
-}
-
-const ATTR_CSS_LINK = "css-link";
-const PropTypeMap = {
-    boolean: Boolean,
-    string: String,
-    number: Number,
-    object: Object,
-    array: Array,
-    function: Function,
-    bigint: BigInt,
-    symbol: Symbol,
-    undefined: Object
-};
-const PrivatePreffix = '#';
-//组件静态样式
-const ComponentStyleMap = new WeakMap();
-let DefaultCss = [];
-/**
- * CompElem基类，意为组件元素。提供了基本内置属性及生命周期等必备接口
- * 每个组件都需要继承自该类
- *
- * @author holyhigh2
- */
-class CompElem extends View(HTMLElement) {
-    static __l_globalRule = document.createElement("style");
-    static {
-        document.head.appendChild(CompElem.__l_globalRule);
-    }
-    //设置全局/组件默认属性
-    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]/)) ;
-        });
-    }
-    #slotPropsMap = {};
-    #data = { '#slots': {} };
-    #reactiveData = {};
-    #updateSources = {};
-    #shadow;
-    #selfObserver;
-    //保存所有渲染上下文 {CompElem/Directive}
-    #renderContextList = {};
-    __events = {};
-    get [Symbol.toStringTag]() {
-        return this.constructor.name;
-    }
-    get reactiveData() {
-        return this.#reactiveData;
-    }
-    get attrs() {
-        return this.#attrs;
-    }
-    get props() {
-        return this.#props;
-    }
-    get renderRoot() {
-        return this.#renderRoot;
-    }
-    get renderRoots() {
-        return this.#renderRoots;
-    }
-    get parentComponent() {
-        return this.#parentComponent;
-    }
-    get slotHooks() {
-        return this.#slotHooks;
-    }
-    get css() {
-        return ComponentStyleMap.get(this.constructor);
-    }
-    get isMounted() {
-        return this.#mounted;
-    }
-    //slots列表中绝对不会出现slot元素
-    get slots() {
-        return this.#data['#slots'];
-    }
-    #attrs;
-    #props;
-    #renderRoot;
-    #renderRoots;
-    #parentComponent;
-    #slotsEl = {};
-    #slotHooks = {};
-    #slotNodes = {};
-    #mounted = false;
-    /**
-     * 是否自动插入插槽，如果需要控制插槽类型时，可以设置为false
-     */
-    static get autoSlot() {
-        return true;
-    }
-    //////////////////////////////////// styles
-    /**
-     * 组件样式，CSSStyleSheet可动态变更
-     */
-    static get styles() {
-        return [];
-    }
-    static get globalStyles() {
-        return [];
-    }
-    get styles() {
-        return [];
-    }
-    #inited = false;
-    constructor(...args) {
-        super();
-        //init props via constructor
-        if (size(args) === 1) {
-            this.#props = {};
-            assign(this.#props, first(args));
-        }
-        let render = this.render.bind(this);
-        this.render = function () {
-            let rs;
-            Collector.startRender(this);
-            rs = render();
-            Collector.endRender(this);
-            return rs;
-        };
-        /////////////////////////////////////////////////// styles
-        //global styles
-        let globalStyles = get(this.constructor, "globalStyles");
-        let beAttached = get(this.constructor, '_global_style_attached');
-        if (!isEmpty(globalStyles) && beAttached !== '1') {
-            let globalTextContent = "";
-            globalStyles.forEach((st) => {
-                if (isString(st)) {
-                    globalTextContent += st + "\n";
-                }
-            });
-            CompElem.__l_globalRule.textContent += globalTextContent;
-            set(this.constructor, '_global_style_attached', '1');
-        }
-        //component styles
-        let beAttached2 = ComponentStyleMap.get(this.constructor);
-        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 {
-                    styleSheets.push(st);
-                }
-            });
-            ComponentStyleMap.set(this.constructor, styleSheets);
-        }
-        /////////////////////////////////////////////////// shadow
-        this.#shadow = this.attachShadow({
-            mode: "open",
-            slotAssignment: get(this.constructor, "autoSlot", true) ? "named" : "manual",
-        });
-        this.#shadow.adoptedStyleSheets = [...DefaultCss, ...styleSheets];
-        //check link
-        let cssLink = this.attributes.getNamedItem(ATTR_CSS_LINK)?.value;
-        if (cssLink) {
-            const link = document.createElement("style");
-            link.textContent = `@import "${cssLink}"`;
-            this.#shadow.appendChild(link);
-        }
-        let filterSlotFn = debounce(this.#filterSlot, 20);
-        this.#selfObserver = new MutationObserver(mutations => {
-            for (let i = 0; i < mutations.length; i++) {
-                const mutation = mutations[i];
-                if (mutation.type === 'childList') {
-                    filterSlotFn.call(this);
-                }
-            }
-        });
-        //slots prop map
-        this._slotsPropMap = { default: [] };
-        /////////////////////////////////////////////////// decorators create
-        let ary = get(this.constructor, _DecoratorsKey);
-        ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => dw.create(this));
-        this.#updatedD = this.#update.bind(this);
-    }
-    #updatedD;
-    connectedCallback() {
-        //parent
-        let node = closest(this.parentNode, (node) => node instanceof CompElem || node.host instanceof CompElem, "parentNode");
-        this.#parentComponent = node
-            ? node instanceof CompElem
-                ? node
-                : node.host
-            : null;
-        this.__init();
-    }
-    disconnectedCallback() {
-        this.#selfObserver.disconnect();
-    }
-    //////////////////////////////////// lifecycles
-    //********************************** 首次渲染
-    //构造时上级传递的参数
-    __init() {
-        if (this.#inited)
-            return;
-        /////////////////////////////////////////////////// slots
-        this.#updateSlotsAry();
-        //check props
-        const props = this.#initProps();
-        this.propsReady(props);
-        for (const key in props) {
-            const v = props[key];
-            this.#data[key] = v;
-        }
-        this.#initStates();
-        //define reactive
-        each(this.#data, (v, k) => {
-            let descr = Reflect.getOwnPropertyDescriptor(this.#data, k);
-            Reflect.defineProperty(this, k, {
-                get() {
-                    let v = Reflect.get(this.#reactiveData, k);
-                    return descr?.get ? descr?.get() : v;
-                },
-                set(v) {
-                    if (descr?.set) {
-                        descr?.set(v);
-                    }
-                    else {
-                        Reflect.set(this.#reactiveData, k, v);
-                    }
-                },
-            });
-        });
-        Reflect.defineProperty(this.#data, '__isData', {
-            enumerable: false,
-            value: true
-        });
-        this.#reactiveData = reactive(this.#data, this);
-        //render
-        let tmpl = this.render();
-        let nodes = this.buildView(tmpl);
-        if (nodes) {
-            let children = toArray(nodes);
-            children.forEach((c) => {
-                this.#shadow.appendChild(c);
-            });
-            this.#renderRoots = children;
-            this.#renderRoot = children[0];
-        }
-        //filter slot before append to dom
-        this.#filterSlot();
-        this.beforeMount();
-        this.#selfObserver.observe(this, { childList: true });
-        /////////////////////////////////////////////////// before mount
-        const that = this;
-        let ary = get(this.constructor, _DecoratorsKey);
-        ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
-            dw.beforeMount(this, (key, value) => {
-                that.#reactiveData[key] = value;
-                return that.#reactiveData[key];
-            });
-        });
-        //watch
-        let watchMap = get(this.constructor, DecoratorKey.WATCH);
-        each(watchMap, (watchList, k) => {
-            watchList.forEach(v => {
-                let { source, options, handler } = v;
-                let fn = handler.bind(this);
-                let onceWatch = get(options, "once", false);
-                if (onceWatch) {
-                    fn = once(fn);
-                }
-                const updater = (function (ov) {
-                    let nv = get(this, source.replaceAll('-', '.'));
-                    fn(nv, ov, source);
-                }).bind(this);
-                let deep = get(options, "deep", false);
-                updater.deep = deep;
-                Collector.collectWatch(this, () => updater, k);
-                let immediate = get(options, "immediate", false);
-                if (!immediate)
-                    return;
-                let nv = get(this, source.replaceAll('-', '.'));
-                fn(nv, nv, source);
-            });
-        });
-        //computed
-        let computedMap = get(this.constructor, DecoratorKey.COMPUTED);
-        each(computedMap, (getter, propKey) => {
-            Collector.startCollect(this, CollectorType.COMPUTED);
-            Collector.setUpdater(() => {
-                this.#reactiveData[propKey] = getter.call(this);
-            });
-            this.#data[propKey] = getter.call(this);
-            Collector.endCollect();
-            Reflect.defineProperty(this, propKey, {
-                get() {
-                    return Reflect.get(this.#reactiveData, propKey);
-                },
-                set(v) {
-                    showTagError(this.tagName, "Cannot set a computed property '" + propKey + "'");
-                },
-            });
-        });
-        //events
-        let eventList = get(this.constructor, DecoratorKey.EVENTS);
-        eventList && eventList.forEach((ev) => {
-            let name = ev.name;
-            let options = assign({ target: document, once: false, passive: false, capture: false }, ev.options);
-            let listener = bind$1(ev.fn, this);
-            let target = options.target;
-            if (isFunction(target)) {
-                target = target.call(this, this);
-            }
-            if (!target) {
-                showTagError(this.tagName, "The target of @event('" + name + "',...) is invalid");
-                return;
-            }
-            target.addEventListener(name, listener, options);
-        });
-        //slot hook
-        each(this.#slotHooks, (v, k) => {
-            this.#updateSlot(k);
-        });
-        //instance dynamic style
-        Collector.startCollect(this, CollectorType.CSS);
-        let cssAry = [];
-        this.styles.forEach(st => {
-            if (!isFunction(st))
-                return;
-            let cssss = new CSSStyleSheet();
-            cssAry.push(cssss);
-            Collector.setUpdater(() => {
-                let css = st() ?? '';
-                cssss.replaceSync(css);
-            });
-            let css = st();
-            if (isBlank(css))
-                return;
-            cssss.replaceSync(css);
-        });
-        Collector.endCollect();
-        this.#shadow.adoptedStyleSheets = [...this.#shadow.adoptedStyleSheets, ...cssAry];
-        setTimeout(() => {
-            this.#mounted = true;
-            this.mounted();
-            ary && ary.forEach(dw => {
-                dw.mounted(this, (key, value) => {
-                    that.#reactiveData[key] = value;
-                    return that.#reactiveData[key];
-                });
-            });
-        }, 0);
-        this.#inited = true;
-    }
-    propsReady(props) { }
-    render() {
-        throw Error(`[CompElem <${this.tagName}>] Missing render()`);
-    }
-    beforeMount() { }
-    mounted() { }
-    #onSlogChange(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._setParentProps(props)
-                        node._updateProps(props);
-                        return;
-                    }
-                    each(props, (v, k) => {
-                        if (node instanceof HTMLSlotElement) {
-                            let compOfSlot = get(node, '__l_comp');
-                            if (compOfSlot) {
-                                let sname = node.name || 'default';
-                                let slotMap = compOfSlot.#slotPropsMap[sname];
-                                if (!slotMap) {
-                                    slotMap = compOfSlot.#slotPropsMap[sname] = { props: {} };
-                                }
-                                if (!slotMap.props) {
-                                    slotMap.props = {};
-                                }
-                                slotMap.props[k] = v;
-                                compOfSlot.#onSlogChange(node, sname);
-                            }
-                        }
-                        else {
-                            node.setAttribute(k, v);
-                        }
-                    });
-                });
-            });
-        }
-        //3. callback
-        this.slotChange(slot, name);
-    }
-    slotChange(slot, name) { }
-    attributeChangedCallback(attributeName, oldValue, newValue) {
-        this.#attrChanged(attributeName, oldValue, newValue);
-    }
-    //********************************** 更新
-    /**
-     * 是否需要更新，可获取变更属性
-     * 返回true时更新
-     */
-    shouldUpdate(changed) {
-        return true;
-    }
-    /**
-     * 1. 调用render
-     * 2. 更新@query/all
-     * 3. 更新ref
-     * 4. 更新prop到attr的映射
-     * @param changed
-     */
-    updated(changed) { }
-    /**
-     * 抛出自定义事件
-     * @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,
-        }));
-    }
-    #rootEvs = {};
-    /**
-     * 在root上绑定事件
-     * @param evName
-     * @param hook
-     */
-    on(evName, hook) {
-        if (!this.#rootEvs[evName]) {
-            this.#rootEvs[evName] = [];
-        }
-        let cbk = hook.bind(this);
-        this.#rootEvs[evName].push(cbk);
-        this.addEventListener(evName, cbk);
-    }
-    /**
-     * 下一帧执行
-     * @param cbk
-     */
-    nextTick(cbk) {
-        Queue.pushNext(cbk);
-    }
-    /**
-     * 强制更新一次视图
-     */
-    forceUpdate() {
-        each(this.#reactiveData, (v, k) => {
-            this.#updateSources[k] = {
-                value: undefined,
-                chain: undefined,
-            };
-        });
-        this.#update();
-    }
-    /**
-     * 由监控变量调用
-     * @param stateKey
-     * @param ov
-     * @param rootStateKey 如果是对象内部属性变更，会返回根属性名
-     * @returns
-     */
-    _notify(ov, chain) {
-        //todo  1. 取消data - 0这个层级的监控；需要验证删除行时的路径
-        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 === "slots" ? ['slots'] : varPath, oldValue: ov, end: varPath.length === chain.length };
-            if (isObject(v) && pathStr[0] != PrivatePreffix) {
-                ChangedMap.set(v, pathStr);
-            }
-        }
-        return this.#updatedD;
-    }
-    #update() {
-        if (size(this.#updateSources) < 1)
-            return;
-        const changed = this.#updateSources;
-        this.#updateSources = {};
-        //update decorators
-        let ary = get(this.constructor, _DecoratorsKey);
-        ary && ary.sort((a, b) => b.priority - a.priority).forEach(dw => {
-            dw.updated(this, changed);
-        });
-        let toBreak = !this.shouldUpdate(changed);
-        if (toBreak)
-            return;
-        let renderContextList = new Set();
-        //1. filter context
-        each(changed, ({ value, chain, oldValue }, k) => {
-            if (this.#renderContextList[k]) {
-                this.#renderContextList[k].forEach(cx => {
-                    renderContextList.add(cx);
-                });
-            }
-        });
-        //2. update context
-        renderContextList.forEach(context => {
-            if (context === this) {
-                this.updateView(this.render());
-            }
-            else {
-                //指令在这里仅更新视图
-                let rs = context.render(...(context._renderArgs ? context._renderArgs : []));
-                if (rs)
-                    context.updateView(rs);
-            }
-        });
-        //update slot view
-        this.#updateSlots.forEach((v) => {
-            this.#updateSlot(v);
-        });
-        this.updated(changed);
-        each(changed, ({ value, chain, oldValue }, k) => {
-            if (isObject(value) && ChangedMap.has(value)) {
-                ChangedMap.delete(value);
-            }
-        });
-    }
-    /**
-     * 1. 初始props中并未包含的属性，可从attributes取，且定义类型不是string时自动转换
-     * 2. 如果attributes中也未出现且必填报错
-     * 3. 否则设置默认值
-     * @returns 非props的attr集合
-     */
-    #initProps() {
-        let propDefs = get(this.constructor, DecoratorKey.PROPS);
-        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 = {};
-        each(propDefs, (def, key) => {
-            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;
-                }
-            }
-            let val = undefined;
-            if (isInited) {
-                val = isNil(parentProps[key]) ? defaultVal : parentProps[key];
-            }
-            else {
-                val = defaultVal;
-                let attr = attrs.getNamedItem(kebabCase(key)) ||
-                    attrs.getNamedItem(ATTR_PREFIX_PROP + kebabCase(key));
-                if (attr) {
-                    isInited = true;
-                    val = attr.value;
-                }
-            }
-            //required check
-            let isRequired = propDef.required;
-            if (isRequired && !isInited) {
-                showTagError(tagName, "Prop '" + key + "' is required");
-                return false;
-            }
-            val = this.#propTypeCheck(propDefs, key, val);
-            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.setAttribute(kebabCase(key), trim(val));
-            }
-            this.#data[key] = val;
-            rs[key] = val;
-        });
-        return Object.seal(rs);
-    }
-    //属性值检测
-    #propTypeCheck(propDefs, propKey, newValue) {
-        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) : fval(val, { html });
-            }
-            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') {
-                if (isString(val) && /(?:^true$)|(?:^false$)/.test(val)) {
-                    val = fval(val);
-                }
-                else if (isUndefined(val) || isBlank(val)) {
-                    val = true;
-                }
-            }
-        }
-        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 = get(this.constructor, DecoratorKey.STATES);
-        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);
-            }
-            this.#data[key] = val;
-        });
-    }
-    /**
-     * 由外部调用，在初始化及更新时。
-     * @param props
-     * @param attrs
-     */
-    #propsReady = debounce(this.propsReady, 100);
-    /**
-     * @deprecated
-     */
-    _setParentProps(props, attrs) {
-        if (this.#inited) {
-            let propDefs = get(this.constructor, DecoratorKey.PROPS);
-            //存在attrs表示已初始化完成
-            each(props, (v, k) => {
-                let ck = camelCase(k);
-                let propDef = propDefs[ck];
-                if (!propDef)
-                    return;
-                let ov = this.#data[ck];
-                v = this.#propTypeCheck(propDefs, ck, v);
-                if (propDef.hasChanged && !propDef.hasChanged.call(this, v, ov))
-                    return;
-                this.#data[ck] = v;
-                this._notify(ov, [ck]);
-            });
-            assign(this.#props, props);
-            assign(this.#attrs, attrs);
-            this.#propsReady(this.#props);
-        }
-    }
-    //todo 这里需要直接修改prop
-    _updateProps(props) {
-        let propDefs = get(this.constructor, DecoratorKey.PROPS);
-        //存在attrs表示已初始化完成
-        each(props, (v, k) => {
-            let ck = camelCase(k);
-            let propDef = propDefs[ck];
-            if (!propDef)
-                return;
-            let ov = this.#data[ck];
-            v = this.#propTypeCheck(propDefs, ck, v);
-            if (propDef.hasChanged && !propDef.hasChanged.call(this, v, ov))
-                return;
-            Collector.__skipCheck = true;
-            set(this, ck, v);
-            Collector.__skipCheck = false;
-        });
-        assign(this.#props, props);
-        this.#propsReady(this.#props);
-    }
-    _initProps(props, attrs) {
-        this.#props = merge(this.#props || {}, props);
-        this.#attrs = merge({}, attrs);
-    }
-    /**
-     * 绑定slot标签，render时调用
-     */
-    _bindSlot(slot, name, props) {
-        //1. 设置map
-        if (!this.#slotsEl[name]) {
-            this.#slotsEl[name] = slot;
-            Reflect.defineProperty(slot, '__l_comp', {
-                value: this
-            });
-        }
-        slot.addEventListener('slotchange', (e) => {
-            if (this.#inited)
-                this.#onSlogChange(slot, name === 'default' ? '' : name);
-        });
-        //3. 保存参数
-        if (!isEmpty(props)) {
-            let slotMap = this.#slotPropsMap[name];
-            if (!slotMap) {
-                slotMap = this.#slotPropsMap[name] = {};
-            }
-            if (props.nodeFilter) {
-                slotMap.filter = props.nodeFilter;
-            }
-            slotMap.props = omit(props, 'nodeFilter');
-        }
-    }
-    _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() {
-        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.COMMENT_NODE) return ''
-            if (node.nodeType === Node.TEXT_NODE)
-                return 'default';
-            if (node instanceof Element) {
-                return node.getAttribute('slot') || 'default';
-            }
-        });
-        if (isEmpty(groups)) {
-            if (!isEmpty(this.#data['#slots'])) {
-                this.#inited ? this.#reactiveData['#slots'] = {} : this.#data['#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.#inited ? this.#reactiveData['#slots'] = rs : this.#data['#slots'] = rs;
-    }
-    #updateSlot(name) {
-        let hook = this.#slotHooks[name];
-        if (!hook)
-            return;
-        let slotMap = this.#slotPropsMap[name];
-        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) {
-    }
-    //children变化时触发
-    #filterSlot() {
-        if (isEmpty(this.#slotPropsMap))
-            return;
-        each(this.slots, (slottedNodes, k) => {
-            if (isEmpty(slottedNodes))
-                return;
-            let slotMap = this.#slotPropsMap[k];
-            let filterNodes = slottedNodes;
-            if (slotMap) {
-                let filterFn = slotMap.filter;
-                if (isFunction(filterFn)) {
-                    filterNodes = filterFn(slottedNodes);
-                }
-                else if (isObject(filterFn)) {
-                    let type = filterFn.type;
-                    let maxCount = filterFn.maxCount;
-                    if (type) {
-                        let ts = isArray(type) ? type : [type];
-                        filterNodes = filter(slottedNodes, n => some(ts, t => n instanceof t));
-                    }
-                    if (maxCount > 0) {
-                        filterNodes = slice(slottedNodes, 0, maxCount);
-                    }
-                }
-            }
-            if (this.#shadow.slotAssignment === 'named') {
-                let removeNodes = [];
-                for (let i = 0; i < slottedNodes.length; i++) {
-                    const c = slottedNodes[i];
-                    if (!filterNodes.includes(c)) {
-                        removeNodes.push(c);
-                    }
-                }
-                while (removeNodes.length > 0) {
-                    let n = removeNodes.pop();
-                    n.parentNode?.removeChild(n);
-                }
-            }
-            else {
-                this.#slotsEl[k].assign(...filterNodes);
-            }
-            if (this.#inited)
-                this.#onSlogChange(this.#slotsEl[k], k === 'default' ? '' : k);
-        });
-    }
-    #attrChanged(name, oldValue, newValue) {
-        if (!this.isMounted)
-            return;
-        let observedAttrs = _getObservedAttrs(this.constructor);
-        if (observedAttrs.has(name)) {
-            let camelName = camelCase(name);
-            if (isNull(newValue)) {
-                let propDefs = get(this.constructor, DecoratorKey.PROPS);
-                //使用默认值
-                newValue = propDefs[camelName]._defaultValue;
-            }
-            this._updateProps({ [camelName]: newValue });
-        }
-    }
-    /**
-     * todo
-     * 1. 取消上溯递归路径
-     */
-    _regDeps(varPath, renderContext) {
-        let list = this.#renderContextList[varPath];
-        if (!list) {
-            list = this.#renderContextList[varPath] = new Set();
-        }
-        list.add(renderContext);
-        let restPath = varPath.split('-');
-        restPath.pop();
-        if (restPath.length < 1)
-            return;
-        let upperPath = restPath.join('-');
-        list = this.#renderContextList[upperPath];
-        if (!list) {
-            list = this.#renderContextList[upperPath] = new Set();
-        }
-        list.add(renderContext);
-    }
-}
-
-/**
- * @author holyhigh2
- */
-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;
-    isText = false;
-    //是否模板
-    isTmpl = false;
-    isDirective = false;
-    //表达式所在节点，可能是元素/文本
-    node;
-    //如果是文本位置，与node一起构成插入范围
-    textNode;
-    //是否组件
-    isComponent = false;
-    //如果在属性中，属性名
-    attrName;
-    //属性值模板
-    attrTmpl;
-    //是否组件属性
-    isProp = false;
-    //是否布尔属性
-    isToggleProp = false;
-    //是否事件
-    isEvent;
-    constructor(varIndex, node, attrName, attrTmpl) {
-        this.varIndex = varIndex;
-        this.node = node;
-        if (attrName)
-            this.attrName = attrName;
-        if (attrTmpl) {
-            this.attrTmpl = attrTmpl;
-        }
-    }
-}
-
-/**
- * 属性定义
- */
-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 = {}));
-/**
- * 交互点信息
- */
-class EnterPoint {
-    startNode; //依赖节点
-    endNode; //依赖节点2
-    type; //依赖类型
-    attrName; //依赖属性名
-    varIndex;
-    expressionChain; //所在层级序号 [parentVarIndex-varIndex-]+，如1-6 表示根的第2个表达式下的context的第7个表达式
-    nodes; //如果是插入节点，保存插入的节点数组
-    constructor(node, attrName, type) {
-        this.startNode = node;
-        this.attrName = attrName;
-        this.type = type;
-    }
-    setVarIndex(varIndex) {
-        this.varIndex = varIndex;
-    }
-    getNodes() {
-        let nextNode = this.startNode.nextSibling;
-        if (!this.endNode)
-            return [nextNode];
-        let rs = [];
-        while (nextNode && nextNode !== this.endNode) {
-            rs.push(nextNode);
-            nextNode = nextNode?.nextSibling;
-        }
-        return rs;
-    }
-}
-var MovePosition;
-(function (MovePosition) {
-    MovePosition["AFTER_BEGIN"] = "afterbegin";
-})(MovePosition || (MovePosition = {}));
-/**
- * Delay the actual time of execution of directive
- */
-class DirectiveWrapper extends Function {
-    diClass;
-    args;
-    di;
-    varPath;
-    point;
-    slotComponent;
-    varChain;
-    constructor(diClass, ...args) {
-        super();
-        this.diClass = diClass;
-        this.args = args;
-        this.varChain = Collector.popDirectiveQ();
-        this.di = new this.diClass();
-        this.di.renderParams = this.varChain;
-    }
-    //校验scope
-    checkScope(scopeType) {
-        let scopes = get(this.diClass, 'scopes');
-        if (!isEmpty(scopes) && !test(scopes.join(','), scopeType)) {
-            showError(`Directive '${this.diClass.name}' is out of scopes, expect '${scopes.join(',')}' bug got '${scopeType}'`);
-            return;
-        }
-    }
-    render(component) {
-        let di = this.di;
-        this.args;
-        if (!di.renderComponent) {
-            di.renderComponent = component;
-            // for (let i = 0; i < args.length; i++) {
-            //   const arg = args[i];
-            //   if (isFunction(arg)) {
-            //     args[i] = arg.bind(component)
-            //   }
-            // }
-        }
-        this.di = di;
-        di._renderArgs = this.args;
-        // let [nodes, expPos, expPosMap] = di.renderContext(...this.args)
-        // if (expPosMap) {
-        //   di.__expPosMap = expPosMap
-        // } else if (expPos) {
-        //   di.__expPos = expPos
-        // }
-        return this.di.render(...this.args);
-    }
-    update(point, newArgs, oldArgs) {
-        let tag = this.di.update(point, newArgs, oldArgs);
-        if (tag === DirectiveUpdateTag.NONE)
-            return;
-        let nodes = point.getNodes();
-        if (tag === DirectiveUpdateTag.REMOVE) {
-            for (let i = 0; i < nodes.length; i++) {
-                const n = nodes[i];
-                n.parentNode?.removeChild(n);
-            }
-        }
-        else if (tag === DirectiveUpdateTag.REPLACE) {
-            let newNodes = [];
-            for (let i = 0; i < nodes.length; i++) {
-                const n = nodes[i];
-                n.parentNode?.removeChild(n);
-            }
-            let rs = this.di.render(...newArgs);
-            let nnodes = this.di.buildView(rs);
-            newNodes = toArray(nnodes);
-            let fragment = document.createDocumentFragment();
-            fragment.append(...newNodes);
-            point.endNode.parentNode.insertBefore(fragment, point.endNode);
-        }
-        else if (tag === DirectiveUpdateTag.UPDATE) {
-            let newKeys = {};
-            let nodesToUpdate;
-            //原节点顺序
-            let oldSeq = [];
-            let newSeq = [];
-            let updateRs = this.di.render(...newArgs);
-            if (!updateRs) {
-                updateRs = new Template([], []);
-            }
-            if (isEmpty(nodes)) {
-                let nodes = this.di.buildView(updateRs);
-                point.startNode.after(...nodes);
-                return;
-            }
-            let newTmpls = {};
-            if (updateRs instanceof Template) {
-                updateRs.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 (!k)
-                    continue;
-                if (oldNodeMap[k]) {
-                    dupKey = k;
-                    break;
-                }
-                oldNodeMap[k] = treeNode;
-                oldSeq.push(k);
-                keyQ[k] = true;
-            }
-            if (dupKey) {
-                showError(`${camelCase(this.diClass.name)} - duplicate key '${dupKey}'`);
-                return;
-            }
-            let updateQ = newKeys;
-            const parentNode = point.startNode.parentNode;
-            //compare
-            let adds = [];
-            let dels = [];
-            //计算del
-            each(keyQ, (v, k) => {
-                if (!updateQ[k]) {
-                    dels.push(k);
-                    delete keyQ[k];
-                    remove(oldSeq, k);
-                }
-            });
-            //计算move
-            if (!isEmpty(newSeq)) {
-                let lastMoveNodeId = '';
-                let lastMoveIndex = -1;
-                let lastGroup = [];
-                let idWeightMap = new Map();
-                for (let i = 0; i < newSeq.length; i++) {
-                    const nodeId = newSeq[i];
-                    let oldI = oldSeq.findIndex(c => c === nodeId);
-                    if (oldI > -1 && oldI !== i) {
-                        if (lastMoveIndex < 0 || lastMoveIndex - oldI == 1) {
-                            let lastEl = last(lastGroup);
-                            lastGroup.push({ nodeId, targetId: i === 0 ? MovePosition.AFTER_BEGIN : (lastEl ? lastEl.nodeId : newSeq[i - 1]) });
-                        }
-                        else {
-                            idWeightMap.set(lastGroup.length, { group: lastGroup, targetId: '' });
-                            // idWeightMap[lastGroup.length] = { group: lastGroup, targetId: '' }
-                            lastGroup = [];
-                            lastGroup.push({ nodeId, targetId: oldSeq[oldI] });
-                        }
-                        lastMoveIndex = oldI;
-                    }
-                    else if (oldI < 0) {
-                        let prev = lastMoveNodeId ? oldNodeMap[lastMoveNodeId] || point.endNode : point.startNode;
-                        //add
-                        adds.push({ prevNode: prev, newkey: nodeId });
-                    }
-                    lastMoveNodeId = nodeId;
-                }
-                if (isEmpty(idWeightMap) && lastGroup.length > 0) {
-                    idWeightMap.set(lastGroup.length, { group: lastGroup, targetId: '' });
-                    // idWeightMap[lastGroup.length] = { group: lastGroup, targetId: '' }
-                }
-                let keys = idWeightMap.keys().toArray();
-                let keyNums = keys.sort((a, b) => a - b);
-                if (keys.length > 0) {
-                    if (keys.length < 2) {
-                        //如果仅有一组，留最后一个节点
-                        let { group } = idWeightMap.get(keyNums[0]); //idWeightMap[keyNums[0]]
-                        initial(group).forEach(({ targetId, nodeId }) => {
-                            let srcEl = oldNodeMap[nodeId];
-                            let target;
-                            if (targetId === MovePosition.AFTER_BEGIN) {
-                                target = point.startNode;
-                                target.after(srcEl);
-                            }
-                            else {
-                                target = oldNodeMap[targetId];
-                                target.after(srcEl);
-                            }
-                        });
-                    }
-                    else {
-                        //如果多组，留最后一组
-                        console.debug('todo....');
-                    }
-                } //endif
-                console.debug('test....');
-            }
-            if (adds.length > 0) {
-                this.#addNodes(adds, newTmpls, newSeq);
-            }
-            adds.forEach(v => {
-                let k = v.newkey;
-                let treeNode = this.newNodeMap[k];
-                let prevNode = v.prevNode;
-                if (prevNode === point.endNode) {
-                    prevNode.before(treeNode);
-                }
-                else if (prevNode === point.startNode) {
-                    prevNode.after(treeNode);
-                }
-                else {
-                    prevNode.after(treeNode);
-                }
-            });
-            dels.forEach(k => {
-                let vi = oldSeq.findIndex(s => s == k);
-                this.#removeNode(vi);
-                // remove(adjustedQ, ak => ak === k)
-                let treeNode = oldNodeMap[k];
-                if (treeNode && treeNode.parentNode) {
-                    parentNode.removeChild(treeNode);
-                }
-            });
-            //reset varIndex
-            this.di.__updatePoints.forEach(up => {
-                if (!up.key) {
-                    up.key = up.value.tmpl.getKey();
-                }
-                const i = newSeq.findIndex(s => s == up.key);
-                up.varIndex = i;
-            });
-            this.di.updateView(updateRs);
-        }
-    }
-    getDirective() {
-        return this.di;
-    }
-    newNodeMap = {};
-    #addNodes(adds, newTmpls, newSeq) {
-        const combStrings = [];
-        const combVars = [];
-        adds.forEach(add => {
-            let k = add.newkey;
-            combStrings.push('');
-            combVars.push(newTmpls[k]);
-        });
-        combStrings.push('');
-        let tmpl = new Template(combStrings, combVars);
-        let originalUps = this.di.__updatePoints;
-        let nodes = this.di.buildView(tmpl);
-        this.di.__updatePoints.forEach((up, i) => {
-            const k = up.value.tmpl.getKey();
-            up.key = k;
-        });
-        this.di.__updatePoints.push(...originalUps);
-        nodes.forEach((n) => {
-            if (n instanceof HTMLElement)
-                this.newNodeMap[n.getAttribute('key')] = n;
-        });
-    }
-    //对于foreach指令，key就是序号
-    #removeNode(key) {
-        remove(this.di.__updatePoints, (v, k) => {
-            if (v.varIndex == key) {
-                DomUtil.remove(v.node, v.textNode);
-                return true;
-            }
-        });
-    }
-}
-/**
- * 返回指令调用函数
- * @param di
- * @returns
- */
-function directive(diClass) {
-    return (...args) => {
-        let wrapper = null;
-        //todo 可能存在非返回模板函数开启了依赖监控
-        args.forEach((v, i) => {
-            if (isFunction(v)) {
-                let cbk = v;
-                args[i] = function (...ps) {
-                    let di = wrapper.di;
-                    Collector.startRender(di);
-                    let rs = cbk.call(di.renderComponent, ...ps);
-                    Collector.endRender(di.renderComponent);
-                    return rs;
-                };
-            }
-        });
-        wrapper = new DirectiveWrapper(diClass, ...args);
-        return wrapper;
-    };
-}
-
-/*************************************************************
- * 扩展事件
- * @author holyhigh2
- *
- * resize
- * outside[.mousedown/up/click/dblclick] 默认click
- * mutate[.attr/child/char/tree]
- *
- *************************************************************/
-const ExtEvNames = ['resize', 'outside', 'mutate'];
-///////////////////////////////////////////////// resize
-const AllResizeEls = new WeakMap;
-const AllOutsideDownEls = [];
-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) {
-    if (AllResizeEls.has(node))
-        return;
-    AllResizeEls.set(node, cbk);
-    resizeObserver.observe(node);
-}
-///////////////////////////////////////////////// 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, mutation.target);
-        }
-    }
-});
-function addMutation(node, cbk, parts) {
-    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
-    });
-}
-///////////////////////////////////////////////// outside
-document.addEventListener('mousedown', e => {
-    let t = e.target;
-    AllOutsideDownEls.forEach(([node, cbk]) => {
-        if (!node.contains(t)) {
-            let ev = new CustomEvent('outside', {
-                bubbles: false,
-                cancelable: false,
-                detail: {
-                    currentTarget: node,
-                    event: e
-                },
-            });
-            cbk(ev, node);
-        }
-    });
-}, false);
-function addOutsideMouseDown(node, cbk) {
-    AllOutsideDownEls.push([node, cbk]);
-}
-function isExtEvent(evName) {
-    return ExtEvNames.includes(evName);
-}
-function addExtEvent(evName, node, cbk, parts) {
-    if (evName === 'resize') {
-        addResize(node, cbk);
-    }
-    else if (evName === 'outside') {
-        switch (parts[0]) {
-            case 'mousedown':
-                addOutsideMouseDown(node, cbk);
-                break;
-        }
-    }
-    else if (evName === 'mutate') {
-        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_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 = ":";
-function addEvent(fullName, cbk, node, component) {
-    let parts = fullName.split('.');
-    let evName = parts.shift();
-    let isOnce = parts.includes(MODI_EV_ONCE);
-    let c = cbk;
-    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)) {
-        addExtEvent(evName, node, c, parts);
-        return c;
-    }
-    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 (!checkKeys.includes(e.key.toLowerCase()))
-                return;
-        }
-        c(e, node);
-    };
-    node.addEventListener(evName, listener);
-    //record
-    let evAry = component.__events[evName];
-    if (!evAry)
-        evAry = component.__events[evName] = [];
-    evAry.push([node, listener]);
-    return listener;
-}
-
-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 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';
-/**
- * 提供渲染函数相关操作
- * @author holyhigh2
- */
-/**
- * 高性能dom生成及变量绑定算法
- * 1. 使用占位符拼接HTML字符串，占位符与变量需要按照顺序对应
- * 2. 插入dom片段，并遍历元素+注释节点, 搜索占位符
- *  1. 按顺序遍历所有attr，发现一个属性值含有占位符时，标记节点及属性名，以便变量可以进行绑定（ 如果key是事件/ref则内容仅允许一个占位符）
- *  2. 如果是注释节点
- *    1. 在后面追加同内容注释节点，标记两个节点，以便变量可以进行绑定
- *    2. 在中间插入变量内容
- * 3. 只有表达式是一个指令时才能绑定依赖
- * @param component
- * @param tmpl
- * @returns [html,vars]
- */
-function buildHTML(component, tmpl) {
-    let html = "";
-    let vars = concat(tmpl.vars);
-    let l = tmpl.strings.length - 1;
-    let vl = tmpl.vars.length - 1;
-    for (let i = 0; i <= l; i++) {
-        const str = tmpl.strings[i];
-        let val = get(tmpl.vars, i, '');
-        if (val && val.di) {
-            let rs = val.render(component);
-            if (rs instanceof Template) {
-                let [h, v] = buildHTML(component, rs);
-                Reflect.defineProperty(val, '_renderVars', { value: v });
-                // set(val, '_renderVars', v)
-                val = PLACEHOLDER_DI_START + h + PLACEHOLDER_DI_END;
-            }
-            else {
-                val = rs ?? PLACEHOLDER;
-            }
-        }
-        else if (val instanceof Template) {
-            let [h, v] = buildHTML(component, val);
-            Reflect.defineProperty(val, '_renderVars', { value: v });
-            // set(val, '_renderVars', v)
-            val = PLACEHOLDER_TMPL_START + h + PLACEHOLDER_TMPL_END;
-            // vars.splice(i + offset, 1, ...v)
-            // offset += v.length
-        }
-        else {
-            val = i > vl ? "" : PLACEHOLDER;
-        }
-        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();
-    return [html, vars];
-}
-const PLACEHOLDER_DI_START = "<!--c_ui-pl_di-start-->";
-const PLACEHOLDER_DI_END = "<!--c_ui-pl_di-end-->";
-const PLACEHOLDER_TMPL_START = "<!--c_ui-pl_tmpl-start-->";
-const PLACEHOLDER_TMPL_END = "<!--c_ui-pl_tmpl-end-->";
-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, component, viewContext) {
-    const container = document.createElement("div");
-    container.innerHTML = html;
-    //遍历dom
-    const nodeIterator = document.createNodeIterator(container, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
-    let currentNode;
-    let varIndex = 0;
-    let slotComponent = null;
-    let startDiCommentNode;
-    let startDiCommentNodeStack = [];
-    let startDiStack = [];
-    let startDiUpdatePointStack = [];
-    let updatePointsStack = [updatePoints];
-    let varStack = [];
-    let varIndexStack = [];
-    while ((currentNode = nodeIterator.nextNode())) {
-        if (currentNode instanceof HTMLElement || currentNode instanceof SVGElement) {
-            if (currentNode instanceof CompElem) {
-                slotComponent = currentNode;
-            }
-            else {
-                if (!slotComponent?.contains(currentNode)) {
-                    slotComponent = null;
-                }
-            }
-            let props = {};
-            let attrs = toArray(currentNode.attributes);
-            for (let i = 0; i < attrs.length; i++) {
-                const attr = attrs[i];
-                let { name, value } = attr;
-                if (name === SLOT_KEY_PROPS) {
-                    let slotName = currentNode.getAttribute('name') || 'default';
-                    if (slotComponent) {
-                        let ary = slotComponent._slotsPropMap[slotName];
-                        if (!ary) {
-                            ary = slotComponent._slotsPropMap[slotName] = [];
-                        }
-                        ary.push(currentNode);
-                    }
-                } //endif
-                if (startsWith(name, PLACEHOLDER_PREFFIX)) {
-                    let val = vars[varIndex];
-                    //support directive only for now
-                    if (val instanceof DirectiveWrapper) {
-                        val.checkScope(EnterPointType.TAG);
-                        let point = new EnterPoint(currentNode, name.substring(1), EnterPointType.TAG);
-                        val.point = point;
-                        val.di.slotComponent = slotComponent;
-                        val.di.renderComponent = component;
-                        let po = new UpdatePoint(varIndex, currentNode);
-                        po.isDirective = true;
-                        po.value = val;
-                        po.isComponent = !!slotComponent;
-                        updatePoints.push(po);
-                        varIndex++;
-                        val.di.created(point, ...val.args);
-                    }
-                    currentNode.removeAttribute(name);
-                    continue;
-                } //endif
-                //@event.stop.prevent.debounce
-                if (name[0] === ATTR_PREFIX_EVENT) {
-                    let cbk = (e) => { };
-                    if (PLACEHOLDER_EXP.test(value)) {
-                        let val = vars[varIndex];
-                        if (!isFunction(val)) {
-                            showTagError(currentNode.tagName, `Event '${name}' must be a function`);
-                            continue;
-                        }
-                        cbk = val.bind(component);
-                        let po = new UpdatePoint(varIndex, currentNode, name.replace(/\.|\?|@/, ''), value);
-                        po.isComponent = !!slotComponent;
-                        po.isEvent = true;
-                        updatePoints.push(po);
-                        varIndex++;
-                    }
-                    addEvent(name.substring(1), cbk, currentNode, component);
-                    currentNode.removeAttribute(name);
-                    continue;
-                } //endif
-                if (name === ATTR_REF) {
-                    if (PLACEHOLDER_EXP.test(value)) {
-                        let val = vars[varIndex];
-                        if (!has(val, 'current')) {
-                            showTagError(currentNode.tagName, `Ref must be a RefObject`);
-                            continue;
-                        }
-                        varIndex++;
-                        val.current = currentNode;
-                    }
-                    currentNode.removeAttribute(name);
-                    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, currentNode, name.replace(/\.|\?|@/, ''), value);
-                    updatePoints.push(po);
-                    po.isComponent = !!slotComponent;
-                    if (name[0] === ATTR_PREFIX_PROP ||
-                        name[0] === ATTR_PREFIX_BOOLEAN ||
-                        name[0] === ATTR_PREFIX_REF) {
-                        if (val instanceof DirectiveWrapper) {
-                            val.checkScope(EnterPointType.PROP);
-                            let point = new EnterPoint(currentNode, name.substring(1), EnterPointType.PROP);
-                            val.point = point;
-                            val.slotComponent = slotComponent;
-                            po.value = val;
-                            po.isDirective = true;
-                            if (val) {
-                                val.di.created(val.point, ...val.args);
-                            }
-                        }
-                        else if (name[0] === ATTR_PREFIX_BOOLEAN) {
-                            po.isToggleProp = true;
-                            po.value = !!val;
-                            if (po.value)
-                                currentNode.setAttribute(name.substring(1), '');
-                        }
-                        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 dw;
-                        if (val instanceof DirectiveWrapper) {
-                            let type = EnterPointType.ATTR;
-                            if (name === "class") {
-                                type = EnterPointType.CLASS;
-                            }
-                            else if (name === "style") {
-                                type = EnterPointType.STYLE;
-                            }
-                            val.checkScope(type);
-                            po.isDirective = true;
-                            let point = new EnterPoint(currentNode, name, type);
-                            val.point = point;
-                            val.di.slotComponent = slotComponent;
-                            val.di.renderComponent = component;
-                            dw = val;
-                            // val.di.created(point, ...val.args)
-                            val = '';
-                        }
-                        value = replace(value, PLACEHOLDER_EXP, val);
-                        //回填
-                        attr.value = value;
-                        if (dw) {
-                            dw.di.created(dw.point, ...dw.args);
-                        }
-                    }
-                    varIndex++;
-                } //endif
-            } //endfor
-            if (currentNode instanceof CompElem) {
-                currentNode._initProps(props);
-            }
-            else if (currentNode instanceof HTMLSlotElement) {
-                component._bindSlot(currentNode, currentNode.name || 'default', props);
-            }
-        }
-        else {
-            let comment = currentNode;
-            let ph = `<!--${comment.nodeValue}-->`;
-            if (ph === PLACEHOLDER_DI_START) {
-                if (startDiCommentNode) {
-                    startDiCommentNodeStack.push(startDiCommentNode);
-                }
-                startDiCommentNode = comment;
-                let val = vars[varIndex];
-                let po = new UpdatePoint(varIndex, currentNode);
-                po.isComponent = !!slotComponent;
-                po.isDirective = true;
-                po.value = val;
-                let pType = slotComponent ? EnterPointType.SLOT : EnterPointType.TEXT;
-                let point = new EnterPoint(startDiCommentNode, "", pType);
-                val.point = point;
-                val.di.slotComponent = slotComponent;
-                val.di.renderComponent = component;
-                startDiStack.push(val);
-                updatePoints.push(po);
-                startDiUpdatePointStack.push(po);
-                //stack updatePoints
-                updatePoints = [];
-                updatePointsStack.push(updatePoints);
-                varIndex++;
-                //stack vars
-                varIndexStack.push(varIndex);
-                varStack.push(vars);
-                vars = val._renderVars;
-                varIndex = 0;
-                continue;
-            }
-            else if (ph === PLACEHOLDER_DI_END) {
-                startDiUpdatePointStack.pop().textNode = comment;
-                let startDi = startDiStack.pop();
-                startDi.point.endNode = comment;
-                //结束时调用created
-                startDi.di.created(startDi.point, ...startDi.args);
-                startDiCommentNode = startDiCommentNodeStack.pop();
-                startDi.di.__updatePoints = updatePoints;
-                updatePointsStack.pop();
-                updatePoints = last(updatePointsStack);
-                //restore vars
-                vars = varStack.pop();
-                varIndex = varIndexStack.pop();
-            }
-            else if (ph === PLACEHOLDER_TMPL_START) {
-                if (startDiCommentNode) {
-                    startDiCommentNodeStack.push(startDiCommentNode);
-                }
-                startDiCommentNode = comment;
-                let val = vars[varIndex];
-                let po = new UpdatePoint(varIndex, currentNode);
-                po.isComponent = !!slotComponent;
-                po.isTmpl = true;
-                let parentDi = last(startDiStack);
-                if (parentDi && get(parentDi, 'diClass.name') === 'ForEach') {
-                    po.key = val.getKey();
-                }
-                else if (viewContext.constructor.name == 'ForEach') {
-                    po.key = val.getKey();
-                }
-                val = po.value = new SubView(val);
-                let pType = slotComponent ? EnterPointType.SLOT : EnterPointType.TEXT;
-                let point = new EnterPoint(startDiCommentNode, "", pType);
-                val.point = point;
-                val.slotComponent = slotComponent;
-                val.renderComponent = component;
-                startDiStack.push(val);
-                updatePoints.push(po);
-                startDiUpdatePointStack.push(po);
-                //stack updatePoints
-                updatePoints = [];
-                updatePointsStack.push(updatePoints);
-                varIndex++;
-                //stack vars
-                varIndexStack.push(varIndex);
-                varStack.push(vars);
-                vars = val._renderVars;
-                varIndex = 0;
-                continue;
-            }
-            else if (ph === PLACEHOLDER_TMPL_END) {
-                startDiUpdatePointStack.pop().textNode = comment;
-                let startDi = startDiStack.pop();
-                startDi.point.endNode = comment;
-                startDiCommentNode = startDiCommentNodeStack.pop();
-                startDi.__updatePoints = updatePoints;
-                updatePointsStack.pop();
-                updatePoints = last(updatePointsStack);
-                //restore vars
-                vars = varStack.pop();
-                varIndex = varIndexStack.pop();
-            }
-            if (ph !== PLACEHOLDER) {
-                continue;
-            }
-            let po = new UpdatePoint(varIndex, currentNode);
-            updatePoints.push(po);
-            po.isComponent = !!slotComponent;
-            po.isText = true;
-            let val = vars[varIndex];
-            let startComment;
-            //插入start占位符
-            startComment = document.createComment(`compelem-ui-${varIndex}-child-start`);
-            comment.parentNode.insertBefore(startComment, comment);
-            comment.nodeValue = `compelem-ui-${varIndex}-child-end`;
-            po.textNode = startComment;
-            if (val instanceof DirectiveWrapper) {
-                po.isDirective = true;
-                po.value = val;
-                let pType = slotComponent ? EnterPointType.SLOT : EnterPointType.TEXT;
-                // directives.push(val)
-                let point = new EnterPoint(startComment, "", pType);
-                point.endNode = comment;
-                val.point = point;
-                val.di.slotComponent = slotComponent;
-                val.di.renderComponent = component;
-                val.di.created(point, ...val.args);
-                val = '';
-            }
-            else if (val instanceof Template) {
-                po.isTmpl = true;
-                po.value = val;
-                let [html, vars] = buildHTML(component, val);
-                val = buildTmplate(updatePoints, html, vars, component, viewContext);
-            }
-            else {
-                po.value = val;
-            }
-            varIndex++;
-            if (isUndefined(val))
-                continue;
-            if (val instanceof NodeList) {
-                let fragment = document.createDocumentFragment();
-                fragment.append(...val);
-                comment.parentNode.insertBefore(fragment, comment);
-            }
-            else if (val instanceof Element) {
-                comment.parentNode.insertBefore(val, comment);
-            }
-            else if (trim(val)) {
-                let text = document.createTextNode(val);
-                comment.parentNode.insertBefore(text, comment);
-            }
-        }
-    }
-    return container.childNodes;
-}
-const DomUtil = {
-    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;
-        }
-    }
-};
-//////////////////////////////////////////////////// interfaces
-/**
- * 标签函数，用于构建模板
- * @param strings
- * @param vars
- */
-function html(strings, ...vars) {
-    return new Template(isString(strings) ? [strings] : strings, vars);
-}
-const EXP_STR = /([a-z0-9"'])\s*>\s*</img;
-/**
- * 使用初始值创建一个引用对象
- * @param initValue
- * @returns
- */
-function createRef(initValue) {
-    return { current: initValue };
-}
-
-/**
- * 视图模板
- * @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, comp);
-        return reduce(nodes, (a, v) => a + v.outerHTML, '');
-    }
-}
-
-function computed(target, propertyKey, descriptor) {
-    if (!descriptor.get) {
-        showError(`Computed '${propertyKey}' must be a getter`);
-    }
-    if (!has(target.constructor, DecoratorKey.COMPUTED)) {
-        target.constructor[DecoratorKey.COMPUTED] = isEmpty(target.constructor[DecoratorKey.COMPUTED]) ? {} : cloneDeep(target.constructor[DecoratorKey.COMPUTED]);
-    }
-    target.constructor[DecoratorKey.COMPUTED][propertyKey] = descriptor.get;
-}
-
-/**
- * 绑定非视图事件，如window/document等
- * @param eventName 事件名
- * @param immediate 立即执行
- * @param deep 深度监控
- */
-function event(eventName, options) {
-    return (target, name, descriptor) => {
-        if (!has(target.constructor, DecoratorKey.EVENTS)) {
-            target.constructor[DecoratorKey.EVENTS] = isEmpty(target.constructor[DecoratorKey.EVENTS]) ? [] : cloneDeep(target.constructor[DecoratorKey.EVENTS]);
-        }
-        target.constructor[DecoratorKey.EVENTS].push({ name: eventName, options, fn: target[name] });
-    };
-}
-
-/**
- * 缓存策略
- */
-var QueryCache;
-(function (QueryCache) {
-    QueryCache["ONCE"] = "once";
-    QueryCache["UPDATABLE"] = "updatable"; //每次update结束都会更新缓存
-})(QueryCache || (QueryCache = {}));
-/**
- * css查询装饰器
- * @example
- *  @query('l-popup', QueryCache.ONCE)
- */
-class QueryDecorator extends Decorator {
-    static get priority() {
-        return Number.MAX_VALUE;
-    }
-    created(component, classProto, fieldName, ...args) {
-    }
-    mounted(component, setReactive, ...args) {
-    }
-    get targets() {
-        return [DecoratorType.FIELD];
-    }
-    selector;
-    cache;
-    result;
-    constructor(selector, cache) {
-        super();
-        this.selector = selector;
-        this.cache = cache;
-    }
-    static getKey(selector) {
-        return selector;
-    }
-    getter(component) {
-        this.result = component.shadowRoot?.querySelector(this.selector);
-    }
-    beforeMount(component, setReactive, classProto, fieldName, ...args) {
-        const that = this;
-        Reflect.defineProperty(component, fieldName, {
-            get() {
-                if (that.result && that.cache) {
-                    return that.result;
-                }
-                that.getter(component);
-                return that.result;
-            }
-        });
-    }
-    updated(component, changed) {
-        if (this.cache !== QueryCache.UPDATABLE)
-            return;
-        this.getter(component);
-    }
-}
-class QueryAllDecorator extends QueryDecorator {
-    getter(component) {
-        this.result = component.shadowRoot?.querySelectorAll(this.selector);
-    }
-}
-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 (!has(target.constructor, DecoratorKey.STATES)) {
-        const mixinStates = {};
-        let parentCtor = target.constructor;
-        while ((parentCtor = _getSuper(parentCtor)) !== CompElem) {
-            merge(mixinStates, parentCtor[DecoratorKey.STATES] ? cloneDeep(parentCtor[DecoratorKey.STATES]) : {});
-        }
-        Reflect.defineProperty(target.constructor, DecoratorKey.STATES, {
-            configurable: false,
-            enumerable: false,
-            value: mixinStates
-        });
-    }
-    target.constructor[DecoratorKey.STATES][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) {
-            //attrChange
-            if (target.prototype.hasOwnProperty('attributeChangedCallback')) {
-                let cbk = target.prototype.attributeChangedCallback;
-                target.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
-                    CompElem.prototype.attributeChangedCallback.call(this, name, oldValue, newValue);
-                    cbk.call(this, name, oldValue, newValue);
-                };
-            }
-            //connectedCallback
-            if (target.prototype.hasOwnProperty('connectedCallback')) {
-                let cbk = target.prototype.connectedCallback;
-                target.prototype.connectedCallback = function () {
-                    CompElem.prototype.connectedCallback.call(this);
-                    cbk.call(this);
-                };
-            }
-            //disconnectedCallback
-            if (target.prototype.hasOwnProperty('disconnectedCallback')) {
-                let cbk = target.prototype.connectedCallback;
-                target.prototype.disconnectedCallback = function () {
-                    CompElem.prototype.disconnectedCallback.call(this);
-                    cbk.call(this);
-                };
-            }
-            customElements.define(name, target);
-        }
-    };
-}
-
-function watch(source, options) {
-    return (target, name) => {
-        if (!has(target.constructor, DecoratorKey.WATCH)) {
-            target.constructor[DecoratorKey.WATCH] = isEmpty(target.constructor[DecoratorKey.WATCH]) ? {} : cloneDeep(target.constructor[DecoratorKey.WATCH]);
-        }
-        const sources = isArray(source) ? source : [source];
-        sources.forEach(src => {
-            let watchKey = src.replaceAll('.', '-');
-            let srcList = target.constructor[DecoratorKey.WATCH][watchKey];
-            if (!isArray(srcList)) {
-                srcList = target.constructor[DecoratorKey.WATCH][watchKey] = [];
-            }
-            srcList.push({ source: src, options, handler: target[name] });
-        });
-    };
-}
-
-/**
- * 用于解析HTML模板
- * @author holyhigh2
- */
-class Directive extends View(Object) {
-    //render参数，仅保存上次指令所在context变更时的数据，用于指令内部context更新时
-    _renderArgs;
-    /**
-     * 指令使用范围，超出范围会报错
-     */
-    static get scopes() {
-        return [];
-    }
-    /**
-     * 指令渲染参数变量链
-     */
-    renderParams;
-}
-
-const Ignores = ['key'];
-/**
- * 绑定属性到节点上，如果节点是组件会使用in操作符判断是否props
- * @param styles 对象/数组/字符串
- */
-class Bind extends Directive {
-    created(point, obj) {
-        let el = point.startNode;
-        if (el instanceof CompElem) {
-            //判断是否prop
-            let props = {};
-            let attrs = {};
-            each(obj, (v, k) => {
-                if (Ignores.includes(k))
-                    return;
-                if (k in el) {
-                    props[k] = v;
-                }
-                else {
-                    attrs[k] = v + '';
-                }
-            });
-            // el._setParentProps(props, attrs)
-            el._initProps(props, attrs);
-        }
-        else {
-            each(obj, (v, k) => {
-                el.setAttribute(k, v);
-            });
-        }
-    }
-    update(point, newArgs, oldArgs) {
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.TAG];
-    }
-    render(obj) {
-    }
-}
-const bind = directive(Bind);
-
-/**
- * 根据变量内容自动插入class，仅能用于class属性
- * @param styles 对象/数组/字符串
- */
-class Classes extends Directive {
-    created(point, clazz) {
-        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(' ');
-        }
-        let el = point.startNode;
-        each(this.lastCls, cls => {
-            el.classList.remove(cls);
-        });
-        each(rs, cls => {
-            el.classList.add(cls);
-        });
-        this.lastCls = concat(rs);
-    }
-    update(point, newArgs, oldArgs) {
-        this.created(point, newArgs[0]);
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.CLASS];
-    }
-    lastCls;
-    render(clazz) {
-    }
-}
-const classes = directive(Classes);
-
-/**
- * 循环列表并自动优化列表更新
- * foreach循环的只能是节点，且必须有key属性。非节点元素会被过滤掉
- * 使用序号作为key时可能会导致异常问题
- */
-class ForEach extends Directive {
-    created(point, ...args) {
-    }
-    update(point, newArgs, oldArgs) {
-        if (isEmpty(point.getNodes()) && (!newArgs || isEmpty(newArgs[0])))
-            return DirectiveUpdateTag.NONE;
-        if (isMatch(this.lastAry, newArgs[0]) && this.lastAry.length === newArgs[0].length)
-            return DirectiveUpdateTag.NONE;
-        if (!isEmpty(this.renderParams)) {
-            let rp = last(this.renderParams);
-            if (!isArray(rp)) {
-                rp = [rp];
-            }
-            this.renderParams = rp;
-        }
-        this.lastAry = clone(newArgs[0]);
-        return DirectiveUpdateTag.UPDATE;
-    }
-    constructor(point) {
-        super();
-        if (!isEmpty(this.renderParams))
-            this.renderParams = toArray(last(this.renderParams));
-    }
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    lastAry;
-    lastRenderTmpl;
-    render(value, cbk) {
-        //1. 产生模板
-        let tmpls = map(value, (v, k) => {
-            return cbk(v, k);
-        });
-        if (tmpls.length < 1) {
-            this.lastRenderTmpl = new Template([], []);
-            return this.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);
-        }
-        this.lastAry = clone(value);
-        combStrings.push('');
-        this.lastRenderTmpl = new Template(combStrings, combVars);
-        return this.lastRenderTmpl;
-    }
-}
-const forEach = directive(ForEach);
-
-/**
- * 条件为真时返回参数1，否则返回参数2，仅能用于文本节点
- * @param condition 条件
- * @param tmpl 模板
- */
-class IfElse extends Directive {
-    created(point, ...args) {
-    }
-    //todo 缓存后会导致缓存内容无法更新，需要按照新的结构修改后进行缓存
-    ifNodes;
-    elseNodes;
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    update(point, newArgs, oldArgs) {
-        if (!!newArgs[0] === !!oldArgs[0]) {
-            return DirectiveUpdateTag.NONE;
-        }
-        if (newArgs[0]) {
-            //缓存else
-            // if (isEmpty(this.elseNodes)) {
-            //   this.elseNodes = concat(nodes)
-            // }
-            return DirectiveUpdateTag.REPLACE;
-        }
-        else {
-            //缓存if
-            // if (isEmpty(this.ifNodes)) {
-            //   this.ifNodes = concat(nodes)
-            // }
-            return DirectiveUpdateTag.REPLACE;
-        }
-    }
-    render(condition, tmplFn1, tmplFn2) {
-        return condition ? tmplFn1(condition) : tmplFn2(condition);
-    }
-}
-const ifElse = directive(IfElse);
-
-/**
- * 条件为真时返回内容，仅能用于文本节点
- * @param condition 条件
- * @param tmpl 模板
- */
-class IfTrue extends Directive {
-    created(point, ...args) {
-    }
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    update(point, newArgs, oldArgs) {
-        if (newArgs[0] === oldArgs[0])
-            return DirectiveUpdateTag.NONE;
-        if (newArgs[0]) {
-            return DirectiveUpdateTag.REPLACE;
-        }
-        // this.cacheNodes = nodes;
-        return DirectiveUpdateTag.REMOVE;
-    }
-    render(condition, tmplFn) {
-        return condition ? tmplFn() : html ``;
-    }
-}
-const ifTrue = directive(IfTrue);
-
-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 双向绑定的组件变量
- */
-class Model extends Directive {
-    created(point, modelValue, modelPath) {
-        if (!this.modelPath)
-            this.modelPath = last(this.renderParams);
-        if (modelPath) {
-            this.modelPath = toPath(modelPath);
-        }
-        const node = point.startNode;
-        if (get(node, '_model') === 'binded')
-            return;
-        if (!isObject(modelValue) && !trim(modelValue))
-            modelValue = '';
-        if (node instanceof CompElem) {
-            node._initProps({ value: modelValue });
-            node.addEventListener('update:value', (e) => {
-                console.debug('Model =>', this.modelPath);
-                set(this.renderComponent, this.modelPath, e.detail.value);
-            });
-            set(node, '_model', 'binded');
-        }
-        else if (node instanceof HTMLTextAreaElement) {
-            node.setAttribute('value', modelValue + '');
-            node.addEventListener('input', (e) => {
-                console.debug('Model =>', this.modelPath);
-                let t = e.target;
-                set(this.renderComponent, this.modelPath, t.value);
-            });
-            set(node, '_model', 'binded');
-        }
-        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(propName, modelValue + '');
-            node.addEventListener(evName, (e) => {
-                console.debug('Model =>', this.modelPath);
-                let t = e.target;
-                set(this.renderComponent, this.modelPath, t.value);
-            });
-            set(node, '_model', 'binded');
-        }
-        else if (node instanceof HTMLSelectElement) {
-            node.setAttribute('value', modelValue + '');
-            node.addEventListener('change', (e) => {
-                console.debug('Model =>', this.modelPath);
-                let t = e.target;
-                set(this.renderComponent, this.modelPath, t.value);
-            });
-            set(node, '_model', 'binded');
-        }
-    }
-    update(point, newArgs, oldArgs) {
-        if (!this.modelPath)
-            this.modelPath = last(this.renderParams);
-        if (!isEqual(newArgs, oldArgs)) {
-            const node = point.startNode;
-            if (node instanceof CompElem) {
-                node._updateProps({ value: newArgs[0] });
-            }
-            else if (node instanceof HTMLTextAreaElement || node instanceof HTMLSelectElement) {
-                node.setAttribute('value', newArgs[0] + '');
-            }
-            else if (node instanceof HTMLInputElement) {
-                switch (node.type) {
-                    case 'checkbox':
-                    case 'radio':
-                        if (!!newArgs[0]) {
-                            node.setAttribute('checked', '');
-                        }
-                        else {
-                            node.removeAttribute('checked');
-                        }
-                        break;
-                    case 'text':
-                    case 'email':
-                    case 'number':
-                    case 'password':
-                    case 'search':
-                    case 'tel':
-                    case 'url':
-                        node.setAttribute('value', newArgs[0] + '');
-                        break;
-                    default:
-                        node.setAttribute('value', newArgs[0] + '');
-                        break;
-                }
-            }
-        }
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.TAG];
-    }
-    modelPath;
-    render(modelValue, modelPath) {
-    }
-}
-const model = directive(Model);
-
-/**
- * display的快捷指令
- * 如果
- * @param isvisible 是否显示
- */
-class Show extends Directive {
-    created(point, isVisible) {
-        let el = point.startNode;
-        if (isUndefined(this.display)) {
-            this.display = el.style.display;
-        }
-        this.renderComponent.nextTick(() => {
-            el.style.display = isVisible ? this.display : 'none';
-        });
-    }
-    update(point, newArgs, oldArgs) {
-        this.created(point, newArgs[0]);
-        return DirectiveUpdateTag.NONE;
-    }
-    display = undefined;
-    static get scopes() {
-        return [EnterPointType.TAG];
-    }
-    constructor(point) {
-        super();
-        this.point = point;
-    }
-    render(isVisible) {
-    }
-}
-const show = directive(Show);
-
-/**
- * 创建一个动态插槽内容
- * @param cbk 回调函数，函数接收插槽上定义得变量
- * @param slotName 插槽名词，默认default
- */
-class Slot extends Directive {
-    created(point, cbk, slotName) {
-        cbk = cbk.bind(this.renderComponent);
-        this.slotComponent._bindSlotHook(slotName || 'default', cbk);
-    }
-    update(point, newArgs, oldArgs) {
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.SLOT];
-    }
-    render(cbk, slotName) {
-    }
-}
-const slot = directive(Slot);
-
-/**
- * Css 辅助类
- */
-class CssHelper {
-    /**
-     * 用于转换style对象为标准style字符串，会自动转换对象key为短横线格式
-     * @param styles 样式对象
-     * @returns
-     */
-    static getCssText(styles) {
-        if (isString(styles))
-            return styles;
-        return join(map(styles, (v, k) => kebabCase(k) + ":" + v), ';');
-    }
-    /**
-     * 设置样式
-     * @param styles 样式字符串或样式对象
-     * @param node HTML元素
-     * @returns 每个样式的旧值map
-     */
-    static setStyle(styles, node) {
-        if (isString(styles) && !trim(styles))
-            return {};
-        let css = CssHelper.getCssText(styles);
-        let oldValueMap = {};
-        each(css.split(';'), prop => {
-            let kv = prop.split(':');
-            let k = trim(kv[0]);
-            let v = trim(kv[1]);
-            oldValueMap[k] = node.style.getPropertyValue(k);
-            node.style.setProperty(k, v);
-        });
-        return oldValueMap;
-    }
-}
-
-/**
- * 根据变量内容自动插入class，仅能用于style属性
- * @param styles 对象/字符串
- */
-class Styles extends Directive {
-    created(point, styles) {
-        CssHelper.setStyle(styles, point.startNode);
-    }
-    update(point, newArgs, oldArgs) {
-        this.created(point, newArgs[0]);
-        return DirectiveUpdateTag.NONE;
-    }
-    constructor(point) {
-        super();
-        this.point = point;
-    }
-    static get scopes() {
-        return [EnterPointType.STYLE];
-    }
-    render(styles) {
-    }
-}
-const styles = directive(Styles);
-
-/**
- * 类似Model，实现属性的同步跟踪
- * 设置组件prop，并监控 @update:prop 事件
- * @param syncValue 双向绑定的组件变量
- */
-class Sync extends Directive {
-    created(point, syncValue) {
-        if (!this.modelPath)
-            this.modelPath = last(this.renderParams);
-        const targetComponent = point.startNode;
-        let attrName = point.attrName;
-        //todo _setParentProps接口不应该外部使用
-        targetComponent._initProps({ [attrName]: syncValue });
-        targetComponent.addEventListener('update:' + attrName, (e) => {
-            set(this.renderComponent, this.modelPath, e.detail.value);
-        });
-    }
-    update(point, newArgs, oldArgs) {
-        if (!isEqual(newArgs, oldArgs)) {
-            const targetComponent = point.startNode;
-            let attrName = point.attrName;
-            targetComponent._updateProps({ [attrName]: newArgs[0] });
-        }
-        return DirectiveUpdateTag.NONE;
-    }
-    static get scopes() {
-        return [EnterPointType.PROP];
-    }
-    modelPath;
-    constructor(point) {
-        super();
-    }
-    render(syncValue) {
-    }
-}
-const sync = directive(Sync);
-
-/**
- * 分支指令，具有switch / if else 两种模式
- * @example
- *  switch 模式
- * ${when(var, {
-    closed: () => html``, //case 1
-    connecting: () => html``, //case 2
-    default: () => html``// default
-   })}
-
-   if else 模式
- * ${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 模板
- */
-class When extends Directive {
-    created(point, ...args) {
-    }
-    static get scopes() {
-        return [EnterPointType.TEXT, EnterPointType.SLOT];
-    }
-    update(point, newArgs, oldArgs) {
-        if (isEqual(newArgs, oldArgs)) {
-            return DirectiveUpdateTag.NONE;
-        }
-        //todo 缓存
-        return DirectiveUpdateTag.REPLACE;
-    }
-    render(value, cases) {
-        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;
-            }
-        });
-        return call(tmplList[i] ?? defaultFn);
-    }
-}
-const when = directive(When);
-
-export { CompElem, CssHelper, Decorator, DecoratorType, DecoratorWrapper, Directive, DirectiveUpdateTag, DirectiveWrapper, EnterPoint, EnterPointType, GetKeyFnName, ModelTriggerType, QueryCache, Template, UpdatePoint, _DecoratorMap, _DecoratorsKey, _getObservedAttrs, bind, buildHTML, classes, computed, createRef, decorator, directive, event, forEach, html, ifElse, ifTrue, makeState, model, prop, query, queryAll, show, slot, state, styles, sync, tag, watch, when };
+  import{toPath as t,get as e,isObject as s,isDefined as r,isUndefined as n,isEmpty as i,has as o,concat as a,defaults as l,merge as c,cloneDeep as d,each as h,kebabCase as u,toArray as p,last as f,startsWith as g,isFunction as m,isArray as _,initial as E,isBlank as b,join as v,split as C,set as y,camelCase as S,isEqual as N,replace as T,isPlainObject as P,flatMap as x,isString as w,test as A,size as M,assign as O,first as k,debounce as R,closest as L,once as D,bind as V,isNil as H,trim as I,some as $,isNull as W,fval as j,omit as U,groupBy as B,reject as z,filter as F,slice as K,compact as Q,remove as X,includes as G,find as q,throttle as Y,map as Z,replaceAll as J,snakeCase as tt,toString as et,reduce as st,isMatch as rt,clone as nt,findIndex as it,call as ot}from"myfx";const at=new WeakMap,lt=/\s+\.?key\s*=/;var ct,dt,ht;function ut(t){console.error("[CompElem]",t)}function pt(t,e){console.error(`[CompElem <${t}>]`,e)}function ft(e){return t(e).join("-")}function gt(t){return Object.getPrototypeOf(t)}!function(t){t[t.CSS=1]="CSS",t[t.COMPUTED=2]="COMPUTED"}(ct||(ct={})),function(t){t.PROPS="__deco_props",t.STATES="__deco_states",t.COMPUTED="__deco_computed",t.WATCH="__deco_watch",t.EVENTS="__deco_events"}(dt||(dt={})),function(t){t.CLASS="class",t.FIELD="field",t.METHOD="method"}(ht||(ht={}));class mt{static get priority(){return 0}}const _t="getKey",Et="__decorators",bt=new WeakMap;class vt{args;metadata;decoratorClass;instanceMap;key;priority=0;constructor(t,s,r){this.args=t,this.metadata=s,this.decoratorClass=r,this.priority=e(r,"priority",0),this.instanceMap=new WeakMap}create(t){let o,a=new this.decoratorClass(...this.args),l=a.targets,c=this.metadata[2];s(c)&&r(e(c,"configurable"))?o=ht.METHOD:n(this.metadata[2])&&(o=ht.FIELD),!i(l)&&o&&l.includes(o)?(a.created(t,...this.metadata),this.instanceMap.set(t,a)):ut(`Decorator '${this.decoratorClass.name}' is out of targets, expect '${l.join(",")}' bug got '${o}'`)}beforeMount(t,e){this.instanceMap.get(t).beforeMount(t,e,...this.metadata)}mounted(t,e){this.instanceMap.get(t).mounted(t,e,...this.metadata)}updated(t,e){this.instanceMap.get(t).updated(t,e)}}const Ct=new WeakMap;function yt(t){let s=(...s)=>(...r)=>{let n=r[0].constructor,i=e(n,Et);if(!o(n,Et)){let t=e(Object.getPrototypeOf(n),Et);i=t?a(t):[],Reflect.defineProperty(n,Et,{configurable:!1,enumerable:!1,value:i})}let l,c={},d=e(t,_t);if(d){let e=Ct.get(t);if(e||(e=new WeakMap,Ct.set(t,e)),c=e.get(n),c||(c={},e.set(n,c)),l=d(...s),c[l])return c[l]}let h=new vt(s,r,t);return c[l]=h,i?.push(h),h};return bt.set(s,!0),s}const St=new WeakMap;function Nt(t){if(1===arguments.length)return(e,s,r)=>{t.required=t.required||!1,t.attribute=!1!==t.attribute,Tt(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=l(r,t),r=void 0),Tt(e,s,t,r)}function Tt(t,e,s,r){let n;if(/[a-z]/.test(e[0])||ut(`Prop '${e}' must be in CamelCase`),!o(t.constructor,dt.PROPS)){const e={};let s=t.constructor;for(;(s=gt(s))!==jt;)c(e,s[dt.PROPS]?d(s[dt.PROPS]):{});Reflect.defineProperty(t.constructor,dt.PROPS,{configurable:!1,enumerable:!1,value:e}),n=new Set,h(e,((t,e)=>{if(t.attribute){let t=u(e);n?.add(t)}})),St.set(t.constructor,n)}if(r&&(r.get&&(s.getter=r.get),r.set&&(s.setter=r.set)),s.attribute){n||(n=St.get(t.constructor));let s=u(e);n?.add(s)}o(t.constructor,"observedAttributes")||(t.constructor.observedAttributes=[]),t.constructor.observedAttributes=p(n),t.constructor[dt.PROPS][e]=s}const Pt=new Set;function xt(t){return St.get(t)??Pt}const wt={collectWatch(t,e,s){let r=Rt.get(t);r||(r={},Rt.set(t,r));let n=r[s];n||(n=r[s]=[]),n.push(e)},startCollect(t,e){this.__collectType=e,this.__collecting=t},setUpdater(t){this.__updater=t},endCollect(){this.__collecting=null},__directiveQ:[],setDirectiveQ(t){let e=f(this.__directiveQ);const s=t?t.join(","):"",r=e?e.join(","):"";e&&s===r||(e&&e.length<t.length&&g(s,r)?this.__directiveQ[this.__directiveQ.length-1]=t:this.__directiveQ.push(t))},popDirectiveQ(){let t=a(this.__directiveQ);return this.__directiveQ=[],t},startRender(t){this.__renderCollecting=!0,this.__renderContext=t},endRender(t){this.__renderCollection.forEach((e=>{t._regDeps(e,this.__renderContext)})),this.__renderCollection.clear(),this.__renderCollecting=!1,this.__renderContext=null},collect(t){this.__renderCollection.add(t)},clear(){this.__directiveQ=[]},__updater:null,__collecting:null,__collectType:-1,__renderCollection:new Set,__renderContext:null,__renderCollecting:!1,__skipCheck:!1},At=new WeakMap,Mt=new WeakMap,Ot=new WeakMap,kt=new WeakMap,Rt=new WeakMap;function Lt(t,r){if(!s(t))return t;const n=t.__proxy?t:new Proxy(t,{get(t,e,s){if(!e)return;const r=Reflect.get(t,e,s);if("string"!=typeof e&&"number"!=typeof e)return r;let n=e in t;if((wt.__renderCollecting||wt.__collecting)&&(n&&t.hasOwnProperty(e)||!n)){let t=Mt.get(s)??[],r=a(t,[e]),n=r.join("-");if(wt.__renderCollecting)wt.collect(ft(r)),wt.setDirectiveQ(r);else if(wt.__collecting){let t;switch(wt.__collectType){case ct.COMPUTED:t=Ot.get(wt.__collecting),t||(t={},Ot.set(wt.__collecting,t));break;case ct.CSS:t=kt.get(wt.__collecting),t||(t={},kt.set(wt.__collecting,t))}let e=t[n];e||(e=t[n]=[]),e.push(wt.__updater)}}return r},set(t,r,n,o){if(!r)return!1;let l=t[r];if(!s(l)&&l===n)return!0;if(Number.isNaN(n)&&Number.isNaN(l))return!0;let c=Mt.get(o)??[],d=a(c,[r]),h=At.get(o).from,u=e(h.constructor,dt.PROPS),p=e(h.constructor,dt.STATES),f=e(u,[d[0],"hasChanged"])||e(p,[d[0],"hasChanged"]);if(f){if(!f.call(h,n,l))return!0}else if(l===n&&!at.has(l))return!0;u&&u[r]&&t.__isData&&u[r].sync&&h.emit("update:"+r,{value:n});let g=At.get(o)?.contextSet,E=n;!s(n)||m(n)||n instanceof Node||Object.isFrozen(n)||g.forEach((t=>{let e=At.get(o)?.pathMap,s=e?.get(t);s&&(d=a(s,[r]),Mt.set(E,d),E=Lt(E,t),Mt.set(E,d))}));let b=Reflect.set(t,r,E),v=At.get(o).pathMap;return g.forEach((t=>{let s=v.get(t);if(!s)return;t===h&&c.length>1&&s.length>1&&c[0]===s[0]&&(s=c),d=a(s,"length"==r&&_(o)?[]:[r]);let n=Ot.get(t),u=kt.get(t),p=Rt.get(t);if(n||u||p){let t=d.length;for(;t;){let s=d.slice(0,t).join("-");if(p){const r=p[s];t===d.length?r?.forEach((t=>{let e=t();e.ov=l,Dt.pushWatch(e)})):r?.forEach((t=>{let s=t();e(s,"deep")&&(s.ov=l,Dt.pushWatch(s))}))}if(n){let t=n[s];if(!i(t))for(let e=0;e<t.length;e++){const s=t[e];Dt.pushComputed(s)}}if(u){let t=u[s];if(!i(t))for(let e=0;e<t.length;e++){const s=t[e];Dt.pushCss(s)}}t--}}let f=t._notify(l,d);Dt.pushNext(f)})),b}});t.__proxy||Reflect.defineProperty(t,"__proxy",{enumerable:!1,writable:!1,configurable:!1,value:!0});let o=Mt.get(t)??[];if(Object.isExtensible(t)&&!At.get(n)){let t=new Set;t.add(r);let e=new WeakMap;e.set(r,o),At.set(n,{from:r,contextSet:t,pathMap:e})}else{At.get(n).contextSet.add(r);let t=At.get(n).pathMap,s=t.get(r),i=a(o);if(s&&s.join("")!==i.join("")){let t=e(r,E(s));_(t)||function(...t){console.warn("[CompElem]",...t)}(`The object is referenced by more than one @state '${i.join(".")},${s.join(".")}'`),s=i}else t.set(r,i)}for(let e in t){const n=t[e];!s(n)||n.__proxy||m(n)||n instanceof Node||Object.isFrozen(n)||(Mt.set(n,a(o,[e])),t[e]=Lt(n,r),Mt.set(t[e],a(o,[e])))}return n}class Dt{static watchSet=new Set;static computedSet=new Set;static cssSet=new Set;static nextSet=new Set;static nextPending=!1;static next;static{const t=Promise.resolve(),e=Dt.flush;Dt.next=()=>{t.then(e)}}static flush(){Dt.nextPending=!1;let t=Array.from(Dt.watchSet);Dt.watchSet.clear();let s=Array.from(Dt.computedSet);Dt.computedSet.clear();let r=Array.from(Dt.cssSet);Dt.cssSet.clear();let n=Array.from(Dt.nextSet);Dt.nextSet.clear(),t.forEach((t=>t(e(t,"ov")))),s.forEach((t=>t())),r.forEach((t=>t())),n.forEach((t=>t()))}static pushWatch(t){Dt.watchSet.add(t)}static pushComputed(t){Dt.computedSet.add(t)}static pushCss(t){Dt.cssSet.add(t)}static pushNext(t){Dt.nextSet.add(t),Dt.nextPending||(Dt.nextPending=!0,Dt.next())}}function Vt(t){return class extends t{__updatePoints;renderComponent;buildView(t){let e=this instanceof jt?this:this.renderComponent,[s,r]=we(e,t),n=[],i=Ve(n,s,r,e,this);return this.__updatePoints=n,i}updateView(t){if(b(v(t.strings)))return;if(!this.__updatePoints)return;let{vars:r}=t,n=this instanceof jt?this:this.renderComponent;for(let t=0;t<this.__updatePoints.length;t++){const i=this.__updatePoints[t];let o=i.varIndex,a=i.value,l=r,c=i.node,d=C(o,"-");for(let s=0;s<d.length;s++){const r=d[s];l=e(l,r),l&&l.vars&&t<d.length-1&&(l=l.vars)}if(!s(a)&&a===l)continue;let h=c;if(i.isDirective){if(!a.di)continue;l.di=a.di,l.di.renderParams=l.varChain,l.di._renderArgs=l.args,l.point=a.point,l.varPath=a.varPath,a.update(a.point,l.args,a.args)}else if(i.isToggleProp){if(!!l===a)continue;h.toggleAttribute(i.attrName,!!l),y(h,i.attrName,!!l)}else if(i.isProp){if(!s(l)&&l===a)continue;let t=S(i.attrName),r=e(i.node.constructor,dt.PROPS);if(r){let e=r[t];if(e&&e.hasChanged&&!e.hasChanged.call(this,l,a))continue}c instanceof jt?c._updateProps({[i.attrName]:l}):c instanceof HTMLSlotElement&&n._updateSlot(c.getAttribute("name")||"default",i.attrName,l)}else if(i.attrName&&!i.isEvent){if(!N(a,l))switch(i.attrName){case"value":if(c instanceof HTMLInputElement){c.value=l;break}default:c.setAttribute(i.attrName,T(i.attrTmpl,De,l+""))}}else if(i.isTmpl)(l.strings.join()!==a.tmpl.strings.join()||l.vars.some((t=>s(t)&&!P(t)))||a.tmpl.vars.some((t=>s(t)&&!P(t)))||!N(l.vars,a.tmpl.vars))&&i.value.updateView(l),a.tmpl=l,l=a;else if(i.isText){let t=i.textNode.nextSibling;t&&t===i.node.previousSibling?t.textContent=l:(He.remove(i.textNode,i.node),He.insertBefore(i.node,[l]))}i.value=l}}}}class Ht extends(Vt(Object)){tmpl;constructor(t){super(),this._renderVars=e(t,"_renderVars"),this.tmpl=t}}const It={boolean:Boolean,string:String,number:Number,object:Object,array:Array,function:Function,bigint:BigInt,symbol:Symbol,undefined:Object},$t=new WeakMap;let Wt=[];class jt extends(Vt(HTMLElement)){static __l_globalRule=document.createElement("style");static{document.head.appendChild(jt.__l_globalRule)}static defaults(t){Wt=x(t.css,(t=>{if(w(t)){let e=new CSSStyleSheet;return e.replaceSync(t),e}return t instanceof CSSStyleSheet?t:[]})),t.global,h(t,((t,e)=>{A(e[0],/[A-Z]/)}))}#t={};#e={"#slots":{}};#s={};#r={};#n;#i;#o={};__events={};get[Symbol.toStringTag](){return this.constructor.name}get reactiveData(){return this.#s}get attrs(){return this.#a}get props(){return this.#l}get renderRoot(){return this.#c}get renderRoots(){return this.#d}get parentComponent(){return this.#h}get slotHooks(){return this.#u}get css(){return $t.get(this.constructor)}get isMounted(){return this.#p}get slots(){return this.#e["#slots"]}#a;#l;#c;#d;#h;#f={};#u={};#g={};#p=!1;static get autoSlot(){return!0}static get styles(){return[]}static get globalStyles(){return[]}get styles(){return[]}#m=!1;constructor(...t){super(),1===M(t)&&(this.#l={},O(this.#l,k(t)));let s=this.render.bind(this);this.render=function(){let t;return wt.startRender(this),t=s(),wt.endRender(this),t};let r=e(this.constructor,"globalStyles"),n=e(this.constructor,"_global_style_attached");if(!i(r)&&"1"!==n){let t="";r.forEach((e=>{w(e)&&(t+=e+"\n")})),jt.__l_globalRule.textContent+=t,y(this.constructor,"_global_style_attached","1")}let o=$t.get(this.constructor),a=o??[];o||(h(e(this.constructor,"styles"),(t=>{if(w(t)){let e=new CSSStyleSheet;e.replaceSync(t),a.push(e)}else a.push(t)})),$t.set(this.constructor,a)),this.#n=this.attachShadow({mode:"open",slotAssignment:e(this.constructor,"autoSlot",!0)?"named":"manual"}),this.#n.adoptedStyleSheets=[...Wt,...a];let l=this.attributes.getNamedItem("css-link")?.value;if(l){const t=document.createElement("style");t.textContent=`@import "${l}"`,this.#n.appendChild(t)}let c=R(this.#_,20);this.#i=new MutationObserver((t=>{for(let e=0;e<t.length;e++){"childList"===t[e].type&&c.call(this)}})),this._slotsPropMap={default:[]};let d=e(this.constructor,Et);d&&d.sort(((t,e)=>e.priority-t.priority)).forEach((t=>t.create(this))),this.#E=this.#b.bind(this)}#E;connectedCallback(){let t=L(this.parentNode,(t=>t instanceof jt||t.host instanceof jt),"parentNode");this.#h=t?t instanceof jt?t:t.host:null,this.__init()}disconnectedCallback(){this.#i.disconnect()}__init(){if(this.#m)return;this.#v();const t=this.#C();this.propsReady(t);for(const e in t){const s=t[e];this.#e[e]=s}this.#y(),h(this.#e,((t,e)=>{let s=Reflect.getOwnPropertyDescriptor(this.#e,e);Reflect.defineProperty(this,e,{get(){let t=Reflect.get(this.#s,e);return s?.get?s?.get():t},set(t){s?.set?s?.set(t):Reflect.set(this.#s,e,t)}})})),Reflect.defineProperty(this.#e,"__isData",{enumerable:!1,value:!0}),this.#s=Lt(this.#e,this);let s=this.render(),r=this.buildView(s);if(r){let t=p(r);t.forEach((t=>{this.#n.appendChild(t)})),this.#d=t,this.#c=t[0]}this.#_(),this.beforeMount(),this.#i.observe(this,{childList:!0});const n=this;let i=e(this.constructor,Et);i&&i.sort(((t,e)=>e.priority-t.priority)).forEach((t=>{t.beforeMount(this,((t,e)=>(n.#s[t]=e,n.#s[t])))}));let o=e(this.constructor,dt.WATCH);h(o,((t,s)=>{t.forEach((t=>{let{source:r,options:n,handler:i}=t,o=i.bind(this);e(n,"once",!1)&&(o=D(o));const a=function(t){let s=e(this,r.replaceAll("-","."));o(s,t,r)}.bind(this);let l=e(n,"deep",!1);if(a.deep=l,wt.collectWatch(this,(()=>a),s),!e(n,"immediate",!1))return;let c=e(this,r.replaceAll("-","."));o(c,c,r)}))}));let a=e(this.constructor,dt.COMPUTED);h(a,((t,e)=>{wt.startCollect(this,ct.COMPUTED),wt.setUpdater((()=>{this.#s[e]=t.call(this)})),this.#e[e]=t.call(this),wt.endCollect(),Reflect.defineProperty(this,e,{get(){return Reflect.get(this.#s,e)},set(t){pt(this.tagName,"Cannot set a computed property '"+e+"'")}})}));let l=e(this.constructor,dt.EVENTS);l&&l.forEach((t=>{let e=t.name,s=O({target:document,once:!1,passive:!1,capture:!1},t.options),r=V(t.fn,this),n=s.target;m(n)&&(n=n.call(this,this)),n?n.addEventListener(e,r,s):pt(this.tagName,"The target of @event('"+e+"',...) is invalid")})),h(this.#u,((t,e)=>{this.#S(e)})),wt.startCollect(this,ct.CSS);let c=[];this.styles.forEach((t=>{if(!m(t))return;let e=new CSSStyleSheet;c.push(e),wt.setUpdater((()=>{let s=t()??"";e.replaceSync(s)}));let s=t();b(s)||e.replaceSync(s)})),wt.endCollect(),this.#n.adoptedStyleSheets=[...this.#n.adoptedStyleSheets,...c],setTimeout((()=>{this.#p=!0,this.mounted(),i&&i.forEach((t=>{t.mounted(this,((t,e)=>(n.#s[t]=e,n.#s[t])))}))}),0),this.#m=!0}propsReady(t){}render(){throw Error(`[CompElem <${this.tagName}>] Missing render()`)}beforeMount(){}mounted(){}#N(t,s){this.#v();let r=e(this.#t[s],"props");r&&h(this.slots,((t,s)=>{t.filter((t=>t.nodeType===Node.ELEMENT_NODE)).forEach((t=>{t instanceof jt?t._updateProps(r):h(r,((s,r)=>{if(t instanceof HTMLSlotElement){let n=e(t,"__l_comp");if(n){let e=t.name||"default",i=n.#t[e];i||(i=n.#t[e]={props:{}}),i.props||(i.props={}),i.props[r]=s,n.#N(t,e)}}else t.setAttribute(r,s)}))}))})),this.slotChange(t,s)}slotChange(t,e){}attributeChangedCallback(t,e,s){this.#T(t,e,s)}shouldUpdate(t){return!0}updated(t){}emit(t,s={},r){r&&r.event&&(s.event=r.event),s.target=this,this.dispatchEvent(new CustomEvent(t,{bubbles:e(r,"bubbles",!1),composed:e(r,"composed",!1),cancelable:!0,detail:s}))}#P={};on(t,e){this.#P[t]||(this.#P[t]=[]);let s=e.bind(this);this.#P[t].push(s),this.addEventListener(t,s)}nextTick(t){Dt.pushNext(t)}forceUpdate(){h(this.#s,((t,e)=>{this.#r[e]={value:void 0,chain:void 0}})),this.#b()}_notify(t,r){let n=[];for(let i=0;i<r.length;i++){const o=r[i];n.push(o);let a=e(this,n),l=ft(n);this.#r[l]={value:a,chain:"slots"===l?["slots"]:n,oldValue:t,end:n.length===r.length},s(a)&&"#"!=l[0]&&at.set(a,l)}return this.#E}#b(){if(M(this.#r)<1)return;const t=this.#r;this.#r={};let r=e(this.constructor,Et);if(r&&r.sort(((t,e)=>e.priority-t.priority)).forEach((e=>{e.updated(this,t)})),!this.shouldUpdate(t))return;let n=new Set;h(t,(({value:t,chain:e,oldValue:s},r)=>{this.#o[r]&&this.#o[r].forEach((t=>{n.add(t)}))})),n.forEach((t=>{if(t===this)this.updateView(this.render());else{let e=t.render(...t._renderArgs?t._renderArgs:[]);e&&t.updateView(e)}})),this.#x.forEach((t=>{this.#S(t)})),this.updated(t),h(t,(({value:t,chain:e,oldValue:r},n)=>{s(t)&&at.has(t)&&at.delete(t)}))}#C(){let t=e(this.constructor,dt.PROPS),i=this.attributes,a=this.tagName,l=this.#l,c={};h(i,(({name:e,value:s})=>{if(e[0]===be||e[0]===ve||e[0]===Ce||e===Ne||"slot"===e)return;let r=S(e);t&&!t[r]&&(c[e]=s)})),this.#a=this.#a?O(this.#a,c):c;let d={};return h(t,((c,h)=>{let p,f=t[h],g=o(l,h),m=e(this,h);if(!("_defaultValue"in f)&&(f._defaultValue=m,!f.type)){n(m)&&pt(a,"Prop '"+h+"' has neither propType nor defaultValue be used for type inference");let t=typeof m;_(m)&&(t="array");let e=It[t];f.type=e}if(g)p=H(l[h])?m:l[h];else{p=m;let t=i.getNamedItem(u(h))||i.getNamedItem(ve+u(h));t&&(g=!0,p=t.value)}if(f.required&&!g)return pt(a,"Prop '"+h+"' is required"),!1;p=this.#w(t,h,p);let E=e(t,[h,"getter"]);E&&(E=V(E,this));let b=e(t,[h,"setter"]);b&&(b=V(b,this)),(E||b)&&Reflect.defineProperty(this.#e,h,{set:b||function(t){},get:E}),f.attribute&&r(p)&&!s(p)&&this.setAttribute(u(h),I(p)),this.#e[h]=p,d[h]=p})),Object.seal(d)}#w(t,e,s){let i=t[e];if(!i)return s;let o=i.isValid,a=i.type,l=_(a)?a:[a],c=i.converter,d=s;if(!$(l,(t=>t===String))&&w(d)&&!W(d))try{d=c?c(d):j(d,{html:Ie})}catch(t){pt(this.tagName,`Convert attribute '${e}' error with `+d)}for(let t=0;t<l.length;t++){"Boolean"===l[t].name&&(w(d)&&/(?:^true$)|(?:^false$)/.test(d)?d=j(d):(n(d)||b(d))&&(d=!0))}let h=typeof d,u=!r(d);for(let t=0;t<l.length;t++){const e=l[t];if(A(h,e.name,"i")||d instanceof e||Object.prototype.toString.call(d)===Object.prototype.toString.call(e.prototype)){u=!0;break}}return u||pt(this.tagName,`Invalid prop '${e}'. expected '${l.map((t=>t.name||t))}' but got '${h}'`),o&&(o.call(this,d,this.#e)||pt(this.tagName,`Invalid prop '${e}'. IsValid() check failed`)),d}#y(){let t=e(this.constructor,dt.STATES);h(t,((s,r)=>{let n=t[r],i=e(this,r);if(n){let t=n.prop;i=t?d(this.#e[t]):e(this,r)}this.#e[r]=i}))}#A=R(this.propsReady,100);_setParentProps(t,s){if(this.#m){let r=e(this.constructor,dt.PROPS);h(t,((t,e)=>{let s=S(e),n=r[s];if(!n)return;let i=this.#e[s];t=this.#w(r,s,t),n.hasChanged&&!n.hasChanged.call(this,t,i)||(this.#e[s]=t,this._notify(i,[s]))})),O(this.#l,t),O(this.#a,s),this.#A(this.#l)}}_updateProps(t){let s=e(this.constructor,dt.PROPS);h(t,((t,e)=>{let r=S(e),n=s[r];if(!n)return;let i=this.#e[r];t=this.#w(s,r,t),n.hasChanged&&!n.hasChanged.call(this,t,i)||(wt.__skipCheck=!0,y(this,r,t),wt.__skipCheck=!1)})),O(this.#l,t),this.#A(this.#l)}_initProps(t,e){this.#l=c(this.#l||{},t),this.#a=c({},e)}_bindSlot(t,e,s){if(this.#f[e]||(this.#f[e]=t,Reflect.defineProperty(t,"__l_comp",{value:this})),t.addEventListener("slotchange",(s=>{this.#m&&this.#N(t,"default"===e?"":e)})),!i(s)){let t=this.#t[e];t||(t=this.#t[e]={}),s.nodeFilter&&(t.filter=s.nodeFilter),t.props=U(s,"nodeFilter")}}_bindSlotHook(t,e){this.#u[t]=e}#x=new Set;_updateSlot(t,e,s){let r=this.#f[t],n=this.#u[t];if(!n&&!r)return;let i=this.#t[t];if(e&&(i.props||(i.props={}),i.props[e]=s),n)this.#x.add(t);else{let t=r.assignedElements({flatten:!0});for(let r=0;r<t.length;r++){t[r].setAttribute(e,s+"")}}}#v(){const t=x(this.childNodes,(t=>t.nodeType===Node.COMMENT_NODE?[]:t instanceof HTMLSlotElement?t.assignedNodes({flatten:!0}):t));let e=B(t,(t=>t.nodeType===Node.TEXT_NODE?"default":t instanceof Element?t.getAttribute("slot")||"default":void 0));if(i(e))return void(i(this.#e["#slots"])||(this.#m?this.#s["#slots"]={}:this.#e["#slots"]={}));h(e,((t,e)=>{if(e){for(;t.length>0;){let e=t[0];if(!(e.nodeType===Node.TEXT_NODE&&b(e.textContent)||e instanceof HTMLSlotElement&&i(e.assignedNodes({flatten:!0}))))break;t.shift()}for(;t.length>0;){let e=f(t);if(!(e.nodeType===Node.TEXT_NODE&&b(e.textContent)||e instanceof HTMLSlotElement&&i(e.assignedNodes({flatten:!0}))))break;t.pop()}}}));let s={};h(e,((t,e)=>{i(t)||(s[e]=t)})),this.#m?this.#s["#slots"]=s:this.#e["#slots"]=s}#S(t){let s=this.#u[t];if(!s)return;let r=this.#t[t];if(!this.#e["#slots"][t])return;this.renderAsync(s,e(r,"props"));const n=this._asyncDirectives.get(s);let o=n?.buildView(s(e(r,"props"))),a=z(p(o),(t=>t.nodeType===Node.COMMENT_NODE));if(a){let e=this.#g[t];if(!i(e))for(let t=0;t<e.length;t++){const s=e[t];s.parentNode?.removeChild(s)}this.#g[t]=a,this.append(...a),this.#x.clear()}}_asyncDirectives=new WeakMap;renderAsync(t,...e){}#_(){i(this.#t)||h(this.slots,((t,e)=>{if(i(t))return;let r=this.#t[e],n=t;if(r){let e=r.filter;if(m(e))n=e(t);else if(s(e)){let s=e.type,r=e.maxCount;if(s){let e=_(s)?s:[s];n=F(t,(t=>$(e,(e=>t instanceof e))))}r>0&&(n=K(t,0,r))}}if("named"===this.#n.slotAssignment){let e=[];for(let s=0;s<t.length;s++){const r=t[s];n.includes(r)||e.push(r)}for(;e.length>0;){let t=e.pop();t.parentNode?.removeChild(t)}}else this.#f[e].assign(...n);this.#m&&this.#N(this.#f[e],"default"===e?"":e)}))}#T(t,s,r){if(!this.isMounted)return;if(xt(this.constructor).has(t)){let s=S(t);if(W(r)){r=e(this.constructor,dt.PROPS)[s]._defaultValue}this._updateProps({[s]:r})}}_regDeps(t,e){let s=this.#o[t];s||(s=this.#o[t]=new Set),s.add(e);let r=t.split("-");if(r.pop(),r.length<1)return;let n=r.join("-");s=this.#o[n],s||(s=this.#o[n]=new Set),s.add(e)}}var Ut,Bt,zt;!function(t){t.NONE="NONE",t.REMOVE="REMOVE",t.REPLACE="REPLACE",t.UPDATE="UPDATE",t.APPEND="APPEND"}(Ut||(Ut={}));class Ft{key;varIndex;value;isText=!1;isTmpl=!1;isDirective=!1;node;textNode;isComponent=!1;attrName;attrTmpl;isProp=!1;isToggleProp=!1;isEvent;constructor(t,e,s,r){this.varIndex=t,this.node=e,s&&(this.attrName=s),r&&(this.attrTmpl=r)}}!function(t){t.ATTR="attr",t.PROP="prop",t.TEXT="text",t.CLASS="class",t.STYLE="style",t.SLOT="slot",t.TAG="tag"}(Bt||(Bt={}));class Kt{startNode;endNode;type;attrName;varIndex;expressionChain;nodes;constructor(t,e,s){this.startNode=t,this.attrName=e,this.type=s}setVarIndex(t){this.varIndex=t}getNodes(){let t=this.startNode.nextSibling;if(!this.endNode)return[t];let e=[];for(;t&&t!==this.endNode;)e.push(t),t=t?.nextSibling;return e}}!function(t){t.AFTER_BEGIN="afterbegin"}(zt||(zt={}));class Qt extends Function{diClass;args;di;varPath;point;slotComponent;varChain;constructor(t,...e){super(),this.diClass=t,this.args=e,this.varChain=wt.popDirectiveQ(),this.di=new this.diClass,this.di.renderParams=this.varChain}checkScope(t){let s=e(this.diClass,"scopes");i(s)||A(s.join(","),t)||ut(`Directive '${this.diClass.name}' is out of scopes, expect '${s.join(",")}' bug got '${t}'`)}render(t){let e=this.di;return this.args,e.renderComponent||(e.renderComponent=t),this.di=e,e._renderArgs=this.args,this.di.render(...this.args)}update(t,e,s){let r=this.di.update(t,e,s);if(r===Ut.NONE)return;let n=t.getNodes();if(r===Ut.REMOVE)for(let t=0;t<n.length;t++){const e=n[t];e.parentNode?.removeChild(e)}else if(r===Ut.REPLACE){let s=[];for(let t=0;t<n.length;t++){const e=n[t];e.parentNode?.removeChild(e)}let r=this.di.render(...e),i=this.di.buildView(r);s=p(i);let o=document.createDocumentFragment();o.append(...s),t.endNode.parentNode.insertBefore(o,t.endNode)}else if(r===Ut.UPDATE){let s,r={},o=[],a=[],l=this.di.render(...e);if(l||(l=new je([],[])),i(n)){let e=this.di.buildView(l);return void t.startNode.after(...e)}let c={};l instanceof je&&l.vars.forEach((t=>{if(t instanceof je){const e=t.getKey();c[e]=t,r[e]=!0,a.push(e)}})),n=F(Q(n),(t=>t.nodeType===Node.ELEMENT_NODE)),s=F(Q(p(s)),(t=>t.nodeType===Node.ELEMENT_NODE));let d={},u="",g={};for(let t=0;t<n.length;t++){let e=n[t],s=e.getAttribute("key");if(s){if(d[s]){u=s;break}d[s]=e,o.push(s),g[s]=!0}}if(u)return void ut(`${S(this.diClass.name)} - duplicate key '${u}'`);let m=r;const _=t.startNode.parentNode;let b=[],v=[];if(h(g,((t,e)=>{m[e]||(v.push(e),delete g[e],X(o,e))})),!i(a)){let e="",s=-1,r=[],n=new Map;for(let i=0;i<a.length;i++){const l=a[i];let c=o.findIndex((t=>t===l));if(c>-1&&c!==i){if(s<0||s-c==1){let t=f(r);r.push({nodeId:l,targetId:0===i?zt.AFTER_BEGIN:t?t.nodeId:a[i-1]})}else n.set(r.length,{group:r,targetId:""}),r=[],r.push({nodeId:l,targetId:o[c]});s=c}else if(c<0){let s=e?d[e]||t.endNode:t.startNode;b.push({prevNode:s,newkey:l})}e=l}i(n)&&r.length>0&&n.set(r.length,{group:r,targetId:""});let l=n.keys().toArray(),c=l.sort(((t,e)=>t-e));if(l.length>0&&l.length<2){let{group:e}=n.get(c[0]);E(e).forEach((({targetId:e,nodeId:s})=>{let r,n=d[s];e===zt.AFTER_BEGIN?(r=t.startNode,r.after(n)):(r=d[e],r.after(n))}))}}b.length>0&&this.#M(b,c,a),b.forEach((e=>{let s=e.newkey,r=this.newNodeMap[s],n=e.prevNode;n===t.endNode?n.before(r):(t.startNode,n.after(r))})),v.forEach((t=>{let e=o.findIndex((e=>e==t));this.#O(e);let s=d[t];s&&s.parentNode&&_.removeChild(s)})),this.di.__updatePoints.forEach((t=>{t.key||(t.key=t.value.tmpl.getKey());const e=a.findIndex((e=>e==t.key));t.varIndex=e})),this.di.updateView(l)}}getDirective(){return this.di}newNodeMap={};#M(t,e,s){const r=[],n=[];t.forEach((t=>{let s=t.newkey;r.push(""),n.push(e[s])})),r.push("");let i=new je(r,n),o=this.di.__updatePoints,a=this.di.buildView(i);this.di.__updatePoints.forEach(((t,e)=>{const s=t.value.tmpl.getKey();t.key=s})),this.di.__updatePoints.push(...o),a.forEach((t=>{t instanceof HTMLElement&&(this.newNodeMap[t.getAttribute("key")]=t)}))}#O(t){X(this.di.__updatePoints,((e,s)=>{if(e.varIndex==t)return He.remove(e.node,e.textNode),!0}))}}function Xt(t){return(...e)=>{let s=null;return e.forEach(((t,r)=>{if(m(t)){let n=t;e[r]=function(...t){let e=s.di;wt.startRender(e);let r=n.call(e.renderComponent,...t);return wt.endRender(e.renderComponent),r}}})),s=new Qt(t,...e),s}}const Gt=["resize","outside","mutate"],qt=new WeakMap,Yt=[],Zt=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;let r=qt.get(e.target);if(r){r(new CustomEvent("resize",{bubbles:!1,cancelable:!1,detail:{borderBox:{w:s.inlineSize,h:s.blockSize},contentBox:{w:t.inlineSize,h:t.blockSize}}}),e.target)}}}));var Jt;!function(t){t.Child="child",t.Tree="tree",t.Attr="attr",t.Char="char"}(Jt||(Jt={}));const te=new WeakMap,ee=new MutationObserver((t=>{for(let e=0;e<t.length;e++){const s=t[e];let r=te.get(s.target);if(!r)return;let n={target:s.target},i=null;switch(s.type){case"subtree":n.type=Jt.Tree,i=r[Jt.Tree];break;case"childList":n.type=Jt.Child,n.addedNodes=s.addedNodes,n.removedNodes=s.removedNodes,i=r[Jt.Child];break;case"attributes":n.type=Jt.Attr,n.attributeName=s.attributeName,n.oldValue=s.oldValue,i=r[Jt.Attr];break;case"characterData":n.type=Jt.Char,n.oldValue=s.oldValue,i=r[Jt.Char]}if(i){i(new CustomEvent("mutate",{bubbles:!1,cancelable:!1,detail:n}),s.target)}}}));function se(t,e,s,r){if("resize"===t)!function(t,e){qt.has(t)||(qt.set(t,e),Zt.observe(t))}(e,s);else if("outside"===t){if("mousedown"===r[0])!function(t,e){Yt.push([t,e])}(e,s)}else"mutate"===t&&function(t,e,s){let r=G(s,"child"),n=G(s,"attr"),i=G(s,"char"),o=G(s,"tree"),a=te.get(t);a||(a={},te.set(t,a),r&&(a[Jt.Child]=e),n&&(a[Jt.Attr]=e),i&&(a[Jt.Char]=e),o&&(a[Jt.Tree]=e),ee.observe(t,{childList:r,attributes:n,characterData:i,subtree:o}))}(e,s,r)}document.addEventListener("mousedown",(t=>{let e=t.target;Yt.forEach((([s,r])=>{if(!s.contains(e)){r(new CustomEvent("outside",{bubbles:!1,cancelable:!1,detail:{currentTarget:s,event:t}}),s)}}))}),!1);const re=/,|^(debounce:.+)|(debounce$)/,ne=/,|^(throttle:.+)|(throttle$)/,ie="self",oe="stop",ae="prevent",le="once",ce="left",de="right",he="middle",ue="ctrl",pe="alt",fe="shift",ge="meta",me={esc:"escape"},_e=":";function Ee(t,e,s,r){let n,i=t.split("."),o=i.shift(),a=i.includes(le),l=e;if(n=q(i,(t=>re.test(t)))){let t=n.split(_e);l=R(l,parseInt(t[1])||100)}if(n=q(i,(t=>ne.test(t)))){let t=n.split(_e);l=Y(l,parseInt(t[1])||100)}if(a&&(l=D(l)),function(t){return Gt.includes(t)}(o))return se(o,s,l,i),l;let c=t=>{if(i.includes(ae)&&t.preventDefault(),i.includes(oe)&&t.stopPropagation(),!i.includes(ie)||t.target===t.currentTarget){if(t instanceof MouseEvent){if(i.includes(ce)&&0!=t.button)return;if(i.includes(de)&&2!=t.button)return;if(i.includes(he)&&1!=t.button)return}else if(t instanceof KeyboardEvent){if(X(i,(t=>t==ue))[0]&&!t.ctrlKey)return;if(X(i,(t=>t==pe))[0]&&!t.altKey)return;if(X(i,(t=>t==fe))[0]&&!t.shiftKey)return;if(X(i,(t=>t==ge))[0]&&!t.metaKey)return;if(!Z(i,(t=>me[t]||t)).includes(t.key.toLowerCase()))return}l(t,s)}};s.addEventListener(o,c);let d=r.__events[o];return d||(d=r.__events[o]=[]),d.push([s,c]),c}const be="@",ve=".",Ce="?",ye="*",Se=":",Ne="ref",Te=/[.?-a-z]+\s*=\s*(['"])\s*([^='"]*<\!--c_ui-pl_df-->){2,}.*?\1/ims,Pe=/<\s*[a-z0-9-]+([^>]*<\!--c_ui-pl_df-->)*[^>]*?(?<!-)>/gims,xe="slot-props";function we(t,s){let r="",n=a(s.vars),i=s.strings.length-1,o=s.vars.length-1;for(let n=0;n<=i;n++){const i=s.strings[n];let a=e(s.vars,n,"");if(a&&a.di){let e=a.render(t);if(e instanceof je){let[s,r]=we(t,e);Reflect.defineProperty(a,"_renderVars",{value:r}),a=Ae+s+Me}else a=e??Re}else if(a instanceof je){let[e,s]=we(t,a);Reflect.defineProperty(a,"_renderVars",{value:s}),a=Oe+e+ke}else a=n>o?"":Re;r+=i+a}let l=r.match(Te);if(l){return ut(`Parse error: attribute value can be set only one interpolation —— \n ${J(l[0],Re,"${...}")}`),["",n]}let c=0;return r=r.replace(Pe,((t,e)=>J(t,Re,(()=>Re.replace("--\x3e","")+c++)))),r=r.replace($e,"$1><").trim(),[r,n]}const Ae="\x3c!--c_ui-pl_di-start--\x3e",Me="\x3c!--c_ui-pl_di-end--\x3e",Oe="\x3c!--c_ui-pl_tmpl-start--\x3e",ke="\x3c!--c_ui-pl_tmpl-end--\x3e",Re="\x3c!--c_ui-pl_df--\x3e",Le="\x3c!--c_ui-pl_df",De=/<!--c_ui-pl_df\d*(-->)?/;function Ve(t,s,r,i,a){const l=document.createElement("div");l.innerHTML=s;const c=document.createNodeIterator(l,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_COMMENT);let d,h,_=0,E=null,b=[],v=[],C=[],y=[t],N=[],P=[];for(;d=c.nextNode();)if(d instanceof HTMLElement||d instanceof SVGElement){d instanceof jt?E=d:E?.contains(d)||(E=null);let e={},s=p(d.attributes);for(let n=0;n<s.length;n++){const a=s[n];let{name:l,value:c}=a;if(l===xe){let t=d.getAttribute("name")||"default";if(E){let e=E._slotsPropMap[t];e||(e=E._slotsPropMap[t]=[]),e.push(d)}}if(g(l,Le)){let e=r[_];if(e instanceof Qt){e.checkScope(Bt.TAG);let s=new Kt(d,l.substring(1),Bt.TAG);e.point=s,e.di.slotComponent=E,e.di.renderComponent=i;let r=new Ft(_,d);r.isDirective=!0,r.value=e,r.isComponent=!!E,t.push(r),_++,e.di.created(s,...e.args)}d.removeAttribute(l)}else if(l[0]!==be)if(l!==Ne)if(l[0]!==ve||De.test(c)){if(De.test(c)){let s=r[_],n=new Ft(_,d,l.replace(/\.|\?|@/,""),c);if(t.push(n),n.isComponent=!!E,l[0]===ve||l[0]===Ce||l[0]===ye){if(s instanceof Qt){s.checkScope(Bt.PROP);let t=new Kt(d,l.substring(1),Bt.PROP);s.point=t,s.slotComponent=E,n.value=s,n.isDirective=!0,s&&s.di.created(s.point,...s.args)}else if(l[0]===Ce)n.isToggleProp=!0,n.value=!!s,n.value&&d.setAttribute(l.substring(1),"");else if(l[0]===ye){n.value=s;let t=l.substring(1);const[e,r]=t.split(Se);let i=e;switch(r){case"camel":i=S(i);break;case"kebab":i=u(i);break;case"snake":i=tt(i)}n.attrName=i,d.setAttribute(i,s)}else if(d instanceof jt||"SLOT"===d.tagName){let t=S(l.substring(1));t in d||"SLOT"===d.tagName||pt(d.tagName,`Prop '${l}' is not defined in ${d.tagName}`),n.value=s,n.isProp=!0,e[t]=s}else pt(d.tagName,`Prop '${l}' can only be set on a CompElem or a slot`);d.removeAttribute(l),s=""}else{let t;if(n.value=s,s instanceof Qt){let e=Bt.ATTR;"class"===l?e=Bt.CLASS:"style"===l&&(e=Bt.STYLE),s.checkScope(e),n.isDirective=!0;let r=new Kt(d,l,e);s.point=r,s.di.slotComponent=E,s.di.renderComponent=i,t=s,s=""}c=T(c,De,s),a.value=c,t&&t.di.created(t.point,...t.args)}_++}}else pt(d.tagName,`Prop '${l}' must be an interpolation`);else{if(De.test(c)){let t=r[_];if(!o(t,"current")){pt(d.tagName,"Ref must be a RefObject");continue}_++,t.current=d}d.removeAttribute(l)}else{let e=t=>{};if(De.test(c)){let s=r[_];if(!m(s)){pt(d.tagName,`Event '${l}' must be a function`);continue}e=s.bind(i);let n=new Ft(_,d,l.replace(/\.|\?|@/,""),c);n.isComponent=!!E,n.isEvent=!0,t.push(n),_++}Ee(l.substring(1),e,d,i),d.removeAttribute(l)}}d instanceof jt?d._initProps(e):d instanceof HTMLSlotElement&&i._bindSlot(d,d.name||"default",e)}else{let s=d,o=`\x3c!--${s.nodeValue}--\x3e`;if(o===Ae){h&&b.push(h),h=s;let e=r[_],n=new Ft(_,d);n.isComponent=!!E,n.isDirective=!0,n.value=e;let o=E?Bt.SLOT:Bt.TEXT,a=new Kt(h,"",o);e.point=a,e.di.slotComponent=E,e.di.renderComponent=i,v.push(e),t.push(n),C.push(n),t=[],y.push(t),_++,P.push(_),N.push(r),r=e._renderVars,_=0;continue}if(o===Me){C.pop().textNode=s;let e=v.pop();e.point.endNode=s,e.di.created(e.point,...e.args),h=b.pop(),e.di.__updatePoints=t,y.pop(),t=f(y),r=N.pop(),_=P.pop()}else{if(o===Oe){h&&b.push(h),h=s;let n=r[_],o=new Ft(_,d);o.isComponent=!!E,o.isTmpl=!0;let l=f(v);(l&&"ForEach"===e(l,"diClass.name")||"ForEach"==a.constructor.name)&&(o.key=n.getKey()),n=o.value=new Ht(n);let c=E?Bt.SLOT:Bt.TEXT,u=new Kt(h,"",c);n.point=u,n.slotComponent=E,n.renderComponent=i,v.push(n),t.push(o),C.push(o),t=[],y.push(t),_++,P.push(_),N.push(r),r=n._renderVars,_=0;continue}if(o===ke){C.pop().textNode=s;let e=v.pop();e.point.endNode=s,h=b.pop(),e.__updatePoints=t,y.pop(),t=f(y),r=N.pop(),_=P.pop()}}if(o!==Re)continue;let l=new Ft(_,d);t.push(l),l.isComponent=!!E,l.isText=!0;let c,u=r[_];if(c=document.createComment(`compelem-ui-${_}-child-start`),s.parentNode.insertBefore(c,s),s.nodeValue=`compelem-ui-${_}-child-end`,l.textNode=c,u instanceof Qt){l.isDirective=!0,l.value=u;let t=E?Bt.SLOT:Bt.TEXT,e=new Kt(c,"",t);e.endNode=s,u.point=e,u.di.slotComponent=E,u.di.renderComponent=i,u.di.created(e,...u.args),u=""}else if(u instanceof je){l.isTmpl=!0,l.value=u;let[e,s]=we(i,u);u=Ve(t,e,s,i,a)}else l.value=u;if(_++,n(u))continue;if(u instanceof NodeList){let t=document.createDocumentFragment();t.append(...u),s.parentNode.insertBefore(t,s)}else if(u instanceof Element)s.parentNode.insertBefore(u,s);else if(I(u)){let t=document.createTextNode(u);s.parentNode.insertBefore(t,s)}}return l.childNodes}const He={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}};function Ie(t,...e){return new je(w(t)?[t]:t,e)}const $e=/([a-z0-9"'])\s*>\s*</gim;function We(t){return{current:t}}class je{strings;vars;constructor(t,e){this.strings=a(t),this.vars=e}getKey(){let t=this.vars,e="";return h(this.strings,((s,r)=>{if(lt.test(s))return e=et(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(lt.test(r)){let r=et(t[s]);e.push(r)}}return i(e)&&t.forEach((t=>{if(t instanceof je){let s=t.getKey();e.push(s)}})),e}append(t){let e=f(this.strings);return t.strings.forEach(((t,s)=>{0!=s?this.strings.push(t):this.strings[this.strings.length-1]=e+t})),this.vars=a(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]=we(t,this),r=Ve([],e,s,t,t);return st(r,((t,e)=>t+e.outerHTML),"")}}function Ue(t,e,s){s.get||ut(`Computed '${e}' must be a getter`),o(t.constructor,dt.COMPUTED)||(t.constructor[dt.COMPUTED]=i(t.constructor[dt.COMPUTED])?{}:d(t.constructor[dt.COMPUTED])),t.constructor[dt.COMPUTED][e]=s.get}function Be(t,e){return(s,r,n)=>{o(s.constructor,dt.EVENTS)||(s.constructor[dt.EVENTS]=i(s.constructor[dt.EVENTS])?[]:d(s.constructor[dt.EVENTS])),s.constructor[dt.EVENTS].push({name:t,options:e,fn:s[r]})}}var ze;!function(t){t.ONCE="once",t.UPDATABLE="updatable"}(ze||(ze={}));class Fe extends mt{static get priority(){return Number.MAX_VALUE}created(t,e,s,...r){}mounted(t,e,...s){}get targets(){return[ht.FIELD]}selector;cache;result;constructor(t,e){super(),this.selector=t,this.cache=e}static getKey(t){return t}getter(t){this.result=t.shadowRoot?.querySelector(this.selector)}beforeMount(t,e,s,r,...n){const i=this;Reflect.defineProperty(t,r,{get:()=>(i.result&&i.cache||i.getter(t),i.result)})}updated(t,e){this.cache===ze.UPDATABLE&&this.getter(t)}}const Ke=yt(Fe),Qe=yt(class extends Fe{getter(t){this.result=t.shadowRoot?.querySelectorAll(this.selector)}});function Xe(t){if(1===arguments.length)return(e,s)=>{Ge(e,s,t)};Ge(arguments[0],arguments[1],{prop:""})}function Ge(t,e,s){if(!o(t.constructor,dt.STATES)){const e={};let s=t.constructor;for(;(s=gt(s))!==jt;)c(e,s[dt.STATES]?d(s[dt.STATES]):{});Reflect.defineProperty(t.constructor,dt.STATES,{configurable:!1,enumerable:!1,value:e})}t.constructor[dt.STATES][e]=s}function qe(t,e,s){Ge(t.prototype,e,s||{prop:""})}function Ye(t){return e=>{if(e){if(e.prototype.hasOwnProperty("attributeChangedCallback")){let t=e.prototype.attributeChangedCallback;e.prototype.attributeChangedCallback=function(e,s,r){jt.prototype.attributeChangedCallback.call(this,e,s,r),t.call(this,e,s,r)}}if(e.prototype.hasOwnProperty("connectedCallback")){let t=e.prototype.connectedCallback;e.prototype.connectedCallback=function(){jt.prototype.connectedCallback.call(this),t.call(this)}}if(e.prototype.hasOwnProperty("disconnectedCallback")){let t=e.prototype.connectedCallback;e.prototype.disconnectedCallback=function(){jt.prototype.disconnectedCallback.call(this),t.call(this)}}customElements.define(t,e)}}}function Ze(t,e){return(s,r)=>{o(s.constructor,dt.WATCH)||(s.constructor[dt.WATCH]=i(s.constructor[dt.WATCH])?{}:d(s.constructor[dt.WATCH]));(_(t)?t:[t]).forEach((t=>{let n=t.replaceAll(".","-"),i=s.constructor[dt.WATCH][n];_(i)||(i=s.constructor[dt.WATCH][n]=[]),i.push({source:t,options:e,handler:s[r]})}))}}class Je extends(Vt(Object)){_renderArgs;static get scopes(){return[]}renderParams}const ts=["key"];const es=Xt(class extends Je{created(t,e){let s=t.startNode;if(s instanceof jt){let t={},r={};h(e,((e,n)=>{ts.includes(n)||(n in s?t[n]=e:r[n]=e+"")})),s._initProps(t,r)}else h(e,((t,e)=>{s.setAttribute(e,t)}))}update(t,e,s){return Ut.NONE}static get scopes(){return[Bt.TAG]}render(t){}});const ss=Xt(class extends Je{created(t,e){let r=[];_(e)?r=Q(e):s(e)?r=x(e,((t,e)=>t?e:[])):w(e)&&(r=e.split(" "));let n=t.startNode;h(this.lastCls,(t=>{n.classList.remove(t)})),h(r,(t=>{n.classList.add(t)})),this.lastCls=a(r)}update(t,e,s){return this.created(t,e[0]),Ut.NONE}static get scopes(){return[Bt.CLASS]}lastCls;render(t){}});const rs=Xt(class extends Je{created(t,...e){}update(t,e,s){if(i(t.getNodes())&&(!e||i(e[0])))return Ut.NONE;if(rt(this.lastAry,e[0])&&this.lastAry.length===e[0].length)return Ut.NONE;if(!i(this.renderParams)){let t=f(this.renderParams);_(t)||(t=[t]),this.renderParams=t}return this.lastAry=nt(e[0]),Ut.UPDATE}constructor(t){super(),i(this.renderParams)||(this.renderParams=p(f(this.renderParams)))}static get scopes(){return[Bt.TEXT,Bt.SLOT]}lastAry;lastRenderTmpl;render(t,e){let s=Z(t,((t,s)=>e(t,s)));if(s.length<1)return this.lastRenderTmpl=new je([],[]),this.lastRenderTmpl;let r=[],n=[];const i=[],o=[];for(let t=0;t<s.length;t++){const e=s[t];let a=f(n),l=e.vars,c=!0,d=e.strings;for(let t=0;t<d.length;t++){const e=d[t];if(lt.test(e)){let e=l[t]+"";if(r.includes(e))return void ut(`forEach - duplicate key '${e}'`);r.push(e),c=!1}0==t&&a?n[n.length-1]=a+e:n.push(e)}if(c)return void ut("forEach - missing 'key' prop");let h=f(i);h&&d.length>0&&(i[i.length-1]=I(h)+d.shift()),i.push(""),o.push(e)}return this.lastAry=nt(t),i.push(""),this.lastRenderTmpl=new je(i,o),this.lastRenderTmpl}});const ns=Xt(class extends Je{created(t,...e){}ifNodes;elseNodes;static get scopes(){return[Bt.TEXT,Bt.SLOT]}update(t,e,s){return!!e[0]==!!s[0]?Ut.NONE:(e[0],Ut.REPLACE)}render(t,e,s){return t?e(t):s(t)}});const is=Xt(class extends Je{created(t,...e){}static get scopes(){return[Bt.TEXT,Bt.SLOT]}update(t,e,s){return e[0]===s[0]?Ut.NONE:e[0]?Ut.REPLACE:Ut.REMOVE}render(t,e){return t?e():Ie``}});var os;!function(t){t.CHANGE="change",t.INPUT="input"}(os||(os={}));const as=Xt(class extends Je{created(r,n,i){this.modelPath||(this.modelPath=f(this.renderParams)),i&&(this.modelPath=t(i));const o=r.startNode;if("binded"!==e(o,"_model"))if(s(n)||I(n)||(n=""),o instanceof jt)o._initProps({value:n}),o.addEventListener("update:value",(t=>{y(this.renderComponent,this.modelPath,t.detail.value)})),y(o,"_model","binded");else if(o instanceof HTMLTextAreaElement)o.setAttribute("value",n+""),o.addEventListener("input",(t=>{let e=t.target;y(this.renderComponent,this.modelPath,e.value)})),y(o,"_model","binded");else if(o instanceof HTMLInputElement){let t="",e="";switch(o.type){case"checkbox":case"radio":t="checked",e="change";break;default:t="value",e="input"}o.setAttribute(t,n+""),o.addEventListener(e,(t=>{let e=t.target;y(this.renderComponent,this.modelPath,e.value)})),y(o,"_model","binded")}else o instanceof HTMLSelectElement&&(o.setAttribute("value",n+""),o.addEventListener("change",(t=>{let e=t.target;y(this.renderComponent,this.modelPath,e.value)})),y(o,"_model","binded"))}update(t,e,s){if(this.modelPath||(this.modelPath=f(this.renderParams)),!N(e,s)){const s=t.startNode;if(s instanceof jt)s._updateProps({value:e[0]});else if(s instanceof HTMLTextAreaElement||s instanceof HTMLSelectElement)s.setAttribute("value",e[0]+"");else if(s instanceof HTMLInputElement)switch(s.type){case"checkbox":case"radio":e[0]?s.setAttribute("checked",""):s.removeAttribute("checked");break;default:s.setAttribute("value",e[0]+"")}}return Ut.NONE}static get scopes(){return[Bt.TAG]}modelPath;render(t,e){}});const ls=Xt(class extends Je{created(t,e){let s=t.startNode;n(this.display)&&(this.display=s.style.display),this.renderComponent.nextTick((()=>{s.style.display=e?this.display:"none"}))}update(t,e,s){return this.created(t,e[0]),Ut.NONE}display=void 0;static get scopes(){return[Bt.TAG]}constructor(t){super(),this.point=t}render(t){}});const cs=Xt(class extends Je{created(t,e,s){e=e.bind(this.renderComponent),this.slotComponent._bindSlotHook(s||"default",e)}update(t,e,s){return Ut.NONE}static get scopes(){return[Bt.SLOT]}render(t,e){}});class ds{static getCssText(t){return w(t)?t:v(Z(t,((t,e)=>u(e)+":"+t)),";")}static setStyle(t,e){if(w(t)&&!I(t))return{};let s=ds.getCssText(t),r={};return h(s.split(";"),(t=>{let s=t.split(":"),n=I(s[0]),i=I(s[1]);r[n]=e.style.getPropertyValue(n),e.style.setProperty(n,i)})),r}}const hs=Xt(class extends Je{created(t,e){ds.setStyle(e,t.startNode)}update(t,e,s){return this.created(t,e[0]),Ut.NONE}constructor(t){super(),this.point=t}static get scopes(){return[Bt.STYLE]}render(t){}});const us=Xt(class extends Je{created(t,e){this.modelPath||(this.modelPath=f(this.renderParams));const s=t.startNode;let r=t.attrName;s._initProps({[r]:e}),s.addEventListener("update:"+r,(t=>{y(this.renderComponent,this.modelPath,t.detail.value)}))}update(t,e,s){if(!N(e,s)){const s=t.startNode;let r=t.attrName;s._updateProps({[r]:e[0]})}return Ut.NONE}static get scopes(){return[Bt.PROP]}modelPath;constructor(t){super()}render(t){}});const ps=Xt(class extends Je{created(t,...e){}static get scopes(){return[Bt.TEXT,Bt.SLOT]}update(t,e,s){return N(e,s)?Ut.NONE:Ut.REPLACE}render(t,e){let s=()=>Ie``,r=[],n=[];h(e,((t,e)=>{if(m(t))r.push(e),n.push(t);else{let e=t[0],s=t[1];r.push(e),n.push(s)}"default"===e&&(s=t)}));let i=it(r,(e=>m(e)?e(t):e==t));return ot(n[i]??s)}});export{jt as CompElem,ds as CssHelper,mt as Decorator,ht as DecoratorType,vt as DecoratorWrapper,Je as Directive,Ut as DirectiveUpdateTag,Qt as DirectiveWrapper,Kt as EnterPoint,Bt as EnterPointType,_t as GetKeyFnName,os as ModelTriggerType,ze as QueryCache,je as Template,Ft as UpdatePoint,bt as _DecoratorMap,Et as _DecoratorsKey,xt as _getObservedAttrs,es as bind,we as buildHTML,ss as classes,Ue as computed,We as createRef,yt as decorator,Xt as directive,Be as event,rs as forEach,Ie as html,ns as ifElse,is as ifTrue,qe as makeState,as as model,Nt as prop,Ke as query,Qe as queryAll,ls as show,cs as slot,Xe as state,hs as styles,us as sync,Ye as tag,Ze as watch,ps as when};